/* Layout helpers */
.container { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; }
.title-grad { font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 800;
  background: linear-gradient(90deg,#818cf8,#a78bfa); -webkit-background-clip:text; background-clip:text; color: transparent; }
.h2 { font-size: 1.5rem; font-weight: 700; color: #a5b4fc; }
.h3 { font-size: 1.25rem; font-weight: 700; color: #c4b5fd; }

/* Cards */
.card { background: rgba(17,24,39,0.72); border: 1px solid rgba(55,65,81,.7); border-radius: 18px; padding: 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.subcard { background: rgba(31,41,55,0.75); border: 1px solid rgba(75,85,99,.7); border-radius: 14px; padding: 1rem; }
.pill { background: rgba(31,41,55,.75); border-radius: 12px; padding: 0.75rem 1rem; border: 1px solid rgba(75,85,99,.7); }
.pill-title { font-weight: 600; margin-bottom: .25rem; color: #93c5fd; }

.badge { font-size: .85rem; background: rgba(99,102,241,.2); border: 1px solid rgba(99,102,241,.5); padding: .2rem .55rem; border-radius: 999px; }

/* Inputs */
.input-field {
  width: 100%; margin-bottom: .75rem; padding: .6rem .8rem;
  border-radius: .7rem; background: #111827; color: #fff;
  border: 1px solid #374151; font-size: .95rem;
}
.input-field::placeholder { color: #94a3b8; }
.input-field:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.label { display: block; margin: .25rem 0; color: #cbd5e1; font-size: .9rem; }

/* Buttons */
.btn-primary { background: linear-gradient(90deg,#6366f1,#7c3aed); border: 1px solid rgba(99,102,241,.5);
  color:#fff; border-radius:.7rem; padding:.6rem 1rem; font-weight:700; }
.btn-primary:hover { filter: brightness(1.05); }

/* Text blocks */
.copy { line-height: 1.6; color: #e5e7eb; max-width: 75ch; word-wrap: break-word; overflow-wrap: anywhere; }
.codeblock { margin-top:.5rem; background: #0b1020; color:#d1d5db; border:1px solid #374151; border-radius: 12px; padding: .75rem; overflow:auto; }

/* Metrics */
.metrics { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: .75rem; margin-top: .5rem; }
.metric { background: rgba(15,23,42,.6); border: 1px solid rgba(51,65,85,.7); border-radius: 12px; padding: .75rem; }
.metric-label { color: #93c5fd; font-size: .85rem; }
.metric-value { font-size: 1.4rem; font-weight: 800; }

/* Keep content above starfield */
main, header, footer { position: relative; z-index: 10; }

/* Body fade-in */
html, body { height: 100%; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; animation: fadeIn .5s ease-in; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* Floating nav pills */
.floater-wrap {
  position: fixed;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
}
.floater {
  background: rgba(31, 41, 55, 0.85); /* gray-800 w/ opacity */
  border: 1px solid rgba(75, 85, 99, 0.6); /* gray-600 */
  color: #c7d2fe; /* indigo-200 */
  padding: 10px 14px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 1;
  backdrop-filter: blur(6px);
  transition: transform .1s ease, background .2s ease;
}
.floater:hover {
  background: rgba(55, 65, 81, 0.88);
  transform: translateY(-1px);
}