:root{
  --bg:#f4f6f8; --panel:#ffffff; --line:#e2e6ea; --fg:#1b2027; --muted:#6b7683;
  --accent:#2f7bd6; --accent-soft:#e8f1fb;
  --down:#1c9c86; --up:#d97a20; --danger:#c9483d;
  --fat:#8b5cf6; --step-soft:#c3d4e2;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12161b; --panel:#1a2028; --line:#2b333d; --fg:#e6eaef; --muted:#94a1b0;
    --accent:#5aa2f0; --accent-soft:#1e2a3a;
    --down:#3ec9ad; --up:#e8a33f; --danger:#e8695c;
    --fat:#a78bfa; --step-soft:#3f5567;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  font-size:15px; line-height:1.6;
}
.muted{color:var(--muted)}

/* [hidden] のUAスタイルは display:none だが詳細度が低く、
   下の .center{display:flex} などのクラス指定に負けてしまう。明示的に打ち消す。 */
[hidden]{display:none !important}

.screen{min-height:100%}
.center{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center}

/* ---- ローディング ---- */
.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spinner{animation-duration:2.4s} }

/* ---- ログイン ---- */
.login-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:32px 28px; max-width:420px; width:100%;
}
.login-card h1{font-size:26px; margin:6px 0 8px; letter-spacing:-.02em}
.login-card .logo{font-size:44px; line-height:1}
.gsi{display:flex; justify-content:center; min-height:44px; margin:22px 0 4px}
.fineprint{font-size:11px; color:var(--muted); line-height:1.7; margin:20px 0 0; text-align:left}

/* ---- トップバー ---- */
.topbar{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10}
.topbar-inner{
  max-width:900px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{font-weight:650}
.account{display:flex; align-items:center; gap:8px; font-size:13px; min-width:0}
.account .muted{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38vw}
.avatar{width:26px; height:26px; border-radius:50%; flex:none}

/* ---- レイアウト ---- */
.wrap{max-width:900px; margin:0 auto; padding:20px 16px 60px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px}
.card h2{font-size:14px; margin:0 0 12px; color:var(--muted); font-weight:600; letter-spacing:.04em}
.card h3{font-size:13px; margin:0 0 6px; font-weight:650}
.card hr{border:0; border-top:1px solid var(--line); margin:20px 0 16px}
.setup{opacity:.9}

/* ---- サマリ ---- */
.summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.stat .label{font-size:12px; color:var(--muted)}
.stat .value{font-size:26px; font-weight:650; letter-spacing:-.01em; line-height:1.25}
.stat .value .u{font-size:13px; font-weight:500; color:var(--muted); margin-left:2px}
.stat .delta{font-size:13px; font-weight:600; margin-top:2px}
.delta.down{color:var(--down)} .delta.up{color:var(--up)} .delta.flat{color:var(--muted)}
.stat .note{font-size:11px; color:var(--muted)}
.badge{display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); margin-top:4px}

/* ---- フォーム ---- */
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.fld{display:flex; flex-direction:column; gap:4px}
.fld label{font-size:12px; color:var(--muted)}
.fld .opt{font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 4px; margin-left:4px}
input[type=date],input[type=number],input[type=text]{
  background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; font-size:15px; font-family:inherit; width:128px;
}
input[type=file]{font-size:13px; color:var(--muted); max-width:100%}
#i-bmi{background:transparent; color:var(--muted)}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

button,.btn{
  background:var(--accent); color:#fff; border:0; border-radius:8px;
  padding:9px 16px; font-size:14px; font-family:inherit; font-weight:600;
  cursor:pointer; text-decoration:none; display:inline-block;
}
button:hover,.btn:hover{filter:brightness(1.08)}
button:disabled{opacity:.55; cursor:progress; filter:none}
button.ghost,.btn.ghost{background:transparent; color:var(--fg); border:1px solid var(--line); font-weight:500}
button.link{background:none; color:var(--accent); padding:0; font-weight:500; font-size:13px}
button.link.danger{color:var(--danger)}
button.del{background:none; color:var(--danger); padding:2px 6px; font-size:13px; font-weight:500}
.hint{font-size:12px; color:var(--muted); margin:8px 0 0}
.err{color:var(--danger); font-size:13px; margin:8px 0 0; min-height:1px}
.err.ok{color:var(--down)}

