.stats-container{max-width:1200px;margin:0 auto;padding:40px 20px;color:#E5E7EB;background:#1D1D1E;min-height:100vh}.header-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid #434344}.service-title{display:flex;align-items:center;gap:20px}.service-title .logo{width:64px;height:64px;border-radius:10px;object-fit:contain}.service-title h1{font-size:32px;font-weight:700;color:#FFFFFF;margin:0}.service-title .category{color:#CCCCCC;font-size:16px;margin:5px 0 0 0}.status-box{display:flex;align-items:center;gap:10px;padding:10px 20px;border-radius:8px;background:#2A2A2B;border:1px solid #434344}.status-box.online{border-color:#2ECC71}.status-box.offline{border-color:#f87171}.status-box.unknown{border-color:#FFA500}.status-dot{width:12px;height:12px;border-radius:50%;background:#666}.status-box.online .status-dot{background:#2ECC71;box-shadow:0 0 10px #2ECC71}.status-box.offline .status-dot{background:#f87171;box-shadow:0 0 10px #f87171}.status-box.unknown .status-dot{background:#FFA500;box-shadow:0 0 10px #FFA500}.status-text{font-weight:600;font-size:14px;letter-spacing:1px}.status-box.online .status-text{color:#2ECC71}.status-box.offline .status-text{color:#f87171}.status-box.unknown .status-text{color:#FFA500}.metrics-row{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;margin-bottom:40px}.metric{background:rgba(56,56,56,0.6);border:2px solid #434344;border-radius:10px;padding:25px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all 0.3s ease}.metric:hover{border-color:#A62288;box-shadow:0 4px 15px rgba(166,34,136,0.2);transform:translateY(-2px)}.metric-value{font-size:36px;font-weight:700;color:#2ECC71;margin-bottom:5px}.metric-value.collecting{font-size:20px;color:#FFA500}.metric-sublabel{font-size:12px;color:#999;margin-bottom:10px}.metric-label{font-size:14px;color:#CCCCCC;text-transform:uppercase;letter-spacing:1px}.chart-section{background:rgba(56,56,56,0.5);border:2px solid #A62288;border-radius:10px;padding:30px;margin-bottom:40px;box-shadow:0 4px 20px rgba(166,34,136,0.2)}.chart-section h2{font-size:24px;color:#FFFFFF;margin:0 0 15px 0}.cycle-info{color:#CCCCCC;font-size:14px;margin-bottom:20px}.chart-wrapper{margin:30px 0}.chart{display:flex;gap:2px;height:150px;background:rgba(0,0,0,0.5);border-radius:8px;padding:15px;overflow-x:auto;border:1px solid #434344}.chart .bar{flex:1 1 auto;min-width:4px;max-width:10px;height:100%;align-self:stretch;background:#434344;border-radius:3px;transition:all 0.2s;cursor:pointer;position:relative}.chart .bar.online{background:linear-gradient(to top, #16a34a, #22c55e, #4ade80) !important;box-shadow:0 0 8px rgba(34,197,94,0.4)}.chart .bar.offline{background:linear-gradient(to top, #dc2626, #ef4444, #f87171) !important;box-shadow:0 0 8px rgba(239,68,68,0.4)}.chart .bar:hover{transform:scaleY(1.05);opacity:0.8}.chart-labels{display:flex;justify-content:space-between;margin-top:10px;color:#999;font-size:12px}.chart-legend{display:flex;gap:30px;justify-content:center;margin-top:20px}.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#CCCCCC}.legend-dot{width:14px;height:14px;border-radius:3px}.legend-dot.online{background:linear-gradient(135deg, #2ECC71, #4ade80)}.legend-dot.offline{background:linear-gradient(135deg, #f87171, #fca5a5)}.no-data{padding:60px 20px;text-align:center}.collecting-chart-info{max-width:500px;margin:0 auto}.chart-icon{font-size:64px;margin-bottom:20px}.collecting-chart-info h3{font-size:24px;color:#FFFFFF;margin:0 0 15px 0}.collecting-chart-info p{color:#CCCCCC;font-size:16px;margin:10px 0;line-height:1.6}.chart-progress{margin:30px 0}.progress-bar-container{width:100%;height:30px;background:rgba(0,0,0,0.3);border-radius:15px;overflow:hidden;border:1px solid #434344}.progress-bar-fill{height:100%;background:linear-gradient(90deg, #A62288, #C52AA0);border-radius:15px;transition:width 0.5s ease}.progress-text{display:block;margin-top:10px;color:#CCCCCC;font-size:14px}.estimate-time{color:#999;font-size:14px;font-style:italic}.checks-section{background:rgba(56,56,56,0.5);border:2px solid #434344;border-radius:10px;padding:30px;box-shadow:0 2px 10px rgba(0,0,0,0.3)}.checks-section h2{font-size:24px;color:#FFFFFF;margin:0 0 20px 0}.checks-list{display:flex;flex-direction:column;gap:10px}.check-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:rgba(0,0,0,0.2);border-radius:8px;border:1px solid #434344}.check-status{padding:5px 15px;border-radius:5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px}.check-status.online{background:rgba(46,204,113,0.2);color:#2ECC71;border:1px solid #2ECC71}.check-status.offline{background:rgba(248,113,113,0.2);color:#f87171;border:1px solid #f87171}.check-status.unknown{background:rgba(255,165,0,0.2);color:#FFA500;border:1px solid #FFA500}.check-time{color:#CCCCCC;font-size:14px}.check-response{color:#999;font-size:13px}.check-error{color:#f87171;font-size:12px;font-style:italic;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 1024px){.metrics-row{grid-template-columns:repeat(2, 1fr)}}@media (max-width: 768px){.header-section{flex-direction:column;gap:20px;align-items:flex-start}.metrics-row{grid-template-columns:1fr}.check-item{flex-direction:column;align-items:flex-start;gap:10px}}
