:root {
  --lz-par-x: 0px;
  --lz-par-y: 0px;
  --lz-glow-hue: 260;
  --lz-overlay: 0.68;
  --lz-vignette: 0.82;

  --lz-bg: #000;
  --lz-fg: #fff;
  --lz-muted: rgba(255,255,255,.72);
  --lz-muted2: rgba(255,255,255,.5);
  --lz-line: rgba(255,255,255,.12);
  --lz-chip: rgba(255,255,255,.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 18px 18px 28px;
  color: var(--lz-fg);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  /* background image */
  --lz-bg-image: url('./bg.jpg');

  background: var(--lz-bg) var(--lz-bg-image) no-repeat
    calc(50% + var(--lz-par-x)) calc(50% + var(--lz-par-y)) / cover;

  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Dark overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,var(--lz-overlay));
  pointer-events: none;
  z-index: -1;
}

/* Vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.55) 65%,
    rgba(0,0,0,var(--lz-vignette)) 100%);
  pointer-events: none;
  z-index: -1;
}

/* Glow layer */
.lz-glowlayer{
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
  background:
    radial-gradient(700px 420px at 18% 22%,
      hsla(var(--lz-glow-hue), 85%, 62%, .20) 0%,
      transparent 60%),
    radial-gradient(900px 520px at 78% 18%,
      hsla(calc(var(--lz-glow-hue) + 40), 85%, 60%, .16) 0%,
      transparent 64%);
  filter: blur(6px);
}
body.lz-glow-on .lz-glowlayer{ opacity: 1; }

.lz-shell { max-width: 980px; margin: 0 auto; }

.lz-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 0;
  backdrop-filter: blur(6px);
}

.lz-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}

.lz-muted { color: var(--lz-muted); }
.lz-muted2 { color: var(--lz-muted2); }

.lz-page {
  border: 1px solid var(--lz-line);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 14px;
  margin: 0 0 14px 0;
  backdrop-filter: blur(6px);
}

/* status panel spacing */
.lz-statuspanel{ margin-bottom: 12px; }

/* 3 per row grid */
.lz-linkdump{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 900px){
  .lz-linkdump{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .lz-linkdump{ grid-template-columns: 1fr; }
  body { padding: 14px 14px 24px; }
}

.lz-linkgroup{
  border: 1px solid var(--lz-line);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  overflow: hidden;
  min-width: 0;
}

.lz-linkhead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--lz-line);
  background: rgba(255,255,255,.03);
}

.lz-linkh3{
  margin: 0;
  font-size: 12px;
  letter-spacing: .2px;
}

.lz-linklist{ list-style: none; padding: 6px 0; margin: 0; }

.lz-linkitem{
  padding: 8px 12px;
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.lz-linkitem:first-child{ border-top: 0; }

.lz-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--lz-fg);
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  width: fit-content;
  max-width: 100%;
}
.lz-link:hover{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}
.lz-linklabel{ font-weight: 650; }
.lz-linkarrow{ color: rgba(255,255,255,.55); }
.lz-linknote{ line-height: 1.25; color: var(--lz-muted); }
.lz-link[data-placeholder="1"]{ opacity: .66; }

/* static link "button" for status panel */
.lz-link-static{
  cursor: default;
}
.lz-link-static:hover{
  transform: none;
  border-color: rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

code{
  color: var(--lz-fg);
  background: var(--lz-chip);
  border: 1px solid var(--lz-line);
  padding: 1px 5px;
  border-radius: 6px;
}

.lz-footer{ margin-top: 10px; color: var(--lz-muted2); user-select: none; }


/* Status panel: compact 2-up layout */
.lz-statusgrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
}
.lz-statuscell{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 10px;
  min-width: 0;
}
.lz-statuslabel{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.lz-statusvalue{
  color: rgba(255,255,255,.92);
}
@media (max-width: 700px){
  .lz-statusgrid{ grid-template-columns: 1fr; }
}

/* Service icons */
.lz-ico{
  width: 16px;
  height: 16px;
  display:inline-block;
  flex: 0 0 auto;
  opacity: .9;
  color: rgba(255,255,255,.92);
  filter: drop-shadow(0 0 6px rgba(140,200,255,.10));
}