/* ============================================================
   Adamant SES営業 e-learning — base styles (P1)
   ============================================================ */
:root{
  --bg:#f4f6f9; --surface:#ffffff; --ink:#1f2933; --muted:#69707d;
  --line:#e2e7ee; --primary:#2563eb; --primary-d:#1d4ed8;
  --danger:#dc2626; --ok:#16a34a; --warn:#d97706;
  --radius:10px; --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65; font-size:15px;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted); font-size:.92em}

/* ---- topbar (logged-in) ---- */
.topbar{background:var(--surface); border-bottom:1px solid var(--line)}
.topbar__inner{max-width:960px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:16px}
.brand{font-weight:700; color:var(--ink); font-size:1.05rem}
.brand:hover{text-decoration:none}
.nav{margin-left:auto; display:flex; align-items:center; gap:14px}
.nav__link{color:var(--muted); font-size:.92rem}
.nav__link.is-active{color:var(--ink); font-weight:600}
.nav__user{color:var(--muted); font-size:.88rem}
.nav__logout{margin:0}

/* ---- layout ---- */
.container{max-width:960px; margin:24px auto; padding:0 20px}
.footer{max-width:960px; margin:40px auto; padding:0 20px; color:var(--muted)}
.page-head{margin-bottom:18px}
.page-title{font-size:1.4rem; margin:0 0 4px}
.page-lead{color:var(--muted); margin:0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}

