/* Northstar 北美差旅小助手 · 样式系统（2026-09-15 重排：15px 基准字阶 / 12px 下限 / 8pt 网格 / 40px+ 触控目标） */
:root {
  --bg:#f5f6f3;
  --paper:#fff;
  --ink:#233932;
  --muted:#839087;
  --green:#24785d;
  --green-dark:#183f35;
  --border:#e6eae4;
  --light:#edf5ee;
  --amber:#b5822a;
  --red:#bd6459;
  --shadow:0 5px 18px #25432e04;
  font-family:'DM Sans','Noto Sans SC','Microsoft YaHei',sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  font-size:15px
}

button,input,select {
  font:inherit
}

button,a,input,select,summary {
   -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:wait;
  opacity:.55
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #a3c9b0;
  outline-offset:3px
}

button {
  color:inherit
}

a {
  color:inherit;
  text-decoration:none
}

i[data-icon] {
  display:inline-flex;
  vertical-align:middle;
  flex-shrink:0
}

i svg {
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.65;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}

h1,h2,h3,p {
  margin:0
}

button {
  border:0;
  background:none
}

.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:240px;
  background:#183d33;
  color:#d5e1d8;
  padding:34px 22px 0;
  display:flex;
  flex-direction:column;
  z-index:20
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:#f8fbf4;
  font-size:20px;
  font-weight:700;
  letter-spacing:1.4px
}

.brand-icon {
  font-size:49px;
  line-height:1;
  color:#d5e7ac;
  font-weight:400
}

.brand small {
  display:block;
  font-size:13px;
  letter-spacing:1px;
  color:#9bb4a6;
  font-weight:400;
  margin-top:7px
}

.workspace-label {
  font-size:13px;
  letter-spacing:1.6px;
  color:#85a294;
  margin-top:58px;
  margin-bottom:18px
}

.workspace-label span {
  font-size:13px;
  border:1px solid #4b685a;
  border-radius:4px;
  padding:2px 5px;
  letter-spacing:0;
  float:right
}

.nav-item {
  width:100%;
  text-align:left;
  display:flex;
  gap:12px;
  align-items:center;
  height:48px;
  border-radius:7px;
  color:#b3c8b9;
  margin:6px 0;
  font-size:15px;
  padding:0 13px
}

.nav-item.active {
  background:#315346;
  color:#fff
}

.nav-item:hover {
  background:#294b3e
}

.nav-item>span {
  margin-left:auto;
  font-size:13px;
  color:#a4bdac
}

.nav-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d6e7a6
}

.sidebar-note {
  margin-top:auto;
  padding:35px 6px 38px
}

.tiny-orbit {
  font-size:52px;
  color:#abc190;
  padding-bottom:15px
}

.sidebar-note strong {
  font-size:14px;
  color:#c4d7c4;
  font-weight:500
}

.sidebar-note p {
  font-size:13px;
  line-height:1.9;
  margin:12px 0 22px;
  color:#88a796
}

.sidebar-note>span {
  font-size:12px;
  letter-spacing:1px;
  color:#92b39e
}

.profile {
  display:flex;
  align-items:center;
  border-top:1px solid #3a5548;
  padding:22px 0;
  gap:10px;
  font-size:14px
}

.avatar,.top-avatar {
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dce6d1;
  color:#3b5c49;
  width:34px;
  height:34px;
  font-weight:600
}

.profile small {
  display:block;
  font-size:13px;
  color:#88a494;
  margin-top:4px
}

.profile-dots {
  margin-left:auto
}

.shell {
  margin-left:240px
}

.topbar {
  height:73px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 38px;
  background:#fafbf8;
  font-size:13px;
  color:#8a938c
}

.topbar strong {
  font-weight:500;
  color:#415548
}

.topbar>div>span {
  margin:0 15px
}

.top-right {
  display:flex;
  align-items:center;
  gap:21px
}

.demo-pill {
  background:#edf2e8;
  border:1px solid #dbe5d5;
  border-radius:20px;
  padding:6px 11px;
  font-size:13px;
  letter-spacing:1px;
  color:#61764f;
  display:flex;
  align-items:center;
  gap:6px
}

.demo-pill b {
  width:5px;
  height:5px;
  background:#8ba85c;
  border-radius:50%
}

.top-avatar {
  width:29px;
  height:29px;
  font-size:13px
}

.icon-btn {
  display:grid;
  place-items:center;
  padding:6px;
  color:#7e8e81;
  border-radius:6px
}

.icon-btn:hover {
  background:#edf2e8
}

main {
  padding:36px 36px 0;
  max-width:1900px;
  margin:auto
}

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px
}

.eyebrow {
  font-size:13px;
  letter-spacing:2px;
  color:#7d927b;
  font-weight:600
}

.page-heading h1 {
  font-size:32px;
  font-weight:600;
  letter-spacing:-1px;
  margin:9px 0 10px
}

.page-heading h1 span {
  color:#84a867
}

.page-heading p {
  font-size:14px;
  color:#8b938b;
  letter-spacing:.3px
}

.button {
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:44px;
  font-size:14px;
  font-weight:500;
  padding:0 17px;
  transition:background .15s,transform .15s
}

.button:hover {
  transform:translateY(-1px)
}

.button.secondary {
  background:#fff;
  border:1px solid #d8e0d5;
  box-shadow:0 2px 4px #00000003
}

.button.secondary>i:last-child {
  margin-left:16px
}

.button.primary {
  background:var(--green);
  color:#fff
}

.button.primary:hover {
  background:#20634d
}

.demo-banner {
  display:flex;
  align-items:center;
  gap:10px;
  background:#efefe5;
  border:1px solid #e3e4d5;
  border-radius:6px;
  color:#83836a;
  font-size:13px;
  padding:11px 13px;
  margin-bottom:25px
}

.demo-banner i svg {
  width:15px;
  height:15px
}

.demo-banner strong {
  font-weight:500;
  color:#666d4e
}

.demo-banner button {
  margin-left:auto;
  white-space:nowrap;
  font-size:13px;
  color:#6f7954
}

.demo-banner button span {
  margin-left:9px
}

.workspace {
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:25px;
  align-items:start
}

.panel {
  background:white;
  border:1px solid var(--border);
  border-radius:9px;
  box-shadow:var(--shadow)
}

.request-panel {
  padding:22px
}

.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
  margin-bottom:19px
}

.panel-heading>div {
  display:flex;
  align-items:center;
  gap:9px
}

.panel-heading h2 {
  font-size:16px;
  font-weight:600
}

.panel-heading i {
  color:#62866c
}

.step-tag {
  font-size:12px;
  letter-spacing:1.1px;
  color:#9eaa9d
}

