/* ============================================================
   受講管理画面（ログイン / 受講者ダッシュボード / 管理者ダッシュボード）
   ============================================================ */
:root{
  --ink:#14110f; --ink-2:#3d3733; --ink-3:#6f6862;
  --line:#e2ddd7; --line-2:#cfc8c0;
  --paper:#fff; --paper-2:#faf8f6; --paper-3:#f2eee9;
  --accent:#c1502e; --accent-2:#e07a55; --accent-soft:#fbeee8;
  --ok:#2f7d5c; --ok-soft:#e8f4ee;
  --warn:#a8730f; --warn-soft:#fbf1dc;
  --ng:#a83232; --ng-soft:#fbeaea;
  --info:#2b5f96; --info-soft:#e8f0f8;
  --dark:#14110f; --dark-2:#1d1917; --dark-3:#221e1b; --dark-line:#332e2a;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",
    "Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--dark);color:#e9e3dc;font-family:var(--sans);line-height:1.8;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:460px}

/* ---------- ヘッダ ---------- */
header{border-bottom:1px solid var(--dark-line);padding:20px 0;margin-bottom:34px}
header .in{max-width:1120px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:16px}
header .brand{font-size:15px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
header .brand::before{content:"✳";color:var(--accent-2);font-size:17px}
header .sp{flex:1}
header .who{font-size:12.5px;color:#8d837b;text-align:right;line-height:1.5}
header .who b{display:block;color:#e9e3dc;font-size:13px}
header .tabs{display:flex;gap:4px}
header .tabs a{font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:6px;color:#a89e96}
header .tabs a:hover{background:var(--dark-3);color:#fff}
header .tabs a.on{background:var(--accent);color:#fff}
.lnk{font-size:12.5px;color:#8d837b;border:1px solid var(--dark-line);padding:6px 12px;border-radius:6px}
.lnk:hover{border-color:var(--accent-2);color:#fff}

/* ---------- 見出し ---------- */
.eb{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--accent-2);
  border:1.5px solid var(--accent-2);padding:4px 11px;margin-bottom:16px}
h1{font-size:32px;line-height:1.3;font-weight:800;letter-spacing:.005em}
h2{font-size:14px;font-weight:800;letter-spacing:.16em;color:#8d837b;margin:40px 0 16px}
.sub{margin-top:10px;font-size:15px;color:#a89e96}

/* ---------- カード ---------- */
.card{background:var(--dark-2);border:1px solid var(--dark-line);padding:22px 24px;border-radius:10px}
.card+.card{margin-top:12px}

/* ---------- 全体ゲージ ---------- */
.overall{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:12px;
  padding:26px 28px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.overall .lab{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:#8d837b;margin-bottom:10px}
.overall .bigbar{height:16px;background:var(--dark-line);border-radius:8px;overflow:hidden}
.overall .bigbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:8px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.overall .meta{margin-top:12px;font-size:13px;color:#8d837b}
.overall .meta b{color:#e9e3dc}
.overall .pct{font:800 52px/1 var(--mono);color:#fff;letter-spacing:-.02em;text-align:right}
.overall .pct span{font-size:20px;color:#8d837b}
.overall .done{font-size:12.5px;color:#8d837b;text-align:right;margin-top:6px}

/* ---------- 回カード ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sess{display:flex;gap:16px;background:var(--dark-2);border:1px solid var(--dark-line);
  padding:16px 18px;border-radius:10px;transition:border-color .2s,background .2s;position:relative}
.sess:hover{border-color:var(--accent-2);background:var(--dark-3)}
.sess .no{flex:0 0 40px;font:800 24px/1 var(--mono);color:#4a423c;padding-top:2px}
.sess.is-done .no{color:var(--ok)}
.sess.is-doing .no{color:var(--accent-2)}
.sess .bd{flex:1;min-width:0}
.sess .bd b{display:block;font-size:15.5px;font-weight:800;color:#fff;line-height:1.45}
.sess .bd .d{display:block;font-size:12.5px;color:#8d837b;margin-top:3px;line-height:1.6}
.sess .bar{display:block;height:6px;background:var(--dark-line);border-radius:3px;
  overflow:hidden;margin-top:11px}
.sess .bar i{display:block;height:100%;background:var(--accent-2);border-radius:3px;
  transition:width .6s cubic-bezier(.2,.8,.2,1)}
.sess.is-done .bar i{background:var(--ok)}
.sess .st{display:flex;justify-content:space-between;font-size:11.5px;color:#6f6862;margin-top:6px}
.sess .st b{color:#a89e96;font-weight:700}
.sess .chk{position:absolute;top:14px;right:16px;font-size:12px;font-weight:800;color:var(--ok)}

/* ---------- フォーム ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;color:#8d837b;margin-bottom:7px}
input[type=email],input[type=text]{
  width:100%;background:var(--dark-3);border:1px solid var(--dark-line);border-radius:8px;
  padding:12px 14px;color:#fff;font-size:15px;font-family:inherit}
input:focus{outline:none;border-color:var(--accent-2)}
input.code{font-family:var(--mono);font-size:22px;letter-spacing:.34em;text-align:center}
.btn{display:block;width:100%;background:var(--accent);color:#fff;border:0;border-radius:8px;
  padding:13px;font-size:15px;font-weight:800;cursor:pointer;transition:background .2s}
.btn:hover{background:#a8462a}
.btn:disabled{background:#4a423c;color:#8d837b;cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--dark-line);color:#a89e96}
.btn.ghost:hover{background:var(--dark-3);color:#fff}
.btn.sm{width:auto;padding:8px 16px;font-size:13px;display:inline-block}

.msg{border-radius:8px;padding:12px 15px;font-size:13.5px;line-height:1.7;margin-bottom:16px}
.msg.ok{background:#16281f;border:1px solid #2f5a45;color:#9fd9b4}
.msg.ng{background:#2b1a1a;border:1px solid #6b3a38;color:#e3a6a1}
.msg.info{background:#17222c;border:1px solid #35516b;color:#a9c8e0}
.msg.warn{background:#2a2317;border:1px solid #5c4a26;color:#dfc48a}
.hide{display:none !important}

/* ---------- 表（管理者） ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--dark-2);
  border-radius:10px;overflow:hidden}
.tbl th,.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--dark-line);
  vertical-align:middle}
.tbl th{background:var(--dark-3);font-size:12px;font-weight:800;color:#a89e96;
  letter-spacing:.06em;white-space:nowrap}
.tbl td{color:#c1b8b0}
.tbl td b{color:#fff}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--dark-3)}
.tbl .c{text-align:center;white-space:nowrap}
.tbl .mini{height:6px;width:110px;background:var(--dark-line);border-radius:3px;overflow:hidden;
  display:inline-block;vertical-align:middle;margin-right:9px}
.tbl .mini i{display:block;height:100%;background:var(--accent-2);border-radius:3px}
.tbl .mini.full i{background:var(--ok)}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:11px;
  white-space:nowrap}
.pill.on{background:#16281f;color:#6cc08a}
.pill.pend{background:#2a2317;color:#dfb15c}
.pill.off{background:#2b1a1a;color:#e4736b}
.pill.adm{background:#2c1d16;color:var(--accent-2)}

/* 12回ぶんのドット */
.dots{display:flex;gap:3px}
.dots i{width:14px;height:14px;border-radius:3px;background:var(--dark-line);display:block;
  font:700 8px/14px var(--mono);text-align:center;color:#6f6862}
.dots i.p{background:#4a3a30}
.dots i.d{background:var(--ok);color:#0d1a13}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
.stat{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:10px;padding:18px 20px}
.stat .v{font:800 32px/1 var(--mono);color:#fff}
.stat .k{font-size:12.5px;color:#8d837b;margin-top:7px}

.tools{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.tools input{width:auto;flex:1;min-width:200px;padding:9px 12px;font-size:13.5px}
.empty{text-align:center;color:#6f6862;padding:44px;font-size:14px}
footer{margin:60px 0 40px;padding-top:22px;border-top:1px solid var(--dark-line);
  font-size:12px;color:#6f6862;line-height:1.9}

@media(max-width:820px){
  .grid{grid-template-columns:1fr}
  .overall{grid-template-columns:1fr}
  .overall .pct,.overall .done{text-align:left}
  .stats{grid-template-columns:1fr 1fr}
  h1{font-size:25px}
}