:root {
  --bg: #0f1115;
  --card-bg: #171a21;
  --border: #2a2f3a;
  --text: #e6e8eb;
  --muted: #9aa2b1;
  --accent: #5b8cff;
  --accent-hover: #7ba0ff;
  --success: #35c88a;
  --error: #f16c6c;
  --radius: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; }
.wrap { max-width: 640px; margin: 0 auto; padding: 48px 20px 80px; }
header h1 { font-size: 1.6rem; margin: 0 0 8px; }
.subtitle { color: var(--muted); margin: 0 0 32px; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 20px; }
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
input[type="text"] { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: #0d0f13; color: var(--text); font-size: 1rem; margin-bottom: 14px; }
input[type="text"]:focus { outline: none; border-color: var(--accent); }
button { font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; padding: 12px 20px; cursor: pointer; }
#submit-btn { background: var(--accent); color: #08090b; width: 100%; }
#submit-btn:hover:not(:disabled) { background: var(--accent-hover); }
#submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.secondary-btn { background: transparent; color: var(--accent); border: 1px solid var(--border); margin-top: 16px; }
.secondary-btn:hover { border-color: var(--accent); }
.field-error { color: var(--error); font-size: 0.85rem; margin: -6px 0 0; }
.status-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; }
.status-title.success { color: var(--success); }
.status-title.error { color: var(--error); }
.status-detail { color: var(--muted); margin: 0 0 4px; word-break: break-all; }
.elapsed { margin: 12px 0 0; font-size: 0.95rem; }
.hint { color: var(--muted); font-size: 0.85rem; margin-top: 16px; }
.error-detail { color: var(--muted); margin: 0 0 4px; }
.grade-line { font-size: 1.05rem; margin: 0 0 12px; }
.report-button { display: inline-block; margin-top: 12px; background: var(--accent); color: #08090b; text-decoration: none; font-weight: 600; border-radius: 8px; padding: 12px 20px; }
.report-button:hover { background: var(--accent-hover); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; margin-bottom: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Progress timeline */
.stage-position { color: var(--accent); font-size: 0.9rem; font-weight: 600; margin: 0 0 4px; }
.stage-list { list-style: none; margin: 14px 0 4px; padding: 0; }
.stage { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.stage-mark { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; margin-top: 1px; border: 1px solid var(--border); color: var(--muted); background: transparent; }
.stage-body { display: flex; flex-direction: column; }
.stage-name { font-size: 0.92rem; }
.stage-hint { font-size: 0.78rem; color: var(--muted); }
.stage-done .stage-mark { background: var(--success); border-color: var(--success); color: #08090b; }
.stage-done .stage-name { color: var(--muted); }
.stage-running .stage-mark { border-color: var(--accent); color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.stage-running .stage-name { color: var(--text); font-weight: 600; }
.stage-failed .stage-mark { background: var(--error); border-color: var(--error); color: #08090b; }
.stage-failed .stage-name { color: var(--error); }
.stage-pending { opacity: 0.45; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91,140,255,0.4); } 50% { box-shadow: 0 0 0 5px rgba(91,140,255,0); } }

/* History */
.history-title { font-size: 1.05rem; margin: 0 0 12px; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.history-row:first-child { border-top: none; }
.history-left { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.history-domain { font-weight: 600; font-size: 0.95rem; word-break: break-all; }
.history-when { color: var(--muted); font-size: 0.8rem; }
.grade-chip { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); }
.grade-a { background: rgba(53,200,138,0.18); color: var(--success); border-color: var(--success); }
.grade-b { background: rgba(91,140,255,0.15); color: var(--accent); border-color: var(--accent); }
.grade-c { background: rgba(241,180,108,0.15); color: #f1b46c; border-color: #f1b46c; }
.grade-d, .grade-none { color: var(--muted); }
.history-link { flex: 0 0 auto; font-size: 0.85rem; color: var(--accent); text-decoration: none; }
.history-link:hover { text-decoration: underline; }
.history-noreport { flex: 0 0 auto; font-size: 0.8rem; color: var(--muted); font-style: italic; }
.history-note { color: var(--muted); font-size: 0.8rem; margin: 10px 0 0; }