.field-label {
  display:block;
  font-size:13px;
  font-weight:500;
  margin:17px 0 9px;
  color:#465548
}

.input-icon {
  position:relative
}

.input-icon i {
  position:absolute;
  left:10px;
  top:11px;
  color:#7d9080
}

.input-icon select {
  padding-left:33px
}

input[type=date],input[type=time],input[type=number],input[type=text],select {
  width:100%;
  border:1px solid #dfe5dc;
  background:#fff;
  border-radius:5px;
  padding:10px 9px;
  font-size:13px;
  color:#536252;
  min-width:0;
  height:42px
}

select {
  appearance:auto
}

.two-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

input[type=date] {
  font-size:13px;
  padding:8px 5px
}

.stay-note {
  color:#94a08f;
  font-size:13px;
  margin-top:8px
}

.label-row {
  display:flex;
  justify-content:space-between
}

.label-row span,.optional {
  font-size:13px;
  color:#9ca698;
  font-weight:400
}

.workplace-input {
  display:flex;
  gap:6px;
  margin-bottom:7px;
  align-items:center
}

.workplace-input>span {
  border:1px solid #d9e1d7;
  background:#f4f7ef;
  border-radius:4px;
  width:25px;
  height:30px;
  display:grid;
  place-items:center;
  color:#71866e;
  font-size:13px
}

.workplace-input input {
  flex:1
}

.remove-workplace {
  padding:0 2px;
  color:#a4afa2;
  font-size:17px
}

.text-button {
  font-size:13px;
  color:#61825e;
  padding:3px 0
}

.number-stepper {
  display:flex;
  border:1px solid #dfe5dc;
  border-radius:5px;
  height:42px;
  align-items:center
}

.number-stepper input {
  border:0;
  text-align:center;
  padding:0;
  width:40%;
  appearance:textfield;
  height:30px
}

.number-stepper input::-webkit-inner-spin-button {
  appearance:none
}

.number-stepper button {
  flex:1;
  color:#81927c
}

.schedule-details {
  margin-top:15px;
  border-radius:5px;
  background:#f7f9f4;
  font-size:13px;
  padding:10px
}

.schedule-details summary {
  display:flex;
  align-items:center;
  cursor:pointer;
  color:#65795f;
  gap:8px;
  list-style:none
}

.schedule-details summary span {
  margin-left:auto;
  font-size:13px;
  color:#96a08e
}

.schedule-details i svg {
  width:11px;
  height:11px
}

.schedule-help {
  font-size:13px;
  color:#93a08e;
  line-height:1.8;
  margin:10px 0
}

.schedule-day {
  border-top:1px solid var(--border);
  padding:8px 0;
  display:grid;
  grid-template-columns:62px 1fr;
  gap:6px;
  align-items:start;
  font-size:13px
}

.schedule-day>span {
  padding-top:3px
}

.schedule-day label {
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:4px;
  overflow-wrap:anywhere
}

.schedule-day input {
  width:12px;
  height:12px
}

.divider {
  border-top:1px solid var(--border);
  margin:20px 0
}

.segmented {
  display:flex;
  background:#f2f4ef;
  padding:3px;
  border-radius:5px
}

.segmented button {
  flex:1;
  font-size:13px;
  color:#8b9684;
  border-radius:4px;
  padding:8px 1px;
  white-space:nowrap
}

.segmented .selected {
  background:#fff;
  color:#3f6249;
  box-shadow:0 1px 4px #24422415
}

.budget-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.budget-options label {
  display:flex;
  cursor:pointer;
  border:1px solid #e0e5dc;
  border-radius:5px;
  padding:10px 12px;
  position:relative
}

.budget-options input {
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  inset:0;
  margin:0;
  cursor:pointer
}

.budget-options label:has(input:checked) {
  border-color:#719771;
  background:#f6f9f1
}

.budget-options span {
  font-size:20px;
  font-weight:600
}

.budget-options small {
  display:block;
  font-size:13px;
  color:#96a18d;
  font-weight:400;
  margin-top:4px
}

.budget-options b {
  margin-left:auto;
  border-radius:50%;
  width:13px;
  height:13px;
  background:#5f8560;
  color:white;
  font-size:13px;
  text-align:center;
  visibility:hidden
}

.budget-options label:has(input:checked) b {
  visibility:visible
}

.policy-preview {
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:11px;
  background:#f1f6ee;
  margin-top:12px;
  border-radius:5px;
  color:#738868;
  font-size:13px
}

.policy-preview i svg {
  width:15px;
  height:15px
}

.policy-preview strong {
  font-size:13px;
  color:#497044;
  margin-left:5px
}

.policy-preview small {
  display:block;
  font-size:13px;
  color:#8c9b80;
  margin-top:6px;
  line-height:1.6
}

.optional {
  margin-left:6px
}

.preferences {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.preferences label {
  position:relative;
  cursor:pointer
}

.preferences input {
  position:absolute;
  opacity:0;
  inset:0;
  width:100%;
  height:100%;
  cursor:pointer;
  margin:0
}

.preferences span {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px;
  border:1px solid #e3e7df;
  border-radius:5px;
  font-size:13px;
  color:#86917f
}

.preferences i svg {
  width:13px;
  height:13px
}

.preferences input:checked+span {
  background:#f1f6ee;
  color:#54764b;
  border-color:#bbceb1
}

.preferences input:focus-visible+span {
  outline:2px solid #658963
}

.parking-option {
  display:flex;
  align-items:flex-start;
  margin:18px 0;
  gap:7px;
  font-size:13px;
  color:#687a60
}

.parking-option small {
  display:block;
  font-size:12px;
  color:#99a38e;
  margin-top:5px
}

input[type=checkbox] {
  accent-color:var(--green);
  margin:0;
  width:13px;
  height:13px
}

.search-button {
  width:100%;
  font-size:13px
}

.search-button>span {
  margin-left:auto
}

.form-footnote {
  text-align:center;
  font-size:12px;
  letter-spacing:.3px;
  color:#a1aa9a;
  margin-top:12px
}

.form-error {
  font-size:13px;
  color:#b54d3f;
  white-space:pre-line;
  padding:10px 0;
  line-height:1.7
}

.results-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:3px 0 19px;
  gap:10px
}

.results-heading h2 {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.4px
}

.results-heading p {
  font-size:13px;
  color:#939d90;
  margin-top:8px
}

.result-badge {
  display:flex;
  align-items:center;
  gap:5px;
  color:#708460;
  font-size:13px;
  white-space:nowrap
}

.result-badge i svg {
  width:14px;
  height:14px
}

.summary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:21px
}

