/* batjorge.com - light/dark style after pugleaf.net/status */
:root {
  --sb-primary: #2f8a55; --sb-success: #7fa83a; --sb-info: #2a9d8f; --sb-warning: #d99a1e;
  --sb-danger: #d0493b; --sb-secondary: #868b84; --sb-dark: #565b55;
  --sb-bg: #f4f6f2; --sb-card: #ffffff; --sb-card-head: #f3f6f1; --sb-text: #4f5550; --sb-strong: #2c312d;
  --sb-muted: #848a83; --sb-border: #dfe4db; --sb-grid: rgba(0,0,0,.06); --sb-shadow: 0 .15rem 1.75rem 0 rgba(40,50,40,.12);
  --sb-side-a: #2f6e48; --sb-side-b: #1c4630;
  --sb-rx: #2f8a55; --sb-tx: #2a9d8f;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-bs-theme="dark"] {
  --sb-primary: #5fb37f; --sb-success: #a3c45a; --sb-info: #4db6a8; --sb-warning: #e6b04a; --sb-danger: #e0695c;
  --sb-bg: #161917; --sb-card: #1e2220; --sb-card-head: #232825; --sb-text: #c8cdc8; --sb-strong: #eef1ee;
  --sb-muted: #8c938d; --sb-border: #2f3531; --sb-grid: rgba(255,255,255,.07); --sb-shadow: 0 .15rem 1.75rem 0 rgba(0,0,0,.45);
  --sb-side-a: #1f3d2b; --sb-side-b: #0f1712;
  --sb-rx: #5fb37f; --sb-tx: #4db6a8;
  --bs-body-bg: #161917; --bs-border-color: #2f3531; --bs-secondary-bg: #232825; --bs-tertiary-bg: #1e2220;
}
.btn-primary { --bs-btn-bg: var(--sb-primary); --bs-btn-border-color: var(--sb-primary); --bs-btn-hover-bg: var(--sb-side-a); --bs-btn-hover-border-color: var(--sb-side-a);
  --bs-btn-active-bg: var(--sb-side-a); --bs-btn-active-border-color: var(--sb-side-a); }
.btn-outline-primary { --bs-btn-color: var(--sb-primary); --bs-btn-border-color: var(--sb-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sb-primary);
  --bs-btn-hover-border-color: var(--sb-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sb-primary); --bs-btn-active-border-color: var(--sb-primary); }
.btn-outline-secondary { --bs-btn-color: var(--sb-muted); --bs-btn-border-color: var(--sb-border); --bs-btn-hover-color: var(--sb-strong);
  --bs-btn-hover-bg: var(--sb-bg); --bs-btn-hover-border-color: var(--sb-border); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sb-primary); --bs-btn-active-border-color: var(--sb-primary); }
.text-primary { color: var(--sb-primary) !important; } .text-success { color: var(--sb-success) !important; } .text-info { color: var(--sb-info) !important; }
html, body { background: var(--sb-bg); }
body { font-family: Nunito, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--sb-text); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
a { color: var(--sb-primary); }
.mono { font-family: var(--mono); }
.text-xs { font-size: .7rem; }
.text-strong { color: var(--sb-strong) !important; }
.text-muted2 { color: var(--sb-muted) !important; }
.min-w-0 { min-width: 0; }

/* ---------- topbar ---------- */
.topbar { min-height: 4.375rem; background: var(--sb-card); box-shadow: var(--sb-shadow); display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem; margin-bottom: 1.5rem; position: sticky; top: 0; z-index: 1020; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--sb-strong); font-weight: 900;
  letter-spacing: .05rem; text-transform: uppercase; font-size: 1rem; white-space: nowrap; }
