* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
            color: #fff;
        }
        
        .header {
            background: rgba(0,0,0,0.3);
            padding: 15px 20px;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .header h1 {
            font-size: 1.5em;
            color: #4ecdc4;
            margin: 0;
            line-height: 1.4;
        }
        
        .header-controls {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-basis: 100%;
            width: 100%;
        }

        /* PC/スマホ共通: 「最低乗継 +xx 分」を縦中央で揃える */
        .conn-inline {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #aaa;
            white-space: nowrap;
            line-height: 1;
        }

        .conn-inline .conn-label,
        .conn-inline .conn-unit {
            line-height: 1;
        }

        @media (min-width: 769px) {
            .conn-inline .conn-label,
            .conn-inline .conn-unit {
                position: relative;
                top: 2px;
            }
        }
        
        .header-controls label {
            font-size: 1em;
            color: #aaa;
        }
        
        .header-controls input[type="date"] {
            padding: 8px 12px;
            border-radius: 5px;
            border: none;
            background: #2a2a4a;
            color: #fff;
            -webkit-text-fill-color: #fff;
            caret-color: #fff;
            font-size: 1.1em;
            padding-right: 44px;
            box-sizing: border-box;
        }

        /* Android/Chrome: date入力の内部表示（年/月/日）を白で固定 */
        .header-controls input[type="date"]::-webkit-datetime-edit,
        .header-controls input[type="date"]::-webkit-datetime-edit-text,
        .header-controls input[type="date"]::-webkit-datetime-edit-year-field,
        .header-controls input[type="date"]::-webkit-datetime-edit-month-field,
        .header-controls input[type="date"]::-webkit-datetime-edit-day-field {
            color: #fff;
            -webkit-text-fill-color: #fff;
            opacity: 1;
        }

        .header-controls input[type="date"]::-webkit-date-and-time-value {
            color: #fff;
            -webkit-text-fill-color: #fff;
            opacity: 1;
        }
        
        .mode-toggle {
            display: flex;
            gap: 10px;
        }
        
        .mode-btn {
            padding: 8px 16px;
            border: 2px solid #4ecdc4;
            background: transparent;
            color: #4ecdc4;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1em;
        }
        
        .mode-btn.active {
            background: #4ecdc4;
            color: #1a1a2e;
        }
        
        .zoom-controls {
            display: flex;
            gap: 5px;
        }
        
        .zoom-btn {
            padding: 6px 12px;
            border: 1px solid #4ecdc4;
            background: transparent;
            color: #4ecdc4;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9em;
        }
        
        .zoom-btn:hover {
            background: rgba(78, 205, 196, 0.2);
        }
        
        .zoom-btn.active {
            background: #4ecdc4;
            color: #1a1a2e;
        }
        
        /* マップ左上ボタン群 */
        .map-top-buttons {
            position: absolute;
            top: 10px;
            left: 10px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            z-index: 100;
        }

        /* 地図内フロート操作（例: 全空港） */
        .map-overlay-controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 120;
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .map-overlay-controls .all-airports-control {
            background: rgba(0, 0, 0, 0.55);
            border: 1px solid rgba(78, 205, 196, 0.35);
            padding: 6px 10px;
            border-radius: 10px;
        }

        .map-overlay-controls .all-airports-control input {
            transform: scale(1.05);
        }

        .work-header-right {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .work-header-btn {
            padding: 4px 10px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(0,0,0,0.25);
            color: #fff;
            cursor: pointer;
            font-weight: bold;
            line-height: 1;
            font-size: 0.95em;
        }

        .work-header-btn:hover {
            background: rgba(255,255,255,0.08);
        }

        .work-header-btn.clear {
            border-color: rgba(255,255,255,0.25);
        }

        .work-header-btn.share {
            border-color: rgba(155, 89, 182, 0.6);
            background: rgba(155, 89, 182, 0.18);
        }

        .work-header-btn.share:hover {
            background: rgba(155, 89, 182, 0.28);
        }

        
        
        .map-btn {
            padding: 6px 10px;
            width: 5em;
            min-width: 0;
            height: auto;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.85em;
            text-align: center;
            background: rgba(78, 205, 196, 0.9);
            color: #1a1a2e;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            transition: all 0.2s;
        }
        
        .map-btn:hover {
            background: #4ecdc4;
            transform: scale(1.1);
        }
        
        .map-btn.retry {
            background: rgba(255, 107, 107, 0.9);
            color: #fff;
        }
        
        .map-btn.retry:hover {
            background: #ff6b6b;
        }
        
        /* フライト一覧ヘッダ内日付 */
        .header-date-input {
            padding: 6px 10px;
            border-radius: 4px;
            border: none;
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
        }
        
        .header-date-input::-webkit-calendar-picker-indicator {
            filter: invert(1);
            cursor: pointer;
        }
        
        .header-date-input:hover {
            background: rgba(255, 255, 255, 0.25);
        }
        
        .nav-links {
            display: flex;
            gap: 15px;
            margin-left: auto;
            align-self: flex-start;
        }
        
        .nav-links a {
            color: #aaa;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 5px;
            transition: all 0.3s;
        }
        
        .nav-links a:hover {
            color: #4ecdc4;
            background: rgba(78, 205, 196, 0.2);
        }

        /* 乗継案内リンクをリンクっぽく（強調） */
        .nav-links a.nav-cta {
            color: #4ecdc4;
            border: 1px solid rgba(78, 205, 196, 0.6);
            background: rgba(78, 205, 196, 0.08);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .nav-links a.nav-cta:hover {
            background: rgba(78, 205, 196, 0.18);
        }

        /* Header hamburger menu (MAP/ITINERARY/ROUTEで揃える) */
        .nav-menu {
            margin-left: auto;
            align-self: flex-start;
            position: relative;
            z-index: 2500;
        }

        .nav-menu-btn {
            width: 44px;
            height: 40px;
            border-radius: 10px;
            border: 1px solid rgba(78, 205, 196, 0.35);
            background: rgba(0,0,0,0.25);
            color: #4ecdc4;
            cursor: pointer;
            font-size: 1.35em;
            font-weight: bold;
            line-height: 1;
        }

        .nav-menu-btn:hover {
            background: rgba(78, 205, 196, 0.12);
        }

        .nav-menu-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 180px;
            padding: 8px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(0,0,0,0.85);
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }

        .nav-menu-dropdown a {
            display: block;
            padding: 10px 12px;
            border-radius: 10px;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            white-space: nowrap;
        }

        .nav-menu-dropdown a:hover {
            background: rgba(78, 205, 196, 0.18);
            color: #4ecdc4;
        }

        /* 会社フィルタ: 全社ラベル（デフォルト=PCサイズ） */
        .airline-all-label {
            font-size: 1.2em;
        }

        /* ヘッダーのセレクト: 背景と文字色のコントラスト改善 */
        .header-select {
            background: #2a2a4a;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 8px 12px;
            font-size: 1.05em;
        }
        
        .main-container {
            display: flex;
            height: calc(100vh - 70px);
        }
        
        .map-container {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        /* 候補フライト（スマホ時にPOPUP化） */
        /* (ボタン無し) 発着決定で自動POPUP */

        .panel-header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .panel-close-btn {
            display: none;
            padding: 4px 10px;
            border: 1px solid rgba(78, 205, 196, 0.6);
            background: rgba(78, 205, 196, 0.08);
            color: #4ecdc4;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            line-height: 1;
        }

        .panel-close-btn:hover {
            background: rgba(78, 205, 196, 0.18);
        }

        .mobile-modal-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.65);
            z-index: 2550;
        }

        /* スマホ: 2段（地図 → 選択済み/カレンダ）。候補フライトはPOPUP */
        @media (max-width: 768px) {
            .header {
                position: sticky;
                top: 0;
                z-index: 4200;
                flex-wrap: wrap;
                gap: 8px;
                padding-left: 12px;
                padding-right: 12px;
            }

            /* ヘッダコントロールをコンパクトに（方向/最低乗継/会社） */
            .header-controls {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                gap: 6px 6px;
                align-items: center;
            }

            .header-controls .header-select {
                padding: 6px 8px;
                font-size: 0.98em;
            }

            .mode-select {
                max-width: 6.9em;
            }

            .conn-inline {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                color: #aaa;
                font-size: 1em;
                white-space: nowrap;
            }

            /* スマホ: 「最低乗継」ラベルは「分」と同じサイズに */
            .conn-inline .conn-label {
                font-size: 0.82em !important;
            }

            .conn-inline .conn-unit {
                color: #aaa;
                font-size: 0.82em !important;
            }

            #connection-offset {
                max-width: 5.0em;
                padding-left: 8px;
                padding-right: 8px;
            }

            /* 航空会社ボタンも少し詰める（A+J+他が改行しにくくする） */
            #airline-dropdown-btn {
                padding: 4px 8px;
            }

            .airline-filter-header {
                gap: 6px;
            }

            /* 航空会社POPUPは画面幅内に収める */
            #airline-dropdown-menu {
                max-width: calc(100vw - 16px);
            }

            /* スマホ: 乗継表示と次の出発時刻の間を少し詰める */
            .work-item.connection-item {
                padding-bottom: 6px;
            }

            /* 全空港は地図内フロートへ（ヘッダー側は非表示） */
            .header-controls .all-airports-control {
                display: none !important;
            }

            /* 地図内フロート（全空港）はスマホのみ表示 */
            .map-overlay-controls {
                display: flex;
            }

            .airline-filter-header {
                gap: 8px;
            }

            .airline-all-label {
                font-size: 0.9em !important;
            }

            .main-container {
                flex-direction: column;
                height: auto;
                min-height: calc(100vh - 70px);
            }

            .map-container {
                flex: none;
                height: 50vh;
            }

            /* スマホ: 空港間の線を少し細く */
            .route-line {
                stroke-width: 0.28 !important;
            }

            .route-line.active {
                stroke-width: 0.55 !important;
            }

            .completed-route {
                stroke-width: 0.22 !important;
            }

            /* スマホ: フライト一覧はオーバーレイせず常時表示（確実に表示） */
            #flight-panel {
                display: flex;
                background: rgba(78, 205, 196, 0.06);
                border-top: 2px solid rgba(78, 205, 196, 0.25);
                border-radius: 12px;
            }

            /* スマホ: 選択済みフライトは色味を変えて区切りを明確に */
            .work-panel {
                background: rgba(255, 193, 7, 0.06);
                border-top: 2px solid rgba(255, 193, 7, 0.25);
                border-radius: 12px;
                margin-top: 10px;
            }

            #flight-panel.is-open {
                position: static;
                top: auto;
                left: auto;
                right: auto;
                bottom: auto;
                z-index: auto;
                background: transparent;
                border: none;
                border-radius: 0;
                box-shadow: none;
                width: auto;
                max-width: none;
            }

            /* タイトル（出発/到着）を少し狭く・省略可能に */
            #flight-panel .panel-header {
                min-width: 0;
                gap: 8px;
                height: 28px;
                padding: 5px 8px;
                font-size: 0.95em;
            }

            #flight-panel .panel-header {
                background: rgba(255, 193, 7, 0.14);
            }

            .work-panel .panel-header {
                background: rgba(255, 193, 7, 0.14);
            }

            #flight-list-title {
                min-width: 0;
                flex: 1 1 auto;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            #flight-panel .header-date-input {
                width: 148px;
                max-width: 52vw;
                padding: 4px 8px;
                font-size: 1.0em;
            }

            /* 背景オーバーレイは使わない */
            #flight-panel-backdrop {
                display: none !important;
            }

            /* 閉じるボタン（オーバーレイ廃止のため非表示） */
            #flight-panel-close {
                display: none !important;
            }

            /* ズームクリア/やり直し: オーバーレイしないよう地図エリア内に配置 */
            :root {
                --map-mobile-bottom-bar-height: 0px;
            }

            .map-top-buttons {
                position: absolute;
                left: 10px;
                right: 10px;
                bottom: 10px;
                top: auto;
                flex-direction: row;
                justify-content: space-between;
                gap: 12px;
                z-index: 120;
            }

            .map-top-buttons .map-btn {
                flex: 1 1 0;
                width: auto;
                padding: 6px 10px;
                font-size: 0.9em;
                border-radius: 12px;
            }

            /* work-panel下の旧ボタン列は使わない（ヘッダ右へ移動） */
            .work-panel .btn-row {
                display: none;
            }

            /* 下部固定バーは使わないので余白は最小 */
            .side-panel {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
            }

            .side-panel {
                width: 100%;
                flex: none;
                flex-direction: column;
                border-left: none;
                border-top: 1px solid rgba(78, 205, 196, 0.2);
            }

            .panel-section {
                border-right: none;
            }

            .airline-label-long { display: none; }
            .airline-label-short { display: inline; }

            /* 選択済みフライト（work-panel）が右側で見切れないように */
            .work-list {
                overflow-x: hidden;
            }

            .btn-row {
                flex-wrap: wrap;
            }

            .work-item {
                width: 100%;
                min-width: 0;
            }

            .work-item .flight-info {
                min-width: 0;
            }

            .work-item .flight-detail {
                overflow-wrap: anywhere;
            }

            .work-item .time-info {
                min-width: 0;
                flex-wrap: wrap;
            }

            .work-item .time-info .calendar-icons {
                margin-right: 0;
            }

            /* スマホ: 遅%ボタンと重ならないよう「…」は右端側へ戻す */
            .work-item.flight-item .flight-menu-btn {
                right: 4px;
            }

            .work-item.flight-item .flight-menu {
                right: 4px;
            }

            .calendar-event-item .collapse-btn {
                right: 28px;
            }
        }

        /* デスクトップでは地図内フロートは非表示（ヘッダーに表示） */
        @media (min-width: 769px) {
            /* 全空港: スマホ同様に地図左上フロートで表示（ヘッダー側は非表示） */
            .header-controls .all-airports-control {
                display: none !important;
            }

            .map-overlay-controls {
                display: flex;
            }

            /* ズームクリア/選択やり直し: 地図エリア右上に縦並び */
            .map-top-buttons {
                left: auto;
                right: 10px;
                align-items: flex-end;
            }

            /* ボタン文言は必ず1行（折り返し防止） */
            .map-top-buttons .map-btn {
                width: auto;
                min-width: 7.2em;
                white-space: nowrap;
            }

            /* PC: 選択済みヘッダを2行固定（1行目=選択済み + 区間数 / 2行目=ボタン列） */
            .work-panel .panel-header {
                display: grid;
                grid-template-columns: 1fr max-content;
                grid-template-rows: auto auto;
                column-gap: 10px;
                row-gap: 8px;
                align-items: center;
                height: auto;
                padding-top: 8px;
                padding-bottom: 8px;
            }

            .work-panel .panel-header > span {
                grid-column: 1;
                grid-row: 1;
                line-height: 1.15;
                white-space: nowrap;
                min-width: 0;
            }

            /* 右側ブロック（区間数 + ボタン列） */
            .work-panel .work-header-right {
                grid-column: 2;
                grid-row: 1 / span 2;
                display: grid;
                grid-template-columns: repeat(8, max-content);
                grid-template-rows: auto auto;
                column-gap: 10px;
                row-gap: 8px;
                justify-content: end;
                align-items: center;
            }

            /* 1行目: 区間数は右寄せ */
            .work-panel .work-header-right > #work-count {
                grid-column: 1 / -1;
                grid-row: 1;
                justify-self: end;
                white-space: nowrap;
            }

            /* 2行目: ボタン列（折り返さない） */
            .work-panel .work-header-right > button {
                grid-row: 2;
                white-space: nowrap;
            }
        }

        /* デスクトップ: ANA/JAL表記 */
        @media (min-width: 769px) {
            .airline-label-short { display: none; }
        }
        
        .japan-map {
            width: 100%;
            height: 100%;
        }
        
        .airport-marker {
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .airport-marker circle {
            fill: #4ecdc4;
            stroke: #fff;
            stroke-width: 0.2;
        }
        
        .airport-marker[data-major="false"] circle {
            r: 0.2;
            stroke-width: 0.12;
        }
        
        .airport-marker.selectable circle {
            fill: #ff6b6b;
            animation: pulse 1.5s infinite;
        }
        
        .airport-marker.selected circle {
            fill: #ffe66d;
            stroke: #fff;
            stroke-width: 0.5;
        }
        
        .airport-marker text {
            fill: #fff;
            font-size: 1.2px;
            font-weight: bold;
            pointer-events: auto;
        }
        
        .airport-marker[data-major="false"] text {
            font-size: 1.1px;
        }
        
        .airport-label {
            fill: #fff;
            font-size: 1.8px;
            font-weight: bold;
            pointer-events: none;
            text-anchor: middle;
        }

        .airport-label.departure {
            fill: #ffe66d;
        }

        .airport-label.arrival {
            fill: #ff6b6b;
        }

        .airport-badge {
            pointer-events: none;
        }

        .airport-badge circle {
            stroke: #fff;
            stroke-width: 0.25;
        }

        .airport-badge text {
            fill: #1a1a2e;
            font-size: 1.25px;
            font-weight: bold;
            text-anchor: middle;
            dominant-baseline: middle;
        }

        .airport-badge.departure circle {
            fill: #ffe66d;
        }

        .airport-badge.arrival circle {
            fill: #ff6b6b;
        }
        
        .airport-marker.disabled circle {
            fill: #555;
            opacity: 0.5;
        }
        
        .airport-marker text {
            fill: #fff;
            font-size: 1.5px;
            font-weight: bold;
            pointer-events: auto;
        }

        .airport-marker.hidden {
            display: none;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .route-line {
            stroke: rgba(155, 89, 182, 0.95);
            stroke-width: 0.4;
            fill: none;
            opacity: 0;
            stroke-linecap: round;
        }
        
        .route-line.animating {
            animation: drawLine 0.5s ease-out forwards;
        }
        
        .route-line.fading-out {
            animation: fadeOutLine 0.3s ease-out forwards;
        }
        
        @keyframes drawLine {
            0% {
                stroke-dashoffset: var(--line-length);
                opacity: 0.4;
            }
            100% {
                stroke-dashoffset: 0;
                opacity: 0.75;
            }
        }
        
        @keyframes fadeOutLine {
            0% { opacity: 0.6; }
            100% { opacity: 0; }
        }
        
        .route-line.active {
            stroke: #ffe66d;
            stroke-width: 0.6;
            opacity: 1;
        }
        
        /* デスクトップのみ右パネルを固定幅にする（スマホでは100%を優先） */
        @media (min-width: 769px) {
            .side-panel {
                width: 580px;
                background: rgba(0,0,0,0.4);
                display: flex;
                flex-direction: row;
                font-size: 0.85em;
            }
        }
        
        .japan-map {
            transition: viewBox 1s ease-in-out;
        }
        
        .panel-section {
            border-right: 1px solid rgba(255,255,255,0.1);
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .panel-section:last-child {
            border-right: none;
        }
        
        .panel-header {
            padding: 8px 10px;
            background: rgba(78, 205, 196, 0.2);
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1em;
            height: 42px;
            box-sizing: border-box;
        }
        
        .panel-content {
            padding: 5px;
            flex: 1;
            overflow-y: auto;
        }
        
        .flight-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .flight-item {
            background: linear-gradient(135deg, rgba(78, 205, 196, 0.2) 0%, rgba(78, 205, 196, 0.05) 100%);
            border-radius: 8px;
            border-left: 3px solid #4ecdc4;
            padding: 4px 12px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        .flight-item:hover {
            background: linear-gradient(135deg, rgba(78, 205, 196, 0.3) 0%, rgba(78, 205, 196, 0.15) 100%);
        }

        .flight-item.selected-flight {
            border-left-color: #2196f3;
            box-shadow: inset 0 0 0 1px rgba(33, 150, 243, 0.25);
        }
        
        /* grayed: 乗継時間的に間に合わないが、色はそのまま選択可能 */
        .flight-item.grayed {
            opacity: 0.5 !important;
            filter: grayscale(30%);
        }

        /* cancelled: 欠航（赤バッジ）＋グレーアウト */
        .flight-item.cancelled {
            /* grayscale を掛けると欠航バッジも灰色になるため、opacity+背景で行を落とす */
            opacity: 0.45 !important;
            border-left-color: #555;
            background: linear-gradient(135deg, rgba(120, 120, 120, 0.18) 0%, rgba(120, 120, 120, 0.06) 100%);
        }
        
        .seat-icons {
            display: flex;
            gap: 3px;
            margin-top: 4px;
        }
        
        .seat-icon {
            font-size: 0.7em;
            padding: 1px 4px;
            border-radius: 3px;
            font-weight: bold;
        }
        
        .seat-icon.first {
            background: #ffd700;
            color: #333;
        }
        
        .seat-icon.premium {
            background: #0065a8;
            color: #fff;
        }
        
        .seat-icon.class-j {
            background: #dc000c;
            color: #fff;
        }
        
        .seat-icon.upgrade {
            background: #ff9800;
            color: #fff;
        }
        
        .seat-icon.extra {
            background: #9c27b0;
            color: #fff;
        }
        
        .flight-info {
            flex: 1;
        }
        
        .flight-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .flight-item .flight-no {
            font-weight: bold;
            font-size: 1.2em;
        }
        
        .seat-icons-inline {
            display: inline-flex;
            gap: 2px;
            margin-left: 4px;
            vertical-align: middle;
        }
        
        /* 航空会社カラーは airline-colors.css で定義 */

        .availability-line {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.9em;
            white-space: nowrap;
        }
        
        .acquired-time {
            font-size: 0.8em;
            color: #888;
        }
        
        .flight-time {
            font-size: 1.1em;
            color: #aaa;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2px;
        }
        
        /* Airport style (パタパタ風) - 2行レイアウト維持 */
        .flight-list.airport-style {
            gap: 1px;
            background: #0a0a0a;
            padding: 4px;
            border-radius: 4px;
        }
        
        /* パタパタアニメーション */
        @keyframes flipIn {
            0% {
                transform: rotateX(-90deg);
                opacity: 0;
            }
            100% {
                transform: rotateX(0deg);
                opacity: 1;
            }
        }
        
        .flight-list.airport-style .flight-item {
            background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
            border-radius: 2px;
            padding: 4px 10px;
            border-left: 3px solid #333;
            font-family: 'Share Tech Mono', 'Roboto Mono', 'Consolas', monospace;
            transform-origin: top center;
            animation: flipIn 0.2s ease-out forwards;
            opacity: 0;
        }
        
        .flight-list.airport-style .flight-item:hover {
            background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%);
            border-left-color: #4ecdc4;
        }

        .flight-list.airport-style .flight-item.selected-flight {
            border-left-color: #2196f3;
            background: linear-gradient(180deg, #1d1f2a 0%, #0d0f14 100%);
        }
        
        /* airport-style grayed: 透明度のみで色は維持 */
        
        .flight-list.airport-style .flight-no {
            font-size: 1.1em;
            font-weight: bold;
            letter-spacing: 0px;
            text-transform: uppercase;
        }
        
        .flight-list.airport-style .flight-time {
            color: #fff;
            font-size: 1.1em;
            font-weight: bold;
            letter-spacing: 0px;
            text-shadow: 0 0 3px rgba(255,255,255,0.3);
            white-space: nowrap;
        }
        
        .flight-list.airport-style .availability-line {
            font-size: 0.85em;
        }
        
        .flight-list.airport-style .acquired-time {
            font-size: 0.75em;
        }
        
        .flight-list.airport-style .status-available {
            background: #1a3d1a;
            color: #4ecdc4;
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .flight-list.airport-style .status-full {
            background: transparent;
            color: #ff6b6b;
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .flight-list.airport-style .status-unknown {
            background: #2a2a2a;
            color: #888;
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .flight-list.airport-style .status-inferred {
            background: #3d2a00;
            color: #ffa500;
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .flight-list.airport-style .status-planned {
            background: #1a3040;
            color: #87ceeb;
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .flight-list.airport-style .status-scheduled {
            background: #1a3d1a;
            color: #7fbf7f;
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .flight-list.airport-style .status-actual {
            background: transparent;
            color: #4ecdc4;
            padding: 1px 4px;
            border-radius: 2px;
        }

        .flight-list.airport-style .status-actual-ontime {
            background: transparent;
            color: #ffcc00;
            padding: 1px 4px;
            border-radius: 2px;
        }

        .flight-list.airport-style .status-delayed {
            background: transparent;
            color: #ff6b6b;
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .flight-list.airport-style .status-waitlist {
            background: #3d3d00;
            color: #ffcc00;
            padding: 1px 4px;
            border-radius: 2px;
        }

        .flight-list.airport-style .status-cancel {
            background: #dc000c;
            color: #fff;
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .flight-status {
            text-align: right;
        }
        
        .status-available {
            color: #4ecdc4;
            font-weight: bold;
        }
        
        .status-full {
            color: #ff6b6b;
            font-weight: bold;
        }
        
        .status-unknown {
            color: #fff;
        }
        
        .status-inferred {
            color: #ffa500;
            font-weight: bold;
        }
        
        .status-planned {
            color: #87ceeb;
            font-weight: bold;
        }
        
        .status-scheduled {
            color: #7fbf7f;
            font-weight: bold;
        }
        
        .status-actual {
            color: #4ecdc4;
            font-weight: bold;
        }

        .status-actual-ontime {
            color: #ffcc00;
            font-weight: bold;
        }

        .status-delayed {
            color: #ff6b6b;
            font-weight: bold;
        }
        
        .status-waitlist {
            color: #ffcc00;
            font-weight: bold;
        }

        .status-cancel {
            background: #dc000c;
            color: #fff;
            padding: 1px 4px;
            border-radius: 3px;
            font-weight: bold;
        }
        
        .work-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .work-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }
        
        .work-item {
            margin-bottom: 0;
            position: relative;
            display: flex;
            gap: 4px;
            padding: 2px 4px;
            align-items: flex-start;
        }
        
        .work-item.flight-item {
            background: linear-gradient(135deg, rgba(78, 205, 196, 0.12) 0%, rgba(78, 205, 196, 0.04) 100%);
            border-radius: 8px;
            border-left: 3px solid #4ecdc4;
            padding: 8px 10px 20px 10px;
            margin-bottom: 8px;
            align-items: flex-start;
        }
        
        .work-item.connection-item {
            padding: 1px 4px 12px 4px;
            margin-top: 0;
            align-items: flex-start !important;
        }
        
        .work-item.short-connection {
            margin-top: 8px;
        }
        
        .work-item .timeline {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 25px;
        }
        
        .work-item.connection-item .timeline {
            align-items: flex-start !important;
        }
        
        .work-item .timeline-time {
            font-size: calc(1.1em + 1.33px);
            color: #aaa;
            margin-bottom: 2px;
        }
        
        .work-item .timeline-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid;
            background: #1a1a2e;
            flex-shrink: 0;
        }
        
        .work-item .timeline-line {
            width: 2px;
            flex: 1;
            min-height: 10px;
            background: currentColor;
        }
        
        .work-item.connection-item .timeline-line {
            display: none;
        }
        
        .work-item.connection-item .timeline-dot {
            display: none;
        }
        
        .work-item.connection-item .timeline-time {
            margin-bottom: 0;
            align-self: flex-start;
        }
        
        .work-item .timeline.airline-jal .timeline-dot,
        .work-item .timeline.airline-jal .timeline-line {
            border-color: #dc000c;
            color: #dc000c;
        }
        
        .work-item .timeline.airline-ana .timeline-dot,
        .work-item .timeline.airline-ana .timeline-line {
            border-color: #0065a8;
            color: #0065a8;
        }
        
        /* その他の航空会社タイムラインカラーは airline-colors.css で定義 */
        
        .work-item .timeline.connection .timeline-dot,
        .work-item .timeline.connection .timeline-line {
            border-color: #666;
            color: #666;
        }
        
        /* 航空会社カラーは airline-colors.css で定義 */
        
        .work-item .flight-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0px;
        }

        .work-item.flight-item .flight-info {
            padding-right: 78px;
        }
        
        .work-item.connection-item .flight-info {
            flex: 0 0 auto;
            align-items: flex-start !important;
            justify-content: flex-start !important;
        }
        
        .work-item .connection-time {
            font-size: calc(0.8em + 1.33px);
            color: #999;
            align-self: flex-start !important;
        }
        
        .work-item .flight-detail {
            font-size: calc(1.15em + 1.33px);
            font-weight: bold;
        }

        .delay-stats-btn {
            border: 1px solid rgba(78, 205, 196, 0.55);
            background: rgba(78, 205, 196, 0.12);
            color: #bff7f2;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.72rem;
            line-height: 1.2;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
        }

        .work-item.flight-item > .delay-stats-btn {
            position: absolute;
            top: 8px;
            right: 42px;
            z-index: 5;
        }

        .delay-stats-btn:hover {
            background: rgba(78, 205, 196, 0.22);
            border-color: rgba(78, 205, 196, 0.8);
        }

        .delay-stats-popup-backdrop {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            background: rgba(0, 0, 0, 0.55);
        }

        .delay-stats-popup {
            width: min(390px, 100%);
            max-height: min(80vh, 640px);
            overflow: auto;
            border: 1px solid rgba(78, 205, 196, 0.35);
            border-radius: 8px;
            background: #14233a;
            color: #fff;
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
        }

        .delay-stats-popup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        }

        .delay-stats-popup-title {
            font-weight: 700;
            color: #fff;
            font-size: 0.95rem;
            line-height: 1.25;
        }

        .delay-stats-popup-close {
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            padding: 4px 9px;
            cursor: pointer;
        }

        .delay-stats-popup-body {
            padding: 10px 12px 12px;
        }

        .delay-stats-cancel {
            margin-bottom: 8px;
            color: #fff;
            font-size: 0.9rem;
            font-weight: 700;
        }

        .delay-stats-weekdays {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.86rem;
        }

        .delay-stats-weekdays th,
        .delay-stats-weekdays td {
            padding: 5px 4px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            text-align: right;
        }

        .delay-stats-weekdays th:first-child,
        .delay-stats-weekdays td:first-child {
            text-align: left;
        }
        
        .work-item .time-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .work-item .time-info.terminal-gate-info {
            font-size: calc(0.82em + 1.33px);
            line-height: 1.25;
            color: #cddae0;
        }

        .work-item .time-info.terminal-gate-note {
            font-size: calc(0.74em + 1.33px);
            line-height: 1.25;
            color: #bfd6df;
        }
        
        .work-item .time-info .calendar-icons {
            display: flex;
            gap: 4px;
            margin-left: auto;
            margin-right: 28px;
        }
        
        .calendar-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75em;
            font-weight: bold;
            background: rgba(78, 205, 196, 0.2);
            border: 1px solid #4ecdc4;
            border-radius: 3px;
            color: #4ecdc4;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .calendar-icon:hover {
            background: rgba(78, 205, 196, 0.4);
            transform: scale(1.1);
        }
        
        /* カレンダイベントカード（展開時が標準） */
        .calendar-event-item {
            background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
            border-left: none;
            position: relative;
            transition: all 0.25s ease-out;
            overflow: visible;
            padding: 4px 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .calendar-event-item .timeline {
            display: none;
        }
        
        .calendar-event-item .event-time {
            font-size: 1em;
            color: #ffc107;
            font-weight: bold;
            white-space: nowrap;
            min-width: 45px;
        }
        
        .calendar-event-item .event-title {
            font-size: 0.95em;
            font-weight: normal;
            color: #ffc107;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }
        
        .calendar-event-item .event-duration {
            display: none;
        }
        
        /* 折りたたみボタン */
        .calendar-event-item .collapse-btn {
            position: absolute;
            right: 4px;
            top: 2px;
            background: rgba(255, 193, 7, 0.2);
            border: 1px solid #ffc107;
            color: #ffc107;
            width: 16px;
            height: 16px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 10px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .calendar-event-item .collapse-btn:hover {
            background: rgba(255, 193, 7, 0.4);
        }
        
        /* ツールチップ */
        .calendar-event-tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.9);
            color: #fff;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 0.85em;
            white-space: nowrap;
            z-index: 2000;
            pointer-events: none;
            display: none;
        }
        
        /* 折りたたまれた状態（薄い線） */
        .calendar-event-item.collapsed {
            min-height: 20px;
            height: 20px;
            padding: 0;
            margin: 1px 0;
            background: transparent;
            opacity: 1;
            border-left: none;
            border-radius: 0;
            position: relative;
        }
        
        .calendar-event-item.collapsed::before {
            content: '';
            position: absolute;
            left: 0;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            height: 2px;
            background: rgba(78, 205, 196, 0.15);
        }
        
        .calendar-event-item.collapsed .timeline {
            display: none;
        }
        
        .calendar-event-item.collapsed .event-time,
        .calendar-event-item.collapsed .event-title {
            display: none;
        }
        
        .calendar-event-item.collapsed .collapse-btn {
            width: 16px;
            height: 16px;
            font-size: 10px;
            top: 2px;
            right: 4px;
            background: rgba(255, 193, 7, 0.2);
            border: 1px solid #ffc107;
            color: #ffc107;
        }
        
        .calendar-event-item.collapsed .flight-info {
            display: none;
        }
        
        .work-item .route {
            font-size: 0.85em;
            color: #666;
        }
        
        .work-item .remove-btn {
            position: absolute;
            right: 4px;
            top: 4px;
            background: #ff6b6b;
            border: none;
            color: #fff;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 12px;
            line-height: 1;
        }

        .work-item .flight-menu-btn {
            position: absolute;
            right: 4px;
            top: 4px;
            padding: 3px 5px;
            background: rgba(78, 205, 196, 0.2);
            border: 1px solid #4ecdc4;
            border-radius: 4px;
            color: #4ecdc4;
            cursor: pointer;
            font-size: 0.95em;
            line-height: 1;
            min-width: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .work-item .flight-import-badge {
            position: absolute;
            right: 6px;
            top: 36px;
            padding: 2px 6px;
            border-radius: 999px;
            background: rgba(255, 193, 7, 0.16);
            border: 1px solid rgba(255, 193, 7, 0.42);
            color: #ffd36b;
            font-size: calc(0.68em + 1.33px);
            font-weight: bold;
            line-height: 1.35;
            z-index: 1;
        }

        .work-item .flight-accrual-corner {
            position: absolute;
            right: 10px;
            bottom: 8px;
            font-size: calc(0.78em + 1.33px);
            font-weight: bold;
            line-height: 1;
            color: #9df4d8;
            text-align: right;
            white-space: nowrap;
        }

        .work-item .flight-menu-btn.needs-airprice-save {
            background: rgba(255, 107, 107, 0.16);
            border-color: rgba(255, 107, 107, 0.5);
            color: #ff9b9b;
        }

        .work-item .flight-menu-btn.is-open {
            background: rgba(116, 137, 255, 0.28);
            border-color: rgba(163, 182, 255, 0.92);
            color: #e6eeff;
            box-shadow: 0 0 0 2px rgba(116, 137, 255, 0.18);
        }

        .work-item .flight-menu-btn.needs-airprice-save.is-open {
            background: rgba(255, 107, 107, 0.28);
            border-color: rgba(255, 153, 153, 0.92);
            color: #ffd5d5;
            box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.14);
        }

        .work-item .flight-menu-btn:hover {
            background: rgba(78, 205, 196, 0.4);
            transform: scale(1.05);
        }

        .work-item .flight-menu-btn.needs-airprice-save:hover {
            background: rgba(255, 107, 107, 0.3);
        }

        .work-item .flight-menu {
            position: absolute;
            right: 4px;
            top: 34px;
            min-width: 180px;
            padding: 6px;
            border-radius: 10px;
            border: 1px solid rgba(144, 166, 255, 0.42);
            background: rgba(38, 46, 82, 0.96);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
            z-index: 2600;
        }

        .work-item .flight-menu button {
            width: 100%;
            text-align: left;
            padding: 10px 10px;
            border-radius: 8px;
            border: none;
            background: rgba(255, 255, 255, 0.02);
            color: #eef3ff;
            cursor: pointer;
            font-size: 0.9em;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .work-item .flight-menu button + button {
            margin-top: 6px;
        }

        .work-item .flight-menu button:hover {
            background: rgba(120, 144, 255, 0.24);
            color: #ffffff;
        }

        .work-item .flight-menu-btn.needs-airprice-save + .flight-menu button:nth-child(2),
        .work-item .flight-menu-btn.needs-airprice-save + .flight-menu button:nth-child(3) {
            color: #ffb1b1;
        }

        .work-item .flight-menu-btn.needs-airprice-save + .flight-menu button:nth-child(2):hover,
        .work-item .flight-menu-btn.needs-airprice-save + .flight-menu button:nth-child(3):hover {
            background: rgba(255, 107, 107, 0.14);
            color: #ffd8d8;
        }
        
        .work-item:last-child .timeline-line {
            display: none;
        }
        
        .summary-bar {
            margin-top: 0;
            padding: 6px 10px;
            background: rgba(78, 205, 196, 0.15);
            font-size: 1.05em;
        }
        
        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .summary-row + .summary-row {
            margin-top: 2px;
        }
        
        .summary-item {
            display: flex;
            gap: 4px;
            align-items: center;
        }
        
        .summary-label {
            color: #aaa;
            font-size: 1em;
        }
        
        .summary-value {
            color: #4ecdc4;
            font-weight: bold;
            font-size: 1em;
        }
        
        .flight-duration {
            font-size: 0.8em;
            color: #888;
            margin-left: 8px;
        }
        
        .btn-row {
            display: flex;
            gap: 8px;
            margin: 10px;
        }
        
        .clear-btn {
            padding: 6px 12px;
            background: #666;
            border: none;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }
        
        .clear-btn:hover {
            background: #888;
        }
        
        .complete-btn {
            padding: 6px 12px;
            background: #4ecdc4;
            border: none;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            font-weight: bold;
        }
        
        .complete-btn:hover {
            background: #3dbdb5;
        }
        
        .complete-btn:disabled {
            background: #555;
            cursor: not-allowed;
        }
        
        .share-btn {
            padding: 6px 10px;
            background: #9b59b6;
            border: none;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }
        
        .share-btn:hover {
            background: #8e44ad;
        }
        
        .share-btn:disabled {
            background: #555;
            cursor: not-allowed;
        }
        
        /* 共有モーダル */
        .share-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        
        .share-modal-content {
            background: #2a2a4a;
            padding: 25px;
            border-radius: 15px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
        }
        
        .share-modal-content h2 {
            color: #4ecdc4;
            margin-bottom: 15px;
            font-size: 1.3em;
        }
        
        .share-modal-note {
            color: #f39c12;
            font-size: 0.85em;
            margin-bottom: 15px;
            padding: 8px 12px;
            background: rgba(243, 156, 18, 0.1);
            border-left: 3px solid #f39c12;
            border-radius: 4px;
        }
        
        .share-output {
            flex: 1;
            background: #1a1a2e;
            border: 1px solid #4ecdc4;
            border-radius: 8px;
            padding: 15px;
            color: #fff;
            font-family: 'Share Tech Mono', monospace;
            font-size: 0.85em;
            line-height: 1.5;
            overflow-y: auto;
            max-height: 400px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        #flight-list-container,
        #work-list {
            -webkit-user-select: none;
            user-select: none;
        }
        
        .share-modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            justify-content: flex-end;
        }
        
        .share-modal-buttons button {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
        }
        
        .copy-btn {
            background: #4ecdc4;
            color: #1a1a2e;
            font-weight: bold;
        }
        
        .copy-btn:hover {
            background: #3dbdb5;
        }
        
        .close-share-btn {
            background: #666;
            color: #fff;
        }
        
        .close-share-btn:hover {
            background: #888;
        }

        .itinerary-btn {
            background: rgba(78, 205, 196, 0.18);
            border: 1px solid rgba(78, 205, 196, 0.7);
            color: #4ecdc4;
            font-weight: bold;
        }

        .itinerary-btn:hover {
            background: rgba(78, 205, 196, 0.28);
        }

        .excel-btn {
            background: rgba(243, 156, 18, 0.18);
            border: 1px solid rgba(243, 156, 18, 0.7);
            color: #f39c12;
            font-weight: bold;
        }

        .excel-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .excel-btn:hover:not(:disabled) {
            background: rgba(243, 156, 18, 0.28);
        }

        .itinerary-output {
            flex: 1;
            background: #1a1a2e;
            border: 1px solid #4ecdc4;
            border-radius: 8px;
            padding: 10px;
            color: #fff;
            overflow-y: auto;
            max-height: 400px;
        }

        .itinerary-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            font-size: 0.9em;
        }

        .itinerary-table th,
        .itinerary-table td {
            border: 1px solid rgba(78, 205, 196, 0.25);
            padding: 6px 8px;
            vertical-align: top;
            word-break: break-word;
        }

        .itinerary-date-row th {
            background: rgba(78, 205, 196, 0.12);
            color: #4ecdc4;
            text-align: left;
            font-weight: bold;
            border-color: rgba(78, 205, 196, 0.35);
        }

        .itinerary-time {
            width: 4.6em;
            white-space: nowrap;
            text-align: center;
            color: rgba(255, 255, 255, 0.9);
            font-family: 'Share Tech Mono', monospace;
        }

        .itinerary-detail {
            width: auto;
        }

        .itinerary-subrow td {
            color: rgba(255, 255, 255, 0.85);
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.06);
        }

        /* 計算設定モーダル（PP/FOP計算の基準） */
        .calc-settings-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            justify-content: center;
            align-items: center;
            z-index: 2100;
        }

        .calc-settings-content {
            background: #2a2a4a;
            padding: 20px;
            border-radius: 15px;
            width: 90%;
            max-width: 520px;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .calc-settings-content h2 {
            color: #4ecdc4;
            margin: 0 0 6px 0;
            font-size: 1.2em;
        }

        .calc-settings-row {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .calc-settings-row label {
            color: #aaa;
            font-size: 0.95em;
            min-width: 6em;
        }

        .calc-settings-row select {
            background: #1a1a2e;
            border: 1px solid rgba(255,255,255,0.2);
            color: #fff;
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 1em;
        }

        .calc-settings-note {
            color: #f39c12;
            font-size: 0.85em;
            padding: 8px 12px;
            background: rgba(243, 156, 18, 0.1);
            border-left: 3px solid #f39c12;
            border-radius: 4px;
            line-height: 1.4;
        }

        .calc-settings-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 6px;
        }

        .calc-settings-buttons button {
            padding: 10px 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
        }

        .calc-settings-save {
            background: #4ecdc4;
            color: #1a1a2e;
            font-weight: bold;
        }

        .calc-settings-cancel {
            background: #666;
            color: #fff;
        }
        
        /* 日付ヘッダ */
        .date-header {
            background: rgba(78, 205, 196, 0.1);
            padding: 8px 12px;
            margin: 8px 0 4px 0;
            border-left: 3px solid #4ecdc4;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.05em;
        }
        
        .date-header-text {
            color: #4ecdc4;
            font-weight: bold;
        }

        .date-header-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .date-cal-provider-badge {
            padding: 2px 7px;
            background: rgba(78, 205, 196, 0.15);
            border: 1px solid rgba(78, 205, 196, 0.4);
            color: #4ecdc4;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.78em;
            font-weight: bold;
            line-height: 1.6;
        }
        
        .calendar-fetch-btn {
            padding: 4px 10px;
            background: rgba(78, 205, 196, 0.3);
            border: 1px solid #4ecdc4;
            color: #4ecdc4;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85em;
            transition: all 0.2s;
        }
        
        .calendar-fetch-btn:hover {
            background: rgba(78, 205, 196, 0.5);
        }
        
        /* 翌日ボタン */
        .next-day-btn {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            background: rgba(78, 205, 196, 0.15);
            border: 1px dashed #4ecdc4;
            color: #4ecdc4;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.95em;
            transition: all 0.2s;
        }
        
        .next-day-btn:hover {
            background: rgba(78, 205, 196, 0.25);
            border-style: solid;
        }
        
        /* ガイドボタン */
        .guide-button {
            position: absolute;
            top: 100px;
            right: 10px;
            padding: 8px 16px;
            background: rgba(78, 205, 196, 0.95);
            color: #1a1a2e;
            border: none;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
            cursor: pointer;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: all 0.3s;
            animation: guideButtonFadeIn 0.5s ease-in;
        }
        
        .guide-button:hover {
            background: rgba(78, 205, 196, 1);
            transform: scale(1.05);
        }
        
        .guide-button.fade-out {
            animation: guideButtonFadeOut 1s ease-out forwards;
        }
        
        @keyframes guideButtonFadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes guideButtonFadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
                pointer-events: none;
            }
        }
        
        /* ガイドポップアップ */
        .guide-popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }
        
        .guide-popup-content {
            background: #1a1a2e;
            padding: 30px;
            border-radius: 15px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
            animation: popupFadeIn 0.3s ease-in;
        }
        
        @keyframes popupFadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        .guide-popup h2 {
            color: #4ecdc4;
            margin-bottom: 20px;
            font-size: 1.5em;
            text-align: center;
        }
        
        .guide-section {
            margin-bottom: 20px;
        }
        
        .guide-section h3 {
            color: #4ecdc4;
            font-size: 1.1em;
            margin-bottom: 10px;
            border-bottom: 1px solid rgba(78, 205, 196, 0.3);
            padding-bottom: 5px;
        }
        
        .guide-section ul {
            list-style: none;
            padding-left: 0;
        }
        
        .guide-section li {
            padding: 6px 0;
            color: #ccc;
            line-height: 1.5;
        }
        
        .guide-section li:before {
            content: '• ';
            color: #4ecdc4;
            font-weight: bold;
            margin-right: 8px;
        }
        
        .guide-close-btn {
            display: block;
            margin: 20px auto 0;
            padding: 10px 30px;
            background: #4ecdc4;
            color: #1a1a2e;
            border: none;
            border-radius: 20px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .guide-close-btn:hover {
            background: #3dbdb5;
            transform: scale(1.05);
        }
        
        /* 飛行アニメーション用 */
        .flight-plane {
            font-size: 4px;
            fill: #4ecdc4;
            filter: drop-shadow(0 0 2px #4ecdc4);
        }
        
        .completed-route {
            stroke: #4ecdc4;
            stroke-width: 0.4;
            stroke-dasharray: none;
            opacity: 0;
        }
        
        .completed-route.animating {
            animation: drawLineCompleted 1s ease-out forwards;
        }
        
        .airport-comment {
            position: absolute;
            background: rgba(255, 230, 109, 0.95);
            color: #333;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.85em;
            font-weight: bold;
            white-space: nowrap;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            opacity: 0;
            transform: translateY(-10px);
            animation: commentFadeIn 0.5s ease-out forwards;
            pointer-events: none;
        }
        
        .airport-comment::before {
            content: '💬 ';
        }
        
        @keyframes commentFadeIn {
            0% { opacity: 0; transform: translateY(-10px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        
        .airport-comment.fading-out {
            animation: commentFadeOut 0.3s ease-out forwards;
        }
        
        @keyframes commentFadeOut {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(10px); }
        }
        
        @keyframes drawLineCompleted {
            0% {
                stroke-dashoffset: var(--line-length);
                opacity: 0.3;
            }
            100% {
                stroke-dashoffset: 0;
                opacity: 0.6;
            }
        }
        
        .instruction {
            text-align: center;
            padding: 20px;
            color: #aaa;
            font-size: 0.9em;
        }

        .single-airport-link {
            color: #aaa;
            text-decoration: underline;
            cursor: pointer;
        }

        .single-airport-link:hover {
            color: #ddd;
        }

        .single-airport-actions {
            display: flex;
            justify-content: center;
            padding: 0 20px 20px;
        }

        .single-airport-btn {
            width: 100%;
            max-width: 320px;
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid rgba(78, 205, 196, 0.55);
            background: rgba(78, 205, 196, 0.15);
            color: #4ecdc4;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.15s ease;
        }

        .single-airport-btn:hover {
            background: rgba(78, 205, 196, 0.25);
        }

        .single-airport-btn:active {
            transform: scale(0.99);
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #aaa;
        }
        
        .no-data {
            text-align: center;
            padding: 20px;
            color: #888;
        }

        /* 空港情報ツールチップ */
        .airport-tooltip {
            position: absolute;
            background: rgba(0,0,0,0.9);
            padding: 8px 12px;
            border-radius: 5px;
            font-size: 0.9em;
            pointer-events: none;
            z-index: 1000;
            display: none;
        }
        
        .reset-btn {
            padding: 6px 12px;
            border: 1px solid #ff6b6b;
            background: transparent;
            color: #ff6b6b;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9em;
        }
        
        .reset-btn:hover {
            background: rgba(255, 107, 107, 0.2);
        }
        
        /* 日付選択モーダル */
        .date-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }
        
        .date-modal-content {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            border: 3px solid #4ecdc4;
            box-shadow: 0 10px 50px rgba(78, 205, 196, 0.5);
            max-width: calc(100vw - 32px);
            box-sizing: border-box;
        }
        
        .date-modal-content h2 {
            color: #4ecdc4;
            font-size: 2em;
            margin-bottom: 30px;
        }
        
        .date-modal-content input[type="date"] {
            padding: 15px 20px;
            border-radius: 10px;
            border: 2px solid #4ecdc4;
            background: #2a2a4a;
            color: #fff;
            -webkit-text-fill-color: #fff;
            caret-color: #fff;
            font-size: 1.2em;
            font-weight: bold;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin-bottom: 30px;
            width: 300px;
            padding-right: 48px;
            box-sizing: border-box;
        }

        /* Android/Chrome: date入力の内部表示（年/月/日）を白で固定 */
        .date-modal-content input[type="date"]::-webkit-datetime-edit,
        .date-modal-content input[type="date"]::-webkit-datetime-edit-text,
        .date-modal-content input[type="date"]::-webkit-datetime-edit-year-field,
        .date-modal-content input[type="date"]::-webkit-datetime-edit-month-field,
        .date-modal-content input[type="date"]::-webkit-datetime-edit-day-field {
            color: #fff;
            -webkit-text-fill-color: #fff;
            opacity: 1;
        }

        .date-modal-content input[type="date"]::-webkit-date-and-time-value {
            color: #fff;
            -webkit-text-fill-color: #fff;
            opacity: 1;
        }
        
        .date-modal-content input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
            cursor: pointer;
            margin: 0;
            padding: 0;
        }

        /* PC: 枠だけ小さく（フォントは据え置き） */
        @media (min-width: 769px) {
            .date-modal-content {
                padding: 20px;
                border-radius: 16px;
            }

            .date-modal-content h2 {
                margin-bottom: 18px;
            }

            .date-modal-content input[type="date"] {
                width: 220px;
                padding: 12px 16px;
                padding-right: 48px;
                margin-bottom: 18px;
            }

            .date-modal-content button {
                padding: 12px 28px;
            }
        }
        
        .date-modal-content button {
            padding: 15px 40px;
            border-radius: 10px;
            border: none;
            background: #4ecdc4;
            color: #1a1a2e;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .date-modal-content button:hover {
            background: #45b8ad;
            transform: scale(1.05);
        }
        
        .date-modal-content button:disabled {
            background: #666;
            cursor: not-allowed;
            transform: none;
        }

        /* スマホ: 日付ダイアログを画面内に収める */
        @media (max-width: 768px) {
            .date-modal-content {
                padding: 18px;
                border-radius: 14px;
                width: calc(100% - 32px);
                max-width: 320px;
                border-width: 2px;
                box-sizing: border-box;
            }

            .date-modal-content h2 {
                font-size: 1.1em;
                margin-bottom: 14px;
            }

            .date-modal-content input[type="date"] {
                width: 100%;
                max-width: 100%;
                padding: 10px 12px;
                padding-right: 48px;
                border-radius: 10px;
                border-width: 1px;
                font-size: 1.05em;
                font-weight: bold;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin-bottom: 14px;
                box-sizing: border-box;
                -webkit-text-fill-color: #fff;
                caret-color: #fff;
            }

            .date-modal-content button {
                width: 100%;
                padding: 10px 16px;
                border-radius: 10px;
                font-size: 1.05em;
            }
        }
        /* 遅延チェックボックス PC/スマホ切り替え */
        .delay-label-sp { display: none; }
        .delay-label-pc { display: inline; }
        @media (max-width: 768px) {
            .delay-label-sp { display: inline; }
            .delay-label-pc { display: none; }
        }

        /* 預け荷物チェックボックス PC/スマホ切り替え */
        .baggage-label-sp { display: none; }
        .baggage-label-pc { display: inline; }
        @media (max-width: 768px) {
            .baggage-label-sp { display: inline; }
            .baggage-label-pc { display: none; }
        }

        /* 取得時刻 右寄せ */
        .flight-source-time {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
        }

        /* 実績時間（遅延時に括弧内表示） */
        .actual-time {
            font-size: 0.9em;
            margin-left: 4px;
        }

        .actual-time-delayed {
            color: #ff6b6b;
        }

        .actual-time-ontime {
            color: #ffcc00;
        }

        /* +ボタン（スマホ用詳細条件トグル） */
        .btn-advanced-toggle {
            display: none;
            background: transparent;
            border: 1px solid rgba(78, 205, 196, 0.35);
            color: #4ecdc4;
            border-radius: 6px;
            height: 36px;
            width: 36px;
            padding: 0;
            font-size: 1.3em;
            font-weight: bold;
            cursor: pointer;
            align-items: center;
            justify-content: center;
        }

        .btn-advanced-toggle:hover {
            background: rgba(78, 205, 196, 0.1);
        }

        /* スマホ用詳細条件ポップアップ */
        .map-advanced-popup-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 3500;
        }

        .map-advanced-popup-backdrop.is-open {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 80px;
        }

        .map-advanced-popup {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 1px solid rgba(78, 205, 196, 0.3);
            border-radius: 12px;
            padding: 16px;
            width: 90%;
            max-width: 280px;
        }

        .map-advanced-popup h3 {
            color: #4ecdc4;
            font-size: 1em;
            margin: 0 0 12px 0;
            text-align: center;
        }

        .map-advanced-popup .popup-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            color: #ccc;
            font-size: 0.95em;
        }

        .map-advanced-popup .popup-row label {
            flex: 0 0 auto;
            min-width: 80px;
        }

        .map-advanced-popup .popup-row select {
            flex: 1 1 auto;
            max-width: 120px;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid rgba(78, 205, 196, 0.3);
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            font-size: 0.95em;
        }

        .map-advanced-popup .popup-row select option {
            background: #1a1a2e;
            color: #fff;
        }

        .map-advanced-popup .popup-row-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            color: #ccc;
            font-size: 0.95em;
        }

        .map-advanced-popup .popup-row-checkbox input[type="checkbox"] {
            width: 18px;
            height: 18px;
        }

        .map-advanced-popup .popup-close-btn {
            display: block;
            width: 100%;
            margin-top: 12px;
            padding: 14px;
            border-radius: 8px;
            border: 1px solid rgba(78, 205, 196, 0.5);
            background: rgba(78, 205, 196, 0.2);
            color: #4ecdc4;
            font-weight: bold;
            font-size: 1em;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(78, 205, 196, 0.3);
        }

        .map-advanced-popup .popup-close-btn:hover,
        .map-advanced-popup .popup-close-btn:active {
            background: rgba(78, 205, 196, 0.35);
        }

        /* PC: 詳細条件はインライン表示、+ボタン非表示 */
        .map-pc-only {
            display: inline-flex;
        }

        @media (max-width: 768px) {
            /* スマホ: PC用インライン詳細条件は非表示 */
            .map-pc-only {
                display: none !important;
            }
            /* スマホ: +ボタン表示 */
            .btn-advanced-toggle {
                display: inline-flex;
            }
        }

        /* スマホ: 文字サイズとタップ領域の下限を引き上げる */
        @media (max-width: 768px) {
            body {
                font-size: calc(20px + var(--mobile-font-delta-main, 0px));
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .map-container {
                height: 37vh;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .header {
                gap: 5px;
                padding: 7px 6px 6px 6px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .header-controls {
                gap: 4px 4px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .header-controls .header-select,
            :root[data-mobile-control-shape-profile="ar186-tight"] .header-controls input[type="date"],
            :root[data-mobile-control-shape-profile="ar186-tight"] #airline-dropdown-btn,
            :root[data-mobile-control-shape-profile="ar186-tight"] .work-header-btn,
            :root[data-mobile-control-shape-profile="ar186-tight"] .map-top-buttons .map-btn,
            :root[data-mobile-control-shape-profile="ar186-tight"] .btn-advanced-toggle {
                min-height: 36px;
                padding-top: 6px;
                padding-bottom: 6px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .map-top-buttons {
                left: 6px;
                right: 6px;
                bottom: 4px;
                gap: 6px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] #flight-panel,
            :root[data-mobile-control-shape-profile="ar186-tight"] .work-panel {
                border-radius: 10px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .work-panel {
                margin-top: 6px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] #flight-panel .panel-header,
            :root[data-mobile-control-shape-profile="ar186-tight"] .work-panel .panel-header {
                min-height: 34px;
                padding-top: 4px;
                padding-bottom: 4px;
                gap: 6px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] #flight-panel .header-date-input {
                min-height: 34px;
                padding-top: 6px;
                padding-bottom: 6px;
                width: 142px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .side-panel {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .panel-content {
                padding-top: 4px;
                padding-bottom: 4px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-item,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .flight-item {
                padding-top: 8px;
                padding-bottom: 8px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-info.flight-info-compact {
                gap: 3px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-compact-line {
                gap: 3px 8px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-compact-time,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-time,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .flight-time {
                line-height: 1.15;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style {
                gap: 1px;
                padding-top: 3px;
                padding-bottom: 3px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-compact-code,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-compact-time,
            :root[data-mobile-control-shape-profile="ar186-tight"] .availability-line,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-compact-status-wrap,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-compact-meta {
                line-height: 1.15;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .availability-line,
            :root[data-mobile-control-shape-profile="ar186-tight"] .seat-icons-inline {
                gap: 3px;
            }

            :root[data-mobile-control-shape-profile="ar186-tight"] .seat-icon,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-available,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-full,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-unknown,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-inferred,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-planned,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-scheduled,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-actual,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-actual-ontime,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-delayed,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-waitlist,
            :root[data-mobile-control-shape-profile="ar186-tight"] .flight-list.airport-style .status-cancel {
                padding-top: 1px;
                padding-bottom: 1px;
            }

            .header {
                padding-left: 8px;
                padding-right: 8px;
            }

            .header h1 {
                font-size: calc(1.95rem + var(--mobile-font-delta-main, 0px));
            }

            .header-controls {
                gap: calc(6px + var(--mobile-gap-delta, 0px)) calc(6px + var(--mobile-gap-delta, 0px));
            }

            .header-controls .header-select,
            .header-controls input[type="date"],
            #airline-dropdown-btn,
            #flight-panel .header-date-input,
            .work-header-btn,
            .map-top-buttons .map-btn,
            .btn-advanced-toggle {
                min-height: calc(48px + var(--mobile-control-height-delta, 0px));
                padding: calc(11px + var(--mobile-control-pad-y-delta, 0px)) calc(13px + var(--mobile-control-pad-x-delta, 0px));
                font-size: calc(20px + var(--mobile-font-delta-main, 0px));
                line-height: 1.2;
            }

            .conn-inline,
            .delay-check,
            .baggage-check,
            .map-overlay-controls .all-airports-control span,
            .header-controls label,
            .airline-all-label {
                font-size: calc(17px + var(--mobile-font-delta-small, 0px)) !important;
            }

            .map-container {
                height: 42vh;
            }

            #flight-panel .panel-header,
            .work-panel .panel-header {
                min-height: calc(46px + var(--mobile-control-height-delta, 0px));
                height: auto;
                padding: calc(10px + var(--mobile-control-pad-y-delta, 0px)) 12px;
                font-size: calc(18px + var(--mobile-font-delta-small, 0px));
            }

            #flight-list-title,
            .work-panel .panel-header > span,
            #work-count {
                font-size: calc(18px + var(--mobile-font-delta-small, 0px));
            }

            .panel-content,
            .work-list {
                padding: calc(8px + var(--mobile-section-pad-y-delta, 0px)) calc(6px + var(--mobile-section-pad-x-delta, 0px));
            }

            .instruction,
            .no-data {
                padding: calc(24px + var(--mobile-section-pad-y-delta, 0px)) calc(14px + var(--mobile-section-pad-x-delta, 0px));
                font-size: calc(18px + var(--mobile-font-delta-small, 0px));
                line-height: 1.6;
            }

            .summary-bar {
                padding: calc(12px + var(--mobile-section-pad-y-delta, 0px)) calc(14px + var(--mobile-section-pad-x-delta, 0px));
                font-size: calc(18px + var(--mobile-font-delta-small, 0px));
            }

            .summary-label {
                font-size: calc(16px + var(--mobile-font-delta-small, 0px));
            }

            .summary-value {
                font-size: calc(20px + var(--mobile-font-delta-main, 0px));
            }

            .flight-item,
            .flight-list.airport-style .flight-item {
                padding: calc(10px + var(--mobile-card-pad-y-delta, 0px)) calc(12px + var(--mobile-card-pad-x-delta, 0px));
                border-radius: 10px;
            }

            .flight-item .flight-no,
            .flight-list.airport-style .flight-no {
                font-size: calc(22px + var(--mobile-font-delta-main, 0px));
            }

            .flight-info.flight-info-compact {
                width: 100%;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .flight-compact-line {
                display: flex;
                flex-wrap: wrap;
                gap: calc(6px + var(--mobile-gap-delta, 0px)) calc(10px + var(--mobile-gap-delta, 0px));
                align-items: center;
                width: 100%;
                min-width: 0;
            }

            .flight-compact-code {
                min-width: 0;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: calc(23px + var(--mobile-font-delta-main, 0px));
                font-weight: 700;
            }

            .flight-compact-time {
                white-space: nowrap;
                font-size: calc(21px + var(--mobile-font-delta-main, 0px));
                color: #fff;
            }

            .flight-compact-status-wrap {
                margin-left: auto;
                display: inline-flex;
                align-items: center;
                white-space: nowrap;
            }

            .flight-compact-meta {
                font-size: calc(15px + var(--mobile-font-delta-small, 0px));
                line-height: 1.4;
                color: #b8c3cf;
                overflow-wrap: anywhere;
            }

            .flight-time,
            .flight-list.airport-style .flight-time {
                font-size: calc(20px + var(--mobile-font-delta-main, 0px));
                line-height: 1.4;
            }

            .flight-list.airport-style .flight-route,
            .availability-line,
            .acquired-time {
                font-size: calc(17px + var(--mobile-font-delta-small, 0px));
                line-height: 1.5;
            }

            .work-item.flight-item {
                padding: calc(12px + var(--mobile-card-pad-y-delta, 0px)) calc(12px + var(--mobile-card-pad-x-delta, 0px)) calc(20px + var(--mobile-card-pad-y-delta, 0px)) calc(12px + var(--mobile-card-pad-x-delta, 0px));
                margin-bottom: calc(10px + var(--mobile-gap-delta, 0px));
                border-radius: 10px;
            }

            .work-item.connection-item {
                padding: 3px 3px calc(12px + var(--mobile-card-pad-y-delta, 0px)) 3px;
            }

            .work-item .timeline {
                min-width: 34px;
            }

            .work-item.flight-item .flight-info {
                padding-right: 72px;
            }

            .work-item .timeline-time {
                font-size: calc(20px + var(--mobile-font-delta-main, 0px));
                line-height: 1.2;
            }

            .work-item .flight-detail {
                font-size: calc(21px + var(--mobile-font-delta-main, 0px));
                line-height: 1.3;
            }

            .work-item .connection-time,
            .work-item .time-info.terminal-gate-info {
                font-size: calc(17px + var(--mobile-font-delta-small, 0px));
                line-height: 1.5;
            }

            .work-item .time-info.terminal-gate-note,
            .work-item .route {
                font-size: calc(16px + var(--mobile-font-delta-small, 0px));
                line-height: 1.5;
            }

            .delay-stats-btn,
            .calendar-icon,
            .work-item .flight-import-badge,
            .work-item .flight-accrual-corner {
                font-size: calc(16px + var(--mobile-font-delta-small, 0px));
            }

            .work-item .flight-menu-btn {
                width: 36px;
                height: calc(36px + var(--mobile-control-height-delta, 0px));
                font-size: calc(20px + var(--mobile-font-delta-main, 0px));
            }

            .map-top-buttons {
                left: 8px;
                right: 8px;
                bottom: 8px;
                gap: calc(8px + var(--mobile-gap-delta, 0px));
            }

            .work-item .flight-menu button {
                padding: calc(12px + var(--mobile-control-pad-y-delta, 0px)) calc(14px + var(--mobile-control-pad-x-delta, 0px));
                font-size: calc(18px + var(--mobile-font-delta-small, 0px));
            }

            .map-advanced-popup .popup-row label,
            .map-advanced-popup .popup-row-checkbox,
            .map-advanced-popup .popup-row select,
            .map-advanced-popup .popup-close-btn {
                font-size: calc(18px + var(--mobile-font-delta-small, 0px));
            }
        }