.summary-card {
  background:#edf1e7;
  border:1px solid #e5eadf;
  border-radius:7px;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.summary-card:nth-child(2) {
  background:#eef2eb
}

.summary-card:nth-child(3) {
  background:#f1f0e6
}

.summary-card .metric-label {
  font-size:13px;
  color:#8d9880;
  margin-bottom:7px
}

.summary-card strong {
  font-size:24px;
  font-weight:600;
  letter-spacing:-.7px
}

.summary-card small {
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  color:#879178;
  margin-left:5px
}

.summary-card .metric-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #dbe3d1;
  background:#f7f9f1;
  border-radius:50%;
  color:#8ea078
}

.results-columns {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:20px
}

.list-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:40px
}

.filter-group {
  display:flex;
  gap:14px;
  align-items:center
}

.filter {
  font-size:13px;
  padding:8px 0;
  color:#919c88;
  border-bottom:2px solid transparent;
  white-space:nowrap
}

.filter.active {
  color:#527649;
  border-color:#608950;
  font-weight:500
}

.filter span {
  margin-left:3px;
  background:#e6eddf;
  font-size:13px;
  padding:1px 4px;
  border-radius:3px
}

.sort-label select {
  border:0;
  background:transparent;
  font-size:13px;
  padding:0 0 0 4px;
  height:28px;
  width:89px;
  color:#7a8770
}

.additional-filters {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:12px 0 13px;
  font-size:13px;
  color:#9ba491
}

.additional-filters label {
  display:flex;
  align-items:center;
  gap:5px
}

.additional-filters input {
  width:11px;
  height:11px
}

.hotel-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:18px;
  margin-bottom:13px;
  box-shadow:var(--shadow);
  transition:border-color .2s,box-shadow .2s;
  cursor:pointer;
  scroll-margin-top:20px
}

.hotel-card:hover {
  border-color:#aabda0;
  box-shadow:0 5px 16px #38512b08
}

.hotel-card.selected {
  border:1px solid #759b65;
  box-shadow:0 0 0 1px #759b651a
}

.hotel-card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  font-size:13px
}

.recommend-label {
  color:#6a8a57;
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:500
}

.recommend-label i svg {
  height:13px;
  width:13px
}

.hotel-index {
  font-size:13px;
  color:#b3bba9;
  letter-spacing:.8px
}

.hotel-top {
  display:flex;
  gap:13px
}

.hotel-art {
  width:120px;
  height:108px;
  flex-shrink:0;
  object-fit:cover;
  border-radius:5px;
  background:#e6e9df
}

.hotel-info {
  min-width:0;
  flex:1
}

.hotel-info h3 {
  font-family:'DM Sans',sans-serif;
  font-size:18px;
  letter-spacing:-.4px;
  font-weight:600;
  color:#384c37;
  line-height:1.3
}

.hotel-area {
  font-size:13px;
  color:#a1a88f;
  margin-top:6px
}

.hotel-rating {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  color:#9ba58d;
  margin-top:9px
}

.rating-number {
  font-size:13px;
  color:#637f4e;
  background:#edf2e4;
  border-radius:3px;
  padding:3px 5px;
  font-weight:600
}

.stars {
  color:#aa9e6a;
  letter-spacing:1px;
  font-size:13px
}

.hotel-tags {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:12px;
  color:#919c83
}

.hotel-tags span {
  border:1px solid #e7ebdf;
  border-radius:3px;
  padding:2px 4px
}

.hotel-pricing {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:13px 0 10px;
  padding-bottom:12px;
  border-bottom:1px solid #edf0e7;
  gap:6px
}

.price-main {
  color:#355c3c;
  white-space:nowrap
}

.price-main strong {
  font-size:24px;
  letter-spacing:-.9px;
  font-weight:600
}

.price-main span {
  font-size:13px;
  color:#a0a68f
}

.price-detail {
  font-size:12px;
  color:#9aa48b;
  margin-top:4px
}

.price-policy {
  text-align:right;
  font-size:13px
}

.status {
  display:inline-flex;
  gap:4px;
  align-items:center;
  color:#6e8c53;
  background:#f0f5e8;
  border-radius:4px;
  font-size:13px;
  padding:4px 6px
}

.status.over {
  background:#faefea;
  color:#b57768
}

.status.verify {
  background:#faf3e3;
  color:#b08a3e
}

.trend-note {
  font-size:12px;
  color:var(--muted);
  margin-top:4px
}

.pref-hint {
  font-size:12px;
  color:var(--amber)
}

.price-policy p {
  font-size:12px;
  color:#a1a890;
  margin-top:6px
}

.hotel-facts {
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin-bottom:10px;
  font-size:13px;
  color:#819077
}

.hotel-facts>span {
  display:flex;
  align-items:center;
  gap:4px
}

.hotel-facts i svg {
  width:12px;
  height:12px
}

.hotel-facts b {
  font-weight:500;
  color:#677b59
}

.risk-low {
  color:#819966
}

.risk-medium {
  color:#b19350
}

.risk-high {
  color:#b77969
}

.hotel-bottom {
  display:flex;
  gap:8px;
  align-items:center;
  background:#f6f8f1;
  border-radius:4px;
  padding:8px
}

.score-box {
  display:flex;
  align-items:baseline;
  gap:2px;
  padding-right:8px;
  border-right:1px solid #dfe7d6;
  white-space:nowrap
}

.score-box strong {
  font-size:18px;
  color:#62844e
}

.score-box small {
  font-size:12px;
  color:#9aab88
}

.hotel-bottom p {
  font-size:13px;
  line-height:1.7;
  color:#839474
}

.details-button {
  font-size:13px;
  color:#74915d;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:9px;
  padding:0
}

.details-button span {
  font-size:12px;
  color:#a3ae97
}

.ranking-note {
  display:flex;
  gap:6px;
  color:#a0aa91;
  font-size:12px;
  line-height:1.9;
  margin:16px 3px
}

.ranking-note i svg {
  width:12px;
  height:12px
}

.map-column {
  padding-top:0
}

.map-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 15px
}

.map-heading>div {
  display:flex;
  align-items:center;
  gap:7px
}

.map-heading h3,.small-heading h3 {
  font-size:13px;
  font-weight:500
}

.map-heading i {
  color:#7f9270
}

.map-heading>span {
  font-size:12px;
  border:1px solid #e2e6da;
  border-radius:3px;
  padding:3px 5px;
  color:#9aa48b
}

.map-canvas {
  position:relative;
  height:344px;
  overflow:hidden;
  background:#e9eee5;
  touch-action:none;
  cursor:grab
}

.map-canvas:active {
  cursor:grabbing
}

#city-map {
  width:100%;
  height:100%;
  display:block
}

.map-label {
  position:absolute;
  left:16px;
  top:17px;
  pointer-events:none
}

