:root{
  --bg:#030b13;
  --bg2:#02060a;
  --ink:#d8f6ff;
  --muted:rgba(216,246,255,.70);

  --neon:#00e5ff;
  --neon2:#7c4dff;
  --line:rgba(0,229,255,.26);
  --line2:rgba(124,77,255,.20);

  --panel:rgba(4,10,16,.72);
  --panel2:rgba(4,10,16,.55);
  --shadow:0 26px 70px rgba(0,0,0,.55);
  --radius:22px;

  --good:#7cff7a;
  --bad:#ff4d7d;
}

html{
  height:100%;
  color-scheme: dark;
}
html[data-theme="violet"]{
  --neon:#7c4dff;
  --neon2:#00e5ff;
  --line:rgba(124,77,255,.26);
  --line2:rgba(0,229,255,.20);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 20% 10%, #0b1b2a 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 80%, #1a0b2a 0%, transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{color:inherit}

.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.gridFloor{
  position:absolute;
  left:-25%;
  right:-25%;
  bottom:-30vh;
  height:78vh;
  transform-origin:50% 0%;
  transform: perspective(900px) rotateX(68deg);
  background:
    repeating-linear-gradient(90deg, rgba(0,229,255,.00) 0 38px, rgba(0,229,255,.18) 38px 39px),
    repeating-linear-gradient(0deg, rgba(0,229,255,.00) 0 38px, rgba(0,229,255,.14) 38px 39px);
  opacity:.75;
  filter: drop-shadow(0 0 18px rgba(0,229,255,.12));
  mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 70%, transparent 100%);
}
.gridFloor:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 260px at 50% 8%, rgba(0,229,255,.22), transparent 70%),
    radial-gradient(900px 420px at 50% 26%, rgba(124,77,255,.12), transparent 70%);
  mix-blend-mode: screen;
}

.gridCeil{
  position:absolute;
  inset:-2px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);
  opacity:.12;
  mask-image: radial-gradient(900px 500px at 50% 0%, #000 25%, transparent 80%);
}

.scan{
  position:absolute;
  inset:-20% -10%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,229,255,.10) 50%, transparent 100%);
  opacity:.70;
  transform: translateY(-60%);
  animation: scan 6.5s linear infinite;
  mix-blend-mode: screen;
}
@keyframes scan{
  from{transform: translateY(-60%)}
  to{transform: translateY(60%)}
}

.vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 700px at 50% 20%, transparent 35%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 35%, rgba(0,0,0,.62));
  opacity:.80;
}

.wrap{
  position:relative;
  z-index:1;
  width:min(1140px, calc(100vw - 40px));
  margin:0 auto;
  padding:34px 0 46px;
}

.top{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border:1px solid rgba(0,229,255,.22);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(4,10,16,.82), rgba(4,10,16,.58));
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:240px;
}
.logo{
  width:48px;
  height:48px;
  filter: drop-shadow(0 0 18px rgba(0,229,255,.18));
}
.brandText h1{
  margin:0;
  font-size:18px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.brandText p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
}

.topRight{
  display:flex;
  gap:10px;
  align-items:center;
}

.status{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  user-select:none;
}
.status .dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background: rgba(255,255,255,.30);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.status.ok .dot{background: var(--good)}
.status.bad .dot{background: var(--bad)}
.status .label{color:rgba(255,255,255,.70)}
.status .value{color:rgba(255,255,255,.92)}

.pill{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:var(--ink);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  font-size:11px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.pill:hover{
  border-color: rgba(0,229,255,.30);
  box-shadow:0 0 0 3px rgba(0,229,255,.10);
}
.pill:active{transform: translateY(1px)}

.hero{
  margin-top:14px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(4,10,16,.66), rgba(4,10,16,.44));
  box-shadow:0 18px 50px rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
}
.hero h2{margin:0; font-size:22px; letter-spacing:.02em}
.hero p{margin:8px 0 0; color:var(--muted); line-height:1.5}

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  padding:2px 6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.26);
  color:rgba(255,255,255,.90);
}

.searchRow{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.searchRow input{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:var(--ink);
  outline:none;
}
.searchRow input:focus{
  border-color: rgba(0,229,255,.34);
  box-shadow: 0 0 0 3px rgba(0,229,255,.12);
}

.iconBtn{
  appearance:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.88);
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.iconBtn:hover{
  border-color: rgba(0,229,255,.28);
  box-shadow:0 0 0 3px rgba(0,229,255,.10);
}
.iconBtn:active{transform: translateY(1px)}
.iconBtn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}

.appCard{
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(4,10,16,.74), rgba(4,10,16,.50));
  padding:16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  position:relative;
  overflow:hidden;
  transform-style: preserve-3d;
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
}
.appCard:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 260px at var(--mx) var(--my), rgba(0,229,255,.24), transparent 58%),
    radial-gradient(520px 240px at calc(var(--mx) + 16%) calc(var(--my) + 18%), rgba(124,77,255,.18), transparent 62%);
  opacity:.65;
  pointer-events:none;
  transition: opacity .14s ease;
}
.appCard:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(0,229,255,.20), rgba(0,0,0,0)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}
.appCard:hover{
  transform: translateY(-3px) perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  border-color: rgba(0,229,255,.28);
  box-shadow:0 28px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,229,255,.14) inset;
}
.appCard:hover:before{opacity:.92}

.icon{
  width:64px;
  height:64px;
  border-radius:18px;
  border:1px solid rgba(0,229,255,.22);
  background:rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  position:relative;
  z-index:1;
  box-shadow:0 0 0 1px rgba(124,77,255,.14) inset;
}
.icon img{
  width:40px;
  height:40px;
  opacity:.92;
  filter: drop-shadow(0 0 12px rgba(0,0,0,.25));
}

.meta{position:relative; z-index:1; min-width:0}
.titleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.titleRow h3{margin:0; font-size:18px; letter-spacing:.01em}
.route{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.12);
  padding:5px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.16);
  white-space:nowrap;
}
.meta p{margin:8px 0 0; color:var(--muted); line-height:1.45}
.tags{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tags span{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  border:1px solid rgba(0,229,255,.16);
  background:rgba(0,0,0,.12);
  padding:4px 10px;
  border-radius:999px;
  color:rgba(255,255,255,.78);
}

.noResults{
  margin-top:14px;
  padding:12px 14px;
  border-radius:18px;
  border:1px dashed rgba(0,229,255,.22);
  background:rgba(0,0,0,.18);
  color:var(--muted);
}
.noResults code{color:rgba(255,255,255,.88)}

.footer{
  margin-top:18px;
  color:rgba(255,255,255,.55);
  font-size:12px;
}
.footer code{color:rgba(255,255,255,.78)}

.hidden{display:none}
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 560px){
  .topRight{width:100%; justify-content:space-between}
}

@media (prefers-reduced-motion: reduce){
  .scan{animation:none}
  .appCard{transition:none}
  .appCard:hover{transform:none}
}