* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: #222; background: #f4f5f7; }
header { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1.5rem; background: #fff; border-bottom: 1px solid #ddd; }
header form { margin: 0; }
.brand { font-weight: 600; color: #222; text-decoration: none; }
main { max-width: 1000px; margin: 1.5rem auto; padding: 0 1rem; }
h1 { font-size: 1.4rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
a { color: #2457c5; }
code, pre { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }
pre { background: #f4f5f7; padding: .75rem; overflow-x: auto; }

.card { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 1.25rem; margin-bottom: 1.25rem; }
.narrow { max-width: 360px; margin: 3rem auto; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

label { display: block; margin-bottom: .75rem; }
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number],
input[type=datetime-local], select, textarea {
    display: block; width: 100%; padding: .45rem .55rem; margin-top: .25rem;
    font: inherit; border: 1px solid #bbb; border-radius: 4px; background: #fff;
}
input[readonly] { background: #eee; }
button, .button {
    display: inline-block; padding: .5rem 1rem; font: inherit; color: #fff; background: #2457c5;
    border: 0; border-radius: 4px; cursor: pointer; text-decoration: none;
}
button.link { padding: 0; color: #2457c5; background: none; text-decoration: underline; }
button.danger { color: #b3261e; }

.field { display: grid; grid-template-columns: 200px 260px 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid #eee; }
.field .modes label { display: inline-block; margin: 0 .75rem .25rem 0; }
.field .value input, .field .value select, .field .value textarea { margin-top: 0; }
.field:has(input[value=hidden]:checked) .value,
.field:has(input[value=param]:checked) .value { opacity: .35; }
.field.has-error { background: #fdf0ef; }
.req { font-size: .75rem; color: #b3261e; margin-left: .25rem; }
small, .help { display: block; color: #666; font-size: .8rem; }

.error { display: block; color: #b3261e; }
.notice { color: #1e7b34; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #ddd; }
th, td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #eee; vertical-align: top; }
.url { word-break: break-all; font-size: .85rem; }
.actions { white-space: nowrap; }
.actions form { display: inline; margin-left: .75rem; }

@media (max-width: 760px) {
    .field { grid-template-columns: 1fr; gap: .25rem; }
}