:root {
  color-scheme:light;
  --page:#f4f6f3;
  --surface:#fff;
  --surface-2:#edf3ee;
  --ink:#20352d;
  --ink-2:#55675e;
  --muted:#64746a;
  --grid:#e9eee9;
  --axis:#bdccc1;
  --border:#e0e7e0;
  --series-1:#2a78d6;
  --series-2:#eb6834;
  --series-3:#1baf7a;
  --series-4:#eda100;
  --good:#238357;
  --bad:#bc524a;
  --warn-bg:#fff4d6;
  --accent:#286348;
  --on-accent:#fff
}

* {
  box-sizing:border-box
}

[hidden] {
  display:none!important
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased
}

button,input,select {
  font:inherit;
  color:inherit
}

button {
  cursor:pointer
}

button,input,select {
  transition:background .16s,border-color .16s,box-shadow .16s
}

button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #8fbca5;
  outline-offset:3px
}

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

h1,h2,h3 {
  font-weight:650
}

h2 {
  font-size:17px;
  letter-spacing:-.35px
}

h3 {
  font-size:14px
}

svg {
  flex-shrink:0
}

.skip-link {
  position:absolute;
  top:-60px;
  left:16px;
  padding:10px 18px;
  background:var(--accent);
  color:white;
  z-index:30;
  border-radius:8px
}

.skip-link:focus {
  top:12px
}

/* App header and live monitor summary */
.top {
  background:var(--surface);
  border-bottom:1px solid var(--border)
}

.top-inner {
  max-width:1640px;
  margin:auto;
  padding:19px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.brand {
  display:flex;
  gap:12px;
  align-items:center
}

.brand-mark {
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--accent);
  color:#f4f8e9;
  display:grid;
  place-items:center
}

.brand-mark svg {
  width:25px;
  height:25px
}

.brand-name {
  display:block;
  font-size:20px;
  font-weight:750;
  letter-spacing:-.8px;
  line-height:1.2
}

.brand-name>span {
  font-weight:400;
  margin-left:5px
}

.brand-caption {
  font-size:11px;
  letter-spacing:1px;
  color:var(--muted)
}

.status {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:12px
}

.live {
  display:inline-flex;
  align-items:center;
  color:var(--accent);
  gap:7px;
  background:#eef5ee;
  border:1px solid #e0ecdf;
  border-radius:20px;
  padding:5px 11px
}

.dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--good);
  box-shadow:0 0 0 3px #23835712
}

.dot.paused {
  background:var(--bad)
}

.status .err {
  color:var(--bad)
}

.workspace {
  max-width:1640px;
  padding:0 40px;
  margin:auto
}

.intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:34px 0 27px
}

.eyebrow {
  font-size:10px;
  font-weight:650;
  letter-spacing:2.1px;
  color:var(--accent);
  margin-bottom:9px
}

h1 {
  font-size:clamp(25px,2.3vw,34px);
  line-height:1.35;
  letter-spacing:-1px
}

h1>span {
  color:#8da579
}

.intro-sub {
  font-size:13px;
  color:var(--ink-2);
  margin-top:9px
}

.monitor-stats {
  display:flex;
  flex-shrink:0;
  gap:30px;
  padding:3px 0
}

.monitor-stat {
  display:grid;
  gap:2px
}

.monitor-stat+.monitor-stat {
  border-left:1px solid #dce4dc;
  padding-left:30px
}

.stat-label {
  color:var(--muted);
  font-size:11px
}

#nKeys {
  font-size:34px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-1.2px;
  font-variant-numeric:tabular-nums
}

.stat-unit {
  margin-left:10px;
  font-size:11px;
  color:var(--ink-2)
}

#lastCycle {
  font-size:13px;
  font-weight:550;
  font-variant-numeric:tabular-nums;
  align-self:center
}

.stat-foot {
  color:var(--muted);
  font-size:10px
}

.source-strip {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 18px;
  padding:12px 0 17px;
  border-bottom:1px solid var(--border);
  color:var(--ink-2);
  font-size:11px
}

.source-label {
  color:var(--muted);
  padding-right:17px;
  border-right:1px solid var(--border)
}

.source-strip>span {
  display:inline-flex;
  gap:6px;
  align-items:center
}

.source-dot {
  width:5px;
  height:5px;
  border-radius:2px;
  background:var(--accent)
}

.google {
  background:var(--series-1)
}

.google-all {
  background:#ce9d3e
}

.frontier {
  background:var(--good)
}

.kayak {
  background:#d67e4c
}

.cheapflights {
  background:#9a80b4
}

.trip {
  background:#cc7d9b
}

.origin-nav {
  display:flex;
  align-items:center;
  gap:22px;
  padding:22px 0 18px
}

.nav-label {
  font-size:12px;
  font-weight:550;
  color:var(--ink-2);
  flex-shrink:0
}

.tabs {
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:3px;
  background:#e8eee8;
  border-radius:10px
}

.tab {
  display:flex;
  align-items:center;
  border:1px solid transparent;
  border-radius:7px;
  padding:6px 17px;
  white-space:nowrap;
  font-size:13px;
  font-weight:650;
  color:var(--ink-2);
  background:transparent
}

.tab:hover {
  color:var(--accent)
}

