:root {
    --bg:#f5f6f0;
    --surface:#fff;
    --ink:#202d29;
    --muted:#738077;
    --line:#e3e8df;
    --accent:#c9ed8d;
    --on-accent:#202d29;
    --accent-ink:#335822;
    --soft:#edf2e8;
    --danger:#a33232;
    --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23738077' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--bg);
    font-synthesis:none;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    min-height:100svh;
    color:var(--ink);
    background:var(--bg);
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

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

.field input,input[type=date],.stay-pair select {
    color:var(--ink);
}

input::placeholder {
    color:var(--muted);
}

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

button,a,select {
    cursor:pointer;
}

button {
    border:0;
}

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

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

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
    outline:3px solid var(--accent-ink);
    outline-offset:4px;
}

[hidden] {
    display:none!important;
}

.page {
    max-width:1180px;
    margin:0 auto;
    padding:0 40px;
}

.header {
    height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
}

.brand {
    font-size:32px;
    font-weight:750;
    letter-spacing:-1.7px;
    display:flex;
    align-items:center;
    gap:9px;
}

.brand-mark {
    font-size:27px;
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    background:var(--accent);
    border-radius:10px;
}

.brand-plus {
    color:var(--accent-ink);
    margin-left:-8px;
}

.saved-link {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:13px;
    font-weight:600;
}

.saved-link span {
    background:var(--line);
    border-radius:50%;
    min-width:25px;
    height:25px;
    text-align:center;
    padding-top:4px;
}

.hero {
    display:grid;
    grid-template-columns:1fr 270px;
    gap:36px;
    align-items:center;
    padding:54px 0 39px;
}

.eyebrow {
    margin:0 0 16px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.8px;
    font-weight:650;
    color:var(--muted);
}

.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    margin:0 7px 1px 0;
    border-radius:50%;
    background:#6ea54d;
}

h1 {
    font-size:clamp(30px,3.6vw,45px);
    line-height:1.15;
    font-weight:650;
    letter-spacing:-1.7px;
    margin:0 0 20px;
}

h1 span {
    color:#738960;
}

.headline-desktop {
    color:var(--ink);
}

.headline-mobile,.intro-mobile {
    display:none;
}

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

.hero-note {
    border:1px solid var(--line);
    padding:22px;
    border-radius:18px;
    transform:rotate(3deg);
    background:#edf1e5;
    position:relative;
}

.note-icon {
    font-size:30px;
    display:block;
    color:#6d8858;
    transform:rotate(-15deg);
}

.hero-note p {
    font-size:12px;
    line-height:1.7;
    color:#738466;
}

.hero-note strong {
    color:#3f5540;
    font-weight:600;
}

.dotted-route {
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:20px;
}

.dotted-route i {
    width:6px;
    height:6px;
    border:1.5px solid #8b9c7c;
    border-radius:50%;
}

.dotted-route span {
    width:100%;
    border-top:1px dashed #b6c2a7;
}

.search-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    padding:28px;
    box-shadow:0 10px 35px #24332604;
}

.mode-switch {
    border:0;
    display:flex;
    gap:5px;
    padding:0 0 23px;
    margin:0;
}

.mode-switch label {
    position:relative;
}

.mode-switch input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
}

.mode-switch span {
    display:block;
    padding:10px 15px;
    font-size:12px;
    font-weight:600;
    border-radius:8px;
    color:var(--muted);
}

.mode-switch input:checked+span {
    background:var(--ink);
    color:var(--surface);
}

.mode-switch input:focus-visible+span {
    outline:3px solid var(--accent-ink);
    outline-offset:2px;
}

.mode-switch small {
    color:var(--accent);
    font-size:13px;
    padding-left:5px;
}

.route-fields {
    display:grid;
    grid-template-columns:1fr 36px 1fr;
    gap:12px;
    align-items:center;
}

.field {
    display:flex;
    flex-direction:column;
    gap:9px;
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    padding:15px 18px;
    border:1px solid var(--line);
    border-radius:12px;
}

