:root{
  --ai:#2D4A77; --ai-soft:#EAEEF5; --shu:#B5493F; --shu-soft:#F7ECEA;
  --bg:#F6F5F1; --surface:#FFFFFF; --line:#E3E1DA;
  --ink:#20242B; --sub:#575E68; --faint:#8A8F98;
  --ok:#2E7D52; --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.7;
  padding-bottom:76px;
}
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 10px; background:var(--ai); color:#fff;
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:700; font-size:17px; letter-spacing:.04em;}
.brand-sub{font-weight:400; font-size:12px; opacity:.75;}
.due-badge{background:var(--shu); color:#fff; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:999px;}
.banner{margin:10px 14px 0; padding:10px 14px; background:var(--shu-soft);
  border:1px solid var(--shu); border-radius:var(--radius); font-size:13.5px;}
.view{max-width:640px; margin:0 auto; padding:16px 14px 24px;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:14px;}
.card h2{margin:0 0 10px; font-size:16px; color:var(--ai);}
.card h3{margin:14px 0 6px; font-size:14px;}
.muted{color:var(--sub); font-size:13px;}
.small{font-size:12.5px; color:var(--faint);}

.btn{display:inline-block; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); border-radius:8px; padding:9px 16px; font-size:14px;
  cursor:pointer; font-family:inherit;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ai); border-color:var(--ai); color:#fff; font-weight:700;}
.btn-accent{background:var(--shu); border-color:var(--shu); color:#fff; font-weight:700;}
.btn-block{display:block; width:100%; text-align:center;}
.btn[disabled]{opacity:.5; cursor:default;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}

.field{margin-bottom:12px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--sub); margin-bottom:4px;}
.field input,.field select,.field textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--ai); outline-offset:1px;}
.seg{display:flex; gap:6px; flex-wrap:wrap;}
.seg button{flex:1; min-width:44px; padding:8px 4px; border:1px solid var(--line);
  background:#fff; border-radius:8px; font-size:14px; cursor:pointer; font-family:inherit;}
.seg button.on{background:var(--ai); color:#fff; border-color:var(--ai); font-weight:700;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px;}
.stat{background:var(--ai-soft); border-radius:var(--radius); padding:12px 14px;}
.stat .v{font-size:22px; font-weight:700; color:var(--ai); font-variant-numeric:tabular-nums;}
.stat .l{font-size:12px; color:var(--sub);}

.list-item{display:flex; justify-content:space-between; align-items:center;
  padding:10px 2px; border-bottom:1px solid var(--line); gap:10px;}
.list-item:last-child{border-bottom:none;}
.list-main{min-width:0;}
.list-title{font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list-sub{font-size:12px; color:var(--sub);}
.list-num{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ai); white-space:nowrap;}
.icon-btn{border:none; background:none; cursor:pointer; font-size:15px; color:var(--faint); padding:4px;}

canvas.chart{width:100%; height:180px; background:#fff;}

.passage-body{font-size:15.5px; line-height:2.0; padding:4px 2px; white-space:pre-wrap;}
.quiz-opt{display:block; width:100%; text-align:left; margin-bottom:8px;
  padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff;
  cursor:pointer; font-size:14px; font-family:inherit;}
.quiz-opt.sel{border-color:var(--ai); background:var(--ai-soft); font-weight:700;}

.countdown{font-size:44px; font-weight:700; text-align:center; color:var(--ai);
  font-variant-numeric:tabular-nums; margin:8px 0;}
.countdown.expired{color:var(--shu);}

.breath-circle{width:110px; height:110px; border-radius:50%; margin:14px auto;
  background:var(--ai-soft); border:3px solid var(--ai);
  animation:breath 18s ease-in-out infinite;}
/* 6秒吸って(0%→33.33%で膨らむ)・12秒吐く(33.33%→100%で縮む) */
@keyframes breath{0%{transform:scale(.72);} 33.33%{transform:scale(1);} 100%{transform:scale(.72);}}
@media (prefers-reduced-motion: reduce){ .breath-circle{animation:none;} }

.tag{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px;
  border-radius:999px; background:var(--ai-soft); color:var(--ai); margin-left:6px;}
.tag.warn{background:var(--shu-soft); color:var(--shu);}
.tag.ok{background:#E6F2EB; color:var(--ok);}

.tabbar{position:fixed; bottom:0; left:0; right:0; display:flex; z-index:10;
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);}
.tab{flex:1; border:none; background:none; padding:8px 0 7px; cursor:pointer;
  font-size:17px; color:var(--faint); font-family:inherit;}
.tab span{display:block; font-size:10.5px; margin-top:1px;}
.tab.active{color:var(--ai); font-weight:700;}
.tab:focus-visible{outline:2px solid var(--ai); outline-offset:-2px;}

.empty{padding:22px 8px; text-align:center; color:var(--faint); font-size:13.5px;}