.tab[aria-selected=true] {
  background:var(--surface);
  border-color:#e0e7dd;
  box-shadow:0 2px 5px #20352d08;
  color:var(--accent)
}

.tab .off {
  margin-left:9px;
  font-size:10px;
  font-weight:400;
  color:var(--muted)
}

.nav-hint {
  margin-left:auto;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap
}

/* Panels, filters, and destination controls */
.layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 314px;
  gap:22px;
  align-items:start
}

main,aside {
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0
}

.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  min-width:0;
  box-shadow:0 3px 16px #20352d04
}

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

.section-kicker {
  font-size:9px;
  font-weight:600;
  letter-spacing:1.6px;
  color:var(--muted);
  margin-bottom:3px
}

.controls {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.btn {
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 13px;
  line-height:1.4;
  background:var(--surface);
  font-size:12px;
  font-weight:550;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap
}

.btn:hover {
  border-color:var(--axis);
  background:#f6f8f4
}

.refresh-btn svg {
  width:16px;
  height:16px
}

.btn.primary {
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent)
}

.btn.primary:hover {
  background:#1f513a;
  border-color:#1f513a;
  box-shadow:0 3px 9px #28634818
}

.btn.danger {
  color:var(--bad);
  background:transparent
}

.btn.ghost {
  background:transparent
}

.btn:disabled {
  opacity:.5;
  cursor:default
}

.link {
  border:0;
  background:none;
  color:var(--accent);
  padding:2px 0;
  font-size:12px;
  justify-self:start
}

.seg {
  display:inline-flex;
  background:#f2f5f1;
  padding:3px;
  border-radius:8px;
  gap:2px
}

.seg button {
  border:1px solid transparent;
  border-radius:5px;
  padding:5px 11px;
  background:transparent;
  color:var(--muted);
  font-size:11px
}

.seg button[aria-pressed=true] {
  background:var(--surface);
  border-color:var(--border);
  color:var(--ink);
  font-weight:550;
  box-shadow:0 1px 3px #20352d05
}

input,select {
  min-width:0;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:7px;
  padding:8px 10px;
  font-size:12px;
  line-height:1.5
}

input:hover,select:hover {
  border-color:var(--axis)
}

input::placeholder {
  color:#94a096;
  opacity:1
}

#destSel:empty {
  display:none
}

.add-destination {
  display:flex;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:var(--surface)
}

.add-destination:focus-within {
  box-shadow:0 0 0 3px #8fbca533;
  border-color:#8fbca5
}

.add-destination input {
  width:132px;
  border:0;
  background:transparent;
  border-radius:0;
  font-size:11px;
  text-transform:uppercase
}

.add-destination input:focus-visible {
  outline:0
}

.add-destination .btn {
  border:0;
  border-left:1px solid var(--border);
  border-radius:0;
  padding:7px 11px;
  color:var(--accent);
  background:#f7f9f5;
  font-size:11px
}

/* Scrollable tables preserve their headers and airport labels */
.subhead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 0 11px
}

.subhead>span {
  color:var(--muted);
  font-size:10px;
  display:flex;
  align-items:center;
  gap:6px
}

.matrix-heading {
  margin-top:26px
}

.table-scroll {
  overflow:auto;
  max-width:100%;
  scrollbar-width:thin;
  scrollbar-color:#c8d5ca transparent;
  border:1px solid var(--grid);
  border-radius:9px;
  overscroll-behavior-x:contain
}

.date-scroll {
  max-height:354px
}

table {
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  font-variant-numeric:tabular-nums;
  font-size:12px
}

th {
  position:sticky;
  top:0;
  z-index:2;
  text-align:left;
  background:#f5f7f3;
  font-weight:450;
  color:var(--muted);
  font-size:10px;
  padding:11px 15px;
  border-bottom:1px solid var(--grid);
  white-space:nowrap
}

td {
  padding:11px 15px;
  border-bottom:1px solid var(--grid);
  vertical-align:middle;
  white-space:nowrap
}

tr:last-child td {
  border-bottom:0
}

tr.pick {
  cursor:pointer
}

tr.pick:hover td {
  background:#f3f7f1
}

tr.sel td {
  background:#edf4ed
}

.price {
  font-size:17px;
  font-weight:650;
  letter-spacing:-.5px;
  color:var(--ink)
}

.alt {
  color:var(--muted);
  font-size:10px;
  margin-left:10px
}

.na {
  color:var(--muted)
}

.delta {
  font-size:10px;
  margin-left:3px
}

.delta.down {
  color:var(--good)
}

.delta.up {
  color:var(--bad)
}

.key {
  display:inline-block;
  width:12px;
  height:3px;
  vertical-align:middle;
  margin-right:6px;
  border-radius:3px
}

.dow {
  color:var(--muted);
  font-size:10px;
  margin-left:8px
}

.ago {
  color:var(--muted);
  font-size:10px
}

.best {
  display:inline-block;
  font-size:9px;
  font-weight:500;
  color:var(--good);
  margin-left:8px;
  padding:2px 5px;
  border-radius:4px;
  background:#eff7ed;
  letter-spacing:0
}

.matrix-scroll {
  max-height:470px;
  padding:0 6px 6px
}

.matrix {
  min-width:850px
}

.matrix th {
  text-align:center;
  padding:9px 5px;
  background:var(--surface);
  font-size:10px
}

