.trip-query-section { margin-top: 18px; padding: 14px; border: 1px solid rgba(132,111,75,.2); border-radius: 8px; background: rgba(251,248,239,.62); }
.weather-query-section { margin-top: 20px; padding: 15px 0 0; border: 0; border-top: 1px solid rgba(132,111,75,.19); border-radius: 0; background: transparent; }
.trip-section-heading, .weather-week-heading, .weather-trend-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; margin-bottom: 11px; }
.trip-section-heading h3, .weather-week-heading h4, .weather-trend-heading h4 { margin: 0; color: #5b503f; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 15px; font-weight: 600; }
.trip-section-heading > span { color: var(--muted); font-size: 9px; text-align: right; }
.trip-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.trip-field { display: grid; gap: 5px; min-width: 0; color: #817966; font-size: 10px; }
.destination-field { grid-column: 1 / -1; }
.trip-airport-fields, .trip-airport-fields > div { display: contents; }
.airport-static strong { display: flex; align-items: center; min-height: 38px; padding: 0 8px; border: 1px solid rgba(121,111,85,.18); border-radius: 5px; color: #606b4b; background: rgba(223,228,205,.24); font-size: 10px; font-weight: 500; line-height: 1.4; }
.airport-field select { appearance: auto; }
.trip-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.trip-field small { color: #9c947f; font-size: 9px; }
.trip-field small.is-unavailable { color: #9b5839; }
.trip-field input, .trip-field select { width: 100%; min-width: 0; height: 38px; padding: 0 8px; border: 1px solid rgba(121,111,85,.27); border-radius: 5px; color: #514a3b; background: #fffdf8; font-size: 11px; }
.trip-field input:disabled { color: #a49a85; background: #f0ede4; }
.trip-validation { min-height: 28px; margin: 8px 0 10px; color: #827a67; font-size: 10px; line-height: 1.5; }
.trip-validation.is-error { color: #a14f38; }
.journey-submit { width: 100%; min-height: 39px; border: 1px solid #985839; border-radius: 6px; color: #fffaf0; background: #9d5637; font-size: 12px; cursor: pointer; transition: background .18s, transform .18s; }
.journey-submit:hover:not(:disabled) { background: #87472e; transform: translateY(-1px); }
.journey-submit:disabled { color: #a8a08d; border-color: rgba(121,111,85,.16); background: #e7e2d5; cursor: not-allowed; }
.flight-result, .weather-result { margin-top: 11px; color: #716a59; font-size: 11px; line-height: 1.65; }
.flight-result p, .weather-result p { margin: 6px 0; }
.result-placeholder { color: #9b927e; }
.query-summary { color: #5c6c4a; font-size: 10px; font-weight: 600; }
.flight-fallback-message { padding: 8px 9px; border-left: 2px solid var(--copper-light); color: #76624c; background: rgba(231,224,204,.36); }
.flight-result.has-error, .weather-result.has-error { color: #a14f38; }
.official-flight-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 9px; border: 1px solid rgba(119,131,94,.32); border-radius: 5px; color: #5f6d4b; background: rgba(223,228,205,.35); font-size: 10px; text-decoration: none; }
.official-flight-link:hover { border-color: var(--sage); background: rgba(223,228,205,.6); }
.flight-result-list { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.flight-result-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px; border: 1px solid rgba(132,111,75,.15); border-radius: 5px; background: rgba(255,253,248,.65); font-size: 10px; }
.flight-result-row strong { color: #805238; }
.weather-location { margin-bottom: 8px !important; color: #6d7654; font-size: 10px; font-weight: 600; }
.weather-week { margin: 14px 0 19px; padding-bottom: 13px; border-bottom: 1px dotted rgba(132,111,75,.28); }
.weather-week-heading { align-items: center; margin-bottom: 8px; }
.weather-week-heading h4, .weather-trend-heading h4 { font-size: 12px; }
.weather-week-heading > span, .weather-trend-heading > span { color: #8a806c; font-size: 9px; white-space: nowrap; }
.weather-day-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 4px; padding: 0; list-style: none; }
.weather-day-card { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 9px; border: 1px solid rgba(132,111,75,.19); border-radius: 7px; color: #625b4b; background: rgba(255,253,248,.78); }
.weather-day-date { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; color: #625b4b; font-size: 9px; font-weight: 600; }
.weather-day-date small { color: #8a806c; font-size: 9px; font-weight: 400; }
.weather-day-condition { display: flex; align-items: center; gap: 6px; min-height: 26px; color: #80745f; font-size: 10px; }
.weather-day-temperature { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.weather-day-temperature > span { display: grid; gap: 1px; }
.weather-day-temperature small { color: #8a806c; font-size: 8px; }
.weather-day-temperature strong { color: #985839; font-size: 14px; font-weight: 600; }
.weather-day-temperature > span + span strong { color: #65724e; }
.weather-day-probability { display: flex; justify-content: space-between; gap: 5px; margin: 0 !important; padding-top: 5px; border-top: 1px dotted rgba(132,111,75,.2); color: #788894; font-size: 9px; }
.weather-day-probability strong { color: #718c9a; font-weight: 600; }
.weather-symbol { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.weather-symbol-sun, .weather-symbol-partly { color: #b87a42; }
.weather-symbol-cloud, .weather-symbol-fog { color: #808b76; }
.weather-symbol-rain { color: #718c9a; }
.weather-symbol-snow { color: #7193a1; }
.weather-symbol-storm { color: #9b6949; }
.weather-symbol-partly path:last-child, .weather-symbol-cloud path, .weather-symbol-fog path:first-child, .weather-symbol-rain path:first-child, .weather-symbol-snow path:first-child, .weather-symbol-storm path:first-child { fill: #fbf8ef; }
.clothing-guide { margin-top: 4px; padding-top: 9px; border-top: 1px dotted rgba(132,111,75,.22); }
.clothing-guide-heading { display: flex; align-items: baseline; gap: 9px; color: #5d6249; font-size: 10px; }
.clothing-guide-heading > span { color: #8a806c; font-size: 9px; }
.clothing-recommendations { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 7px; }
.clothing-recommendation { display: inline-flex; align-items: center; gap: 5px; color: #6d634f; font-size: 10px; }
.clothing-icon { width: 22px; height: 22px; fill: none; stroke: #9b6847; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.clothing-fill { fill: rgba(181,94,52,.09); stroke: #9b6847; }
.clothing-detail { fill: none; stroke: #77835e; stroke-width: 1; }
.clothing-icon-down .clothing-fill, .clothing-icon-cotton .clothing-fill { fill: rgba(119,131,94,.12); }
.clothing-guide p { margin: 5px 0 0; color: #8a806c; font-size: 9px; }
.weather-trend { margin: 15px 0; padding-top: 10px; border-top: 1px dotted rgba(132,111,75,.24); }
.weather-trend-heading { align-items: center; margin-bottom: 4px; }
.weather-trend-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; margin: 0; padding: 0; list-style: none; }
.weather-trend-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 8px; padding: 7px 0; border-bottom: 1px dotted rgba(132,111,75,.17); color: #766f5d; font-size: 9px; }
.weather-trend-item time { color: #6d7654; }
.weather-trend-item strong { color: #81583d; font-weight: 600; }
.weather-warning { margin: 8px 0; color: #855a3d; font-size: 10px; }
.weather-disclaimer, .weather-attribution { color: #8a806c; font-size: 9px; }
.weather-attribution a { color: #687451; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) {
  .trip-query-section { margin-top: 14px; padding: 12px; }
  .weather-query-section { margin-top: 17px; padding-top: 12px; }
  .trip-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destination-field { grid-column: 1 / -1; }
  .trip-field input, .trip-field select { height: 40px; }
  .weather-day-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .trip-query-section { padding: 10px; }
  .trip-section-heading h3 { font-size: 14px; }
  .trip-field input, .trip-field select { padding-inline: 6px; font-size: 10px; }
  .weather-week-heading h4 { font-size: 11px; }
  .weather-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .weather-day-card { padding: 8px; }
}