.field input {
    font-size:20px;
    font-weight:550;
    min-width:0;
    border:0;
    background:transparent;
    width:100%;
    outline:none;
}

.field:focus-within {
    border-color:var(--accent-ink);
}

.field input:focus-visible {
    outline:none;
}

.swap {
    height:36px;
    width:36px;
    font-size:22px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--surface);
}

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

.date-group {
    padding:13px 16px 15px;
    min-width:0;
    border:1px solid var(--line);
    border-radius:12px;
}

.date-group legend {
    font-size:11px;
    color:var(--muted);
    font-weight:600;
    padding:0 5px;
}

.date-pair,.stay-pair {
    display:flex;
    gap:12px;
    align-items:center;
}

.date-pair label,.stay-pair label {
    font-size:10px;
    min-width:0;
    color:var(--muted);
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
}

.date-pair>span {
    color:var(--muted);
}

input[type=date] {
    width:100%;
    min-width:0;
    font-size:13px;
    border:0;
    padding:3px 0;
    background:transparent;
}

.stay-pair select {
    font-size:13px;
    background:transparent;
    border:0;
    padding:4px 0;
    min-width:0;
    width:100%;
}

.form-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:21px;
}

.search-options {
    min-width:0;
}

.search-options summary {
    display:none;
}

.compact-fields {
    display:flex;
    gap:28px;
}

.compact-fields label,.sort-label {
    display:flex;
    flex-direction:column;
    font-size:10px;
    color:var(--muted);
    gap:7px;
}

.compact-fields select,.sort-label select {
    font-size:12px;
    color:var(--ink);
    border:0;
    background:transparent;
    padding:3px 17px 3px 0;
}

.primary-button {
    background:var(--accent);
    font-size:14px;
    font-weight:650;
    border-radius:11px;
    min-height:48px;
    min-width:220px;
    padding:14px 19px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.primary-button:hover:not(:disabled) {
    background:#bce077;
}

.primary-button>span:last-child {
    font-size:20px;
}

.notice {
    margin:0 0 18px;
    padding:15px 18px;
    border:1px solid #e5dcb5;
    border-radius:12px;
    background:#fff8e2;
    font-size:13px;
    line-height:1.6;
    color:#5f532a;
}

.notice.error {
    color:var(--danger);
    background:#fff0ee;
    border-color:#ecd1cd;
}

.results-section,.saved-section {
    padding-top:44px;
}

.section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.section-head .eyebrow {
    margin-bottom:8px;
}

h2 {
    font-size:23px;
    font-weight:600;
    letter-spacing:-.6px;
    margin:0;
}

.result-meta {
    font-size:12px;
    color:var(--muted);
    margin:0 0 16px;
}

.flight-list {
    display:grid;
    gap:12px;
}

.flight-card {
    display:grid;
    grid-template-columns:1fr 180px;
    gap:24px;
    align-items:center;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:21px 24px;
}

.flight-card.best {
    border-color:#afce8e;
}

.flight-details {
    display:flex;
    gap:35px;
    align-items:center;
}

.flight-date {
    min-width:112px;
}

.flight-date strong {
    font-size:20px;
    font-weight:550;
    letter-spacing:-.4px;
    display:block;
    margin:7px 0;
}

.flight-date span {
    font-size:11px;
    color:var(--muted);
}

.flight-date small {
    font-size:10px;
    color:var(--muted);
}

.trip-line {
    text-align:center;
    min-width:92px;
    color:var(--muted);
    font-size:11px;
}

.trip-line .line {
    position:relative;
    border-top:1px dashed #bdc9b7;
    margin:14px 0;
}

.trip-line .line:after {
    content:"✈";
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%,-50%);
    line-height:1;
    font-size:17px;
    color:#819b6c;
    background:var(--surface);
    padding:0 5px;
}

.flight-price {
    text-align:right;
}

.flight-price strong {
    font-size:24px;
    font-weight:650;
    letter-spacing:-.5px;
}

.flight-price small {
    display:block;
    font-size:10px;
    color:var(--muted);
    margin:5px 0 12px;
}

