:root { --bg:#f6f5f2; --card:#fff; --ink:#1f2328; --muted:#6b7280; --line:#e3e1dc; --accent:#2f6f4f; --warn:#a15c00; --ng:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; background:var(--bg); color:var(--ink); font-size:14px; }
.bar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:16px; }
.badge { font-size:11px; font-weight:500; color:var(--warn); border:1px solid var(--warn); border-radius:999px; padding:1px 8px; margin-left:6px; }
.portals { display:flex; gap:6px; }
.portals button, .tabs button { border:1px solid var(--line); background:var(--card); padding:6px 12px; border-radius:8px; cursor:pointer; font:inherit; }
.portals button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.who { margin-left:auto; color:var(--muted); display:flex; gap:6px; align-items:center; }
select, input { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.tabs { display:flex; flex-wrap:wrap; gap:6px; padding:10px 16px; border-bottom:1px solid var(--line); }
.tabs button.on { border-color:var(--accent); color:var(--accent); font-weight:700; }
main { padding:16px; max-width:1200px; }
h2 { font-size:17px; margin:4px 0 12px; }
h3 { font-size:15px; margin:18px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:14px; overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; }
th { color:var(--muted); font-weight:600; font-size:12px; }
td.num { text-align:right; font-variant-numeric: tabular-nums; }
.muted { color:var(--muted); }
.ng { color:var(--ng); }
.warn { color:var(--warn); }
.pill { display:inline-block; font-size:11px; padding:1px 7px; border-radius:999px; background:#eef3ef; color:var(--accent); margin-right:4px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
button.act { border:1px solid var(--accent); background:var(--accent); color:#fff; padding:5px 12px; border-radius:6px; cursor:pointer; font:inherit; }
button.sub { border:1px solid var(--line); background:#fff; padding:5px 12px; border-radius:6px; cursor:pointer; font:inherit; }
.note { font-size:12px; color:var(--muted); margin-top:6px; }
@media (max-width: 640px) { .who { margin-left:0; width:100%; } main { padding:12px; } }
[hidden] { display: none !important; }
.login { max-width: 520px; }