.brand .logo { width: 2.1rem; height: 2.1rem; border-radius: .55rem; display: grid; place-items: center; color: #fff; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--sb-side-a), var(--sb-side-b)); }
.brand sup { font-weight: 400; text-transform: none; color: var(--sb-muted); letter-spacing: 0; }
.topnav { display: flex; gap: .15rem; margin-left: .5rem; }
.topnav a { color: var(--sb-muted); text-decoration: none; font-weight: 700; font-size: .85rem; padding: .45rem .7rem; border-radius: .4rem; white-space: nowrap; }
.topnav a:hover, .topnav a.active { color: var(--sb-primary); background: var(--sb-bg); }
.topnav a.soon { opacity: .55; }
.topbar .btn-icon { border: 0; background: transparent; color: var(--sb-muted); font-size: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: 0 0 auto; }
.topbar .btn-icon:hover { background: var(--sb-bg); color: var(--sb-primary); }
.topbar .vr { background: var(--sb-border); opacity: 1; align-self: center; height: 2rem; }
.ring { width: 2.1rem; height: 2.1rem; flex: 0 0 auto; color: var(--sb-strong); }
.ring circle { fill: none; stroke-width: 3; }
.ring .bg { stroke: var(--sb-border); }
.ring .fg { stroke: var(--sb-primary); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s linear; }
.live { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .72rem; letter-spacing: .08rem; color: var(--sb-danger); }
.live::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sb-danger); animation: pulse 1.6s infinite; }
.live.ok { color: var(--sb-success); }
.live.ok::before { background: var(--sb-success); animation-name: pulse-ok; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(231,74,59,.7); } 70% { box-shadow: 0 0 0 .5rem rgba(231,74,59,0); } 100% { box-shadow: 0 0 0 0 rgba(231,74,59,0); } }
@keyframes pulse-ok { 0% { box-shadow: 0 0 0 0 rgba(127,168,58,.7); } 70% { box-shadow: 0 0 0 .5rem rgba(127,168,58,0); } 100% { box-shadow: 0 0 0 0 rgba(127,168,58,0); } }