.matrix td {
  text-align:center;
  padding:3px;
  border:0
}

.matrix th.dest,.matrix td.dest {
  text-align:left;
  padding:8px 12px;
  min-width:66px;
  position:sticky;
  left:0;
  background:white;
  font-weight:650;
  z-index:1
}

.matrix th.dest {
  z-index:3;
  color:var(--muted);
  font-weight:400
}

.cell {
  display:block;
  width:100%;
  min-width:45px;
  padding:9px 4px;
  border:0;
  border-radius:5px;
  color:var(--ink);
  background:#f7f9f6;
  font-size:11px;
  font-variant-numeric:tabular-nums
}

.cell:hover,.cell:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:-2px;
  box-shadow:0 2px 6px #28634812
}

.cell.sel {
  outline:2px solid var(--accent);
  outline-offset:-2px
}

.cell.min {
  font-weight:750
}

.cell.none {
  color:#a3afa5;
  background:#f7f9f6;
  cursor:default
}

.heat-swatch {
  display:inline-block;
  width:32px;
  height:7px;
  border-radius:2px;
  background:linear-gradient(90deg,#f2f6ef,#a8c8ab)
}

.matrix-note {
  color:var(--muted);
  font-size:10px;
  margin:12px 0 0;
  line-height:1.6
}

.matrix-note>span {
  color:var(--accent);
  margin-right:4px
}

/* Monitoring form and recent activity */
.aside-heading {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px
}

.aside-heading h2 {
  font-size:15px
}

.sub {
  color:var(--muted);
  font-size:10px;
  margin-top:2px;
  font-weight:400
}

.panel-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:9px;
  color:var(--accent);
  background:#edf3e9;
  flex-shrink:0
}

.panel-icon svg {
  width:18px;
  height:18px
}

.activity-icon {
  background:#f5f1e7;
  color:#9b8657
}

form {
  display:grid;
  gap:17px
}

form label {
  display:grid;
  gap:6px;
  font-size:11px;
  font-weight:500;
  color:var(--ink-2)
}

form input:not([type=checkbox]):not([type=radio]),form select {
  width:100%;
  min-height:38px;
  font-size:12px;
  background:#fbfcfa
}

.airport-fields input {
  font-size:15px!important;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase
}

form .inline {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--ink)
}

.input-with-unit {
  position:relative;
  display:block
}

.input-with-unit input {
  padding-right:32px
}

.input-with-unit>span {
  position:absolute;
  right:12px;
  top:9px;
  color:var(--muted);
  font-size:11px;
  pointer-events:none
}

.input-with-unit input[type=number] {
  appearance:textfield;
  -moz-appearance:textfield
}

.input-with-unit input::-webkit-inner-spin-button {
  appearance:none
}

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

fieldset.dates {
  min-width:0;
  border:0;
  border-top:1px solid var(--grid);
  padding:12px 0 0;
  margin:2px 0 0
}

fieldset.dates legend {
  color:var(--muted);
  font-size:10px;
  padding:0 8px 0 0
}

.fixed-dates {
  display:grid;
  gap:13px
}

.optional {
  color:var(--muted);
  font-size:9px;
  font-weight:400;
  margin-top:-5px
}

form input[name=dates] {
  font-size:11px!important
}

.hint {
  color:var(--muted);
  font-size:10px;
  line-height:1.85;
  padding:10px 12px;
  background:#f5f7f1;
  border-radius:7px
}

.hint.warn {
  color:var(--ink);
  background:var(--warn-bg)
}

.error {
  color:var(--bad);
  font-size:12px
}

.error:empty {
  display:none
}

.form-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.form-actions .primary {
  flex:1;
  justify-content:space-between;
  padding:11px 15px;
  font-size:12px;
  border-radius:8px
}

.form-actions .primary>span {
  font-size:17px;
  line-height:1
}

.activity-card .aside-heading {
  margin-bottom:14px
}

.changes {
  list-style:none;
  margin:0;
  padding:0;
  max-height:360px;
  overflow-y:auto;
  scrollbar-width:thin
}

.changes:empty::before {
  content:"价格变动记录将在这里显示";
  display:block;
  padding:20px 5px 14px;
  color:var(--muted);
  text-align:center;
  font-size:11px;
  border-top:1px dashed var(--border)
}

.changes li {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  padding:13px 2px;
  border-bottom:1px solid var(--grid);
  cursor:pointer;
  font-variant-numeric:tabular-nums
}

.changes li:last-child {
  border-bottom:0
}

.changes li:hover {
  background:#f7faf5
}

.changes .what {
  font-size:11px;
  line-height:1.8;
  font-weight:550;
  overflow-wrap:anywhere
}

.changes .when {
  font-size:9px;
  color:var(--muted)
}

.changes .when:empty {
  display:none
}

.changes .move {
  color:var(--accent);
  font-size:11px
}

.fare-note {
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:0 8px;
  color:var(--muted);
  font-size:11px
}

.fare-note svg {
  width:16px;
  height:16px;
  margin-top:2px
}

.fare-note span {
  font-size:10px;
  line-height:2
}

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#8d9a90;
  font-size:10px;
  padding:24px 0 27px
}

.page-footer>span:first-child {
  font-weight:600;
  letter-spacing:-.2px
}

/* Detail cards and existing SVG charts */
.tiles {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:8px 0 22px
}

