.planner-page { min-height:100vh; background:var(--background); color:var(--text-primary); }
.planner-topbar { width:min(1480px,calc(100% - 48px)); margin:0 auto; min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.planner-layout { width:min(1480px,calc(100% - 48px)); margin:0 auto 36px; display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; }
.planner-sidebar { min-height:calc(100vh - 134px); }
.planner-main { min-width:0; padding-bottom:110px; }
.planner-heading { align-items:flex-start; margin-bottom:18px; }
.planner-heading h1 { margin:4px 0 8px; font-size:clamp(28px,3vw,42px); letter-spacing:-.04em; }
.planner-heading p:last-child { margin:0; color:var(--text-secondary); font-size:13px; line-height:1.65; max-width:760px; }
.planner-live-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:999px; background:#eef9f3; color:#1c7b4a; font-weight:800; font-size:12px; }
.planner-live-pill span { width:7px; height:7px; border-radius:50%; background:#24a865; box-shadow:0 0 0 5px rgba(36,168,101,.12); }
.planner-card,.planner-results,.planner-legend { border:1px solid rgba(39,56,82,.09); border-radius:24px; background:rgba(255,255,255,.96); box-shadow:0 18px 50px rgba(33,52,84,.07); }
.planner-card { padding:28px; }
.planner-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.planner-card-header h2 { margin:4px 0 6px; font-size:24px; letter-spacing:-.02em; }
.planner-card-header p:last-child { margin:0; color:var(--text-secondary); font-size:12px; line-height:1.6; max-width:720px; }
.planner-mode-switch { display:flex; padding:4px; gap:4px; border-radius:14px; background:#f0f4f9; flex:none; }
.planner-mode-button { min-height:38px; padding:0 13px; border:0; border-radius:10px; background:transparent; color:#718097; font:800 12px inherit; cursor:pointer; }
.planner-mode-button.is-active { background:#fff; color:#21446f; box-shadow:0 5px 14px rgba(34,64,98,.09); }
.planner-controls-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:22px; }
.planner-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.planner-field span,.planner-search-label { color:#738197; font-size:11px; font-weight:900; letter-spacing:.04em; }
.planner-field input,.planner-field select { width:100%; height:44px; padding:0 11px; border:1px solid rgba(39,56,82,.12); border-radius:11px; background:#fff; color:#26354a; font:600 13px inherit; outline:none; }
.planner-field input:focus,.planner-field select:focus,.planner-search-box:focus-within { border-color:rgba(47,115,255,.5); box-shadow:0 0 0 3px rgba(47,115,255,.10); }
.planner-city-picker { margin-top:20px; padding:16px; border:1px solid rgba(39,56,82,.08); border-radius:17px; background:#f8fafc; }
.planner-section-label { display:flex; align-items:center; gap:9px; color:#6f7e94; font-size:11px; font-weight:900; letter-spacing:.12em; }
.step-dot { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#e8eef6; color:#345479; letter-spacing:0; }
.planner-city-count { margin-left:auto; padding:5px 8px; border-radius:999px; background:#e9f2fb; color:#3c5f84; letter-spacing:0; }
.planner-search-wrap { position:relative; margin-top:12px; }
.planner-search-label { display:block; margin-bottom:7px; }
.planner-search-box { display:flex; align-items:center; gap:9px; min-height:46px; padding:0 13px; border:1px solid rgba(39,56,82,.12); border-radius:12px; background:#fff; color:#76859a; }
.planner-search-box input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:#25364d; font:600 13px inherit; }
.planner-search-results { position:absolute; left:0; right:0; top:calc(100% + 7px); z-index:80; max-height:350px; overflow:auto; padding:6px; border:1px solid rgba(39,56,82,.10); border-radius:14px; background:#fff; box-shadow:0 18px 42px rgba(22,36,58,.16); }
.planner-search-results.is-hidden { display:none; }
.planner-search-result { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px; border:0; border-radius:10px; background:#fff; text-align:left; cursor:pointer; }
.planner-search-result:hover,.planner-search-result:focus-visible { background:#f1f6fb; outline:none; }
.planner-search-result-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.planner-search-result-main strong { color:#26384f; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planner-search-result-main small { color:#78869a; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planner-search-result b { color:#2f73ff; font-size:16px; }
.planner-selected-cities { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; min-height:34px; }
.planner-city-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 9px 8px 11px; border:1px solid rgba(53,105,181,.14); border-radius:999px; background:#fff; color:#2d4868; font-size:12px; font-weight:800; }
.planner-city-chip small { color:#7d8b9e; font-size:10px; font-weight:700; }
.planner-city-chip button { width:20px; height:20px; border:0; border-radius:50%; background:#eef3f8; color:#66758a; cursor:pointer; font-weight:900; }
.planner-city-chip button:hover,.planner-city-chip button:focus-visible { background:#e4ebf3; outline:none; }
.planner-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; margin-top:18px; }
.planner-results { margin-top:20px; overflow:hidden; }
.planner-summary { padding:22px 24px; border-bottom:1px solid rgba(39,56,82,.08); background:linear-gradient(180deg,#fff,#f8fbff); }
.planner-summary h2 { margin:0; font-size:21px; letter-spacing:-.02em; }
.planner-summary p { margin:7px 0 0; color:#728096; font-size:12px; line-height:1.6; }
.planner-summary-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.planner-summary-chip { display:inline-flex; padding:6px 9px; border-radius:999px; background:#eef4fb; color:#3d5d7d; font-size:10px; font-weight:900; }
.planner-recommendation { margin:16px 20px 0; padding:15px 16px; border:1px solid rgba(40,145,87,.13); border-radius:14px; background:#f3fbf6; color:#285f40; }
.planner-recommendation.is-hidden { display:none; }
.planner-recommendation strong { display:block; font-size:13px; }
.planner-recommendation span { display:block; margin-top:5px; color:#4c765d; font-size:11px; line-height:1.55; }
.planner-table-wrap { overflow:auto; padding:18px 20px 20px; }
.planner-table { width:100%; min-width:780px; border-collapse:collapse; }
.planner-table th,.planner-table td { padding:11px 12px; border-bottom:1px solid rgba(39,56,82,.07); text-align:left; vertical-align:middle; }
.planner-table th { background:#f6f8fb; color:#77859a; font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; white-space:nowrap; }
.planner-table td { color:#36475f; font-size:11px; }
.planner-table tbody tr:last-child td { border-bottom:0; }
.planner-table td:first-child { font-weight:900; color:#26384f; white-space:nowrap; }
.planner-time-cell strong { display:block; color:#243852; font-size:12px; }
.planner-time-cell small { display:block; margin-top:3px; color:#8592a3; font-size:10px; }
.planner-city-head { display:flex; flex-direction:column; gap:3px; }
.planner-city-head small { color:#8793a5; font-size:9px; font-weight:700; text-transform:none; letter-spacing:0; }
.planner-cell-status { display:inline-flex; flex-wrap:wrap; align-items:center; gap:5px; padding:5px 7px; border-radius:9px; font-weight:900; }
.planner-cell-status.is-good { background:#eaf7ee; color:#2c7a4d; }
.planner-cell-status.is-possible { background:#fff5df; color:#996b1d; }
.planner-cell-status.is-outside { background:#faecec; color:#a34b4b; }
.planner-status-label { font-size:10px; }
.planner-overall-badge { display:inline-flex; padding:5px 7px; border-radius:9px; font-size:10px; font-weight:900; }
.planner-overall-badge.is-good { background:#eaf7ee; color:#2c7a4d; }
.planner-overall-badge.is-possible { background:#fff5df; color:#996b1d; }
.planner-overall-badge.is-outside { background:#faecec; color:#a34b4b; }
.planner-rollover { color:#a46522; font-size:9px; font-weight:900; }
.planner-event-table { min-width:720px; }
.planner-legend { margin-top:14px; padding:14px 16px; display:flex; flex-wrap:wrap; gap:14px 22px; box-shadow:none; background:#fbfcfe; }
.planner-legend > div { display:grid; grid-template-columns:10px auto; column-gap:8px; align-items:center; }
.planner-status-dot { width:9px; height:9px; border-radius:50%; grid-row:span 2; }
.planner-status-dot.is-good { background:#2da463; }
.planner-status-dot.is-possible { background:#d49b34; }
.planner-status-dot.is-outside { background:#c85b5b; }
.planner-legend strong { color:#52637b; font-size:11px; }
.planner-legend small { color:#8a96a6; font-size:10px; }
[data-event-only], [data-meeting-only] { display:none; }
[data-event-only].is-mode-visible, [data-meeting-only].is-mode-visible { display:flex; }
.planner-results.is-hidden { display:none; }
@media (max-width:1050px) {
  .planner-layout { grid-template-columns:1fr; }
  .planner-sidebar { display:none; }
  .planner-main { padding:28px 20px 100px; }
  .planner-mobile-nav { display:flex; }
  .planner-controls-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .planner-topbar { width:calc(100% - 28px); min-height:72px; }
  .planner-layout { width:100%; margin:0; }
  .planner-main { padding:22px 14px 100px; }
  .planner-heading { flex-direction:column; }
  .planner-card { padding:18px; border-radius:18px; }
  .planner-card-header { flex-direction:column; }
  .planner-mode-switch { width:100%; }
  .planner-mode-button { flex:1; }
  .planner-controls-grid { grid-template-columns:1fr; }
  .planner-actions { flex-direction:column-reverse; align-items:stretch; }
  .planner-actions button { width:100%; }
  .planner-summary { padding:18px; }
  .planner-recommendation { margin:14px 14px 0; }
  .planner-table-wrap { padding:14px; }
  .planner-legend { gap:12px; }
}
@media (max-width:520px) {
  .planner-heading h1 { font-size:29px; }
  .planner-city-picker { padding:13px; }
}
.planner-empty-result { padding:28px 16px; color:#758398; text-align:center; font-size:12px; line-height:1.6; }
.planner-sidebar .nav-item span:last-child { min-width:0; }
@media (min-width:1051px) {
  .planner-sidebar .nav-item { font-size:12px; }
}


/* Planner controls and buttons: scoped so the standalone page never depends on generic app button rules. */
.planner-mode-button,
.planner-actions button,
.planner-city-chip button {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
.planner-mode-button {
  border: 1px solid transparent;
  background: transparent;
  color: #6c7d93;
  font-weight: 800;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.planner-mode-button:hover { background: rgba(255,255,255,.78); color: #2d527d; }
.planner-mode-button:focus-visible { outline: 0; border-color: rgba(47,115,255,.35); box-shadow: 0 0 0 3px rgba(47,115,255,.12); }
.planner-mode-button.is-active { border-color: rgba(47,115,255,.10); }

.planner-actions .primary-button,
.planner-actions .secondary-button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 800 12px/1 inherit;
  letter-spacing: .01em;
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.planner-actions .primary-button {
  background: linear-gradient(135deg, #2f73ff, #245ed8);
  color: #fff;
  box-shadow: 0 10px 20px rgba(47,115,255,.20);
}
.planner-actions .primary-button:hover { transform: translateY(-1px); box-shadow: 0 13px 24px rgba(47,115,255,.24); }
.planner-actions .primary-button:active { transform: translateY(0); }
.planner-actions .primary-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(47,115,255,.16), 0 10px 20px rgba(47,115,255,.20); }
.planner-actions .secondary-button {
  background: #fff;
  color: #3b5876;
  border-color: rgba(53,79,112,.14);
  box-shadow: 0 6px 16px rgba(31,57,87,.06);
}
.planner-actions .secondary-button:hover { transform: translateY(-1px); background: #f6f9fd; border-color: rgba(47,115,255,.20); color: #274d79; }
.planner-actions .secondary-button:active { transform: translateY(0); }
.planner-actions .secondary-button:focus-visible { outline: 0; border-color: rgba(47,115,255,.35); box-shadow: 0 0 0 3px rgba(47,115,255,.10), 0 6px 16px rgba(31,57,87,.06); }
.planner-actions button:disabled { opacity: .56; cursor: not-allowed; transform: none; box-shadow: none; }
.planner-city-chip button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(47,115,255,.12); }

.planner-search-result {
  min-height: 52px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.planner-search-result:hover { border-color: rgba(47,115,255,.10); transform: translateY(-1px); }
.planner-search-result:focus-visible { border-color: rgba(47,115,255,.24); box-shadow: 0 0 0 3px rgba(47,115,255,.08); }

@media (prefers-reduced-motion: reduce) {
  .planner-mode-button, .planner-actions button, .planner-search-result { transition: none; }
}

@media (max-width: 760px) {
  .planner-actions .primary-button, .planner-actions .secondary-button { min-height: 46px; }
}


/* Theme-aware planner controls. These rules are intentionally scoped to this feature. */
:root[data-theme="dark"] .planner-actions .secondary-button,
:root[data-theme="aurora"] .planner-actions .secondary-button,
:root[data-theme="midnight"] .planner-actions .secondary-button,
:root[data-theme="day-night-world"][data-theme-state="twilight"] .planner-actions .secondary-button,
:root[data-theme="day-night-world"][data-theme-state="night"] .planner-actions .secondary-button {
  background: rgba(15, 25, 45, .92);
  color: #eaf2ff;
  border-color: rgba(142, 166, 205, .24);
}
:root[data-theme="dark"] .planner-actions .secondary-button:hover,
:root[data-theme="aurora"] .planner-actions .secondary-button:hover,
:root[data-theme="midnight"] .planner-actions .secondary-button:hover,
:root[data-theme="day-night-world"][data-theme-state="twilight"] .planner-actions .secondary-button:hover,
:root[data-theme="day-night-world"][data-theme-state="night"] .planner-actions .secondary-button:hover {
  background: rgba(28, 43, 70, .96);
  border-color: rgba(119, 166, 255, .36);
}
:root[data-theme="ocean"] .planner-actions .primary-button {
  background: linear-gradient(135deg, #0b86a8, #076b87);
}
:root[data-theme="sunset"] .planner-actions .primary-button {
  background: linear-gradient(135deg, #d97748, #b95732);
}
:root[data-theme="aurora"] .planner-actions .primary-button {
  background: linear-gradient(135deg, #5e8cff, #7657db);
}
:root[data-theme="midnight"] .planner-actions .primary-button {
  background: linear-gradient(135deg, #4778d8, #3159a9);
}
:root[data-theme="day-night-world"][data-theme-state="twilight"] .planner-actions .primary-button {
  background: linear-gradient(135deg, #c15b91, #7e4e9c);
}
:root[data-theme="day-night-world"][data-theme-state="night"] .planner-actions .primary-button {
  background: linear-gradient(135deg, #456bc8, #304a91);
}