/* ============================================================
   NZ ITF TRAINING HUB — v4 engagement styles
   ============================================================ */

/* ---------- Today view ---------- */
.v4today{ display:block; padding:6px 2px; }
.v4hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:8px 6px 18px; }
.v4hero h2{ font-family:var(--display,'Archivo',sans-serif); font-style:italic; font-weight:800; text-transform:uppercase; font-size:1.7rem; color:#fff; }
.v4hero p{ color:#B4B2A9; font:400 14px Inter,sans-serif; margin-top:6px; max-width:460px; line-height:1.6; }
.v4hero p b{ color:#fff; }
.v4stats{ display:flex; gap:10px; }
.v4stat{ border:1px solid #33332f; border-radius:12px; padding:12px 18px; text-align:center; background:#0b0b0b; }
.v4stat b{ display:block; font-family:var(--display,'Archivo',sans-serif); font-style:italic; font-weight:800; font-size:1.35rem; color:#fff; }
.v4stat span{ font:600 9.5px Inter,sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:#6d6c66; }

.v4grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; }
.v4card{ border:1px solid #26261f; border-radius:13px; background:#131312; padding:18px; }
.v4h{ font:800 12px var(--display,'Archivo',sans-serif); font-style:italic; letter-spacing:1.4px; text-transform:uppercase; color:#fff; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.v4h span{ color:#6d6c66; font:600 10px Inter,sans-serif; letter-spacing:1px; }
.v4hint{ color:#6d6c66; font:400 12px Inter,sans-serif; margin-top:10px; line-height:1.55; }
.v4done{ color:#B4B2A9; font:400 13.5px Inter,sans-serif; line-height:1.6; }
.v4done a{ color:#fff; text-decoration:underline; }
.v4row{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.v4best{ color:#6d6c66; font:600 11.5px Inter,sans-serif; letter-spacing:.4px; }
.v4pat{ color:#D3D1C7; font:400 14px Inter,sans-serif; }
.v4pat b{ color:#fff; }

.v4btn{
  border:1px solid #444441; background:none; color:#D3D1C7; border-radius:9px; cursor:pointer;
  font:600 12.5px Inter,sans-serif; letter-spacing:.4px; padding:10px 15px; text-decoration:none; display:inline-block;
  transition:border-color .13s, transform .13s;
}
.v4btn:hover{ border-color:#D3D1C7; color:#fff; transform:translateY(-1px); }
.v4btn.solid{ background:#fff; color:#0b0b0b; border-color:#fff; font-weight:700; }
.v4btn.solid:hover{ box-shadow:0 8px 22px -8px rgba(255,255,255,.4); }

.v4focus{
  display:flex; gap:12px; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid #1e1e1c;
  padding:11px 2px; cursor:pointer; align-items:flex-start;
}
.v4focus:last-of-type{ border-bottom:0; }
.v4focus .box{
  flex:0 0 auto; width:20px; height:20px; border:2px solid #444441; border-radius:6px; margin-top:2px;
  transition:background .2s, border-color .2s; position:relative;
}
.v4focus:hover .box{ border-color:#D3D1C7; }
.v4focus.done .box{ background:var(--belt,#F0C93C); border-color:var(--belt,#F0C93C); }
.v4focus.done .box::after{ content:'\2713'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#0b0b0b; font-weight:800; font-size:13px; }
.v4focus .tx b{ display:block; color:#fff; font:600 13.5px Inter,sans-serif; }
.v4focus .tx i{ display:block; color:#8a8983; font:italic 400 12px Inter,sans-serif; margin-top:1px; }
.v4focus .tx em{ display:block; color:#5c5b55; font:600 9.5px Inter,sans-serif; letter-spacing:1.2px; text-transform:uppercase; font-style:normal; margin-top:3px; }
.v4focus.done .tx b{ text-decoration:line-through; color:#8a8983; }

.v4term{
  display:block; width:100%; text-align:left; background:#0f0f0e; border:1px solid #26261f; border-radius:10px;
  padding:12px 14px; margin-bottom:8px; cursor:pointer;
}
.v4term b{ color:#fff; font:700 14.5px Inter,sans-serif; display:block; }
.v4term .ans{ display:none; color:#B4B2A9; font:400 12.5px Inter,sans-serif; margin-top:4px; }
.v4term .tap{ color:#5c5b55; font:600 9.5px Inter,sans-serif; letter-spacing:1.3px; text-transform:uppercase; }
.v4term.open .ans{ display:block; }
.v4term.open .tap{ display:none; }
.v4term.open{ border-color:var(--belt,#F0C93C); }

/* ---------- badge shelf ---------- */
.v4shelf-card{ grid-column:1 / -1; }
.v4shelf{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:9px; }
.v4badge{
  border:1px solid #22221f; border-radius:11px; padding:12px 8px; text-align:center;
  opacity:.38; filter:grayscale(1);
}
.v4badge.on{ opacity:1; filter:none; border-color:#444441; background:#0f0f0e; }
.v4badge .i{ font-size:22px; display:block; }
.v4badge .n{ display:block; margin-top:5px; color:#B4B2A9; font:600 10px Inter,sans-serif; letter-spacing:.6px; text-transform:uppercase; }
.v4badge.on .n{ color:#fff; }

/* ---------- overlays (sprint + coach) ---------- */
.v4over{ position:fixed; inset:0; z-index:100001; background:rgba(5,5,5,.82); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px; }
.v4sheet{
  width:min(480px,96vw); background:#141413; border:1px solid #444441; border-radius:16px; overflow:hidden;
  box-shadow:0 50px 140px -20px rgba(0,0,0,.9); animation:v3pop .18s ease both;
}
.v4body{ padding:20px 22px 24px; }
.v4bar{ height:5px; background:#26261f; }
.v4bar i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#F2F1EC 0 16.6%,#F0C93C 16.6% 33.3%,#3F9C55 33.3% 50%,#2E6FB2 50% 66.6%,#C43B34 66.6% 83.3%,#000 83.3% 100%); transition:width 1s linear; }
.v4bar.dark{ border-radius:99px; overflow:hidden; margin-top:16px; }
.v4bar.dark i{ background:var(--belt,#F0C93C); transition:width .3s ease; }
.v4sp-top{ display:flex; justify-content:space-between; align-items:center; color:#B4B2A9; font:600 12.5px Inter,sans-serif; margin-bottom:10px; }
.v4sp-top b{ color:#fff; }
.v4x{ background:none; border:0; color:#6d6c66; font-size:16px; cursor:pointer; }
.v4x:hover{ color:#fff; }
.v4sp-kor{ font-family:var(--display,'Archivo',sans-serif); font-style:italic; font-weight:800; font-size:1.9rem; color:#fff; text-align:center; margin:16px 0 2px; }
.v4sp-ask{ text-align:center; color:#6d6c66; font:400 12.5px Inter,sans-serif; margin-bottom:16px; }
.v4opt{
  display:block; width:100%; text-align:left; background:#0f0f0e; border:1px solid #33332f; border-radius:10px;
  color:#D3D1C7; font:600 14px Inter,sans-serif; padding:13px 15px; margin-bottom:8px; cursor:pointer;
  transition:border-color .12s;
}
.v4opt:hover{ border-color:#D3D1C7; }
.v4opt.good{ border-color:#3F9C55; background:rgba(63,156,85,.12); color:#fff; }
.v4opt.bad{ border-color:#C43B34; background:rgba(196,59,52,.12); }
.v4sp-end{ text-align:center; padding:8px 0 4px; color:#B4B2A9; font:400 14px Inter,sans-serif; }
.v4sp-end .big{ font-family:var(--display,'Archivo',sans-serif); font-style:italic; font-weight:800; font-size:3.4rem; color:#fff; }

.v4co-tech{ font-family:var(--display,'Archivo',sans-serif); font-style:italic; font-weight:800; font-size:1.55rem; color:#fff; text-align:center; margin-top:18px; line-height:1.2; }
.v4co-kor{ text-align:center; color:#B4B2A9; font:italic 400 14px Inter,sans-serif; margin-top:6px; }
.v4co-meta{ text-align:center; color:#6d6c66; font:600 11px Inter,sans-serif; letter-spacing:1.2px; text-transform:uppercase; margin-top:8px; }

/* ---------- toasts ---------- */
.v4toasts{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:100005; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.v4toast{
  background:#0b0b0b; border:1px solid #444441; color:#fff; border-radius:99px;
  font:600 13px Inter,sans-serif; padding:11px 20px; box-shadow:0 16px 40px rgba(0,0,0,.6);
  animation:v4up .3s ease both;
}
.v4toast.out{ opacity:0; transition:opacity .4s; }
@keyframes v4up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media (max-width:860px){
  .v4hero{ padding-bottom:12px; }
  .v4stats{ width:100%; }
  .v4stat{ flex:1; padding:10px 8px; }
  .v4toasts{ bottom:78px; }
}
.v4btn.v4on{ border-color:var(--belt,#F0C93C); color:#fff; }