.tile {
  background:#f5f8f2;
  border:1px solid #e6eee1;
  border-radius:10px;
  padding:17px
}

.tile .label {
  font-size:10px;
  color:var(--ink-2)
}

.tile .value {
  font-size:28px;
  font-weight:600;
  letter-spacing:-.9px;
  margin:5px 0
}

.tile .meta {
  font-size:10px;
  color:var(--muted)
}

#sourcesCard {
  background:#fbfcf9;
  padding:18px;
  border-radius:10px;
  margin-bottom:23px;
  box-shadow:none
}

#sourcesCard .card-head {
  gap:10px;
  margin-bottom:15px
}

#sourcesCard h2 {
  font-size:13px
}

#sourcesSub {
  display:inline-block
}

#sourcesTable td:nth-child(4) {
  white-space:normal
}

#sourcesTable .price {
  font-size:16px
}

#sourcesTable .na {
  white-space:normal;
  overflow-wrap:anywhere;
  font-size:10px
}

.chart-wrap {
  position:relative;
  margin-bottom:24px
}

.legend {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:10px;
  color:var(--ink-2);
  margin-bottom:15px
}

.chart {
  width:100%;
  min-height:260px
}

.chart svg {
  display:block;
  overflow:visible
}

.chart text {
  fill:var(--muted);
  font-size:11px;
  font-variant-numeric:tabular-nums
}

.chart .end-label {
  fill:var(--ink);
  font-size:12px;
  font-weight:600
}

.empty {
  color:var(--muted);
  padding:50px 14px;
  text-align:center;
  font-size:12px
}

tr.gone td {
  color:var(--muted)
}

tr.gone .price {
  font-weight:400;
  text-decoration:line-through
}

.tag {
  display:inline-block;
  font-size:9px;
  padding:2px 5px;
  border-radius:4px;
  background:var(--surface-2);
  color:var(--ink-2)
}

.tooltip {
  position:fixed;
  z-index:10;
  pointer-events:none;
  min-width:120px;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:9px;
  box-shadow:0 6px 24px #20352d14;
  padding:10px 12px;
  font-size:12px;
  font-variant-numeric:tabular-nums
}

.tooltip .t {
  color:var(--muted);
  margin-bottom:4px
}

.tooltip .r {
  display:flex;
  align-items:center;
  gap:6px
}

.tooltip .r b {
  font-size:13px
}

.tooltip .r span {
  color:var(--ink-2)
}

.calwrap {
  min-width:0;
  overflow-x:auto
}

.calbars {
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:205px;
  padding:25px 4px 0;
  min-width:570px
}

.cal-col {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  height:100%
}

.cal-price {
  font-size:11px;
  font-weight:550;
  font-variant-numeric:tabular-nums
}

.cal-price.min {
  color:var(--good)
}

.cal-bar {
  width:100%;
  max-width:36px;
  border-radius:5px 5px 0 0;
  background:#b9cdb6;
  transition:height .3s
}

.cal-bar.min {
  background:var(--accent)
}

.cal-dow {
  font-size:10px;
  color:var(--muted);
  text-align:center;
  line-height:1.6
}

/* Desktop, tablet, and phone layouts */
@media(min-width:1500px) {
  .layout {
    grid-template-columns:minmax(0,1fr) 330px;
    gap:26px
  }

  .card {
    padding:26px
  }

  .date-scroll {
    max-height:369px
  }

}

@media(max-width:1200px) {
  .workspace {
    padding:0 24px
  }

  .top-inner {
    padding:17px 24px
  }

  .layout {
    grid-template-columns:minmax(0,1fr) 290px;
    gap:16px
  }

  .card {
    padding:19px
  }

  .overview-head {
    align-items:flex-start
  }

  .overview-head .controls {
    width:100%;
    justify-content:space-between
  }

  .monitor-stats {
    gap:20px
  }

  .monitor-stat+.monitor-stat {
    padding-left:20px
  }

  .stat-unit {
    display:block;
    margin-left:0
  }

  .intro {
    gap:20px
  }

}

@media(max-width:940px) {
  .layout {
    grid-template-columns:minmax(0,1fr)
  }

  .overview-head .controls {
    width:auto
  }

  aside {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:start;
    gap:20px
  }

  .fare-note {
    grid-column:2
  }

  .watch-card {
    grid-row:span 2
  }

  .monitor-stats {
    gap:16px
  }

  .monitor-stat+.monitor-stat {
    padding-left:16px
  }

  .update-stat {
    max-width:155px
  }

  #lastCycle {
    font-size:11px
  }

  .intro {
    padding:27px 0 20px
  }

  h1 {
    font-size:27px
  }

}

