/* =========================================================================
   PrivateByte Looking Glass — brand reskin (matches privatebyte.com)
   Minimal · borderless filled panels · dark stone-black + green accent.
   Inter (UI) + JetBrains Mono (output). Loaded after Bootstrap 5.3.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
  --pb-bg:#0a0a0c; --pb-bg-2:#08080a; --pb-panel:#101013; --pb-panel-2:#16161a;
  --pb-line:rgba(255,255,255,0.055); --pb-text:#e7e6e4; --pb-muted:#a8a29e; --pb-dim:#78716c;
  --pb-green:#4ade80; --pb-green-2:#86efac;
  --bs-body-bg:var(--pb-bg); --bs-body-color:var(--pb-text);
  --bs-primary:var(--pb-green); --bs-primary-rgb:74,222,128;
  --bs-border-color:var(--pb-line); --bs-secondary-color:var(--pb-muted);
  --bs-emphasis-color:var(--pb-text); --bs-link-color:var(--pb-green); --bs-link-hover-color:var(--pb-green-2);
}

html, body { background:var(--pb-bg); }
body { color:var(--pb-text); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.005em; }
.col-lg-8 { max-width:900px; }

/* ---- Header / wordmark (PRIVATEBYTE caps, spaced — landing style) ---- */
header.border-bottom { border:0 !important; padding-bottom:0 !important; margin-bottom:4.5rem !important; }
header h2 { color:var(--pb-text) !important; font-weight:800; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:0.3em; margin:0; }

/* ---- Region picker — Variant B: location pin + sublabel + dropdown ---- */
header.border-bottom{ justify-content:space-between; }
header .col-4{ display:flex; justify-content:flex-end; align-items:center; }
.pb-region{ position:relative; }
.pb-region .pb-region-btn{ display:inline-flex; align-items:center; gap:9px; background:var(--pb-panel);
  border:1px solid var(--pb-line); border-radius:12px; padding:.55rem 1rem; font-size:.82rem; font-weight:600;
  color:var(--pb-text); cursor:pointer; }
.pb-region .pb-region-btn:hover{ border-color:rgba(255,255,255,.12); }
.pb-region .pb-region-btn svg{ width:14px; height:14px; flex:0 0 auto; color:var(--pb-green); }
.pb-region .pb-region-btn .sub{ color:var(--pb-dim); font-weight:500; }
.pb-region .pb-region-btn .car{ color:var(--pb-muted); margin-left:2px; font-size:.7rem; }
.pb-region .dropdown-menu{ background:var(--pb-panel); border:1px solid var(--pb-line); border-radius:12px;
  padding:.35rem; min-width:210px; box-shadow:0 18px 40px -20px rgba(0,0,0,.8); }
.pb-region .dropdown-item{ color:var(--pb-text); border-radius:8px; font-size:.85rem; display:flex;
  align-items:center; gap:9px; padding:.5rem .7rem; }