.map-label b {
  display:block;
  font-size:13px;
  color:#7e9178;
  letter-spacing:2px
}

.map-label span {
  display:block;
  font-size:12px;
  color:#a5b29a;
  letter-spacing:1.3px;
  margin-top:5px
}

.map-controls {
  position:absolute;
  right:12px;
  bottom:26px;
  background:white;
  border:1px solid #dce4d2;
  border-radius:5px;
  display:flex;
  flex-direction:column;
  box-shadow:0 2px 6px #394b2310
}

.map-controls button {
  width:27px;
  height:27px;
  font-size:18px;
  display:grid;
  place-items:center;
  color:#7c926a
}

.map-controls button+button {
  border-top:1px solid #eef1e8
}

.map-controls i svg {
  width:14px;
  height:14px
}

.map-north {
  position:absolute;
  right:17px;
  top:14px;
  display:flex;
  flex-direction:column;
  text-align:center;
  font-size:12px;
  color:#859778;
  pointer-events:none
}

.map-north span {
  font-size:24px
}

.map-attribution {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:#f4f6edde;
  text-align:center;
  font-size:12px;
  color:#9aa58f;
  padding:4px;
  pointer-events:none
}

.map-marker {
  cursor:pointer
}

.map-marker:focus {
  outline:none
}

.map-marker:focus .marker-core {
  stroke:#273d2f;
  stroke-width:7
}

.map-marker text {
  pointer-events:none
}

.map-popup-content {
  padding:13px 15px;
  background:#f8faf4;
  border-bottom:1px solid #e8ecdf
}

.popup-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px
}

.popup-top strong {
  font-size:14px
}

.popup-top>span {
  font-size:15px;
  font-weight:600;
  color:#54784b
}

.popup-top small {
  font-size:12px;
  font-weight:400
}

.popup-stats {
  display:flex;
  gap:9px;
  font-size:13px;
  color:#8a987d;
  margin-top:8px;
  align-items:center
}

.popup-tradeoff {
  font-size:12px;
  color:#909c82;
  line-height:1.8;
  margin-top:7px
}

.map-legend {
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  padding:13px 14px;
  font-size:12px;
  color:#89967c
}

.map-legend span {
  display:flex;
  align-items:center;
  gap:4px
}

.legend-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%
}

.green {
  background:#638853
}

.yellow {
  background:#cba04e
}

.red {
  background:#bb7469
}

.map-legend i svg {
  width:10px;
  height:10px
}

.risk-toggle {
  border-top:1px solid #edf0e6;
  margin:0 14px;
  padding-top:11px;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:#7c8d6f
}

.risk-toggle input {
  width:10px;
  height:10px
}

.risk-toggle>span {
  margin-left:auto;
  font-size:12px;
  color:#9da68f;
  display:flex;
  align-items:center;
  gap:4px
}

.risk-swatch {
  width:9px;
  height:7px;
  border-radius:1px;
  display:inline-block
}

.risk-swatch.medium {
  background:#e5ce9a
}

.risk-swatch.high {
  background:#dab3a5
}

.map-risk-note {
  font-size:12px;
  line-height:1.9;
  color:#a4ad98;
  padding:8px 14px 13px
}

.commute-panel {
  margin-top:16px;
  padding:16px
}

.small-heading {
  display:flex;
  align-items:center;
  gap:7px
}

.small-heading i {
  color:#859774
}

.commute-panel>p {
  font-size:13px;
  color:#9ba58e;
  line-height:1.8;
  margin:8px 0 13px
}

.commute-item {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  margin:12px 0
}

.office-icon {
  font-size:13px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:5px;
  background:#edf1e6;
  color:#849872
}

.commute-item>div {
  flex:1;
  min-width:0
}

.commute-item strong {
  font-size:13px;
  font-weight:500;
  display:block;
  overflow-wrap:anywhere
}

.commute-item small {
  display:block;
  font-size:12px;
  color:#a7b09b;
  margin-top:4px
}

.commute-item>b {
  font-size:15px;
  color:#77925e;
  font-weight:500
}

.commute-note {
  border-top:1px solid #e9eee1;
  margin-top:12px;
  padding-top:10px;
  font-size:12px;
  color:#a1ac92;
  line-height:1.8
}

.commute-note i svg {
  width:10px;
  height:10px
}

.tip-card {
  display:flex;
  gap:9px;
  padding:18px 4px;
  color:#8d9c7d
}

.tip-card>i svg {
  width:20px;
  height:20px
}

.tip-card strong {
  font-size:13px;
  font-weight:500;
  color:#83956e
}

.tip-card p {
  font-size:13px;
  line-height:1.9;
  margin-top:7px;
  color:#a0ab91
}

.tip-card button {
  font-size:13px;
  color:#7d9569;
  padding:10px 0
}

.stale-notice {
  padding:9px 12px;
  margin-bottom:13px;
  background:#fff5df;
  border:1px solid #eddfbe;
  color:#9a8143;
  border-radius:5px;
  font-size:13px
}

footer {
  display:flex;
  gap:20px;
  align-items:center;
  padding:30px 0 20px;
  margin-top:25px;
  border-top:1px solid #e3e8da;
  font-size:13px;
  letter-spacing:1px;
  color:#a8b098
}

footer span {
  font-size:12px;
  letter-spacing:0
}

footer span:last-child {
  margin-left:auto
}

dialog {
  padding:26px;
  border:1px solid #e0e7d8;
  border-radius:12px;
  width:min(720px,92vw);
  max-height:88vh;
  color:var(--ink);
  box-shadow:0 30px 100px #16372530
}

dialog::backdrop {
  background:#1e352966;
  backdrop-filter:blur(3px)
}

.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}

.modal-header h2 {
  font-size:22px;
  margin-top:8px
}

.modal-header button {
  font-size:18px
}

.modal-notice {
  font-size:13px;
  line-height:1.9;
  background:#f4f3e7;
  color:#928159;
  padding:12px;
  border-radius:6px;
  margin-bottom:18px
}

.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin:16px 0
}

.detail-stat {
  padding:13px;
  background:#f4f7ef;
  border-radius:6px;
  font-size:13px;
  color:#92a080
}

.detail-stat strong {
  display:block;
  font-size:20px;
  margin-top:7px;
  color:#547044
}

.modal-section-title {
  font-size:15px;
  font-weight:600;
  margin:24px 0 11px
}

.cost-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px
}

.cost-table td,.cost-table th {
  text-align:left;
  padding:10px 6px;
  border-bottom:1px solid #e8eddf;
  vertical-align:top;
  line-height:1.6
}

.cost-table td:last-child,.cost-table th:last-child {
  text-align:right
}

