:root{
    --bg:#0f1420;--bg2:#161d2e;--card:#1b2438;--card2:#212c45;--line:#2c3852;
    --ink:#e8edf7;--ink-dim:#a4b0c8;--ink-fade:#6c7a96;
    --accent:#46d1a8;--accent2:#5aa9ff;--warn:#ff7a7a;--myth:#ff9b6a;--gold:#ffd24a;--ok:#46d1a8;
    --deep:#0c1220;--pagebg:linear-gradient(180deg,#0f1420,#0c111b 60%);--headbg:rgba(15,20,32,.82);
    --codeink:#cfe2ff;--lawb:#cfe2ff;--okink:#aef0d8;--errink:#ffc2c2;
    --shadow:0 10px 30px rgba(0,0,0,.35);--radius:16px;
  }
  html[data-theme="light"]{
    --bg:#f4f6fb;--bg2:#eef1f7;--card:#ffffff;--card2:#f4f7fd;--line:#d8e0ee;
    --ink:#1d2536;--ink-dim:#46536e;--ink-fade:#7c89a4;
    --accent:#0c9d74;--accent2:#2b7fd9;--warn:#d64545;--myth:#d9702f;--gold:#a97e00;--ok:#0c9d74;
    --deep:#e9eef8;--pagebg:linear-gradient(180deg,#f7f9fd,#eef2f9 60%);--headbg:rgba(247,249,253,.88);
    --codeink:#1d4d8f;--lawb:#1d4d8f;--okink:#0b6b4f;--errink:#b3261e;
    --shadow:0 10px 24px rgba(50,70,110,.10);
  }
  html[data-fs="s"]{font-size:14px}html[data-fs="m"]{font-size:16px}html[data-fs="l"]{font-size:18px}html[data-fs="xl"]{font-size:21px}

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
    background:var(--pagebg);color:var(--ink);line-height:1.85;-webkit-font-smoothing:antialiased;}
  a{color:var(--accent2)}

  /* Header */
  header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:var(--headbg);border-bottom:1px solid var(--line)}
  .bar{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.02rem;letter-spacing:.02em}
  .brand .logo{width:34px;height:34px;border-radius:10px;flex:none;background:linear-gradient(135deg,#46d1a8,#5aa9ff);display:grid;place-items:center;color:#08131b;font-weight:900;font-size:1.1rem}
  .brand small{display:block;font-weight:500;color:var(--ink-fade);font-size:.66rem;letter-spacing:.06em}
  .bar .grow{flex:1}
  .miniprog{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--ink-dim)}
  .minitro{display:flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700;color:var(--gold);white-space:nowrap;cursor:default}
  .miniprog .track{width:100px;height:7px;border-radius:99px;background:var(--deep);overflow:hidden;border:1px solid var(--line)}
  .miniprog .fill{height:100%;width:0;background:linear-gradient(90deg,#46d1a8,#5aa9ff);transition:width .5s}
  .btn{border:1px solid var(--line);background:var(--card);color:var(--ink-dim);padding:7px 12px;border-radius:10px;font-size:.78rem;cursor:pointer;font-weight:600;transition:.15s;white-space:nowrap;font-family:inherit}
  .btn:hover{border-color:var(--accent);color:var(--ink)}
  .fsgrp{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .fsgrp button{background:var(--card);border:none;color:var(--ink-dim);padding:7px 10px;cursor:pointer;font-size:.74rem;font-weight:700;font-family:inherit;border-right:1px solid var(--line);transition:.12s}
  .fsgrp button:last-child{border-right:none}
  .fsgrp button.on{background:var(--accent);color:#07231a}
  .authbox{position:relative;display:flex;align-items:center;gap:8px;min-height:38px}
  .authuser{display:flex;align-items:center;gap:8px;max-width:240px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:5px 7px 5px 10px;color:var(--ink-dim);font-size:.76rem}
  .authname{max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:800}
  .authlogout{border:1px solid var(--line);background:var(--card2);color:var(--ink-dim);border-radius:9px;padding:4px 7px;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:700}
  .authlogout:hover{border-color:var(--accent2);color:var(--ink)}
  .authstatus{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:220;max-width:min(520px,calc(100vw - 24px));background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);font-size:.86rem;color:var(--ink-fade);line-height:1.6;text-align:center}
  #googleSignInBtn{line-height:1}
  #googleSignInBtn span{white-space:nowrap}
  .authbox [hidden]{display:none!important}

  /* Layout */
  .wrap{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:250px 1fr;gap:30px}
  nav.toc{position:sticky;top:74px;align-self:start;height:calc(100vh - 90px);overflow-y:auto;padding:22px 0 40px}
  .chapswitch{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
  .chapswitch button{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink-dim);cursor:pointer;font-weight:700;font-size:.9rem;font-family:inherit;transition:.14s;text-align:left}
  .chapswitch button .ci{font-size:1.15rem}
  .chapswitch button:hover{border-color:var(--accent2);color:var(--ink)}
  .chapswitch button.on{background:linear-gradient(135deg,rgba(70,209,168,.18),rgba(90,169,255,.16));border-color:var(--accent);color:var(--ink)}
  .chapswitch button .cp{margin-left:auto;font-size:.68rem;color:var(--ink-fade);font-weight:700}
  nav.toc h4{font-size:.7rem;letter-spacing:.14em;color:var(--ink-fade);text-transform:uppercase;margin:16px 0 8px}
  nav.toc a{display:flex;align-items:center;gap:9px;padding:6px 12px;border-radius:9px;color:var(--ink-dim);text-decoration:none;font-size:.85rem;border-left:2px solid transparent;transition:.12s}
  nav.toc a:hover{background:var(--card);color:var(--ink)}
  nav.toc a.done{color:var(--ink)}
  nav.toc a .dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none;transition:.2s}
  nav.toc a.done .dot{background:var(--ok);box-shadow:0 0 8px rgba(70,209,168,.6)}
  nav.toc a.active{background:var(--card2);color:var(--ink);border-left-color:var(--accent)}

  main{padding:26px 0 90px;min-width:0}

  @media(min-width:901px){
    nav.toc{
      position:fixed;
      top:148px;
      left:max(20px,calc((100vw - 1180px)/2 + 20px));
      width:250px;
      height:calc(100vh - 166px);
      z-index:30;
      padding-top:0;
    }
    main{grid-column:2}
  }

  /* Hero */
  .hero{background:radial-gradient(1200px 400px at 20% -20%,rgba(90,169,255,.14),transparent),radial-gradient(900px 400px at 90% 0%,rgba(70,209,168,.12),transparent),var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 32px;margin-bottom:24px}
  .hero h1{font-size:1.9rem;margin:0 0 10px;line-height:1.4;letter-spacing:.01em}
  .hero h1 .hl{color:var(--accent)}
  .hero p.lead{font-size:1.02rem;color:var(--ink-dim);margin:0 0 20px;max-width:62ch}
  .login-note{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:8px 12px;border-radius:12px;border:1px solid rgba(70,209,168,.35);background:rgba(70,209,168,.08);color:var(--ink-dim);font-size:.92rem;font-weight:700}
  .law{display:flex;gap:14px;align-items:flex-start;background:rgba(90,169,255,.08);border:1px solid rgba(90,169,255,.3);border-radius:14px;padding:16px 18px}
  .law .k{font-size:1.7rem;line-height:1}
  .law b{color:var(--lawb)}
  .law div:last-child{color:var(--ink-dim)}

  /* Chapter tabs (main) */
  .chaptabs{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;scroll-margin-top:78px}
  .chaptabs button{flex:1;min-width:150px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink-dim);cursor:pointer;font-family:inherit;transition:.15s;text-align:left}
  .chaptabs button:hover{border-color:var(--accent2)}
  .chaptabs button.on{border-color:var(--accent);background:linear-gradient(135deg,rgba(70,209,168,.16),rgba(90,169,255,.13))}
  .chaptabs .th{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1rem;color:var(--ink)}
  .chaptabs .td{font-size:.76rem;color:var(--ink-fade);margin-top:3px}

  .chaphead{margin:0 0 6px;font-size:1.35rem;scroll-margin-top:82px}
  .chapdesc{color:var(--ink-fade);font-size:.9rem;margin-bottom:18px}

  /* Sections */
  section.topic{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;margin-bottom:22px;box-shadow:var(--shadow);scroll-margin-top:96px}
  .lvl{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:99px;margin-bottom:12px}
  .lvl.b{background:rgba(70,209,168,.14);color:#7fe6c4;border:1px solid rgba(70,209,168,.35)}
  .lvl.i{background:rgba(90,169,255,.14);color:#9cc7ff;border:1px solid rgba(90,169,255,.35)}
  .lvl.a{background:rgba(255,210,74,.13);color:#ffde7f;border:1px solid rgba(255,210,74,.35)}
  html[data-theme="light"] .lvl.b{color:#0b6b4f}html[data-theme="light"] .lvl.i{color:#1d5fae}html[data-theme="light"] .lvl.a{color:#8a6a00}
  section.topic h2{font-size:1.42rem;margin:.1em 0 .5em}
  section.topic h3{font-size:1.1rem;margin:1.6em 0 .5em;color:var(--ink)}
  section.topic p{color:var(--ink-dim);margin:.7em 0}
  section.topic strong{color:var(--ink)}
  section.topic ul{color:var(--ink-dim);padding-left:1.25em}
  section.topic li{margin:.4em 0}

  .myth{border:1px solid rgba(255,155,106,.4);background:rgba(255,155,106,.08);border-radius:14px;padding:16px 18px;margin:18px 0;color:var(--ink-dim)}
  .myth .tag{color:var(--myth);font-weight:800;font-size:.8rem;letter-spacing:.06em;display:flex;align-items:center;gap:7px;margin-bottom:6px}
  .truth{border:1px solid rgba(70,209,168,.4);background:rgba(70,209,168,.08);border-radius:14px;padding:16px 18px;margin:18px 0;color:var(--ink-dim)}
  .truth .tag{color:var(--ok);font-weight:800;font-size:.8rem;letter-spacing:.06em;display:flex;align-items:center;gap:7px;margin-bottom:6px}
  .warnbox{border:1px solid rgba(255,122,122,.45);background:rgba(255,122,122,.09);border-radius:14px;padding:16px 18px;margin:18px 0;color:var(--ink-dim)}
  .warnbox .tag{color:var(--warn);font-weight:800;font-size:.8rem;letter-spacing:.06em;display:flex;align-items:center;gap:7px;margin-bottom:6px}
  .note{border-left:3px solid var(--accent2);padding:4px 0 4px 16px;margin:16px 0;color:var(--ink-dim);font-size:.94rem}

  table.data{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
  table.data th,table.data td{border:1px solid var(--line);padding:9px 12px;text-align:left}
  table.data th{background:var(--card2);color:var(--ink);font-weight:700}
  table.data td{color:var(--ink-dim)}

  .keybox{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:16px 0;color:var(--ink-dim)}
  .keybox .lbl{font-size:.72rem;letter-spacing:.1em;color:var(--ink-fade);text-transform:uppercase;margin-bottom:4px}
  .formula{font-family:"SFMono-Regular",Consolas,monospace;color:var(--codeink);font-size:.92rem;background:var(--deep);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:8px 0;overflow-x:auto}

  /* Visuals */
  .viz{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:18px 0}
  .viz .vt{font-weight:800;font-size:.92rem;margin-bottom:12px;color:var(--ink)}
  .viz .vcap{font-size:.84rem;color:var(--ink-dim);margin-top:12px}
  .hbar{display:flex;align-items:center;gap:10px;margin:7px 0}
  .hbar .hl{width:170px;flex:none;font-size:.8rem;color:var(--ink-dim);text-align:right;line-height:1.4}
  .hbar .track{flex:1;height:22px;background:var(--deep);border-radius:6px;overflow:hidden}
  .hbar .bfill{height:100%;display:flex;align-items:center;justify-content:flex-end;padding:0 8px;font-size:.7rem;font-weight:800;color:#07231a;border-radius:6px;white-space:nowrap}
  .bfill.g{background:#46d1a8}.bfill.bl{background:#5aa9ff}.bfill.o{background:#ffb36a}.bfill.y{background:#ffd24a}.bfill.r{background:#ff8a8a}
  .stack{display:flex;height:32px;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin:8px 0}
  .stack div{display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#07231a;white-space:nowrap;overflow:hidden}
  .stacklbl{font-size:.8rem;color:var(--ink-dim);margin-top:10px;margin-bottom:2px;font-weight:700}
  .bal3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .balcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
  .mini{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:.74rem;color:var(--ink-dim)}
  .mini span{width:46px;flex:none;text-align:right}
  .mtrack{flex:1;height:12px;background:var(--deep);border-radius:5px;overflow:hidden}
  .mfill{height:100%;border-radius:5px}
  .mfill.in{background:#5aa9ff}.mfill.out{background:#46d1a8}
  .bres{font-size:.78rem;font-weight:700;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
  .bres.plus{color:var(--myth)}.bres.zero{color:var(--ink-dim)}.bres.minus{color:var(--ok)}
  .days{display:flex;gap:4px;flex-wrap:wrap}
  .days span{flex:1;min-width:17px;height:27px;border-radius:5px;background:linear-gradient(135deg,#46d1a8,#5aa9ff);display:grid;place-items:center;font-size:.6rem;font-weight:700;color:#07231a}
  .bignums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .bn{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
  .bn .k{font-size:.74rem;color:var(--ink-fade)}
  .bn .v{font-size:1.2rem;font-weight:800;color:var(--accent);margin:2px 0}
  .bn .s{font-size:.72rem;color:var(--ink-dim)}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
  .chip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 13px;font-size:.8rem;color:var(--ink-dim)}
  .chip b{color:var(--accent)}

  /* Quiz */
  .quiz{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:20px 0 4px}
  .quiz .qh{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.82rem;letter-spacing:.06em;color:var(--accent2);margin-bottom:14px}
  .q{margin:14px 0;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .q:last-of-type{border-bottom:none}
  .q .qtext{font-weight:600;color:var(--ink);margin-bottom:9px}
  .q .opts{display:flex;gap:10px;flex-wrap:wrap}
  .q .opts button{padding:8px 18px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink-dim);cursor:pointer;font-size:.9rem;font-weight:700;font-family:inherit;transition:.12s;text-align:left}
  .q .opts button:hover{border-color:var(--accent2)}
  .q .opts button.sel-correct{background:rgba(70,209,168,.22);border-color:var(--ok);color:var(--okink)}
  .q .opts button.sel-wrong{background:rgba(255,122,122,.18);border-color:var(--warn);color:var(--errink)}
  .q .expl{margin-top:10px;font-size:.88rem;color:var(--ink-dim);background:var(--deep);border-radius:9px;padding:11px 13px;display:none;border-left:3px solid var(--ink-fade)}
  .q .expl.show{display:block}
  .q .expl.ex-ok{border-left-color:var(--ok)}
  .q .expl.ex-ng{border-left-color:var(--warn)}
  .q .expl b{color:var(--ink)}

  /* Read bar */
  .readbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
  .readbar .stat{font-size:.82rem;color:var(--ink-fade)}
  .readbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:11px;cursor:pointer;border:1px solid var(--line);background:var(--card2);color:var(--ink-dim);font-weight:700;font-size:.9rem;font-family:inherit;transition:.15s}
  .readbtn:hover{border-color:var(--ok)}
  .readbtn.done{background:rgba(70,209,168,.16);border-color:var(--ok);color:var(--okink)}

  /* Dashboard */
  .dash{background:radial-gradient(700px 300px at 100% 0%,rgba(255,210,74,.09),transparent),var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 28px;margin-bottom:24px}
  .dash h2{margin:0 0 4px;font-size:1.3rem}
  .dash .sub{color:var(--ink-fade);font-size:.85rem;margin-bottom:20px}
  .ring-wrap{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap}
  .ringbox{width:132px;display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
  .ring{--p:0;width:124px;height:124px;border-radius:50%;flex:none;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--deep) 0);display:grid;place-items:center;position:relative}
  .ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--card);z-index:0}
  .ring .pct{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.55rem;font-weight:850;line-height:1}
  .ringlabel{font-size:.84rem;color:var(--ink-fade);font-weight:700;line-height:1.35;text-align:center}
  .chapstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;flex:1;min-width:260px}
  .cstat{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:15px 16px}
  .cstat .ch{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;color:var(--ink)}
  .cstat .cs{font-size:.74rem;color:var(--ink-dim);margin:8px 0 6px}
  .cstat .track{height:8px;border-radius:99px;background:var(--deep);overflow:hidden}
  .cstat .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#46d1a8,#5aa9ff);width:0;transition:width .5s}
  .cstat .cn{font-size:.7rem;color:var(--ink-fade);margin-top:6px}
  .trophies{margin-top:22px}
  .trophies h3{font-size:.95rem;margin:0 0 12px;color:var(--ink)}
  .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .trophy{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;opacity:.45;filter:grayscale(1);transition:.3s;position:relative}
  .trophy.unlocked{opacity:1;filter:none;border-color:rgba(255,210,74,.5);background:radial-gradient(120px 80px at 50% 0%,rgba(255,210,74,.14),var(--bg2))}
  .trophy .ic{font-size:2rem;line-height:1}
  .trophy .tn{font-size:.82rem;font-weight:700;margin-top:6px;color:var(--ink)}
  .trophy .td{font-size:.7rem;color:var(--ink-fade);margin-top:3px}
  .trophy.unlocked::after{content:"獲得";position:absolute;top:8px;right:8px;font-size:.6rem;font-weight:800;color:var(--gold);letter-spacing:.05em}

  footer.site{border-top:1px solid var(--line);padding:26px 20px;text-align:center;color:var(--ink-fade);font-size:.8rem}
  footer.site .footer-inner{max-width:860px;margin:0 auto;text-align:center}
  footer.site .disc{max-width:78ch;margin:0 auto 14px;line-height:1.7;text-align:center}
  footer.site .policies{max-width:78ch;margin:12px auto 0;text-align:left}
  footer.site details{border-top:1px solid var(--line);padding-top:10px}
  footer.site summary{cursor:pointer;color:var(--ink-dim);font-weight:800;list-style:none;text-align:center}
  footer.site summary::-webkit-details-marker{display:none}
  footer.site .policy-body{margin-top:10px;color:var(--ink-dim);line-height:1.85}
  footer.site .policy-body h4{margin:14px 0 4px;color:var(--ink);font-size:.9rem}
  footer.site .policy-body p{margin:0 0 8px}
  footer.site .policy-body ul{margin:0 0 10px;padding-left:1.2em}
  footer.site .policy-body li{margin:3px 0}
  footer.site .updated{margin-top:14px;font-size:.76rem;color:var(--ink-fade);text-align:center}
  @media(min-width:901px){
    footer.site .footer-inner{
      max-width:none;
      margin-left:max(300px,calc((100vw - 1180px)/2 + 300px));
      margin-right:max(20px,calc((100vw - 1180px)/2 + 20px));
    }
  }

  #toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(140%);background:var(--card2);border:1px solid var(--gold);border-radius:14px;padding:14px 22px;display:flex;align-items:center;gap:12px;z-index:100;box-shadow:0 12px 40px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.2,.9,.3,1.3);max-width:90vw}
  #toast.show{transform:translateX(-50%) translateY(0)}
  #toast .ic{font-size:1.8rem}
  #toast .tt{font-weight:800;color:var(--gold);font-size:.9rem}
  #toast .ts{font-size:.8rem;color:var(--ink-dim)}
  .preset-conflict{width:min(620px,calc(100vw - 28px));max-height:min(720px,calc(100vh - 28px));padding:0;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
  .preset-conflict::backdrop{background:rgba(8,14,24,.58);backdrop-filter:blur(3px)}
  .preset-conflict-head{padding:18px 20px 12px;border-bottom:1px solid var(--line)}
  .preset-conflict-head h2{margin:0 0 6px;font-size:1.15rem}
  .preset-conflict-head p{margin:0;color:var(--ink-dim);font-size:.86rem;line-height:1.65}
  .preset-conflict-list{padding:12px 20px;display:grid;gap:7px;max-height:48vh;overflow:auto}
  .preset-choice{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card2);cursor:pointer}
  .preset-choice input{width:18px;height:18px;flex:none;accent-color:var(--accent)}
  .preset-choice-name{min-width:0;flex:1;font-weight:800;overflow-wrap:anywhere}
  .preset-choice-source{flex:none;color:var(--ink-fade);font-size:.74rem}
  .preset-conflict-actions{padding:12px 20px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .preset-conflict-count{margin-right:auto;color:var(--ink-dim);font-size:.84rem;font-weight:700}
  .preset-conflict-count.warn{color:var(--warn)}
  /* スマホ用 下部固定ナビ（既定は非表示。≤600pxで表示） */
  #mobileNav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:stretch;gap:8px;
    padding:8px calc(env(safe-area-inset-right,0px) + 10px) calc(env(safe-area-inset-bottom,0px) + 8px) calc(env(safe-area-inset-left,0px) + 10px);
    background:var(--headbg);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  #mobileNav button{min-height:46px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
    font-family:inherit;font-weight:800;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.92rem;white-space:nowrap}
  #mobileNav button:disabled{opacity:.38;cursor:default}
  #mnPrev,#mnNext{flex:0 0 27%;color:var(--ink-dim)}
  #mnDash{flex:1 1 auto;min-width:0;border-color:var(--gold);background:linear-gradient(135deg,rgba(255,210,74,.16),rgba(90,169,255,.12));font-size:.88rem}
  #mobileNav .ar{font-size:.8rem;opacity:.8}
  #mobileNav.hidden{display:none!important}
  #mobileNav.quizmode #mnPrev,#mobileNav.quizmode #mnNext{display:none}

  @media(max-width:900px){
    .wrap{grid-template-columns:1fr}
    nav.toc{display:none}
    .hero h1{font-size:1.5rem}
    .bal3,.bignums{grid-template-columns:1fr}
    .hbar .hl{width:120px}
  }

  /* ===== ダッシュボードボタン（左サイド＝章一覧の先頭） ===== */
  .chapswitch .dashnav{background:linear-gradient(135deg,rgba(255,210,74,.16),rgba(90,169,255,.12));border-color:rgba(255,210,74,.45);color:var(--ink);margin-bottom:4px}
  .chapswitch .dashnav:hover{border-color:var(--gold)}
  /* モバイルではサイドが隠れるので、上部タブの先頭にダッシュボードを出す */
  .chaptabs .dashtab{display:none;flex:1 1 100%;background:linear-gradient(135deg,rgba(255,210,74,.16),rgba(90,169,255,.12));border-color:rgba(255,210,74,.45)}
  @media(max-width:900px){.chaptabs .dashtab{display:block}}
  .dashback-btn,.dash-reset-btn{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;padding:13px 28px}
  #dashBack{cursor:pointer;margin-bottom:18px}
  .dash-actions{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:22px}
  .dash-actions .dashback-btn{justify-self:start}
  .dash-actions .dash-reset-btn{justify-self:center;grid-column:2}

  /* ===== 種目カード（実践メニュー） ===== */
  .exwrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
  @media(max-width:700px){.exwrap{grid-template-columns:1fr}}
  .excard{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
  .excard .en{font-weight:800;color:var(--ink);font-size:1rem;display:flex;align-items:center;gap:8px;margin-bottom:5px}
  .excard .en .num{width:23px;height:23px;border-radius:50%;background:var(--accent);color:#07231a;display:grid;place-items:center;font-size:.8rem;font-weight:800;flex:none}
  .excard .et{font-size:.76rem;color:var(--accent2);font-weight:700;margin-bottom:6px}
  .excard p{margin:.35em 0;font-size:.92rem;color:var(--ink-dim)}
  .excard .setinfo{font-size:.8rem;color:var(--ink-fade);margin-top:7px;border-top:1px dashed var(--line);padding-top:7px}
  .excard.opt{border-style:dashed}
  .excard.opt .num{background:var(--accent2)}

  /* ===== はしご（有酸素の段階） ===== */
  .ladder{display:flex;flex-direction:column;gap:6px;margin:14px 0}
  .ladder .rung{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 13px}
  .ladder .rung .lv{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:.82rem;color:#07231a}
  .ladder .rung .lt{font-size:.9rem;color:var(--ink-dim)}
  .ladder .rung .lt b{color:var(--ink)}

  /* ===== クイズの章 ===== */
  .quizhome{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
  @media(max-width:700px){.quizhome{grid-template-columns:1fr}}
  .qmode{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:20px}
  .qmode h3{margin:0 0 6px;font-size:1.08rem}
  .qmode p{margin:0 0 12px;color:var(--ink-dim);font-size:.88rem}
  .qbtn{padding:10px 18px;border-radius:11px;border:1px solid var(--accent);background:rgba(70,209,168,.14);color:var(--ink);cursor:pointer;font-family:inherit;font-weight:800;font-size:.92rem}
  .qbtn:hover{background:rgba(70,209,168,.24)}
  .qchapsel{display:flex;flex-wrap:wrap;gap:8px}
  .qchapsel button{padding:8px 13px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink-dim);cursor:pointer;font-family:inherit;font-weight:700;font-size:.85rem}
  .qchapsel button:hover{border-color:var(--accent2);color:var(--ink)}
  .qrunner{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:14px 0}
  .qprog{display:flex;justify-content:space-between;align-items:center;font-size:.84rem;color:var(--ink-fade);margin-bottom:8px}
  .qprogbar{height:7px;border-radius:99px;background:var(--deep);overflow:hidden;margin-bottom:16px}
  .qprogbar .f{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}
  .qrunner .qtext{font-weight:700;color:var(--ink);font-size:1.05rem;margin-bottom:14px}
  .qrunner .opts{display:flex;flex-direction:column;gap:9px}
  .qrunner .opts button{text-align:left;padding:12px 15px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink-dim);cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:600;transition:.12s}
  .qrunner .opts button:hover{border-color:var(--accent2)}
  .qrunner .opts button.ok{background:rgba(70,209,168,.22);border-color:var(--ok);color:var(--okink)}
  .qrunner .opts button.ng{background:rgba(255,122,122,.18);border-color:var(--warn);color:var(--errink)}
  .qrunner .qexpl{margin-top:14px;font-size:.9rem;color:var(--ink-dim);background:var(--deep);border-radius:10px;padding:12px 14px;border-left:3px solid var(--accent)}
  .qrunner .qnext{margin-top:14px;text-align:right}
  .qscore{text-align:center;padding:16px 10px}
  .qscore .big{font-size:2.8rem;font-weight:800;color:var(--accent);line-height:1}
  .qscore .sub2{color:var(--ink-dim);margin:8px 0 4px}
  .qscore .msg{font-weight:700;margin:10px 0 16px;color:var(--ink)}

  /* ===== 視認性ブースト（小さいфォントの底上げ） ===== */
  .brand small{font-size:.72rem}
  .btn{font-size:.83rem}
  .fsgrp button{font-size:.78rem}
  .miniprog{font-size:.82rem}
  .chapswitch button .cp{font-size:.74rem}
  nav.toc h4{font-size:.74rem}
  nav.toc a{font-size:.9rem}
  .chaptabs .td{font-size:.82rem}
  .lvl{font-size:.73rem}
  .myth .tag,.truth .tag,.warnbox .tag{font-size:.85rem}
  table.data{font-size:.93rem}
  .keybox .lbl{font-size:.76rem}
  .viz .vt{font-size:.96rem}
  .viz .vcap{font-size:.89rem}
  .hbar .hl{font-size:.85rem}
  .hbar .bfill{font-size:.76rem}
  .stack div{font-size:.78rem}
  .stacklbl{font-size:.85rem}
  .mini{font-size:.79rem}
  .bres{font-size:.83rem}
  .days span{font-size:.66rem}
  .bn .k{font-size:.79rem}
  .bn .s{font-size:.78rem}
  .chip{font-size:.85rem}
  .quiz .qh{font-size:.86rem}
  .q .expl{font-size:.91rem}
  .readbar .stat{font-size:.86rem}
  .dash .sub{font-size:.89rem}
  .cstat .cs{font-size:.8rem}
  .cstat .cn{font-size:.76rem}
  .trophy .tn{font-size:.86rem}
  .trophy .td{font-size:.76rem}
  footer.site{font-size:.84rem}
  #toast .ts{font-size:.84rem}

  /* ===== Readability pass ===== */
  .chapdesc{font-size:.96rem}
  section.topic p,section.topic li{font-size:1rem}
  .note,.myth,.truth,.warnbox,.keybox{font-size:.98rem}
  .quiz .qh{font-size:.92rem}
  .q .qtext{font-size:1rem}
  .q .expl{font-size:.96rem}
  .readbar .stat{font-size:.92rem}
  .cstat .cs{font-size:.87rem}
  .cstat .cn{font-size:.82rem}
  .trophy .td{font-size:.82rem}
  .card h2{font-size:1.08rem}
  label,.hint,.hr-note,.meta,#calcMode .calcfoot,.accordion summary{font-size:.92rem}
  .modeLabel,.other .item,.metric-card .mk,.metric-card .mu{font-size:.88rem}
  .exday-label,.restday{font-size:.91rem}

  /* ===== モード切替と計算モード ===== */
  .modebar{max-width:1180px;margin:0 auto;padding:0 20px 12px;display:flex;gap:10px}
  .modebar button{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink-dim);cursor:pointer;font-family:inherit;font-weight:800;font-size:.98rem;transition:.15s}
  .modebar button small{font-weight:500;color:var(--ink-fade);font-size:.74rem}
  .modebar button:hover{border-color:var(--accent2)}
  .modebar button.on{border-color:var(--accent);background:linear-gradient(135deg,rgba(70,209,168,.16),rgba(90,169,255,.13));color:var(--ink)}
  #calcMode{
    --text:var(--ink);--sub:var(--ink-dim);
    --result-bg:rgba(70,209,168,.07);--result-border:rgba(70,209,168,.35);
    --result2-bg:rgba(90,169,255,.07);--result2-border:rgba(90,169,255,.35);
    --badge-hr-bg:rgba(90,169,255,.15);--badge-hr-text:#9cc7ff;--badge-hr-border:rgba(90,169,255,.4);
    --badge-mets-bg:rgba(70,209,168,.15);--badge-mets-text:#7fe6c4;--badge-mets-border:rgba(70,209,168,.4);
    --pf-p:#5aa9ff;--pf-f:#ffd24a;--pf-c:#46d1a8;
  }
  html[data-theme="light"] #calcMode{--badge-hr-text:#1d5fae;--badge-mets-text:#0b6b4f}
  #calcMode .card{scroll-margin-top:150px}

.iconbtn{
    background:var(--card); border:1px solid var(--line); color:var(--text); cursor:pointer;
    border-radius:10px; padding:9px 12px; font-size:.9rem; font-weight:600; box-shadow:var(--shadow);
  }
  .iconbtn:hover{border-color:var(--accent2)}
  .iconbtn.danger:hover{border-color:#f87171; color:#f87171}
  .saverow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .saverow input[type=text]{flex:1 1 180px; min-width:140px; background:var(--card2); border:1px solid var(--line);
    color:var(--text); border-radius:10px; padding:11px 12px; font-size:1rem; outline:none}
  .saverow input[type=text]:focus{border-color:var(--accent2)}
  .saverow input[type=text]::placeholder{color:var(--sub); opacity:.7}
  .saverow select{flex:1 1 180px}
  .saverow .iconbtn{flex:0 0 auto}
  .grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  @media(max-width:680px){.grid{grid-template-columns:1fr}}
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:18px 18px 20px; box-shadow:var(--shadow);
  }
  .full{grid-column:1 / -1}
  .card h2{font-size:1rem; margin:0 0 14px; color:var(--accent2); display:flex; align-items:center; gap:8px}
  .card h2 .n{
    width:22px;height:22px;border-radius:50%;background:var(--card2);border:1px solid var(--line);
    display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;color:var(--sub)
  }
  label{display:block; font-size:.88rem; color:var(--sub); margin:0 0 5px}
  .field{margin-bottom:14px}
  input[type=number],select{
    width:100%; background:var(--card2); border:1px solid var(--line); color:var(--text);
    border-radius:10px; padding:11px 12px; font-size:1rem; outline:none;
  }
  input[type=number]:focus,select:focus{border-color:var(--accent2)}
  input::placeholder{color:var(--sub); opacity:.7}
  .row{display:flex; gap:10px}
  .row>div{flex:1}
  .seg{display:flex; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:3px; gap:3px; flex-wrap:wrap}
  .seg button{
    flex:1; background:transparent; border:none; color:var(--sub); padding:9px 6px;
    border-radius:8px; cursor:pointer; font-size:.9rem; font-weight:600; transition:.15s; white-space:nowrap;
  }
  .seg button.on{background:var(--accent); color:#0c1a10}
  .seg.blue button.on{background:var(--accent2); color:#06222e}
  .seg.sm button{padding:7px 10px; font-size:.86rem; flex:0 0 auto}
  /* exercise rows */
  .exrow{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:10px}
  .exrow-main{display:flex; gap:8px; align-items:center}
  .exrow-main select{flex:1 1 auto; font-weight:600}
  .ex-minwrap{display:flex; align-items:center; gap:4px; flex:0 0 auto}
  .ex-min{width:64px; text-align:right}
  .ex-unit{font-size:.88rem; color:var(--sub)}
  .ex-del{flex:0 0 auto; background:transparent; border:1px solid var(--line); color:var(--sub); border-radius:8px;
    width:34px; height:38px; cursor:pointer; font-size:.9rem}
  .ex-del:hover{border-color:#f87171; color:#f87171}
  .ex-custom{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; padding-top:11px; border-top:1px dashed var(--line)}
  .ex-custom .ex-field{display:flex; flex-direction:column; gap:4px}
  .ex-custom .ex-field label{margin:0; font-size:.84rem; color:var(--accent2); font-weight:700}
  .ex-custom .ex-field input{width:104px; padding:9px 10px; font-weight:600}
  .addbtn{width:100%; background:var(--card2); border:1px dashed var(--line); color:var(--accent2);
    border-radius:10px; padding:11px; cursor:pointer; font-size:.9rem; font-weight:700}
  .addbtn:hover{border-color:var(--accent2)}
  .dow-tabs{display:flex; gap:5px; margin-bottom:12px}
  .dow-tabs button{flex:1; padding:9px 2px; border-radius:8px; border:1px solid var(--line);
    background:var(--card2); color:var(--sub); font-size:.86rem; font-weight:700; cursor:pointer; position:relative}
  .dow-tabs button.on{background:var(--accent2); color:#06222e; border-color:var(--accent2)}
  .dow-tabs button .dot{position:absolute; top:5px; right:7px; width:6px; height:6px; border-radius:50%; background:var(--accent)}
  .dow-tabs button.on .dot{background:#06222e}
  .exday-label{font-size:.84rem; color:var(--accent2); margin-bottom:8px; font-weight:700}
  .restday{font-size:.86rem; color:var(--sub); padding:12px 2px; text-align:center; border:1px dashed var(--line); border-radius:10px; margin-bottom:10px}
  .hint{font-size:.82rem; color:var(--sub); margin-top:6px; line-height:1.6}
  .hr-note{font-size:.82rem; color:var(--warn); margin-top:6px; line-height:1.6}
  .calc-safety{display:none;margin-top:12px;padding:12px 14px;border:1px solid rgba(214,69,69,.45);border-radius:10px;background:rgba(214,69,69,.07);color:var(--warn);font-weight:700}
  .calc-safety.show{display:block}
  .kcalg{font-size:.86rem; color:var(--accent2); margin-left:6px; font-weight:600}
  .hidden{display:none}
  .dim{opacity:.4; pointer-events:none; transition:opacity .2s}
  /* result */
  .result{background:var(--result-bg); border:1px solid var(--result-border)}
  .result2{background:var(--result2-bg); border:1px solid var(--result2-border)}
  .result h2{color:var(--accent)} .result2 h2{color:var(--accent2)}
  .big{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:6px 0 4px}
  .kcal{font-size:3rem; font-weight:800; line-height:1; color:var(--accent)}
  .kcal2{color:var(--accent2)}
  .kcal small{font-size:1.05rem; font-weight:600; color:var(--sub); margin-left:6px}
  .modeLabel{font-size:.86rem; color:var(--sub); padding-bottom:8px}
  .other{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); display:flex; gap:22px; flex-wrap:wrap}
  .other.nb{border-top:none; padding-top:2px}
  .other.lead{border-top:none; padding-top:2px; gap:28px}
  .other.lead .item b{font-size:1.9rem; color:var(--accent)}
  .other .item{font-size:.82rem; color:var(--sub)}
  .other .item.pfc-macro{font-size:.94rem; font-weight:700}
  .other .item b{display:block; color:var(--text); font-size:1.3rem; margin-top:2px; font-weight:700}
  .metric-grid{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:12px;margin:12px 0 6px}
  .metric-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 12px;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.08)}
  .metric-card .mk{font-size:.82rem;color:var(--sub);font-weight:700}
  .metric-card .mv{display:block;margin-top:5px;font-size:1.85rem;line-height:1.05;font-weight:850;color:var(--text)}
  .metric-card .mu{display:block;margin-top:5px;font-size:.76rem;color:var(--sub);font-weight:600}
  .result .metric-card .mv{color:var(--ink)}
  html[data-theme="light"] .result .metric-card{background:#fff}
  .meta{margin-top:14px; font-size:.84rem; color:var(--sub); line-height:1.7}
  .meta .tag{display:inline-block; background:var(--card2); border:1px solid var(--line); border-radius:6px; padding:2px 8px; margin:0 4px 4px 0; color:var(--text)}
  .meta b.pos{color:var(--accent)} .meta b.neg{color:#f87171}
  .badge{font-size:.86rem; padding:3px 9px; border-radius:20px; font-weight:700; margin-left:auto}
  .badge.hr{background:var(--badge-hr-bg); color:var(--badge-hr-text); border:1px solid var(--badge-hr-border)}
  .badge.mets{background:var(--badge-mets-bg); color:var(--badge-mets-text); border:1px solid var(--badge-mets-border)}
  /* PFC bar */
  .pfcbar{display:flex; height:24px; border-radius:8px; overflow:hidden; margin:10px 0 14px; border:1px solid var(--line); background:var(--card2)}
  .pfcbar span{display:flex; align-items:center; justify-content:center; font-size:.86rem; font-weight:700; color:#08130b; min-width:0; overflow:hidden}
  .seg-p{background:var(--pf-p)} .seg-f{background:var(--pf-f)} .seg-c{background:var(--pf-c)}
  #calcMode .calcfoot{margin-top:26px; color:var(--sub); font-size:.82rem; line-height:1.7}
  #calcMode .calcfoot code{background:var(--card2); padding:1px 6px; border-radius:5px}
  .accordion{margin-top:8px}
  .accordion summary{cursor:pointer; font-size:.86rem; color:var(--accent2); user-select:none}

  /* ===== Mobile layout guard (working copy) ===== */
  @media(max-width:600px){
    html,body{max-width:100%;overflow-x:hidden}
    .wrap,.hero,section.topic,.law,.viz,.card,.dash,#learnMode,#calcMode{min-width:0;max-width:100%}
    .bar{padding:10px 12px;gap:8px}
    .bar .grow{display:none}
    .brand{order:1;flex:1 1 100%;min-width:0}
    .brand small{font-size:.68rem}
    .miniprog{order:2;flex:1 1 170px;min-width:0;gap:7px}
    .miniprog .track{width:clamp(56px,24vw,96px)}
    .authbox{order:6;width:auto;flex:1 1 calc(100% - 154px);max-width:calc(100% - 154px);min-width:0;justify-content:flex-start;min-height:34px}
    .authuser{width:100%;max-width:100%;min-width:0;justify-content:space-between;font-size:.74rem}
    .authname{flex:1;min-width:0;max-width:none}
    .authlogout{flex:none}
    .authstatus{left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));transform:none;max-width:none;font-size:.82rem}
    .minitro{order:3;font-size:.78rem}
    .btn{padding:7px 10px}
    #themeBtn{order:4}
    body.auth-signed-in .authbox{width:auto;flex:1 1 calc(100% - 154px)}
    .fsgrp{order:6;flex:0 0 auto;margin-left:0}
    .fsgrp button{padding:7px 9px}

    .modebar{padding:0 12px 10px;gap:8px}
    .modebar button{min-width:0;flex-direction:column;gap:2px;padding:10px 8px;font-size:.9rem;line-height:1.25;white-space:normal}
    .modebar button small{display:none}

    .wrap{padding:0 12px}
    main{padding-top:18px}
    .hero{padding:24px 18px;border-radius:18px;margin-bottom:18px}
    .hero h1{font-size:1.38rem;line-height:1.55;overflow-wrap:anywhere;word-break:break-all}
    .hero p.lead{font-size:.95rem}
    .login-note{font-size:.86rem;line-height:1.55}
    .law{flex-direction:column;gap:8px;padding:14px}
    section.topic{padding:22px 16px;border-radius:14px}
    section.topic h2{font-size:1.24rem;line-height:1.55;overflow-wrap:anywhere;word-break:break-all}
    .dash{padding:22px 16px;border-radius:16px}
    #dashBack{display:flex;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
    .dash-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
    .dashback-btn,.dash-reset-btn{width:min(240px,100%);font-size:1rem;padding:13px 28px;justify-content:center}
    .ring-wrap{align-items:flex-start}
    .chapstats{min-width:0;grid-template-columns:1fr}
    .tgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}

    .chaptabs{gap:8px}
    .chaptabs button{min-width:min(150px,calc(50% - 4px));padding:12px 10px}
    .chaptabs .th{font-size:.92rem;line-height:1.35}
    .chaptabs .td{font-size:.74rem}

    table.data{display:block;max-width:100%;overflow-x:auto;white-space:nowrap}
    .formula{max-width:100%}
    .viz{padding:15px 14px}
    .hbar{display:grid;grid-template-columns:minmax(82px,34%) 1fr;align-items:center;gap:8px}
    .hbar .hl{width:auto;text-align:left;overflow-wrap:anywhere}
    .hbar .bfill{font-size:.68rem;padding:0 5px}
    .stack{height:auto;min-height:32px}
    .stack div{font-size:.68rem;padding:4px 2px;line-height:1.25}
    .bal3,.bignums{grid-template-columns:1fr !important}
    .q .opts button{flex:1 1 100%}
    .qprog{align-items:flex-start;gap:8px;flex-direction:column}
    .qrunner{padding:18px 15px}
    .readbar{align-items:stretch}
    .readbtn{width:100%;justify-content:center}

    .saverow{align-items:stretch}
    .saverow input[type=text],.saverow select{flex:1 1 100%;min-width:0}
    .saverow .iconbtn{flex:1 1 auto}
    .card{padding:16px 14px}
    .card h2{align-items:flex-start;gap:7px;line-height:1.4}
    .row{flex-direction:column;gap:0}
    .seg button{font-size:.84rem}
    .seg.sm{overflow-x:auto;flex-wrap:nowrap}
    .seg.sm button{flex:0 0 auto}
    .exrow-main{flex-wrap:wrap}
    .exrow-main select{flex:1 1 100%}
    .ex-minwrap{flex:1 1 auto}
    .ex-min{width:76px}
    .ex-del{margin-left:auto}
    .dow-tabs{gap:3px;overflow-x:visible}
    .dow-tabs button{min-width:0}
    .field>label{max-width:100%;padding-right:4px;overflow-wrap:anywhere;word-break:break-all}
    .big{align-items:flex-start;gap:8px}
    .kcal{font-size:2.25rem}
    .kcal small{display:block;margin-left:0;margin-top:4px}
    .badge{margin-left:0}
    .other{gap:12px}
    .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .metric-card{padding:13px 10px;border-radius:12px}
    .metric-card .mv{font-size:1.55rem}
    .pfcbar span{font-size:.72rem}
    #toast{left:12px;right:12px;bottom:calc(64px + env(safe-area-inset-bottom,0px));max-width:none;transform:translateY(200%)}
    #toast.show{transform:translateY(0)}
    /* 下部固定バーを表示し、その分の余白をコンテンツ下に確保 */
    #mobileNav{display:flex}
    #learnMode{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
    footer.site{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
    /* 下部バーにダッシュボードがあるので、上部タブ内の重複ダッシュボードは隠す */
    .chaptabs .dashtab{display:none}
  }