/* ===== キャリアコンサルタント試験 対策アプリ ===== */
:root{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#f7f9fc; --ink:#1d2733; --sub:#5b6b7d;
  --line:#e2e8f0; --brand:#1f6f54; --accent:#1f8a5b; --accent-ink:#fff;
  --ok:#1f9d57; --okbg:#e8f7ee; --ng:#d8423a; --ngbg:#fdecea; --warn:#c9871f;
  --chip:#eef2f7; --shadow:0 1px 3px rgba(20,40,60,.08),0 6px 18px rgba(20,40,60,.06);
  --r:12px; --fs:16px;
}
:root[data-theme="dark"]{
  --bg:#0f141a; --panel:#172029; --panel2:#1c2731; --ink:#e6edf3; --sub:#9fb0c0;
  --line:#2a3742; --brand:#27a06a; --accent:#27a06a; --accent-ink:#06140d;
  --ok:#4cc585; --okbg:#10301f; --ng:#ff6b61; --ngbg:#3a1a17;
  --chip:#212e39; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
:root[data-fs="s"]{--fs:14px} :root[data-fs="l"]{--fs:18px} :root[data-fs="xl"]{--fs:20px}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-size:var(--fs);
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
#app{max-width:1000px;margin:0 auto;padding:0 16px 64px;min-height:100vh;display:flex;flex-direction:column}
#app.practice-wide{max-width:1800px}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;background:var(--bg);padding:12px 0 6px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--accent),#155e3f);color:#fff;font-weight:800;letter-spacing:.5px;box-shadow:var(--shadow)}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt strong{font-size:1.02rem}
.brand-txt small{color:var(--sub);font-size:.74rem}
/* 同期バッジ（学習記録の保存先） */
.syncbadge{margin-left:auto;cursor:pointer;border-radius:999px;padding:3px 11px;font-size:.72rem;font-weight:700;white-space:nowrap;border:1px solid var(--line);background:var(--chip);color:var(--sub);transition:.12s}
.syncbadge:hover{border-color:var(--accent);color:var(--accent)}
.syncbadge.ok{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.syncbadge.syncing{background:var(--chip);border-color:var(--warn);color:var(--warn)}
.syncbadge.local{background:var(--chip);border-color:var(--line);color:var(--sub)}
.chip.sync-ok{background:var(--okbg);color:var(--ok)}
.chip.sync-off{background:var(--ngbg);color:var(--ng)}
.tabs{display:flex;flex-wrap:wrap;gap:4px}
.tabs button{appearance:none;border:0;background:transparent;color:var(--sub);font:inherit;font-size:.92rem;padding:7px 13px;border-radius:9px;cursor:pointer;transition:.12s}
.tabs button:hover{background:var(--chip);color:var(--ink)}
.tabs button.active{background:var(--accent);color:var(--accent-ink);font-weight:700}

main{flex:1;padding-top:18px}
.foot{color:var(--sub);font-size:.72rem;padding:18px 2px;border-top:1px solid var(--line);margin-top:24px;line-height:1.5}

/* generic */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.panel + .panel{margin-top:14px}
h2.vtitle{font-size:1.25rem;margin:.2em 0 .6em}
h3{font-size:1rem;margin:.2em 0 .5em}
.muted{color:var(--sub)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:12px}
.grid.cols2{grid-template-columns:1fr 1fr}
.grid.cols3{grid-template-columns:repeat(3,1fr)}
.grid.cols4{grid-template-columns:repeat(4,1fr)}
@media(max-width:680px){.grid.cols2,.grid.cols3,.grid.cols4{grid-template-columns:1fr 1fr}.tabs button{padding:7px 10px;font-size:.86rem}}
@media(max-width:430px){.grid.cols3,.grid.cols4{grid-template-columns:1fr}}

.btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;padding:10px 16px;border-radius:10px;cursor:pointer;transition:.12s;font-weight:600}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:.85rem;border-radius:8px}
.btn.block{width:100%;justify-content:center;display:flex}
.btn:disabled{opacity:.45;cursor:not-allowed}

