/* 最低限のスタイル（ダーク/ライトどちらでも見やすく） */
:root { --bg: #0b0c10; --fg: #e6e6e6; --muted:#9aa0a6; --primary:#2563eb; --card:#111217; }
@media (prefers-color-scheme: light){ :root { --bg:#f6f7fb; --fg:#111; --muted:#5f6368; --primary:#2563eb; --card:#fff; } }
*{ box-sizing: border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', 'Meiryo', sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; }
.container{ max-width: 860px; margin: 0 auto; padding: 1.2rem; }
header h1{ margin: .2rem 0; }
.lead{ color: var(--muted); }
.card{ background: var(--card); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.25); margin-top: .5rem; }
h2,h3{ margin-top: 0; }
ul,ol{ padding-left: 1.1rem; }
.notice{ border-left:4px solid var(--primary); padding-left: .9rem; background: linear-gradient( to right, rgba(37,99,235,.12), rgba(37,99,235,0) ); border-radius:8px; }
.btn{ display:inline-block; padding: .68rem 1rem; border-radius:8px; text-decoration:none; }
.btn-primary{ background: var(--primary); color:white; }
.btn-primary:hover{ filter: brightness(1.08); }
.small{ font-size:.9rem; color:var(--muted); }
.footer{ color: var(--muted); text-align:center; }
.stats{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; margin:.8rem 0; }
.stat{ background: rgba(255,255,255,.04); padding:.8rem; border-radius:10px; border:1px solid rgba(255,255,255,.08); }
.stat .label{ display:block; color:var(--muted); font-size:.9rem; }
.stat .value{ font-size:1.8rem; font-weight:700; }