:root {
  --ink: #17231f;
  --muted: #6e7974;
  --line: #dfe5df;
  --paper: #f6f8f4;
  --card: #ffffff;
  --green: #b9e5b4;
  --green-dark: #1f5a42;
  --mint: #e7f2e5;
  --warm: #f5c779;
  --warm-dark: #8b5d14;
  --danger: #df8c79;
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #79a9e8; outline-offset: 3px; }
.app-shell { min-height: 100vh; }
.topbar { height: 76px; padding: 0 5.2vw; border-bottom: 1px solid rgba(23,35,31,.12); display: flex; align-items: center; justify-content: space-between; background: rgba(246,248,244,.9); }
.brand { display: inline-flex; gap: 11px; align-items: center; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.06em; text-decoration: none; }
.brand-slash { color: #80ae78; padding: 0 1px; }
.brand-mark { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.brand-mark i { width: 4px; border-radius: 4px; display: block; background: var(--green-dark); transform: rotate(28deg); }
.brand-mark i:nth-child(1) { height: 10px; margin-bottom: 1px; }.brand-mark i:nth-child(2) { height: 16px; }.brand-mark i:nth-child(3) { height: 21px; }
.topbar-context { display: flex; align-items: center; gap: 25px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.fixture-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--green-dark); border: 1px solid #cfe2cf; background: #edf7eb; padding: 7px 10px; border-radius: 4px; }
.status-dot { width: 6px; height: 6px; background: #62a766; border-radius: 100%; box-shadow: 0 0 0 3px rgba(98,167,102,.15); }
.icon-button { width: 31px; height: 31px; border: 1px solid var(--line); background: white; border-radius: 4px; font-size: 16px; line-height: 1; transform: rotate(-45deg); }
.page-wrap { width: min(1340px, 89.6vw); margin: 0 auto; padding: 72px 0 82px; }
.intro-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 53px; }
.eyebrow { margin: 0 0 12px; color: #78907d; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }.intro-row h1 { max-width: 700px; margin-bottom: 21px; font-size: clamp(44px, 6vw, 81px); line-height: .98; letter-spacing: -.075em; font-weight: 800; }
h1 em { color: #739c73; font-style: normal; }.intro-copy { max-width: 465px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.intro-note { max-width: 310px; display: flex; align-items: flex-start; gap: 14px; padding: 16px 0 5px 19px; border-left: 2px solid var(--warm); color: #69746e; font-size: 11px; line-height: 1.65; }
.intro-note p { margin: 0; }.intro-note strong { color: var(--ink); }.note-icon { color: var(--warm-dark); font-size: 19px; line-height: 1; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 42px; }
.summary-card { min-height: 136px; padding: 20px 21px 17px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); display: flex; flex-direction: column; }
.summary-card-dark { color: white; border-color: #1f3a30; background: #1f3a30; }.summary-label { color: #89958e; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.summary-card-dark .summary-label { color: #a9c2b1; }
.summary-card strong { margin-top: 17px; font-size: 31px; letter-spacing: -.06em; line-height: 1; }.summary-foot { margin-top: auto; color: #929d96; font-size: 10px; }.summary-card-dark .summary-foot { color: #9fbaab; }.number-warm { color: #bd7722; }.summary-time { font-family: var(--mono); font-size: 25px !important; letter-spacing: -.1em !important; }.summary-time small { color: #98a29d; font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0; }
.coverage-bar { height: 5px; margin-top: 25px; overflow: hidden; border-radius: 5px; background: #e8ede8; }.coverage-bar span { display: block; height: 100%; border-radius: 5px; background: #79a879; }.summary-card-action .summary-foot { margin-top: 16px; }.summary-card-action .summary-foot strong { margin: 0; font-size: 10px; letter-spacing: 0; }
.workspace-grid { display: grid; grid-template-columns: 303px 1fr; align-items: start; gap: 12px; }.site-panel, .plan-panel { border: 1px solid var(--line); border-radius: 5px; background: var(--card); }.site-panel { min-height: 676px; display: flex; flex-direction: column; }.panel-heading { padding: 24px 22px 20px; display: flex; justify-content: space-between; align-items: flex-start; }.panel-heading .eyebrow { margin-bottom: 8px; }.panel-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.05em; }.panel-heading h2 span { color: #9ba69f; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0; vertical-align: 3px; }.small-add { padding: 7px 9px; border: 1px solid var(--line); border-radius: 3px; background: #fbfcfb; color: #587566; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }.small-add:hover { border-color: #9dbba1; background: var(--mint); }
.site-filters { display: flex; gap: 5px; padding: 0 15px 15px; border-bottom: 1px solid var(--line); }.filter-button { padding: 7px 8px; border: 0; border-radius: 3px; background: transparent; color: #89938d; font-size: 10px; }.filter-button span { margin-left: 3px; color: #b5beb8; font-family: var(--mono); font-size: 9px; }.filter-button.is-active { background: #edf4ec; color: var(--green-dark); }.filter-button.is-active span { color: #719578; }
.site-list { padding: 7px 8px; }.site-list.is-filtered .site-card[hidden] { display: none; }.site-card { position: relative; width: 100%; padding: 16px 14px; border: 1px solid transparent; border-radius: 4px; background: transparent; text-align: left; transition: background .2s, border-color .2s; }.site-card:hover { background: #f6faf5; }.site-card.is-selected { border-color: #bcd8bb; background: #f0f8ed; }.site-card.is-selected::before { position: absolute; top: 12px; left: -9px; width: 3px; height: 33px; border-radius: 2px; background: #6c9e70; content: ""; }.site-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.site-card h3 { margin: 0 0 7px; font-size: 13px; letter-spacing: -.03em; }.site-card p { margin: 0; color: #8a958e; font-size: 10px; }.site-card-status { display: flex; align-items: center; gap: 5px; color: #78827c; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }.site-card-status::before { width: 6px; height: 6px; border-radius: 50%; background: #76ab77; content: ""; }.site-card-status.status-review { color: var(--warm-dark); }.site-card-status.status-review::before { background: var(--warm); }.site-card-status.status-measure { color: #9c5a41; }.site-card-status.status-measure::before { background: var(--danger); }.site-card-meta { display: flex; gap: 14px; margin-top: 15px; color: #a0aaa4; font-family: var(--mono); font-size: 8px; }.site-panel-foot { display: flex; gap: 8px; align-items: center; margin-top: auto; padding: 17px 21px; border-top: 1px solid var(--line); color: #a0aaa5; font-size: 9px; line-height: 1.4; }.mini-lock { color: #86a28c; font-size: 17px; }
.plan-panel { min-height: 676px; overflow: hidden; }.plan-inner { padding: 28px 32px 31px; }.plan-top { display: flex; justify-content: space-between; gap: 25px; align-items: flex-start; padding-bottom: 23px; border-bottom: 1px solid var(--line); }.plan-title-wrap h2 { margin: 0 0 7px; font-size: 26px; letter-spacing: -.065em; }.location-line { color: #7e8b83; font-size: 11px; }.location-line span { display: inline-block; margin: 0 5px; color: #bdc6bf; }.plan-status { flex: 0 0 auto; padding: 9px 11px; border-radius: 3px; background: #e8f3e7; color: var(--green-dark); font-family: var(--mono); font-size: 9px; line-height: 1.3; letter-spacing: .04em; text-align: right; text-transform: uppercase; }.plan-status.status-review { background: #fff3dd; color: var(--warm-dark); }.plan-status.status-measure { background: #f9e8e3; color: #9c5a41; }.plan-status.status-unavailable { background: #eef0ee; color: #68736d; }
.plan-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }.meta-pair { display: flex; flex-direction: column; gap: 5px; }.meta-pair span { color: #a0aaa3; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }.meta-pair strong { font-size: 11px; font-weight: 600; }
.scenario-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 23px 0 22px; padding: 4px 4px 4px 11px; border: 1px solid var(--line); border-radius: 4px; background: #fafcf9; }.scenario-label { color: #839087; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }.scenario-buttons { display: flex; gap: 3px; }.scenario-button { padding: 7px 10px; border: 0; border-radius: 3px; background: transparent; color: #919c95; font-size: 10px; }.scenario-button.is-active { color: var(--green-dark); background: var(--green); font-weight: 700; }.scenario-button[data-scenario="hotter"].is-active { color: #815715; background: #f7dc9e; }.scenario-button[data-scenario="unavailable"].is-active { color: #616b65; background: #e3e7e3; }
.notice-banner { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; padding: 14px 15px; border-left: 3px solid #81aa7f; background: #f1f8ee; }.notice-banner.review { border-left-color: var(--warm); background: #fff7e8; }.notice-banner.measure { border-left-color: var(--danger); background: #fdf0ec; }.notice-banner.unavailable { border-left-color: #9ca6a0; background: #f0f2f0; }.notice-symbol { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 100%; background: #7da77b; color: white; font-family: var(--mono); font-size: 11px; line-height: 19px; text-align: center; }.review .notice-symbol { background: var(--warm-dark); }.measure .notice-symbol { background: #a65f4c; }.unavailable .notice-symbol { background: #77827a; }.notice-banner p { margin: 0; color: #66746b; font-size: 10px; line-height: 1.55; }.notice-banner strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 11px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }.section-heading h3 { margin: 0; font-size: 12px; letter-spacing: -.02em; }.section-heading span { color: #9ba59f; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }.outlook-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 27px; }.hour-card { padding: 11px 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: #fbfcfb; }.hour-card.is-peak { border-color: #f0d19a; background: #fffaf0; }.hour-card.is-past { opacity: .58; }.hour-time { color: #89938c; font-family: var(--mono); font-size: 8px; }.hour-temp { display: block; margin: 8px 0 5px; font-size: 16px; letter-spacing: -.05em; }.hour-temp sup { margin-left: 1px; color: #9ba59f; font-size: 9px; font-weight: 500; }.hour-bar { height: 4px; margin-bottom: 7px; overflow: hidden; border-radius: 3px; background: #e6eee5; }.hour-bar span { display: block; height: 100%; border-radius: 3px; background: #7db47d; }.hour-card.is-peak .hour-bar span { background: #e3aa45; }.hour-details { color: #8b968f; font-size: 8px; }.hour-flag { display: block; margin-top: 7px; color: #a26c1b; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.detail-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 25px; }.recommend-list { margin: 0; padding: 0; list-style: none; }.recommend-list li { display: grid; grid-template-columns: 21px 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid #edf0ed; color: #53615a; font-size: 10px; line-height: 1.5; }.recommend-list li:first-child { border-top: 0; padding-top: 1px; }.recommend-list li::before { width: 17px; height: 17px; border-radius: 50%; background: #e1f0df; color: #4a8155; content: "✓"; font-family: var(--mono); font-size: 9px; line-height: 17px; text-align: center; }.recommend-list li.caution::before { background: #fff0ce; color: #a87120; content: "!"; }.recommend-list li.blocked::before { background: #f4ded9; color: #a55748; content: "×"; }.source-note { margin-top: 15px; padding-top: 11px; border-top: 1px dashed #dce3dc; color: #99a49d; font-family: var(--mono); font-size: 8px; line-height: 1.5; }.source-note a { color: #5d8668; text-decoration: underline; text-underline-offset: 2px; }
.checklist { margin: 0; padding: 0; list-style: none; }.check-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-top: 1px solid #edf0ed; }.check-item:first-child { border-top: 0; padding-top: 1px; }.check-item input { position: absolute; opacity: 0; }.check-box { flex: 0 0 auto; width: 17px; height: 17px; border: 1px solid #c8d3ca; border-radius: 3px; background: #fff; color: white; font-family: var(--mono); font-size: 10px; line-height: 15px; text-align: center; }.check-item input:checked + .check-box { border-color: #6e9d70; background: #6e9d70; }.check-item input:checked + .check-box::after { content: "✓"; }.check-copy { display: flex; flex-direction: column; gap: 2px; color: #53615a; font-size: 10px; line-height: 1.35; }.check-copy small { color: #9ba49e; font-size: 8px; }.check-item.is-required .check-copy::after { width: max-content; margin-top: 2px; padding: 2px 4px; border-radius: 2px; background: #fff0d2; color: #9a6a23; content: "confirm before start"; font-family: var(--mono); font-size: 7px; letter-spacing: .02em; text-transform: uppercase; }.check-item.is-required input:checked ~ .check-copy::after { background: #e4f1e1; color: #4d8053; content: "confirmed"; }
.plan-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }.owner-card { padding: 13px; border: 1px solid var(--line); border-radius: 3px; }.owner-label { color: #9ba69f; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }.owner-main { display: flex; align-items: center; gap: 9px; margin-top: 10px; }.avatar { width: 25px; height: 25px; border-radius: 100%; background: #d9ebd5; color: #48784f; font-family: var(--mono); font-size: 9px; line-height: 25px; text-align: center; }.owner-main strong { font-size: 10px; }.owner-main small { display: block; margin-top: 2px; color: #9aa49e; font-size: 8px; }.plan-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }.primary-button, .secondary-button { padding: 11px 13px; border-radius: 3px; font-size: 10px; font-weight: 700; }.primary-button { border: 1px solid #244f3c; background: #244f3c; color: white; }.primary-button:hover { background: #31684e; }.secondary-button { border: 1px solid var(--line); background: white; color: #64726a; }.secondary-button:hover { border-color: #9db8a1; background: #f4f9f2; }
.source-strip { display: grid; grid-template-columns: 1.1fr 1.3fr 1.3fr 1.6fr; gap: 10px; align-items: center; margin-top: 12px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 5px; background: #eef4ed; }.source-strip-label { display: flex; align-items: center; gap: 8px; color: var(--green-dark); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }.source-symbol { font-size: 19px; }.source-item { display: flex; gap: 8px; align-items: center; color: #78857c; font-size: 9px; }.source-item strong { color: #3d5e47; }.source-state { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 100%; }.source-state-ok { background: #6ea371; }.source-state-muted { background: #adb8b0; }.source-item-muted { color: #9ba69e; }
.boundary-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 19px; align-items: start; margin-top: 42px; padding: 23px 25px; border: 1px solid #ead7b6; border-radius: 5px; background: #fffaf0; }.boundary-icon { width: 29px; height: 29px; border: 1px solid #d9a858; border-radius: 50%; color: #ad7622; font-family: var(--mono); font-size: 14px; line-height: 27px; text-align: center; }.boundary-card .eyebrow { margin-bottom: 7px; color: #ac8954; }.boundary-card h2 { margin-bottom: 8px; font-size: 16px; letter-spacing: -.04em; }.boundary-card p { max-width: 790px; margin-bottom: 0; color: #876f4a; font-size: 10px; line-height: 1.6; }.boundary-tag { padding: 5px 0 0 20px; border-left: 1px solid #ead7b6; color: #b29463; font-family: var(--mono); font-size: 8px; line-height: 1.6; text-transform: uppercase; }.boundary-tag strong { color: #97723a; font-size: 10px; }
.footer { display: flex; justify-content: space-between; gap: 15px; padding: 22px 5.2vw; border-top: 1px solid var(--line); color: #97a29b; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }.footer small { color: #b0b9b2; }.toast { position: fixed; right: 22px; bottom: 22px; z-index: 5; max-width: 310px; padding: 12px 15px; border: 1px solid #c1d8bf; border-radius: 4px; background: #f0f9ed; color: #376442; box-shadow: 0 8px 30px rgba(31,58,48,.12); font-size: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) { .page-wrap { width: min(92vw, 760px); padding-top: 52px; }.intro-row { display: block; }.intro-note { margin-top: 28px; }.summary-grid { grid-template-columns: repeat(2, 1fr); }.workspace-grid { grid-template-columns: 1fr; }.site-panel { min-height: 0; }.site-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }.site-panel-foot { display: none; }.plan-panel { min-height: 0; }.source-strip { grid-template-columns: repeat(2, 1fr); }.source-strip-label { grid-column: span 2; } }
@media (max-width: 650px) { .topbar { height: 64px; padding: 0 4vw; }.today-label { display: none; }.page-wrap { width: 92vw; padding: 39px 0 58px; }.intro-row { margin-bottom: 35px; }.intro-row h1 { font-size: 48px; }.intro-copy { font-size: 13px; }.summary-grid { gap: 7px; margin-bottom: 28px; }.summary-card { min-height: 112px; padding: 15px; }.summary-card strong { margin-top: 13px; font-size: 26px; }.workspace-grid { gap: 8px; }.site-list { display: block; }.site-card { padding: 13px 11px; }.plan-inner { padding: 21px 17px 22px; }.plan-top { display: block; }.plan-status { display: inline-block; margin-top: 16px; text-align: left; }.plan-meta { gap: 12px; }.scenario-bar { display: block; padding: 10px; }.scenario-label { display: block; margin-bottom: 8px; }.scenario-buttons { justify-content: space-between; }.scenario-button { flex: 1; padding: 8px 4px; font-size: 9px; }.outlook-grid { grid-template-columns: repeat(5, minmax(50px, 1fr)); overflow-x: auto; }.hour-card { min-width: 54px; padding: 9px 6px; }.hour-details { font-size: 7px; }.detail-grid, .plan-bottom { grid-template-columns: 1fr; gap: 22px; }.plan-actions { justify-content: flex-start; }.source-strip { display: block; padding: 15px; }.source-strip-label { margin-bottom: 13px; }.source-item { margin-top: 9px; }.boundary-card { grid-template-columns: 29px 1fr; gap: 12px; padding: 18px; }.boundary-tag { grid-column: 2; padding: 9px 0 0; border-top: 1px solid #ead7b6; border-left: 0; }.footer { display: block; padding: 18px 4vw; line-height: 2; } }