#planner_page.planner-page {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100vw - 32px));
  margin: 112px auto 0;
  padding-bottom: 40px;
  text-align: left;
  color: rgba(235, 241, 255, 0.96);
}

#planner_page .planner-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#planner_page .smart-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(133, 177, 255, 0.18);
  background:
    radial-gradient(circle at top left, rgba(120, 174, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(50, 84, 128, 0.30), rgba(3, 9, 24, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 52px rgba(2, 6, 18, 0.44);
  backdrop-filter: blur(18px);
}

#planner_page .smart-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 216, 110, 0.10), transparent 22%, transparent 78%, rgba(182, 136, 255, 0.10)),
    radial-gradient(circle at bottom right, rgba(66, 110, 168, 0.18), transparent 42%);
}

#planner_page .smart-panel--primary {
  background:
    radial-gradient(circle at top left, rgba(171, 198, 255, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(74, 120, 180, 0.34), rgba(5, 12, 28, 0.90));
}

#planner_page .card-section {
  position: relative;
  z-index: 1;
  padding: 30px 34px;
}

#planner_page .mono,
.planner-task-modal .mono,
.planner-response-modal .mono {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#planner_page .smart-panel-title,
.planner-task-modal .smart-panel-title {
  margin: 0;
  color: #ffdf85;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.6rem, 2.9vw, 2.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

#planner_page .smart-panel-body,
#planner_page .planner-task-description,
#planner_page .planner-detail-description,
#planner_page .planner-empty-body,
#planner_page .planner-form-help,
#planner_page .planner-response-content,
#planner_page .planner-response-timestamp,
.planner-task-modal .planner-form-help {
  color: rgba(221, 230, 246, 0.92);
  font-size: 1.05rem;
  line-height: 1.75;
}

#planner_page .smart-panel-cta,
#planner_page .planner-action-button,
.planner-task-modal .smart-panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 214, 83, 0.78);
  background: linear-gradient(90deg, rgba(105, 145, 188, 0.72), rgba(236, 204, 29, 0.96));
  color: #10141f;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

#planner_page .smart-panel-cta:hover,
#planner_page .planner-action-button:hover,
.planner-task-modal .smart-panel-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.34);
  filter: brightness(1.04);
  color: #10141f;
}

#planner_page .planner-secondary-action,
#planner_page .planner-action-button,
.planner-task-modal .planner-action-button {
  background: linear-gradient(90deg, rgba(74, 108, 152, 0.78), rgba(6, 10, 35, 0.96));
  color: rgba(247, 248, 255, 0.96);
}

#planner_page .planner-secondary-action:hover,
#planner_page .planner-action-button:hover,
.planner-task-modal .planner-action-button:hover {
  color: rgba(247, 248, 255, 0.96);
}

#planner_page .planner-action-button--danger {
  border-color: rgba(255, 138, 138, 0.52);
  background: linear-gradient(90deg, rgba(109, 68, 92, 0.76), rgba(37, 7, 15, 0.98));
  color: rgba(255, 228, 228, 0.96);
}

#planner_page .planner-action-button--danger:hover {
  color: rgba(255, 228, 228, 0.96);
}

#planner_page .planner-hero-section {
  display: grid;
  gap: 26px;
}

#planner_page .planner-kicker,
#planner_page .planner-panel-kicker,
#planner_page .planner-meta-label,
#planner_page .planner-search-label,
#planner_page .planner-empty-kicker,
#planner_page .planner-response-timestamp,
#planner_page .planner-task-pill,
#planner_page .planner-stat-pill,
.planner-task-modal .planner-kicker,
.planner-task-modal .planner-panel-kicker {
  color: rgba(199, 214, 241, 0.88);
  font-size: 0.79rem;
}

#planner_page .planner-title {
  margin-top: 8px;
  font-size: clamp(2rem, 4vw, 3.25rem);
}

#planner_page .planner-lead {
  max-width: 68rem;
  margin: 12px 0 0;
  font-size: clamp(1.08rem, 1.9vw, 1.24rem);
}

#planner_page .planner-hero-actions {
  display: flex;
  justify-content: flex-end;
}

#planner_page .planner-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 14px;
  align-items: end;
}

#planner_page .planner-search-field,
#planner_page .planner-form-field,
.planner-task-modal .planner-form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#planner_page .planner-search-input,
#planner_page .planner-form-input,
.planner-task-modal .planner-form-input,
#planner_page .planner-response-modal textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(140, 172, 219, 0.28);
  background: rgba(5, 12, 26, 0.42);
  color: rgba(244, 247, 255, 0.96);
  padding: 14px 16px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#planner_page .planner-search-input::placeholder,
#planner_page .planner-form-input::placeholder,
.planner-task-modal .planner-form-input::placeholder {
  color: rgba(194, 207, 235, 0.5);
}

