:root{
  --bg0:#040412; --bg1:#070A1C;
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --text:#EAF0FF; --muted:rgba(234,240,255,.68);
  --cyan:#22D3EE; --pink:#FF3DCC; --violet:#7C5CFF; --green:#34D399; --amber:#FBBF24;
  --shadow: 0 22px 110px rgba(0,0,0,.7);
  --radius: 18px;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(900px 520px at 12% 12%, rgba(124,92,255,.40), transparent 55%),
    radial-gradient(750px 520px at 92% 18%, rgba(34,211,238,.24), transparent 55%),
    radial-gradient(750px 520px at 55% 96%, rgba(255,61,204,.18), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  min-height:100vh;
  overflow-x:hidden;
  animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
a{color:inherit; text-decoration:none}
a:hover { text-decoration: underline; }
.wrap{max-width:1100px; margin:0 auto; padding:26px 18px 90px; position:relative}
.gridbg{
  position:fixed; inset:0; pointer-events:none; opacity:.14;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 32px 32px;
  mask-image: radial-gradient(620px 420px at 50% 15%, black 55%, transparent 100%);
  animation: gridMove 20s linear infinite;
  z-index: -1;
}
@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(32px, 32px); }
}
header{display:flex; flex-direction:column; align-items:center; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px}
.nav{justify-content:center}
.sig{
  width:46px; height:46px; border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(34,211,238,.9), rgba(255,61,204,.78));
  box-shadow: 0 0 60px rgba(34,211,238,.18), 0 0 70px rgba(255,61,204,.12);
  animation: sigPulse 4s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.sig::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,.1), transparent);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}
@keyframes sigPulse {
  0%, 100% { box-shadow: 0 0 60px rgba(34,211,238,.18), 0 0 70px rgba(255,61,204,.12); }
  50% { box-shadow: 0 0 80px rgba(34,211,238,.25), 0 0 90px rgba(255,61,204,.2); }
}
@keyframes shine {
  0% { transform: rotate(45deg) translateX(-100%); }
  20% { transform: rotate(45deg) translateX(100%); }
  100% { transform: rotate(45deg) translateX(100%); }
}
.pill{
  font-size:12px; color:var(--muted);
  border:1px solid var(--line);
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.03);
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}
.pill::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,.05), transparent);
  transform: rotate(45deg);
  transition: all .5s ease;
}
.pill:hover {
  background: rgba(255,255,255,.06);
  transform: scale(1.05);
}
.pill:hover::before {
  transform: rotate(45deg) translateX(100%);
}
.nav{display:flex; gap:10px; flex-wrap:wrap}
.nav a{font-size:12px; color:rgba(234,240,255,.82); padding:6px 10px; border-radius:8px; transition: all .2s ease;}
.nav a:hover{color:#fff; background: rgba(255,255,255,.08); text-decoration: none;}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  position:relative;
  overflow:hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 120px rgba(0,0,0,.8);
}
.card::before{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(135deg, rgba(34,211,238,.35), rgba(255,61,204,.22), rgba(124,92,255,.22));
  filter: blur(26px); opacity:.45; pointer-events:none;
}
.card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}
.inner{position:relative; padding:22px}
.kicker{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(234,240,255,.72); margin-bottom:8px}
h1{margin:10px 0 0; font-size:44px; line-height:1.1; background: linear-gradient(to right, #22D3EE, #7C5CFF, #FF3DCC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
p{color:var(--muted); line-height:1.7; margin:12px 0}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 760px){ .grid{grid-template-columns:1fr} }
.btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px; border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(120deg, rgba(34,211,238,.05), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
}
.btn:hover{
  border-color: rgba(255,255,255,.28); 
  background: rgba(255,255,255,.06); 
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.28);
}
.btn strong {
  transition: all .3s ease;
}
.btn:hover strong {
  color: #22D3EE;
  text-shadow: 0 0 8px rgba(34,211,238,.4);
}
.btn:hover::before {
  opacity: 1;
}
.btn:active {
  transform: translateY(0);
}
.btn strong{font-size:14px}
.btn span{font-size:12px; color:var(--muted)}
.tag{font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.18); white-space:nowrap; transition: all .2s ease;}
.tag:hover {transform: scale(1.05); box-shadow: 0 0 10px currentColor; opacity: 0.9;}
.t-violet{border-color: rgba(124,92,255,.45); color: #7C5CFF;}
.t-cyan{border-color: rgba(34,211,238,.45); color: #22D3EE;}
.t-green{border-color: rgba(52,211,153,.45); color: #34D399;}
.t-pink{border-color: rgba(255,61,204,.45); color: #FF3DCC;}
.t-amber{border-color: rgba(251,191,36,.45); color: #FBBF24;}

small.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:rgba(234,240,255,.72)}
ul{color:var(--muted); line-height:1.8}
footer{margin-top:20px; color:rgba(234,240,255,.55); font-size:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.links{display:flex; gap:14px; flex-wrap:wrap}
.links a{color:rgba(234,240,255,.72)}
.links a:hover{color:rgba(234,240,255,.95)}

/* Status dots */
.statusline{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.dot{width:8px;height:8px;border-radius:99px;display:inline-block;margin-right:8px}
.ok{background:#34D399}.warn{background:#FBBF24}.down{background:#FF3DCC}
.dot.ok { box-shadow: 0 0 8px rgba(52,211,153,.5); }
.dot.warn { box-shadow: 0 0 8px rgba(251,191,36,.5); animation: pulse 2s infinite; }
.dot.down { box-shadow: 0 0 8px rgba(255,61,204,.5); animation: pulse 1.5s infinite; }

@keyframes pulse {
  0% { box-shadow: 0 0 8px rgba(255,255,255,0.3); }
  50% { box-shadow: 0 0 16px rgba(255,255,255,0.6); }
  100% { box-shadow: 0 0 8px rgba(255,255,255,0.3); }
}

/* Special Doom Clock Effects */
.doom{
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.28);
    padding:14px;
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
}
.doom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px;
  background: linear-gradient(120deg, 
    rgba(124,92,255,.1), 
    rgba(34,211,238,.05), 
    rgba(255,61,204,.1));
  opacity: 0.3;
  z-index: 1;
}
.doom>* {
  position: relative;
  z-index: 2;
}
.doom:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(255,61,204,.2);
}
.doomTime b {
  position: relative;
  z-index: 2;
  text-shadow: 0 0 10px rgba(255,255,255,.3);
}