/* ---- グラフ ---- */
.chart-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.chart-head h2{margin:0}
.legend{font-size:12px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap}
.legend i{display:inline-block; width:14px; height:2px; vertical-align:middle; margin-right:5px}
.legend i.solid{background:var(--accent)}
.legend i.dash{border-top:2px dashed var(--fat)}
.legend i.bar{height:9px; width:8px; border-radius:1px; background:var(--step-soft)}
svg{width:100%; height:auto; display:block}
svg .hit{fill:transparent}
svg .hit:hover{fill:var(--fg); fill-opacity:.05}
.empty{color:var(--muted); font-size:13px; text-align:center; padding:36px 0; margin:0}

/* ---- テーブル ---- */
.tbl-scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:14px; font-variant-numeric:tabular-nums}
th,td{padding:7px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line)}
th{font-size:12px; color:var(--muted); font-weight:600}
th:first-child,td:first-child{text-align:left}
td:last-child,th:last-child{text-align:center; width:1%}
tbody tr:hover{background:var(--accent-soft)}
.diff{font-size:12px; margin-left:6px}
.diff.down{color:var(--down)} .diff.up{color:var(--up)}
.na{color:var(--muted)}

/* ---- バナー ---- */
.banner{
  background:#fdf3e3; border:1px solid #e8c98c; color:#7a5514;
  border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:16px;
}
@media (prefers-color-scheme: dark){ .banner{background:#2e2617; border-color:#6b551f; color:#e8c98c} }

/* ---- 文書ページ（プライバシーポリシー等） ---- */
.topbar-inner .brand{text-decoration:none; color:inherit}
.link-plain{color:var(--accent); text-decoration:none; font-size:13px}
.link-plain:hover{text-decoration:underline}

.doc{max-width:760px; margin:0 auto; padding:28px 16px 80px}
.doc h1{font-size:24px; margin:0 0 4px; letter-spacing:-.01em}
.doc h2{
  font-size:16px; margin:32px 0 10px; padding-top:16px;
  border-top:1px solid var(--line);
}
.doc h3{font-size:14px; margin:20px 0 6px}
.doc p{margin:10px 0}
.doc ul{margin:10px 0; padding-left:1.3em}
.doc li{margin:4px 0}
.doc a{color:var(--accent)}
.doc code{
  background:var(--accent-soft); color:var(--fg);
  padding:1px 5px; border-radius:4px; font-size:.9em;
}
.doc-meta{color:var(--muted); font-size:12px; margin:0 0 24px}
.doc-note{
  font-size:13px; color:var(--muted);
  border-left:3px solid var(--line); padding:2px 0 2px 12px; margin:12px 0;
}
.doc-footer{margin-top:40px; padding-top:16px; border-top:1px solid var(--line); font-size:13px}

.doc-table{width:100%; border-collapse:collapse; margin:12px 0; font-size:14px}
.doc-table th,.doc-table td{
  border:1px solid var(--line); padding:8px 12px;
  text-align:left; vertical-align:top; white-space:normal;
}
.doc-table th{width:34%; background:var(--accent-soft); font-weight:600; color:var(--fg)}
@media (max-width:520px){
  .doc-table th,.doc-table td{display:block; width:auto}
  .doc-table th{border-bottom:0}
  .doc-table td{border-top:0}
}

/* 公開前に埋める必要がある箇所を目立たせる */
.todo{color:var(--danger); font-weight:600}

.app-footer{text-align:center; font-size:12px; padding:8px 0 0}
.app-footer a{color:var(--muted)}