#planner_page .planner-search-input:focus,
#planner_page .planner-form-input:focus,
.planner-task-modal .planner-form-input:focus,
#planner_page .planner-response-modal textarea:focus {
  border-color: rgba(255, 218, 124, 0.48);
  box-shadow: 0 0 0 1px rgba(255, 218, 124, 0.22);
}

#planner_page .planner-form-textarea,
.planner-task-modal .planner-form-textarea,
#planner_page .planner-response-modal textarea {
  min-height: 160px;
  resize: vertical;
}

#planner_page .planner-panel-head,
#planner_page .planner-detail-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

#planner_page .planner-head-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

#planner_page .planner-stat-pill,
#planner_page .planner-task-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(151, 177, 223, 0.20);
  background: rgba(12, 20, 39, 0.34);
}

#planner_page .planner-task-list,
#planner_page .planner-response-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

#planner_page .planner-task-card,
#planner_page .planner-empty-card,
#planner_page .planner-response-card,
#planner_page .planner-meta-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(154, 180, 225, 0.16);
  background: rgba(7, 16, 34, 0.22);
}

#planner_page .planner-task-card::before,
#planner_page .planner-response-card::before,
#planner_page .planner-meta-card::before,
#planner_page .planner-empty-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 215, 111, 0.05), transparent 24%, transparent 76%, rgba(187, 138, 255, 0.06));
}

#planner_page .planner-task-card {
  padding: 18px 20px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

#planner_page .planner-task-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 214, 98, 0.22);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}

#planner_page .planner-task-card--complete {
  opacity: 0.70;
}

#planner_page .planner-task-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

#planner_page .planner-task-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  margin-top: 4px;
}

#planner_page .planner-task-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

#planner_page .planner-task-check-ui {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 216, 111, 0.60);
  background: rgba(8, 14, 28, 0.70);
  display: block;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);
}

#planner_page .planner-task-check input:checked + .planner-task-check-ui,
#planner_page .planner-task-check-ui--done {
  background: linear-gradient(135deg, rgba(126, 180, 239, 0.82), rgba(244, 213, 56, 0.96));
}

#planner_page .planner-task-copy {
  min-width: 0;
}

#planner_page .planner-task-title {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(245, 248, 255, 0.98);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  line-height: 1.25;
  text-align: left;
}

#planner_page .planner-task-title:hover {
  color: #ffdf85;
}

#planner_page .planner-task-description {
  margin: 10px 0 0;
}

#planner_page .planner-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

#planner_page .planner-task-actions,
#planner_page .planner-detail-actions,
#planner_page .planner-response-actions,
#planner_page .planner-form-actions,
#planner_page .planner-page-actions,
#planner_page .planner-detail-workflow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#planner_page .planner-task-actions {
  justify-content: flex-end;
  min-width: 196px;
}

#planner_page .planner-action-button {
  min-width: 110px;
}

#planner_page .planner-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(149, 176, 219, 0.14);
}

#planner_page .planner-page-link,
#planner_page .planner-page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(147, 175, 220, 0.18);
  background: rgba(7, 14, 29, 0.32);
  color: rgba(242, 246, 255, 0.94);
  text-decoration: none;
}

#planner_page .planner-page-link:hover {
  color: #ffdf85;
}

#planner_page .planner-page-link--disabled {
  opacity: 0.45;
}

#planner_page .planner-detail-head {
  margin-top: 20px;
}

#planner_page .planner-detail-title {
  margin-top: 10px;
}

#planner_page .planner-detail-description {
  margin: 14px 0 0;
  max-width: 74ch;
}

#planner_page .planner-detail-description--muted {
  color: rgba(178, 192, 218, 0.72);
}

#planner_page .planner-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

#planner_page .planner-meta-card {
  padding: 18px 20px;
}

#planner_page .planner-meta-value {
  margin-top: 10px;
  color: rgba(247, 250, 255, 0.96);
  font-size: 1rem;
  line-height: 1.55;
}

#planner_page .planner-detail-workflow {
  margin-top: 24px;
}

#planner_page .planner-inline-form {
  margin: 0;
}

#planner_page .planner-response-card {
  padding: 0;
}

#planner_page .planner-response-body {
  padding: 20px 22px 14px;
}

#planner_page .planner-response-content {
  text-align: left;
}

#planner_page .planner-response-content pre {
  background: rgba(6, 13, 28, 0.82);
  border: 1px solid rgba(135, 166, 214, 0.18);
  padding: 16px;
  overflow: auto;
}

#planner_page .planner-response-timestamp {
  margin-top: 16px;
}

#planner_page .planner-response-actions {
  padding: 0 22px 22px;
}

#planner_page .planner-empty-card {
  padding: 28px 30px;
}

