:root {
  --bg: #121212;
  --panel: #1c1c1e;
  --line: #3f3f46;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --gold: #c4a574;
  --tired: #5c4033;
  --restored: #2f4a3a;
  --font: ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
.app { min-height: 100%; display: flex; flex-direction: column; }
.top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #0c0c0c;
}
.top nav { display: flex; gap: 6px; flex: 1; }
.top button, .btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 7px 12px;
  cursor: pointer;
}
.top button.on, .btn.primary { background: var(--gold); color: #1a1510; border-color: var(--gold); }
.tag { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.view { display: none; padding: 18px 16px 24px; }
.view.on { display: block; }
.kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
h1 { font-size: 1.7rem; letter-spacing: -0.03em; margin-bottom: 8px; }
h2 { font-size: 1.25rem; margin-bottom: 12px; }
.hero p, .hint, .muted { color: var(--muted); }
.hint { font-size: 12px; margin-top: 8px; }

.wipe {
  position: relative;
  height: 180px;
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.wipe-before, .wipe-after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}
.wipe-before { background: linear-gradient(135deg, #4a3228, var(--tired)); }
.wipe-after {
  background: linear-gradient(135deg, #3d6b4f, var(--restored));
  clip-path: inset(0 54% 0 0);
}
.wipe input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: ew-resize;
}

.lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lesson {
  text-align: left;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  min-height: 64px;
}
.lesson.is-back { border-color: var(--gold); color: var(--gold); }

.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; }
label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); margin: 10px 0; }
input, select {
  min-height: 36px;
  padding: 0 10px;
  background: #0c0c0c;
  color: var(--text);
  border: 1px solid var(--line);
  font: inherit;
}
.row { display: flex; gap: 8px; align-items: end; }
.row label { flex: 1; }
canvas {
  width: 100%;
  height: auto;
  background: #1a1f18;
  border: 1px solid var(--line);
  cursor: crosshair;
  display: block;
}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stats div { border: 1px solid var(--line); padding: 8px; background: var(--panel); }
.stats dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stats dd { font-size: 16px; font-weight: 800; margin-top: 4px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.jobs { list-style: none; display: grid; gap: 6px; }
.jobs button {
  width: 100%;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.jobs button.on { border-color: var(--gold); }
.ticket { border: 1px solid var(--line); padding: 14px; background: var(--panel); min-height: 200px; }
.ticket h3 { margin: 8px 0; }
.ticket dl { display: grid; gap: 6px; margin-top: 10px; }
.ticket dt { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.ticket dd { margin-bottom: 6px; }

@media (max-width: 720px) {
  .split, .lessons, .stats { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; }
}