/* ================================================================
   はつおんカルテくん ── 「診療カルテと紫紺の印」スタイル
   むげん問題くん／スピーキングくんの姉妹デザイン。
   主色は紫紺（診断）、採点の朱、警告の金茶をそのまま引き継ぐ。
   ================================================================ */
:root{
  --paper:#f6f3ec;
  --card:#fffdf8;
  --ink:#2b2a26;
  --sub:#847e70;
  --line:#d9d3c2;
  --line2:#b9b2a0;
  --ai:#4b3f72;          /* 紫紺（このアプリの主色） */
  --ai-soft:#eeebf5;
  --ai-dark:#332a52;
  --red:#c23a2b;         /* 朱（採点・添削用） */
  --red-soft:#faeae7;
  --navy:#2c4257;
  --navy-soft:#eef1f4;
  --gold:#a5772a;
  --gold-soft:#f8f1e4;
  --green:#2f6b4f;
  --green-soft:#e9f1ec;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(0,0,0,.018) 31px 32px),
    var(--paper);
  color:var(--ink);line-height:1.85;min-height:100vh;font-size:14.5px;
}
.wrap{max-width:660px;margin:0 auto;padding:26px 18px 90px}

/* ---------- 題字 ---------- */
header{display:flex;align-items:center;gap:16px;padding:14px 2px 20px;border-bottom:3px double var(--line2);
  cursor:pointer;transition:.12s;user-select:none}
header:hover{opacity:.78}
header:active{transform:scale(.99)}
header:focus-visible{outline:2px solid var(--ai);outline-offset:3px}
.stamp{flex:0 0 58px;height:58px;border:3px solid var(--ai);border-radius:8px;color:var(--ai);
  display:grid;place-items:center;font-size:32px;font-weight:900;transform:rotate(-4deg);
  font-family:"Noto Serif JP",serif;background:var(--card)}