.ticket-button {
    display:block;
    border:1px solid var(--line);
    border-radius:8px;
    text-align:center;
    padding:10px;
    font-size:11px;
    font-weight:600;
}

.ticket-button:hover {
    border-color:var(--accent-ink);
}

.best .ticket-button {
    background:var(--accent);
    border-color:var(--accent);
}

.flight-badge {
    display:inline-block;
    margin:0 0 12px;
    font-size:9px;
    font-weight:650;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--accent-ink);
    background:var(--soft);
    border-radius:5px;
    padding:5px 8px;
}

.save-actions {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
}

.secondary-button {
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:9px;
    padding:11px 13px;
    font-size:12px;
    font-weight:550;
}

.secondary-button:hover:not(:disabled) {
    border-color:var(--accent-ink);
}

.save-actions>span {
    font-size:10px;
    color:var(--muted);
    margin-left:auto;
}

.price-note {
    font-size:10px;
    color:var(--muted);
    line-height:1.7;
    margin:17px 0 0;
}

.section-number {
    color:var(--muted);
    font-size:25px;
}

.empty-state {
    display:flex;
    align-items:center;
    gap:18px;
    padding:26px;
    border:1px dashed #d8ded1;
    border-radius:13px;
}

.empty-state>span {
    display:grid;
    place-items:center;
    min-width:40px;
    height:40px;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--muted);
    font-size:20px;
}

.empty-state h3 {
    font-size:13px;
    font-weight:600;
    margin:0 0 7px;
}

.empty-state p {
    font-size:12px;
    color:var(--muted);
    line-height:1.6;
    margin:0;
}

.saved-list {
    display:grid;
    gap:10px;
}

.saved-card {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
}

.saved-card h3 {
    font-size:14px;
    margin:0 0 7px;
}

.saved-card p {
    font-size:11px;
    color:var(--muted);
    margin:0;
    line-height:1.7;
}

.saved-card .watch-status {
    display:inline-block;
    margin-top:10px;
    padding:4px 8px;
    border-radius:6px;
    background:var(--soft);
}

.saved-card .watch-status.active {
    color:var(--accent-ink);
}

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

.saved-card-actions button {
    font-size:11px;
    padding:9px 11px;
}

.how-it-works {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:45px;
    border-top:1px solid var(--line);
    margin-top:48px;
    padding:32px 0 43px;
}

.how-it-works>div>span {
    font-size:10px;
    color:#91a380;
    letter-spacing:1px;
}

.how-it-works h3 {
    font-size:13px;
    font-weight:600;
    margin:13px 0 9px;
}

.how-it-works p {
    font-size:12px;
    line-height:1.65;
    color:var(--muted);
    margin:0;
}

footer {
    border-top:1px solid var(--line);
    padding:22px 0 30px;
    display:flex;
    align-items:center;
    gap:20px;
    font-size:10px;
    color:var(--muted);
}

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