.cost-table tr.total {
  font-weight:600;
  background:#f2f6eb;
  color:#426c38
}

.modal-text {
  font-size:14px;
  line-height:2;
  color:#7d8f6c
}

.modal-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:23px;
  flex-wrap:wrap
}

.modal-actions .button {
  font-size:13px
}

.score-row {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  margin:12px 0
}

.score-row>span {
  width:85px;
  color:#8c9b7c
}

.score-track {
  height:6px;
  background:#edf2e7;
  flex:1;
  border-radius:4px;
  overflow:hidden
}

.score-track b {
  display:block;
  height:100%;
  background:#88a66c;
  border-radius:4px
}

.score-row>strong {
  width:30px;
  text-align:right;
  color:#73905b;
  font-weight:500
}

#toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%,20px);
  background:#264d38;
  color:#f4f8ed;
  border-radius:8px;
  padding:13px 20px;
  box-shadow:0 5px 20px #17322422;
  opacity:0;
  pointer-events:none;
  transition:all .2s;
  z-index:100;
  font-size:14px
}

#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}

.empty-state {
  text-align:center;
  background:#fff;
  border:1px dashed #d5dfca;
  border-radius:8px;
  padding:45px 20px;
  color:#8a9d76;
  font-size:14px;
  line-height:2
}

.empty-state strong {
  display:block;
  font-size:17px;
  margin-bottom:8px
}

[hidden] {
  display:none!important
}

@media(min-width:1650px) {.results-columns {
  grid-template-columns:minmax(0,1fr) 390px
}

.map-canvas {
  height:410px
}

.hotel-art {
  width:150px;
  height:118px
}

.hotel-info h3 {
  font-size:20px
}

.hotel-card {
  padding:20px
}

.workspace {
  grid-template-columns:320px minmax(0,1fr)
}

}

@media(max-width:1370px) {.sidebar {
  width:200px;
  padding-left:17px;
  padding-right:17px
}

.brand {
  font-size:17px;
  gap:6px
}

.brand-icon {
  font-size:38px
}

.brand small {
  font-size:12px
}

.shell {
  margin-left:200px
}

main {
  padding:27px 23px 0
}

.topbar {
  padding:0 24px
}

.workspace {
  grid-template-columns:285px minmax(0,1fr);
  gap:20px
}

.request-panel {
  padding:18px
}

.results-columns {
  grid-template-columns:minmax(0,1fr) 285px;
  gap:15px
}

.hotel-art {
  width:100px;
  height:104px
}

.hotel-info h3 {
  font-size:16px
}

.hotel-card {
  padding:14px
}

.hotel-tags {
  gap:3px
}

.hotel-tags span {
  padding:2px 3px
}

.hotel-facts {
  font-size:12px;
  flex-wrap:wrap
}

.summary-card {
  padding:12px
}

.summary-card strong {
  font-size:22px
}

.summary-card .metric-icon {
  width:28px;
  height:28px
}

.map-canvas {
  height:315px
}

.filter-group {
  gap:9px
}

.filter {
  font-size:13px
}

.sort-label select {
  width:104px;
  font-size:13px
}

.price-main strong {
  font-size:22px
}

.results-heading h2 {
  font-size:17px
}

}

@media(max-width:1150px) {.sidebar {
  width:74px;
  padding:27px 12px
}

.brand>span:last-child,.workspace-label,.nav-item>span,.sidebar-note,.profile>div,.profile-dots {
  display:none
}

.brand {
  justify-content:center
}

.nav-item {
  font-size:0;
  justify-content:center;
  padding:0
}

.nav-item i {
  font-size:initial
}

.sidebar nav {
  margin-top:50px
}

.profile {
  margin-top:auto;
  justify-content:center
}

.shell {
  margin-left:74px
}

.workspace {
  grid-template-columns:265px minmax(0,1fr);
  gap:18px
}

.results-columns {
  grid-template-columns:minmax(0,1fr) 260px;
  gap:12px
}

.hotel-top {
  gap:9px
}

.hotel-art {
  width:82px;
  height:98px
}

.hotel-info h3 {
  font-size:15px
}

.hotel-tags span {
  font-size:12px
}

.hotel-facts {
  gap:8px
}

.summary-grid {
  gap:8px
}

.summary-card .metric-icon {
  display:none
}

.result-badge {
  display:none
}

.page-heading h1 {
  font-size:32px
}

.map-canvas {
  height:300px
}

.map-legend {
  gap:8px
}

.risk-toggle {
  flex-wrap:wrap
}

}

@media(max-width:980px) {.results-columns {
  grid-template-columns:1fr
}

.map-column {
  display:grid;
  grid-template-columns:1fr;
  gap:0
}

.map-canvas {
  height:350px
}

.map-panel {
  margin-top:15px
}

.hotel-art {
  width:120px;
  height:110px
}

.hotel-info h3 {
  font-size:18px
}

.hotel-tags span {
  font-size:13px
}

.hotel-facts {
  font-size:13px
}

.map-column {
  grid-row:2
}

.summary-card {
  padding:11px 9px
}

.summary-card strong {
  font-size:20px
}

.demo-banner {
  line-height:1.8
}

.demo-banner button {
  display:none
}

.summary-card small {
  font-size:12px
}

.page-heading .button {
  font-size:13px;
  padding:0 11px
}

}