@media(max-width:680px) {
  .top-inner {
    padding:14px 18px;
    gap:10px
  }

  .brand-mark {
    width:35px;
    height:35px;
    border-radius:10px
  }

  .brand {
    gap:9px
  }

  .brand-name {
    font-size:17px
  }

  .brand-caption {
    font-size:9px;
    letter-spacing:.2px
  }

  .status {
    gap:10px
  }

  .live {
    padding:5px 8px;
    font-size:10px
  }

  .refresh-btn {
    padding:8px;
    font-size:0;
    gap:0
  }

  .refresh-btn svg {
    width:17px;
    height:17px
  }

  .workspace {
    padding:0 16px
  }

  .intro {
    flex-direction:column;
    align-items:stretch;
    gap:20px;
    padding:27px 2px 21px
  }

  h1 {
    font-size:28px
  }

  .eyebrow {
    font-size:8px;
    letter-spacing:1.7px
  }

  .intro-sub {
    font-size:11px
  }

  .monitor-stats {
    background:#eaf0e7;
    border:1px solid #e1e9dd;
    border-radius:11px;
    padding:14px 17px;
    gap:18px
  }

  .monitor-stat {
    flex:1
  }

  .monitor-stat+.monitor-stat {
    padding-left:18px
  }

  #nKeys {
    font-size:26px
  }

  .stat-unit {
    display:inline;
    margin-left:7px;
    font-size:9px
  }

  .update-stat {
    max-width:none
  }

  #lastCycle {
    font-size:11px
  }

  .stat-label,.stat-foot {
    font-size:9px
  }

  .source-strip {
    gap:10px 15px;
    padding:2px 2px 17px;
    font-size:9px
  }

  .source-label {
    width:100%;
    padding-right:0;
    border:0
  }

  .origin-nav {
    gap:12px;
    padding:18px 0 14px;
    flex-wrap:wrap
  }

  .nav-label {
    font-size:11px
  }

  .tab {
    font-size:12px;
    padding:6px 13px
  }

  .tab .off {
    font-size:9px;
    margin-left:7px
  }

  .nav-hint {
    font-size:9px
  }

  .card {
    padding:17px;
    border-radius:12px
  }

  .card-head {
    gap:16px;
    margin-bottom:20px
  }

  .overview-head .controls {
    width:100%;
    gap:8px
  }

  .add-destination input {
    width:120px;
    font-size:10px
  }

  .seg button {
    padding:5px 9px;
    font-size:10px
  }

  .add-destination .btn {
    padding:7px 8px;
    font-size:10px
  }

  .subhead h3 {
    font-size:12px
  }

  .subhead>span {
    font-size:9px
  }

  .date-scroll {
    max-height:336px
  }

  #dateTable {
    min-width:520px
  }

  th,td {
    padding-left:12px;
    padding-right:12px
  }

  .matrix-heading {
    margin-top:22px
  }

  .matrix {
    min-width:800px
  }

  .matrix-scroll {
    max-height:385px
  }

  .matrix-note {
    font-size:9px
  }

  aside {
    display:flex;
    gap:16px
  }

  .fare-note {
    padding:0 5px
  }

  .aside-heading {
    margin-bottom:20px
  }

  form {
    gap:16px
  }

  form input:not([type=checkbox]):not([type=radio]),form select {
    font-size:16px;
    min-height:43px
  }

  form input[name=dates] {
    font-size:14px!important
  }

  #watchForm .btn.primary {
    min-height:44px
  }

  .hint {
    font-size:11px
  }

  .tiles {
    grid-template-columns:minmax(0,1fr);
    gap:9px
  }

  .tile {
    padding:14px
  }

  .tile .value {
    font-size:25px
  }

  .chart {
    min-height:180px
  }

  #sourcesCard {
    padding:13px
  }

  #detail .controls {
    gap:6px
  }

  #detail .controls select {
    max-width:130px;
    font-size:11px
  }

  #detail .controls #dOrigin {
    max-width:64px
  }

  #detail .controls .btn {
    font-size:11px
  }

  .page-footer {
    font-size:9px;
    padding:20px 2px
  }

}

@media(max-width:380px) {
  .nav-hint {
    width:100%;
    margin-left:0
  }

  .add-destination {
    flex:1
  }

  .add-destination input {
    width:0;
    flex:1
  }

  .overview-head .controls {
    align-items:stretch
  }

  .live {
    max-width:80px;
    overflow:hidden;
    white-space:nowrap
  }

  .monitor-stats {
    gap:10px;
    padding:12px
  }

  .monitor-stat+.monitor-stat {
    padding-left:10px
  }

  .stat-unit {
    display:block;
    margin-left:0
  }

  h1 {
    font-size:25px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }

}

/* Readable data and form labels at desktop scale. */
table {
  font-size:13px
}

th {
  font-size:11px
}

.alt,.ago,.delta,.dow {
  font-size:11px
}

.best {
  font-size:10px
}

.matrix .cell {
  font-size:12px
}

.subhead>span {
  font-size:11px
}

form label {
  font-size:12px
}

.hint {
  font-size:11px
}

.sub {
  font-size:11px
}


