:root {
  --bg: #0a0a0d;
  --bg-card: #14141a;
  --bg-card-hover: #1a1a22;
  --text: #e8e8ea;
  --dim: #888892;
  --accent: #c8a97e;        /* gold ≈ φ vibe */
  --accent-soft: rgba(200,169,126,0.18);
  --border: #232330;
  --green: #5fd07e;
  --red: #ff6b6b;
  --amber: #f4b13c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
code  { font-family: "SF Mono", Menlo, Consolas, monospace; background: #1a1a22; padding: 1px 5px; border-radius: 3px; }

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; }
.phi { color: var(--accent); font-size: 24px; font-weight: 700; }
.name { font-size: 18px; letter-spacing: 0.02em; }
.net { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dot.live { background: var(--green); }

.header-right { display: flex; align-items: center; gap: 14px; }
.x-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--dim); text-decoration: none;
  font-size: 12px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.x-link:hover { color: var(--text); border-color: var(--accent); }
.x-link svg { display: block; }

.btn-pri, .btn-sec {
  background: var(--accent); color: #1a1409;
  border: 0; border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-pri:hover, .btn-sec:hover { opacity: 0.85; }
.btn-pri:disabled, .btn-sec:disabled { background: #333; color: #777; cursor: not-allowed; }
.btn-sec { background: var(--accent-soft); color: var(--accent); }

main { max-width: 980px; margin: 0 auto; padding: 32px 24px; }

.hero { margin-bottom: 40px; }
.hero h1 { font-size: 42px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.02em; }
.hero .sub { color: var(--dim); max-width: 640px; }

h2 { font-size: 16px; margin: 32px 0 12px; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.card .lbl { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.card .big { font-size: 22px; font-weight: 600; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.card .sub-meta { font-size: 11px; color: var(--dim); }

.actions {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 28px;
}
.hint { font-size: 12px; color: var(--dim); }

.you h2 { margin-top: 36px; }

.contract table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.contract td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.contract td:first-child { color: var(--dim); width: 30%; font-size: 13px; }
.contract tr:last-child td { border-bottom: 0; }

.rules ul { padding-left: 20px; color: var(--dim); }
.rules li { margin: 4px 0; }
.rules b { color: var(--text); }

.foot { margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--dim); font-size: 12px; text-align: center; }
.foot-sep { margin: 0 8px; }
.foot-link { color: var(--accent); text-decoration: none; }
.foot-link:hover { text-decoration: underline; }