:root {
    font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
    color: #1d2b25;
    background: #f3f7f4;
}
* { box-sizing: border-box; }
body { margin: 0; }
header {
    height: 64px;
    padding: 0 max(20px, calc((100% - 1200px)/2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #174f3a;
    color: #fff;
}
nav { display: flex; align-items: center; gap: 18px; }
a { color: #176848; }
header a { color: #fff; text-decoration: none; }
header form { margin: 0; }
header button {
    background: none;
    border: 1px solid #9bc9b8;
    color: #fff;
    padding: 7px 10px;
    border-radius: 7px;
}
main { max-width: 1200px; margin: 28px auto; padding: 0 18px; }
.card {
    background: #fff;
    border: 1px solid #dce7e0;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 18px #173d2b0b;
    margin-bottom: 22px;
}
.narrow { max-width: 520px; margin: 50px auto; }
.grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
.heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.inline { display: flex; gap: 8px; align-items: center; }
h1 { margin: 0 0 18px; }
h2 { font-size: 18px; }
label { display: block; margin: 14px 0 6px; font-weight: 600; }
input, textarea, select {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #b9c9c0;
    border-radius: 7px;
    margin-top: 5px;
    font: inherit;
}
textarea { min-height: 80px; }
button, .button {
    display: inline-block;
    border: 0;
    border-radius: 7px;
    padding: 10px 15px;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}
.primary { background: #16865b; color: #fff; }
.danger { background: #bb3e3e; color: #fff; }
.table { overflow: auto; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td {
    text-align: left;
    padding: 11px;
    border-bottom: 1px solid #e4ece7;
    white-space: nowrap;
}
th { font-size: 13px; color: #60736a; }
small { display: block; color: #74847c; }
.badge { padding: 4px 8px; border-radius: 99px; font-size: 12px; }
.up { background: #d7f5e6; color: #176844; }
.down { background: #eee; color: #666; }
.error { color: #b42318; }
pre {
    padding: 16px;
    background: #eef5f1;
    overflow: auto;
    border-radius: 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
@media(max-width: 760px) {
    .grid { grid-template-columns: 1fr; }
    .heading { display: block; }
    .inline { flex-wrap: wrap; }
    nav a { display: none; }
    th, td { padding: 9px; }
}
@media(max-width: 640px) {
    header, nav, .inline { flex-wrap: wrap; }
    .grid { grid-template-columns: 1fr; }
    main { padding: 12px; }
}