:root {
  --bg: #0f1218;
  --panel: #161b22;
  --text: #e6edf3;
  --muted: #98a1ad;
  --accent: #3fb950;
  --accent-weak: #2ea043;
  --warn: #f85149;
  --link: #58a6ff;
  --border: #30363d;
  --badge: #21262d;
  --badge-solved: #16331f;
  --badge-unsolved: #2a1a1a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 800px at 80% -10%, #1a2333, #0f1218 60%);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, sans-serif;
}

.container { max-width: 860px; margin: 32px auto; padding: 0 16px; }

.site-header, .site-footer { text-align: center; }
.site-header { padding: 24px 0 0; }
.subtitle { color: var(--muted); margin-top: 4px; }

.problem-list { list-style: none; padding: 0; margin: 24px 0 48px; display: grid; gap: 12px; }
.problem-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.problem-meta { display: flex; align-items: center; gap: 12px; }
.problem-num {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center;
  background: #0b1220; border: 1px solid var(--border);
  color: var(--muted); font-weight: 700;
}
.problem-title { margin: 0; font-weight: 600; }
.problem-link {
  color: var(--link); text-decoration: none; font-weight: 600;
}
.problem-link:hover { text-decoration: underline; }

.badge {
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--badge); color: var(--muted);
}
.badge.solved { background: var(--badge-solved); color: #71d38c; border-color: #245a35; }
.badge.unsolved { background: var(--badge-unsolved); color: #ff9b9b; border-color: #5a2424; }

.back-button {
  position: fixed; top: 16px; left: 16px; z-index: 10;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; border-radius: 8px; text-decoration: none;
}
.back-button:hover { filter: brightness(1.1); }

.question-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}
.question-title { margin-top: 16px; font-size: 24px; }
.question-text { color: var(--muted); }

.answer-form { margin-top: 16px; display: grid; gap: 10px; max-width: 520px; }
.label { color: var(--muted); font-size: 14px; }
.input {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: #0b1220; color: var(--text);
  font-size: 16px;
}
.input:focus { outline: 2px solid #1f6feb; outline-offset: 2px; }

.button {
  width: fit-content; background: var(--accent); color: #07190a;
  padding: 10px 14px; border: 0; border-radius: 8px; font-weight: 700;
  cursor: pointer;
}
.button:hover { background: var(--accent-weak); }

.feedback { min-height: 24px; margin-top: 6px; font-weight: 600; }
.feedback.ok { color: #71d38c; }
.feedback.ng { color: var(--warn); }