:root {
  --bg: #0d1117;
  --fg: #e6edf3;
  --muted: #8b949e;
  --accent: #58a6ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); }

#view { display: block; width: 100vw; height: 100vh; }

.ui-top {
  position: fixed; top: 16px; left: 20px; z-index: 10;
  display: flex; align-items: baseline; gap: 10px;
  user-select: none;
}
.ui-top h1 { font-size: 20px; font-weight: 600; letter-spacing: 0.5px; }
.badge {
  font-size: 11px; color: var(--muted);
  border: 1px solid #30363d; border-radius: 999px; padding: 2px 10px;
}

.ui-stats {
  position: fixed; top: 16px; right: 20px; z-index: 10;
  display: flex; gap: 14px; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; user-select: none;
}

.ui-loading {
  position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%);
  z-index: 10; width: min(420px, 80vw); text-align: center;
  transition: opacity 0.5s;
}
.bar {
  height: 4px; border-radius: 2px; background: #21262d; overflow: hidden;
}
.bar-fill {
  height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #7ee787);
  transition: width 0.15s ease-out;
}
.ui-loading p { margin-top: 10px; font-size: 13px; color: var(--muted); }

.ui-loading.done { opacity: 0; pointer-events: none; }

.ui-tip {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 10; font-size: 12px; color: var(--muted);
  background: rgba(13, 17, 23, 0.6); padding: 6px 14px; border-radius: 999px;
  user-select: none; transition: opacity 0.5s;
}
.ui-tip.hidden { opacity: 0; }