:root { color-scheme: light; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; margin:0; background:#fafafa; }
.container { max-width: 1050px; margin: 0 auto; padding: 16px; }

/* --- Top navigation --- */
.topbar { background: #111; color: #fff; }
.topbar a { color: #fff; text-decoration:none; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; }

.brand a { font-weight: 700; }

.nav { display:flex; align-items:center; justify-content:flex-end; gap: 12px; flex-wrap: wrap; }
.nav a, .linklike { margin-left: 0; }
.nav-user { opacity: .86; font-size: 13px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.nav-toggle { display:none; background: transparent; border: 1px solid rgba(255,255,255,.25); color:#fff; padding: 6px 10px; border-radius: 8px; cursor:pointer; }

@media (max-width: 720px){
  .nav-toggle { display:inline-block; }
  .nav { display:none; width:100%; flex-direction:column; align-items:flex-start; padding-top: 10px; }
  .nav.open { display:flex; }
}
.linklike { background:none; border:none; color:#fff; cursor:pointer; font:inherit; padding:0; text-decoration: underline; }

h1 { margin: 18px 0 12px; }
h2 { margin: 0 0 10px; }
.muted { color: #666; }
.small { font-size: 12px; }
.strong { font-weight: 700; }
.error { color: #b00020; }

.card { background:#fff; border:1px solid #e6e6e6; border-radius: 10px; padding: 14px; margin: 12px 0; box-shadow: 0 1px 1px rgba(0,0,0,.03); }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px){ .grid, .grid2 { grid-template-columns: 1fr; } }
.actions { display:flex; gap: 10px; flex-wrap: wrap; align-items:center; }
.btn, button { background:#111; color:#fff; border:none; padding: 10px 12px; border-radius: 8px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover, button:hover { opacity: .92; }
.btn.small { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.danger { background:#b00020; }
input, select, textarea { width: 100%; padding: 10px 10px; border:1px solid #ccc; border-radius: 8px; box-sizing: border-box; margin: 6px 0 10px; background:#fff; }
label { font-weight: 600; }
.mt { margin-top: 12px; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid #eee; text-align:left; padding: 10px 8px; vertical-align: top; }

.cards { margin-top: 14px; }
.cards .card { margin: 0; }
.cards .itemcard { display:grid; grid-template-columns: 120px 1fr; gap: 12px; }
.thumb { width: 100%; max-width: 240px; border-radius: 8px; }
.badge { padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.badge.ok { background: #e5f7ea; color:#105b2f; border:1px solid #bfe8cb; }

.callout { padding: 12px; background:#fff7e6; border:1px solid #ffe1a1; border-radius: 10px; }

.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #111; color:#fff; padding: 10px 12px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25); }

pre.article { white-space: pre-wrap; line-height: 1.6; background:#0b0b0b; color:#f1f1f1; padding: 14px; border-radius: 10px; overflow:auto; }