.footer-brand {
    color:var(--ink);
    font-size:17px;
    font-weight:700;
    letter-spacing:-.6px;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.loading-card {
    padding:30px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
    font-size:13px;
    color:var(--muted);
}

.spinner {
    display:inline-block;
    width:15px;
    height:15px;
    border:2px solid var(--line);
    border-top-color:var(--accent-ink);
    border-radius:50%;
    vertical-align:middle;
    margin-right:10px;
    animation:spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}

@media(max-width:850px) {
    .hero {
        grid-template-columns:1fr;
    }
    .hero-note {
        display:none;
    }
    .page {
        padding:0 24px;
    }
    .flight-details {
        gap:20px;
    }
    .how-it-works {
        gap:25px;
    }
    .primary-button {
        min-width:190px;
    }
    .compact-fields {
        gap:18px;
    }
}

@media(max-width:600px), (max-height:500px) and (pointer:coarse) {
    .page {
        max-width:600px;
        padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
    }
    .header {
        height:auto;
        min-height:64px;
        padding-top:env(safe-area-inset-top);
    }
    .brand {
        font-size:27px;
        min-height:44px;
    }
    .brand-mark {
        width:30px;
        height:30px;
        font-size:23px;
    }
    .saved-link {
        min-height:44px;
        padding:0 10px;
        border-radius:12px;
        font-size:12px;
        gap:7px;
        background:var(--soft);
    }
    .hero {
        padding:16px 0;
        grid-template-columns:1fr;
    }
    .hero .eyebrow,.hero-note,.headline-desktop,.intro-desktop {
        display:none;
    }
    .headline-mobile,.intro-mobile {
        display:inline;
    }
    .headline-mobile {
        color:var(--ink);
    }
    .eyebrow {
        font-size:9px;
        letter-spacing:1.1px;
    }
    h1 {
        font-size:32px;
        letter-spacing:-1.2px;
        margin-bottom:6px;
    }
    .intro {
        font-size:13px;
        line-height:1.5;
    }
    .desktop-break {
        display:none;
    }
    .search-card {
        padding:16px;
        border-radius:20px;
    }
    .mode-switch {
        gap:4px;
        padding:4px;
        margin-bottom:12px;
        border-radius:12px;
        background:var(--soft);
    }
    .mode-switch label {
        flex:1;
        min-width:0;
    }
    .mode-switch span {
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        min-height:44px;
        font-size:12px;
        line-height:1.3;
        padding:6px;
    }
    .mode-switch small {
        display:none;
    }
    .route-fields {
        grid-template-columns:minmax(0,1fr) 44px;
        grid-template-rows:repeat(2,1fr);
        gap:6px 10px;
    }
    .field {
        display:grid;
        grid-template-columns:50px minmax(0,1fr);
        align-items:center;
        min-width:0;
        padding:6px 12px;
        font-size:12px;
        gap:8px;
        grid-column:1;
    }
    .field:first-child {
        grid-row:1;
    }
    .field:nth-of-type(2) {
        grid-row:2;
    }
    .field input {
        font-size:16px;
        min-height:44px;
        padding:0;
    }
    .swap {
        grid-column:2;
        grid-row:1/3;
        width:44px;
        height:44px;
        font-size:22px;
        transform:rotate(90deg);
    }
    .date-grid {
        grid-template-columns:1fr;
        margin:12px 0;
        gap:10px;
    }
    .date-group {
        padding:8px 12px 10px;
    }
    .date-group legend {
        font-size:12px;
    }
    .date-pair {
        gap:10px;
    }
    .date-pair label,.stay-pair label {
        font-size:11px;
    }
    input[type=date] {
        font-size:16px;
        min-height:44px;
        padding:0;
        -webkit-min-logical-width:0;
    }
    input[type=date]::-webkit-date-and-time-value {
        text-align:left;
    }
    .stay-pair select {
        min-height:44px;
        font-size:16px;
    }
    .form-bottom {
        display:block;
        padding-top:8px;
    }
    .search-options summary {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        min-height:44px;
        font-size:13px;
        cursor:pointer;
        list-style:none;
    }
    .search-options summary::-webkit-details-marker {
        display:none;
    }
    .search-options summary:after {
        content:"⌄";
        font-size:22px;
        color:var(--muted);
    }
    .search-options[open] summary:after {
        transform:rotate(180deg);
    }
    .compact-fields {
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:10px;
        padding:10px 0 14px;
    }
    .compact-fields label {
        min-width:0;
        font-size:11px;
    }
    .compact-fields select {
        width:100%;
        min-height:44px;
        padding:0 6px;
        border:1px solid var(--line);
        border-radius:8px;
        font-size:16px;
    }
    .primary-button {
        width:100%;
        min-height:54px;
        min-width:0;
        margin-top:8px;
        font-size:16px;
        border-radius:12px;
    }
    .notice {
        margin-bottom:12px;
        padding:10px 12px;
        font-size:12px;
        line-height:1.5;
    }
    .results-section,.saved-section {
        padding-top:32px;
        scroll-margin-top:16px;
    }
    .section-head {
        gap:10px;
        align-items:stretch;
        flex-direction:column;
    }
    h2 {
        font-size:20px;
    }
    .sort-label {
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        padding:0 12px;
        border:1px solid var(--line);
        border-radius:10px;
        background:var(--surface);
        font-size:12px;
    }
    .sort-label select {
        font-size:16px;
        min-width:0;
        min-height:44px;
        padding-right:0;
    }
    .compact-fields select,.stay-pair select,.sort-label select {
        -webkit-appearance:none;
        appearance:none;
        height:44px;
        padding-right:28px;
        background-image:var(--select-arrow);
        background-position:right 8px center;
        background-size:18px 18px;
        background-repeat:no-repeat;
    }
    .result-meta {
        font-size:12px;
        line-height:1.6;
    }
    .flight-card {
        padding:16px;
        grid-template-columns:1fr;
        gap:17px;
    }
    .flight-details {
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(60px,.9fr) minmax(0,1fr);
        gap:8px;
    }
    .flight-date {
        min-width:0;
    }
    .flight-date:last-child {
        text-align:right;
    }
    .flight-date strong {
        font-size:17px;
    }
    .flight-date span,.flight-date small {
        font-size:11px;
    }
    .trip-line {
        min-width:0;
        font-size:10px;
        line-height:1.5;
    }
    .flight-price {
        display:grid;
        grid-template-columns:minmax(0,1fr) 132px;
        text-align:left;
        align-items:center;
        gap:0 10px;
        border-top:1px solid var(--line);
        padding-top:14px;
    }
    .flight-price strong {
        font-size:22px;
    }
    .flight-price small {
        grid-column:1;
        margin:5px 0 0;
        font-size:11px;
        line-height:1.5;
    }
    .ticket-button {
        grid-column:2;
        grid-row:1/3;
        display:grid;
        place-items:center;
        min-height:44px;
        padding:10px 8px;
        font-size:12px;
        border-radius:10px;
    }
    .flight-badge {
        font-size:10px;
        letter-spacing:.5px;
    }
    .save-actions {
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }
    .secondary-button {
        min-height:44px;
        font-size:13px;
    }
    .save-actions>span {
        grid-column:1/-1;
        margin:4px 0 0;
        font-size:12px;
    }
    .save-actions button {
        font-size:13px;
        padding:10px 8px;
    }
    .price-note {
        font-size:12px;
        line-height:1.6;
    }
    .empty-state {
        padding:20px 15px;
        gap:12px;
    }
    .empty-state p {
        font-size:12px;
    }
    .saved-card {
        align-items:flex-start;
        flex-direction:column;
    }
    .saved-card h3 {
        font-size:16px;
        line-height:1.4;
    }
    .saved-card p {
        font-size:12px;
    }
    .saved-card-actions {
        width:100%;
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 44px;
        gap:8px;
    }
    .saved-card-actions button {
        font-size:12px;
        padding:8px;
    }
    .saved-card-actions button[data-action=delete] {
        font-size:22px;
        color:var(--muted);
    }
    .saved-section .section-head {
        flex-direction:row;
        align-items:center;
    }
    .how-it-works {
        display:none;
    }
    footer {
        margin-top:32px;
        gap:12px;
        flex-wrap:wrap;
        font-size:9px;
        padding-bottom:max(24px,env(safe-area-inset-bottom));
    }
    footer>span:nth-child(2) {
        max-width:150px;
        line-height:1.5;
    }
    footer>span:last-child {
        margin-left:auto;
    }
}

@media(max-width:360px) {
    .search-card {
        padding:12px;
    }
    .mode-switch span {
        font-size:11px;
    }
    .field {
        grid-template-columns:44px minmax(0,1fr);
        padding:6px 8px;
    }
    .flight-price {
        grid-template-columns:1fr;
        gap:8px;
    }
    .ticket-button {
        grid-column:1;
        grid-row:auto;
        margin-top:4px;
    }
}

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

body.dark {
    --bg:#17211d;
    --surface:#202d26;
    --ink:#edf3e9;
    --muted:#a0b29f;
    --line:#354637;
    --soft:#31452b;
    --accent-ink:#bcdf94;
    --on-accent:#243522;
    --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23a0b29f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme:dark;
}

html:has(body.dark) {
    background:#17211d;
}

body.dark h1 span {
    color:#a5c18a;
}

body.dark h1 .headline-desktop,body.dark h1 .headline-mobile {
    color:var(--ink);
}

body.dark .primary-button,body.dark .best .ticket-button {
    color:var(--on-accent);
}

body.dark .hero-note {
    background:#283927;
}

body.dark .hero-note p,body.dark .hero-note strong {
    color:#bdcfad;
}

body.dark input[type=date] {
    color-scheme:dark;
}

body.dark .notice {
    background:#363420;
    border-color:#595235;
    color:#e8ddb4;
}

body.dark .notice.error {
    background:#3c2625;
    border-color:#69403c;
    color:#f1b7ae;
}

/* Inside Telegram the app header replaces the hero, and the native MainButton replaces the form button. */
.tg .hero,
.main-button #search-button {
    display:none;
}