/* Airport names, carrier comparison, and Friday–Monday emphasis. */
.airport-code { display: block; font-weight: 650; }
.airport-name { display: block; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.6; margin-top: 3px; }
.tab { text-align: left; align-items: center; }
.tab .airport-name { font-size: 10px; max-width: 160px; }
.tab .off { flex-shrink: 0; }
.matrix .dest { min-width: 176px !important; max-width: 200px; }
.matrix .dest .airport-name { white-space: normal; max-width: 165px; }
.matrix { min-width: 1010px; }
th.travel-focus { background: #fff0c6; color: #805a19; border-top: 2px solid #d5ae4d; }
.matrix td.travel-focus { background: #fff9e8; border-left: 1px solid #f4e7bd; border-right: 1px solid #f4e7bd; }
#dateTable tr.travel-focus td { background: #fffcf2; }
#dateTable tr.travel-focus td:first-child { border-left: 3px solid #d5ae4d; }
#dateTable tr.travel-focus .dow { color: #8a641f; }
#dateTable tr.travel-focus:hover td { background: #fff4d5; }
.cal-col.travel-focus { background: #fff7de; border-radius: 6px; padding: 0 3px 4px; }
.cal-col.travel-focus .cal-dow { color: #8a641f; }
#destSel { max-width: 245px; font-size: 11px; }
.overview-head .controls { justify-content: flex-end; }
.airport-field-hint { font-size: 10px; line-height: 1.6; font-weight: 400; color: var(--accent); min-height: 30px; }
.form-success { font-size: 11px; color: var(--accent); background: #edf5e9; padding: 9px 11px; border-radius: 7px; }
.form-success:empty { display: none; }
.airlines-panel { margin: 0 0 25px; }
.airlines-panel h2 { font-size: 15px; }
.airlines-panel .card-head { margin-bottom: 14px; }
.airline-filter { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 8px; }
.airlines-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 10px; }
.airline-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 15px; background: #fbfcfa; }
.airline-card:hover, .airline-card.selected { border-color: #6b9b77; background: #f0f6e9; }
.airline-title { font-size: 12px; font-weight: 600; }
.airline-en { font-size: 10px; color: var(--muted); margin-top: 1px; }
.airline-card strong { font-size: 25px; font-weight: 650; letter-spacing: -.7px; margin: 7px 0 2px; }
.airline-card .sub { font-size: 10px; }
.freshness { font-size: 22px !important; }
#detail .controls select { max-width: 250px; }
#detail .controls #dOrigin { max-width: 235px; }
@media (max-width: 680px) {
  .origin-nav { align-items: flex-start; }
  .tabs { max-width: 100%; flex: 1; }
  .tab { padding: 6px 10px; }
  .tab .airport-name { max-width: 90px; font-size: 9px; white-space: normal; }
  .tab .off { display: none; }
  .nav-hint { width: 100%; margin-left: 0; }
  .overview-head .controls { justify-content: flex-start; }
  #destSel { width: 100%; max-width: none; order: -1; }
  #detail .controls { width: 100%; }
  #detail .controls select, #detail .controls #dOrigin { max-width: 100%; width: 100%; }
  #detail .controls > span { display: none; }
  .airlines-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .airline-card { padding: 12px; }
  .matrix .dest { min-width: 140px !important; }
  .matrix .dest .airport-name { font-size: 9px; max-width: 123px; }
}

/* Personal fare assistant */
.intro { padding-top: 27px; padding-bottom: 23px; }
.intro-sub { max-width: 650px; }
.origin-nav { padding-top: 17px; padding-bottom: 16px; }
.assistant-board { background: linear-gradient(155deg,#fff 55%,#f8faf3); }
.assistant-board > .card-head { margin-bottom: 18px; }
.assistant-board h2 { font-size: 19px; }
.focus-badge { display: inline-block; color: #3f6b3b; background: #edf4df; border: 1px solid #e1ebd1; padding: 2px 7px; border-radius: 5px; font-size: 10px; vertical-align: middle; font-weight: 500; margin-left: 7px; }
.board-actions { display: flex; gap: 7px; }
.board-actions .btn { font-size: 11px; }
.assistant-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border: 1px solid #e6eddf; border-radius: 10px; background: #f8faf5; padding: 15px 0; margin-bottom: 23px; }
.assistant-stats > div { display: flex; flex-direction: column; padding: 0 18px; gap: 2px; }
.assistant-stats > div + div { border-left: 1px solid #e1e9da; }
.assistant-stats span { font-size: 11px; color: var(--ink-2); }
.assistant-stats b { font-size: 28px; line-height: 1.5; font-weight: 650; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.assistant-stats small { color: var(--muted); font-size: 9px; line-height: 1.7; }
.assistant-stats .frontier-stat b { color: var(--accent); }
.deal-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 11px; }
.deal-section-heading h3 { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.deal-section-heading > span { color: var(--muted); font-size: 10px; }
.frontier-indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.alternative-heading { margin-top: 23px; }
.deals-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.deal-card { min-width: 0; border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px; background: #fff; box-shadow: 0 2px 7px #20352d03; }
.frontier-deal { border-top: 3px solid #51825b; padding-top: 11px; }
.deal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deal-airline { color: var(--ink-2); font-size: 10px; }
.save-deal { display: grid; place-items: center; border: 0; padding: 0; background: transparent; color: #8b997f; font-size: 21px; width: 29px; height: 27px; border-radius: 5px; }
.save-deal:hover, .save-deal.saved { color: #a47d2a; background: #faf3df; }
.deal-route { font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; }
.deal-route > span { color: #9daf9a; margin: 0 4px; font-weight: 400; }
.deal-city { color: var(--muted); font-size: 10px; margin-top: 3px; }
.deal-date { color: var(--ink-2); font-size: 11px; margin-top: 12px; }
.deal-date.travel-focus { color: #947126; }
.deal-date > span { border-left: 1px solid var(--border); padding-left: 7px; margin-left: 5px; color: var(--muted); font-size: 10px; }
.deal-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 5px; margin-top: 12px; }
.deal-bottom strong { font-size: 29px; font-weight: 650; letter-spacing: -.8px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.deal-base { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.deal-open { padding: 5px 0; border: 0; background: transparent; font-size: 11px; color: var(--accent); font-weight: 600; flex-shrink: 0; }
.deal-open:hover { text-decoration: underline; }
.deal-reason { border-top: 1px solid #edf1e8; padding-top: 9px; margin-top: 12px; color: var(--muted); font-size: 9px; }
.deal-reason.on-target { color: #41723f; }
.deal-empty { grid-column: 1 / -1; text-align: center; padding: 29px 16px; color: var(--muted); font-size: 12px; background: #f7faf3; border: 1px dashed var(--border); border-radius: 10px; }
.assistant-footnote { font-size: 10px; color: var(--muted); line-height: 1.8; margin-top: 15px; }
.preference-card { border-top: 3px solid #7b9c65; }
.preference-card .aside-heading { margin-bottom: 18px; }
.budget-input { position: relative; }
.budget-input > span { position: absolute; left: 13px; top: 9px; color: #7c9272; font-size: 24px; font-weight: 500; }
#assistantForm .budget-input input { height: 58px; font-size: 34px; font-weight: 600; color: var(--accent); padding: 5px 14px 6px 35px; letter-spacing: -1px; background: #f7faf2; border-color: #d9e5d2; }
.preference-toggles { display: grid; gap: 10px; }
#assistantForm .preference-toggles label { display: flex; gap: 9px; align-items: center; font-size: 12px; color: var(--ink-2); font-weight: 400; }
.preference-toggles input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex-shrink: 0; }
.budget-details { border-top: 1px solid var(--grid); padding-top: 13px; }
summary { cursor: pointer; }
.budget-details > summary { color: var(--ink-2); font-size: 11px; }
.budget-details-body { display: grid; gap: 13px; padding-top: 16px; }
.preference-saved { color: var(--accent); font-size: 10px; }
.preference-saved:empty { display: none; }
#assistantForm > .btn.primary { justify-content: space-between; padding: 10px 13px; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 20px; background: #edf4e3; color: var(--accent); font-size: 11px; font-weight: 500; margin-left: 5px; }
.alerts-card .card-head, .favorites-card .card-head { margin-bottom: 12px; }
.assistant-list { list-style: none; padding: 0; margin: 0; }
.assistant-list li { padding: 11px 0; border-bottom: 1px solid var(--grid); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.assistant-list li:last-child { border-bottom: 0; }
.assistant-list strong { display: block; font-size: 12px; font-weight: 600; }
.assistant-list span { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.assistant-list .alert-empty { color: var(--muted); font-size: 11px; line-height: 1.8; padding: 14px 0; }
.alert-actions { display: flex; gap: 7px; flex-wrap: wrap; margin: 13px 0 9px; }
.alert-actions .btn { font-size: 10px; padding: 7px 9px; }
.pending-title { font-size: 10px; font-weight: 550; color: #947126; margin: 13px 0 5px; }
.pending-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #fff9e7; border-radius: 7px; font-size: 10px; margin-top: 5px; }
.pending-row small { display: block; font-size: 9px; color: #8c815f; }
.pending-row b { color: #8c6b27; font-size: 14px; }
.favorite-star { color: #a08036; font-size: 25px; }
.favorite-open { border: 0; padding: 0; background: transparent; text-align: left; }
.favorite-open:hover strong { color: var(--accent); text-decoration: underline; }
.favorite-open:disabled { opacity: .5; cursor: default; }
.source-health-card summary { display: flex; justify-content: space-between; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.source-health-card summary::after { content: '+'; color: var(--muted); }
.source-health-card details[open] > summary::after { content: '−'; }
.source-health-card summary .sub { margin-left: auto; font-size: 9px; }
.source-health-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--grid); padding: 13px 0; }
.source-health-row strong { display: block; font-size: 11px; font-weight: 550; }
.source-health-row span { display: block; color: var(--muted); font-size: 9px; }
.source-state { font-size: 10px; color: var(--accent); text-align: right; white-space: nowrap; }
.source-state small { display: block; font-size: 9px; color: var(--muted); }
.source-state.source-error { color: #b17343; }
.source-strip small { font-size: 8px; color: #80966d; background: #e9efdf; border-radius: 3px; padding: 0 3px; }
.booking-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.booking-link { display: inline-block; color: var(--accent); font-size: 11px; text-decoration: none; padding: 7px 10px; border: 1px solid #dfe8d7; background: #f6f9f0; border-radius: 7px; line-height: 1.5; }
.booking-link:hover { background: #edf4e2; border-color: #aabd99; }
.booking-link small { display: block; font-size: 8px; color: var(--muted); }
.cross-source-panel { margin: 22px 0; }
.cross-source-panel h2 { font-size: 15px; }
.cross-source-panel .card-head { margin-bottom: 13px; }
#crossSourceTable td:last-child { max-width: 300px; min-width: 190px; white-space: normal; }
#crossSourceTable td { font-size: 12px; }
.comparison-note { display: block; font-size: 10px; color: var(--muted); margin-bottom: 7px; }
.reference-price { color: #8b723b; }
.other-fare { display: block; color: #76866f; font-size: 10px; margin-top: 3px; }
@media (max-width: 1200px) {
  .assistant-stats > div { padding: 0 12px; }
  .assistant-stats b { font-size: 25px; }
  .deals-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .deals-grid .deal-card:nth-child(3) { display: none; }
  .deal-bottom strong { font-size: 27px; }
}
@media (max-width: 940px) {
  .deals-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .deals-grid .deal-card:nth-child(3) { display: block; }
}
@media (max-width: 680px) {
  .assistant-board { padding: 17px; }
  .assistant-board h2 { font-size: 16px; }
  .assistant-board .card-head { margin-bottom: 17px; }
  .board-actions { width: 100%; }
  .board-actions .btn { flex: 1; font-size: 10px; }
  .assistant-stats { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; gap: 0; margin-bottom: 20px; }
  .assistant-stats > div { padding: 12px; }
  .assistant-stats > div:nth-child(3) { border-left: 0; }
  .assistant-stats > div:nth-child(n+3) { border-top: 1px solid #e1e9da; }
  .assistant-stats b { font-size: 26px; }
  .assistant-stats span { font-size: 10px; }
  .assistant-stats small { font-size: 8px; }
  .deals-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .deals-grid .deal-card:nth-child(3) { display: none; }
  .deal-card { padding: 14px 16px; }
  .deal-top { gap: 12px; }
  .save-deal { width: 37px; height: 34px; }
  .deal-route { font-size: 25px; }
  .deal-bottom strong { font-size: 33px; }
  .deal-open { font-size: 12px; padding: 9px 0; }
  .deal-section-heading > span { font-size: 9px; max-width: 150px; text-align: right; }
  .assistant-footnote { font-size: 10px; }
  #assistantForm .preference-toggles label { font-size: 13px; }
  .booking-links { gap: 7px; }
  .booking-link { font-size: 10px; }
  .budget-details > summary { font-size: 12px; }
  #crossSourceTable { min-width: 680px; }
}

/* Keep the selected flight in view before its secondary calendar. */
#detail {
  order: -1;
}
#detail > .table-scroll {
  max-height: 480px;
}
#dOrigin:not(:has(option)), #dOrigin:not(:has(option)) + span {
  display: none;
}

/* Every low fare has a dated verification link beside its provenance. */
.deal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 13px; }
.deal-verify { background: var(--accent); color: #fff; padding: 8px 11px; border-radius: 7px; font-size: 11px; font-weight: 550; text-decoration: none; }
.deal-verify:hover { background: #285638; color: #fff; }
.deal-official, .alert-links a { color: var(--accent); font-size: 10px; text-decoration: none; }
.deal-official:hover, .alert-links a:hover { text-decoration: underline; }
.alert-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px; }
.alerts-card .assistant-list li { align-items: flex-start; }
.pending-row a { text-decoration: none; }
.source-health-row strong a { color: inherit; text-decoration: none; }
.source-health-row strong a:hover { color: var(--accent); text-decoration: underline; }
.roundtrip-card { border-top: 3px solid #bdad88; }
.roundtrip-reference { background: #fffdf8; }
.roundtrip-badge { color: #8b6b29; background: #f8efd8; border-radius: 4px; padding: 3px 5px; font-size: 9px; }
.roundtrip-dates { display: grid; gap: 4px; color: var(--ink-2); font-size: 10px; margin-top: 12px; }
.detail-roundtrips { margin-top: 18px; }
.detail-roundtrips:empty { display: none; }
.detail-roundtrips > .sub { margin-bottom: 10px; }
.matrix-heading { align-items: center; gap: 15px; }
.matrix-heading #matrixCoverage { margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 400; }
.matrix-mode { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.matrix-mode select { font-size: 11px; max-width: 235px; }
.matrix-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.matrix-controls .matrix-mode { white-space: nowrap; }
.matrix .cell { min-width: 82px; min-height: 50px; }
.matrix .cell-price { display: block; font-size: 13px; font-weight: 650; }
.matrix .cell small { display: block; font-size: 8px; font-weight: 400; margin-top: 4px; color: #5d785f; white-space: nowrap; }
.matrix .cell.quote-all small { color: #62768a; }
.matrix .cell.quote-stale { border: 1px dashed #c3cdbd; }
.matrix .cell.quote-stale small { color: #80765e; }
.matrix .cell.none { font-size: 10px; }
.matrix .cell.none:not(:disabled) { color: var(--accent); cursor: pointer; }
@media (max-width: 680px) {
  .deal-verify { padding: 9px 12px; }
  .alert-links a { font-size: 11px; }
  .matrix-heading { align-items: flex-start; flex-direction: column; }
  .matrix-mode { width: 100%; justify-content: space-between; }
  .matrix-mode select { flex: 1; max-width: 240px; }
  .matrix-controls { width: 100%; }
}

.monitor-progress{margin:0 0 24px;padding:16px 20px;border:1px solid #dce5dd;border-radius:16px;background:#fff;display:flex;align-items:center;gap:24px}
.monitor-progress div{flex:1;display:grid;gap:5px}.monitor-progress strong{font-size:13px;color:var(--ink)}.monitor-progress span{font-size:12px;color:var(--muted)}.monitor-progress progress{width:160px;height:9px;accent-color:var(--brand)}
@media(max-width:700px){.monitor-progress{align-items:flex-start;flex-direction:column;gap:12px}.monitor-progress progress{width:100%}}