@media(max-width:700px) {.sidebar {
  display:none
}

.shell {
  margin-left:0
}

.topbar {
  height:57px;
  padding:0 18px
}

.top-right {
  gap:8px
}

.topbar>div>span {
  margin:0 8px
}

main {
  padding:23px 16px 0
}

.page-heading {
  gap:14px;
  align-items:flex-start
}

.page-heading h1 {
  font-size:26px;
  letter-spacing:-1px
}

.page-heading .eyebrow {
  font-size:12px;
  letter-spacing:1px
}

.page-heading .button {
  width:38px;
  height:38px;
  padding:9px;
  font-size:0;
  gap:0;
  flex-shrink:0;
  margin-top:15px
}

.page-heading .button i:last-child {
  display:none
}

.page-heading p {
  font-size:13px
}

.demo-banner {
  font-size:13px;
  align-items:flex-start;
  padding:10px
}

.demo-banner i {
  margin-top:2px
}

.workspace {
  display:flex;
  flex-direction:column;
  gap:25px
}

.request-panel {
  width:100%;
  padding:20px
}

.request-panel .two-fields {
  gap:14px
}

.results-area {
  width:100%
}

.field-label {
  font-size:14px
}

.results-heading h2 {
  font-size:18px
}

.summary-grid {
  gap:8px
}

.summary-card strong {
  font-size:22px
}

.results-columns {
  gap:5px
}

.hotel-card {
  padding:16px
}

.hotel-art {
  width:114px;
  height:110px
}

.hotel-info h3 {
  font-size:18px
}

.hotel-tags {
  gap:5px
}

.hotel-pricing {
  margin-top:15px
}

.hotel-facts {
  font-size:13px
}

.map-canvas {
  height:360px
}

.hotel-bottom p {
  font-size:13px
}

.ranking-note {
  font-size:13px
}

.map-heading h3,.small-heading h3 {
  font-size:15px
}

.map-legend {
  font-size:13px
}

.map-risk-note {
  font-size:13px
}

.map-attribution {
  font-size:12px
}

.map-label b {
  font-size:13px
}

.map-label span {
  font-size:12px
}

.map-popup-content {
  padding:15px
}

.popup-top strong {
  font-size:16px
}

.popup-stats {
  font-size:13px
}

.popup-tradeoff {
  font-size:13px
}

.commute-panel>p,.commute-item strong {
  font-size:13px
}

.commute-item small,.commute-note {
  font-size:13px
}

.tip-card strong {
  font-size:14px
}

.tip-card p {
  font-size:13px
}

footer {
  flex-wrap:wrap;
  gap:10px;
  font-size:12px
}

footer span:last-child {
  width:100%;
  margin:0
}

.detail-grid {
  gap:8px
}

.detail-stat strong {
  font-size:18px
}

dialog {
  padding:20px
}

.modal-actions .button {
  flex:1;
  padding:0 9px
}

.modal-header h2 {
  font-size:20px
}

}

@media(prefers-reduced-motion:reduce) {* {
  scroll-behavior:auto!important;
  transition:none!important
}

}

.stay-type-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}

.stay-type-options button {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:1px solid #dfe5d9;
  border-radius:7px;
  padding:12px;
  gap:6px;
  text-align:left;
  background:#fff
}

.stay-type-options button.selected {
  border-color:#729168;
  background:#f0f6e9;
  color:#426d43
}

.stay-type-options strong {
  font-size:15px;
  font-weight:600
}

.stay-type-options small {
  font-size:13px;
  color:#8c9a81
}

.stay-type-options i {
  color:#6e8b5c
}

.policy-preview strong {
  display:block;
  margin:7px 0;
  font-size:18px
}

.policy-preview #policy-source {
  font-size:13px;
  line-height:1.7
}

.parking-separate {
  font-size:13px;
  line-height:1.8;
  color:#89967b;
  margin:15px 0
}

#search-area {
  font-size:13px
}

.search-button {
  margin-top:5px
}

/* ===== 正式 Demo 增强（2026-09-14）===== */
/* 干净初始态：搜索前只显示引导面板 */
body:not(.has-results) .summary-grid,
body:not(.has-results) .results-columns {
  display:none
}

.empty-state-hero {
  display:none;
  text-align:center;
  padding:64px 24px;
  background:#fffdf6;
  border:1px dashed #d8d2ba;
  border-radius:14px;
  margin-top:6px
}

body:not(.has-results) .empty-state-hero {
  display:block
}

.empty-state-hero .empty-icon {
  font-size:34px;
  color:#729168
}

.empty-state-hero strong {
  display:block;
  font-size:18px;
  margin:10px 0 6px;
  color:#2c3b28
}

.empty-state-hero p {
  font-size:14px;
  line-height:1.9;
  color:#89967b
}

/* 真实酒店图片 */
.hotel-art.photo {
  object-fit:cover;
  background:#e9e4d2
}

/* 报价方跳转按钮 */
.booking-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  margin-top:8px;
  padding:10px 14px;
  border:1px solid #b9c9d2;
  border-radius:7px;
  background:#f0f5f7;
  color:#3d5a66;
  font-size:14px;
  text-decoration:none;
  transition:background .15s
}

.booking-link:hover {
  background:#e2ecf0
}

.booking-link span {
  font-size:13px;
  color:#759198
}

/* 民宿暂缓禁用态 */
.stay-type-options button.disabled {
  opacity:.55;
  cursor:not-allowed;
  background:#f6f4ea
}

.stay-type-options button.disabled small {
  color:var(--muted)
}

/* 详情弹窗真实图片 */
.modal-photo {
  width:100%;
  max-height:240px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:14px;
  background:#e9e4d2
}

/* 数据来源小徽章 */
.source-pill {
  display:inline-block;
  margin-left:8px;
  padding:1px 8px;
  border-radius:999px;
  font-size:13px;
  vertical-align:middle
}

.source-pill.live {
  background:#e4efe2;
  color:#3f7040;
  border:1px solid #bcd2b8
}

.source-pill.local {
  background:#f6e9d8;
  color:#8a6a2f;
  border:1px solid #e0cba4
}

/* ===== Leaflet 真实地图（2026-09-14）===== */
#real-map {
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:#e9eef0
}

.map-canvas {
  position:relative
}

.leaflet-container {
  font-family:inherit
}

.office-divicon {
  background:none;
  border:none
}

.office-pin {
  width:34px;
  height:34px;
  border-radius:10px;
  background:#536e82;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  border:3px solid #fff;
  box-shadow:0 2px 8px #0004
}

.office-pin.first {
  background:#2f4f3e
}

.leaflet-tooltip {
  font-size:14px;
  border-radius:8px;
  border:1px solid #dfe5d9;
  box-shadow:0 2px 10px #0002
}

/* 容器高度与 Leaflet 兼容修正 */
.map-canvas {
  cursor:default;
  touch-action:auto
}

#real-map {
  height:100%;
  width:100%
}

/* 工作地点地址联想（Nominatim 自动补全） */
.geo-field {
  position:relative;
  flex:1;
  min-width:0
}

.geo-field input {
  width:100%
}

.geo-suggest {
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  width:min(460px,78vw);
  z-index:40;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 24px #1d352710;
  overflow:hidden;
  max-height:296px;
  overflow-y:auto
}

.geo-option {
  display:block;
  width:100%;
  text-align:left;
  padding:9px 12px;
  border-bottom:1px solid #f0f3ee;
  border-radius:0
}

.geo-option:last-child {
  border-bottom:0
}

.geo-option:hover,.geo-option:focus-visible {
  background:var(--light)
}

.geo-option strong {
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--ink)
}

.geo-option small {
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:1px;
  line-height:1.45
}

.geo-status {
  flex-shrink:0;
  width:20px;
  text-align:center;
  font-size:15px;
  color:var(--muted);
  cursor:help
}

.geo-status.ok {
  color:var(--green);
  font-weight:700
}

.geo-loading {
  padding:10px 12px;
  font-size:14px;
  color:var(--muted)
}

