.page-steps .shell { width: min(940px, calc(100% - 48px)); }
.page-steps .topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; }
.steps-main { padding-bottom:36px; }
.steps-hero { max-width:700px; margin:34px 0 26px; }
.steps-kicker { margin:0 0 7px; color:var(--orange-dark); font-size:.69rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.steps-hero h1 { margin:0; color:var(--forest); font-size:clamp(3rem,8vw,5.4rem); font-weight:900; line-height:.98; letter-spacing:-.07em; }
.steps-hero h1 span { color:var(--orange-dark); font-family:var(--font-editorial); font-style:italic; font-weight:500; }
.steps-intro { max-width:600px; margin:17px 0 0; color:var(--muted); font-size:1.02rem; line-height:1.65; }
.steps-summary { display:grid; grid-template-columns:minmax(190px,.85fr) minmax(260px,1.2fr) auto; align-items:center; gap:24px; margin-bottom:42px; padding:24px 28px; border-radius:var(--radius-lg); background:var(--forest); color:var(--white); }
.steps-summary-main { min-width:0; }
.steps-summary-kicker { margin:0 0 4px; color:#f6c18e; font-size:.74rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.steps-average { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; margin:0; }
.steps-average strong { font-size:clamp(2rem,5vw,3rem); font-weight:900; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.steps-average span { color:#e9e9d9; font-size:.9rem; font-weight:700; }
.steps-coverage { margin:8px 0 0; color:#e0e5d8; font-size:.82rem; }
.steps-score-panel { min-width:0; padding:15px 18px; border:1px solid #ffffff2b; border-radius:17px; background:#ffffff0d; }
.steps-score-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; color:#f6c18e; font-size:.7rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.steps-score-heading strong { color:white; font-size:1.16rem; letter-spacing:0; white-space:nowrap; }
.steps-score-heading small { margin-left:3px; color:#e0e5d8; font-size:.73rem; }
.steps-score-track { height:7px; margin:9px 0 10px; overflow:hidden; border-radius:999px; background:#ffffff2b; }
.steps-score-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--orange); transition:width .35s ease; }
.steps-score-panel p { margin:0; color:#f5f2e8; font-size:.74rem; line-height:1.48; }
.steps-score-panel .steps-next-level { margin-top:5px; color:#ffd19d; font-weight:850; }
.steps-period-progress { display:flex; flex:0 0 auto; flex-direction:column; align-items:flex-end; gap:2px; padding-left:20px; border-left:1px solid #ffffff3b; color:#e0e5d8; font-size:.72rem; text-align:right; }
.steps-period-progress strong { color:white; font-size:1.5rem; font-variant-numeric:tabular-nums; }
.steps-ladder { margin-bottom:38px; padding:25px 28px 27px; border-radius:var(--radius-lg); background:var(--paper); }
.steps-ladder-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:18px; }
.steps-ladder-heading h2 { margin:0; color:var(--forest); font-size:clamp(1.45rem,3.6vw,1.9rem); font-weight:900; letter-spacing:-.045em; }
.steps-ladder-heading .steps-kicker { margin-bottom:5px; }
.steps-ladder-description { max-width:450px; margin:0 0 2px; color:var(--muted); font-size:.8rem; line-height:1.55; }
.steps-score-ladder { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.steps-score-level { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:3px 12px; min-height:47px; padding:5px 12px; border:1px solid transparent; border-radius:13px; background:#f5f1e7; }
.steps-level-marker { display:grid; grid-row:1 / span 2; width:27px; height:27px; place-items:center; border:1px solid #d7ddce; border-radius:50%; background:#fbfaf3; color:var(--forest); font-size:.68rem; font-weight:900; font-variant-numeric:tabular-nums; }
.steps-level-threshold { min-width:0; color:var(--deep); font-size:.82rem; font-weight:760; font-variant-numeric:tabular-nums; }
.steps-level-points { color:var(--forest); font-size:.83rem; font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap; }
.steps-level-badge { grid-column:2 / 4; justify-self:start; margin-top:0; padding:3px 8px; border-radius:999px; background:#fce5cc; color:#93451c; font-size:.61rem; font-weight:900; letter-spacing:.015em; line-height:1.25; }
.steps-score-level.is-current { border-color:#315e49; background:#e7eee2; box-shadow:inset 3px 0 #1c4d3d; }
.steps-score-level.is-current .steps-level-marker { border-color:#1c4d3d; background:#1c4d3d; color:#fffaf0; }
.steps-score-level.is-current .steps-level-badge { background:#1c4d3d; color:#fffaf0; }
.steps-score-level.is-next { border-color:#e7b17b; background:#fff3e3; }
.steps-score-level.is-next .steps-level-marker { border-color:var(--orange-dark); color:var(--orange-dark); }
.steps-score-level.is-top-level .steps-level-marker { color:#a46a13; }
.steps-score-level.is-top-level.is-current .steps-level-marker { color:#ffe6a3; }
.steps-section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:16px; }
.steps-section-head h2,.step-leaderboard-head h2 { margin:0; color:var(--forest); font-size:clamp(1.55rem,4vw,2rem); font-weight:900; letter-spacing:-.045em; }
.steps-entry-note { margin:0 0 4px; color:var(--muted); font-size:.8rem; }
.period-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.period-card { min-width:0; padding:19px; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:0 4px 0 #dfdfcf; }
.period-card.is-saved { border-color:#9daF91; background:#f4f5e9; }
.period-card-head { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; margin-bottom:19px; }
.period-number { display:grid; width:38px; height:38px; place-items:center; border-radius:13px; background:#fce6cf; color:var(--orange-dark); font-size:.8rem; font-weight:900; }
.period-card-head h3 { margin:0; color:var(--forest); font-size:1.02rem; font-weight:900; letter-spacing:-.025em; }
.period-card-head p { margin:2px 0 0; color:var(--muted); font-size:.72rem; }
.period-status { padding:5px 8px; border-radius:999px; background:#ebe8dc; color:#707463; font-size:.61rem; font-weight:850; white-space:nowrap; }
.period-card.is-saved .period-status { background:#dce7d6; color:#23513a; }
.period-form label { display:block; margin-bottom:7px; color:var(--forest); font-size:.75rem; font-weight:850; }
.steps-input-row { display:flex; align-items:center; gap:10px; min-height:48px; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:#fffdf7; }
.steps-input-row:focus-within { border-color:var(--orange-dark); box-shadow:0 0 0 3px #f5c69b66; }
.steps-input-row input { min-width:0; width:100%; height:46px; padding:0; border:0; outline:0; background:transparent; color:var(--deep); font-size:1.04rem; font-weight:850; font-variant-numeric:tabular-nums; }
.steps-input-row span { flex:0 0 auto; color:var(--muted); font-size:.69rem; font-weight:700; }
.period-help { min-height:1.2em; margin:5px 0 11px; color:var(--muted); font-size:.67rem; }
.period-save { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 15px; border:0; border-radius:11px; background:var(--orange); color:var(--deep); font-size:.75rem; font-weight:900; cursor:pointer; }
.period-save:hover { background:#f59a56; transform:translateY(-1px); }
.period-save:disabled { opacity:.55; cursor:wait; transform:none; }
.period-feedback { min-height:1.3em; margin:7px 0 0; color:var(--muted); font-size:.7rem; }
.period-feedback.is-error,.steps-page-status.is-error,.step-leaderboard-status.is-error { color:#a43f27; }
.steps-page-status,.step-leaderboard-status { min-height:1.3em; margin:10px 0 0; color:var(--muted); font-size:.78rem; }
.step-leaderboard { margin-top:39px; padding:25px 28px; border-radius:var(--radius-lg); }
.step-leaderboard-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.step-leaderboard-mark { display:grid; width:46px; height:46px; place-items:center; border-radius:15px; background:#fce6cf; font-size:1.45rem; }
.step-leaderboard-copy { max-width:620px; margin:9px 0 17px; color:var(--muted); font-size:.82rem; }
.step-leaderboard-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.step-leaderboard-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto auto; align-items:center; gap:12px; min-height:55px; padding:7px 12px; border:1px solid transparent; border-radius:13px; background:#f4f0e5; }
.step-leaderboard-row.top-1 { border-color:#dbc994; background:#f8edc9; }
.step-leaderboard-row.top-2 { border-color:#d9dbcf; background:#edf0e6; }
.step-leaderboard-row.top-3 { border-color:#e4cbb0; background:#f4e6d6; }
.step-rank { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; background:#e5e3d5; color:var(--forest); font-size:.78rem; font-weight:950; font-variant-numeric:tabular-nums; }
.step-leaderboard-row.top-1 .step-rank { background:#e4c56b; }
.step-name { overflow:hidden; color:var(--forest); font-size:.88rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.step-average-value { color:var(--deep); font-size:.8rem; font-weight:850; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.step-period-count { color:var(--muted); font-size:.7rem; text-align:right; white-space:nowrap; }
.step-leaderboard-empty { padding:20px 12px; color:var(--muted); font-size:.85rem; text-align:center; }
.page-steps :focus-visible { outline:3px solid var(--orange-dark); outline-offset:3px; }
@media (max-width:640px) {
  .page-steps .shell { width:calc(100% - 28px); padding-top:13px; padding-bottom:28px; }
  .page-steps .topbar { margin-bottom:23px; }
  .steps-hero { margin:23px 0 19px; }
  .steps-hero h1 { font-size:clamp(2.8rem,13vw,4rem); }
  .steps-intro { margin-top:12px; font-size:.9rem; }
  .steps-summary { grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:14px 10px; padding:18px; border-radius:21px; }
  .steps-summary-main { grid-column:1; }
  .steps-score-panel { grid-column:1/-1; grid-row:2; padding:13px 14px; }
  .steps-period-progress { grid-column:2; grid-row:1; align-self:center; }
  .steps-average strong { font-size:2.2rem; }
  .steps-average span { font-size:.76rem; }
  .steps-coverage { max-width:220px; font-size:.72rem; line-height:1.45; }
  .steps-period-progress { padding-left:12px; font-size:.61rem; }
  .steps-period-progress strong { font-size:1.25rem; }
  .steps-ladder { margin-bottom:29px; padding:19px 14px 20px; border-radius:21px; }
  .steps-ladder-heading { align-items:flex-start; flex-direction:column; gap:7px; margin-bottom:14px; }
  .steps-ladder-heading h2 { font-size:1.48rem; }
  .steps-ladder-description { max-width:none; font-size:.76rem; }
  .steps-score-ladder { gap:4px; }
  .steps-score-level { grid-template-columns:30px minmax(0,1fr) auto; gap:2px 8px; min-height:45px; padding:5px 8px; border-radius:11px; }
  .steps-level-marker { width:25px; height:25px; font-size:.63rem; }
  .steps-level-threshold,.steps-level-points { font-size:.73rem; }
  .steps-level-badge { font-size:.58rem; }
  .steps-section-head { align-items:flex-start; flex-direction:column; gap:4px; margin-bottom:12px; }
  .period-grid { grid-template-columns:1fr; gap:10px; }
  .period-card { padding:16px; border-radius:17px; }
  .period-card-head { margin-bottom:14px; }
  .step-leaderboard { margin-top:27px; padding:19px 14px; border-radius:21px; }
  .step-leaderboard-row { grid-template-columns:34px minmax(0,1fr) auto; gap:8px; padding:7px 8px; }
  .step-average-value { grid-column:3; grid-row:1; font-size:.73rem; }
  .step-period-count { grid-column:2/4; grid-row:2; text-align:left; font-size:.66rem; }
  .step-rank { width:29px; height:29px; }
  .step-name { font-size:.8rem; }
}
@media (min-width:641px) and (max-width:800px) {
  .steps-summary { grid-template-columns:minmax(0,1fr) auto; gap:16px; }
  .steps-score-panel { grid-column:1/-1; grid-row:2; }
  .steps-period-progress { grid-column:2; grid-row:1; }
}
@media (prefers-reduced-motion:reduce) {
  .page-steps *, .page-steps *::before, .page-steps *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}