:root{
  --bg:#0a0d13;
  --bg-elevated:#12161f;
  --bg-inset:#0e1119;
  --border:#242c3b;
  --border-soft:#1a2029;
  --text:#e7e9ee;
  --text-dim:#9aa3b7;
  --text-faint:#5b6478;
  --accent:#4fd0e0;
  --accent-dim:#2a7b86;
  --warn:#e2574c;
  --warn-dim:#5c2a26;
  --ok:#7fd88f;
  --ok-dim:#2f5c3a;
  --shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Spectral', Georgia, serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
.display{ font-family:'Oswald', sans-serif; }
a{ color:var(--accent); }

.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:0.75rem 1.5rem;
  background:rgba(10,13,19,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-soft);
}
.topbar .brand{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  letter-spacing:0.12em;
  font-size:0.95rem;
  color:var(--text);
  text-decoration:none;
}
.topbar .brand span{ color:var(--accent); }
.topbar-nav{ display:flex; align-items:center; gap:0.9rem; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; }
.topbar-nav a{ color:var(--text-dim); text-decoration:none; }
.topbar-nav a:hover{ color:var(--accent); }
.topbar-nav .user-chip{ color:var(--text-dim); }
.topbar-nav .btn-mini{
  color:var(--text); border:1px solid var(--border); background:var(--bg-elevated);
  padding:0.35rem 0.7rem; border-radius:5px; text-decoration:none;
}
.topbar-nav .btn-mini:hover{ border-color:var(--accent); color:var(--accent); }
.topbar-nav .btn-mini.primary{ border-color:var(--accent-dim); color:var(--accent); }

.page{ max-width:32rem; margin:0 auto; padding:3rem 1.5rem 5rem; }
.page.wide{ max-width:52rem; }
.page h1{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:1.9rem;
  margin:0 0 0.4rem; letter-spacing:0.02em;
}
.page .lede{ color:var(--text-dim); margin:0 0 1.8rem; }

.card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1.6rem;
  box-shadow:var(--shadow);
  margin-bottom:1.5rem;
}
.card h2{ font-family:'Oswald', sans-serif; font-weight:600; font-size:1.15rem; margin:0 0 1rem; }
.card .eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent); margin:0 0 0.5rem;
}

.field{ margin-bottom:1.1rem; }
.field label{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:0.75rem;
  letter-spacing:0.03em; color:var(--text-dim); margin-bottom:0.4rem;
}
.field input[type=text], .field input[type=email], .field input[type=password], .field select{
  width:100%; background:var(--bg-inset); border:1px solid var(--border); color:var(--text);
  padding:0.65rem 0.8rem; border-radius:6px; font-family:'IBM Plex Mono', monospace; font-size:0.88rem;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--accent); }
.field .hint{ font-size:0.75rem; color:var(--text-faint); margin-top:0.35rem; }
.password-row{ display:flex; gap:0.5rem; }
.password-row input{ flex:1; }
.icon-btn{
  background:var(--bg-inset); border:1px solid var(--border); color:var(--text-dim);
  border-radius:6px; padding:0 0.7rem; cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size:0.8rem;
  white-space:nowrap;
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }

.checkbox-row{ display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--text-dim); }
.checkbox-row input{ width:auto; }

.btn{
  display:inline-block; width:100%; text-align:center;
  background:var(--accent); color:#04181b; border:none;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.85rem; letter-spacing:0.03em;
  padding:0.75rem 1rem; border-radius:6px; cursor:pointer; text-decoration:none;
}
.btn:hover{ filter:brightness(1.08); }
.btn.secondary{
  background:var(--bg-elevated); color:var(--text); border:1px solid var(--border);
}
.btn.secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn.block{ margin-top:0.4rem; }

.alert{
  border-radius:8px; padding:0.8rem 1rem; margin-bottom:1.2rem;
  font-size:0.88rem; border:1px solid var(--border);
}
.alert.ok{ background:rgba(127,216,143,0.08); border-color:var(--ok-dim); color:var(--ok); }
.alert.warn{ background:rgba(226,87,76,0.08); border-color:var(--warn-dim); color:var(--warn); }
.alert.info{ background:rgba(79,208,224,0.08); border-color:var(--accent-dim); color:var(--accent); }

.muted-link{ text-align:center; margin-top:1rem; font-size:0.85rem; color:var(--text-dim); }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem; }
.stat{ background:var(--bg-inset); border:1px solid var(--border-soft); border-radius:8px; padding:1rem 1.1rem; }
.stat .label{ font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); }
.stat .value{ font-family:'Oswald', sans-serif; font-size:1.5rem; font-weight:600; margin-top:0.3rem; }
.stat .value.ok{ color:var(--ok); }
.stat .value.warn{ color:var(--warn); }
.stat .value.accent{ color:var(--accent); }

.copy-row{ display:flex; gap:0.5rem; }
.copy-row input{ flex:1; }

table.simple{ width:100%; border-collapse:collapse; font-size:0.85rem; }
table.simple th, table.simple td{
  text-align:left; padding:0.6rem 0.7rem; border-bottom:1px solid var(--border-soft);
}
table.simple th{ color:var(--text-faint); font-family:'IBM Plex Mono', monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; }
table.simple td{ color:var(--text-dim); }
.badge{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
  padding:0.15rem 0.5rem; border-radius:3px; border:1px solid var(--border);
}
.badge.pending{ color:var(--text-dim); }
.badge.settlement{ color:var(--accent); border-color:var(--accent-dim); }
.badge.success{ color:var(--ok); border-color:var(--ok-dim); }
.badge.failed, .badge.cancelled{ color:var(--warn); border-color:var(--warn-dim); }

.price-box{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:0.9rem 0; border-bottom:1px solid var(--border-soft);
}
.price-box:last-of-type{ border-bottom:none; }
.price-box .amount{ font-family:'Oswald', sans-serif; font-size:1.3rem; font-weight:600; }
.price-box .amount.strike{ text-decoration:line-through; color:var(--text-faint); font-size:1rem; }
.price-box .amount.final{ color:var(--accent); }

.lock-panel{
  border:1px dashed var(--border); border-radius:10px; padding:2rem 1.5rem; text-align:center;
  background:var(--bg-inset);
}
.lock-panel .lock-icon{ font-size:1.8rem; margin-bottom:0.6rem; }
.lock-panel p{ color:var(--text-dim); max-width:32rem; margin:0.4rem auto 1rem; }

footer.simple{
  text-align:center; padding:2rem 1.5rem 3rem; font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; color:var(--text-faint); border-top:1px solid var(--border-soft);
}
