@font-face{font-family:"Inter";src:url("../../fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../../fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("../../fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
:root{--font-main:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif}
[data-theme="dark"]{--bg:#000;--bg-secondary:#1c1c1e;--bg-tertiary:#2c2c2e;--text:#f5f5f7;--text-secondary:#a1a1a6;--border:rgba(255,255,255,.08);--accent:#9333ea;--accent-gradient:linear-gradient(135deg,#9333ea 0%,#3b82f6 100%);--success:#22c55e;--warning:#f59e0b;--error:#ef4444;--glow-1:rgba(147,51,234,.5);--glow-2:rgba(59,130,246,.5)}
[data-theme="light"]{--bg:#fff;--bg-secondary:#f5f5f7;--bg-tertiary:#e8e8ed;--text:#1d1d1f;--text-secondary:#515154;--border:rgba(0,0,0,.08);--accent:#7c3aed;--accent-gradient:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%);--success:#15803d;--warning:#b45309;--error:#b91c1c;--glow-1:rgba(147,51,234,.3);--glow-2:rgba(59,130,246,.3)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-main);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
.aurora{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;pointer-events:none}
.aurora-glow{position:absolute;border-radius:50%;opacity:.6;animation:aurora 15s ease-in-out infinite}
.aurora-glow:nth-child(1){width:600px;height:600px;background:radial-gradient(circle,var(--glow-1) 0%,transparent 70%);top:-20%;left:10%;animation-delay:0s}
.aurora-glow:nth-child(2){width:500px;height:500px;background:radial-gradient(circle,var(--glow-2) 0%,transparent 70%);top:20%;right:-10%;animation-delay:-5s}
.aurora-glow:nth-child(3){width:450px;height:450px;background:radial-gradient(circle,var(--glow-1) 0%,transparent 70%);bottom:-10%;left:30%;animation-delay:-10s}
@keyframes aurora{0%,100%{transform:translate(0,0) scale(1);opacity:.6}33%{transform:translate(30px,-30px) scale(1.1);opacity:.4}66%{transform:translate(-20px,20px) scale(.9);opacity:.7}}
.nav{position:fixed;top:0;left:0;right:0;padding:1rem 1.5rem;display:flex;justify-content:flex-end;align-items:center;z-index:100;backdrop-filter:saturate(180%) blur(20px);background:rgba(0,0,0,.7);border-bottom:1px solid var(--border)}
[data-theme="light"] .nav{background:rgba(255,255,255,.7)}
.nav-actions{display:flex;gap:.25rem}
.nav-btn{height:36px;min-width:36px;border-radius:18px;border:none;background:transparent;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background .2s ease}
.lang-wrap .nav-btn{padding:0 .75rem;font-weight:400}
.nav-btn:hover{background:var(--bg-secondary)}
.nav-btn svg{width:18px;height:18px;fill:currentColor}
.lang-wrap{position:relative}
.lang-menu{position:absolute;top:44px;right:0;background:var(--bg-secondary);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:12px;padding:4px;min-width:140px;display:none;box-shadow:0 10px 40px rgba(0,0,0,.3);max-height:50vh;overflow-y:auto}
.lang-menu.show{display:block}
.lang-item{padding:8px 12px;line-height:1.3;border-radius:8px;cursor:pointer;font-size:1rem;color:var(--text);transition:background .15s ease;display:flex;align-items:center}
.lang-item:hover{background:var(--bg-tertiary)}
.lang-item.active{background:linear-gradient(135deg,#9333ea,#3b82f6);color:#fff}
.lang-code{font-size:.75rem;font-weight:600;padding:2px 6px;background:var(--bg-tertiary);border-radius:4px;margin-right:8px;min-width:28px;text-align:center;display:inline-block}
.lang-item.active .lang-code{background:rgba(255,255,255,.2)}
.lang-name{font-size:1rem}
[dir="rtl"] .lang-menu{right:auto;left:0}
[dir="rtl"] .lang-code{margin-right:0;margin-left:8px}
.container{max-width:900px;margin:0 auto;padding:100px 20px 20px}
header{text-align:center;margin-bottom:40px}
.hero-icon{width:80px;height:80px;margin:0 auto 2rem;background:linear-gradient(135deg,#9333ea,#3b82f6,#ec4899);border-radius:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 40px -10px rgba(147,51,234,.5);animation:float 6s ease-in-out infinite}
.hero-icon svg{width:40px;height:40px;fill:#fff}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.tagline{color:var(--text-secondary);font-size:1.25rem;font-weight:400;line-height:1.5}
.overall-status{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:24px 32px;margin-bottom:32px;display:flex;align-items:center;gap:16px}
.status-indicator{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.status-indicator.operational{background:rgba(34,197,94,.15);color:var(--success)}
.status-indicator.degraded{background:rgba(245,158,11,.15);color:var(--warning)}
.status-indicator.outage{background:rgba(239,68,68,.15);color:var(--error)}
.status-indicator svg{width:28px;height:28px}
.overall-status h2{font-size:1.3rem;font-weight:600}
.overall-status p{color:var(--text-secondary);font-size:.9rem}
.services{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:32px}
.services-header{padding:20px 24px;border-bottom:1px solid var(--border);font-weight:600;font-size:1.1rem}
.service{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border)}
.service:last-child{border-bottom:none}
.service-info{display:flex;flex-direction:column}
.service-name{font-weight:500}
.service-detail{font-size:.8rem;color:var(--text-secondary)}
.service-status{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500}
.service-status .dot{width:10px;height:10px;border-radius:50%}
.service-status.operational .dot{background:var(--success)}
.service-status.operational{color:var(--success)}
.service-status.degraded .dot{background:var(--warning)}
.service-status.degraded{color:var(--warning)}
.service-status.outage .dot{background:var(--error)}
.service-status.outage{color:var(--error)}
.service-status.loading .dot{background:var(--text-secondary);animation:pulse 1s infinite}
.service-status.loading{color:var(--text-secondary)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.uptime-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:32px}
.uptime-header{padding:20px 24px;border-bottom:1px solid var(--border);font-weight:600;font-size:1.1rem}
.uptime-service{padding:16px 24px;border-bottom:1px solid var(--border)}
.uptime-service:last-child{border-bottom:none}
.uptime-service-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.uptime-service-name{font-weight:500;font-size:.95rem}
.uptime-percent{font-weight:600;font-size:.9rem;color:var(--success)}
.uptime-percent.degraded{color:var(--warning)}
.uptime-percent.outage{color:var(--error)}
.uptime-bars{display:flex;gap:2px;height:32px;align-items:stretch}
.uptime-bar{flex:1;min-width:0;border-radius:3px;background:var(--bg-tertiary);position:relative;cursor:pointer;transition:transform .1s ease}
.uptime-bar:hover{transform:scaleY(1.1)}
.uptime-bar.ok{background:var(--success)}
.uptime-bar.degraded{background:var(--warning)}
.uptime-bar.outage{background:var(--error)}
.uptime-bar.no-data{background:var(--bg-tertiary);opacity:.5}
.uptime-bar-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.75rem;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;z-index:10;pointer-events:none}
.uptime-bar:hover .uptime-bar-tooltip{opacity:1;visibility:visible}
.uptime-bar-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--bg-tertiary)}
.uptime-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:.7rem;color:var(--text-secondary)}
.latency-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.response-time{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:24px}
.response-time h3{font-size:1rem;margin-bottom:16px}
.response-time-value{font-size:1.75rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.response-time-label{font-size:.8rem;color:var(--text-secondary)}
.incidents{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:48px}
.incidents-header{padding:20px 24px;border-bottom:1px solid var(--border);font-weight:600;font-size:1.1rem}
.no-incidents{padding:40px 24px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text-secondary)}
.no-incidents svg{flex-shrink:0}
.incident-item{padding:16px 24px;border-bottom:1px solid var(--border)}
.incident-item:last-child{border-bottom:none}
.incident-date{font-size:.75rem;color:var(--text-secondary);margin-bottom:4px}
.incident-title{font-weight:500;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.incident-title .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.incident-title .dot.resolved{background:var(--success)}
.incident-title .dot.ongoing{background:var(--warning)}
.incident-desc{font-size:.9rem;color:var(--text-secondary)}
footer{text-align:center;padding:1.5rem 2rem;margin-top:auto;color:var(--text-secondary);font-size:.8rem}
footer a{color:var(--text-secondary);text-decoration:none}footer .footer-links{margin-bottom:.25rem}footer .trademark{margin-top:.25rem;font-size:.7rem;opacity:.8}
.banners{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.banner{padding:16px 20px;border-radius:12px;display:flex;align-items:flex-start;gap:12px}
.banner-icon{width:24px;height:24px;flex-shrink:0;margin-top:2px}
.banner-content{flex:1}
.banner-title{font-weight:600;margin-bottom:4px}
.banner-text{font-size:.9rem;opacity:.9}
.banner.info{background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);color:#60a5fa}
.banner.warning{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);color:var(--warning)}
.banner.error{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:var(--error)}
.banner.maintenance{background:rgba(147,51,234,.15);border:1px solid rgba(147,51,234,.3);color:#a855f7}
[data-theme="light"] .banner.info{color:#2563eb}
[data-theme="light"] .banner.maintenance{color:#7c3aed}
@media(min-width:768px){.lang-menu{max-height:80vh}}
@media(max-width:800px){.latency-grid{grid-template-columns:1fr 1fr}.latency-grid .response-time:first-child{grid-column:span 2}}
@media(max-width:600px){.nav{padding:.5rem 1rem}.container{padding:80px 16px 16px}.overall-status{flex-direction:column;text-align:center;padding:20px}.hero-icon{width:60px;height:60px;border-radius:16px;margin-bottom:1rem}.hero-icon svg{width:30px;height:30px}.tagline{font-size:1rem;line-height:1.4}footer{padding:.75rem 1rem;font-size:.7rem}.aurora-glow:nth-child(1){width:300px;height:300px}.aurora-glow:nth-child(2){width:250px;height:250px}.aurora-glow:nth-child(3){width:200px;height:200px}.latency-grid{grid-template-columns:1fr}.latency-grid .response-time:first-child{grid-column:span 1}.response-time-value{font-size:1.5rem}.uptime-bars{height:24px}.uptime-bar-tooltip{display:none}}