@media(max-width:600px), (max-height:500px) and (pointer:coarse) {
    /* "С"/"По" captions stay for screen readers; the dash between dates already reads as a range. */
    .date-pair label {
        font-size:0;
        gap:0;
    }
}

/* City picker: bottom sheet on phones, centered dialog on desktop. */
.field input[readonly] {
    cursor:pointer;
    caret-color:transparent;
}

body.sheet-open {
    overflow:hidden;
}

.city-sheet {
    position:fixed;
    inset:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(16,24,20,.42);
}

.city-sheet[hidden] {
    display:none;
}

.city-sheet-panel {
    display:flex;
    flex-direction:column;
    width:min(480px,100%);
    height:min(640px,80vh);
    background:var(--surface);
    color:var(--ink);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
}

.city-sheet-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 16px 8px 20px;
}

.city-sheet-head h2 {
    margin:0;
    font-size:20px;
    font-weight:650;
}

.city-sheet-close {
    width:44px;
    height:44px;
    font-size:26px;
    line-height:1;
    border:0;
    border-radius:50%;
    background:var(--soft);
    color:var(--muted);
}

.city-search {
    margin:4px 16px 8px;
    min-height:46px;
    padding:0 14px;
    font-size:16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--bg);
    color:var(--ink);
    outline:none;
    -webkit-appearance:none;
    appearance:none;
}

