.cycle-toolbar {
  display: grid;
  grid-template-columns: 150px minmax(260px, 520px);
  align-items: end;
  gap: 14px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: #121113;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cycle-toolbar .label { margin: 0; }

.planner {
  margin-top: 30px;
  padding: 26px;
  border: 1px solid #5b4657;
  border-left: 6px solid var(--purple);
  background: linear-gradient(120deg, #1b171c, #111113);
  box-shadow: 0 18px 45px #0006;
}

.planner[hidden] { display: none; }

.planner-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 280px));
  gap: 14px;
  margin: 18px 0;
}

.planner-fields label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.planner-fields input { margin-top: 6px; }

@media (max-width: 760px) {
  .cycle-toolbar { grid-template-columns: 1fr; }
  .planner-fields { grid-template-columns: 1fr; }
}

.account { display: flex; align-items: center; gap: 10px; }
.account .btn { padding: 7px 10px; font-size: 12px; }
.login-page { min-height: 100vh; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 520px); padding: 38px; border: 1px solid #51454d; border-left: 6px solid var(--purple); background: linear-gradient(145deg,#1c1b1e,#0d0d0f); box-shadow: 0 28px 80px #000a; }
.login-logo { display: block; width: 230px; height: auto; margin-bottom: 28px; }
.login-card h1 { margin-bottom: 12px; }
.login-submit { width: 100%; margin-top: 18px; }
.login-message { min-height: 24px; margin-top: 18px; color: var(--acid); font-weight: 750; }