:root { color-scheme: light; font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif; color: #18232b; background: #eef3f5; }
body { margin: 0; }
main { max-width: 1500px; margin: 0 auto; padding: 28px 20px 60px; }
header { background: #fff; border-top: 5px solid #087f8c; padding: 24px; box-shadow: 0 4px 18px #16313b18; }
.eyebrow { color: #087f8c; font-size: .75rem; font-weight: 800; letter-spacing: .15em; margin: 0; }
h1 { margin: 5px 0 20px; font-size: 1.8rem; }
form { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
label { display: grid; gap: 5px; font-size: .8rem; font-weight: 700; }
select, input, button { font: inherit; padding: 8px 10px; border: 1px solid #aab9bf; border-radius: 5px; background: #fff; }
select, input[type="number"], form > button, .segmented { height: 40px; box-sizing: border-box; }
button { cursor: pointer; background: #087f8c; border-color: #087f8c; color: white; font-weight: 700; }
.profile-toggle { margin: 0; padding: 0; border: 0; }
.profile-toggle legend { margin-bottom: 5px; font-size: .8rem; font-weight: 700; }
.segmented { display: flex; overflow: hidden; border: 1px solid #087f8c; border-radius: 6px; }
.segment { display: block; position: relative; cursor: pointer; font-size: .9rem; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: flex; align-items: center; height: 100%; box-sizing: border-box; padding: 0 12px; color: #075e68; background: #fff; }
.segment + .segment span { border-left: 1px solid #087f8c; }
.segment input:checked + span { color: #fff; background: #087f8c; font-weight: 800; }
.segment input:focus-visible + span { outline: 3px solid #f4b942; outline-offset: -3px; }
#summary { margin-top: 18px; font-weight: 700; }
.units, #message { color: #53646c; }
.table-wrap { margin-top: 18px; overflow-x: auto; background: white; box-shadow: 0 4px 18px #16313b18; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: .86rem; }
th { position: sticky; top: 0; background: #183b45; color: white; text-align: left; }
th, td { padding: 9px 10px; border-bottom: 1px solid #dce4e7; }
tbody tr[data-available="true"] { cursor: pointer; }
tbody tr[data-available="true"]:hover { background: #edf8f8; }
.missing { color: #8b5a20; background: #fff9ef; }
.warn { color: #9b2c2c; font-weight: 800; }
.ok { color: #237a45; font-weight: 800; }
.partial { color: #9b5f00; font-weight: 700; }
.legend { margin-top: 16px; padding: 12px 16px; color: #455860; background: #fff; border-left: 4px solid #87a9b0; font-size: .84rem; line-height: 1.6; }
.legend p { margin: 4px 0; }
dialog { width: min(900px, calc(100vw - 40px)); max-height: 85vh; border: 0; border-radius: 8px; padding: 0; box-shadow: 0 18px 70px #0006; }
dialog::backdrop { background: #12272e99; }
.dialog-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #183b45; color: white; }
.dialog-head h2 { margin: 0; }
#detail-body { padding: 20px; }
.timeseries-chart { display: block; width: 100%; height: auto; margin: 10px 0 20px; background: #f7f9fb; }
.chart-status { color: #53646c; font-weight: 700; }
.detail-section { margin-bottom: 20px; }
.detail-section h3 { margin-bottom: 7px; color: #087f8c; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f1f5f6; padding: 12px; border-radius: 5px; font-size: .8rem; }
@media (max-width: 640px) { main { padding: 12px 8px 40px; } header { padding: 16px; } }