/* ===== GhostStamp Theme (matches your other GS pages) ===== */
:root{
  --bg:#0d0d0d;         /* page background */
  --fg:#eaeaea;         /* primary text */
  --muted:#9aa1a9;      /* helper text */
  --brand:#70e1ff;      /* accent / buttons */
  --ok:#9ffcb0;
  --radius:18px;
  --panel:rgba(255,255,255,.03);
  --panel-border:rgba(255,255,255,.08);
  --input-bg:rgba(255,255,255,.06);
  --input-border:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}

/* Base color; background tile is drawn by ::before */
body{
  margin:0;
  color:var(--fg);
  background-color:var(--bg);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* base (applies to all widths) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:url("https://i.ibb.co/4w2nvGvD/GHOSTSTAMP-binary-bigger-1-0.png");
  background-repeat:repeat-y;
  background-position:top center;
  background-size:120% auto;  /* default scale */
  opacity:1;
  pointer-events:none;
}

/* progressively scale up on very wide screens */
@media (min-width: 1400px) {
  body::before { background-size:120% auto; }
}
@media (min-width: 1700px) {
  body::before { background-size:130% auto; }
}
@media (min-width: 2000px) {
  body::before { background-size:140% auto; }
}

/* iOS Safari fallback for fixed backgrounds */
@supports (-webkit-touch-callout: none) {
  body::before { position:absolute; height:100%; }
}

/* --- header image (original size, centered) --- */
.hero{
  display:block;
  margin:32px auto 18px;   /* top space + center */
  width:auto;              /* keep intrinsic width */
  max-width:100%;          /* shrink on small screens */
  height:auto;             /* keep ratio */
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.35));
}

/* layout */
.container{
  max-width:1100px;
  margin:12px auto 48px;
  padding:0 16px;
}
.grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}

/* glassy cards */
.card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  backdrop-filter:saturate(120%) blur(6px);
}
.card h3{margin:0 0 10px; text-align:center}
.label, label{color:var(--muted); font-size:.95rem; display:block; margin:.35rem 0}

/* inputs */
input, select, button{
  width:100%;
  font:inherit;
  color:var(--fg);
  border-radius:12px;
  padding:12px 14px;
  border:1px solid var(--input-border);
}
input, select{ background:var(--input-bg); }
input::placeholder{ color:var(--muted) }

/* --- spacing inside cards (added) --- */
.card input,
.card select { margin-bottom:12px; }           /* space between fields */
.card button { 
  margin-top:14px;                              /* space above button */
  margin-bottom:12px;                           /* space below button */
}
.card .small { margin:8px 0; }                  /* helper text spacing */
.card pre { margin-top:10px; }                  /* space above result box */

/* buttons (brand glow) */
button{
  cursor:pointer;
  border-color:var(--brand);
  background:linear-gradient(90deg, rgba(112,225,255,.18), rgba(112,225,255,.06));
  transition:box-shadow .15s, transform .05s;
  font-weight:700;
}
button:hover{ box-shadow:0 0 0 1px rgba(112,225,255,.45), 0 8px 22px rgba(112,225,255,.16) }
button:active{ transform:translateY(1px) }
button:disabled{ opacity:.55; cursor:not-allowed }

/* small help & outputs */
.small{font-size:.92rem; color:var(--muted)}
pre{
  background:rgba(0,0,0,.35);
  border:1px solid var(--input-border);
  color:var(--fg);
  padding:12px;
  border-radius:12px;
  max-height:40rem;
  overflow:auto;
  white-space:pre-wrap;
}

/* status colors */
.ok{color:var(--ok)}
.err{color:#ff8a8a}

/* === Extras used by the new cards/buttons/badges === */
.row {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* secondary + ghost button variants used on helper buttons */
button.secondary {
  background: rgba(255,255,255,.06);
  border-color: var(--input-border);
  font-weight: 600;
}
button.ghost {
  background: transparent;
  border-color: var(--input-border);
  font-weight: 600;
}

/* small verification badges/text */
.warn { color: #f59e0b; font-weight: 600; }   /* amber */
.ok   { color: var(--ok);  font-weight: 600; }/* you already had .ok; this keeps it bold */

/* link inside proofActions (download proof.json) */
#proofActions a {
  display:inline-block;
  margin-top:.5rem;
  text-decoration:none;
  color: var(--brand);
  border: 1px solid var(--input-border);
  padding: .35rem .6rem;
  border-radius: 10px;
}
#proofActions a:hover {
  box-shadow: 0 0 0 1px rgba(112,225,255,.35), 0 6px 16px rgba(112,225,255,.14);
}

.container{
  max-width:1560px;             /* wider */
  margin:12px auto 48px;
  padding:0 16px;
}
.grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); /* a bit wider cards */
}

.card{ min-width: 360px; }

/* widen the page on desktops so 4 cards fit */
@media (min-width: 1400px){
  .container { max-width: 1500px; } /* was ~1100 */
  .grid { grid-template-columns: repeat(4, 1fr); } /* force 4 across */
}

/* keep columns readable on medium screens */
@media (min-width: 1100px) and (max-width: 1499px){
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- progress timeline --- */
.timeline{
  display:flex; align-items:center; gap:10px;
  margin-top:10px; flex-wrap:wrap;
}
.step{
  display:flex; align-items:center; gap:8px;
}
.step .dot{
  width:12px; height:12px; border-radius:50%;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
}
.step .label{
  font-size:.92rem; color:var(--fg);
  opacity:.85; white-space:nowrap;
}
.bar{
  width:28px; height:2px; background: rgba(255,255,255,.2);
  border-radius:2px;
}
.step.done .dot{ background: var(--ok); box-shadow:none; }
.step.current .dot{ background:#f59e0b; box-shadow:none; }   /* amber */
.step.dim .label{ opacity:.55; }
.bar.done{ background: var(--ok); }
.bar.current{ background:#f59e0b; }