/* ---------- cards ---------- */
.card { background: var(--sb-card); border: 1px solid var(--sb-border); box-shadow: var(--sb-shadow); border-radius: .5rem; color: var(--sb-text); }
.card-header { background: var(--sb-card-head); border-bottom: 1px solid var(--sb-border); padding: .75rem 1.25rem; }
.card-header h6 { margin: 0; font-weight: 800; color: var(--sb-primary); }
.bl-primary { border-left: .25rem solid var(--sb-primary) !important; }
.bl-success { border-left: .25rem solid var(--sb-success) !important; }
.bl-info { border-left: .25rem solid var(--sb-info) !important; }
.bl-warning { border-left: .25rem solid var(--sb-warning) !important; }
.bl-danger { border-left: .25rem solid var(--sb-danger) !important; }
.bl-dark { border-left: .25rem solid var(--sb-dark) !important; }
.kpi .lbl { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03rem; }
.kpi .val { font-size: 1.35rem; font-weight: 800; color: var(--sb-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .ico { font-size: 2rem; color: var(--sb-border); }
.kpi .sub { font-size: .75rem; color: var(--sb-muted); }
.progress { background: var(--sb-bg); height: .5rem; }
.progress-bar { background: var(--sb-primary); }
.chart-box { position: relative; height: 16.25rem; }
h1.page { color: var(--sb-strong); font-weight: 400; }
.pill { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.pill-ok { background: rgba(127,168,58,.16); color: var(--sb-success); }
.pill-warn { background: rgba(217,154,30,.18); color: var(--sb-warning); }
.pill-bad { background: rgba(208,73,59,.15); color: var(--sb-danger); }
.pill-soon { background: var(--sb-bg); color: var(--sb-muted); border: 1px solid var(--sb-border); }
.dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--sb-border); }
.dot-ok { background: var(--sb-success); box-shadow: 0 0 .5rem var(--sb-success); }
.dot-bad { background: var(--sb-danger); box-shadow: 0 0 .5rem var(--sb-danger); }
footer { color: var(--sb-muted); font-size: .78rem; }
footer a { color: var(--sb-muted); text-decoration: none; }
footer a:hover { color: var(--sb-primary); }

/* ---------- landing ---------- */
.hero { padding: 1.5rem 0 1rem; }
.kicker { font-size: .72rem; font-weight: 800; letter-spacing: .12rem; text-transform: uppercase; color: var(--sb-primary); }
.hero h1 { font-weight: 900; color: var(--sb-strong); font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -.02em; line-height: 1.05; }
.hero h1 span { color: var(--sb-primary); }
.hero .lead { color: var(--sb-text); font-size: 1.1rem; max-width: 34rem; }
.feature { position: relative; display: block; border-radius: .75rem; overflow: hidden; box-shadow: var(--sb-shadow); background: #0b100d;
  aspect-ratio: 4 / 3; text-decoration: none; }
.feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.feature:hover img { transform: scale(1.04); }
.feature .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem .9rem; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.78), transparent); }
.feature .cap .t { font-weight: 800; font-size: 1.15rem; }
.feature .cap .d { font-size: .75rem; opacity: .8; font-family: var(--mono); }
.feature .badge-new { position: absolute; top: .8rem; left: .8rem; }
.thumb { display: block; text-decoration: none; color: inherit; }
.thumb .img { aspect-ratio: 1; border-radius: .5rem; overflow: hidden; background: var(--sb-card-head); border: 1px solid var(--sb-border); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .3s; }
.thumb:hover img { transform: scale(1.06); }
.thumb .t { font-weight: 700; font-size: .85rem; color: var(--sb-strong); margin-top: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb .d { font-size: .7rem; color: var(--sb-muted); font-family: var(--mono); }
.svc-card { text-decoration: none; display: block; height: 100%; transition: transform .15s; }
a.svc-card:hover { transform: translateY(-2px); }
.svc-card .ico { font-size: 1.6rem; color: var(--sb-primary); }
.svc-card.soon .ico { color: var(--sb-muted); }
.svc-card h5 { font-weight: 800; color: var(--sb-strong); font-size: 1rem; margin: 0; }
.svc-card p { font-size: .85rem; margin: .4rem 0 0; color: var(--sb-text); }
.mini { font-family: var(--mono); font-size: .75rem; color: var(--sb-muted); }
.mini b { color: var(--sb-strong); font-weight: 600; }
.skeleton { background: linear-gradient(90deg, var(--sb-card-head), var(--sb-border), var(--sb-card-head)); background-size: 200% 100%; animation: sk 1.4s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* wide layout for the start page: grows with the text scaling on big screens instead of a fixed 1320 px column */
.bj-wide { max-width: 112rem; margin-left: auto; margin-right: auto; }
.bj-wide .feature { max-height: 72vh; }

/* ---------- status ---------- */
.banner { border-radius: .5rem; padding: .85rem 1.1rem; display: flex; align-items: center; gap: .75rem; font-weight: 800; color: var(--sb-strong);
  background: var(--sb-card); border: 1px solid var(--sb-border); box-shadow: var(--sb-shadow); }
.banner .bi { font-size: 1.4rem; }
.banner.ok .bi { color: var(--sb-success); }
.banner.bad .bi { color: var(--sb-danger); }
.tbars { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .78rem; }
.tbars td { padding: .1rem .35rem; white-space: nowrap; line-height: 1.3; }
.tbars td.k { color: var(--sb-strong); font-weight: 600; }
.tbars td.b { width: 100%; max-width: 1px; }
.tbars .bar { display: flex; height: .55rem; border-radius: .2rem; overflow: hidden; background: var(--sb-bg); }
.tbars .bar i { display: block; height: 100%; }
.tbars .bar .rx { background: var(--sb-rx); }
.tbars .bar .tx { background: var(--sb-tx); opacity: .55; }
.tbars td.n { text-align: right; color: var(--sb-text); font-variant-numeric: tabular-nums; }
.tbars tr:hover td { background: var(--sb-bg); }
.tbars tr.today td.k { color: var(--sb-primary); }
.scroll { max-height: 26rem; overflow: auto; }
.svc-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px dashed var(--sb-border); font-size: .85rem; }
.svc-row:last-child { border-bottom: 0; }
.svc-row .nm { color: var(--sb-strong); font-weight: 700; }
.svc-row .grp { font-size: .68rem; color: var(--sb-muted); text-transform: uppercase; letter-spacing: .04rem; }
.svc-row .up { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--sb-muted); text-align: right; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .82rem; margin: 0; }
.kv dt { color: var(--sb-muted); font-weight: 600; }
.kv dd { margin: 0; color: var(--sb-strong); font-family: var(--mono); font-size: .76rem; overflow-wrap: anywhere; }
.legend-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: .15rem; margin-right: .25rem; vertical-align: baseline; }
.btn-group .btn { font-weight: 700; }

@media (min-width: 1921px) { html { font-size: clamp(16px, calc(100vw / 120), 32px); } }
@media (prefers-reduced-motion: reduce) { .live::before, .skeleton { animation: none; } .feature img, .thumb img { transition: none; } }
@media (max-width: 575.98px) {
  .topbar { gap: .4rem; padding: 0 .5rem; }
  .container-xl, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
  .kpi .val { font-size: 1.15rem; }
}