.after-checkin {
  background: linear-gradient(145deg, #fff, #ffeaf1);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.after-checkin h2 { margin: 0 0 12px; font-size: 19px; }
.after-checkin > div { display: grid; gap: 8px; }
.after-checkin button { border: 2px solid transparent; border-radius: 14px; background: #fff; padding: 12px; text-align: left; font-weight: 800; }
.after-checkin button.selected { border-color: var(--hot); background: #fff2f7; }
.after-checkin p { margin: 13px 0 0; line-height: 1.45; }
.timer-actions { display: flex; justify-content: center; gap: 8px; }
.timer-actions button:last-child { background: #fff0f5; color: var(--hot); }
.after-plan { background: linear-gradient(145deg,#fff,#f2ebff); border-radius: 22px; padding: 17px; box-shadow: var(--shadow); }
.after-plan-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.after-plan-head b,.after-plan-head small { display: block; }
.after-plan-head small { margin-top: 4px; font-size: 12px; line-height: 1.3; }
.after-plan-head button { border: 0; background: transparent; color: var(--hot); font-weight: 800; }
#afterPlanEdit { display: grid; gap: 11px; margin-top: 13px; }
#afterPlanEdit label { font-size: 13px; font-weight: 800; }
#afterPlanEdit textarea,#afterPlanEdit input,#afterPlanEdit select { display: block; width: 100%; margin-top: 6px; border: 1px solid #efc8d9; border-radius: 13px; background: #fff; padding: 11px; }
#afterPlanEdit textarea { min-height: 80px; }
#saveAfterPlan { border: 0; border-radius: 14px; background: var(--hot); color: #fff; padding: 12px; font-weight: 800; }
#afterPlanView { margin-top: 13px; }
#afterPlanView div { margin-top: 10px; }
#afterPlanView small,#afterPlanView b { display: block; }
#afterPlanView p { margin: 4px 0; line-height: 1.4; }
#afterPlanView blockquote { margin: 12px 0; padding: 12px; border-radius: 14px; background: #fff; color: #7e2b59; font: 17px/1.4 cursive; }
.after-plan-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; margin-top: 13px; }
.after-plan-actions a,.after-plan-actions button { border: 1px solid #efbfd3; border-radius: 14px; background: #fff; color: #9f1959; padding: 11px 7px; text-align: center; text-decoration: none; font-weight: 800; }
.after-one-step { background: linear-gradient(145deg,#fff8fb,#f0eaff); border: 2px solid #fff; border-radius: 24px; padding: 18px; box-shadow: var(--shadow); }
.after-one-step h2 { margin: 0 0 5px; font-size: 21px; }
.after-one-step > p { margin: 0 0 14px; line-height: 1.4; }
#afterStepStart { width: 100%; border: 0; border-radius: 16px; padding: 14px; background: var(--hot); color: #fff; font-weight: 850; }
.after-step-view { text-align: center; }
.after-step-progress { display: flex; justify-content: center; gap: 7px; margin-bottom: 15px; }
.after-step-progress i { width: 9px; height: 9px; border-radius: 50%; background: #ddcfe4; }
.after-step-progress i.on { background: var(--hot); transform: scale(1.15); }
.after-step-icon { display: block; font-size: 43px; margin-bottom: 7px; }
#afterStepCount { display: block; color: #8a6580; font-size: 13px; font-weight: 800; }
#afterStepText { min-height: 74px; margin: 8px 0 15px; font-size: 18px; line-height: 1.45; font-weight: 750; }
.after-step-action { display: grid; gap: 8px; margin-bottom: 12px; }
.after-step-action a,.after-step-action button { border: 1px solid #efbfd3; border-radius: 14px; background: #fff; color: #9f1959; padding: 11px; text-decoration: none; font-weight: 800; }
.after-step-nav { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.after-step-nav button { border: 0; border-radius: 14px; padding: 12px 8px; font-weight: 850; }
#afterStepPrev { background: #fff; color: #8d3562; }
#afterStepNext { background: var(--hot); color: #fff; }
#afterStepClose { margin-top: 12px; border: 0; background: transparent; color: #76536c; font-weight: 750; }