"Add Windows installer and driver training rewards"

src/styles.css

@@ -294,6 +294,167 @@ body {
   font-size: 1.5rem;
 }
 
+.training-hero {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 24px;
+  border: 1px solid color-mix(in srgb, var(--line) 65%, var(--accent) 35%);
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 42%),
+    linear-gradient(135deg, var(--panel), var(--panel-2));
+  box-shadow: var(--shadow);
+}
+
+.training-hero h3 {
+  margin: 5px 0 4px;
+  font-family: Orbitron, sans-serif;
+  font-size: clamp(1.8rem, 4vw, 3.2rem);
+}
+
+.training-hero p {
+  max-width: 720px;
+  margin: 0;
+  color: var(--muted);
+}
+
+.training-kicker {
+  color: color-mix(in srgb, var(--accent) 65%, var(--text) 35%);
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.training-driver-select {
+  display: grid;
+  min-width: min(320px, 100%);
+  gap: 6px;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.training-stats {
+  margin-top: 14px;
+}
+
+.training-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
+  gap: 14px;
+  margin-top: 14px;
+}
+
+.training-plan .panel-body > h3 {
+  margin: 8px 0;
+  font-family: Orbitron, sans-serif;
+}
+
+.training-plan .panel-body > p {
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.training-blocks {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.training-blocks div {
+  display: grid;
+  gap: 4px;
+  padding: 14px;
+  border-left: 3px solid var(--accent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--surface-elevated) 88%, var(--accent) 12%);
+}
+
+.training-blocks strong {
+  font-family: Orbitron, sans-serif;
+  font-size: 1.25rem;
+}
+
+.training-blocks span {
+  color: var(--muted);
+}
+
+.training-goal-form label {
+  display: grid;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.training-presets {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.training-goals {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 12px;
+}
+
+.training-goal {
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--surface-elevated);
+}
+
+.training-goal.reached {
+  border-color: color-mix(in srgb, #47d98a 60%, var(--line) 40%);
+}
+
+.training-goal.claimed {
+  opacity: 0.72;
+}
+
+.training-goal-head {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.training-goal h4 {
+  margin: 4px 0 0;
+}
+
+.training-goal-head > strong {
+  white-space: nowrap;
+  font-family: Orbitron, sans-serif;
+}
+
+.training-goal p {
+  color: var(--muted);
+}
+
+.training-progress {
+  height: 6px;
+  margin: 14px 0;
+  overflow: hidden;
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--line) 75%, transparent);
+}
+
+.training-progress span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent), #ffcc4d);
+}
+
+.training-empty {
+  max-width: 680px;
+}
+
 .panel-row {
   display: grid;
   grid-template-columns: 1.4fr 1fr;
@@ -2113,6 +2274,10 @@ select:focus {
   .panel-row {
     grid-template-columns: 1fr;
   }
+
+  .training-layout {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 820px) {
@@ -2149,6 +2314,24 @@ select:focus {
     gap: 10px;
   }
 
+  .training-hero {
+    align-items: stretch;
+    flex-direction: column;
+    padding: 18px;
+  }
+
+  .training-driver-select {
+    min-width: 0;
+  }
+
+  .training-blocks {
+    grid-template-columns: 1fr;
+  }
+
+  .training-goals {
+    grid-template-columns: 1fr;
+  }
+
   .field-card-checkbox {
     grid-column: span 1;
   }