@font-face {
  font-family: "Hud";
  src: url("../fonts/consola.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hud";
  src: url("../fonts/consolab.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hud";
  src: url("../fonts/consolai.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #050608;
  --panel: #0b0d11;
  --raised: #10141a;
  --line: rgba(92, 225, 230, 0.16);
  --line-strong: rgba(92, 225, 230, 0.32);
  --text: #e7eef2;
  --dim: #7d8b96;
  --cyan: #4fe3e8;
  --cyan-dim: rgba(79, 227, 232, 0.12);
  --good: #3ddc97;
  --good-dim: rgba(61, 220, 151, 0.12);
  --warn: #ffb020;
  --warn-dim: rgba(255, 176, 32, 0.12);
  --safe: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Hud", Consolas, "Andale Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.45;
}
body {
  min-height: 100dvh;
  background-image:
    linear-gradient(rgba(5, 6, 8, 0.92), rgba(5, 6, 8, 0.92)),
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(79, 227, 232, 0.03) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(79, 227, 232, 0.03) 48px);
}

.app {
  width: min(1440px, 100%);
  height: 100dvh;
  overflow: hidden;
  margin: 0 auto;
  padding: calc(12px + var(--safe)) 12px 12px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: rgba(11, 13, 17, 0.86);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: 14px;
  color: var(--cyan);
}
.brand .mark {
  width: 10px;
  height: 10px;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 8px rgba(79, 227, 232, 0.7);
}
.status {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.status b { color: var(--good); font-weight: 400; }
.status .ver { color: var(--text); }
.status .warn { color: var(--warn); }

.shell {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 12px;
  min-height: 0;
}

.hero, .panel {
  position: relative;
  min-height: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}
.hero { overflow: hidden; min-height: 0; height: 100%; }
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 62%;
  display: block;
  filter: saturate(0.82) contrast(1.05);
}
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to top, rgba(5,6,8,0.88) 0%, rgba(5,6,8,0.18) 42%, rgba(5,6,8,0.22) 100%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(79,227,232,0.05) 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(79,227,232,0.05) 32px);
  pointer-events: none;
}
.corners::before, .corners::after,
.hero-copy::before, .hero-copy::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cyan);
  z-index: 2;
}
.corners::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.corners::after { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.hero-copy::before { bottom: -18px; left: -14px; border-right: 0; border-top: 0; }
.hero-copy::after { bottom: -18px; right: -14px; border-left: 0; border-top: 0; }

.hero-top, .hero-copy {
  position: absolute;
  left: 24px;
  right: 24px;
  z-index: 3;
}
.hero-top {
  top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--cyan);
  font-size: 14px;
  letter-spacing: 0.14em;
  gap: 12px;
}
.hero-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-upload {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  background: rgba(5, 6, 8, 0.45);
  color: var(--cyan);
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 0 10px;
}
.hero-upload.is-busy { opacity: 0.5; pointer-events: none; }
.hero-upload.is-hidden { display: none; }
#hero-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.hero-copy { bottom: 28px; }
.kicker {
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}
.hero-copy h1 {
  font-size: clamp(56px, 7vw, 84px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #fff;
}
.hero-copy h1 span {
  font-size: 0.32em;
  margin-left: 8px;
  color: var(--cyan);
  letter-spacing: 0.12em;
  font-weight: 400;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  border: 1px solid var(--line-strong);
  background: rgba(5, 6, 8, 0.45);
  padding: 7px 10px;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.chip b { color: var(--cyan); font-weight: 700; }

.panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 14px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 0.14em;
}
.total {
  font-size: clamp(52px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.total-sub { margin-top: 8px; color: var(--dim); font-size: 14px; }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric {
  background: var(--raised);
  border: 1px solid var(--line);
  padding: 12px;
  min-width: 0;
}
.metric .label {
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}
.metric .value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.metric .hint { margin-top: 4px; color: var(--dim); font-size: 14px; }
.metric.good { border-color: rgba(61, 220, 151, 0.28); background: var(--good-dim); }
.metric.good .value { color: var(--good); }
.metric.warn { border-color: rgba(255, 176, 32, 0.28); background: var(--warn-dim); }
.metric.warn .value { color: var(--warn); }

.section {
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}
.weeks {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  height: 72px;
}
.week {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.bar {
  width: 100%;
  max-width: 22px;
  min-height: 8px;
  background: rgba(79, 227, 232, 0.28);
  box-shadow: 0 0 8px rgba(79, 227, 232, 0.12);
}
.bar.peak { background: var(--cyan); }
.bar.now { background: var(--good); }
.week em { font-style: normal; font-size: 14px; color: var(--dim); }

.runs { display: flex; flex-direction: column; }
.run {
  display: grid;
  grid-template-columns: 64px 1fr 58px 44px 40px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.run:first-child { border-top: 0; padding-top: 0; }
.run .date { color: var(--dim); }
.run .dist { font-weight: 700; }
.z {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 3px 0;
  border: 1px solid var(--line);
}
.z2 { color: var(--cyan); border-color: rgba(79, 227, 232, 0.35); }
.z3 { color: var(--good); border-color: rgba(61, 220, 151, 0.35); }
.z4 { color: var(--warn); border-color: rgba(255, 176, 32, 0.35); }
.cad { text-align: right; color: var(--dim); }

.insight {
  margin-top: auto;
  border: 1px solid var(--line-strong);
  background: var(--cyan-dim);
  padding: 12px;
  font-size: 14px;
  color: var(--text);
}
.insight b { color: var(--cyan); font-weight: 700; }

@media (max-width: 980px) {
  html, body {
    height: 100%;
    height: 100dvh;
    max-width: 100%;
    overflow: hidden;
  }
  .app, .shell, .hero, .panel {
    max-width: 100%;
  }
  .app {
    display: block;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .shell {
    display: block;
    height: auto;
    min-height: 0;
  }
  .hero {
    height: 52vh;
    min-height: 280px;
    max-height: 430px;
    margin-bottom: 12px;
  }
  .panel {
    display: block;
    overflow: visible;
    height: auto;
  }
  .insight { margin-top: 16px; }
  .metric .hint { overflow-wrap: anywhere; }
  .status .hide-sm { display: none; }
}
@media (max-width: 640px) {
  .app { padding: calc(10px + var(--safe)) 10px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .hero { min-height: 280px; height: 48vh; max-height: 380px; }
  .hero-copy h1 { font-size: 56px; }
  .panel { padding: 16px 12px 24px; }
  .metrics { grid-template-columns: 1fr; }
  .weeks {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: auto;
    gap: 8px 4px;
  }
  .week { height: 56px; }
  .week em { font-size: 12px; }
  .runs, .weeks, .insight { width: 100%; max-width: 100%; }
  .run {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
  }
  .run .date { width: 48px; }
  .run .dist { flex: 1 1 auto; }
}