.city-search:focus,.city-search:focus-visible {
    border-color:var(--accent-ink);
    outline:none;
}

.city-list {
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 8px max(16px,env(safe-area-inset-bottom));
}

.city-group h3 {
    position:sticky;
    top:0;
    z-index:1;
    margin:0;
    padding:12px 12px 6px;
    font-size:12px;
    font-weight:650;
    color:var(--muted);
    background:var(--surface);
}

.city-option {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:48px;
    padding:0 12px;
    border:0;
    border-radius:10px;
    background:transparent;
    font-size:16px;
    text-align:left;
}

.city-option small {
    font-size:13px;
    font-weight:600;
    color:var(--muted);
    letter-spacing:.5px;
}

.city-option:active,.city-option:hover {
    background:var(--soft);
}

.city-option.selected {
    background:var(--soft);
    font-weight:600;
}

.city-option.selected small {
    color:var(--accent-ink);
}

.city-empty {
    padding:24px 12px;
    color:var(--muted);
    font-size:14px;
}

@media(max-width:600px) {
    .city-sheet {
        align-items:flex-end;
        padding:0;
    }
    .city-sheet-panel {
        width:100%;
        height:calc(100% - max(12px,env(safe-area-inset-top)));
        border-radius:18px 18px 0 0;
    }
}

