.mockup-home {
  --mockup-ink: #354553;
  --mockup-strong: #2a3846;
  --mockup-muted: #6e7986;
  --mockup-faint: #8b97a3;
  --mockup-orange: #c07249;
  --mockup-green: #5b9a51;
  --mockup-green-soft: #eff6f1;
  --mockup-line: #e6eef5;
  --mockup-shadow: 0 10px 28px rgba(70, 100, 130, 0.07);
  margin: 0 -20px;
  padding: 0 40px 36px;
  min-height: 660px;
  color: var(--mockup-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #f8fbfd url('/assets/web-bg.png') center top / cover no-repeat;
}

/* Result page uses the same ZIP frontend visual system as the planner home. */
.shell:has(.mockup-result) {
  color: #354553;
}
body.plan-page,
body:has(.mockup-result) {
  background-color: #f8fbfd !important;
  background-image: none !important;
}
body.plan-page::before,
body:has(.mockup-result)::before { display: none; }
body.admin-page {
  background-color: #f8fbfd !important;
  background-image: none !important;
}
body.admin-page::before { display: none; }
.shell:has(.mockup-result) .topbar {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 64px;
  padding: 0;
  border-bottom-color: rgba(53, 69, 83, .28);
}
.shell:has(.mockup-result) .brand { color: #2a3846; }
.shell:has(.mockup-result) .wordmark { font-size: 23px; }
.shell:has(.mockup-result) .nav { display: flex; }
.shell:has(.mockup-result) .nav .button {
  border: 0;
  border-radius: 999px;
  background: #c07249;
  color: #fff;
  min-height: 38px;
  padding: 0 19px;
}
.shell:has(.mockup-result) .mobile-menu { display: none; }

body.admin-page .topbar {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 64px;
  padding: 0;
  border-bottom-color: rgba(53, 69, 83, .28);
}
body.admin-page .brand { color: #2a3846; }
body.admin-page .wordmark { font-size: 23px; }
body.admin-page .nav { display: flex; }
body.admin-page .nav .button {
  border: 0;
  border-radius: 999px;
  background: #c07249;
  color: #fff;
  min-height: 38px;
  padding: 0 19px;
}
body.admin-page .mobile-menu { display: none; }
body.admin-page .page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 20px 70px;
}
body.admin-page .page > .eyebrow { color: #5b9a51; }
body.admin-page .page .admin-card,
body.admin-page .admin-card,
body.admin-page .stat-card {
  border-color: #dfe8ef;
  border-radius: 18px;
  background: rgba(251, 252, 253, .92);
  box-shadow: 0 10px 28px rgba(70, 100, 130, .07);
  color: #354553;
}
body.admin-page .page .admin-card h1 { color: #2a3846; }
body.admin-page .page .muted,
body.admin-page .admin-panel > .muted,
body.admin-page .admin-hint { color: #6e7986; }
body.admin-page .admin-layout {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 20px 70px;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
}
body.admin-page .admin-nav {
  border-right-color: #dfe8ef;
}
body.admin-page .admin-nav h1,
body.admin-page .admin-panel h2,
body.admin-page .admin-card h3 { color: #2a3846; }
body.admin-page .admin-nav button { color: #354553; }
body.admin-page .admin-nav button.active,
body.admin-page .admin-nav button:hover { background: #eff6f1; color: #5b9a51; }
body.admin-page .notice {
  border-left-color: #5b9a51;
  background: #eff6f1;
}
body.admin-page .admin-form input,
body.admin-page .admin-form textarea,
body.admin-page .admin-form select {
  border-color: #b8c4cd;
  border-radius: 12px;
  background: #f4f7fa;
  color: #2a3846;
}
body.admin-page .admin-form .primary { background: #c07249; border-radius: 999px; }
body.admin-page .admin-form .outline,
body.admin-page .admin-actions .outline { border-color: #aebdc7; color: #2a3846; border-radius: 999px; }
body.admin-page .health-row { border-bottom-color: #e6eef5; }
body.admin-page .forecast-table th { color: #6e7986; border-bottom-color: #dfe8ef; }
body.admin-page .forecast-table td { border-bottom-color: #e6eef5; }

.mockup-result {
  --result-ink: #354553;
  --result-strong: #2a3846;
  --result-muted: #6e7986;
  --result-green: #5b9a51;
  --result-green-soft: #eff6f1;
  --result-orange: #c07249;
  --result-line: #e6eef5;
  margin: 0 -20px;
  padding: 0 40px 36px;
  min-height: 720px;
  color: var(--result-ink);
  background: #f8fbfd url('/assets/web-bg.png') center top / cover no-repeat;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.mockup-result.result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 34px;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding: 48px 20px 32px;
}
.mockup-result .result-main { min-width: 0; }
.mockup-result .result-top { margin-bottom: 28px; }
.mockup-result .result-top .crumb { color: var(--result-muted); font-size: 14px; }
.mockup-result .result-top button { color: var(--result-green); font-weight: 700; }
.mockup-result .eyebrow { color: var(--result-green); }
.mockup-result .result-main h1 {
  margin: 12px 0 14px;
  color: var(--result-strong);
  font: 650 clamp(52px, 7vw, 88px)/.94 Fraunces, Georgia, serif;
  letter-spacing: -.04em;
}
.mockup-result .verdict {
  max-width: 760px;
  color: var(--result-strong);
  font: 650 clamp(27px, 3.2vw, 43px)/1.05 Fraunces, Georgia, serif;
}
.mockup-result .reason {
  max-width: 700px;
  margin-top: 16px;
  color: var(--result-muted);
  font: 400 21px/1.25 Fraunces, Georgia, serif;
}
.mockup-result .metrics {
  margin: 30px 0;
  border: 1px solid var(--result-line);
  border-radius: 18px;
  background: rgba(251, 252, 253, .9);
  overflow: hidden;
}
.mockup-result .metric { padding: 16px 14px; }
.mockup-result .metric + .metric { border-left-color: var(--result-line); }
.mockup-result .metric .micon { font-size: 27px; }
.mockup-result .metric b { color: var(--result-strong); font-size: 25px; }
.mockup-result .metric span { color: var(--result-muted); }
.mockup-result .timeline-wrap {
  margin: 30px 0;
  padding: 18px;
  border-radius: 18px;
  background: rgba(251, 252, 253, .92);
  box-shadow: 0 10px 28px rgba(70, 100, 130, .07);
}
.mockup-result .timeline-head { color: var(--result-muted); font-size: 13px; }
.mockup-result .timeline-head strong { color: var(--result-green); }
.mockup-result .timeline { background: linear-gradient(to bottom, #edf5f7, #f8fbfd); border-bottom-color: #9db0bb; }
.mockup-result .window-bar { background: #dbeed8; border-color: var(--result-green); }
.mockup-result .timeline-mark { border-left-color: var(--result-orange); }
.mockup-result .timeline-mark span { color: var(--result-orange); }
.mockup-result .tick-row { color: var(--result-muted); }
.mockup-result .planb {
  border-color: #d59b7d;
  border-radius: 18px;
  background: #fff4ed;
  padding: 18px 20px;
}
.mockup-result .planb .warn { color: var(--result-orange); }
.mockup-result .planb strong { color: #a35432; }
.mockup-result .source-note { color: var(--result-muted); }
.mockup-result .side {
  border-left-color: var(--result-line);
  padding-left: 28px;
}
.mockup-result .share-title { color: var(--result-muted); font-size: 12px; }
.mockup-result .share-card {
  border-color: #b9d0bf;
  border-radius: 20px;
  background: rgba(239, 246, 241, .94);
  box-shadow: 0 10px 28px rgba(70, 100, 130, .07);
}
.mockup-result .share-card h2 { color: var(--result-strong); }
.mockup-result .share-card .share-window { color: var(--result-green); }
.mockup-result .share-card p { color: var(--result-muted); }
.mockup-result .share-stats { border-color: rgba(91, 154, 81, .28); }
.mockup-result .share-stats span { color: var(--result-muted); }
.mockup-result .event-label input {
  border-color: #b8c4cd;
  border-radius: 12px;
  background: #f4f7fa;
}
.mockup-result .actions .primary { background: var(--result-orange); border-radius: 999px; }
.mockup-result .actions .outline { border-color: #aebdc7; color: var(--result-strong); border-radius: 999px; }
.mockup-result .privacy-note { color: var(--result-muted); }
.mockup-result .alert { border-color: #d59b7d; background: #fff0e8; color: #7d3b25; }

@media (max-width: 799px) {
  .shell:has(.mockup-result) .topbar {
    min-height: 58px;
    margin: 0 -20px;
    padding: 0 18px;
    border-bottom-color: rgba(53, 69, 83, .28);
  }
  .shell:has(.mockup-result) .nav { display: flex; }
  .shell:has(.mockup-result) .nav {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .mockup-result {
    margin: 0 -20px;
    padding: 0 18px 28px;
    min-height: 820px;
    background-image: url('/assets/mobile-bg.png');
  }
  .mockup-result.result-layout {
    display: block;
    padding: 32px 2px 94px;
  }
  .mockup-result .result-top { margin-bottom: 24px; }
  .mockup-result .result-main h1 { font-size: 54px; }
  .mockup-result .verdict { font-size: 30px; }
  .mockup-result .reason { font-size: 19px; }
  .mockup-result .metrics { margin: 24px 0; border-radius: 16px; }
  .mockup-result .metric { padding: 13px 9px; display: block; }
  .mockup-result .metric .micon { font-size: 23px; }
  .mockup-result .metric b { font-size: 21px; }
  .mockup-result .timeline-wrap { padding: 14px; border-radius: 16px; overflow: hidden; }
  .mockup-result .timeline-scroll { overflow-x: auto; padding-bottom: 6px; }
  .mockup-result .timeline { min-width: 620px; }
  .mockup-result .side { border-left: 0; padding: 30px 0 0; }
  .mockup-result .share-card { max-width: none; }
}

.mockup-header {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(53, 69, 83, .28);
}

.mockup-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mockup-strong); font-weight: 650; letter-spacing: -.02em; }
.mockup-logo { width: 30px; height: 34px; object-fit: contain; }
.mockup-brand .leafmark { width: 34px; height: 40px; }
.mockup-brand-name { font: 700 23px/1 'Fraunces', Georgia, serif; }
.mockup-share { border: 0; border-radius: 999px; background: var(--mockup-orange); color: #fff; min-height: 38px; padding: 0 19px; font-weight: 700; }
.mockup-share:hover { filter: brightness(.94); transform: translateY(-1px); }

.mockup-hero, .mockup-planner, .mockup-forecast { max-width: 1160px; margin-left: auto; margin-right: auto; }
.mockup-hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 30px; padding: 58px 20px 34px; }
.mockup-eyebrow { margin: 0; color: var(--mockup-green); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.mockup-hero h1 { margin: 14px 0 0; max-width: 720px; font: 560 clamp(48px, 6vw, 78px)/.96 'Fraunces', Georgia, serif; letter-spacing: -.035em; color: var(--mockup-strong); }
.mockup-hero h1 span { display: block; }
.mockup-hero h1 em { color: #bb6b46; font-style: normal; }
.mockup-sub { margin-top: 16px; max-width: 600px; color: var(--mockup-muted); font: 400 23px/1.2 'Fraunces', Georgia, serif; }
.mockup-art { width: min(100%, 410px); justify-self: end; color: var(--mockup-strong); }
.mockup-art svg { display: block; width: 100%; height: auto; }

.mockup-planner { display: grid; grid-template-columns: 1.2fr .82fr 1.35fr 1.1fr 1fr 1.2fr; align-items: end; gap: 14px; padding: 18px; border: 1px solid var(--mockup-green); border-radius: 22px; background: rgba(251, 252, 253, .88); box-shadow: var(--mockup-shadow); }
.mockup-field { min-width: 0; }
.mockup-field + .mockup-field { border-left: 1px solid rgba(53, 69, 83, .22); padding-left: 14px; }
.mockup-field > label, .mockup-field > legend { display: block; margin-bottom: 7px; border: 0; color: var(--mockup-strong); font-size: 13px; font-weight: 750; }
.mockup-input { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 11px; border: 1px solid #b8c4cd; border-radius: 12px; background: #f4f7fa; }
.mockup-input input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--mockup-strong); font-weight: 650; }
.mockup-input button { color: var(--mockup-faint); border: 0; background: transparent; font-size: 22px; line-height: 1; }
.mockup-pin { width: 17px; height: 17px; color: var(--mockup-faint); flex: none; }
.mockup-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; min-height: 44px; padding: 4px; border-radius: 999px; background: #eef3f8; }
.mockup-segment button { min-height: 36px; border-radius: 999px; color: var(--mockup-faint); font-size: 14px; font-weight: 700; }
.mockup-segment button.active { background: #fff; color: var(--mockup-strong); box-shadow: 0 1px 4px rgba(30, 50, 70, .12); }
.mockup-dates { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.mockup-date { min-width: 50px; min-height: 52px; padding: 4px 8px; border: 1px solid #dfe8ef; border-radius: 14px; background: #fbfcfd; color: var(--mockup-faint); font-size: 11px; font-weight: 650; line-height: 1.05; }
.mockup-date b { display: block; margin-top: 2px; color: var(--mockup-strong); font: 700 19px/1.1 'Fraunces', Georgia, serif; }
.mockup-date.active { border-color: transparent; background: var(--mockup-green); color: #fff; }
.mockup-date.active b { color: #fff; }
.mockup-control { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid #b8c4cd; border-radius: 12px; background: #f4f7fa; color: var(--mockup-strong); font: 650 14px/1 Inter, ui-sans-serif, system-ui, sans-serif; }
.mockup-control:focus-visible { outline: 3px solid #126c9b; outline-offset: 2px; }
.mockup-comfort-field { align-self: center; }
.mockup-schedule-box { grid-column: auto; min-width: 0; margin: 0; padding: 8px 10px 10px; border: 1px solid #d3e2d4; border-radius: 14px; background: var(--mockup-green-soft); }
.mockup-schedule-box legend { padding: 0 5px; color: var(--mockup-green); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mockup-schedule-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.mockup-schedule-grid .mockup-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.mockup-schedule-grid .mockup-field > label { margin: 0; font-size: 11px; white-space: nowrap; }
.mockup-schedule-grid .mockup-field + .mockup-field { border-left: 0; padding-left: 0; }
.mockup-schedule-grid .mockup-control { width: 88px; min-height: 32px; padding: 0 7px; font-size: 12px; }
.mockup-comfort { display: grid; gap: 5px; }
.mockup-check { display: flex; align-items: center; gap: 6px; color: var(--mockup-muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.mockup-check input { appearance: none; width: 17px; height: 17px; margin: 0; border: 1px solid var(--mockup-green); border-radius: 4px; background: transparent; }
.mockup-check input:checked { background: var(--mockup-green); box-shadow: inset 0 0 0 3px #fff; }
.mockup-find { width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: var(--mockup-orange); color: #fff; font-weight: 800; }
.mockup-find:hover { filter: brightness(.94); transform: translateY(-1px); }
.mockup-helper { margin: 7px 0 0; color: var(--mockup-muted); font-size: 11px; }
.mockup-helper button { padding: 0; border: 0; background: transparent; color: var(--mockup-green); text-decoration: underline; }
.mockup-privacy { max-width: 1160px; margin: 10px auto 0; padding: 0 20px; color: var(--mockup-muted); font-size: 12px; }

.mockup-forecast { margin-top: 18px; padding: 19px 20px 15px; border-radius: 22px; background: rgba(251, 252, 253, .94); box-shadow: var(--mockup-shadow); }
.mockup-forecast-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.mockup-forecast h2 { margin: 0; color: var(--mockup-strong); font: 650 25px/1.05 'Fraunces', Georgia, serif; }
.mockup-forecast-note { margin-top: 5px; color: var(--mockup-muted); font: 400 16px/1.25 'Fraunces', Georgia, serif; }
.mockup-bet { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: #e7f3e4; color: #5e8a48; font-size: 12px; font-weight: 750; white-space: nowrap; }
.mockup-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: 185px; }
.mockup-hour { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; padding: 7px 5px 8px; color: var(--mockup-strong); }
.mockup-hour + .mockup-hour { border-left: 1px solid var(--mockup-line); }
.mockup-hour.best { border-radius: 16px; background: var(--mockup-green-soft); }
.mockup-hour-tag { min-height: 20px; padding: 4px 8px; border-radius: 999px; background: var(--mockup-green); color: #fff; font-size: 10px; font-weight: 750; line-height: 1; }
.mockup-hour-time { color: var(--mockup-faint); font-size: 13px; font-weight: 700; }
.mockup-hour-icon { font-size: 28px; line-height: 1; }
.mockup-hour-temp { font-size: 22px; font-weight: 750; letter-spacing: -.03em; }
.mockup-hour-rain { display: flex; align-items: center; gap: 4px; color: var(--mockup-faint); font-size: 13px; }
.mockup-source { margin-top: 9px; color: var(--mockup-muted); font-size: 12px; }
.mockup-loading, .mockup-error { margin: 0; padding: 22px; border-radius: 16px; border: 1px solid var(--mockup-green); background: rgba(239, 246, 241, .75); }
.mockup-error { border-color: #a8322d; background: #fff0ed; }
.mockup-loading strong, .mockup-error strong { display: block; font: 650 22px/1.1 'Fraunces', Georgia, serif; }

@media (max-width: 1000px) {
  .mockup-planner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mockup-schedule-box { grid-column: auto; }
  .mockup-field:nth-child(3) { border-left: 0; padding-left: 0; }
  .mockup-field:nth-child(4) { border-left: 1px solid rgba(53, 69, 83, .22); }
  .mockup-field:last-child { grid-column: 1 / -1; }
}

@media (max-width: 799px) {
  .mockup-home { margin: 0 -20px; padding: 0 18px 28px; min-height: 820px; background-image: url('/assets/mobile-bg.png'); }
  .mockup-header { min-height: 58px; }
  .mockup-brand-name { font-size: 21px; }
  .mockup-share { min-height: 35px; padding: 0 15px; font-size: 13px; }
  .mockup-hero { display: block; padding: 34px 2px 22px; }
  .mockup-hero h1 { font-size: 44px; line-height: .98; }
  .mockup-sub { font-size: 20px; }
  .mockup-art { display: none; }
  .mockup-planner { display: block; padding: 14px; border-radius: 20px; }
  .mockup-field, .mockup-field + .mockup-field { border: 0; padding: 0; margin-bottom: 14px; }
  .mockup-schedule-box { display: block; margin-bottom: 14px; padding: 8px 10px 10px; }
  .mockup-schedule-grid { grid-template-columns: 1fr; gap: 6px; }
  .mockup-schedule-grid .mockup-field { margin-bottom: 0; }
  .mockup-schedule-grid .mockup-field + .mockup-field { border-left: 0; padding-left: 0; }
  .mockup-field:last-child { margin-bottom: 0; }
  .mockup-comfort-field { border-top: 1px solid var(--mockup-line) !important; padding-top: 12px !important; }
  .mockup-dates { gap: 7px; }
  .mockup-date { flex: 1; min-width: 0; }
  .mockup-privacy { padding: 0 2px; }
  .mockup-forecast { margin-top: 16px; padding: 16px 0 8px; border-radius: 20px; }
  .mockup-forecast-head { padding: 0 16px; }
  .mockup-forecast h2 { font-size: 19px; }
  .mockup-forecast-note { font-size: 14px; }
  .mockup-bet { font-size: 11px; }
  .mockup-hours { display: block; min-height: 0; }
  .mockup-hour { display: grid; grid-template-columns: 62px 38px 1fr auto; align-items: center; min-height: 51px; padding: 0 16px; }
  .mockup-hour + .mockup-hour { border-top: 1px solid var(--mockup-line); border-left: 0; }
  .mockup-hour.best { border-radius: 0; }
  .mockup-hour-tag { display: none; }
  .mockup-hour-time { color: var(--mockup-strong); font-size: 15px; }
  .mockup-hour-icon { font-size: 23px; }
  .mockup-hour-temp { font-size: 16px; }
  .mockup-hour-rain { font-size: 14px; }
  .mockup-source { padding: 0 16px; }
}

@media (max-width: 799px) {
  body.admin-page .topbar {
    min-height: 58px;
    margin: 0 -20px;
    padding: 0 18px;
  }
  body.admin-page .nav {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body.admin-page .page { padding: 34px 2px 60px; }
  body.admin-page .page > h1 { font-size: 48px; }
  body.admin-page .page .admin-card { margin-top: 28px !important; padding: 20px; }
  body.admin-page .admin-layout {
    display: block;
    padding: 32px 2px 60px;
  }
  body.admin-page .admin-nav {
    border-right: 0;
    border-bottom-color: #dfe8ef;
    padding: 0 0 12px;
  }
  body.admin-page .admin-panel { padding-top: 28px; }
  body.admin-page .admin-panel h2 { font-size: 34px; }
  body.admin-page .admin-grid { grid-template-columns: 1fr; }
}