:root{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#123f32;background:#f5f8f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:960px;margin:0 auto;padding:28px 32px 48px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px;gap:20px}.brand{text-decoration:none;color:inherit;font-size:26px;font-weight:700;letter-spacing:-.6px}header>div{font-size:12px;display:flex;align-items:center;gap:14px}h1{font-size:28px;line-height:1.5;margin:0;font-weight:700}p{line-height:1.8}button,select,.primary{font:inherit;border:1px solid #8caaa0;border-radius:8px;background:#fff;color:#124c3a;min-height:44px;padding:8px 14px;cursor:pointer}.primary{display:inline-block;background:#12543e;color:#fff;text-decoration:none;padding:12px 22px}button:hover,.primary:hover{filter:brightness(.94)}button:focus-visible,select:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #509f80;outline-offset:3px}label{display:flex;align-items:center;gap:12px;font-size:14px}select{max-width:100%;text-overflow:ellipsis}button:disabled{opacity:.5;cursor:wait}.selectors{display:flex;gap:28px;padding-bottom:22px;flex-wrap:wrap}.selectors label{flex:1}.selectors select{flex:1;min-width:0}.statusline{display:flex;align-items:center;gap:20px;justify-content:space-between}.statusline span{font-size:13px}.muted{color:#60776d;font-size:14px;margin:8px 0 22px}.values{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #c6d5ce;border-bottom:1px solid #c6d5ce}.value{padding:22px 20px 22px 0}.value+.value{border-left:1px solid #d9e3de;padding-left:24px}.value label{font-size:14px;color:#3d6455}.number{font-size:34px;line-height:1.4;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-1px}.number small{font-size:16px;font-weight:400;letter-spacing:0;margin-left:5px}.battery{font-size:14px;margin:0;padding:18px 0;border-bottom:1px solid #c6d5ce}.history{padding-top:26px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.toolbar label{font-size:15px;font-weight:600}.toolbar select{min-width:150px}.dates{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 12px}.dates span{font-size:14px;line-height:1.7}.dates select{font-size:13px;min-height:38px;padding:4px 8px}.legend{display:flex;flex-wrap:wrap;gap:8px 20px;min-height:35px;font-size:12px;line-height:1.7}.legend span{display:inline-flex;align-items:center;gap:7px}.legend i{height:3px;width:18px;display:inline-block;border-radius:2px}canvas{width:100%;height:310px;display:block;touch-action:pan-y}#tooltip{background:#fff;border:1px solid #b0c6bb;border-radius:8px;padding:14px 18px;line-height:1.8;font-size:14px;white-space:pre-line}#graph-status{font-size:13px;color:#526e61;min-height:24px;margin:12px 0}footer{border-top:1px solid #c6d5ce;margin-top:28px;padding-top:14px;color:#526e61;font-size:12px}footer p{margin:4px 0}#error{color:#963c34;border-left:3px solid;padding-left:16px}#login{padding:8vh 0 12vh}#login p{max-width:470px;color:#526e61}#login .primary{margin:18px 0}
@media(max-width:600px){main{padding:22px 20px 36px}header{margin-bottom:26px}.brand{font-size:24px}header>div{font-size:11px;gap:8px}header button{font-size:11px;padding:6px 8px;min-height:36px}.selectors{gap:12px;flex-direction:column}.selectors label{justify-content:space-between}.selectors select{flex:0 1 75%;width:75%}h1{font-size:26px}.values{grid-template-columns:1fr 1fr}.value{padding:16px 0}.value+.value{padding-left:18px}.value:nth-child(3){border-left:0;border-top:1px solid #d9e3de;padding-left:0}.value:nth-child(4){border-top:1px solid #d9e3de}.number{font-size:33px}.battery{font-size:12px;line-height:1.8}.dates span{font-size:12px}.toolbar select{min-width:130px}canvas{height:280px}.legend{gap:5px 12px}.statusline{gap:10px}.statusline span{font-size:12px}}

.number.long{font-size:20px;letter-spacing:-.5px}.number.long small{font-size:13px}

header button{white-space:nowrap;flex-shrink:0}

.history-crop{margin-bottom:14px}.history-crop label{justify-content:space-between}.history-crop select{flex:1;max-width:70%}