.fuki{position:relative;display:inline-block;border:1.5px solid var(--ink);border-radius:999px;
  background:#fff;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:2px 13px;margin-bottom:9px}
.fuki::after,.fuki::before{content:"";position:absolute;left:22px;border-style:solid;border-color:transparent}
.fuki::before{bottom:-8px;border-width:8px 5px 0 5px;border-top-color:var(--ink)}
.fuki::after{bottom:-5.5px;border-width:7px 4px 0 4px;border-top-color:#fff}
header .t h1{font-family:"Noto Serif JP",serif;font-size:clamp(23px,5.6vw,30px);font-weight:900;letter-spacing:.06em}
header .t p{font-size:12px;color:var(--sub);margin-top:2px;letter-spacing:.04em}
header .t p b{color:var(--ai);font-weight:700}

.foreword{margin:18px 0 4px;padding:14px 16px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--ai);font-size:13.5px}
.foreword b{color:var(--ai)}

/* ---------- タブ ---------- */
.tabs{display:flex;gap:0;margin:22px 0 0;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.tabs button{font-family:"Noto Serif JP",serif;font-size:15px;font-weight:700;letter-spacing:.08em;
  padding:10px 18px 8px;cursor:pointer;border:1px solid var(--line2);border-bottom:none;
  background:#eceadf;color:var(--sub);border-radius:6px 6px 0 0;margin-right:6px;position:relative;top:2px}
.tabs button.on{background:var(--card);color:var(--ink);border-color:var(--ink);
  border-bottom:2px solid var(--card);top:2px}

/* ---------- 用紙 ---------- */
.card{background:var(--card);border:1px solid var(--line);padding:20px 20px 18px;margin-top:16px;
  box-shadow:0 1px 3px rgba(60,50,30,.07)}
.card h2{font-family:"Noto Serif JP",serif;font-size:16px;font-weight:700;letter-spacing:.08em;
  padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px}
.card h2 .no{color:var(--ai);font-size:14px;font-weight:900}
.hint{font-size:12px;color:var(--sub);margin:-6px 0 12px}

/* ---------- 選択 ---------- */
.seg{display:grid;gap:8px}
.seg.c2{grid-template-columns:repeat(2,1fr)}
.seg.c3{grid-template-columns:repeat(3,1fr)}
.seg.c4{grid-template-columns:repeat(4,1fr)}
.seg button{font-family:inherit;cursor:pointer;padding:11px 4px;transition:.12s;text-align:center;
  border:1px solid var(--line2);background:var(--card);font-size:13.5px;font-weight:700;color:var(--ink)}
.seg button small{display:block;font-weight:400;font-size:10.5px;color:var(--sub);margin-top:1px;letter-spacing:.03em}
.seg button.on{border:2px solid var(--ai);color:var(--ai);background:var(--ai-soft);padding:10px 3px}
.seg button.on small{color:var(--ai)}
.spec{margin-top:12px;font-size:12.5px;color:var(--ink);background:var(--navy-soft);
  border-left:3px solid var(--navy);padding:9px 13px}
.spec b{color:var(--navy)}

/* ---------- 大ボタン ---------- */
.genbtn{display:block;width:100%;border:none;cursor:pointer;font-family:"Noto Serif JP",serif;
  font-weight:900;font-size:17px;color:#fff;padding:16px;letter-spacing:.3em;text-indent:.3em;
  background:var(--ai);margin-top:16px;box-shadow:0 2px 0 var(--ai-dark);transition:.1s}
.genbtn:active{transform:translateY(2px);box-shadow:none}
.genbtn:disabled{opacity:.55;cursor:not-allowed}
.startbtn{background:var(--red);box-shadow:0 2px 0 #8e2a1f}
.gonote{font-size:11.5px;color:var(--sub);text-align:center;margin-top:9px}
.limitnote{font-size:11px;line-height:1.6;opacity:.85;margin-top:3px}
.quota{display:block;margin-top:4px;font-size:11.5px;color:var(--ai);font-weight:700}
.quota.out{color:var(--red)}

/* ---------- 問題カード ---------- */
.mondai{border:2px solid var(--ink);background:#fff;padding:20px 20px 16px;margin-top:16px;position:relative}
.mondai .mhead{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:12px}
.mondai .mhead .mtitle{font-family:"Noto Serif JP",serif;font-weight:700;font-size:15px;letter-spacing:.15em}
.mondai .mhead .mtag{margin-left:auto;font-size:11px;color:var(--sub);letter-spacing:.05em}
.mondai .inst{font-size:12.5px;color:var(--ink);background:var(--paper);padding:9px 13px;margin-bottom:12px}
.mondai .ptitle{font-family:"Noto Serif JP",serif;font-size:16px;font-weight:700;text-align:center;margin-bottom:10px}
.mondai .passage{font-size:14.5px;line-height:2.05}
.mondai .startsent{margin-top:12px;border:1px solid var(--line2);padding:10px 14px;background:var(--ai-soft)}
.mondai .startsent .plabel{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--ai);
  font-family:"Noto Serif JP",serif;margin-bottom:3px}
.mondai .startsent .en{font-size:14.5px;font-weight:700}

/* コマ割り */
.koma{display:grid;gap:10px;margin-top:14px}
.koma.c3{grid-template-columns:repeat(3,1fr)}
.koma.c4{grid-template-columns:repeat(2,1fr)}
.frame{border:1.5px solid var(--ink);background:#fff;padding:10px 11px;position:relative;min-height:118px}
.frame .no{position:absolute;top:-1px;left:-1px;background:var(--ink);color:#fff;font-size:10px;
  font-weight:700;padding:1px 7px;font-family:"Noto Serif JP",serif}
.frame .tm{font-size:11px;font-weight:700;color:var(--ai);margin:12px 0 5px;letter-spacing:.03em}
.frame .sc{font-size:12px;line-height:1.75;color:var(--ink)}
.frame .bub{margin-top:7px;font-size:11.5px;background:#fff;border:1px solid var(--line2);
  border-radius:12px;padding:4px 10px;font-style:italic;position:relative}
.frame .bub::before{content:"“"}
.frame .bub::after{content:"”"}
.frame .sg{margin-top:6px;font-size:11px;background:var(--gold-soft);border-left:2px solid var(--gold);
  padding:3px 8px;font-weight:700;color:var(--gold)}
.komanote{font-size:11.5px;color:var(--sub);margin-top:8px;line-height:1.7}
.qhide{margin-top:12px;border:1px dashed var(--line2);background:var(--paper);padding:16px 15px;text-align:center}
.qhide .lock{font-family:"Noto Serif JP",serif;font-weight:700;font-size:13px;letter-spacing:.15em;color:var(--ai);margin-bottom:6px}
.qhide .lock::before{content:"🔒 "}
.qhide p{font-size:12px;color:var(--sub);line-height:1.75}

/* 1級のトピック選択 */
.topics{display:grid;gap:8px;margin-top:4px}
.topic{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line2);background:#fff;
  padding:11px 13px;cursor:pointer;font-family:inherit;text-align:left;font-size:13.5px;line-height:1.75;color:var(--ink)}
.topic .tn{flex:0 0 auto;font-family:"Noto Serif JP",serif;font-weight:900;color:var(--ai);font-size:13px}
.topic.on{border:2px solid var(--ai);background:var(--ai-soft);padding:10px 12px}
.topic.on .tn{color:var(--ai)}

.mrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mbtn{border:1px solid var(--line2);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 16px;cursor:pointer}
.mbtn:active{background:#efece2}

/* ---------- 採点中 ---------- */
.loading{display:flex;gap:14px;align-items:center}
.spin{flex:0 0 34px;height:34px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--ai);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ldstep{font-size:12.5px;color:var(--sub);transition:opacity .25s;margin-top:2px}

/* ================= 結果 ================= */
.sheethead{font-family:"Noto Serif JP",serif;text-align:center;margin:34px 0 0;font-size:19px;
  font-weight:900;letter-spacing:.3em;text-indent:.3em}
.sheethead::after{content:"";display:block;width:70px;margin:8px auto 0;border-bottom:3px double var(--red)}
.scorebox{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;padding:6px 0 2px}
.scorenum{font-family:"Noto Serif JP",serif;text-align:center}
.scorenum .num{font-size:62px;font-weight:900;color:var(--red);line-height:1.05;letter-spacing:.02em}
.scorenum .den{font-size:16px;color:var(--ink);font-weight:700}
.scorenum .rule{border-top:2px solid var(--ink);margin-top:2px;padding-top:3px;font-size:11px;color:var(--sub);letter-spacing:.15em}
.hanko{flex:0 0 auto;width:84px;height:84px;border:3px double var(--red);border-radius:50%;
  display:grid;place-items:center;color:var(--red);font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:17px;letter-spacing:.06em;transform:rotate(-7deg);line-height:1.25;text-align:center;opacity:.92}
.hanko.mid{border-color:var(--gold);color:var(--gold)}
.hanko.ng{border-color:var(--navy);color:var(--navy)}
.csebox{text-align:center;font-size:12.5px;color:var(--ink);margin-top:4px}
.csebox b{font-family:"Noto Serif JP",serif;font-size:20px;color:var(--ai)}
.csebox .pl{color:var(--sub);font-size:11.5px}
.banddesc{font-size:12.5px;color:var(--ink);margin-top:10px}
.lvname{text-align:center;font-size:12px;color:var(--sub);letter-spacing:.1em;margin-bottom:6px}
.cbar{display:grid;grid-template-columns:6.2em 1fr 3.6em;gap:10px;align-items:center;font-size:13px;margin-top:10px}
.cbar .nm{font-weight:700;letter-spacing:.06em;font-size:12.5px}
.cbar .tr{height:8px;background:#efece2;border:1px solid var(--line);overflow:hidden}
.cbar .tr i{display:block;height:100%;width:0;background:var(--navy);transition:width 1.1s ease}
.cbar .tr i.low{background:var(--red)}
.cbar .tr i.mid{background:var(--gold)}
.cbar .sc{font-weight:700;text-align:right;color:var(--ink);font-family:"Noto Serif JP",serif}
h4.sec{font-family:"Noto Serif JP",serif;font-size:15px;font-weight:700;letter-spacing:.08em;
  margin:2px 0 12px;padding-left:10px;border-left:4px solid var(--red)}
.callout{background:var(--navy-soft);border-left:3px solid var(--navy);padding:10px 14px;font-size:13px;margin:8px 0}
.callout.warn{background:var(--gold-soft);border-left-color:var(--gold)}
p.lead{font-size:13.5px}
ul.list{list-style:none;display:grid;gap:7px;font-size:13px}
ul.list li{position:relative;padding-left:24px}
ul.list li::before{position:absolute;left:0;top:0;font-weight:900}
ul.good li::before{content:"◎";color:var(--red)}
ul.bad li::before{content:"△";color:var(--navy)}
ul.arrow li::before{content:"一、";color:var(--sub);font-weight:400;font-family:"Noto Serif JP",serif}
ul.arrow li:nth-child(2)::before{content:"二、"}
ul.arrow li:nth-child(3)::before{content:"三、"}
ul.arrow li:nth-child(4)::before{content:"四、"}

details.box{border:1px solid var(--line);margin-top:9px;background:var(--card)}
details.box summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:11px 14px;font-size:13.5px;font-weight:700}
details.box summary::-webkit-details-marker{display:none}
details.box summary .sc{margin-left:auto;color:var(--red);font-weight:700;font-family:"Noto Serif JP",serif}
details.box summary .lvj{font-size:10.5px;background:var(--red-soft);color:var(--red);padding:1px 9px;font-weight:700}
details.box summary .caret{color:var(--sub);font-size:10px;transition:.2s}
details.box summary .sc + .caret{margin-left:8px}
details.box[open] summary .caret{transform:rotate(180deg)}
details.box .inner{padding:2px 15px 14px;font-size:13px;border-top:1px dashed var(--line)}

.saidbox{border:1px solid var(--line2);background:#fff;padding:10px 13px;margin:10px 0;font-size:12.5px;line-height:1.85}
.saidbox .lbl{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--sub);
  font-family:"Noto Serif JP",serif;margin-bottom:4px}
.saidbox .en{font-style:italic;color:var(--ink)}
.judgeline{background:var(--ai-soft);border-left:3px solid var(--ai);padding:9px 13px;font-size:12.5px;margin:8px 0}

.fix{border:1px solid var(--line);border-left:3px solid var(--red);padding:11px 14px;margin-bottom:9px;
  font-size:13px;background:var(--card)}
.fix .meta{display:flex;gap:6px;margin-bottom:5px;flex-wrap:wrap}
.sev{font-size:10.5px;font-weight:700;padding:1px 10px;border:1px solid}
.sev.s3{border-color:var(--red);color:var(--red)}
.sev.s2{border-color:var(--gold);color:var(--gold)}
.sev.s1{border-color:var(--line2);color:var(--sub)}
.fix .orig{color:var(--ink);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.fix .fixed{color:var(--red);font-weight:700}
.fix .why{color:var(--sub);font-size:12px;margin-top:5px;border-top:1px dashed var(--line);padding-top:5px}

.enbox{border:1px solid var(--line2);padding:14px 16px;margin:8px 0;background:#fff}
.enbox .lbl{font-size:11px;font-weight:700;letter-spacing:.2em;margin-bottom:6px;color:var(--navy);
  font-family:"Noto Serif JP",serif}
.enbox.model .lbl{color:var(--red)}
.enbox .en{font-size:14px;line-height:1.95}
.enbox .ja{font-size:12px;color:var(--sub);margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.enbox .pt{font-size:12px;color:var(--red);margin-top:6px}

.vup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;padding:8px 0;border-bottom:1px dashed var(--line)}
.vup:last-child{border-bottom:none}
.pill{background:#fff;border:1px solid var(--line2);padding:1px 11px}
.pill.up{border-color:var(--red);color:var(--red);font-weight:700}
.vup .arw{color:var(--sub)}
.vup .why{flex-basis:100%;color:var(--sub);font-size:11.5px}
.tpl{border-bottom:1px dashed var(--line);padding:9px 2px;font-size:13px}
.tpl:last-of-type{border-bottom:none}
.tpl .en{font-weight:700;color:var(--navy)}
.tpl .jp{color:var(--sub);font-size:12px}
.tpl .when{font-size:11px;color:var(--red);margin-top:1px}
.pw{display:flex;gap:9px;align-items:baseline;font-size:12.5px;padding:7px 0;border-bottom:1px dashed var(--line)}
.pw:last-child{border-bottom:none}
.pw .w{font-weight:700;font-style:italic}
.pw .s{font-family:"Noto Serif JP",serif;font-weight:900;color:var(--red);font-size:13px}
.pw .h{color:var(--sub);flex:1 1 100%;font-size:11.5px}
.hcard{border-left:4px solid var(--red)}
.hcard .hb{font-family:"Noto Serif JP",serif;font-size:12.5px;font-weight:700;color:var(--red);
  letter-spacing:.1em;margin-bottom:6px}
.hcard p{font-size:14px}
.err{border-left:4px solid var(--red)!important}
.err .et{color:var(--red);font-weight:700;margin-bottom:4px}
.err p{font-size:12.5px;color:var(--sub);white-space:pre-wrap}
.share{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.shbtn{border:1px solid var(--line2);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 16px;cursor:pointer}
.shbtn:active{background:#efece2}
audio.rp{width:100%;margin-top:8px;height:34px}

/* ================= 極秘メモ ================= */
.memohead{border:2px solid var(--red);background:#fff;padding:16px 18px;margin-top:16px;position:relative;overflow:hidden}
.memohead::after{content:"㊙";position:absolute;right:-12px;bottom:-24px;font-size:110px;
  color:var(--red);opacity:.07;font-family:"Noto Serif JP",serif;font-weight:900;line-height:1}
.memohead .mk{display:inline-block;border:2px solid var(--red);color:var(--red);font-family:"Noto Serif JP",serif;
  font-weight:900;font-size:11px;letter-spacing:.25em;padding:2px 11px;transform:rotate(-2deg);margin-bottom:8px}
.memohead h3{font-family:"Noto Serif JP",serif;font-size:18px;font-weight:900;letter-spacing:.06em}
.memohead p{font-size:12.5px;color:var(--sub);margin-top:5px}
.memo{border:1px solid var(--line);background:var(--card);margin-top:12px}
.memo > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:14px 16px}
.memo > summary::-webkit-details-marker{display:none}
.memo > summary .g{flex:0 0 auto;border:2px solid var(--ai);color:var(--ai);font-family:"Noto Serif JP",serif;
  font-weight:900;font-size:12px;padding:3px 10px;background:#fff}
.memo > summary .ttl{font-family:"Noto Serif JP",serif;font-weight:700;font-size:14.5px;letter-spacing:.05em}
.memo > summary .ttl small{display:block;font-family:inherit;font-weight:400;font-size:11px;color:var(--sub);letter-spacing:0}
.memo > summary .caret{margin-left:auto;color:var(--sub);font-size:11px;transition:.2s}
.memo[open] > summary .caret{transform:rotate(180deg)}
.memo[open] > summary{border-bottom:1px dashed var(--line)}
.memobody{padding:6px 17px 18px}
.memobody h5{font-family:"Noto Serif JP",serif;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  margin:16px 0 8px;padding-left:9px;border-left:4px solid var(--red)}
.memobody h5:first-child{margin-top:8px}
.memobody p{font-size:13px;margin-bottom:8px}
.memobody ul{list-style:none;display:grid;gap:6px;font-size:12.5px;margin-bottom:8px}
.memobody ul li{position:relative;padding-left:20px}
.memobody ul li::before{content:"●";position:absolute;left:0;top:0;font-size:8px;color:var(--ai);top:1px}
.memobody .kim{background:var(--red-soft);border-left:3px solid var(--red);padding:10px 13px;font-size:12.5px;margin:10px 0}
.memobody .kim b{color:var(--red)}
.memobody .tmpl{border:1px solid var(--line2);background:#fff;padding:11px 14px;margin:8px 0}
.memobody .tmpl .en{font-size:13px;font-weight:700;color:var(--navy);line-height:1.85}
.memobody .tmpl .ja{font-size:11.5px;color:var(--sub);margin-top:4px}
.memobody table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
.memobody th,.memobody td{border:1px solid var(--line);padding:6px 9px;text-align:left}
.memobody th{background:var(--ai-soft);color:var(--ai);font-weight:700;white-space:nowrap}
.memobody td b{color:var(--red)}

/* ================= 質問室 ================= */
.presets{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.preset{border:1px solid var(--line2);background:#fff;color:var(--ai);
  font-family:inherit;font-size:12px;font-weight:500;padding:7px 13px;cursor:pointer}
.preset:active{background:var(--ai-soft)}
#chatlog{display:grid;gap:10px;margin:14px 0}
.msg{max-width:90%}
.msg .body{padding:11px 15px;font-size:13.5px;line-height:1.85;border:1px solid var(--line);white-space:pre-wrap}
.msg.user{justify-self:end}
.msg.user .body{background:var(--ai);color:#fff;border-color:var(--ai)}
.msg.ai .body{background:var(--card)}
.msg.ai .who{display:block;font-family:"Noto Serif JP",serif;font-size:11px;font-weight:700;color:var(--red);margin-bottom:3px;letter-spacing:.08em}
.msg .body code{background:#efece2;padding:1px 6px;font-size:12.5px}
.typing{display:inline-flex;gap:4px;padding:5px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--sub);animation:tp 1.2s ease infinite;font-style:normal}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.chatbar{position:sticky;bottom:12px;display:flex;gap:8px;align-items:flex-end;padding:8px;
  background:var(--card);border:1.5px solid var(--ink);box-shadow:0 3px 10px rgba(60,50,30,.15)}
.chatbar textarea{flex:1;border:none;background:transparent;color:var(--ink);font-family:inherit;
  font-size:14px;resize:none;max-height:120px;line-height:1.7;padding:8px 6px}
.chatbar textarea:focus{outline:none}
.sendbtn{flex:0 0 60px;height:42px;border:none;cursor:pointer;font-family:"Noto Serif JP",serif;
  font-size:14px;font-weight:700;background:var(--ai);color:#fff;letter-spacing:.15em}
.sendbtn:disabled{opacity:.5}

/* ================= 奥付 ================= */
.sisters{margin-top:40px;border-top:3px double var(--line2);padding-top:18px}
.sisters h3{font-family:"Noto Serif JP",serif;font-size:14.5px;font-weight:700;letter-spacing:.08em;margin-bottom:2px}
.sisters .note{font-size:12px;color:var(--sub);margin-bottom:12px}
.sis{display:flex;gap:12px;align-items:baseline;border-bottom:1px dashed var(--line);
  padding:11px 4px;text-decoration:none;color:var(--ink)}
.sis b{font-size:13.5px;border-bottom:1px solid var(--navy);color:var(--navy)}
.sis span.d{font-size:11.5px;color:var(--sub)}
.sis .go{margin-left:auto;color:var(--sub);font-size:12px}
footer{text-align:center;margin-top:32px;color:var(--sub);font-size:11.5px}
.foottop{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
.foottop:active{color:var(--ai)}
footer a.hq{display:inline-block;margin-top:14px;background:var(--navy);color:#fff;
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:18px;letter-spacing:.08em;
  padding:14px 36px;text-decoration:none;box-shadow:0 2px 0 #1b2c3d}
footer a.hq:active{transform:translateY(2px);box-shadow:none}
.hqsub{font-size:11.5px;color:var(--sub);margin-top:8px}

#totop{position:fixed;right:18px;bottom:24px;width:52px;height:52px;border-radius:50%;
  border:2.5px solid var(--ai);background:var(--card);color:var(--ai);
  font-family:"Noto Serif JP",serif;font-size:21px;font-weight:900;cursor:pointer;
  display:none;z-index:60;box-shadow:0 4px 14px rgba(60,50,30,.28);line-height:1;padding:0}
#totop.show{display:block}
#totop:active{transform:scale(.94)}
@media (max-width:720px){ #totop{bottom:88px;right:12px} }

#toast{display:none;position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:300;
  background:var(--ink);color:#fff;padding:11px 20px;font-size:13px;max-width:90vw;text-align:center}
.panel{display:none}
.panel.on{display:block}
@media (max-width:480px){
  .wrap{padding:18px 13px 70px}
  .card{padding:17px 14px}
  .seg.c4{grid-template-columns:repeat(2,1fr)}
  .koma.c3{grid-template-columns:1fr}
  .koma.c4{grid-template-columns:1fr}
  .stagewrap{padding:14px 13px 34px}
  .bigtimer .tnum{font-size:48px}
  .cbar{grid-template-columns:5.4em 1fr 3.2em;gap:8px}
}

/* ================= はつおんカルテ 固有 ================= */

/* 立場の説明 */
.stance{margin-top:16px;border:1px solid var(--line);background:var(--card)}
.stance > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 15px;font-size:13.5px;font-weight:700}
.stance > summary::-webkit-details-marker{display:none}
.stance > summary .mk{flex:0 0 auto;border:1.5px solid var(--ai);color:var(--ai);background:#fff;
  font-family:"Noto Serif JP",serif;font-size:11px;font-weight:900;padding:2px 9px}
.stance > summary .caret{margin-left:auto;color:var(--sub);font-size:11px;transition:.2s}
.stance[open] > summary{border-bottom:1px dashed var(--line)}
.stance[open] > summary .caret{transform:rotate(180deg)}
.stancebody{padding:6px 17px 16px;font-size:13px;line-height:1.9}
.stancebody h6{font-family:"Noto Serif JP",serif;font-size:13px;font-weight:700;margin:14px 0 5px;
  padding-left:9px;border-left:4px solid var(--ai)}
.stancebody h6:first-child{margin-top:6px}
.stancebody p{margin-bottom:8px}
.stancebody .hi{background:var(--ai-soft);border-left:3px solid var(--ai);padding:10px 13px;margin:10px 0;font-size:12.5px}

/* 分野タブ */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cats button{font-family:inherit;cursor:pointer;padding:10px 5px;border:1px solid var(--line2);
  background:var(--card);text-align:center;color:var(--ink)}
.cats button .ic{display:block;font-family:"Noto Serif JP",serif;font-weight:900;font-size:15px;color:var(--ai);line-height:1.2}
.cats button .nm{display:block;font-size:12px;font-weight:700;margin-top:3px}
.cats button.on{border:2px solid var(--ai);background:var(--ai-soft);padding:9px 4px}
.catdesc{margin-top:10px;font-size:12px;color:var(--sub);background:var(--paper);padding:8px 12px;border-left:3px solid var(--line2)}

/* 英文の一覧 */
/* 押せる行だと一目で分かるように、右に丸い矢印と「押す」文言を置く */
.taphint{display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 14px;
  background:var(--ai);color:#fff;font-size:13.5px;font-weight:700;
  font-family:"Noto Serif JP",serif;letter-spacing:.05em}
.taphint .fi{font-size:17px;line-height:1;animation:tapbob 1.4s ease-in-out infinite}
@keyframes tapbob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

.sents{display:grid;gap:9px;margin-top:10px}
.sent{border:2px solid var(--line2);background:#fff;padding:13px 14px;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--ink);width:100%;
  display:flex;align-items:center;gap:13px;transition:.13s;
  box-shadow:0 2px 0 var(--line)}
.sent .body{flex:1;min-width:0}
.sent .en{font-size:14.5px;line-height:1.8;font-weight:500}
.sent .ja{font-size:11.5px;color:var(--sub);margin-top:4px}
.sent .lv{display:inline-block;font-size:10px;font-weight:700;border:1px solid var(--line2);
  color:var(--sub);padding:0 7px;margin-right:7px;vertical-align:1px}
.sent .go{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--ai);background:var(--ai-soft);color:var(--ai);
  font-family:"Noto Serif JP",serif;font-size:16px;font-weight:900;line-height:1}
.sent .go small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.02em;margin-top:1px}
.sent:hover{border-color:var(--ai);background:#fbfaff}
.sent:hover .go{background:var(--ai);color:#fff}
.sent:active{transform:translateY(2px);box-shadow:none}
.sent.on{border:2px solid var(--ai);background:var(--ai-soft);box-shadow:0 2px 0 var(--ai-dark)}
.sent.on .lv{border-color:var(--ai);color:var(--ai)}
.sent.on .go{background:var(--ai);color:#fff}

textarea.own{width:100%;min-height:70px;border:1px solid var(--line2);background:#fff;color:var(--ink);
  font-family:inherit;font-size:14.5px;padding:11px 13px;resize:vertical;line-height:1.8;margin-top:10px}
textarea.own:focus{outline:none;border-color:var(--ai)}

/* 選んだ文の表示 */
.picked{border:2px solid var(--ink);background:#fff;padding:18px;margin-top:16px}
.picked .lbl{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--ai);
  font-family:"Noto Serif JP",serif;margin-bottom:7px}
.picked .en{font-size:18px;line-height:1.85;font-weight:700}
.picked .ja{font-size:12.5px;color:var(--sub);margin-top:8px}
.picked .pt{font-size:12.5px;background:var(--gold-soft);border-left:3px solid var(--gold);padding:9px 12px;margin-top:11px}
.picked .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.picked .row button{border:1px solid var(--ai);background:#fff;color:var(--ai);font-family:inherit;
  font-size:12.5px;font-weight:700;padding:8px 15px;cursor:pointer}
.picked .row button:active{background:var(--ai-soft)}
.picked .row button:disabled{opacity:.5}

/* 録音 */
.recwrap{text-align:center;padding:8px 0 4px}
.recbtn{width:120px;height:120px;border-radius:50%;border:3px solid var(--red);background:#fff;
  color:var(--red);cursor:pointer;font-family:"Noto Serif JP",serif;font-weight:900;font-size:14px;
  display:inline-grid;place-items:center;line-height:1.5;transition:.15s}
.recbtn .big{font-size:30px}
.recbtn:active{transform:scale(.95)}
.recbtn.on{background:var(--red);color:#fff;animation:pulse 1.3s ease infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(194,58,43,.4)}50%{box-shadow:0 0 0 14px rgba(194,58,43,0)}}
.rectime{font-family:"Noto Serif JP",serif;font-size:26px;font-weight:900;margin-top:10px}
.lvmeter{height:10px;background:#efece2;border:1px solid var(--line);margin:10px auto 0;max-width:280px;overflow:hidden}
.lvmeter i{display:block;height:100%;width:0;background:var(--red);transition:width .08s linear}

/* 結果 */
.gauge{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.gcell{text-align:center;font-family:"Noto Serif JP",serif;min-width:120px}
.gcell .gn{font-size:11.5px;color:var(--sub);letter-spacing:.12em;font-family:"Noto Sans JP",sans-serif}
.gcell .gv{font-size:52px;font-weight:900;line-height:1.05}
.gcell .gu{font-size:14px;font-weight:700;color:var(--sub)}
.gcell.nat .gv{color:var(--ai)}
.gcell.jap .gv{color:var(--red)}
.mixbar{display:flex;height:26px;border:1px solid var(--line2);overflow:hidden;margin-top:14px}
.mixbar span{display:block;height:100%}
.mixleg{display:grid;gap:6px;margin-top:9px}
.mixleg .row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.mixleg .sw{width:13px;height:13px;flex:0 0 auto;border:1px solid rgba(0,0,0,.15)}
.mixleg .pc{margin-left:auto;font-family:"Noto Serif JP",serif;font-weight:700}
.mixleg .wy{flex-basis:100%;font-size:11px;color:var(--sub);padding-left:21px;line-height:1.7}

.sound{border:1px solid var(--line);border-left:4px solid var(--ai);background:var(--card);padding:13px 15px;margin-bottom:10px}
.sound .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sound .ipa{font-family:"Noto Serif JP",serif;font-size:22px;font-weight:900;color:var(--ai);line-height:1}
.sound .inw{font-size:12.5px;color:var(--sub)}
.sound .sc{margin-left:auto;font-family:"Noto Serif JP",serif;font-weight:900;color:var(--red);font-size:16px}
.sound .heard{font-size:12.5px;background:var(--red-soft);border-left:3px solid var(--red);padding:7px 11px;margin-top:9px}
.sound dl{display:grid;grid-template-columns:4.6em 1fr;gap:5px 10px;margin-top:10px;font-size:12.5px;line-height:1.8}
.sound dt{font-weight:700;color:var(--ai);font-size:11.5px;padding-top:2px}
.sound dd{margin:0}
.sound .risk{font-size:12px;color:var(--gold);background:var(--gold-soft);padding:6px 10px;margin-top:8px;border-left:3px solid var(--gold)}
.sound .drill{font-size:12.5px;background:var(--ai-soft);border-left:3px solid var(--ai);padding:8px 12px;margin-top:9px}

.daily{border:1px solid var(--line2);background:#fff;padding:12px 14px;margin-bottom:9px}
.daily .t{font-family:"Noto Serif JP",serif;font-weight:700;font-size:14px;color:var(--ai);margin-bottom:5px}
.daily .h{font-size:13px;line-height:1.85}
.daily .w{font-size:11.5px;color:var(--sub);margin-top:5px;border-top:1px dashed var(--line);padding-top:5px}

.wordmap{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wordmap span{font-size:13px;padding:3px 9px;border:1px solid var(--line2);background:#fff}
.wordmap span.g{border-color:var(--ai);color:var(--ai)}
.wordmap span.m{border-color:var(--gold);color:var(--gold)}
.wordmap span.b{border-color:var(--red);color:var(--red);font-weight:700}

.nextsent{border:2px dashed var(--ai);background:var(--ai-soft);padding:14px 16px;margin-top:8px}
.nextsent .en{font-size:15px;font-weight:700;line-height:1.8}
.nextsent .why{font-size:12px;color:var(--sub);margin-top:6px}
.nextsent button{margin-top:11px;border:1px solid var(--ai);background:#fff;color:var(--ai);
  font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 16px;cursor:pointer}

@media (max-width:480px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .gcell .gv{font-size:42px}
  .sound dl{grid-template-columns:1fr;gap:2px}
  .sound dt{padding-top:6px}
}


/* ================= 練習コーナー ================= */
.tabs button small{display:block;font-family:"Noto Sans JP",sans-serif;font-weight:400;
  font-size:9.5px;letter-spacing:0;color:var(--sub);margin-top:1px}
.tabs button.on small{color:var(--ai)}

.drillnav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.drillnav button{font-family:inherit;cursor:pointer;padding:10px 5px;border:1px solid var(--line2);
  background:var(--card);text-align:center;color:var(--ink)}
.drillnav button .ip{display:block;font-family:"Noto Serif JP",serif;font-weight:900;font-size:14px;color:var(--ai);line-height:1.2}
.drillnav button .tt{display:block;font-size:11.5px;font-weight:700;margin-top:3px}
.drillnav button.on{border:2px solid var(--ai);background:var(--ai-soft);padding:9px 4px}

.dhead{border:2px solid var(--ai);background:#fff;padding:18px;margin-top:16px}
.dhead .ip{font-family:"Noto Serif JP",serif;font-size:26px;font-weight:900;color:var(--ai);line-height:1}
.dhead h3{font-family:"Noto Serif JP",serif;font-size:19px;font-weight:900;margin-top:6px}
.dhead .cc{font-size:13px;background:var(--red-soft);border-left:3px solid var(--red);padding:9px 12px;margin-top:11px}
.dhead .why{font-size:13px;line-height:1.95;margin-top:12px}

.dstep{border:1px solid var(--line);background:var(--card);padding:12px 14px;margin-bottom:9px}
.dstep .k{font-family:"Noto Serif JP",serif;font-weight:700;font-size:13.5px;color:var(--ai);margin-bottom:5px}
.dstep .v{font-size:13px;line-height:1.95}

ul.dlist{list-style:none;display:grid;gap:7px;font-size:13px;line-height:1.85}
ul.dlist li{position:relative;padding-left:24px}
ul.dlist li::before{position:absolute;left:0;top:0;font-weight:900}
ul.dcheck li::before{content:"✓";color:var(--ai)}
ul.dmiss li::before{content:"✕";color:var(--red)}

.pairrow{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);background:#fff;
  padding:10px 12px;margin-bottom:8px;flex-wrap:wrap}
.pairrow .w{font-size:15px;font-weight:700;min-width:5.5em}
.pairrow .vs{color:var(--sub);font-size:12px}
.pairrow .jj{flex-basis:100%;font-size:11.5px;color:var(--sub)}
.aud{border:1px solid var(--ai);background:var(--ai-soft);color:var(--ai);cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:700;padding:4px 10px;line-height:1.5;white-space:nowrap}
.aud:active{background:var(--ai);color:#fff}
.aud.sl{border-color:var(--line2);color:var(--sub);background:#fff;font-size:10.5px}

.wordgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wordgrid .wc{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:#fff;padding:9px 11px}
.wordgrid .wc .w{flex:1;font-size:14px;font-weight:500}

.dsent{border:1px solid var(--line2);background:#fff;padding:12px 14px;margin-bottom:9px}
.dsent .en{font-size:14.5px;line-height:1.85;font-weight:500}
.dsent .ja{font-size:11.5px;color:var(--sub);margin-top:4px}
.dsent .row{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}

.dmenu{display:flex;gap:11px;border:1px solid var(--line2);background:#fff;padding:11px 13px;margin-bottom:8px}
.dmenu .t{flex:0 0 6.5em;font-family:"Noto Serif JP",serif;font-weight:700;font-size:13px;color:var(--ai)}
.dmenu .h{flex:1;font-size:12.5px;line-height:1.85}
.dgoal{font-size:13px;background:var(--ai-soft);border-left:3px solid var(--ai);padding:11px 13px;line-height:1.85}

/* カルテからの自動リンク */
.torec{border:2px dashed var(--red);background:var(--red-soft);padding:15px 16px;margin-top:8px}
.torec .h{font-family:"Noto Serif JP",serif;font-weight:900;font-size:15px;color:var(--red);margin-bottom:7px}
.torec p{font-size:12.5px;line-height:1.85;margin-bottom:10px}
.torec .btns{display:flex;gap:8px;flex-wrap:wrap}
.torec .btns button{border:none;background:var(--red);color:#fff;font-family:"Noto Serif JP",serif;
  font-weight:900;font-size:13.5px;padding:10px 16px;cursor:pointer;box-shadow:0 2px 0 #8e2a1f}
.torec .btns button:active{transform:translateY(2px);box-shadow:none}
.gotodrill{border:1px solid var(--ai);background:var(--ai-soft);color:var(--ai);font-family:inherit;
  font-size:12px;font-weight:700;padding:6px 12px;cursor:pointer;margin-top:9px}
.gotodrill:active{background:var(--ai);color:#fff}

@media (max-width:480px){
  .drillnav{grid-template-columns:repeat(2,1fr)}
  .wordgrid{grid-template-columns:1fr}
  .dmenu{flex-direction:column;gap:4px}
  .dmenu .t{flex:none}
}

/* ================= カルテの新しい見出し ================= */
.headline{font-family:"Noto Serif JP",serif;font-size:20px;font-weight:900;color:var(--ai);
  text-align:center;margin-top:14px;padding:12px 10px;border-top:2px solid var(--ai);border-bottom:2px solid var(--ai);
  line-height:1.5}
.onefix{margin-top:11px;background:var(--red-soft);border-left:4px solid var(--red);padding:11px 14px;font-size:13.5px;line-height:1.85}
.onefix .t{display:block;font-family:"Noto Serif JP",serif;font-weight:900;color:var(--red);
  font-size:12px;letter-spacing:.15em;margin-bottom:4px}
.sound .heard .hw{color:var(--sub);font-size:11.5px}

/* ================= 印刷（診療カルテ風） ================= */
@media print{
  @page{size:A4;margin:14mm 12mm}
  body{background:#fff!important;font-size:10.5pt;line-height:1.65}
  .wrap{max-width:none;padding:0}
  /* 画面用の操作系は印刷しない */
  header,.foreword,.stance,.tabs,#p-drill,#totop,#toast,.share,#rec-card,
  #picked-box,#p-judge > .card:not(#result .card),.taphint,.sents,.gotodrill,
  .torec .btns,.nextsent button,audio,.playbtn,.aud{display:none!important}
  #result{display:block!important}

  /* カルテの表紙 */
  #result::before{
    content:"は つ お ん カ ル テ";
    display:block;text-align:center;font-family:"Noto Serif JP",serif;
    font-size:19pt;font-weight:900;letter-spacing:.5em;text-indent:.5em;
    padding:6mm 0 3mm;border:3px double #333;margin-bottom:5mm}
  .sheethead{display:none}

  .card{border:1px solid #999!important;box-shadow:none!important;
    padding:4mm 5mm!important;margin:0 0 4mm!important;break-inside:avoid;background:#fff!important}
  h4.sec{font-size:11pt;border-left:3px solid #333!important;color:#000!important;margin-bottom:2mm!important}
  .lvname{font-size:9pt}
  .gauge{gap:10mm}
  .gcell .gv{font-size:30pt}
  .gcell.nat .gv,.gcell.jap .gv{color:#000!important}
  .headline{border-color:#333!important;color:#000!important;font-size:14pt;padding:3mm 0}
  .callout,.onefix,.adv,.drill,.risk,.heard,.dgoal{background:#f4f4f4!important;
    border-left-color:#666!important;color:#000!important}
  .mixbar{height:7mm}
  .mixbar span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cbar .tr{background:#eee!important}
  .cbar .tr i{background:#555!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sound{border-left-color:#333!important;break-inside:avoid}
  .sound .ipa,.sound .sc{color:#000!important}
  .wordmap span{border-color:#999!important;color:#000!important}
  .wordmap span.b{font-weight:900;text-decoration:underline}
  .daily,.dsent{break-inside:avoid}
  .torec{border-color:#333!important;background:#f4f4f4!important}
  .torec .h{color:#000!important}

  /* 署名欄 */
  #result::after{
    content:"診断： AIはらだくん（原田英語.com）　　　　この診断は発音の傾向を示すもので、優劣を表すものではありません。";
    display:block;margin-top:5mm;padding-top:3mm;border-top:1px solid #999;
    font-size:8.5pt;color:#333;text-align:right}
}

/* 注記は控えめな色で（主張はしっかり、見た目は静かに） */
.stance.disc{margin-top:22px}
.stance.disc > summary .mk{border-color:var(--sub);color:var(--sub)}
.stance.disc .stancebody{font-size:12.5px}
.stance.disc .stancebody h6{border-left-color:var(--sub);font-size:12.5px}
@media print{ .stance.disc{display:block!important;border:1px solid #999!important;break-inside:avoid}
  .stance.disc > summary{display:none}
  .stance.disc .stancebody{padding:3mm 4mm;font-size:8pt;line-height:1.6} }

/* ================= 図解 ================= */
.fig{margin:14px 0 0;border:1px solid var(--line2);background:#fff;padding:10px 10px 6px}
.fig figcaption{font-size:12px;color:var(--ai);font-weight:700;text-align:center;padding:7px 4px 3px;
  font-family:"Noto Serif JP",serif}

/* ================= 聞き分けテスト ================= */
.qscore{font-size:13px;background:var(--ai-soft);border-left:3px solid var(--ai);padding:9px 13px;margin-bottom:12px}
.qscore b{font-family:"Noto Serif JP",serif;font-size:17px;color:var(--ai)}
.qscore.all{background:var(--red-soft);border-left-color:var(--red)}
.qscore.all b{color:var(--red)}

.quiz{border:1px solid var(--line2);background:#fff;padding:12px 13px;margin-bottom:10px}
.quiz .qh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.quiz .qn{font-family:"Noto Serif JP",serif;font-weight:900;font-size:13px;color:var(--ai);min-width:3.5em}
.qplay{border:2px solid var(--ai);background:var(--ai);color:#fff;font-family:inherit;font-size:13px;
  font-weight:700;padding:7px 15px;cursor:pointer}
.qplay:active{transform:translateY(1px)}
.qplay.sl{background:#fff;color:var(--ai);font-size:11.5px;padding:7px 11px}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.qopt{border:2px solid var(--line2);background:var(--card);color:var(--ink);font-family:inherit;
  font-size:15px;font-weight:700;padding:12px 6px;cursor:pointer;transition:.12s}
.qopt:hover:not(:disabled){border-color:var(--ai);background:var(--ai-soft)}
.qopt:disabled{cursor:default;opacity:.85}
.qopt.ok{border-color:var(--ai);background:var(--ai);color:#fff}
.qopt.ng{border-color:var(--red);background:var(--red-soft);color:var(--red);text-decoration:line-through}
.qres{margin-top:10px}
.qhint{font-size:12px;color:var(--sub)}
.qmark{font-family:"Noto Serif JP",serif;font-weight:900;font-size:16px;margin-bottom:5px}
.qmark.hit{color:var(--ai)}
.qmark.miss{color:var(--red)}
.qans{font-size:13.5px;margin-bottom:8px}
.qcmp{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--sub)}
.qtip{font-size:12.5px;line-height:1.85;background:var(--gold-soft);border-left:3px solid var(--gold);
  padding:9px 12px;margin-top:9px}
.qagain{border:1px solid var(--line2);background:var(--card);color:var(--sub);font-family:inherit;
  font-size:11.5px;font-weight:700;padding:6px 12px;cursor:pointer;margin-top:9px}
@media (max-width:480px){ .qopts{grid-template-columns:1fr} }