*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:#0a0a0f;color:#fff;line-height:1.6;display:flex;flex-direction:column;min-height:100vh}.me-1{margin-right:.25rem}.status-bg{position:fixed;inset:0;z-index:-1;overflow:hidden}.status-bg .gradient-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.3}.status-bg .gradient-orb.orb-1{width:600px;height:600px;background:#6366f1;top:-200px;right:-100px}.status-bg .gradient-orb.orb-2{width:400px;height:400px;background:#ec4899;bottom:-100px;left:-100px}.status-bg .grid-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(42,42,62,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(42,42,62,.3) 1px,transparent 1px);background-size:50px 50px;-webkit-mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent)}.status-header{padding:1.5rem 2rem;display:flex;justify-content:center}.status-header .status-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:#fff;transition:opacity .15s ease}.status-header .status-logo:hover{opacity:.8}.status-header .status-logo img{width:32px;height:32px}.status-header .status-logo span{font-size:1.25rem;font-weight:700}.status-main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.status-container{max-width:700px;width:100%;text-align:center}.status-badge-wrapper{margin-bottom:2rem}.status-badge{display:inline-flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;border-radius:50px;font-weight:600;font-size:1rem}.status-badge i{font-size:1.25rem}.status-badge.loading{background:#71717a26;color:#71717a}.status-badge.loading i{animation:spin 1s linear infinite}.status-badge.healthy{background:#10b98126;color:#10b981;box-shadow:0 0 30px #10b98133}.status-badge.partial{background:#f59e0b26;color:#f59e0b;box-shadow:0 0 30px #f59e0b33}.status-badge.unhealthy{background:#ef444426;color:#ef4444;box-shadow:0 0 30px #ef444433}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.status-title{font-size:2.5rem;font-weight:800;margin-bottom:.5rem;background:linear-gradient(135deg,#6366f1,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.status-subtitle{color:#a1a1aa;font-size:1.1rem;margin-bottom:3rem}.services-grid{display:flex;flex-direction:column;gap:1rem;margin-bottom:3rem}.service-card{background:#12121a;border:1px solid #2a2a3e;border-radius:16px;padding:1.25rem 1.5rem;transition:all .3s ease}.service-card:hover{border-color:#6366f14d;transform:translate(4px)}.service-card.up{border-color:#10b9814d}.service-card.up .service-icon,.service-card.up .service-status{background:#10b98126;color:#10b981}.service-card.down{border-color:#ef44444d}.service-card.down .service-icon{background:#ef444426;color:#ef4444}.service-card.down .service-status{background:#ef444426;color:#ef4444;animation:pulse-danger 2s ease-in-out infinite}.service-card.unknown{border-color:#71717a4d}.service-card.unknown .service-icon{background:#71717a26;color:#71717a}.service-card .service-header{display:flex;align-items:center;gap:1rem}.service-card .service-icon{width:50px;height:50px;border-radius:12px;background:#6366f126;color:#6366f1;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;transition:all .3s ease}.service-card .service-info{flex:1;text-align:left}.service-card .service-info h3{font-size:1.1rem;font-weight:600;margin-bottom:.25rem}.service-card .service-meta{display:flex;align-items:center;gap:.5rem}.service-card .uptime-badge,.service-card .ping-badge{font-size:.7rem;font-weight:600;padding:.2rem .5rem;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}.service-card .uptime-badge.excellent{background:#10b98126;color:#10b981}.service-card .uptime-badge.good{background:#6366f126;color:#818cf8}.service-card .uptime-badge.warning{background:#f59e0b26;color:#f59e0b}.service-card .uptime-badge.danger{background:#ef444426;color:#ef4444}.service-card .ping-badge{background:#71717a26;color:#a1a1aa}.service-card .service-status{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;background:#71717a26;color:#71717a}.service-card .service-status.up{background:#10b98126;color:#10b981}.service-card .service-status.down{background:#ef444426;color:#ef4444}.heartbeat-bar{display:flex;align-items:flex-end;gap:2px;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(42,42,62,.5);min-height:32px;justify-content:flex-end}.heartbeat-bar .beat{width:6px;height:24px;border-radius:3px;transition:all .2s ease;cursor:pointer}.heartbeat-bar .beat.up{background:#10b981;box-shadow:0 0 6px #10b98166}.heartbeat-bar .beat.down{background:#ef4444;box-shadow:0 0 6px #ef444480;animation:beat-pulse 1.5s ease-in-out infinite}.heartbeat-bar .beat:hover{transform:scaleY(1.2);opacity:.8}.heartbeat-bar .no-data{font-size:.75rem;color:#71717a;font-style:italic}@keyframes beat-pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes pulse-danger{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 8px #ef444400}}.service-card.loading-skeleton{display:flex;align-items:center;gap:1rem;animation:skeleton-pulse 1.5s ease-in-out infinite}.service-card.loading-skeleton .skeleton-icon{width:50px;height:50px;border-radius:12px;background:linear-gradient(90deg,#1a1a2e 25%,#2a2a3e,#1a1a2e 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}.service-card.loading-skeleton .skeleton-info{flex:1}.service-card.loading-skeleton .skeleton-title{width:60%;height:16px;border-radius:4px;background:linear-gradient(90deg,#1a1a2e 25%,#2a2a3e,#1a1a2e 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;margin-bottom:8px}.service-card.loading-skeleton .skeleton-subtitle{width:40%;height:12px;border-radius:4px;background:linear-gradient(90deg,#1a1a2e 25%,#2a2a3e,#1a1a2e 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}.error-message{grid-column:1/-1;text-align:center;padding:3rem 2rem;background:#ef44440d;border:1px solid rgba(239,68,68,.2);border-radius:16px}.error-message i{font-size:3rem;color:#ef4444;margin-bottom:1rem;display:block}.error-message p{color:#a1a1aa;margin-bottom:1.5rem}.error-message .retry-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:50px;color:#ef4444;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease}.error-message .retry-btn:hover{background:#ef444440}.uptime-section{margin-bottom:2rem}.uptime-section h2{font-size:1rem;font-weight:600;color:#a1a1aa;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.uptime-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.uptime-item{background:#12121a;border:1px solid #2a2a3e;border-radius:12px;padding:1rem;text-align:center;transition:all .3s ease}.uptime-item.excellent{border-color:#10b9814d}.uptime-item.excellent .uptime-value{color:#10b981}.uptime-item.good{border-color:#6366f14d}.uptime-item.good .uptime-value{color:#818cf8}.uptime-item.warning{border-color:#f59e0b4d}.uptime-item.warning .uptime-value{color:#f59e0b}.uptime-item.danger{border-color:#ef44444d}.uptime-item.danger .uptime-value{color:#ef4444}.uptime-item .uptime-label{display:block;font-size:.75rem;color:#71717a;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.uptime-item .uptime-value{display:block;font-size:1.25rem;font-weight:700}.last-updated{display:flex;align-items:center;justify-content:center;gap:.5rem;color:#71717a;font-size:.875rem;margin-bottom:1.5rem}.last-updated i{font-size:1rem}.last-updated strong{color:#a1a1aa}.refresh-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#12121a;border:1px solid #2a2a3e;border-radius:50px;color:#fff;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease}.refresh-btn:hover:not(:disabled){border-color:#6366f1;background:#6366f11a}.refresh-btn:disabled{opacity:.6;cursor:not-allowed}.refresh-btn .spinning{animation:spin 1s linear infinite}.status-footer{padding:1.5rem 2rem;text-align:center;color:#71717a;font-size:.875rem;display:flex;flex-direction:column;gap:.5rem}.status-footer a{color:#a1a1aa;text-decoration:none;transition:color .15s ease}.status-footer a:hover{color:#6366f1}@media(max-width:600px){.status-title{font-size:1.75rem}.status-subtitle{font-size:1rem}.service-card{padding:1rem}.service-card .service-icon{width:40px;height:40px;font-size:1.25rem}.service-card .service-info h3{font-size:1rem}.service-card .service-meta{flex-wrap:wrap}.heartbeat-bar .beat{width:4px;height:18px}.uptime-grid{grid-template-columns:1fr}}