/* ---- cards ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:16px}
.card--narrow{max-width:480px}
.card__title{font-size:1.05rem; margin:0 0 10px}

/* ---- flash ---- */
.flash{border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:.92rem; border:1px solid transparent}
.flash--success{background:#ecfdf3; color:#117a3d; border-color:#abefc6}
.flash--error{background:#fef3f2; color:#b42318; border-color:#fecdca}
.flash--info{background:#eff8ff; color:#175cd3; border-color:#b2ddff}

/* ---- forms ---- */
.form{display:flex; flex-direction:column; gap:14px}
.form--inline{gap:10px}
.field{display:flex; flex-direction:column; gap:5px}
.field__label{font-size:.86rem; font-weight:600; color:#3b4453}
.field__hint{font-weight:400; color:var(--muted); font-size:.82em}
.field__input{
  width:100%; padding:9px 11px; border:1px solid #cbd3df; border-radius:8px;
  font-size:1rem; background:#fff; transition:border-color .15s,box-shadow .15s;
}
.field__input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.field__input--code{letter-spacing:.3em; font-size:1.25rem; text-align:center; font-variant-numeric:tabular-nums}
.field__error{color:var(--danger); font-size:.82rem}

/* ---- buttons ---- */
.btn{
  display:inline-block; padding:9px 16px; border-radius:8px; border:1px solid transparent;
  font-size:.95rem; font-weight:600; cursor:pointer; background:#eef1f6; color:var(--ink); text-align:center;
}
.btn:hover{text-decoration:none; filter:brightness(.98)}
.btn--primary{background:var(--primary); color:#fff}
.btn--primary:hover{background:var(--primary-d)}
.btn--danger{background:var(--danger); color:#fff}
.btn--ghost{background:transparent; border-color:#cbd3df; color:#3b4453}
.btn--sm{padding:6px 12px; font-size:.85rem}
.btn--block{width:100%}

/* ---- auth pages ---- */
.auth-body{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:24px}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); width:100%; max-width:400px; padding:28px}
.auth-card__brand{font-weight:700; text-align:center; margin-bottom:16px}
.auth-card__title{font-size:1.25rem; margin:0 0 6px; text-align:center}
.auth-card__lead{color:var(--muted); font-size:.9rem; margin:0 0 16px; text-align:center}
.auth-links{display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:.86rem; flex-wrap:wrap}
.auth-footer{margin-top:18px; color:var(--muted)}

/* ---- key-value ---- */
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0}
.kv dt{color:var(--muted); font-size:.86rem}
.kv dd{margin:0}

/* ---- badges ---- */
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.78rem; font-weight:600}
.badge--ok{background:#ecfdf3; color:#117a3d}
.badge--off{background:#f1f3f7; color:var(--muted)}
.status-on{color:var(--ok); font-weight:600}

/* ---- TOTP setup ---- */
.steps{margin:0 0 16px; padding-left:20px; color:#3b4453}
.steps li{margin-bottom:6px}
.totp-setup{display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; margin-bottom:18px}
.totp-setup__qr{min-width:180px}
.totp-setup__qr #qr{width:180px; height:180px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--line); border-radius:8px}
.secret-key{display:inline-block; background:#0f172a; color:#e2e8f0; padding:8px 12px; border-radius:8px; font-size:1.05rem; letter-spacing:.12em}
.recovery-codes{list-style:none; padding:0; margin:14px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px}
.recovery-codes code{display:block; background:#0f172a; color:#e2e8f0; padding:8px; border-radius:6px; text-align:center; letter-spacing:.08em}

/* ---- badges (exam) ---- */
.badge--perfect{background:#fef3c7; color:#92400e}
.badge--try{background:#eff8ff; color:#175cd3}
.badge--fail{background:#fef3f2; color:#b42318}
.badge--diff{background:#eef1f6; color:#3b4453}
.badge--multi{background:#f3e8ff; color:#7e22ce}

/* ---- sections / set list (exam index) ---- */
.section{margin:22px 0}
.section__title{font-size:1.05rem; margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.set-list{display:grid; gap:10px}
.set{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 16px; box-shadow:var(--shadow)}
.set__main{flex:1; min-width:0}
.set__name{font-weight:600}
.set__desc{font-size:.85rem; margin-top:2px}
.set__badge{margin-top:6px; display:flex; align-items:center; gap:10px}
.set__attempts{font-size:.8rem}
.set__go{margin:0}
.card--accent{border-left:4px solid var(--primary)}

/* ---- stats (dashboard) ---- */
.stat-row{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px}
.stat{text-align:center; min-width:70px}
.stat__num{font-size:1.5rem; font-weight:700}
.stat__label{font-size:.78rem; color:var(--muted)}

/* ---- quiz ---- */
.quiz{display:flex; flex-direction:column; gap:16px}
.qcard{background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:18px}
.qcard__head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.qcard__no{font-weight:700}
.qcard__body{font-size:1.02rem; margin-bottom:12px}
.qcard__choices{display:flex; flex-direction:column; gap:8px}
.choice{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid #dce2ea; border-radius:8px; cursor:pointer}
.choice:hover{background:#f7f9fc}
.choice input{margin-top:3px}
.choice__body{flex:1}
.choice--static{cursor:default}
.choice--static:hover{background:transparent}
.choice--correct{background:#ecfdf3; border-color:#abefc6}
.choice--wrong{background:#fef3f2; border-color:#fecdca}
.quiz__actions{display:flex; gap:12px; align-items:center; margin-top:8px}
.btn--lg{padding:12px 24px; font-size:1.05rem}

/* ---- result ---- */
.result-hero{display:flex; align-items:center; gap:24px; padding:22px; border-radius:12px; margin-bottom:16px; border:1px solid var(--line); background:var(--surface)}
.result-hero.is-perfect{background:#fffbeb; border-color:#fde68a}
.result-hero.is-pass{background:#ecfdf3; border-color:#abefc6}
.result-hero.is-fail{background:#fef3f2; border-color:#fecdca}
.result-hero__score{font-size:3rem; font-weight:800; line-height:1}
.result-hero__score .unit{font-size:1.2rem; margin-left:2px}
.result-hero__count{font-weight:600}
.result-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.qcard--result.is-correct{border-left:4px solid var(--ok)}
.qcard--result.is-wrong{border-left:4px solid var(--danger)}
.qcard__mark{margin-left:auto}
.mark-ok{color:var(--ok); font-weight:700}
.mark-ng{color:var(--danger); font-weight:700}
.tag{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; font-size:.72rem; font-weight:600; vertical-align:middle}
.tag--correct{background:#16a34a; color:#fff}
.tag--you{background:#e2e8f0; color:#334155}
.qcard__explain{margin-top:12px; padding:12px 14px; background:#f8fafc; border-radius:8px; font-size:.92rem; color:#334155}

/* ---- data tables (history / admin) ---- */
.data-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow)}
.data-table th,.data-table td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle}
.data-table thead th{background:#f7f9fc; color:#3b4453; font-size:.82rem; font-weight:600}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:#f9fbfd}
.ta-r{text-align:right !important}
.ta-c{text-align:center !important}
.ta-actions a,.ta-actions form{margin-left:10px}
.cell-body{max-width:420px}
.link-danger{background:none; border:none; color:var(--danger); cursor:pointer; font-size:.92rem; padding:0}
.link-danger:hover{text-decoration:underline}

/* ---- page head row / forms ---- */
.page-head--row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.field-row{display:flex; gap:14px; flex-wrap:wrap}
.field-row .field{flex:1; min-width:140px}
.form-actions{display:flex; gap:12px; align-items:center; margin-top:6px}
.admin-actions{display:flex; gap:10px; margin-bottom:8px}
.danger-zone{border-color:#fecdca}

/* ---- filter bar / pager ---- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center}
.filter-bar .field__input{width:auto; min-width:140px}
.pager{display:flex; gap:12px; align-items:center; justify-content:center; margin-top:16px}
.pager__info{color:var(--muted); font-size:.9rem}

/* ---- accuracy bars ---- */
.acc-row{display:grid; grid-template-columns:200px 1fr 130px; gap:12px; align-items:center; padding:7px 0}
.acc-row + .acc-row{border-top:1px solid var(--line)}
.acc-row__label{font-size:.9rem}
.acc-row__bar{background:#eef1f6; border-radius:999px; height:12px; overflow:hidden}
.acc-row__val{font-size:.86rem; text-align:right}
.bar{height:100%; border-radius:999px}
.bar--good{background:#16a34a}
.bar--mid{background:#d97706}
.bar--low{background:#dc2626}

/* ---- choice editor (admin question form) ---- */
.choice-editor{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.choice-editor__row{display:flex; gap:10px; align-items:center}
.choice-editor__correct{display:flex; align-items:center; gap:4px; font-size:.8rem; color:var(--muted); white-space:nowrap; border:1px solid var(--line); border-radius:8px; padding:6px 8px; cursor:pointer}
.choice-editor__row .field__input{flex:1}

@media (max-width:640px){
  .acc-row{grid-template-columns:1fr; gap:4px}
  .acc-row__val{text-align:left}
}

/* ---- misc ---- */
.todo-list{margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:.9rem}
.error-page{text-align:center; padding:48px 16px}
.error-page h1{font-size:3rem; margin:0 0 8px}
.error-trace{text-align:left; background:#fff5f5; border:1px solid #fecdca; padding:14px; border-radius:8px; overflow:auto; font-size:.8rem; white-space:pre-wrap}