/* Shown instead of the form when the page is opened outside Telegram. */
.telegram-gate {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.telegram-gate[hidden],.saved-link[hidden] {
    display:none;
}

.telegram-gate h2 {
    margin:0 0 8px;
    font-size:22px;
    font-weight:650;
}

.telegram-gate p {
    margin:0;
    color:var(--muted);
    line-height:1.5;
}

.telegram-gate p strong {
    color:var(--ink);
}

.telegram-gate .primary-button {
    text-decoration:none;
    color:var(--on-accent);
    flex-shrink:0;
}

@media(max-width:600px) {
    .telegram-gate {
        flex-direction:column;
        align-items:stretch;
    }
}

/* ---------- Inside Telegram: tabs instead of a long landing page ---------- */
.tg .header,.tg .how-it-works,.tg footer,.tg .saved-section .section-head {
    display:none;
}

.tabs {
    position:sticky;
    top:0;
    z-index:5;
    padding:10px 0;
    background:var(--bg);
}

.tabs[hidden] {
    display:none;
}

.tabs-track {
    display:flex;
    gap:4px;
    padding:3px;
    border-radius:11px;
    background:rgba(118,118,128,.14);
}

.tab {
    flex:1;
    min-height:38px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--muted);
    font-size:15px;
    font-weight:600;
}

.tab[aria-pressed=true] {
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 1px 3px rgba(0,0,0,.12);
}

.tab span {
    display:inline-block;
    min-width:20px;
    margin-left:4px;
    padding:1px 6px;
    border-radius:10px;
    background:var(--soft);
    color:var(--accent-ink);
    font-size:12px;
}

body.tg[data-tab=saved] #search-form,
body.tg[data-tab=saved] #results-section,
body.tg[data-tab=saved] #notice,
body.tg[data-tab=search] #saved-section {
    display:none;
}

.tg .saved-section {
    padding-top:4px;
}

.tg .results-section {
    padding-top:20px;
    scroll-margin-top:64px;
}

/* ---------- Compact result rows (phones) ---------- */
.flight-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 12px;
    align-items:center;
    gap:12px;
    padding:14px 12px 14px 16px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    color:inherit;
    text-decoration:none;
}

.flight-row.best {
    border-color:#afce8e;
}

.flight-row:active {
    background:var(--soft);
}

.flight-row-main {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:0;
}

.flight-row-main strong {
    font-size:17px;
    font-weight:600;
}

.flight-row-meta {
    max-width:100%;
    font-size:13px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.flight-row-badge {
    font-size:11px;
    font-weight:650;
    color:var(--accent-ink);
    background:var(--soft);
    border-radius:6px;
    padding:2px 7px;
}

.flight-row-price {
    text-align:right;
}

.flight-row-price strong {
    display:block;
    font-size:19px;
    font-weight:650;
    white-space:nowrap;
}

.flight-row-price small {
    font-size:11px;
    color:var(--muted);
}

.flight-row-go {
    font-size:24px;
    line-height:1;
    color:var(--muted);
}

@media(max-width:600px), (max-height:500px) and (pointer:coarse) {
    .flight-list {
        gap:8px;
    }
}

/* ---------- Loading skeleton ---------- */
.skeleton-list {
    display:grid;
    gap:8px;
}

.skeleton-row {
    display:grid;
    grid-template-columns:1fr 84px;
    gap:10px 16px;
    align-content:center;
    height:78px;
    padding:0 16px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
}

.skeleton-row span {
    height:12px;
    border-radius:6px;
    background:linear-gradient(90deg,var(--line) 0%,var(--soft) 50%,var(--line) 100%);
    background-size:200% 100%;
    animation:skeleton 1.2s linear infinite;
}

.skeleton-row span:nth-child(1) {
    width:55%;
    height:15px;
}

.skeleton-row span:nth-child(2) {
    grid-column:2;
    grid-row:1/3;
    height:20px;
    align-self:center;
}

.skeleton-row span:nth-child(3) {
    width:80%;
}

@keyframes skeleton {
    from { background-position:200% 0; }
    to { background-position:-200% 0; }
}

@media(prefers-reduced-motion:reduce) {
    .skeleton-row span {
        animation:none;
    }
}