:root { color-scheme: light dark; --fg: #111; --bg: #fff; --muted: #666; --line: #ddd; --ok: #1a7f37; --ng: #b3261e; --accent: #0b57d0; }
@media (prefers-color-scheme: dark) { :root { --fg: #eee; --bg: #111; --muted: #aaa; --line: #333; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 17px; line-height: 1.6; color: var(--fg); background: var(--bg); padding: 16px; padding-bottom: 48px; }
header h1 { font-size: 22px; margin: 4px 0 0; }
h2 { font-size: 18px; margin: 24px 0 8px; }
main { max-width: 640px; margin: 0 auto; }
button { font: inherit; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
button.big { width: 100%; padding: 16px; font-size: 19px; background: var(--accent); color: #fff; border: 0; margin: 8px 0; }
button.danger { color: var(--ng); border-color: var(--ng); }
button:disabled { opacity: .5; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.card button { margin-top: 8px; }
dl { display: grid; grid-template-columns: 9em 1fr; gap: 4px 8px; margin: 0; }
dt { color: var(--muted); font-size: 14px; }
dd { margin: 0; word-break: break-all; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 15px; }
ul.files { margin: 4px 0; padding-left: 18px; max-height: 40vh; overflow: auto; font-size: 14px; }
.warn { border-left: 4px solid var(--ng); padding-left: 10px; margin: 8px 0; }
.ai { border-left: 4px solid var(--line); padding-left: 10px; color: var(--muted); }
.msg { padding: 10px 14px; border-radius: 10px; background: #fff3e0; color: #5d3a00; }
@media (prefers-color-scheme: dark) { .msg { background: #3b2a00; color: #ffe0a3; } }
.ok { color: var(--ok); font-weight: 600; }
.ng { color: var(--ng); font-weight: 600; }
.fp { font-family: ui-monospace, Menlo, monospace; font-size: 26px; letter-spacing: 1px; text-align: center; padding: 16px; border: 2px solid var(--line); border-radius: 12px; }
input.code { font: inherit; font-size: 28px; letter-spacing: 6px; text-align: center; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }