:root { --bg: #0e1116; --panel: #1a1f29; --line: #262c38; --fg: #e6e9ef; --muted: #9aa3b2; --accent: #6b8cff; --warn: #f0b429; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
       font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }

.bar { display: flex; gap: 12px; align-items: center; padding: 6px 16px; min-height: 36px;
       background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; }
.bar strong { color: var(--accent); white-space: nowrap; }
.bar .long, .bar .short { color: var(--muted); flex: 1; min-width: 0; }
.bar .short { display: none; }
.bar button, .loader button { font: inherit; color: var(--fg); background: transparent; border: 1px solid var(--line);
       border-radius: 6px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.bar button:hover, .loader button:hover { border-color: var(--accent); }
@media (max-width: 640px) {
  .bar { padding: 4px 12px; gap: 8px; font-size: 12px; }
  .bar .long { display: none; }
  .bar .short { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.loader { margin: auto; padding: 24px 16px; width: 100%; max-width: 520px; }
.loader h1 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.loader p { color: var(--muted); margin: 0 0 16px; }
.loader ol { padding-left: 20px; color: var(--muted); margin: 12px 0 0; }
.loader ol li:last-child { color: var(--fg); }
.loader.failed ol li:last-child { color: var(--warn); }
.track { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.track div { width: 30%; height: 100%; background: var(--accent); animation: slide 1.4s ease-in-out infinite; }
.loader.failed .track { display: none; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .track div { animation: none; width: 100%; opacity: .4; } }

.busy-box { display: none; }
body.busy .busy-box { display: block; }
body.busy #loader, body.busy #reset { display: none; }

#app { flex: 1; width: 100%; border: 0; display: none; }
body.running #loader { display: none; }
body.running #app { display: block; }