/* 🚦 RAKAN status page (status.html + status-ar.html) — on top of styles.css; tokens from styles.css (--panel, --line, --mute …) */
.st-body { background: radial-gradient(1000px 520px at 85% -10%, rgba(34, 195, 255, .10), transparent 60%), radial-gradient(800px 480px at 0% 8%, rgba(46, 230, 140, .07), transparent 60%), var(--bg); }
.st { padding-block: 34px 70px; }
.st-wrap { display: grid; gap: 24px; max-width: 980px; }
.st-hero { display: grid; justify-items: center; gap: 10px; text-align: center; }
.st-hero img { width: 64px; height: 64px; filter: drop-shadow(0 8px 24px rgba(34, 195, 255, .35)); }
.st-hero h1 { font-size: clamp(1.6rem, 4.4vw, 2.4rem); font-weight: 700; }
.st-hero p { margin: 0; color: var(--mute); max-width: 60ch; }
.st-banner { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel-solid); min-width: 0; }
.st-banner .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 800 1rem/1 var(--display); }
.st-banner b { font: 700 1.1rem/1.3 var(--display); color: var(--white); }
.st-banner .dot { margin-inline-start: auto; width: 10px; height: 10px; border-radius: 50%; flex: none; animation: st-pulse 1.8s ease-in-out infinite; }
.st-banner[data-s="operational"] { border-color: rgba(46, 230, 140, .45); } .st-banner[data-s="operational"] .ic { background: rgba(46, 230, 140, .15); color: #2ee68c; } .st-banner[data-s="operational"] .dot { background: #2ee68c; }
.st-banner[data-s="degraded"] { border-color: rgba(255, 196, 61, .5); } .st-banner[data-s="degraded"] .ic { background: rgba(255, 196, 61, .15); color: #ffc43d; } .st-banner[data-s="degraded"] .dot { background: #ffc43d; }
.st-banner[data-s="outage"] { border-color: rgba(255, 90, 90, .55); } .st-banner[data-s="outage"] .ic { background: rgba(255, 90, 90, .15); color: #ff5a5a; } .st-banner[data-s="outage"] .dot { background: #ff5a5a; }
.st-banner[data-s="maintenance"] { border-color: rgba(34, 195, 255, .5); } .st-banner[data-s="maintenance"] .ic { background: rgba(34, 195, 255, .15); color: #22c3ff; } .st-banner[data-s="maintenance"] .dot { background: #22c3ff; }
@keyframes st-pulse { 50% { opacity: .35; } }
#st-groups { display: grid; gap: 26px; }
.st-group h2 { font-size: 1.1rem; margin-bottom: 12px; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-item { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px 12px; min-width: 0; }
.st-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.st-top b { font: 600 .95rem/1.3 var(--display); color: var(--white); overflow-wrap: anywhere; }
.st-top span { font: 600 .82rem/1 var(--mono); color: var(--mute); flex: none; }
.st-bars { display: flex; gap: 2px; height: 26px; direction: ltr; }
.st-bars i { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: #2ee68c; }
.st-bars i.degraded { background: #ffc43d; } .st-bars i.down { background: #ff5a5a; } .st-bars i.idle { background: rgba(46, 230, 140, .45); } .st-bars i.none { background: var(--line-2); }
.st-foot { display: flex; justify-content: space-between; margin-top: 8px; font: 500 .72rem/1 var(--mono); color: var(--mute); direction: ltr; }
.st-key { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font: 500 .8rem/1 var(--mono); color: var(--mute); }
.st-key .k-up { --c: #2ee68c; } .st-key .k-deg { --c: #ffc43d; } .st-key .k-down { --c: #ff5a5a; } .st-key .k-idle { --c: rgba(46, 230, 140, .45); }
.st-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; background: var(--c); }
.st-note { text-align: center; color: var(--mute); font-size: .88rem; margin: 0; }
@media (max-width: 640px) { .st-grid { grid-template-columns: minmax(0, 1fr); } .st-bars { height: 22px; gap: 1px; } }
@media (prefers-reduced-motion: reduce) { .st-banner .dot { animation: none; } }