.risk-swatch.low {
  background:#a9cdb4
}

/* ===== 2026-09-15 可读性与触控增强 ===== */
.page-heading h1 {
  font-size:34px
}

@media(max-width:1150px) {.page-heading h1 {
  font-size:30px
}

}

@media(max-width:700px) {.page-heading h1 {
  font-size:26px
}

}

.price-main strong {
  font-size:24px
}

input[type=date],input[type=time],input[type=number],input[type=text],select {
  min-height:42px;
  font-size:14px
}

input[type=date] {
  font-size:13px
}

.button {
  min-height:44px
}

.filter {
  min-height:40px;
  display:inline-flex;
  align-items:center
}

.segmented button {
  min-height:40px
}

.sort-label select {
  min-width:110px
}

.icon-btn {
  min-width:40px;
  min-height:40px
}

.text-button {
  min-height:36px
}

.preferences label,.additional-filters label,.risk-toggle {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px
}

.geo-option {
  min-height:48px;
  padding:12px 14px
}

.stay-type-options button {
  min-height:72px;
  padding:14px
}

.remove-workplace {
  min-width:36px;
  min-height:36px
}

.hotel-card {
  transition:border-color .2s,box-shadow .2s,transform .2s
}

.hotel-card:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px #25432e18;
  border-color:#c4d4bb
}

.search-button {
  position:sticky;
  bottom:14px;
  z-index:6;
  box-shadow:0 8px 22px #183f354d
}

.skeleton-card {
  display:flex;
  gap:14px;
  pointer-events:none
}

.sk-line {
  position:relative;
  overflow:hidden;
  background:#edf1e9;
  border-radius:6px;
  height:14px
}

.sk-line::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,#ffffffb0,transparent);
  transform:translateX(-100%);
  animation:sk-shimmer 1.2s infinite
}

.sk-thumb {
  width:120px;
  height:108px;
  flex-shrink:0;
  border-radius:8px
}

.sk-body {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:6px
}

.sk-w60 {
  width:60%
}

.sk-w90 {
  width:90%
}

.sk-w40 {
  width:40%
}

@keyframes sk-shimmer {
  to {
  transform:translateX(100%)
}

}

@media(prefers-reduced-motion:reduce) {.sk-line::after {
  animation:none
}

}


/* ===== 2026-09-15 列表独立滚动 + 评分外显 ===== */
/* 桌面端：酒店列表自成滚动容器（overscroll-behavior:contain 阻断滚动链），
   滚轮在列表上只滚列表；地图列 sticky 原地不动。移动端保持整页滚动。 */
@media (min-width: 981px) {
  .recommendations {
    /* max-height 由 app.mjs syncListHeight() 实时写入：与右侧地图列等高，
       且不低于视口剩余空间；移动端（<981px）还原为整页滚动。 */
    min-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
    scrollbar-gutter: stable;
  }
  .recommendations::-webkit-scrollbar { width: 8px; }
  .recommendations::-webkit-scrollbar-thumb { background: #cfd8cb; border-radius: 4px; }
  .recommendations::-webkit-scrollbar-track { background: transparent; }
  .list-toolbar {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--bg);
    padding: 6px 0 8px;
  }
  .map-column {
    position: sticky;
    top: 16px;
    align-self: start;
  }
}

