* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --orange: #e67e22; --orange-dark: #cf6d15; --ink: #1a1a1a; --slate: #2c3e50;
  --muted: #7f8c8d; --bg: #f6f4f0; --card: #fff; --green: #27ae60; --red: #c0392b;
  --gold: #d4a017; --silver: #8e9aa5; --bronze: #b0713a;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: #333; line-height: 1.6;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }
.narrow { max-width: 640px; }

header.tb {
  background: var(--slate); color: #fff; padding: 14px 0;
}
header.tb .wrap { padding: 0 20px; display: flex; align-items: center; gap: 14px; }
header.tb a { color: #fff; text-decoration: none; }
header.tb .logo { font-size: 1.3em; font-weight: 700; display: flex; align-items: center; gap: 8px; }
header.tb .logo .bone { font-size: 1.2em; }
header.tb nav { margin-left: auto; display: flex; gap: 18px; font-size: 0.95em; }
header.tb nav a:hover { color: var(--orange); }

.card {
  background: var(--card); border-radius: 10px; padding: 28px 32px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 20px;
}
h1 { color: var(--ink); font-size: 1.8em; margin-bottom: 10px; }
h1 .accent { color: var(--orange); }
h2 { color: var(--slate); font-size: 1.3em; margin: 18px 0 10px; }
h3 { color: var(--slate); font-size: 1.05em; margin: 14px 0 8px; }
p { margin-bottom: 12px; }
.muted { color: var(--muted); font-size: 0.92em; }
.pitch {
  border-left: 4px solid var(--orange); background: #fef9f3;
  padding: 14px 18px; border-radius: 0 6px 6px 0; margin: 14px 0;
}

.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  background: var(--orange); color: #fff; font-size: 1em; font-weight: 600;
  padding: 10px 22px; border-radius: 8px; transition: background 0.15s;
}
.btn:hover { background: var(--orange-dark); }
.btn.secondary { background: #ecf0f1; color: var(--slate); }
.btn.secondary:hover { background: #dfe4e6; }
.btn.small { padding: 5px 12px; font-size: 0.85em; }
.btn.danger { background: #fadbd8; color: var(--red); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

input[type=text], input[type=email], input[type=number], input[type=url] {
  width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px;
  font-size: 1em; margin: 4px 0 12px;
}
label { font-weight: 600; color: var(--slate); font-size: 0.95em; }
.radio-opt {
  display: block; border: 2px solid #e0e0e0; border-radius: 8px; padding: 12px 16px;
  margin: 8px 0; cursor: pointer; font-weight: normal;
}
.radio-opt:has(input:checked) { border-color: var(--orange); background: #fef9f3; }
.radio-opt b { color: var(--slate); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 14px 0; }
.stat { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 14px 16px; }
.stat .v { font-size: 1.5em; font-weight: 700; color: var(--ink); }
.stat .v.orange { color: var(--orange); }
.stat .v.green { color: var(--green); }
.stat .l { font-size: 0.82em; color: var(--muted); margin-top: 2px; }

table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.92em; }
th, td { border-bottom: 1px solid #eee; padding: 8px 10px; text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; }
td.num, th.num { text-align: right; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8em; font-weight: 600; }
.pill.pending { background: #fdf2e3; color: var(--orange-dark); }
.pill.confirmed { background: #e8f8ef; color: var(--green); }
.pill.rescinded { background: #f5e9e8; color: var(--red); }
.pill.gold { background: #faf3dc; color: var(--gold); }
.pill.silver { background: #eef1f4; color: var(--silver); }
.pill.bronze { background: #f5ece4; color: var(--bronze); }

.bar { background: #eee; border-radius: 999px; height: 10px; overflow: hidden; margin: 6px 0; }
.bar > div { height: 100%; background: var(--orange); border-radius: 999px; }
.bar > div.green { background: var(--green); }

.banner { border-radius: 8px; padding: 12px 16px; margin: 12px 0; font-size: 0.95em; }
.banner.info { background: #eaf2fb; color: #2471a3; }
.banner.warn { background: #fdf2e3; color: var(--orange-dark); }
.banner.ok { background: #e8f8ef; color: var(--green); }

.demo-note {
  background: #2c3e50; color: #ecf0f1; font-size: 0.85em;
  padding: 8px 14px; border-radius: 6px; margin-bottom: 18px;
}
.demo-note b { color: var(--orange); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }

.trend { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin: 12px 0 4px; }
.trend .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.trend .col .b { width: 70%; background: var(--orange); border-radius: 4px 4px 0 0; min-height: 2px; }
.trend .col .lbl { font-size: 0.7em; color: var(--muted); margin-top: 4px; white-space: nowrap; }

footer.tb { text-align: center; color: var(--muted); font-size: 0.85em; padding: 30px 0; }