.language-selector{display:flex;gap:8px;align-items:center}.lang-btn{padding:6px 12px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;display:flex;align-items:center;gap:4px}.lang-btn:hover{background:#f5f5f5;border-color:#4caf50}.lang-btn.active{background:#4caf50;color:#fff;border-color:#4caf50}.lang-btn:focus{outline:none;box-shadow:0 0 0 3px #4caf5033}.layout{display:flex;min-height:100vh}.sidebar{width:260px;background:var(--gray-900);color:#fff;display:flex;flex-direction:column;position:fixed;height:100vh;left:0;top:0;z-index:100}.sidebar-header{padding:24px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-header>div:first-child{display:flex;align-items:center;gap:12px}.user-info{font-size:12px;color:var(--gray-400);padding:8px 12px;background:#ffffff0d;border-radius:6px}.logo-icon{color:var(--primary);flex-shrink:0}.sidebar-header h1{font-size:20px;font-weight:700;letter-spacing:-.5px}.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;color:var(--gray-300);transition:all .2s;margin-bottom:4px;text-decoration:none}.nav-item:hover{background:#ffffff0d;color:#fff;text-decoration:none}.nav-item.active{background:var(--primary);color:#fff}.nav-item svg{flex-shrink:0}.sidebar-footer{padding:16px 12px;border-top:1px solid rgba(255,255,255,.1)}.logout-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:#ef44441a;border:none;border-radius:8px;color:#ef4444;font-size:14px;cursor:pointer;transition:all .2s;margin-bottom:12px}.logout-btn:hover{background:#ef444433}.version{text-align:center;color:var(--gray-500);font-size:12px}.main-content{flex:1;margin-left:260px;padding:32px;max-width:100%;overflow-x:hidden}@media (max-width: 768px){.sidebar{width:70px}.sidebar-header h1,.nav-item span,.sidebar-footer{display:none}.main-content{margin-left:70px;padding:16px}}.theme-toggle{background:none;border:2px solid var(--border-color, #ddd);border-radius:50%;width:44px;height:44px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;padding:0}.theme-toggle:hover{transform:scale(1.1);border-color:var(--primary-color, #007bff);background:var(--hover-bg, rgba(0, 123, 255, .1))}.theme-toggle:active{transform:scale(.95)}[data-theme=dark] .theme-toggle{border-color:#444;background:#ffffff0d}[data-theme=dark] .theme-toggle:hover{border-color:orange;background:#ffa5001a}.landing-page{width:100%;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);transition:background .3s ease}[data-theme=dark] .landing-page{background:linear-gradient(135deg,#1a1a2e,#16213e)}[data-theme=dark] .landing-nav{background:#1a1a2ef2;border-bottom:1px solid rgba(255,255,255,.1)}[data-theme=dark] .nav-logo{color:#667eea}[data-theme=dark] .nav-toggle,[data-theme=dark] .nav-links a{color:#e0e0e0}[data-theme=dark] .nav-links a:hover{color:#667eea}[data-theme=dark] .hero-badge{background:#667eea33;color:#a5b4fc}[data-theme=dark] .hero-title,[data-theme=dark] .hero-subtitle,[data-theme=dark] .section-header h2,[data-theme=dark] .section-header p{color:#e0e0e0}[data-theme=dark] .feature-card{background:#2a2a3ecc;border:1px solid rgba(255,255,255,.1)}[data-theme=dark] .feature-card h3{color:#e0e0e0}[data-theme=dark] .feature-card p{color:#b0b0b0}[data-theme=dark] .step{background:#2a2a3ecc;border:1px solid rgba(255,255,255,.1)}[data-theme=dark] .step h3{color:#e0e0e0}[data-theme=dark] .step p{color:#b0b0b0}[data-theme=dark] .pricing-card{background:#2a2a3ecc;border:1px solid rgba(255,255,255,.1)}[data-theme=dark] .pricing-card h3{color:#e0e0e0}[data-theme=dark] .pricing-card .price{color:#667eea}[data-theme=dark] .features-list li{color:#b0b0b0}[data-theme=dark] .cta{background:linear-gradient(135deg,#1a1a2ee6,#16213ee6)}[data-theme=dark] .cta h2{color:#e0e0e0}[data-theme=dark] .cta p{color:#b0b0b0}[data-theme=dark] .landing-footer{background:#10101ef2;border-top:1px solid rgba(255,255,255,.1)}[data-theme=dark] .footer-logo span,[data-theme=dark] .footer-links a,[data-theme=dark] .footer-contact p,[data-theme=dark] .footer-bottom p{color:#e0e0e0}[data-theme=dark] .footer-contact a{color:#667eea}[data-theme=dark] .device-card{background:#2a2a3ecc;border:1px solid rgba(255,255,255,.1)}[data-theme=dark] .device-name,[data-theme=dark] .device-status{color:#e0e0e0}[data-theme=dark] .nav-links{background:#1a1a2efa}.landing-nav{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 10px #0000001a;z-index:1000}.nav-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.nav-logo{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700;color:#667eea}.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:#333}.nav-links{display:flex;align-items:center;gap:2rem}.nav-links a{color:#333;text-decoration:none;font-weight:500;cursor:pointer;transition:color .3s}.nav-links a:hover{color:#667eea}.btn-login{padding:.6rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s}.btn-login:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.hero{padding:8rem 2rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1200px;margin:0 auto;align-items:center}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#fff3;border-radius:20px;color:#fff;font-size:.9rem;margin-bottom:1.5rem}.hero-title{font-size:3.5rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:1.5rem}.text-gradient{background:linear-gradient(135deg,gold,#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.2rem;color:#ffffffe6;line-height:1.6;margin-bottom:2rem}.hero-buttons{display:flex;gap:1rem;margin-bottom:3rem}.btn-primary{display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;background:#fff;color:#667eea;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0003}.btn-primary.large{padding:1.2rem 2.5rem;font-size:1.2rem}.btn-secondary{padding:1rem 2rem;background:transparent;color:#fff;border:2px solid white;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s}.btn-secondary:hover{background:#fff;color:#667eea;transform:translateY(-3px)}.btn-secondary.large{padding:1.2rem 2.5rem;font-size:1.2rem}.hero-stats{display:flex;gap:3rem}.stat{text-align:center}.stat-number{font-size:2rem;font-weight:700;color:#fff;margin-bottom:.3rem}.stat-label{color:#fffc;font-size:.9rem}.hero-image{display:flex;justify-content:center;align-items:center}.device-card{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 20px 60px #0000004d;transform:perspective(1000px) rotateY(-10deg);transition:transform .3s}.device-card:hover{transform:perspective(1000px) rotateY(0)}.device-screen{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;padding:2rem;min-width:250px}.status-indicator{width:12px;height:12px;border-radius:50%;margin-bottom:1rem;animation:pulse 2s infinite}.status-indicator.online{background:#4ade80;box-shadow:0 0 20px #4ade8080}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.device-info{color:#fff}.device-name{font-weight:600;font-size:1.2rem;margin-bottom:.5rem}.device-status{font-size:1.5rem}section{padding:4rem 2rem;max-width:1200px;margin:0 auto}.section-header{text-align:center;margin-bottom:3rem}.section-header h2{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:.5rem}.section-header p{font-size:1.2rem;color:#fffc}.features{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:4rem 2rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.feature-card{background:#fff;padding:2rem;border-radius:15px;text-align:center;transition:transform .3s}.feature-card:hover{transform:translateY(-10px);box-shadow:0 10px 30px #0003}.feature-icon{color:#667eea;margin-bottom:1rem}.feature-card h3{font-size:1.3rem;margin-bottom:.5rem;color:#333}.feature-card p{color:#666;line-height:1.6}.how-it-works{background:#ffffff0d;border-radius:20px;padding:4rem 2rem}.steps{display:flex;justify-content:center;align-items:center;gap:2rem;flex-wrap:wrap}.step{background:#fff;padding:2rem;border-radius:15px;text-align:center;max-width:250px;flex:1}.step-number{width:60px;height:60px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 1rem}.step h3{font-size:1.2rem;margin-bottom:.5rem;color:#333}.step p{color:#666;line-height:1.6}.step-arrow{font-size:2rem;color:#fff;font-weight:700}.pricing{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:4rem 2rem}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.pricing-card{background:#fff;border-radius:15px;padding:2rem;position:relative;transition:transform .3s}.pricing-card:hover{transform:scale(1.05);box-shadow:0 20px 40px #0003}.pricing-card.recommended{border:3px solid #ffd700;transform:scale(1.05)}.recommended-badge{position:absolute;top:-15px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,gold,#ffed4e);color:#333;padding:.5rem 1.5rem;border-radius:20px;font-weight:700;font-size:.9rem}.pricing-card h3{font-size:1.5rem;margin-bottom:1rem;color:#333}.price{margin-bottom:2rem;padding-bottom:2rem;border-bottom:2px solid #f0f0f0}.currency{font-size:1.5rem;color:#666;vertical-align:top}.amount{font-size:3rem;font-weight:700;color:#667eea}.duration{font-size:1rem;color:#999}.features-list{list-style:none;padding:0;margin-bottom:2rem}.features-list li{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;color:#666}.features-list svg{color:#4ade80;flex-shrink:0}.btn-purchase{width:100%;padding:1rem;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s}.btn-purchase.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-purchase.secondary{background:#f0f0f0;color:#333}.btn-purchase:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0003}.cta{text-align:center;padding:4rem 2rem;background:#ffffff0d;border-radius:20px}.cta h2{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:1rem}.cta p{font-size:1.2rem;color:#fffc;margin-bottom:2rem}.cta-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.landing-footer{background:#0000004d;color:#fff;padding:3rem 2rem 1rem}.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}.footer-logo{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700}.footer-links{display:flex;flex-direction:column;gap:.5rem}.footer-links a{color:#fffc;text-decoration:none;cursor:pointer;transition:color .3s}.footer-links a:hover{color:#fff}.footer-contact a{color:gold;text-decoration:none}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);color:#fff9}@media (max-width: 768px){.nav-toggle{display:block}.nav-links{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:1rem;box-shadow:0 4px 10px #0000001a;display:none;gap:1rem}[data-theme=dark] .nav-links{background:#1a1a2efa}.nav-links.active{display:flex}.nav-links>div{width:100%;justify-content:center}.hero{grid-template-columns:1fr;padding-top:6rem}.hero-title{font-size:2.5rem}.hero-buttons{flex-direction:column}.section-header h2{font-size:2rem}.step-arrow{display:none}.cta h2{font-size:2rem}.cta-buttons{flex-direction:column}}.admin-login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem}.login-container{width:100%;max-width:450px}.login-card{background:#fff;border-radius:20px;padding:3rem;box-shadow:0 20px 60px #0000004d}.login-header{text-align:center;margin-bottom:2rem}.logo{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;color:#fff;margin-bottom:1rem}.login-header h1{font-size:2rem;font-weight:700;color:#333;margin-bottom:.5rem}.login-header p{color:#666;font-size:1.1rem}.alert{padding:1rem;border-radius:10px;margin-bottom:1.5rem;font-size:.95rem}.alert-error{background:#fee;color:#c00;border:1px solid #fcc}.login-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#333;font-size:.95rem}.form-group input{padding:1rem;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;transition:all .3s}.form-group input:disabled{background:#f5f5f5;cursor:not-allowed}.btn-login{padding:1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s;margin-top:.5rem}.btn-login:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.btn-login:disabled{opacity:.6;cursor:not-allowed}.login-footer{margin-top:2rem;text-align:center}.btn-back{background:none;border:none;color:#666;font-size:.95rem;cursor:pointer;padding:.5rem 1rem;transition:color .3s}.btn-back:hover{color:#667eea}@media (max-width: 768px){.login-card{padding:2rem}.login-header h1{font-size:1.5rem}}.customer-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.customer-login-box{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;padding:40px;width:100%;max-width:450px}.login-header{text-align:center;margin-bottom:30px}.login-header h1{font-size:32px;color:#667eea;margin:0 0 10px}.login-header p{color:#666;font-size:16px;margin:0}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:#333;font-size:14px}.form-group input{padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;transition:all .3s ease}.form-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-hint{color:#666;font-size:12px;margin-top:-4px}.error-message{background:#fee;border:1px solid #fcc;color:#c33;padding:12px 16px;border-radius:8px;font-size:14px}.login-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 24px;font-size:16px;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease;margin-top:10px}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{opacity:.6;cursor:not-allowed}.login-footer{margin-top:30px;text-align:center;padding-top:20px;border-top:1px solid #e0e0e0}.login-footer a{color:#667eea;text-decoration:none;font-weight:500;transition:color .3s ease}.login-footer a:hover{color:#764ba2}@media (max-width: 480px){.customer-login-box{padding:30px 20px}.login-header h1{font-size:28px}}.stat-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 3px #0000001a;border-left:4px solid var(--primary);transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.stat-card-blue{border-left-color:var(--primary)}.stat-card-green{border-left-color:var(--success)}.stat-card-yellow{border-left-color:var(--warning)}.stat-card-red{border-left-color:var(--danger)}.stat-card-content{display:flex;flex-direction:column;gap:8px}.stat-card-header{display:flex;justify-content:space-between;align-items:center}.stat-card-title{font-size:14px;color:var(--gray-600);font-weight:500}.stat-card-icon{color:var(--gray-400)}.stat-card-value{font-size:32px;font-weight:700;color:var(--gray-900);line-height:1}.stat-card-trend{font-size:12px;font-weight:600}.stat-card-trend.positive{color:var(--success)}.stat-card-trend.negative{color:var(--danger)}.card{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.card-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--gray-200)}.card-title{font-size:18px;font-weight:600;color:var(--gray-900)}.card-action{display:flex;gap:8px}.card-body{padding:24px}.dashboard{max-width:1400px}.page-header{margin-bottom:32px}.page-header h1{font-size:32px;font-weight:700;color:var(--gray-900);margin-bottom:4px}.page-subtitle{color:var(--gray-600);font-size:14px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:32px}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:24px}.loading{display:flex;align-items:center;justify-content:center;min-height:400px;font-size:18px;color:var(--gray-500)}.empty{text-align:center;padding:40px;color:var(--gray-500)}.device-list{display:flex;flex-direction:column;gap:12px}.device-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--gray-50);transition:background .2s}.device-item:hover{background:var(--gray-100)}.device-status{width:10px;height:10px;border-radius:50%;flex-shrink:0}.device-info{flex:1}.device-name{font-weight:600;color:var(--gray-900);margin-bottom:2px}.device-customer{font-size:13px;color:var(--gray-600)}.device-time{font-size:12px;color:var(--gray-500)}.event-list{display:flex;flex-direction:column;gap:12px}.event-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--gray-50)}.event-type{font-size:20px;flex-shrink:0}.event-info{flex:1}.event-site{font-weight:600;color:var(--gray-900);margin-bottom:2px}.event-time{font-size:13px;color:var(--gray-600)}@media (max-width: 1024px){.dashboard-grid{grid-template-columns:1fr}}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;transition:all .2s;cursor:pointer;border:none;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-dark)}.btn-secondary{background:var(--gray-200);color:var(--gray-700)}.btn-secondary:hover:not(:disabled){background:var(--gray-300)}.btn-success{background:var(--success);color:#fff}.btn-success:hover:not(:disabled){background:#059669}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}.btn-outline:hover:not(:disabled){background:var(--primary);color:#fff}.btn-sm{padding:6px 12px;font-size:12px}.btn-md{padding:10px 16px;font-size:14px}.btn-lg{padding:14px 24px;font-size:16px}.btn-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite}.customers-page{max-width:1400px}.result-count{font-size:14px;color:var(--gray-600);font-weight:500}.telegram-user{font-family:Courier New,monospace;color:var(--primary);font-weight:500}.device-count{font-weight:600;color:var(--gray-700)}.devices-page{max-width:1600px}.device-status{width:12px;height:12px;border-radius:50%;margin:0 auto}.device-status.online{background:var(--success);box-shadow:0 0 8px var(--success)}.device-status.offline{background:var(--gray-400)}.site-name{font-weight:600;color:var(--gray-900)}.device-id{font-family:Courier New,monospace;font-size:12px;font-weight:600;color:var(--gray-700)}.power-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.power-badge.on{background:#d1fae5;color:#065f46}.power-badge.off{background:#fee2e2;color:#991b1b}.keys-page{max-width:1600px}.header-actions{display:flex;gap:12px}.stats-bar{display:flex;gap:24px;padding:20px;background:#fff;border-radius:12px;margin-bottom:24px;box-shadow:0 1px 3px #0000001a}.stat-item{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:13px;color:var(--gray-600);font-weight:500}.stat-value{font-size:28px;font-weight:700;color:var(--gray-900)}.text-primary{color:var(--primary)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-danger{color:var(--danger)}.text-muted{color:var(--gray-500)}.text-sm{font-size:13px}.table-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px;flex-wrap:wrap}.search-box{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--gray-50);border-radius:8px;border:1px solid var(--gray-200);flex:1;max-width:400px}.search-box svg{color:var(--gray-400)}.search-box input{border:none;background:none;outline:none;flex:1;font-size:14px}.filter-tabs{display:flex;gap:4px;background:var(--gray-100);padding:4px;border-radius:8px}.filter-tabs button{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;color:var(--gray-600);transition:all .2s}.filter-tabs button:hover{background:var(--gray-200)}.filter-tabs button.active{background:#fff;color:var(--primary);box-shadow:0 1px 3px #0000001a}.data-table th{text-align:left;padding:12px 16px;font-size:13px;font-weight:600;color:var(--gray-700);background:var(--gray-50);border-bottom:2px solid var(--gray-200)}.data-table td{padding:14px 16px;border-bottom:1px solid var(--gray-200);font-size:14px}.data-table tbody tr:hover{background:var(--gray-50)}.key-code{font-family:Courier New,monospace;font-weight:600;color:var(--primary)}.badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;text-transform:uppercase}.badge-s2-mini{background:#dbeafe;color:#1e40af}.badge-t-display{background:#fce7f3;color:#be185d}.customer-name{font-weight:600;color:var(--gray-900)}.customer-phone{font-size:12px;color:var(--gray-600);margin-top:2px}.status-badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.status-badge.active{background:#d1fae5;color:#065f46}.status-badge.unused{background:#fef3c7;color:#92400e}.status-badge.expired{background:#fee2e2;color:#991b1b}.status-badge.inactive{background:var(--gray-200);color:var(--gray-600)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;width:90%;max-width:500px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{padding:24px;border-bottom:1px solid var(--gray-200)}.modal-header h2{font-size:20px;font-weight:700;color:var(--gray-900)}.modal-body{padding:24px;overflow-y:auto}.modal-footer{padding:20px 24px;border-top:1px solid var(--gray-200);display:flex;justify-content:flex-end;gap:12px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--gray-700)}.form-group input,.form-group select{width:100%;padding:10px 14px;border:1px solid var(--gray-300);border-radius:8px;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary)}.form-group textarea{width:100%;padding:10px 14px;border:1px solid var(--gray-300);border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;transition:border-color .2s}.bulk-actions-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;margin-bottom:24px;box-shadow:0 4px 12px #667eea4d}.bulk-actions-bar span{font-weight:600;font-size:15px}.bulk-actions{display:flex;gap:12px}.action-buttons{display:flex;gap:8px;align-items:center}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:var(--gray-100);color:var(--gray-600);transition:all .2s;cursor:pointer;border:none}.btn-icon:hover{background:var(--gray-200);color:var(--gray-900)}.btn-icon.btn-danger{background:#fee2e2;color:#991b1b}.btn-icon.btn-danger:hover{background:#fecaca;color:#7f1d1d}.modal-content{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;width:90%;max-width:500px;max-height:90vh;overflow:hidden}.modal-content h2{font-size:20px;font-weight:700;color:var(--gray-900);margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--gray-200)}.modal-body{padding:24px;max-height:calc(90vh - 200px);overflow-y:auto}.modal-footer{padding:20px 24px;border-top:1px solid var(--gray-200);display:flex;justify-content:flex-end;gap:12px;background:var(--gray-50)}.events-page{max-width:1400px}.event-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.event-badge.POWER_DOWN{background:#fee2e2;color:#991b1b}.event-badge.POWER_RECOVER{background:#d1fae5;color:#065f46}.duration{font-weight:600;color:var(--gray-700)}.notified-badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.notified-badge.yes{background:#d1fae5;color:#065f46}.notified-badge.no{background:var(--gray-200);color:var(--gray-600)}.settings-page{max-width:1200px}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}.setting-item{margin-bottom:20px}.setting-item:last-child{margin-bottom:0}.setting-label{font-size:14px;font-weight:600;color:var(--gray-700);margin-bottom:8px}.setting-item input{width:100%;padding:10px 14px;border:1px solid var(--gray-300);border-radius:8px;font-size:14px}.setting-item input:disabled{background:var(--gray-100);color:var(--gray-600);cursor:not-allowed}.setting-item input:focus{outline:none;border-color:var(--primary)}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #3b82f6;--primary-dark: #2563eb;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--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}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif,Noto Sans Thai,Sarabun;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--gray-50);color:var(--gray-900)}code{font-family:Courier New,monospace;background:var(--gray-100);padding:2px 6px;border-radius:4px;font-size:.9em}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;border:none;background:none;font-family:inherit}input,select,textarea{font-family:inherit;font-size:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--gray-100)}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}.customer-portal{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem 1rem}.portal-container{max-width:1200px;margin:0 auto}.portal-header{text-align:center;color:#fff;margin-bottom:3rem}.portal-header h1{font-size:3rem;margin-bottom:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.portal-header p{font-size:1.2rem;opacity:.9}.login-card{background:#fff;border-radius:12px;padding:2.5rem;box-shadow:0 10px 30px #0003;max-width:450px;margin:0 auto 3rem}.login-card h2{margin-bottom:.5rem;color:#333}.login-subtitle{color:#666;margin-bottom:2rem;font-size:.95rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:#333;font-weight:500}.form-input{width:100%;padding:.875rem;border:2px solid #e1e8ed;border-radius:8px;font-size:1rem;transition:all .3s}.form-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.btn-full{width:100%;padding:1rem;font-size:1.1rem;margin-top:1rem}.portal-footer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e1e8ed;text-align:center;color:#666}.contact-info{margin-top:.5rem;font-size:.95rem}.contact-info a{color:#667eea;text-decoration:none;font-weight:500}.contact-info a:hover{text-decoration:underline}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:3rem}.feature-item{background:#fffffff2;border-radius:12px;padding:2rem;text-align:center;box-shadow:0 5px 15px #0000001a;transition:transform .3s}.feature-item:hover{transform:translateY(-5px)}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-item h3{color:#333;margin-bottom:.5rem}.feature-item p{color:#666;font-size:.95rem}.alert{padding:1rem;border-radius:8px;margin-bottom:1.5rem}.alert-error{background-color:#fee;color:#c33;border:1px solid #fcc}@media (max-width: 768px){.portal-header h1{font-size:2rem}.login-card{padding:1.5rem}.features-grid{grid-template-columns:1fr}}.alert-settings-modal{max-width:500px;width:95%;max-height:90vh;overflow-y:auto}.alert-settings-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 10px;border-bottom:1px solid #e9ecef}.alert-settings-modal .modal-header h3{margin:0;color:#495057;font-size:1.4rem}.alert-settings-modal .modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6c757d;padding:5px;border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center;transition:all .2s}.alert-settings-modal .modal-close:hover:not(:disabled){background-color:#f8f9fa;color:#495057}.alert-settings-modal .modal-close:disabled{opacity:.5;cursor:not-allowed}.alert-settings-modal .modal-body{padding:20px}.alert-settings-modal .device-info{background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:20px;border-left:4px solid #007bff}.alert-settings-modal .device-info h4{margin:0 0 5px;color:#495057;font-size:1.1rem}.alert-settings-modal .device-info p{margin:0;color:#6c757d;font-size:.9rem;font-family:monospace}.alert-settings-modal .form-group{margin-bottom:25px}.alert-settings-modal .form-group label{display:block;margin-bottom:8px;font-weight:600;color:#495057;font-size:.95rem}.alert-settings-modal .form-group small{display:block;margin-top:5px;color:#6c757d;font-size:.85rem;line-height:1.3}.alert-settings-modal .checkbox-label{display:flex;align-items:center;cursor:pointer;position:relative;font-weight:500;margin-bottom:0}.alert-settings-modal .checkbox-label input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid #007bff;border-radius:4px;margin-right:10px;position:relative;cursor:pointer;transition:all .2s}.alert-settings-modal .checkbox-label input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}.alert-settings-modal .checkbox-label input[type=checkbox]:checked:after{content:"✓";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.alert-settings-modal .checkbox-label input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.alert-settings-modal .slider-container{margin:10px 0}.alert-settings-modal .slider{width:100%;height:8px;border-radius:4px;background:#e9ecef;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:all .2s}.alert-settings-modal .slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#007bff;cursor:pointer;transition:all .2s}.alert-settings-modal .slider::-webkit-slider-thumb:hover{background:#0056b3;transform:scale(1.1)}.alert-settings-modal .slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#007bff;cursor:pointer;border:none;transition:all .2s}.alert-settings-modal .slider::-moz-range-thumb:hover{background:#0056b3;transform:scale(1.1)}.alert-settings-modal .slider:disabled{opacity:.5;cursor:not-allowed}.alert-settings-modal .slider:disabled::-webkit-slider-thumb{cursor:not-allowed;transform:none}.alert-settings-modal .slider-value{text-align:center;margin-top:8px;font-weight:600;color:#007bff;font-size:.95rem;padding:5px 10px;background:#e7f3ff;border-radius:15px;display:inline-block;min-width:100px}.alert-settings-modal .modal-actions{margin-top:30px;padding-top:20px;border-top:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center}.alert-settings-modal .action-buttons{display:flex;gap:10px}.alert-settings-modal .btn{padding:10px 20px;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:5px}.alert-settings-modal .btn:disabled{opacity:.6;cursor:not-allowed}.alert-settings-modal .btn-primary{background-color:#007bff;color:#fff}.alert-settings-modal .btn-primary:hover:not(:disabled){background-color:#0056b3;transform:translateY(-1px)}.alert-settings-modal .btn-secondary{background-color:#6c757d;color:#fff}.alert-settings-modal .btn-secondary:hover:not(:disabled){background-color:#545b62;transform:translateY(-1px)}.alert-settings-modal .btn-light{background-color:#f8f9fa;color:#495057;border:1px solid #dee2e6}.alert-settings-modal .btn-light:hover:not(:disabled){background-color:#e2e6ea;border-color:#dae0e5}@media (max-width: 768px){.alert-settings-modal{margin:10px;width:calc(100% - 20px)}.alert-settings-modal .modal-header,.alert-settings-modal .modal-body{padding:15px}.alert-settings-modal .modal-actions{flex-direction:column;gap:15px;align-items:stretch}.alert-settings-modal .action-buttons{justify-content:center}.alert-settings-modal .btn{padding:12px 20px;font-size:1rem}}.alert-settings-modal{animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.customer-dashboard{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;color:#fff}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-container p{margin-top:1rem;font-size:1.1rem}.dashboard-header{background:#fff;box-shadow:0 2px 10px #0000001a;padding:0}.header-content{max-width:1400px;margin:0 auto;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center}.header-left h1{margin:0;font-size:1.8rem;color:#667eea}.header-left p{margin:.5rem 0 0;color:#666}.header-right{display:flex;align-items:center;gap:1rem}.btn-logout{background:#dc3545;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-logout:hover{background:#c82333;transform:translateY(-2px)}.dashboard-container{max-width:1400px;margin:0 auto;padding:2rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.stat-card{background:#fff;border-radius:12px;padding:1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 5px 15px #0000001a;transition:transform .3s ease}.stat-card:hover{transform:translateY(-5px)}.stat-card.total{border-left:4px solid #667eea}.stat-card.used{border-left:4px solid #28a745}.stat-card.active{border-left:4px solid #17a2b8}.stat-card.expired{border-left:4px solid #ffc107}.stat-icon{font-size:2.5rem}.stat-info h3{margin:0;font-size:.9rem;color:#666;font-weight:500}.stat-number{margin:.5rem 0 0;font-size:2rem;font-weight:700;color:#333}.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 5px 15px #0000001a}.section-card.full-width{grid-column:1 / -1}.section-card h2{margin:0 0 1.5rem;font-size:1.3rem;color:#333}.table-container{overflow-x:auto}.data-table{width:100%;border-collapse:collapse}.data-table th{background:#f8f9fa;padding:.75rem;text-align:left;font-weight:600;color:#333;border-bottom:2px solid #dee2e6}.data-table td{padding:.75rem;border-bottom:1px solid #dee2e6}.data-table tr:hover{background:#f8f9fa}.key-code{background:#f1f3f5;padding:.25rem .5rem;border-radius:4px;font-family:Courier New,monospace;font-size:.9rem;color:#495057}.status-badge{display:inline-block;padding:.35rem .75rem;border-radius:20px;font-size:.85rem;font-weight:500}.status-badge.active{background:#d4edda;color:#155724}.status-badge.inactive{background:#f8d7da;color:#721c24}.device-name{font-weight:500;color:#667eea}.text-muted{color:#6c757d;font-style:italic}.device-info{display:flex;flex-direction:column;gap:.25rem}.device-info strong{color:#333;font-size:.95rem}.device-info small{color:#6c757d;font-size:.8rem}.status-dot{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:20px;font-size:.85rem;font-weight:500;color:#fff}.event-type{display:inline-block;padding:.35rem .75rem;border-radius:20px;font-size:.85rem;font-weight:500}.event-type.power_on{background:#d4edda;color:#155724}.event-type.power_off{background:#f8d7da;color:#721c24}.event-type.heartbeat{background:#d1ecf1;color:#0c5460}.event-message{color:#6c757d;font-size:.9rem}.no-data{text-align:center;padding:2rem;color:#6c757d;font-style:italic}@media (max-width: 1200px){.content-grid{grid-template-columns:1fr}}@media (max-width: 768px){.header-content{flex-direction:column;align-items:flex-start;gap:1rem}.dashboard-container{padding:1rem}.stats-grid{grid-template-columns:1fr}.content-grid{gap:1rem}.data-table{font-size:.85rem}.data-table th,.data-table td{padding:.5rem}}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.toggle-report-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease}.toggle-report-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.outage-report{margin-top:1rem}.report-filters{display:flex;gap:2rem;margin-bottom:2rem;padding:1.5rem;background:#f8f9fa;border-radius:12px;flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:.5rem}.filter-group label{font-weight:600;color:#333;font-size:.9rem}.period-buttons{display:flex;gap:.5rem}.period-buttons button{padding:.5rem 1rem;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease}.period-buttons button:hover{background:#f0f0f0}.period-buttons button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.filter-group select{padding:.5rem 1rem;border:2px solid #ddd;border-radius:8px;font-size:1rem;cursor:pointer;min-width:200px}.filter-group select:focus{outline:none;border-color:#667eea}.outage-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-bottom:2rem}.summary-card{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:12px;padding:1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 3px 10px #0000001a}.summary-icon{font-size:2.5rem;line-height:1}.summary-data h4{margin:0 0 .5rem;font-size:.9rem;color:#666;font-weight:500}.summary-number{margin:0;font-size:2rem;font-weight:700;color:#333;line-height:1}.summary-label{font-size:.85rem;color:#888}.stats-by-device{margin-bottom:2rem}.stats-by-device h3{margin-bottom:1rem;color:#333}.device-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.device-stat-card{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:1rem;transition:all .3s ease}.device-stat-card:hover{border-color:#667eea;box-shadow:0 5px 15px #667eea33}.device-stat-card h4{margin:0 0 1rem;color:#667eea;font-size:1.1rem}.stat-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.stat-row:last-child{border-bottom:none}.stat-row span{color:#666}.stat-row strong{color:#333}.daily-chart{margin-bottom:2rem}.daily-chart h3{margin-bottom:1rem;color:#333}.chart-container{display:flex;align-items:flex-end;gap:.5rem;height:250px;padding:1rem;background:#f8f9fa;border-radius:12px;overflow-x:auto}.chart-bar-container{flex:1;min-width:50px;display:flex;flex-direction:column;align-items:center;height:100%}.chart-bar-wrapper{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}.chart-bar{width:100%;max-width:40px;background:linear-gradient(to top,#667eea,#764ba2);border-radius:8px 8px 0 0;position:relative;cursor:pointer;transition:all .3s ease;display:flex;align-items:flex-start;justify-content:center;padding-top:.5rem;min-height:30px}.chart-bar:hover{opacity:.8;transform:scaleY(1.05)}.bar-value{color:#fff;font-size:.85rem;font-weight:600}.chart-label{margin-top:.5rem;font-size:.75rem;color:#666;text-align:center;white-space:nowrap}.recent-outages h3{margin-bottom:1rem;color:#333}.duration-text{color:#dc3545;font-weight:600}@media (max-width: 768px){.report-filters{flex-direction:column}.period-buttons{flex-wrap:wrap}.filter-group select{min-width:100%}.chart-container{padding:.5rem}.summary-number{font-size:1.5rem}}[data-theme=dark] .customer-dashboard{background:linear-gradient(135deg,#1a1a2e,#16213e)}[data-theme=dark] .loading-container{color:#e0e0e0}[data-theme=dark] .spinner{border-color:#fff3;border-top-color:#667eea}[data-theme=dark] .dashboard-header{background:#1e1e2e;box-shadow:0 2px 10px #00000080}[data-theme=dark] .header-left h1{color:#8b9cff}[data-theme=dark] .header-left p{color:#b0b0b0}[data-theme=dark] .header-right{display:flex;align-items:center;gap:1rem}[data-theme=dark] .btn-logout{background:#dc3545;color:#fff}[data-theme=dark] .btn-logout:hover{background:#c82333}[data-theme=dark] .stat-card{background:#2a2a3e;box-shadow:0 5px 15px #0006;border-left-color:var(--card-accent, #667eea)}[data-theme=dark] .stat-card.total{border-left-color:#8b9cff}[data-theme=dark] .stat-card.used{border-left-color:#4ade80}[data-theme=dark] .stat-card.active{border-left-color:#22d3ee}[data-theme=dark] .stat-card.expired{border-left-color:#fbbf24}[data-theme=dark] .stat-info h3{color:#b0b0b0}[data-theme=dark] .stat-number{color:#e0e0e0}[data-theme=dark] .section-card{background:#2a2a3e;box-shadow:0 5px 15px #0006}[data-theme=dark] .section-card h2{color:#e0e0e0}[data-theme=dark] .data-table th{background:#1e1e2e;color:#e0e0e0;border-bottom-color:#3a3a4e}[data-theme=dark] .data-table td{border-bottom-color:#3a3a4e;color:#b0b0b0}[data-theme=dark] .data-table tr:hover{background:#333346}[data-theme=dark] .key-code{background:#1e1e2e;color:#8b9cff}[data-theme=dark] .status-badge.active{background:#065f46;color:#6ee7b7}[data-theme=dark] .status-badge.inactive{background:#7f1d1d;color:#fca5a5}[data-theme=dark] .device-name{color:#8b9cff}[data-theme=dark] .text-muted{color:#888}[data-theme=dark] .device-info strong{color:#e0e0e0}[data-theme=dark] .device-info small,[data-theme=dark] .no-data{color:#888}[data-theme=dark] .event-type.ONLINE{background:#065f46;color:#6ee7b7}[data-theme=dark] .event-type.OFFLINE,[data-theme=dark] .event-type.DOWN{background:#7f1d1d;color:#fca5a5}[data-theme=dark] .event-type.RECOVER{background:#065f46;color:#6ee7b7}[data-theme=dark] .event-type.HEARTBEAT{background:#1e3a8a;color:#93c5fd}[data-theme=dark] .event-message{color:#888}[data-theme=dark] .toggle-report-btn{background:linear-gradient(135deg,#667eea,#764ba2)}[data-theme=dark] .toggle-report-btn:hover{box-shadow:0 5px 15px #667eea99}[data-theme=dark] .report-filters{background:#1e1e2e}[data-theme=dark] .filter-group label{color:#e0e0e0}[data-theme=dark] .period-buttons button{background:#2a2a3e;color:#8b9cff;border-color:#3a3a4e}[data-theme=dark] .period-buttons button:hover{background:#333346}[data-theme=dark] .period-buttons button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}[data-theme=dark] .filter-group select{background:#2a2a3e;color:#e0e0e0;border-color:#3a3a4e}[data-theme=dark] .filter-group select:focus{border-color:#667eea}[data-theme=dark] .summary-card{background:linear-gradient(135deg,#2a2a3e,#1e1e2e);box-shadow:0 3px 10px #00000080}[data-theme=dark] .summary-data h4{color:#b0b0b0}[data-theme=dark] .summary-number{color:#e0e0e0}[data-theme=dark] .summary-label{color:#888}[data-theme=dark] .stats-by-device h3{color:#e0e0e0}[data-theme=dark] .device-stat-card{background:#2a2a3e;border-color:#3a3a4e}[data-theme=dark] .device-stat-card:hover{border-color:#667eea;box-shadow:0 5px 15px #667eea4d}[data-theme=dark] .device-stat-card h4{color:#8b9cff}[data-theme=dark] .stat-row{border-bottom-color:#3a3a4e}[data-theme=dark] .stat-row span{color:#b0b0b0}[data-theme=dark] .stat-row strong,[data-theme=dark] .daily-chart h3{color:#e0e0e0}[data-theme=dark] .chart-container{background:#1e1e2e}[data-theme=dark] .chart-bar{background:linear-gradient(to top,#667eea,#8b9cff)}[data-theme=dark] .chart-label{color:#b0b0b0}[data-theme=dark] .recent-outages h3{color:#e0e0e0}[data-theme=dark] .duration-text{color:#f87171}[data-theme=dark] .btn-action{background:#667eea!important}[data-theme=dark] .btn-action:hover{background:#5568d3!important}@media (max-width: 768px){[data-theme=dark] .header-content{background:#1e1e2e}[data-theme=dark] .dashboard-container{background:transparent}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:30px;border-radius:12px;max-width:500px;width:90%;box-shadow:0 4px 20px #00000026}.modal-title{margin-top:0;margin-bottom:20px;color:#333;font-size:1.5rem}.modal-form-group{margin-bottom:15px}.modal-label{display:block;margin-bottom:8px;font-weight:700;color:#555}.modal-input{width:100%;padding:10px;font-size:14px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.modal-input:disabled{background-color:#f5f5f5;color:#666}.modal-input:focus{outline:none;border-color:#667eea}.modal-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.modal-btn{padding:10px 20px;font-size:14px;border-radius:4px;cursor:pointer;transition:all .3s ease;font-weight:500}.modal-btn-cancel{border:1px solid #ddd;background-color:#f8f9fa;color:#333}.modal-btn-cancel:hover{background-color:#e2e6ea}.modal-btn-cancel:disabled{opacity:.6;cursor:not-allowed}.modal-btn-submit{border:none;background-color:#28a745;color:#fff;font-weight:700}.modal-btn-submit:hover:not(:disabled){background-color:#218838}.modal-btn-submit:disabled{background-color:#ccc;cursor:not-allowed}[data-theme=dark] .modal-overlay{background-color:#000c}[data-theme=dark] .modal-content{background-color:#2a2a3e;box-shadow:0 4px 20px #00000080}[data-theme=dark] .modal-title{color:#e0e0e0}[data-theme=dark] .modal-label{color:#b0b0b0}[data-theme=dark] .modal-input{background-color:#1e1e2e;border-color:#3a3a4e;color:#e0e0e0}[data-theme=dark] .modal-input:disabled{background-color:#1a1a2a;color:#888}[data-theme=dark] .modal-input:focus{border-color:#667eea}[data-theme=dark] .modal-btn-cancel{background-color:#1e1e2e;border-color:#3a3a4e;color:#e0e0e0}[data-theme=dark] .modal-btn-cancel:hover{background-color:#333346}[data-theme=dark] .modal-btn-submit{background-color:#28a745}[data-theme=dark] .modal-btn-submit:hover:not(:disabled){background-color:#218838}.firmware-flash{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem 1rem}.flash-container{max-width:1400px;margin:0 auto}.flash-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.flash-header h1{color:#fff;margin:0;font-size:2rem}.btn-back{background:#fff3;color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:1rem}.btn-back:hover{background:#ffffff4d}.flash-grid{display:grid;grid-template-columns:400px 1fr;gap:2rem;margin-bottom:2rem}.config-panel,.log-panel{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 5px 15px #0000001a}.panel-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #e1e8ed}.panel-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.panel-section h2{margin-top:0;margin-bottom:1rem;color:#333;font-size:1.2rem}.form-select{width:100%;padding:.75rem;border:2px solid #e1e8ed;border-radius:8px;font-size:1rem;background:#fff;cursor:pointer}.form-select:focus{outline:none;border-color:#667eea}.form-select:disabled{background:#f5f5f5;cursor:not-allowed}.info-box{background:#f8f9fa;padding:1rem;border-radius:8px;margin-top:1rem}.info-box p{margin:.5rem 0;color:#666;font-size:.95rem}.connection-status{padding:1rem;border-radius:8px;text-align:center;font-weight:500;margin-bottom:1rem}.connection-status.connected{background:#d4edda;color:#155724}.btn-full{width:100%}.btn-sm{padding:.4rem .8rem;font-size:.9rem}.btn-success{background-color:#28a745}.btn-success:hover:not(:disabled){background-color:#218838}.progress-section{margin-top:1.5rem}.progress-bar{width:100%;height:30px;background:#e1e8ed;border-radius:15px;overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:10px}.progress-text{text-align:center;margin-top:.5rem;font-weight:600;color:#333}.log-panel{display:flex;flex-direction:column;max-height:600px}.log-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.log-header h2{margin:0;color:#333;font-size:1.2rem}.log-content{flex:1;background:#1e1e1e;border-radius:8px;padding:1rem;overflow-y:auto;font-family:Courier New,monospace;font-size:.9rem}.log-empty{color:#888;text-align:center;padding:2rem}.log-entry{margin-bottom:.5rem;line-height:1.6}.log-time{color:#888;margin-right:.5rem}.log-message{color:#fff}.log-info .log-message{color:#4fc3f7}.log-success .log-message{color:#81c784}.log-error .log-message{color:#e57373}.instructions{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 5px 15px #0000001a}.instructions h3{margin-top:0;margin-bottom:1rem;color:#333}.instructions ol{margin:1rem 0;padding-left:1.5rem}.instructions li{margin-bottom:.75rem;color:#666;line-height:1.6}.note{background:#fff3cd;border-left:4px solid #ffc107;padding:1rem;margin-top:1.5rem;border-radius:4px;color:#856404}.device-help{background:#e7f3ff;border:1px solid #b3d7ff;border-radius:8px;padding:1rem;margin:1rem 0}.device-help h4{margin-top:0;margin-bottom:.5rem;color:#06c;font-size:1rem}.device-help ul{margin:0;padding-left:1.2rem}.device-help li{margin-bottom:.5rem;color:#333;font-size:.9rem;line-height:1.4}.test-commands{border-top:1px solid #e1e8ed;padding-top:1rem}.test-commands h4{margin:0 0 .5rem;font-size:.95rem;color:#666}.btn-sm{padding:.4rem .8rem;font-size:.85rem;background:#f8f9fa;border:1px solid #dee2e6;color:#495057;cursor:pointer;border-radius:4px}.btn-sm:hover:not(:disabled){background:#e2e6ea;border-color:#dae0e5}.btn-sm:disabled{opacity:.6;cursor:not-allowed}.troubleshoot-note{background:#f0f8ff;border-left:3px solid #007bff;padding:.75rem;margin-top:1rem;border-radius:4px;font-size:.9rem;color:#495057}.warning-box{background:#fff3cd;border:2px solid #ffc107;border-radius:8px;padding:1.5rem;margin-bottom:2rem;text-align:center}.warning-box h3{color:#856404;margin-top:0;margin-bottom:.5rem}.warning-box p{color:#856404;margin:0;font-size:1.1rem;font-weight:500}.step-section{background:#f8f9fa;border-left:4px solid #28a745;padding:1.5rem;margin:1.5rem 0;border-radius:4px}.step-section h4{color:#155724;margin-top:0;margin-bottom:1rem;font-size:1.1rem}.step-section ol{margin:0;padding-left:1.5rem}.step-section li{margin-bottom:.5rem;color:#495057;line-height:1.5}.step-section code{background:#e9ecef;padding:.2rem .4rem;border-radius:3px;font-family:Courier New,monospace;font-size:.9rem;color:#e83e8c}.firmware-info{background:#e7f3ff;border:1px solid #b3d7ff;border-radius:6px;padding:1rem;margin:1rem 0}.firmware-info p{margin:.5rem 0;color:#06c;font-size:.95rem}@media (max-width: 1024px){.flash-grid{grid-template-columns:1fr}.log-panel{max-height:400px}}@media (max-width: 768px){.flash-header h1{font-size:1.5rem}.config-panel,.log-panel,.instructions{padding:1.5rem}}