/* 评分子项条：卡片与弹窗共用；≥85 ✓优势（绿）/ ≤40 ⚠短板（琥珀） */
.score-panel {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}
.score-total {
  flex-shrink: 0;
  text-align: center;
  min-width: 64px;
}
.score-total strong {
  font-size: 26px;
  font-weight: 700;
  color: var(--green-dark);
}
.score-total small {
  font-size: 12px;
  color: var(--muted);
}
.score-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sb-row {
  display: grid;
  grid-template-columns: 30px 1fr 26px 46px;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.sb-row span {
  font-weight: 600;
  color: #5a6b58;
}
.sb-track {
  height: 5px;
  background: #e8ede2;
  border-radius: 3px;
  overflow: hidden;
}
.sb-track b {
  display: block;
  height: 100%;
  background: #a9bfa2;
  border-radius: 3px;
}
.sb-row em {
  font-style: normal;
  font-weight: 700;
  text-align: right;
  color: #5a6b58;
}
.sb-row i {
  font-style: normal;
  font-size: 12px;
  white-space: nowrap;
}
.sb-row.sb-high .sb-track b { background: var(--green); }
.sb-row.sb-high em,
.sb-row.sb-high i { color: var(--green); font-weight: 700; }
.sb-row.sb-low .sb-track b { background: var(--amber); }
.sb-row.sb-low em,
.sb-row.sb-low i { color: var(--amber); font-weight: 700; }
.score-reason {
  font-size: 13px;
  line-height: 1.7;
  color: #6b7a63;
  margin-top: 10px;
}
.score-weights {
  font-size: 12px;
  color: #9aa892;
  margin-top: 6px;
}
.price-note {
  font-size: 12px;
  color: var(--amber);
  margin-top: 6px;
}
.score-raw {
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
}
.score-row.sb-high .score-track b { background: var(--green); }
.score-row.sb-low .score-track b { background: var(--amber); }

/* ===== 2026-09-15 第四轮：爱出差 iTrip 品牌 + 横向搜索条布局（Expedia 式） ===== */
/* 左侧边栏与旧顶栏下线（HTML 已移除）；.shell 侧边距归零，覆盖前文史密斯媒体查询中的 margin-left。 */
.shell { margin-left: 0; }
main { padding: 24px 32px 0; }

/* 顶部 Header（深色品牌条，sticky） */
.site-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: #183d33;
  color: #e8f0e6;
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .brand { font-size: 19px; letter-spacing: 2px; }
.brand-logo { display: inline-flex; }
.brand-logo svg { width: 38px; height: 38px; display: block; }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name small { font-size: 12px; letter-spacing: 1px; color: #9bb4a6; font-weight: 400; margin-top: 3px; }
.site-header .top-right { gap: 10px; }
.header-link {
  color: #cfe0d2;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
}
.header-link:hover { background: #ffffff14; }
.site-header .demo-pill { background: #ffffff12; border-color: #ffffff22; color: #cfe0d2; }
.site-header .demo-pill b { background: #a5c86e; }
.site-header .icon-btn { color: #cfe0d2; }
.site-header .icon-btn:hover { background: #ffffff14; }

/* 横向搜索面板：第一行常驻（类型/城市/日期/房型/工作地点/搜索），第二行折叠更多选项 */
.search-panel { padding: 16px 18px 14px; margin-bottom: 22px; }
.sp-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.sp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-field .field-label { margin: 0; display: flex; align-items: center; gap: 4px; }
.sp-city { min-width: 170px; }
.sp-date input { min-width: 150px; }
.sp-workplace { flex: 1 1 280px; }
.sp-workplace #workplaces { display: flex; flex-direction: column; gap: 6px; }
.sp-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-bottom: 1px; }
.sp-actions .search-button { position: static; white-space: nowrap; }
.sp-actions .text-button { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.sp-actions .text-button i svg { width: 14px; height: 14px; transition: transform .15s; }
.sp-actions .text-button[aria-expanded="true"] i svg { transform: rotate(180deg); }
.sp-sub { font-size: 12px; color: var(--muted); margin-top: 8px; }
.sp-more { border-top: 1px dashed var(--border); margin-top: 14px; padding-top: 14px; }
.sp-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.sp-more-grid .field-label { margin-bottom: 8px; }
#first-stop-field { margin-top: 10px; }

/* 住宿类型紧凑按钮（横向条内） */
.sp-row .stay-type-options { display: flex; gap: 6px; }
.sp-row .stay-type-options button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  color: var(--ink);
}
.sp-row .stay-type-options button.selected { background: var(--light); border-color: var(--green); color: var(--green-dark); }
.sp-row .stay-type-options button i svg { width: 16px; height: 16px; }

/* ⓘ 悬浮提示组件：hover / 键盘聚焦 / 触屏点按 显示说明气泡 */
.help-tip { position: relative; display: inline-flex; color: #9aa892; cursor: help; }
.help-tip i svg { width: 14px; height: 14px; }
.tip-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: 260px;
  background: #233932;
  color: #e8f0e6;
  font-size: 12px;
  line-height: 1.7;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 8px 24px #00000033;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 60;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  pointer-events: none;
}
.help-tip:hover .tip-bubble,
.help-tip:focus .tip-bubble,
.help-tip:focus-within .tip-bubble { opacity: 1; visibility: visible; transform: translateX(-50%); }

/* 评分行「未接入」态：灰色虚轨，不标短板 */
.sb-row.sb-na span, .sb-row.sb-na em { color: #9aa892; }
.sb-row.sb-na i { color: #9aa892; font-weight: 400; }
.sb-row.sb-na .sb-track b { background: transparent; }
.score-row.sb-na .score-track b { background: transparent; }
.score-row.sb-na strong { color: #9aa892; font-weight: 400; }

.footer-logo { width: 18px; height: 18px; vertical-align: -4px; margin-right: 2px; }

@media (max-width: 980px) {
  main { padding: 16px 14px 0; }
  .site-header { padding: 0 14px; height: 58px; }
  .site-header .brand { font-size: 17px; }
  .header-link { font-size: 13px; padding: 8px 6px; }
  .sp-more-grid { grid-template-columns: 1fr; }
  .sp-actions { margin-left: 0; width: 100%; }
  .sp-actions .search-button { flex: 1; }
  .sp-city, .sp-date { flex: 1 1 45%; }
  .sp-date input { min-width: 0; width: 100%; }
}

/* ===== 2026-09-15 第四轮修补：横向搜索条挤压变形修复 ===== */
/* 根因：① .sp-field 用了 min-width:0 + flex 默认 shrink，字段被压到内容宽度以下；
   ② 旧 .stay-type-options button 的 flex-direction:column / padding:12px 未被重置，
   图标被挤到文字上方堆叠。修复原则：字段不收缩、保持自然宽度；只有工作地点弹性吸收剩余空间；
   所有控件高度统一 44px。 */
.sp-field { flex: 0 0 auto; }
.sp-workplace { flex: 1 1 300px; min-width: 260px; }
.sp-row .stay-type-options { display: flex; gap: 6px; }
.sp-row .stay-type-options button {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  flex: none;
}
/* 控件高度与字号统一（旧 input 42px / segmented 约 35px / 按钮 44px 不齐） */
.search-panel input[type=date],
.search-panel input[type=text],
.search-panel input[type=number],
.search-panel select { height: 44px; font-size: 14px; padding: 0 12px; }
.search-panel .segmented { padding: 4px; border-radius: 6px; }
.search-panel .segmented button { padding: 8px 16px; font-size: 14px; flex: none; }
.search-panel .number-stepper { height: 44px; }
.search-panel .number-stepper input { height: 100%; }
/* 工作地点工具行：添加按钮 + 第一站选择 常驻可见 */
.sp-workplace-tools { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.sp-workplace-tools .text-button { font-size: 13px; }
#first-stop-field { display: inline-flex; align-items: center; gap: 8px; }
#first-stop-field[hidden] { display: none; }
#first-stop-field .field-label { margin: 0; }
#first-stop { height: 36px; font-size: 13px; max-width: 280px; }
/* 更多选项只剩偏好 + 差标预览两列 */
.sp-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== 2026-09-15 第四轮修补 2：搜索条两行固定分区 ===== */
/* 第一行 = 行程五要素（怎么住），第二行 = 工作地点 + 搜索动作。
   换行点可控：不再出现单个字段被挤到孤行的情况。 */
.sp-row-work { margin-top: 12px; align-items: flex-start; }
.sp-row-work .sp-workplace { flex: 1 1 auto; min-width: 0; }
.sp-row-work .sp-actions { flex: none; margin-left: auto; align-self: flex-end; }
.sp-row-trip .sp-sub {
  margin: 0 0 11px auto;
  align-self: flex-end;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 980px) {
  .sp-row-trip .sp-sub { flex-basis: 100%; margin: 4px 0 0; }
}

/* ---------------------------------------------------------------------------
   比价结论面板（酒店 /compare.html 与机票 /flights.html 共用）
   由 src/verdict-view.mjs 渲染；目标是一眼看清「携程是不是最优」并能直接复制结论。
   --------------------------------------------------------------------------- */
.verdict {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.verdict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.verdict-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.verdict-headline {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}

.verdict-sub {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}

.verdict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.verdict-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fafbf9;
}

.verdict-card .verdict-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.verdict-card strong {
  display: block;
  font-size: 20px;
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}

.verdict-card small {
  font-size: 12px;
  color: var(--muted);
}

.verdict-card.ok {
  border-color: #cfe0c4;
  background: #f4f9ee;
}

.verdict-card.ok strong {
  color: #3b6d11;
}

.verdict-card.warn {
  border-color: #f0d3d0;
  background: #fdf3f2;
}

.verdict-card.warn strong {
  color: #a32d2d;
}

.verdict-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.verdict-note.warn {
  border-left: 3px solid #BA7517;
  background: #FAEEDA;
  color: #633806;
  padding: 10px 12px;
  border-radius: 6px;
  line-height: 1.7;
}

.verdict-note.warn strong {
  font-weight: 500;
}