#planner_page .planner-empty-title {
  margin: 10px 0 0;
  color: rgba(246, 249, 255, 0.98);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.4rem;
}

#planner_page .planner-empty-body {
  margin: 10px 0 0;
  max-width: 58ch;
}

#planner_page .planner-form-card,
#planner_page .planner-modal-form-shell,
.planner-task-modal .planner-modal-form-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#planner_page .planner-form,
.planner-task-modal .planner-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#planner_page .planner-form-grid,
.planner-task-modal .planner-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#planner_page .planner-form-field--full,
.planner-task-modal .planner-form-field--full {
  grid-column: 1 / -1;
}

#planner_page .planner-form-label,
#planner_page .planner-form-check-title,
.planner-task-modal .planner-form-label,
.planner-task-modal .planner-form-check-title {
  color: rgba(246, 248, 255, 0.96);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.86rem;
}

#planner_page .planner-form-help,
#planner_page .planner-form-error,
.planner-task-modal .planner-form-help,
.planner-task-modal .planner-form-error {
  font-size: 0.92rem;
  line-height: 1.5;
}

#planner_page .planner-form-error,
#planner_page .planner-form-errors,
.planner-task-modal .planner-form-error,
.planner-task-modal .planner-form-errors {
  color: rgba(255, 183, 183, 0.96);
}

#planner_page .planner-form-check,
.planner-task-modal .planner-form-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid rgba(142, 168, 210, 0.20);
  background: rgba(7, 16, 34, 0.20);
}

#planner_page .planner-form-checkbox-input,
.planner-task-modal .planner-form-checkbox-input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
}

#planner_page .planner-form-errors,
.planner-task-modal .planner-form-errors {
  padding: 14px 16px;
  border: 1px solid rgba(255, 128, 128, 0.32);
  background: rgba(60, 7, 17, 0.32);
}

.planner-task-modal .modal-content,
.planner-response-modal .modal-content {
  border: 1px solid rgba(146, 175, 221, 0.18);
  background:
    radial-gradient(circle at top left, rgba(120, 174, 255, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(42, 76, 120, 0.42), rgba(3, 9, 24, 0.96));
  color: rgba(240, 245, 255, 0.96);
  backdrop-filter: blur(18px);
}

.planner-task-modal .modal-header,
.planner-response-modal .modal-header,
.planner-response-modal .modal-footer {
  border-color: rgba(146, 175, 221, 0.14);
}

.planner-task-modal .modal-body,
.planner-response-modal .modal-body,
.planner-response-modal .modal-footer {
  padding: 26px 28px;
}

.planner-modal-form-shell .planner-panel-head,
.planner-task-modal .planner-panel-head {
  padding-bottom: 6px;
}

#planner_page .success,
#planner_page .processing {
  filter: brightness(1.06);
}

#planner_page .error {
  border-color: rgba(255, 123, 123, 0.56);
}

#planner_page .fade-in-animation {
  animation: plannerFadeIn 240ms ease;
}

#planner_page .swipe-hide {
  opacity: 0;
  transform: translateX(24px);
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: opacity 220ms ease, transform 220ms ease, max-height 220ms ease, margin 220ms ease, padding 220ms ease;
}

@keyframes plannerFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1080px) {
  #planner_page .planner-detail-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #planner_page .planner-task-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #planner_page .planner-task-actions {
    grid-column: 2;
    justify-content: flex-start;
    min-width: 0;
  }
}

@media (max-width: 820px) {
  #planner_page.planner-page {
    width: min(100vw - 20px, 1000px);
    margin-top: 96px;
  }

  #planner_page .card-section {
    padding: 24px 20px;
  }

  #planner_page .planner-toolbar,
  #planner_page .planner-form-grid,
  #planner_page .planner-detail-meta-grid {
    grid-template-columns: 1fr;
  }

  #planner_page .planner-hero-actions {
    justify-content: stretch;
  }

  #planner_page .planner-primary-action,
  #planner_page .planner-secondary-action,
  #planner_page .planner-action-button,
  #planner_page .planner-page-link,
  #planner_page .planner-detail-workflow .smart-panel-cta,
  #planner_page .planner-detail-actions > *,
  #planner_page .planner-response-actions > * {
    width: 100%;
  }

  #planner_page .planner-panel-head,
  #planner_page .planner-detail-topbar,
  #planner_page .planner-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  #planner_page .planner-head-pills {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  #planner_page .planner-title {
    font-size: 2.2rem;
  }

  #planner_page .planner-task-card,
  #planner_page .planner-empty-card,
  #planner_page .planner-meta-card,
  #planner_page .planner-response-body,
  #planner_page .planner-response-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  #planner_page .planner-task-main {
    gap: 14px;
  }

  #planner_page .planner-task-actions {
    grid-column: 1 / -1;
    margin-left: 42px;
  }
}