:root {
  --bg: #090b0f;
  --surface: #101319;
  --text: #f2f4f3;
  --secondary: #b3bab7;
  --muted: #686f6d;
  --border: #20252b;
  --green: #51e39a;
  --blue: #6888ff;
  --yellow: #e5bb5a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font-family: "Manrope", sans-serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--bg); background: var(--green); }

.glow { position: fixed; z-index: -1; width: 440px; height: 440px; border-radius: 50%; filter: blur(120px); opacity: .08; pointer-events: none; }
.glow-one { top: -200px; left: calc(50% - 420px); background: var(--blue); }
.glow-two { right: calc(50% - 450px); bottom: -250px; background: var(--green); }
.profile { width: min(100% - 40px, 620px); margin: 0 auto; padding: 100px 0 55px; }

.intro { display: flex; align-items: center; gap: 17px; }
.avatar { position: relative; width: 66px; height: 66px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--blue), #344eb2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.avatar span { font-size: 27px; font-weight: 600; }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar i { position: absolute; right: 0; bottom: 1px; width: 14px; height: 14px; border: 3px solid var(--bg); border-radius: 50%; background: var(--green); }
.avatar i.idle, .meta span.idle i { background: var(--yellow); }
.avatar i.dnd, .meta span.dnd i { background: #ed5f68; }
.avatar i.offline, .meta span.offline i { background: #747b82; }
.intro h1 { margin: 0 0 4px; font-size: 25px; line-height: 1; letter-spacing: -.035em; font-weight: 600; }
.intro button { padding: 0; border: 0; color: var(--muted); background: none; font: 400 11px "DM Mono", monospace; cursor: pointer; transition: color .2s; }
.intro button:hover { color: var(--green); }

.bio { padding: 30px 0 34px; border-bottom: 1px solid var(--border); }
.radio-player { display: block; width: 100%; height: 42px; margin: 0 0 18px; color-scheme: dark; }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 10px; }
.meta span:first-child { color: var(--secondary); }
.meta span:first-child b { font-weight: 400; }
.meta i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.meta b { color: #34393e; font-weight: 400; }
.meta time { font: 400 9px "DM Mono", monospace; }

.block { padding: 34px 0; border-bottom: 1px solid var(--border); }
.label { margin-bottom: 20px; display: flex; align-items: center; gap: 11px; }
.label > span { width: 22px; height: 1px; background: #41474b; }
.label h2 { margin: 0; color: var(--muted); font-size: 9px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.label > i { color: rgba(81,227,154,.3); font: 400 10px "DM Mono", monospace; font-style: normal; animation: blink 1.4s steps(1) infinite; }

.overall { padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(81,227,154,.13); border-radius: 8px; background: rgba(81,227,154,.035); }
.overall > span { color: var(--secondary); font-size: 11px; }
.overall > span b { font-weight: 500; }
.overall > span i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(81,227,154,.5); }
.overall small { color: var(--muted); font: 400 8px "DM Mono", monospace; }

.status-panel { margin-top: 16px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.monitor-head { display: flex; align-items: center; justify-content: space-between; }
.monitor-head > div { display: flex; align-items: center; gap: 9px; }
.monitor-head h3 { margin: 0; font-size: 11px; font-weight: 500; }
.monitor-head > span { color: var(--muted); font: 400 8px "DM Mono",monospace; }
.monitor-head > span.online { color: var(--green); }.monitor-head > span.warning { color: var(--yellow); }.monitor-head > span.down { color: #ed5f68; }
.check { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--bg); background: var(--green); font-size: 10px; font-weight: 700; }
.check.down { color: white; background: #ed5f68; }
.check.warning { color: var(--bg); background: var(--yellow); }
.uptime-bars { height: 32px; margin-top: 17px; display: grid; grid-template-columns: repeat(30,1fr); gap: 2px; }
.uptime-bars button { min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 2px; background: #29312f; cursor: pointer; transition: background .3s, transform .15s; }
.uptime-bars button:hover,.uptime-bars button:focus-visible { transform: translateY(-3px); outline: 1px solid var(--text); outline-offset: 2px; }
.uptime-bars button.ok { background: #35bd81; }.uptime-bars button.warn { background: var(--yellow); }.uptime-bars button.fail { background: #d95561; }
.bar-labels { margin-top: 6px; display: flex; justify-content: space-between; color: #59615f; font: 400 7px "DM Mono",monospace; }
.latency-line { margin-top: 20px; display: grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; color:var(--muted); font:400 8px "DM Mono",monospace; }
.latency-line > div { height: 1px; position:relative; background:var(--border); }.latency-line > div i { position:absolute; left:0; top:-1px; width:65%; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--green),var(--blue)); }
.latency-line b { color:var(--secondary); font-weight:400; }.monitor-note { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); color:#4b5350; font:400 7px "DM Mono",monospace; text-align:right; }
.monitor-note i{display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(81,227,154,.45);animation:pulse 1.5s ease-in-out infinite}
.status-panel.down { border-color:rgba(237,95,104,.25); }.overall.down { border-color:rgba(237,95,104,.18); background:rgba(237,95,104,.04); }.overall.down > span i { background:#ed5f68; box-shadow:0 0 10px rgba(237,95,104,.5); }
.status-panel.warning { border-color: rgba(229,187,90,.24); }.overall.warning { border-color:rgba(229,187,90,.2);background:rgba(229,187,90,.04)}.overall.warning>span i{background:var(--yellow);box-shadow:0 0 10px rgba(229,187,90,.35)}
.activity { position: relative; padding: 4px 5px; display: grid; grid-template-columns: 35px 1fr auto; align-items: start; gap: 11px; }
.activity-dot { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; }
.activity-dot span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.activity h3 { margin: 1px 0 5px; color: var(--secondary); font-size: 11px; font-weight: 500; }
.activity p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.activity time { color: var(--muted); font: 400 8px "DM Mono", monospace; }

footer { padding-top: 32px; }
.links { display: flex; align-items: center; gap: 22px; color: var(--secondary); font-size: 11px; }
.links a { padding-bottom: 2px; border-bottom: 1px solid #3c4341; transition: color .2s, border-color .2s; }
.links a:hover { color: var(--green); border-color: var(--green); }
.panel-link{padding:0 0 2px;border-bottom:1px solid #3c4341;color:inherit;cursor:pointer;transition:.2s}.panel-link:hover{color:var(--green);border-color:var(--green)}.panel-link i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--green)}
footer > p { margin: 28px 0 0; color: #3e4543; font: 400 8px "DM Mono", monospace; }
.toast { position: fixed; left: 50%; bottom: 24px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 6px; color: var(--secondary); background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: 9px; opacity: 0; transform: translate(-50%,10px); transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.status-tooltip { position: fixed; z-index: 30; width: min(270px,calc(100vw - 28px)); padding: 14px; border: 1px solid #30363d; border-radius: 8px; color: var(--secondary); background: #15191f; box-shadow: 0 18px 45px rgba(0,0,0,.45); font-size: 10px; }
.status-tooltip[hidden] { display: none; }.status-tooltip>span{display:block;margin-bottom:10px;color:var(--muted);font:400 8px "DM Mono",monospace}.status-tooltip>b{display:block;font-size:11px;font-weight:600}.status-tooltip>b.ok{color:var(--green)}.status-tooltip>b.warn{color:var(--yellow)}.status-tooltip>b.fail{color:#ed5f68}.status-tooltip p{margin:7px 0;color:var(--secondary);line-height:1.5}.status-tooltip small{color:var(--muted);font:400 8px "DM Mono",monospace}
.news-list{display:grid}.news-list .activity{padding-block:14px;border-bottom:1px solid var(--border)}.news-list .activity:last-child{border-bottom:0}.activity.type-update .activity-dot span{background:var(--blue)}.activity.type-incident .activity-dot span{background:#ed5f68}.activity.type-info .activity-dot span{background:var(--green)}
.reveal { opacity: 0; transform: translateY(14px); animation: reveal .6s ease forwards; }.delay-1{animation-delay:.07s}.delay-2{animation-delay:.14s}.delay-4{animation-delay:.28s}
@keyframes reveal { to { opacity: 1; transform: none; } } @keyframes blink { 50% { opacity: 0; } } @keyframes pulse { 50% { opacity: .3; } }

@media (max-width: 560px) {
  .profile { width: min(100% - 32px, 620px); padding-top: 62px; }
  .overall { align-items: start; flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; } }