/* Homepage sample progress dashboard (.yks-pd). Final state is the default; .is-armed:not(.is-in) holds the pre-animation state. */
.yks-pd{margin:56px auto 0;max-width:1120px;font-family:inherit;}
.yks-pd *,.yks-pd *:before,.yks-pd *:after{box-sizing:border-box;}
.yks-pd ul{list-style:none;margin:0;padding:0;}
.yks-pd ul li{margin:0;}
.yks-pd h3,.yks-pd h4,.yks-pd p{margin:0;}

.yks-pd__intro{text-align:center;max-width:760px;margin:0 auto 26px;}
.yks-pd__kicker{display:inline-block;color:#c62d27;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.yks-pd__title{color:#0b2146;font-size:clamp(22px,2.6vw,30px);line-height:1.2;font-weight:800;margin-bottom:10px;}
.yks-pd__lead{color:#5b6474;font-size:16px;line-height:1.6;}

.yks-pd__frame{
  position:relative;overflow:hidden;color:#fff;border-radius:22px;padding:16px 22px 22px;
  background:
    radial-gradient(circle at 100% -20%,rgba(198,45,39,.22),transparent 38%),
    radial-gradient(circle at 0% 110%,rgba(127,176,255,.12),transparent 45%),
    linear-gradient(160deg,#12305e 0%,#0b2146 55%,#081a38 100%);
  box-shadow:0 30px 60px -20px rgba(11,33,70,.55),0 0 0 1px rgba(11,33,70,.08);
}
.yks-pd__bar{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);}
.yks-pd__dots{display:inline-flex;gap:6px;}
.yks-pd__dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57;}
.yks-pd__dots i:nth-child(2){background:#febc2e;}
.yks-pd__dots i:nth-child(3){background:#28c840;}
.yks-pd__bar-title{color:#b7c3d8;font-size:13px;font-weight:700;letter-spacing:.02em;}
.yks-pd__badge{
  position:absolute;top:12px;right:18px;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
}

.yks-pd__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.yks-pd__avatar{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,#ff5a52,#c62d27);box-shadow:0 6px 16px rgba(198,45,39,.45);
}
.yks-pd__who{display:flex;flex-direction:column;line-height:1.3;}
.yks-pd__who strong{font-size:16px;}
.yks-pd__who span{color:#a9b8d0;font-size:13px;}
.yks-pd__chips{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.yks-pd__chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);}
.yks-pd__chip--live i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:yks-pd-live 2s infinite;}

.yks-pd__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.yks-pd__kpi{
  padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:4px;transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i) * .1s);
}
.yks-pd__kpi-label{color:#a9b8d0;font-size:12.5px;font-weight:700;}
.yks-pd__kpi-value{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.yks-pd__kpi-delta{align-self:flex-start;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:800;color:#4ade80;background:rgba(74,222,128,.12);}
.yks-pd__kpi-delta.is-down{color:#ffb4b0;background:rgba(255,90,82,.16);}
.yks-pd__kpi-delta.is-flat{color:#c9d4e6;background:rgba(255,255,255,.08);}

.yks-pd__grid{display:grid;gap:14px;}
.yks-pd__grid + .yks-pd__grid{margin-top:14px;}
.yks-pd__grid--main{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);}
.yks-pd__grid--bottom{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);}
.yks-pd__card{padding:14px 16px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);min-width:0;}
.yks-pd__card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.yks-pd__card-head h4{font-size:14px;font-weight:800;color:#fff;}
.yks-pd__legend{display:inline-flex;align-items:center;gap:6px;color:#b7c3d8;font-size:12px;font-weight:700;}
.yks-pd__legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.yks-pd__legend i.is-tyt{background:#ff5a52;}
.yks-pd__legend i.is-ayt{background:#7fb0ff;margin-left:8px;}

.yks-pd__chart{display:block;width:100%;height:auto;overflow:visible;}
.yks-pd__gridline{stroke:rgba(255,255,255,.1);stroke-dasharray:3 5;}
.yks-pd__axis{fill:#9fb0cc;font-size:11px;font-weight:600;}
.yks-pd__line{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.9s cubic-bezier(.45,.05,.2,1);}
.yks-pd__line--tyt{stroke:#ff5a52;filter:drop-shadow(0 4px 10px rgba(255,90,82,.45));transition-delay:.35s;}
.yks-pd__line--ayt{stroke:#7fb0ff;stroke-width:3;transition-delay:.15s;}
.yks-pd__area{transition:opacity 1s ease 1.6s;}
.yks-pd__dot{fill:#0b2146;stroke-width:2.5;transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.3s + var(--i) * .17s);}
.yks-pd__dot--tyt{stroke:#ff5a52;}
.yks-pd__dot--ayt{stroke:#7fb0ff;}
.yks-pd__dot.is-last{fill:#fff;}
.yks-pd__pulse{fill:none;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0;animation:yks-pd-pulse 2.2s ease-out 2.4s infinite;}
.yks-pd__pulse--tyt{stroke:#ff5a52;}
.yks-pd__pulse--ayt{stroke:#7fb0ff;animation-delay:2.9s;}
.yks-pd__tip{transition:opacity .5s ease 2.1s,transform .5s ease 2.1s;}
.yks-pd__tip rect{fill:#fff;}
.yks-pd__tip text{fill:#0b2146;font-size:13px;font-weight:800;}
.yks-pd__tip--ayt rect{fill:#dce9ff;}

.yks-pd__subjects{display:flex;flex-direction:column;gap:14px;}
.yks-pd__subjects li{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:baseline;}
.yks-pd__subj-name{font-size:13.5px;font-weight:700;}
.yks-pd__subj-val{color:#b7c3d8;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.yks-pd__track{grid-column:1 / -1;position:relative;height:9px;border-radius:999px;background:rgba(255,255,255,.08);}
.yks-pd__fill-to{position:absolute;inset:0 auto 0 0;width:var(--to);border-radius:inherit;background:linear-gradient(90deg,#c62d27,#ff5a52);box-shadow:0 0 12px rgba(255,90,82,.45);transition:width 1.2s cubic-bezier(.3,.8,.3,1);transition-delay:calc(.6s + var(--i) * .14s);}
.yks-pd__fill-from{position:absolute;top:-3px;bottom:-3px;left:var(--from);width:2px;margin-left:-1px;border-radius:2px;background:#fff;opacity:.85;z-index:1;}
.yks-pd__legend-note{margin-top:12px!important;color:#a9b8d0;font-size:12px;line-height:1.5;}
.yks-pd__empty{color:#b7c3d8;font-size:13.5px;line-height:1.6;padding:14px;border:1px dashed rgba(255,255,255,.18);border-radius:12px;}
.yks-pd__card--chart .yks-pd__empty{min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;}

.yks-pd__plan{display:flex;flex-direction:column;gap:11px;}
.yks-pd__plan li{display:grid;grid-template-columns:20px 1fr auto;gap:5px 10px;align-items:center;}
.yks-pd__check{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);position:relative;transition:background .3s ease,border-color .3s ease;transition-delay:calc(1s + var(--i) * .15s);}
.yks-pd .yks-pd__check--btn{display:block;width:18px;height:18px;min-width:0;min-height:0;padding:0;margin:0;line-height:0;background:transparent;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;text-shadow:none;}
.yks-pd .yks-pd__check--btn:hover{border-color:#fff;}
.yks-pd .yks-pd__check--btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.yks-pd .yks-pd__plan li.is-done .yks-pd__check--btn{background:#22c55e;border-color:#22c55e;}
.yks-pd__plan form{margin:0;}
.yks-pd__plan li.is-done .yks-pd__check{background:#22c55e;border-color:#22c55e;}
.yks-pd__plan li.is-done .yks-pd__check:after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.yks-pd__task{font-size:13px;font-weight:600;color:#e6ecf6;min-width:0;}
.yks-pd__pct{font-size:12px;font-weight:800;color:#b7c3d8;font-variant-numeric:tabular-nums;}
.yks-pd__plan-track{grid-column:2 / -1;height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.yks-pd__plan-track span{display:block;height:100%;width:var(--pct);border-radius:inherit;background:#7fb0ff;transition:width 1s ease;transition-delay:calc(.8s + var(--i) * .15s);}
.yks-pd__plan li.is-done .yks-pd__plan-track span{background:#22c55e;}

.yks-pd__hours{display:flex;align-items:stretch;justify-content:space-between;gap:8px;height:172px;}
.yks-pd__hours li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0;}
.yks-pd__hour-val{font-size:11.5px;font-weight:800;color:#e6ecf6;font-variant-numeric:tabular-nums;}
.yks-pd__hour-bar{width:100%;max-width:30px;height:calc(var(--h) * .72);border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#7fb0ff,rgba(127,176,255,.25));transform-origin:bottom;transition:transform .9s cubic-bezier(.3,1.3,.5,1);transition-delay:calc(.7s + var(--i) * .09s);}
.yks-pd__hours li.is-hl .yks-pd__hour-bar{background:linear-gradient(180deg,#ff5a52,rgba(255,90,82,.25));}
.yks-pd__hour-day{font-size:11.5px;font-weight:700;color:#9fb0cc;}

.yks-pd__card--note{display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(198,45,39,.18),rgba(255,255,255,.04));}
.yks-pd__note-week{font-size:11.5px;font-weight:800;color:#ffb4b0;}
.yks-pd__note{flex:1;font-size:14.5px;line-height:1.6;color:#f1f4fa;padding-left:12px;border-left:3px solid #ff5a52;}
.yks-pd__note-sign{margin-top:12px;font-size:12px;font-weight:700;color:#a9b8d0;}

/* Host panels style `.card p` in grey; keep frame paragraphs light on the navy frame. */
.yks-pd .yks-pd__frame p{margin:0;}
.yks-pd .yks-pd__frame .yks-pd__empty{color:#d5deec;border-color:rgba(255,255,255,.28);}
.yks-pd .yks-pd__frame .yks-pd__note{color:#f1f4fa;}
.yks-pd .yks-pd__frame .yks-pd__legend-note{color:#c3cee0;}

.yks-pd--panel{margin:0 0 18px;max-width:none;}
.yks-pd--panel .yks-pd__bar-title,
.yks-pd--panel .yks-pd__who span,
.yks-pd--panel .yks-pd__kpi-label,
.yks-pd--panel .yks-pd__note-sign,
.yks-pd--panel .yks-pd__hour-day,
.yks-pd--panel .yks-pd__legend,
.yks-pd--panel .yks-pd__subj-val,
.yks-pd--panel .yks-pd__pct{color:#c9d4e6;}
.yks-pd--panel .yks-pd__task{color:#fff;}
.yks-pd--panel .yks-pd__card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);}
.yks-pd--panel .yks-pd__subjects{gap:10px;}
.yks-pd--panel .yks-pd__card--chart{display:flex;flex-direction:column;}
.yks-pd--panel .yks-pd__card--chart .yks-pd__chart,.yks-pd--panel .yks-pd__card--chart .yks-pd__empty{margin:auto 0;}
.yks-pd__disclaimer{margin-top:14px;text-align:center;color:#5b6474;font-size:13px;line-height:1.5;}

/* Pre-animation state (only when JS armed it and it is not yet in view). */
.yks-pd.is-armed:not(.is-in) .yks-pd__kpi{opacity:0;transform:translateY(14px);}
.yks-pd.is-armed:not(.is-in) .yks-pd__line{stroke-dashoffset:1;}
.yks-pd.is-armed:not(.is-in) .yks-pd__area,
.yks-pd.is-armed:not(.is-in) .yks-pd__tip{opacity:0;}
.yks-pd.is-armed:not(.is-in) .yks-pd__tip{transform:translateY(6px);}
.yks-pd.is-armed:not(.is-in) .yks-pd__dot{transform:scale(0);}
.yks-pd.is-armed:not(.is-in) .yks-pd__pulse{animation:none;}
.yks-pd.is-armed:not(.is-in) .yks-pd__fill-to,
.yks-pd.is-armed:not(.is-in) .yks-pd__plan-track span{width:0;}
.yks-pd.is-armed:not(.is-in) .yks-pd__hour-bar{transform:scaleY(0);}
.yks-pd.is-armed:not(.is-in) .yks-pd__plan li.is-done .yks-pd__check{background:transparent;border-color:rgba(255,255,255,.35);}
.yks-pd.is-armed:not(.is-in) .yks-pd__plan li.is-done .yks-pd__check:after{opacity:0;}

@keyframes yks-pd-pulse{0%{opacity:.7;transform:scale(1);}100%{opacity:0;transform:scale(3.4);}}
@keyframes yks-pd-live{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6);}70%{box-shadow:0 0 0 8px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}

@media (max-width:980px){
  .yks-pd__grid--main{grid-template-columns:minmax(0,1fr);}
  .yks-pd__grid--bottom{grid-template-columns:repeat(2,minmax(0,1fr));}
  .yks-pd__card--note{grid-column:1 / -1;}
}
@media (max-width:640px){
  .yks-pd{margin-top:40px;}
  .yks-pd__lead{font-size:15px;}
  .yks-pd__frame{padding:12px 14px 16px;border-radius:18px;}
  .yks-pd__badge{position:static;display:inline-block;margin:0 0 12px;}
  .yks-pd__chips{margin-left:0;width:100%;}
  .yks-pd__kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .yks-pd__kpi{padding:12px;}
  .yks-pd__kpi-value{font-size:24px;}
  .yks-pd__grid--bottom{grid-template-columns:minmax(0,1fr);}
  .yks-pd__card{padding:12px 13px 14px;}
  .yks-pd__axis{font-size:15px;}
  .yks-pd__hours{height:150px;}
}
@media (prefers-reduced-motion:reduce){
  .yks-pd *,.yks-pd *:before,.yks-pd *:after{animation:none!important;transition:none!important;}
}