.pb-region .dropdown-item:hover{ background:rgba(74,222,128,.08); color:var(--pb-green-2); }
.pb-region .dropdown-item.active{ background:transparent; color:var(--pb-green-2); }
.pb-region .dropdown-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--pb-green); box-shadow:0 0 8px var(--pb-green); flex:0 0 auto; }
.pb-region .dropdown-item .tag{ margin-left:auto; color:var(--pb-dim); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
/* fallback: if a native <select> is still rendered, theme it like the pill */
header .form-select{ background:var(--pb-panel); border:1px solid var(--pb-line); border-radius:12px;
  color:var(--pb-text); font-size:.82rem; font-weight:600; padding:.55rem 2rem .55rem 1rem; opacity:1 !important; }

/* ---- Borderless FILLED panels (keep the container, lose the border) ---- */
.card { background:var(--pb-panel); border:0 !important; border-radius:18px; box-shadow:none !important; }
.card-body { padding:1.9rem 1.9rem !important; }
.row.mb-5, .row.pb-5 { margin-bottom:2rem !important; padding-bottom:0 !important; }
main > .row + .row, main > * + .row { margin-top:0; }

/* ---- Section titles: clean Inter, no italics ---- */
.card-title { font-family:'Inter',sans-serif; font-style:normal !important; font-weight:600;
  font-size:1.15rem; letter-spacing:-0.01em; color:var(--pb-text); margin-bottom:1.6rem !important; }

/* ---- Labels / muted ---- */
.text-muted { color:var(--pb-muted) !important; }
label.text-muted { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600;
  color:var(--pb-dim) !important; margin-bottom:.55rem !important; }
.input-group-text { background:var(--pb-panel-2); border-color:var(--pb-line); color:var(--pb-muted); font-weight:500; }

/* ---- Inputs ---- */
.form-control, .form-select { background:var(--pb-bg-2); border-color:var(--pb-line); color:var(--pb-text); border-radius:10px; }
.input-group > :not(:first-child){ border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group > :not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; }
.form-control::placeholder{ color:var(--pb-dim); }
.form-control:focus, .form-select:focus { background:var(--pb-bg-2); color:var(--pb-text);
  border-color:var(--pb-green); box-shadow:0 0 0 3px rgba(74,222,128,0.16); }
.form-control[readonly]{ color:var(--pb-muted); }

/* ---- Buttons ---- */
.btn{ border-radius:10px; }
.btn-primary{ background:var(--pb-green); border-color:var(--pb-green); color:#06210f; font-weight:600;
  padding-inline:1.7rem; transition:background .2s,box-shadow .2s,transform .15s; }
.btn-primary:hover,.btn-primary:focus{ background:var(--pb-green-2); border-color:var(--pb-green-2); color:#06210f;
  transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(74,222,128,0.55); }
.btn-outline-secondary{ color:var(--pb-text); border-color:var(--pb-line); background:transparent; }
.btn-outline-secondary:hover{ background:rgba(74,222,128,0.08); border-color:var(--pb-green); color:var(--pb-green-2); }

/* ---- Code / mono ---- */
code{ font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--pb-green-2); background:var(--pb-bg-2);
  border:1px solid var(--pb-line); border-radius:6px; padding:.15rem .45rem; font-size:.8rem; }

/* ---- Output panes ---- */
#outputCard,#speedtest-output{ background:var(--pb-bg-2) !important; border:1px solid var(--pb-line) !important;
  border-radius:12px; color:var(--pb-text) !important; }
#outputContent,#speedtest-output{ font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:.82rem; line-height:1.55; color:#d6f5e1 !important; }
#speedtest-output{ padding:1.1rem 1.35rem !important; }
#speedtest-output em{ color:var(--pb-dim); }

/* ---- Beta badge ---- */
.badge.bg-primary{ background:rgba(74,222,128,0.12) !important; color:var(--pb-green-2) !important;
  border:1px solid rgba(74,222,128,0.35); font-weight:600; vertical-align:middle; }

/* =======================  LANDING-STYLE FOOTER  ======================= */
footer.pb-foot{ border:0 !important; margin-top:5rem !important; padding:0 !important; color:var(--pb-muted); }
.pb-foot .foot-grid{ display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:48px;
  padding:3rem 0 2.5rem; border-top:1px solid var(--pb-line); }
.pb-foot .foot-brand .wm{ font-weight:800; text-transform:uppercase; letter-spacing:.3em; font-size:.95rem; color:var(--pb-text); }
.pb-foot .foot-brand p{ margin:.9rem 0 0; font-size:.82rem; line-height:1.6; color:var(--pb-dim); max-width:30ch; }
.pb-foot h6{ font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--pb-dim); margin-bottom:1rem; font-weight:600; }
.pb-foot ul{ list-style:none; padding:0; margin:0; }
.pb-foot li{ margin-bottom:.6rem; }
.pb-foot a{ color:var(--pb-muted); text-decoration:none; font-size:.85rem; transition:color .15s; }
.pb-foot a:hover{ color:var(--pb-green-2); }
.pb-foot .foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding:1.4rem 0 2.5rem; border-top:1px solid var(--pb-line); font-size:.78rem; color:var(--pb-dim); }
.pb-foot .foot-bottom .net{ font-family:'JetBrains Mono',monospace; letter-spacing:.04em; }
@media(max-width:640px){ .pb-foot .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; } }

/* hide Hybula's stock "Powered by" footer (we render custom.footer.php instead) */
footer.border-top.text-muted{ display:none !important; }