:root {
	--ink: #0f172a;
	--ink-hover: #1e293b;
	--muted: #475569;
	--line: #e2e8f0;
	--line-strong: #94a3b8;
	--bg: #ffffff;
	--soft: #f8fafc;
	--link: #1d4ed8;
	--ok-ink: #166534;
	--ok-bg: #f0fdf4;
	--ok-line: #bbf7d0;
	--warn-ink: #92400e;
	--warn-bg: #fffbeb;
	--warn-line: #fde68a;
	--bad-ink: #b91c1c;
	--bad-bg: #fef2f2;
	--bad-line: #fecaca;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}
html:lang(ja) p, html:lang(ja) dd, html:lang(ja) li { line-height: 1.8; }
html:lang(ja) h1, html:lang(ja) h2 { word-break: auto-phrase; }
a { color: var(--link); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
code, .mono { font-family: var(--mono); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; line-height: 1.3; }
h2 { font-size: 20px; line-height: 1.4; }
h3 { font-size: 16px; line-height: 1.4; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; }
.brand svg { width: 24px; height: 24px; flex: none; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions form { margin: 0; }
.textbtn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
	background: none; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5;
	text-decoration: none; cursor: pointer;
}
.textbtn:hover { background: var(--soft); }

main { padding: 32px 0 64px; }
.lead { margin-top: 12px; max-width: 640px; color: var(--muted); }
.note { color: var(--muted); font-size: 14px; }
.eyebrow { color: var(--muted); font-size: 14px; }
.section { margin-top: 32px; }
.section > h2 + * { margin-top: 16px; }

.card { border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--bg); }
.card-soft { background: var(--soft); }
.card > * + * { margin-top: 16px; }
.card > h2 + p, .card > h3 + p { margin-top: 8px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 8px;
	font: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; text-align: center;
	text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: #ffffff; }
.btn-primary:hover { background: var(--ink-hover); }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--soft); }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.plans { display: grid; gap: 12px; }
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-label { font-size: 20px; font-weight: 700; line-height: 1.3; }
.plan-price { font-weight: 600; }
.plan-shape { margin-top: 8px; color: var(--muted); font-size: 14px; }
.section > .plans + .note { margin-top: 12px; }

.perms { margin: 0; }
.perm { padding: 16px 0; border-top: 1px solid var(--line); }
.perm:first-child { padding-top: 0; border-top: 0; }
.perm:last-child { padding-bottom: 0; }
.perm dt { font-family: var(--mono); font-size: 14px; font-weight: 600; line-height: 1.5; }
.perm dd { margin: 4px 0 0; color: var(--muted); }

.notice { border: 1px solid; border-radius: 12px; padding: 16px; }
.notice > * + * { margin-top: 4px; }
.notice h2, .notice h3 { font-size: 16px; line-height: 1.5; }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.notice-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }

.org-head > * + * { margin-top: 4px; }
.org-head .others { margin-top: 8px; font-size: 14px; color: var(--muted); }
.status-row { display: flex; flex-direction: column; gap: 16px; }
.status-line { margin-top: 4px; color: var(--muted); }
.status-bad { border-color: var(--bad-line); background: var(--bad-bg); }
.status-bad .status-line { color: var(--bad-ink); }
.status-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.status-warn .status-line { color: var(--warn-ink); }
.meter { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden; background: var(--line); appearance: none; -webkit-appearance: none; }
.meter::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
.meter::-webkit-progress-value { background: var(--ink); border-radius: 4px; }
.meter::-moz-progress-bar { background: var(--ink); border-radius: 4px; }
.meter + p { margin-top: 8px; }
.box-coming { padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

.code { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.code code { padding: 0 8px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 14px; }
.field-row { display: flex; flex-direction: column; gap: 8px; }
.input-wrap { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); }
.input-wrap:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.input-wrap .prefix { padding-left: 12px; color: var(--muted); font-family: var(--mono); font-size: 16px; white-space: nowrap; }
.input-wrap input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.input-wrap input:focus-visible { outline: none; }
.input-wrap .prefix + input { padding-left: 0; }
.field-error { color: var(--bad-ink); font-size: 14px; }

.jobs { width: 100%; border-collapse: collapse; font-size: 14px; }
.jobs th { padding: 0 8px 8px; color: var(--muted); font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.jobs td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.jobs th:first-child, .jobs td:first-child { padding-left: 0; }
.jobs th:last-child, .jobs td:last-child { padding-right: 0; }
.jobs .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jobs .repo { font-weight: 600; overflow-wrap: anywhere; }
.jobs .job-name { color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.pill { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 13px; line-height: 24px; white-space: nowrap; background: var(--soft); border: 1px solid var(--line); }
.pill-run { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.pill-wait { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.pill-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }
.jobs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jobs-head + * { margin-top: 16px; }
.jobs-notes > * + * { margin-top: 12px; }
.jobs-notes + .jobs, .jobs-notes + .empty { margin-top: 16px; }
.empty { padding: 24px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); }

.wf-list { margin: 0; padding: 0; list-style: none; }
.wf { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.wf:first-child { border-top: 0; padding-top: 0; }
.wf:last-child { padding-bottom: 0; }
.wf-name { font-weight: 600; }
.wf-path { color: var(--muted); font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

@media (max-width: 767px) {
	main { padding: 24px 0 48px; }
	h1 { font-size: 24px; }
	.card { padding: 16px; }
	.btn-block { width: 100%; }
	.code { flex-wrap: wrap; }
	.jobs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.jobs, .jobs tbody { display: block; }
	.jobs tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
	.jobs tr:first-child { padding-top: 0; }
	.jobs td { display: block; padding: 0; border: 0; }
	.jobs td.cell-repo { grid-column: 1 / -1; }
	.jobs td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
}
@media (min-width: 768px) {
	.wrap { padding: 0 32px; }
	.plans { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.status-row { flex-direction: row; align-items: center; justify-content: space-between; }
	.field-row { flex-direction: row; }
	.field-row .input-wrap { flex: 1; }
	.wf { flex-direction: row; align-items: center; justify-content: space-between; }
}