.hm-planner__lead { max-width: 560px; margin: -6px 0 32px; color: var(--hm-ink); opacity: .75; font-size: 1.02rem; }

.hm-planner__card { background: #fff; border-radius: var(--hm-radius); box-shadow: var(--hm-shadow); padding: clamp(22px, 4vw, 40px); }

.hm-planner__progress { display: flex; gap: 8px; margin-bottom: 26px; }
.hm-planner__progress span { flex: 1; height: 4px; border-radius: 999px; background: var(--hm-line); }
.hm-planner__progress span.is-active, .hm-planner__progress span.is-done { background: var(--hm-logo-brown); }

.hm-planner__step { display: none; }
.hm-planner__step.is-active { display: block; }
.hm-planner__step-label { margin: 0 0 6px; color: var(--hm-muted); font: 700 .68rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hm-planner__step h3 { margin: 0 0 20px; color: var(--hm-navy); font: 600 1.4rem/1.3 var(--font-display); }

.hm-planner__options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hm-planner__options--grid { grid-template-columns: 1fr 1fr; }
.hm-planner__options button { min-height: 52px; padding: 12px 18px; border: 1.5px solid var(--hm-line); border-radius: 14px; background: #fff; color: var(--hm-navy); font: 600 .95rem/1.3 var(--font-body); text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.hm-planner__options button:hover { border-color: var(--hm-logo-brown); }
.hm-planner__options button.is-active { background: var(--hm-logo-brown); border-color: var(--hm-logo-brown); color: #fff; }

.hm-planner__date-field { display: grid; gap: 6px; margin-bottom: 14px; }
.hm-planner__date-field span { color: var(--hm-muted); font: 700 .68rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.hm-planner__date-field input { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--hm-line); border-radius: 12px; color: var(--hm-navy); font: 600 .95rem var(--font-body); }

.hm-planner__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.hm-planner__back { background: none; border: 0; color: var(--hm-muted); font: 600 .88rem var(--font-body); cursor: pointer; padding: 8px 0; }
.hm-planner__back:hover { color: var(--hm-navy); }
.hm-planner__next, .hm-planner__generate { min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--hm-logo-brown); color: #fff; font: 700 .92rem var(--font-body); cursor: pointer; margin-left: auto; transition: opacity .15s ease; }
.hm-planner__next:disabled { opacity: .4; cursor: not-allowed; }

.hm-planner__results-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.hm-planner__results-header strong { color: var(--hm-navy); font: 700 1.5rem var(--font-mono); }
.hm-planner__days-controls { display: flex; align-items: center; gap: 10px; }
.hm-planner__days-controls button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--hm-line); background: #fff; color: var(--hm-navy); font: 700 1.1rem var(--font-body); cursor: pointer; line-height: 1; }
.hm-planner__days-controls button:hover { border-color: var(--hm-logo-brown); color: var(--hm-logo-brown); }
.hm-planner__days-controls span { color: var(--hm-muted); font: 700 .8rem var(--font-mono); white-space: nowrap; }

.hm-planner__days { display: grid; gap: 14px; }

.hm-planner-day { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 14px; border: 1.5px solid var(--hm-line); border-radius: 16px; }
.hm-planner-day--empty { grid-template-columns: 1fr auto; border-style: dashed; }
.hm-planner-day__thumb { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--hm-limestone); }
.hm-planner-day__body { min-width: 0; }
.hm-planner-day__label { margin: 0 0 3px; color: var(--hm-lagoon); font: 700 .65rem var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.hm-planner-day__title { margin: 0 0 4px; color: var(--hm-navy); font: 700 .98rem/1.3 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-planner-day__meta { margin: 0; color: var(--hm-muted); font-size: .82rem; }
.hm-planner-day__empty-text { color: var(--hm-muted); font: 600 .92rem var(--font-body); }
.hm-planner-day__actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.hm-planner-day__actions-row { display: flex; gap: 6px; }
.hm-planner-day__actions button { min-width: 30px; min-height: 30px; padding: 0 8px; border: 1px solid var(--hm-line); border-radius: 8px; background: #fff; color: var(--hm-navy); font-size: .78rem; cursor: pointer; }
.hm-planner-day__actions button:hover { border-color: var(--hm-logo-brown); color: var(--hm-logo-brown); }
.hm-planner-day__actions button:disabled { opacity: .35; cursor: not-allowed; }
.hm-planner-day__actions button.hm-planner-day__remove:hover { border-color: #c0392b; color: #c0392b; }

.hm-planner-day__swap-panel { grid-column: 1 / -1; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--hm-line); display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.hm-planner-day__swap-panel[hidden] { display: none; }
.hm-planner-day__swap-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--hm-limestone); cursor: pointer; text-align: left; border: 0; font: 600 .85rem var(--font-body); color: var(--hm-navy); }
.hm-planner-day__swap-item:hover { background: #ecebe0; }
.hm-planner-day__swap-item span { color: var(--hm-lagoon); font: 700 .78rem var(--font-mono); }

.hm-planner__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hm-planner__restart { min-height: 48px; padding: 0 20px; border: 1.5px solid var(--hm-line); border-radius: 999px; background: #fff; color: var(--hm-navy); font: 700 .88rem var(--font-body); cursor: pointer; }
.hm-planner__restart:hover { border-color: var(--hm-navy); }
.hm-planner__actions .hm-button { flex: 1; min-width: 220px; text-align: center; }

@media (max-width: 767px) {
    .hm-planner__options--grid { grid-template-columns: 1fr 1fr; }
    .hm-planner-day { grid-template-columns: 64px 1fr; }
    .hm-planner-day__thumb { width: 64px; height: 64px; }
    .hm-planner-day__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .hm-planner__nav { flex-wrap: wrap; }
    .hm-planner__next, .hm-planner__generate { width: 100%; margin-left: 0; }
}