:root {
  color-scheme: light;
  font: 14px/1.45 Inter, "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --page: #f7f6f2; --surface: #fff; --ink: #282922; --muted: #68685e;
  --border: #e9e6de; --light: #f8f7f3; --accent: #a64e36; --tint: #faeee6;
  --booked: #35778a; --demand: #9eaf72; --forecast: #d18264;
  --capacity: #8581ad; --physical: #747872; --bar: #a96c32; --highest-bar: #a45b73;
  --actual: #597767;
  --pickup: #518372; --pickup-7: #9b6fa0;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); }
button, input, select, a { font: inherit; }
button, select { color: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; letter-spacing: -.025em; line-height: 1.25; font-weight: 750; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; }
.topbar { height: 59px; display: flex; align-items: stretch; gap: 30px; padding-inline: clamp(16px, 2.8vw, 42px); background: #fffdf9; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 700; white-space: nowrap; letter-spacing: -.06em; }
.brand img { width: 30px; height: 30px; }
.brand strong { color: #8b6553; font-size: 12px; letter-spacing: .08em; margin-left: 3px; }
.navigation { display: flex; align-items: stretch; gap: 20px; min-width: 0; overflow-x: auto; }
.nav-item { padding: 0 2px; border: 0; background: transparent; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 550; }
.nav-item:hover { color: var(--accent); }
.nav-item[aria-current] { color: var(--accent); border-color: var(--accent); font-weight: 700; }
.source { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; white-space: nowrap; color: #79552e; background: #f8f0dc; border: 1px solid #eee3cc; border-radius: 20px; font-size: 12px; }
.source::before { content: ""; background: #af7d3d; width: 6px; height: 6px; border-radius: 50%; }
.source[data-live="true"] { background: #edf3ec; color: #365e48; border-color: #dce9da; }
.source[data-live="true"]::before { background: #518364; }
main { margin-inline: auto; padding: 8px clamp(12px, 2.8vw, 42px) 24px; max-width: 1900px; }
.workspace-layout:has(.analysis-nav:not([hidden])) { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
.workspace-layout main { min-width: 0; width: 100%; }
.analysis-nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 8px; background: #fffdf9; border-right: 1px solid var(--border); min-height: calc(100vh - 59px); }
.analysis-nav .nav-item { min-height: 36px; text-align: left; padding: 6px 9px; border: 0; border-radius: 6px; white-space: normal; }
.analysis-nav .nav-item[aria-current] { background: var(--tint); }
.pricing-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 10px; }
.pricing-tools .button[aria-pressed="true"] { background: var(--tint); color: var(--accent); }
.pricing-status { padding: 0 14px 8px; font-size: 13px; color: var(--muted); }
.pricing-status a, .task-link { color: var(--accent); text-decoration: underline; }
.pricing-segments { display: grid; gap: 3px; text-align: left; }
.pricing-segments span { color: var(--muted); }
.pricing-table .segment-table :is(th, td) { vertical-align: top; }
.task-index-id { display: block; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.workspace-toolbar { display: grid; grid-template: "title filters export" auto / auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; margin-bottom: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.workspace-toolbar h1 { grid-area: title; }
#export { grid-area: export; justify-self: end; }
.button, .icon-button, select, input[type="date"] { border: 1px solid var(--border); border-radius: 7px; background: var(--surface); min-height: 36px; }
.button, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; cursor: pointer; padding: 0 12px; font-weight: 550; }
.icon-button { width: 34px; padding: 0; }
.button:hover, .icon-button:hover, select:hover { border-color: #c7b6a9; background: #fcfaf6; }
.button.primary { color: white; background: var(--accent); border-color: var(--accent); }
.filters { grid-area: filters; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.filters label, .date-filter { display: flex; align-items: center; gap: 5px; min-width: 0; }
.date-inputs label { display: grid; gap: 5px; min-width: 0; }
.filters label > span:not(.select-wrap), .date-filter > span, .date-inputs label { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
input[type="date"] { padding-inline: 10px 22px; }
.workspace-toolbar :is(.button, .icon-button, select) { min-height: 32px; }
.workspace-toolbar .button { padding-inline: 8px; gap: 5px; }
.workspace-toolbar .icon-button { width: 28px; }
.filters select { width: 100%; min-width: 0; padding-inline: 6px; text-overflow: ellipsis; }
.select-wrap { position: relative; }
.select-wrap svg { position: absolute; top: 50%; left: 7px; transform: translateY(-50%); width: 15px; height: 15px; color: var(--accent); pointer-events: none; }
#hotel { width: clamp(124px, 11vw, 170px); padding-left: 24px; }
#room-type { width: clamp(92px, 8vw, 132px); }
#as-of { width: 120px; padding-inline: 5px; font-variant-numeric: tabular-nums; }
.date-buttons { display: flex; gap: 3px; }
#range { font-variant-numeric: tabular-nums; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--surface); padding: 10px 14px; border: 1px solid var(--border); border-radius: 9px; min-width: 0; }
.kpi strong { display: block; margin-top: 3px; font-size: clamp(19px, 2vw, 27px); font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; }
.kpi span { color: var(--muted); font-size: 12px; }
.kpi small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.kpi.emphasis { background: #fcf3ec; border-color: #efd9cb; }
.kpi.emphasis strong { color: #93462f; }
.board { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.board-header { padding: 13px 15px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.board-header p, .dialog-header p { margin-top: 3px; color: var(--muted); font-size: 12px; }
#alert-count { color: var(--accent); background: var(--tint); padding: 0 6px; border-radius: 5px; font-variant-numeric: tabular-nums; }
#alerts[aria-pressed="true"] { background: var(--tint); border-color: #e9c2ad; color: var(--accent); }
.legend { display: flex; align-items: center; gap: 4px 13px; justify-content: center; flex-wrap: wrap; padding: 0 12px 10px; }
.legend:empty { display: none; }
.legend button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px; background: transparent; border: 0; border-radius: 4px; color: var(--muted); font-size: 12px; }
.legend button[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--series); }
.legend .line { width: 14px; height: 2px; border-radius: 0; }
.grid-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #c9bfb4 var(--light); }
.track { --row-label: 134px; --rate-axis: 42px; min-width: calc(var(--row-label) + var(--days) * 76px + var(--rate-axis)); }
.plot { display: grid; grid-template-columns: var(--row-label) minmax(0, 1fr) var(--rate-axis); position: relative; margin-top: 1px; }
.plot svg.chart { display: block; width: 100%; height: 215px; stroke: none; overflow: visible; }
.plot .axis { position: relative; height: 215px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; background: var(--surface); }
.plot .axis:first-child { position: sticky; left: 0; z-index: 2; text-align: right; }
.axis span { position: absolute; inset-inline: 4px; transform: translateY(-50%); }
.axis strong { position: absolute; top: 4px; left: 12px; font-size: 11px; font-weight: 500; }
.chart-wrap { position: relative; min-width: 0; }
.chart-hotspots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); }
.chart-hotspots button { background: transparent; border: 0; min-width: 0; }
.chart-hotspots button:hover, .chart-hotspots button:focus-visible { background: rgb(166 78 54 / 8%); outline-offset: -2px; }
.chart-tooltip { position: fixed; max-width: 220px; z-index: 5; pointer-events: none; padding: 8px 11px; color: white; background: #33352e; border-radius: 6px; box-shadow: 0 3px 10px #0002; white-space: pre-line; font-size: 12px; }
.matrix { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 12px; }
.matrix col:first-child { width: var(--row-label); }
.matrix col:last-child { width: var(--rate-axis); }
.matrix th, .matrix td { text-align: center; border-bottom: 1px solid #efede6; border-right: 1px solid #efede6; padding: 4px 3px; height: 29px; }
.matrix td { overflow-wrap: anywhere; }
.matrix tr:last-child > * { border-bottom: 0; }
.matrix td:last-child, .matrix th:last-child { border-right: 0; }
.matrix thead th { background: #f2f0ea; border-block: 1px solid var(--border); }
.matrix thead th.weekend { background: #f8ede3; }
.matrix th[scope="row"], .matrix th:first-child { text-align: left; position: sticky; left: 0; z-index: 1; padding-left: 13px; background: #f8f7f3; white-space: nowrap; }
.matrix thead th:first-child { background: #efede5; }
.matrix tbody tr:nth-child(even) td { background: #fcfbf8; }
.matrix tbody tr:hover td { background: #f7f5ee; }
.matrix .key-row td { color: #235f72; font-weight: 650; }
.matrix .muted-cell { color: #818075 !important; }
.day-button { background: transparent; border: 0; padding: 3px; border-radius: 4px; width: 100%; min-height: 32px; display: grid; justify-items: center; line-height: 1.25; font-variant-numeric: tabular-nums; font-weight: 700; }
.day-button small { color: var(--muted); font-weight: 500; font-size: 10px; }
.day-button:hover { background: #e9e2d6; color: var(--accent); }
.day-button.today { color: var(--accent); }
.status { display: inline-flex; border-radius: 4px; padding: 1px 4px; font-size: 11px; white-space: nowrap; color: #4a6652; background: #edf3e9; }
.status.tight { color: #795318; background: #fbefd4; }
.status.soft { color: #42667e; background: #eaf2f6; }
.status.oversold { color: #9c3b2a; background: #fae9e2; }
.board-note { color: var(--muted); margin-top: 9px; font-size: 12px; }
.notice, .empty { padding: 18px; color: var(--muted); }
.notice { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.notice[data-error="true"] { color: #9b3c2b; }
.board .empty { text-align: center; padding: 38px 12px; }
dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 30px); padding: 0; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 65px #27231d36; color: var(--ink); background: var(--surface); }
dialog::backdrop { background: #211b1560; }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--border); padding: 13px 16px; }
.dialog-footer { display: flex; justify-content: end; padding: 0 16px 14px; }
.date-inputs { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 16px; }
.date-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 0; }
.date-presets .button { min-height: 30px; font-size: 12px; }
#day-dialog { width: 820px; }
.day-body { padding: 14px 16px 20px; display: grid; gap: 12px; }
.day-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 7px; }
.segment-block { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segment-block header { padding: 9px 11px; background: var(--light); border-bottom: 1px solid var(--border); }
.segment-block header p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.table-wrap { overflow-x: auto; }
.segment-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.segment-table :is(th, td) { padding: 7px 9px; border-bottom: 1px solid var(--border); }
.segment-table th:first-child { text-align: left; }
.segment-table tbody tr:last-child > * { border-bottom: 0; }
.strategy-heading p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.positive { color: #346b53; font-weight: 650; }
.analysis-content { display: grid; gap: 12px; padding: 0 15px 15px; min-width: 0; }
.analysis-content > * { min-width: 0; }
.analysis-wrap { padding-inline: 8px; }
.analysis-table { font-size: 13px; }
.analysis-table th { max-width: 220px; white-space: normal; overflow-wrap: anywhere; }
.analysis-table thead th { color: var(--muted); }
.analysis-table tbody tr:hover { background: var(--light); }
.behavior-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.behavior-rings { display: grid; gap: 12px; min-width: 0; }
.report-legend { display: flex; gap: 5px 12px; flex-wrap: wrap; list-style: none; padding: 10px 12px 0; margin: 0; font-size: 12px; color: var(--muted); }
.report-legend li { display: flex; align-items: center; gap: 5px; }
.report-legend i { background: var(--swatch); width: 8px; height: 8px; border-radius: 2px; }
.period-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; padding: 12px; align-items: start; }
.period-figure { margin: 0; display: grid; justify-items: center; gap: 7px; }
.period-figure figcaption { display: grid; justify-items: center; text-align: center; }
.period-figure figcaption span, .period-details, .donut span { color: var(--muted); font-size: 12px; }
.donut { width: min(126px, 100%); aspect-ratio: 1; background: var(--donut, #eeeae2); border-radius: 50%; display: grid; place-items: center; }
.donut > div { width: 68%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--surface); }
.donut strong { font-size: 22px; line-height: 1.1; }
.period-details { min-width: 100px; }
.period-details summary { cursor: pointer; text-align: center; }
.period-details ul { list-style: none; margin: 5px 0 0; padding: 0; }
.period-details li { display: flex; justify-content: space-between; gap: 6px; }
.weekday-period { padding: 10px 12px 13px; }
.weekday-period + .weekday-period { border-top: 1px solid var(--border); }
.weekday-period h4 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.weekday-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; text-align: center; }
.weekday-bar { font-size: 11px; color: var(--muted); }
.weekday-column { height: 119px; position: relative; display: grid; align-items: end; justify-items: center; border-bottom: 1px solid var(--border); margin: 6px 0 3px; }
.weekday-column i { width: 72%; max-width: 38px; background: var(--year-color); border-radius: 3px 3px 0 0; }
.weekday-column strong { position: absolute; bottom: 2px; padding-inline: 2px; border-radius: 2px; background: #fffE; color: var(--ink); font-size: 10px; }
.report-coverage { padding: 0 14px 6px; color: var(--muted); font-size: 12px; }
.market-value { display: flex; align-items: center; gap: 8px; }
.market-value > span:last-child { min-width: 78px; }
.market-track { flex: 1 0 45px; min-width: 45px; height: 13px; background: var(--light); border-radius: 3px; }
.market-track i { display: block; height: 100%; background: var(--bar-color); border-radius: inherit; }
.sort-label { border: 0; background: none; padding: 2px 0; white-space: nowrap; }
.sort-label[aria-pressed="true"] { color: var(--accent); font-weight: 750; }
.monthly-reports th { min-width: 77px; }
.monthly-reports td { min-width: 94px; }
.monthly-reports th:first-child { position: sticky; left: 0; background: var(--surface); }
.monthly-reports sup { color: var(--accent); }
.yoy { display: block; font-variant-numeric: tabular-nums; }
.negative { color: #ae523e; font-weight: 650; }
.order-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(34px, 1fr); gap: 4px; padding: 10px 14px; min-width: max-content; }
.order-bar { text-align: center; color: var(--muted); font-size: 11px; }
.order-bar div { display: flex; align-items: center; justify-content: end; flex-direction: column; height: 115px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.order-bar i { display: block; width: min(68%, 28px); background: var(--booked); }
.order-bar .cancelled-bar { background: var(--forecast); }
.analysis-disclosure summary { padding: 8px 11px; cursor: pointer; color: var(--muted); }
.radar-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 3px 14px 9px; }
.radar-filters .button { min-height: 30px; font-size: 12px; }
.radar-filters .button[aria-pressed="true"] { background: var(--tint); color: var(--accent); }
.radar-filters span { font-variant-numeric: tabular-nums; color: var(--muted); }
.analysis-date { border: 0; background: none; color: var(--accent); padding: 3px 0; font-variant-numeric: tabular-nums; }
.signal-list { display: flex; justify-content: end; gap: 4px; }
.status.rising { background: #edf3e9; color: #3f6a51; }
.status.falling { background: #f0edf5; color: #695280; }
@media (max-width: 1150px) {
  .workspace-toolbar { grid-template: "title export" auto / minmax(0, 1fr) auto; }
  .filters { grid-area: 2 / 1 / auto / -1; }
}
@media (max-width: 900px) {
  .behavior-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 750px) {
  .workspace-layout:has(.analysis-nav:not([hidden])) { grid-template-columns: 99px minmax(0, 1fr); }
  .analysis-nav { padding-inline: 5px; }
  .analysis-nav .nav-item { padding-inline: 5px; }
  .topbar { min-height: 56px; height: auto; flex-wrap: wrap; gap: 0 12px; }
  .brand { min-height: 51px; }
  .navigation { order: 3; flex: 0 0 100%; flex-wrap: wrap; gap: 0 16px; }
  .nav-item { min-height: 39px; }
  h1 { font-size: 18px; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kpi { padding: 8px; }
  .track { --row-label: 106px; }
  .matrix th[scope="row"], .matrix th:first-child { padding-left: 7px; }
}
@media (max-width: 500px) {
  .workspace-layout:has(.analysis-nav:not([hidden])) .date-filter { grid-column: 1 / -1; min-width: 0; }
  .workspace-layout:has(.analysis-nav:not([hidden])) .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-layout:has(.analysis-nav:not([hidden])) .date-buttons { flex-wrap: wrap; }
  .workspace-layout:has(.analysis-nav:not([hidden])) #period { order: -1; width: 100%; white-space: normal; }
  .workspace-layout:has(.analysis-nav:not([hidden])) #stay-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 650px) {
  .workspace-toolbar { padding: 5px 7px; row-gap: 4px; }
  .filters { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(112px, 1fr); gap: 5px; }
  .filters label { display: grid; gap: 2px; }
  .filters label > span:not(.select-wrap) { line-height: 1.2; }
  #hotel, #room-type, #as-of { width: 100%; }
  #as-of { font-size: 13px; }
  .date-filter { grid-column: 1 / -1; }
}
@media (max-width: 415px) {
  #stay-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 380px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #period svg { display: none; }
  .analysis-content { padding-inline: 8px; }
  .period-charts { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
}