/* Nomad Hideout — secret hideout dossier vibe */
:root{
  --bg: #0f1220;
  --panel: #15192e;
  --accent: #4ade80;
  --accent2: #60a5fa;
  --danger: #ef4444;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --card: #0b1022;
  --border: #1f2545;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(160deg,#0b1022 0%,#0f1220 60%,#0b1022 100%);color:var(--text);font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.wrap{max-width:980px;margin:0 auto;padding:16px}
.hidden{display:none}
.muted{color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; font-size: 12px; white-space: pre-wrap; max-height: 160px; overflow: auto; background: #0d132a; padding: 12px; border: 1px solid var(--border); border-radius: 8px;}

.nh-header{border-bottom:1px solid var(--border); background:rgba(9,12,28,.7); position:sticky; top:0; backdrop-filter: blur(6px);}
.nh-header .wrap{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; gap:12px; align-items:center}
.brand img{width:28px;height:28px; filter: drop-shadow(0 0 8px rgba(96,165,250,.4));}
h1{font-size:18px; margin:0}

.btn{border:1px solid var(--border); background: #131836; color:var(--text); padding:8px 12px; border-radius:8px; cursor:pointer}
.btn:hover{border-color:#2b335f}
.btn.primary{background:linear-gradient(90deg, #1f2937, #1e293b); border-color:#2b335f}
.btn.danger{border-color: #3b1d22; background: #2a0f14}

.card{background:rgba(10,14,34,.7); border:1px solid var(--border); border-radius:12px; padding:16px; margin:16px 0}
.flex-row{display:flex; align-items:center; justify-content:space-between}
.gap{gap:8px}

.consent{background:#0e1330; border:1px dashed #2b335f; border-radius:12px; padding:16px; margin-top:16px}
.consent-box{display:inline-flex; align-items:center; gap:8px; margin-top:8px}

.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
@media (min-width:780px){ .metrics{grid-template-columns:repeat(4,1fr)} }

.metric{background:#0e1330; padding:12px; border:1px solid var(--border); border-radius:10px}
.metric label{display:block; font-size:12px; color:var(--muted)}
.metric .value{font-size:18px; font-weight:600}

.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.badge{padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); background: #101633}
.badge.ok{background:#0d1f18; color:#b7ffd9; border-color:#1f4f3e}
.badge.warn{background:#2a1e0c; color:#ffe1a6; border-color:#5b4316}
.badge.fail{background:#2b1418; color:#ffd0d6; border-color:#5e232b}

.targets{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:8px}
@media (min-width:780px){ .targets{grid-template-columns:repeat(5,1fr)} }
.target{display:flex; align-items:center; gap:8px; font-size:13px; background:#0e1330; border:1px solid var(--border); padding:8px 10px; border-radius:10px}
.dot{width:8px;height:8px;border-radius:999px; background:#334155}
.dot.ok{background:#22c55e}
.dot.slow{background:#f59e0b}
.dot.blocked{background:#ef4444}

.footer{opacity:.8; font-size:12px; text-align:center; margin:24px 0}

/* Responsive adjustments */
@media (max-width: 780px) {
  .wrap {
    padding: 12px;
  }

  .nh-header .wrap {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  h1 {
    font-size: 16px;
  }

  .brand img {
    width: 24px;
    height: 24px;
  }

  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .targets {
    grid-template-columns: repeat(2, 1fr);
  }

  .card {
    padding: 12px;
  }

  .flex-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .btn {
    padding: 6px 10px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .metrics {
    grid-template-columns: 1fr;
  }

  .targets {
    grid-template-columns: 1fr;
  }

  .brand {
    gap: 8px;
  }

  h1 {
    font-size: 14px;
  }
}