:root { --border:#ddd; --muted:#666; --link:#0b57d0; }
body { font-family: system-ui; margin:0; }
.top { display:flex; justify-content:space-between; align-items:baseline; padding:16px 24px; border-bottom:1px solid var(--border); }
.brand { display:flex; gap:12px; align-items:baseline; }
.logo { font-weight:700; font-size:18px; }
.nav a { text-decoration:none; color:var(--link); margin-left:12px; }
.container { max-width:1200px; margin:0 auto; padding:24px; }

.controls .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
input { font-size:1rem; padding:.55rem; width:360px; }
button { font-size:1rem; padding:.55rem .8rem; cursor:pointer; }
.muted { color:var(--muted); }

.table { width:100%; border-collapse:collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:.45rem; text-align:left; vertical-align:top; font-size:.95rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.pager { display:flex; gap:10px; align-items:center; margin-top:14px; }

.badge { display:inline-block; padding:.15rem .5rem; border:1px solid #bbb; border-radius:999px; font-size:.9rem; white-space:nowrap; }
.badge.ok { border-color:#9ac; }
.badge.danger { border-color:#d88; }

.chip { border:1px solid #bbb; border-radius:999px; background:#fff; padding:.35rem .7rem; }
.chip.active { border-color:var(--link); }

.link { color:var(--link); text-decoration:none; }

.card { border:1px solid var(--border); border-radius:12px; padding:12px; margin:10px 0 18px; }
.rowflex { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.h2 { margin:0 0 8px; }
.h3 { margin:18px 0 8px; }

.profile-head { display:flex; gap:16px; align-items:flex-start; }
.avatar { width:64px; height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); }
.avatar.placeholder { background:#fafafa; }
.k { color:var(--muted); display:inline-block; min-width:170px; }
.kv { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.title { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px){ .grid2 { grid-template-columns: 1fr; } }


.avatar-img {
  border-radius: 12px;
  border: 1px solid var(--border);
  image-rendering: pixelated;
}


.avatar-wrap { position: relative; width: 96px; height: 96px; }
.avatar-img { width: 96px; height: 96px; border-radius: 12px; border: 1px solid var(--border); image-rendering: pixelated; display:block; }
.avatar.placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }



input.small { width: 120px; }
select { font-size: 1rem; padding: .45rem; }


.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: center;
}

.h1 { font-size: 40px; margin: 0 0 8px; }
.lead { font-size: 16px; margin: 0 0 14px; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
}
.btn.ghost { opacity: .85; }

.hero-img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  display: block;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.gallery img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
}

.videos { display: grid; gap: 14px; margin-top: 10px; }
.video-title { font-weight: 600; margin-bottom: 6px; }
.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
}

.tiny { font-size: 12px; }


#sinceShutdown { font-size: 18px; }