:root{
  color-scheme:light;
  --bg:#f3f5f8; --surface:#ffffff; --surface2:#f8fafc; --ink:#16212e; --muted:#5b6878; --line:#dde3ea;
  --accent:#1b5fa8; --accent-soft:#e3eefa; --danger:#c2413a;
  --r1:#9a6f05; --r1bg:#fbefcf; --r2:#4d5d72; --r2bg:#e6ebf2; --r3:#9a532a; --r3bg:#f6e4d7; --none:#b7c0ca;
  --c1:#1b5fa8; --c2:#d9731f; --c3:#2f9a6a; --c4:#b0417a; --c5:#7a62c9; --c6:#0f8b8d; --c7:#8a6d1f; --c8:#c2413a;
  --bar-top:#3a86d6; --bar-mid:#e8940a; --bar-out:#e5281f; --bar-none:#e9edf1;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --num:"Barlow","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0f151c; --surface:#17202a; --surface2:#1b2531; --ink:#e6ebf1; --muted:#95a2b2; --line:#2a3645;
    --accent:#6fa9ec; --accent-soft:#1c2f46; --danger:#f07a72;
    --r1:#f0c34f; --r1bg:#3b3013; --r2:#c3cedb; --r2bg:#2a3441; --r3:#e39e72; --r3bg:#3d271a; --none:#4a5666;
    --c1:#6fa9ec; --c2:#f0994f; --c3:#5cc596; --c4:#e074ad; --c5:#a591ea; --c6:#4fc6c8; --c7:#d9b85a; --c8:#f07a72;
    --bar-top:#2f74c0; --bar-mid:#c77c05; --bar-out:#c42a22; --bar-none:#253140;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}
.pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);display:grid;place-items:center}
.pin i{width:9px;height:9px;border-radius:50%;background:var(--surface);display:block}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;gap:8px}
.login-card .brand{margin-bottom:14px;font-size:17px}
.login-card label{font-size:12.5px;color:var(--muted);margin-top:6px}
.login-card input{font:inherit;color:var(--ink);background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.login-card button{margin-top:14px;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:11px;font-weight:700}
.login-card button:disabled{opacity:.6;cursor:default}
.error{color:var(--danger);font-size:13px;margin:6px 0 0}
.note{color:var(--muted);font-size:12px;margin:10px 0 0}

/* report */
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:0 48px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:18px;border-bottom:1px solid var(--line)}
.user{color:var(--muted);font-size:13px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.user button{color:var(--muted);background:none;border:1px solid var(--line);border-radius:6px;padding:3px 10px}
.controls{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;justify-content:space-between;padding-block:22px 18px}
.store h1{font-size:24px;margin:0;line-height:1.3;text-wrap:balance}
.store .meta{color:var(--muted);font-size:12.5px;margin-top:2px}
.pickers{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;max-width:100%}
.ym{display:flex;flex-direction:column;gap:2px}
.ym span{font-size:12px;color:var(--accent);font-weight:700}
.ym select{font-size:16px;font-weight:700;min-width:9.5em;padding:8px 12px}
.status{background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px}

.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tile .lbl{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.tile .val{font-family:var(--num);font-size:34px;font-weight:600;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.tile .val small{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted);margin-left:3px}
.tile .sub{font-size:12px;color:var(--muted)}
.medal{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-family:var(--num);font-weight:700;font-size:12px}
.m1{background:var(--r1bg);color:var(--r1)} .m2{background:var(--r2bg);color:var(--r2)} .m3{background:var(--r3bg);color:var(--r3)}
.bar{height:5px;border-radius:3px;background:var(--line);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px}

section.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-top:18px;padding:18px}
.panel h2{font-size:16px;margin:0 0 12px}
.panel .hint{font-size:12.5px;color:var(--muted);margin:-6px 0 14px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin-bottom:12px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block}

.calbox{overflow-x:auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);min-width:760px}
.dow{font-size:14px;font-weight:700;text-align:center;padding:7px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.day{background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 3px 5px;min-height:120px;display:flex;flex-direction:column;gap:5px;min-width:0}
.day.other .d{color:var(--none)}
.day .dh{display:flex;justify-content:flex-end;padding-right:4px}
.day .d{font-family:var(--num);font-size:17px;color:var(--muted)}
.day .d small{font-family:var(--sans);font-size:13px;margin-left:1px}
.kwl{display:flex;flex-direction:column;gap:2px}
.kb{display:block;border-radius:2px;padding:1px 4px;font-size:12.5px;line-height:1.45;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb b{font-family:var(--num);font-weight:600;margin-right:5px}
.kb.top{background:var(--bar-top)} .kb.mid{background:var(--bar-mid)} .kb.out{background:var(--bar-out)}
.kb.none{background:var(--bar-none);color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{font-size:12.5px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);border-radius:999px;padding:3px 11px 3px 8px}
.chip[aria-pressed="false"]{opacity:.45}
.chip .dot{width:10px;height:10px;border-radius:50%}
.chartbox{overflow-x:auto}
svg text{font-family:var(--num);font-size:11px;fill:var(--muted)}
.loading{position:fixed;inset:auto 0 24px 0;margin:auto;width:max-content;background:var(--ink);color:var(--surface);padding:6px 14px;border-radius:999px;font-size:13px}

/* スマホではレポート画面をPCと同じ幅で表示し、画面全体を縮小して見せる（app.js の setWideViewport） */