/* Farben und Schriften wie im Vorschau-Mockup */
:root {
  --regolith: #140c0a;
  --crust: #21140f;
  --line: #4a2d21;
  --dust: #f1e2d6;
  --dust-dim: #b79a88;
  --rust: #e2572b;
  --ember: #ff8a4c;
  --oxygen: #7cc46a;
  --heat: #f2b134;
  --no: #a8473b;
  --f-display: "Oxanium", "Trebuchet MS", sans-serif;
  --f-body: "Barlow", "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--regolith);
  color: var(--dust);
  font: 16px/1.55 var(--f-body);
  background-image:
    radial-gradient(1200px 500px at 85% -10%, rgba(226, 87, 43, .2), transparent 60%),
    radial-gradient(800px 400px at -10% 110%, rgba(63, 167, 201, .07), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding-inline: 16px; }
header { border-bottom: 1px solid var(--line); background: rgba(20, 12, 10, .9); }
.bar { display: flex; align-items: center; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.planet {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ember), var(--rust) 45%, #6b2410 100%);
  box-shadow: 0 0 18px rgba(226, 87, 43, .5);
}
.brand b { font: 800 17px var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.brand small { display: block; color: var(--dust-dim); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }

main { flex: 1; padding-block: 56px 48px; }
h1, h2 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(30px, 5vw, 48px); font-weight: 800; }
.lede { color: var(--dust-dim); max-width: 60ch; font-size: 18px; margin: 10px 0 0; }

.tiles {
  display: grid; gap: 16px; margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.tile {
  background: var(--crust); border: 1px solid var(--line); border-radius: 8px;
  padding: 20px; position: relative;
}
.tile h2 { font-size: 18px; font-weight: 600; letter-spacing: .04em; margin-top: 12px; }
.tile p { color: var(--dust-dim); margin: 6px 0 0; }
.badge {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--heat); border: 1px dashed rgba(242, 177, 52, .5); border-radius: 3px; padding: 2px 8px;
}

footer { padding-block: 20px 28px; border-top: 1px solid var(--line); color: var(--dust-dim); font-size: 13px; }
.status::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; background: var(--no); vertical-align: middle;
}
.status.ok::before { background: var(--oxygen); }