: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; }

  .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, input[type=month] { 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); }
  .custom { display:none; align-items:flex-end; gap:8px; }
  .custom.on { display:flex; }
  .custom span { color:var(--ink-3); padding-bottom:9px; }

  .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); }
  .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); }
  .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-msg { font-size:12px; color:var(--s2); margin-right:auto; }