.chip{display:inline-flex;align-items:center;gap:5px;background:var(--chip);color:var(--sub);border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:600}
.chip.cat{cursor:pointer;border:1px solid transparent}
.chip.cat.on{background:var(--accent);color:var(--accent-ink)}
.tag{font-size:.72rem;color:var(--sub);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 7px}

/* dashboard */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:680px){.stat-cards{grid-template-columns:1fr 1fr}}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.stat-card .num{font-size:1.8rem;font-weight:800;line-height:1.1}
.stat-card .lbl{color:var(--sub);font-size:.78rem}
.stat-card .num small{font-size:.9rem;font-weight:600;color:var(--sub)}

/* progress bars */
.bar{height:9px;border-radius:6px;background:var(--chip);overflow:hidden}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#3fbf83);border-radius:6px}
.barrow{display:grid;grid-template-columns:130px 1fr 58px;gap:10px;align-items:center;margin:6px 0}
.barrow .nm{font-size:.85rem}
.barrow .pc{font-size:.82rem;text-align:right;color:var(--sub);font-variant-numeric:tabular-nums}
@media(max-width:520px){.barrow{grid-template-columns:96px 1fr 46px}}

/* setup controls */
.field{margin:12px 0}
.field > label{display:block;font-weight:700;font-size:.86rem;margin-bottom:6px}
.seg{display:inline-flex;background:var(--chip);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--sub);font:inherit;font-size:.86rem;padding:6px 13px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow);font-weight:700}
.catwrap{display:flex;flex-wrap:wrap;gap:7px}

/* quiz */
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.qprog{font-size:.82rem;color:var(--sub);font-variant-numeric:tabular-nums}
.qmeta{display:flex;gap:6px;flex-wrap:wrap}
.qstem{font-size:1.08em;font-weight:600;margin:10px 0 4px;white-space:pre-wrap}
.polar{font-weight:800}
.polar.ng{color:var(--ng)}
.choices{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.choice{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;background:var(--panel);border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink);transition:.1s}
.choice:hover{border-color:var(--accent)}
.choice .no{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--chip);font-weight:700;font-size:.82rem}
.choice.correct{border-color:var(--ok);background:var(--okbg)}
.choice.correct .no{background:var(--ok);color:#fff}
.choice.wrong{border-color:var(--ng);background:var(--ngbg)}
.choice.wrong .no{background:var(--ng);color:#fff}
.choice.locked{cursor:default}
.choice.dim{opacity:.6}
.verdict{display:flex;align-items:center;gap:9px;font-weight:800;margin:6px 0}
.verdict.ok{color:var(--ok)} .verdict.ng{color:var(--ng)}
.explain{background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:9px;padding:12px 14px;margin-top:10px;white-space:pre-wrap;font-size:.95em}
.explain .src{display:block;margin-top:8px;font-size:.76rem;color:var(--sub)}
.explain .src a{color:var(--accent)}
.qactions{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:14px}

/* 3-question independent practice (PC) */
.multi-mode-note{font-size:.82rem;margin:10px 0 0;padding:9px 11px;background:var(--panel2);border-radius:8px}
.practice-multi-head{padding:12px 16px;margin-bottom:14px}
.practice-multi-summary{justify-content:space-between}
.practice-multi-head .vtitle{margin:0 0 2px}
.practice-triple-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.practice-card{min-width:0;padding:14px;margin:0}
.practice-card + .practice-card{margin-top:0}
.practice-lane-label{display:inline-flex;margin:-4px 0 8px;padding:2px 9px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:800;letter-spacing:.03em}
.practice-card .qhead{align-items:flex-start}
.practice-card .qmeta{gap:4px}
.practice-card .chip{padding:2px 8px;font-size:.7rem}
.practice-card .qstem{font-size:.98em;line-height:1.62}
.practice-card .choices{gap:7px;margin:10px 0}
.practice-card .choice{gap:8px;padding:9px 10px;font-size:.9em;line-height:1.55}
.practice-card .choice .no{width:23px;height:23px;font-size:.76rem}
.practice-card .qactions{align-items:center;margin-top:10px}
.practice-card .qactions .primary{margin-left:auto}
.practice-card.answered{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.multi-explain{margin:9px 0;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.multi-explain>summary{cursor:pointer;padding:8px 11px;color:var(--accent);font-weight:700;font-size:.84rem}
.multi-explain>.explain{margin:0;border:0;border-top:1px solid var(--line);border-radius:0 0 9px 9px;font-size:.86em}
.practice-card-done{min-height:220px;opacity:.74}
.practice-card-done .empty{display:flex;min-height:145px;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 8px}
.lane-done-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--okbg);color:var(--ok);font-size:1.35rem;font-weight:900}
@media(max-width:1100px){.practice-triple-grid{grid-template-columns:repeat(3,minmax(280px,1fr));overflow-x:auto;padding-bottom:8px}}

/* mock grid */
.navgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:10px 0}
@media(max-width:520px){.navgrid{grid-template-columns:repeat(8,1fr)}}
.navgrid button{aspect-ratio:1;border:1px solid var(--line);background:var(--panel);border-radius:7px;cursor:pointer;font-size:.8rem;color:var(--sub)}
.navgrid button.answered{background:var(--chip);color:var(--ink);font-weight:700;border-color:var(--accent)}
.navgrid button.current{outline:2px solid var(--accent);outline-offset:1px}
.navgrid button.mk-ok{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.navgrid button.mk-ng{background:var(--ngbg);border-color:var(--ng);color:var(--ng)}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.1rem}
.timer.warn{color:var(--ng)}

/* result */
.scorebig{font-size:3rem;font-weight:800;line-height:1}
.passbadge{display:inline-block;padding:5px 16px;border-radius:999px;font-weight:800}
.passbadge.pass{background:var(--okbg);color:var(--ok)}
.passbadge.fail{background:var(--ngbg);color:var(--ng)}

/* essays */
.essay-body{white-space:pre-wrap;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:.93em;max-height:420px;overflow:auto}
details.acc{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--panel)}
details.acc>summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{content:"▸ ";color:var(--accent)}
details.acc[open]>summary::before{content:"▾ "}
details.acc .body{padding:0 14px 14px}

