/* ==========================================================
   Personality Development page — podium hero, Body Language
   Check, Interview Simulator, GD & interview section.
   Shared bits live in course-page.css.
   ========================================================== */

/* ---------- Hero ---------- */
.pd-hero{ width:100%; max-width:500px; display:block; margin:0 auto; overflow:visible; }
.pd-hero .pd-bubble{ font-family: var(--font-display); font-weight:700; font-size:14px; fill: var(--navy); text-anchor:middle; }
.pd-hero .pd-podium{ font-family: var(--font-display); font-weight:800; font-size:22px; fill:#8F4413; text-anchor:middle; }

/* ---------- Body language ---------- */
.bl-person{ width:100%; max-width:260px; display:block; margin:0 auto; }
.bl-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin-bottom:.55rem; }
.bl-label{ width:4.2rem; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--slate); }
.bl-gauge{ width:100%; max-width:240px; display:block; margin:0 auto; }
.bl-gauge .g-seg{ fill:none; stroke-width:16; }
.bl-gauge .g-low{ stroke:#E8836F; } .bl-gauge .g-mid{ stroke:#F2C462; } .bl-gauge .g-high{ stroke:#4FB58E; }
.bl-gauge .g-needle{ stroke:#10203D; stroke-width:5; stroke-linecap:round; }
.bl-score{ text-align:center; margin-top:-.4rem; }
.bl-score b{ font-family: var(--font-display); font-weight:800; font-size:2rem; color: var(--navy); }
.bl-score span{ font-weight:700; color: var(--slate); }
.bl-verdict{ text-align:center; font-weight:700; color: var(--coaching-accent); margin-bottom:.7rem; }
.bl-tips{ list-style:none; padding:0; margin:0; }
.bl-tips li{ display:flex; gap:.5rem; align-items:flex-start; font-size:.82rem; color: var(--ink); margin-bottom:.4rem; line-height:1.4; }
.bl-tips .is-good .bi{ color: var(--study-accent); }
.bl-tips .is-bad .bi{ color:#D9412C; }

/* ---------- Interview simulator ---------- */
.iv-count{ font-family: var(--font-display); font-weight:700; font-size:.85rem; color: var(--slate); }
.iv-qcard{ background: var(--navy); border-radius: var(--radius-md); padding:1.2rem 1.3rem; margin-bottom:.8rem; }
.iv-label{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color: var(--gold); }
.iv-question{ font-family: var(--font-display); font-weight:700; font-size:1.35rem; color:#fff; margin:.3rem 0 .8rem; line-height:1.3; }
.iv-qcard .iv-nav{
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  --bs-btn-bg: rgba(255,255,255,.14); --bs-btn-hover-bg: rgba(255,255,255,.26); --bs-btn-active-bg: rgba(255,255,255,.3);
  border:none; border-radius:999px; font-weight:700;
}
.iv-tipbox{ border:1px solid var(--line); border-radius: var(--radius-sm); padding:.6rem .9rem; margin-bottom:.8rem; background:#fff; }
.iv-tip-toggle{ border:none; background:none; padding:0; font-weight:700; color: var(--gold-deep); font-size:.88rem; }
.iv-tip{ display:none; font-size:.88rem; color: var(--ink); margin-top:.4rem !important; }
.iv-tipbox.is-open .iv-tip{ display:block; }
.iv-stage{ background: var(--paper); border-radius: var(--radius-md); padding:1.3rem; text-align:center; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; position:relative; }
.iv-timer{ width:130px; height:130px; }
.iv-timer .t-bg{ fill:none; stroke: var(--paper-dim); stroke-width:8; }
.iv-timer .t-fg{ fill:none; stroke: var(--coaching-accent); stroke-width:8; stroke-linecap:round; transition: stroke-dasharray .2s linear; }
.iv-dial{ position:relative; width:130px; height:130px; }
.iv-time{ position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.iv-time b{ display:block; font-family: var(--font-display); font-weight:800; font-size:2rem; color: var(--navy); line-height:1; }
.iv-time span{ font-size:.68rem; font-weight:700; color: var(--slate); text-transform:uppercase; letter-spacing:.06em; }
.iv-live{ min-height:2.6em; font-size:.88rem; font-style:italic; color: var(--ink); max-width:100%; overflow-wrap:anywhere; }
.iv-note{ font-size:.75rem; color: var(--slate); }
.iv-card.is-recording .iv-timer .t-fg{ stroke:#D9412C; }
.iv-card.is-recording .iv-stage{ box-shadow: inset 0 0 0 3px rgba(217,65,44,.25); }
.iv-start-timer{ display:none; }
.no-mic .iv-start-mic{ display:none; }
.no-mic .iv-start-timer{ display:inline; }

.iv-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap:.5rem; margin-bottom:.6rem; }
.iv-stats div{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding:.55rem .4rem; text-align:center; }
.iv-stats b{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.3rem; color: var(--navy); }
.iv-stats span{ font-size:.66rem; font-weight:700; color: var(--slate); text-transform:uppercase; letter-spacing:.05em; }
.iv-stats .is-warn b{ color:#D9412C; }
.iv-feedback{ font-size:.86rem; color: var(--ink); margin-bottom:.35rem; }
.iv-feedback .bi{ color: var(--coaching-accent); margin-right:.2rem; }
.iv-check{ list-style:none; padding:0; margin:0; font-size:.86rem; color: var(--ink); }
.iv-check li{ margin-bottom:.25rem; }
.iv-check input{ accent-color: var(--study-accent); margin-right:.35rem; }

/* ---------- GD & interview ---------- */
.gd-list{ list-style:none; padding:0; margin:0; }
.gd-list li{ position:relative; padding-left:1.6rem; font-size:.88rem; color: var(--ink); margin-bottom:.55rem; line-height:1.4; }
.gd-list li::before{ font-family:"bootstrap-icons"; position:absolute; left:0; top:0; }
.gd-list.is-do li::before{ content:"\F26A"; color: var(--study-accent); }
.gd-list.is-dont li::before{ content:"\F622"; color:#D9412C; }
.iv-steps{ display:flex; flex-direction:column; gap:.5rem; }
.iv-step{ display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border:1px solid var(--line); border-radius: var(--radius-sm); }
.iv-step > .bi{ color: var(--coaching-accent); font-size:1.2rem; }
.iv-step b{ display:block; color: var(--navy); font-size:.9rem; }
.iv-step span{ font-size:.8rem; color: var(--slate); }
.iv-step-num{ flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background: var(--navy); color:#fff; font-size:.75rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }