:root {
    --ink:#10203A; --ink-2:#485F80; --ink-3:#7A8CA6;
    --paper:#EDF0F5; --card:#FFFFFF; --line:#D2DAE6; --line-2:#B9C4D4;
    --signal:#0B6E77; --signal-bg:#E0EFF0;
    --mono:Consolas,"Cascadia Mono","SFMono-Regular",ui-monospace,monospace;
    --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
    --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
    --grid:#e1e0d9; --axis:#c3c2b7; --muted:#898781;
  }
  * { box-sizing:border-box; }
  body { margin:0; padding:0 0 64px; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:14px; line-height:1.6; }
  .wrap { max-width:1120px; margin:0 auto; padding:0 20px; }

  .readout { background:var(--ink); color:#DDE5F0; font-family:var(--mono);
    font-size:12px; letter-spacing:.02em; padding:10px 0; }
  .readout .wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
  .readout .lbl { color:#6C82A3; text-transform:uppercase; font-size:11px; }
  .dot { display:inline-block; width:7px; height:7px; border-radius:50%;
    background:#46C77E; box-shadow:0 0 0 3px rgba(70,199,126,.2); margin-right:7px; vertical-align:1px; }
  .readout .right { margin-left:auto; color:#9DB0CE; }

  h1 { font-size:20px; font-weight:600; margin:24px 0 20px; letter-spacing:-.01em; }
  .sub { color:var(--ink-2); margin:0 0 18px; font-size:13px; }

  .tabs { display:flex; gap:2px; border-bottom:1px solid var(--line-2); margin-bottom:22px; }
  .tab { font-size:13px; font-weight:600; padding:9px 16px; cursor:pointer; color:var(--ink-2);
    background:transparent; border:1px solid transparent; border-bottom:none; position:relative; top:1px; }
  .tab.active { color:var(--signal); background:var(--card);
    border-color:var(--line-2); border-bottom:1px solid var(--card); }
  .tab.disabled { color:var(--ink-3); cursor:not-allowed; }
  .tab.disabled::after { content:"近日"; font-family:var(--mono); font-size:9px; font-weight:400;
    background:var(--line); color:var(--ink-3); padding:1px 4px; margin-left:6px; vertical-align:1px; }

  h2 { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-2); margin:26px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line-2); }
  .card { background:var(--card); border:1px solid var(--line); padding:18px 20px; position:relative; }

  .controls { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
  label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:5px; }
  select { font-family:var(--sans); font-size:13px; padding:8px 10px;
    border:1px solid var(--line-2); background:#FBFCFE; color:var(--ink); border-radius:0; }
  select#group { min-width:240px; }
  select:focus, input:focus { outline:2px solid var(--signal); outline-offset:-1px; border-color:var(--signal); }
  .range { display:flex; align-items:flex-end; gap:8px; }
  .range > span { color:var(--ink-3); padding-bottom:9px; }
  .ym { display:inline-flex; gap:4px; }
  .ym select:disabled { color:var(--ink-3); background:var(--line); }

  .tiles { display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
    background:var(--line); border:1px solid var(--line); margin:18px 0; }
  .tile { background:var(--card); padding:16px 18px; }
  .tile .k { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
  .tile .v { font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:-.02em; margin-top:2px;
    font-variant-numeric:tabular-nums; }
  .tile .v .sw { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:8px; vertical-align:1px; }
  .tile .n { font-size:12px; color:var(--ink-3); font-family:var(--mono); }

  .chart-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; gap:12px; }
  .chart-title { font-size:14px; font-weight:600; color:var(--ink); }
  .chart-unit { font-family:var(--mono); font-size:11px; color:var(--ink-3); text-align:right; }
  .scroll { overflow-x:auto; }
  svg { display:block; height:auto; }
  .grid line { stroke:var(--grid); stroke-width:1; }
  .axis text { fill:var(--muted); font-size:11px; font-family:var(--mono); }
  .baseline { stroke:var(--axis); stroke-width:1; }
  .seg { stroke:var(--card); stroke-width:2; }
  .today { stroke:var(--ink-2); stroke-width:1.5; stroke-dasharray:4 3; }
  .today-lab { fill:var(--ink-2); font-size:10px; font-family:var(--mono); font-weight:600; }
  .total-label { fill:var(--ink-2); font-size:10px; font-weight:600; text-anchor:middle; font-family:var(--mono); }
  .total-label, .today, .today-lab, .x-label { pointer-events:none; }
  .legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
  .legend span { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2); }
  .legend i { width:11px; height:11px; border-radius:2px; display:inline-block; }
  .tip { position:fixed; pointer-events:none; background:var(--ink); color:#EAF0F8; font-family:var(--mono);
    font-size:12px; padding:6px 9px; border-radius:3px; opacity:0; transition:opacity .1s; white-space:nowrap; z-index:10; }
  .tip b { color:#6FE0A6; }
  .empty { color:var(--ink-3); font-size:13px; padding:40px 0; text-align:center; }

  footer { margin-top:34px; font-size:12px; color:var(--ink-3); border-top:1px solid var(--line-2); padding-top:14px; }
  .note { background:var(--signal-bg); border-left:3px solid var(--signal); padding:10px 14px;
    font-size:12px; color:#0a4a50; margin:18px 0 0; }

  .gear { margin-left:auto; cursor:pointer; color:var(--ink-2); font-size:13px; font-weight:600; padding:9px 8px; }
  .modal[hidden] { display:none; }
  .modal { position:fixed; inset:0; background:rgba(16,32,58,.45); display:flex; align-items:center; justify-content:center; z-index:50; }
  .modal-card { background:var(--card); width:min(860px,94vw); max-height:88vh; display:flex; flex-direction:column; border:1px solid var(--line-2); position:relative; }
  .modal-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-weight:700; }
  .modal-close { border:none; background:none; font-size:20px; cursor:pointer; color:var(--ink-2); }
  .settings-body { display:flex; gap:0; flex:1; min-height:0; }
  .sp-list { width:200px; border-right:1px solid var(--line); padding:10px; overflow:auto; }
  .sp-list .row { padding:7px 9px; cursor:pointer; font-size:13px; border-radius:4px; }
  .sp-list .row.active { background:var(--s1); color:#fff; font-weight:600; }
  .sp-add { margin-top:8px; width:100%; padding:7px; font-size:12px; border:1px dashed var(--line-2); background:none; cursor:pointer; color:var(--ink-2); }
  .sp-edit { flex:1; padding:14px 16px; overflow:auto; }
  .sp-hint { color:var(--ink-3); font-size:13px; }
  .sp-edit label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin:10px 0 4px; }
  .sp-edit input[type=text] { width:100%; padding:6px 8px; border:1px solid var(--line-2); background:#FBFCFE; }
  .chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
  .chip { background:var(--s1); color:#fff; border-radius:10px; padding:1px 8px; font-size:12px; display:inline-flex; gap:5px; align-items:center; }
  .chip.cat { background:var(--s3); }
  .chip button { border:none; background:none; color:#fff; cursor:pointer; }
  .pj-search { width:100%; padding:6px 8px; margin:6px 0; border:1px solid var(--line-2); }
  .pj-list { max-height:220px; overflow:auto; border:1px solid var(--line); }
  .pj-list .pj { display:flex; gap:8px; padding:5px 8px; font-size:12px; border-top:1px solid var(--line); cursor:pointer; }
  .pj-list .pj:first-child { border-top:none; }
  .modal-foot { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--line); }
  .sp-save { background:var(--s6); color:#fff; border:none; padding:7px 18px; font-weight:600; cursor:pointer; }
  .sp-save:disabled { opacity:.55; cursor:default; }
  .sp-msg { font-size:12px; color:var(--s2); margin-right:auto; }
  .chart-row { display:flex; gap:16px; align-items:flex-start; }
  /* min-width:0 がないと SVG の width 属性でカードが押し広げられ、パネルが画面外に出る */
  .chart-row > .card { flex:1 1 auto; min-width:0; }
  .month-panel { flex:0 0 320px; background:var(--card); border:1px solid var(--line);
    display:flex; flex-direction:column; max-height:520px; }
  .month-panel[hidden] { display:none; }
  .mp-head { display:flex; justify-content:space-between; align-items:center; gap:8px;
    padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; }
  .mp-close { border:none; background:none; font-size:18px; line-height:1; cursor:pointer; color:var(--ink-2); }
  .mp-body { overflow-y:auto; }
  .mp-sum { padding:10px 14px; border-bottom:1px solid var(--line); font-size:12px;
    color:var(--ink-2); font-family:var(--mono); }
  .mp-sum b { color:var(--ink); font-variant-numeric:tabular-nums; }
  .mp-note { color:var(--ink-3); font-size:11px; }
  .mp-row { padding:10px 14px; border-bottom:1px solid var(--line); }
  .mp-row:last-child { border-bottom:none; }
  .mp-name { font-size:13px; font-weight:600; }
  .mp-nums { display:flex; justify-content:space-between; gap:8px; margin-top:2px;
    font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }
  .mp-qty { color:var(--ink-3); }
  .mp-meta { display:flex; align-items:center; gap:8px; margin-top:5px; font-size:12px; color:var(--ink-2); }
  .mp-stage { color:#fff; border-radius:10px; padding:1px 8px; font-size:11px; }
  .mp-empty { padding:16px 14px; font-size:13px; color:var(--ink-3); }
  .mp-err { padding:16px 14px; font-size:13px; color:var(--s8); }
  /* fill:transparent はクリックを受けるが fill:none は受けないので transparent にする */
  .hit { fill:transparent; cursor:pointer; }
  .hit.sel { fill:var(--signal); fill-opacity:.08; }
  @media (max-width:900px) {
    .chart-row { flex-wrap:wrap; }
    .month-panel { flex:1 1 100%; }
  }

  /* ---- loading ---- */
  .loading-overlay { position:absolute; inset:0; z-index:5;
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:rgba(255,255,255,.72);
    color:var(--ink-2); font-size:13px; font-weight:600; }
  .loading-overlay[hidden] { display:none; }
  .spinner { width:18px; height:18px; border:2px solid var(--line-2);
    border-top-color:var(--signal); border-radius:50%; animation:spin .7s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* 取得中は前回の値を薄く残す。高さは変えない。 */
  body.is-loading .tiles, body.is-loading #chart, body.is-loading .legend, body.is-loading #empty { opacity:.35; }

  /* active タブに不定プログレスの下線を出す（.tab は position:relative）。 */
  body.is-loading .tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:linear-gradient(90deg, var(--line) 0%, var(--signal) 50%, var(--line) 100%);
    background-size:200% 100%; animation:slide 1.1s linear infinite; }
  @keyframes slide { from { background-position:200% 0; } to { background-position:-200% 0; } }

  @media (prefers-reduced-motion: reduce) {
    .spinner { animation:none; }
    body.is-loading .tab.active::after { animation:none; background:var(--signal); }
  }