/* ============================================================
 * 5Bエクササイズ AIコーチング プロトタイプ専用スタイル
 * ============================================================ */
.s5-label { display:block; font-size:11px; font-weight:800; color:var(--muted); margin:10px 0 4px; }
.s5-seg { display:flex; gap:6px; }
.s5-seg button { flex:1; min-height:38px; border-radius:10px; border:1.5px solid var(--line); background:#fff; color:var(--text-2); font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; }
.s5-seg button.on { background:linear-gradient(135deg,#0EA5E9,#14B8A6); color:#fff; border-color:transparent; }
.s5-gear { margin-left:auto; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:18px; cursor:pointer; }

.s5-cat { font-size:11px; font-weight:800; letter-spacing:0.08em; color:var(--brand-dark); margin-bottom:6px; }
.s5-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line-2); }
.s5-row:first-of-type { border-top:0; }
.s5-row.off { opacity:0.55; }
.s5-check { position:relative; width:26px; height:26px; flex-shrink:0; }
.s5-check input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.s5-check span { position:absolute; inset:0; border-radius:8px; border:2px solid var(--line); background:#fff; }
.s5-check input:checked + span { background:linear-gradient(135deg,#0EA5E9,#14B8A6); border-color:transparent; }
.s5-check input:checked + span::after { content:""; position:absolute; left:8px; top:4px; width:6px; height:11px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg); }
.s5-check input:disabled + span { background:var(--line-2); }
.s5-prio { font-size:10px; font-weight:800; color:#B91C1C; background:rgba(239,68,68,0.10); padding:2px 8px; border-radius:999px; }
.s5-voice { font-size:10px; font-weight:800; color:var(--brand-dark); background:rgba(14,165,233,0.10); padding:2px 8px; border-radius:999px; }
.s5-na { font-size:10px; font-weight:700; color:var(--muted); background:var(--line-2); padding:2px 8px; border-radius:999px; }

.lv-tag { display:inline-block; font-size:11px; font-weight:900; padding:2px 9px; border-radius:999px; color:#fff; letter-spacing:0.04em; }
.lv-1 { background:#38BDF8; } .lv-2 { background:#0EA5E9; } .lv-3 { background:#0284C7; } .lv-4 { background:#0369A1; } .lv-5 { background:#1E3A8A; }

.s5-progress { display:flex; align-items:center; gap:4px; margin:4px 0 14px; }
.s5-progress span { flex:1; height:6px; border-radius:3px; background:var(--line-2); }
.s5-progress span.done { background:#14B8A6; }
.s5-progress span.now { background:linear-gradient(90deg,#0EA5E9,#14B8A6); }
.s5-progress em { font-style:normal; font-size:11px; font-weight:800; color:var(--muted); margin-left:6px; white-space:nowrap; }

.s5-video { position:relative; border-radius:14px; overflow:hidden; background:#000; }
.s5-video video { display:block; width:100%; aspect-ratio:16/9; background:#000; }
.s5-video-cap { position:absolute; left:10px; top:8px; font-size:10px; font-weight:800; color:rgba(255,255,255,0.85); background:rgba(0,0,0,0.45); padding:2px 8px; border-radius:999px; }
.s5-video.small { margin:0 0 12px; }
.s5-video.small.collapsed { display:none; }
.s5-two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.s5-two > div { padding:10px 12px; border-radius:12px; background:var(--bg-soft); border:1px solid var(--line-2); }
.s5-k { font-size:11px; font-weight:800; color:var(--muted); letter-spacing:0.04em; }
.s5-k.mv { color:#0D9488; } .s5-k.fx { color:#7C6BB5; }
.s5-v { font-size:13px; font-weight:700; color:var(--ink); margin-top:2px; line-height:1.6; }
.s5-cond { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.s5-cond li { padding:10px 12px; border-radius:10px; background:rgba(20,184,166,0.08); color:var(--ink); font-size:14px; font-weight:700; line-height:1.6; }
.s5-cond li::before { content:"◯ "; color:#0D9488; font-weight:900; }
.s5-cond.plain li { background:var(--bg-soft); font-weight:600; font-size:13px; }
.s5-cond.plain li::before { content:"・"; color:var(--muted); }
.s5-last { margin-top:10px; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid var(--line-2); }
.s5-details { margin:12px 0 0; border:1px solid var(--line); border-radius:12px; padding:0 12px; background:#fff; }
.s5-details summary { cursor:pointer; padding:11px 0; font-size:13px; font-weight:700; color:var(--text-2); }
.s5-details .s5-video { margin:0 0 10px; }
.s5-pre { white-space:pre-wrap; font-size:11px; line-height:1.6; color:var(--text-2); background:var(--bg-soft); padding:10px; border-radius:8px; margin:0 0 12px; max-height:320px; overflow:auto; }

/* セッション画面 */
.s5-session .s5-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.s5-stage { border-radius:20px; padding:22px 16px 18px; text-align:center; background:linear-gradient(160deg,rgba(14,165,233,0.08),rgba(20,184,166,0.12)); border:1px solid rgba(14,165,233,0.2); margin-bottom:12px; }
.s5-ring { width:168px; height:168px; border-radius:50%; margin:0 auto; padding:8px; background:conic-gradient(#0EA5E9,#14B8A6,#0EA5E9); transition:transform .3s; }
.s5-ring-inner { width:100%; height:100%; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.s5-clock { font-size:40px; font-weight:900; color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1; }
.s5-guide { font-size:11px; font-weight:700; color:var(--muted); margin-top:6px; }
.s5-stage.speaking .s5-ring { animation:s5pulse 1.2s ease-in-out infinite; }
.s5-stage.listening .s5-ring { background:conic-gradient(#F59E0B,#F97316,#F59E0B); }
.s5-stage.connecting .s5-ring { animation:s5spin 1.6s linear infinite; }
.s5-stage.idle .s5-ring, .s5-stage.error .s5-ring { background:var(--line); }
.s5-stage.error { border-color:rgba(239,68,68,0.4); }
@keyframes s5pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
@keyframes s5spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .s5-stage .s5-ring { animation:none !important; } }
.s5-state { margin-top:12px; font-size:15px; font-weight:800; color:var(--ink); }
.s5-error { margin-top:10px; font-size:12px; color:#B91C1C; line-height:1.6; background:rgba(239,68,68,0.08); padding:10px; border-radius:10px; }
.s5-link { border:0; background:transparent; color:var(--brand-dark); font-weight:800; text-decoration:underline; cursor:pointer; font-family:inherit; font-size:12px; }
.s5-start { margin-top:14px; min-height:58px; font-size:18px; }
.s5-hint { margin:8px 0 0; font-size:11px; color:var(--muted); line-height:1.6; }
.s5-marks { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.s5-mark { font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; border:1.5px solid var(--line); color:var(--muted); background:#fff; }
.s5-mark.past { background:var(--line-2); color:var(--text-2); }
.s5-mark.target { border-color:var(--brand); color:var(--brand-dark); }
.s5-mark.ok { background:#14B8A6; border-color:#14B8A6; color:#fff; }
.s5-mark.partial { background:#FDE68A; border-color:#F59E0B; color:#92400E; }
.s5-mark.ng { background:rgba(239,68,68,0.12); border-color:#EF4444; color:#B91C1C; }
.s5-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px; }
.s5-ctl { min-height:46px; border-radius:12px; border:1.5px solid var(--line); background:#fff; color:var(--ink); font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; }
.s5-ctl:disabled { opacity:0.45; cursor:default; }
.s5-ctl.primary { background:linear-gradient(135deg,#0EA5E9,#14B8A6); color:#fff; border-color:transparent; }
.s5-log { max-height:220px; overflow-y:auto; margin:8px 0; display:flex; flex-direction:column; gap:6px; }
.s5-msg { font-size:13px; line-height:1.6; padding:8px 10px; border-radius:10px; background:var(--bg-soft); color:var(--ink); }
.s5-msg span { display:block; font-size:10px; font-weight:800; color:var(--muted); margin-bottom:2px; }
.s5-msg.user { background:rgba(14,165,233,0.10); }
.s5-msg.sys { background:rgba(20,184,166,0.10); color:var(--text-2); font-size:12px; }
.s5-msg.live { opacity:0.75; border:1px dashed var(--line); }
.s5-textrow { display:flex; gap:8px; align-items:center; }
.s5-textrow .input { flex:1; }

/* 接続の準備状況・診断 */
.s5-ready { border-radius:14px; padding:12px 14px; margin-bottom:14px; font-size:13px; line-height:1.6; }
.s5-ready.ok { background:rgba(20,184,166,0.10); border:1px solid rgba(20,184,166,0.35); color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.s5-ready.warn { background:#FFFBEB; border:1.5px solid #F59E0B; color:#78350F; }
.s5-diag { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.s5-diag-row { display:flex; gap:8px; align-items:flex-start; font-size:12px; padding:8px 10px; border-radius:8px; background:var(--bg-soft); color:var(--ink); line-height:1.5; }
.s5-diag-row.ng { background:rgba(239,68,68,0.08); }
.s5-diag-row.ok { background:rgba(20,184,166,0.08); }
.s5-diag-detail { font-size:11px; color:var(--text-2); word-break:break-all; }

/* アンケート */
.s5-opts { display:flex; flex-wrap:wrap; gap:6px; }
.s5-opt { padding:8px 12px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--text-2); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.s5-opt.on { background:linear-gradient(135deg,#0EA5E9,#14B8A6); color:#fff; border-color:transparent; }