input[type=text],select{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
input[type=text]{width:100%}
.switch{display:flex;align-items:center;gap:8px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;box-shadow:var(--shadow);font-size:.88rem;z-index:60;opacity:0;transition:.25s}
.toast.show{opacity:1}
.empty{text-align:center;color:var(--sub);padding:36px 10px}
.kbd{font-size:.72rem;color:var(--sub);background:var(--chip);border-radius:5px;padding:1px 6px;border:1px solid var(--line)}
a{color:var(--accent)}

/* ---- 認証（ログイン／登録） ---- */
.userchip{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}
.auth-card{max-width:420px;margin:60px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:0;overflow:hidden}
.auth-tabs{display:flex;border-bottom:1px solid var(--line)}
.auth-tab{flex:1;border:0;background:transparent;color:var(--sub);font:inherit;font-size:.95rem;padding:14px;cursor:pointer;transition:.12s;border-bottom:2px solid transparent}
.auth-tab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:700}
.auth-form{padding:20px}
.auth-field{margin-top:12px}
.auth-input{display:block;width:100%;padding:11px 13px;font:inherit;font-size:.95rem;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:10px;margin-top:12px}
.auth-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.auth-error{display:none;color:var(--ng);font-size:.82rem;margin-top:10px;padding:7px 10px;background:var(--ngbg);border-radius:7px}
.auth-submit{display:block;width:100%;margin-top:14px;padding:12px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;font-size:.98rem;border-radius:10px;cursor:pointer;transition:.12s}
.auth-submit:hover{filter:brightness(1.06)}
.auth-submit:disabled{opacity:.6;cursor:not-allowed}
.auth-footer{margin-top:0;padding:0 20px 18px}