/* The Hal design system, in a file for the first time.
 *
 * This :root block previously existed as seven copy-pasted duplicates across
 * templates and Python string literals, which had already drifted apart —
 * some copies were missing --green and --red, others the classes that depend
 * on --orange-dim. This is the canonical one. The others are deliberately not
 * being touched yet: deduping six live-rendering templates in the same change
 * as an auth rewrite would make both unbisectable.
 */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #080808;
  --white: #f4f0e8;
  --orange: #f5a623;
  --orange-dim: #c47d0e;
  --gray: #1a1a1a;
  --gray-mid: #2e2e2e;
  --gray-text: #6b6b6b;
  --green: #34d399;
  --red: #ef4444;
  --mono: 'Space Mono', monospace;
  --sans: 'Syne', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Film grain, the one flourish every Hal surface shares. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}

/* ── Nav ── */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(12px);
}
.top-nav .logo-link {
  font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.15em;
  color: var(--orange); text-decoration: none;
}
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gray-text);
  text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a.active { color: var(--orange); }
@media (max-width: 780px) {
  .nav-links { gap: 1rem; }
  .top-nav { padding: 1rem 1.25rem; }
  .nav-links a { font-size: 0.6rem; letter-spacing: 0.1em; }
}

/* ── Layout ── */
.page { max-width: 900px; margin: 0 auto; padding: 8rem 2rem 5rem; }
.page-narrow { max-width: 460px; }
.center-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 7rem 1.5rem 3rem;
}

.section-label {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 0.85rem;
}
.section-label.muted { color: var(--gray-text); }
.section-title {
  font-family: var(--sans); font-weight: 800; font-size: 2rem;
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.75rem;
}
h1.hero { font-size: 3rem; letter-spacing: -0.04em; line-height: 1.05; }
.lede {
  font-family: var(--mono); font-size: 0.8rem; color: var(--gray-text);
  line-height: 1.9; max-width: 34rem;
}

.card {
  border: 1px solid var(--gray-mid); background: var(--gray);
  padding: 2rem; margin-bottom: 1.5rem;
}
.card.accent { border-left: 2px solid var(--orange); }

/* ── Forms ── */
label {
  display: block; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray-text); margin-bottom: 0.6rem;
}
input[type=text], input[type=email], input[type=password] {
  width: 100%; background: var(--black); border: 1px solid var(--gray-mid);
  color: var(--white); font-family: var(--mono); font-size: 0.85rem;
  padding: 0.9rem 1rem; margin-bottom: 1.25rem; border-radius: 0;
  transition: border-color 0.2s;
}
input:focus { outline: none; border-color: var(--orange); }
input::placeholder { color: #4a4a4a; }

.btn {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  padding: 0.9rem 1.6rem; border: 1px solid var(--orange);
  background: transparent; color: var(--orange); cursor: pointer;
  transition: background 0.2s, color 0.2s; border-radius: 0;
}
.btn:hover { background: var(--orange); color: var(--black); }
.btn-primary { background: var(--orange); color: var(--black); }
.btn-primary:hover { background: var(--orange-dim); border-color: var(--orange-dim); }
.btn-danger { border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--white); }
.btn-small { padding: 0.5rem 0.9rem; font-size: 0.6rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ── Messages ── */
.error, .notice {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.7;
  padding: 0.85rem 1rem; margin-bottom: 1.25rem; border: 1px solid var(--red);
  color: var(--red);
}
.notice { border-color: var(--green); color: var(--green); }
.hint {
  font-family: var(--mono); font-size: 0.65rem; color: var(--gray-text);
  line-height: 1.8; margin-top: 1rem;
}
.hint a { color: var(--orange); }

/* ── Stats ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.stat { border: 1px solid var(--gray-mid); background: var(--gray); padding: 1.5rem; }
.stat .label {
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--gray-text); margin-bottom: 0.6rem;
}
.stat .value { font-family: var(--sans); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; }
.stat .value.sats { color: var(--orange); }

/* ── Code / secrets ── */
.code {
  background: var(--black); border: 1px solid var(--gray-mid);
  border-left: 2px solid var(--orange); padding: 1rem 1.1rem;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.8;
  color: var(--orange); word-break: break-all; white-space: pre-wrap;
  position: relative;
}
.code.plain { color: var(--white); border-left-color: var(--gray-mid); }
.copy-row { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 0.75rem; }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--gray-text); text-align: left;
  padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--gray-mid);
}
td {
  font-family: var(--mono); font-size: 0.72rem; color: var(--white);
  padding: 0.9rem 0.5rem; border-bottom: 1px solid var(--gray-mid);
  vertical-align: middle;
}
td.muted { color: var(--gray-text); }

.badge {
  display: inline-block; font-family: var(--mono); font-size: 0.55rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.25rem 0.5rem; border: 1px solid var(--gray-mid); color: var(--gray-text);
}
.badge-live { border-color: var(--green); color: var(--green); }
.badge-revoked { border-color: var(--red); color: var(--red); }

/* ── Tabs ── */
.tabs { display: flex; gap: 0; margin-bottom: 1.75rem; border-bottom: 1px solid var(--gray-mid); }
.tab {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gray-text); background: none;
  border: none; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 0.75rem 1rem;
}
.tab.active { color: var(--orange); border-bottom-color: var(--orange); }

/* ── Modal ── */
.modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); }
.modal.open { display: block; }
.modal-inner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; max-width: 560px; background: var(--gray);
  border: 1px solid var(--gray-mid); padding: 2.25rem;
  max-height: 90vh; overflow-y: auto;
}

/* ── Motion ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade { opacity: 0; animation: fadeUp 0.5s ease forwards; }
.fade-2 { animation-delay: 0.08s; }
.fade-3 { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .fade { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

.footer {
  text-align: center; margin-top: 3rem; font-family: var(--mono);
  font-size: 0.55rem; letter-spacing: 0.25em; color: var(--gray-text);
}

/* Account sub-bar — the console's own pages, below the shared top nav.
   They were in the top bar, which is why the console showed nine entries
   where every other surface showed four. Sitting under it, they read as
   "inside my account" rather than as peers of the marketplace. */
.account-bar {
  position: fixed; top: 66px; left: 0; right: 0; z-index: 99;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem; gap: 2rem;
  background: rgba(8, 8, 8, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
}
.account-bar ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.account-bar a {
  display: block; padding: 0.85rem 0;
  font-family: var(--mono, monospace); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray-text, #6b6b6b); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.account-bar a:hover { color: var(--white, #f4f0e8); }
.account-bar a.active { color: var(--orange, #f5a623); border-bottom-color: var(--orange, #f5a623); }
.account-bar .account-signout { letter-spacing: 0.15em; }

@media (max-width: 900px) {
  .account-bar { position: static; padding: 0 1.25rem; }
  .account-bar ul { gap: 1.25rem; }
  .account-bar a { font-size: 0.62rem; }
}