:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --border: #e4e7ec;
  --text: #1f2328;
  --muted: #6b7280;
  --brand: #2563eb;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header.site {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.site .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem 1.2rem;
}
.brand { display:flex; align-items:center; gap:.6rem; font-weight:600; }
.brand a { color: var(--text); text-decoration: none; }
.brand .badge { font-size: .75rem; color: #fff; background: var(--brand); padding: .1rem .4rem; border-radius: .4rem; }

nav.menu { display:flex; gap:.5rem; flex-wrap: wrap; }
nav.menu a { color: var(--text); text-decoration:none; padding: .4rem .6rem; border-radius: .4rem; }
nav.menu a.active { background: #eef2ff; color: #1e3a8a; }
nav.menu a:hover { background: #f3f4f6; }

.right { display:flex; align-items:center; gap:.8rem; color: var(--muted); }
.right .user { color: var(--text); font-weight:500; }
.right button { padding: .4rem .6rem; border:1px solid var(--border); background:#fff; border-radius:.4rem; cursor:pointer; }
.right button:hover { background:#fafafa; }

.breadcrumb { padding: .6rem 1.2rem; font-size: .9rem; color: var(--muted); border-bottom:1px solid var(--border); background:#fff; }
.breadcrumb a { color: var(--brand); text-decoration: none; }
.breadcrumb .sep { margin: 0 .4rem; color: #c4c7cf; }

.container { max-width: 1080px; margin: 1.2rem auto; padding: 0 1rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:1rem; }
.row { display:flex; gap:.6rem; align-items: center; flex-wrap: wrap; }
.card { background: var(--card); border:1px solid var(--border); border-radius: .6rem; padding:1rem; }
input, select, button { padding: .5rem .6rem; }
input, select { border:1px solid var(--border); border-radius:.4rem; }
button { border:1px solid var(--border); background:#fff; border-radius:.4rem; cursor:pointer; }
button:hover { background:#fafafa; }
pre { background:#0b1020; color:#d1d5db; padding:1rem; border-radius:.4rem; overflow:auto; max-height: 520px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.help { font-size: .9rem; color: var(--muted); }
.error { color: #b91c1c; margin-top: .5rem; }
.hidden { display: none !important; }

.cards {
  display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cards a { display:block; text-decoration:none; color:inherit; }
.cards .card:hover { border-color:#d4d8e1; box-shadow: 0 1px 0 rgba(0,0,0,.02); }