/* 画面全体をピタッと固定し、スクロールやズームを完全に禁止する設定 */
        html, body {
            width: 100%;
            height: 100dvh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: fixed; /* ★最重要: 画面が枠外にスクロールするのを防ぐ */
            top: 0;
            left: 0;
            touch-action: manipulation; /* ダブルタップによる画面拡大を防ぐ */
            -webkit-text-size-adjust: 100%;
        }

        /* 既存のbodyのデザイン設定 */
        body {
            font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            flex-direction: column;
        }

        /* --- 汎用入力フォーム用（管理者画面などで使用するため残す） --- */
        input[type="text"], input[type="password"], input[type="time"] {
            width: 100%;
            padding: 14px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 16px;
            background-color: #f8f9fa;
        }

            input[type="text"]:focus, input[type="password"]:focus, input[type="time"]:focus {
                outline: none;
                border-color: #1A73E8;
                background-color: #fff;
            }

        /* --- ログイン画面のデザイン --- */
        #login-container {
            background-color: white;
            padding: 40px 30px;
            border-radius: 24px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.06);
            width: 85%;
            max-width: 360px;
            margin: auto;
            text-align: center;
            /* 🎯修正（重大バグ対応）：ページ全体（html, body）がoverflow: hiddenで
               固定されているため、この中の表示内容（進捗バー等）が増えて画面の
               高さを超えると、はみ出た部分がそのまま見えなくなって（切れて）
               しまっていた。画面に収まらない場合は、この枠内だけでスクロール
               できるようにする。dvhは実際に見えている高さを正しく反映する単位。 */
            max-height: 90vh;
            max-height: 90dvh;
            overflow-y: auto;
            box-sizing: border-box;
        }

            #login-container input[type="text"],
            #login-container input[type="password"] {
                width: 100%;
                padding: 16px 20px;
                margin: 8px 0;
                border: none;
                border-radius: 12px;
                box-sizing: border-box;
                font-size: 16px; /* ★ 16px に変更 */
                background-color: #f3f4f6;
                color: #333;
                transition: all 0.2s;
            }

                #login-container input[type="text"]:focus,
                #login-container input[type="password"]:focus {
                    outline: 2px solid #2563eb;
                    background-color: #fff;
                }

            #login-container .checkbox-container {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 20px 0;
                font-size: 14px;
                color: #4b5563;
                cursor: pointer;
            }

                #login-container .checkbox-container input[type="checkbox"] {
                    margin-right: 10px;
                    width: 20px;
                    height: 20px;
                    accent-color: #2563eb;
                    cursor: pointer;
                }

            #login-container .login-btn {
                width: 100%;
                padding: 16px;
                background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%);
                color: white;
                border: none;
                border-radius: 30px;
                font-size: 16px;
                font-weight: bold;
                cursor: pointer;
                margin-top: 10px;
                box-shadow: 0 6px 16px rgba(37,99,235,0.45), 0 2px 4px rgba(37,99,235,0.3), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
                transition: transform 0.1s, box-shadow 0.2s, filter 0.2s;
            }

                #login-container .login-btn:hover:not(:disabled) {
                    filter: brightness(1.05);
                    box-shadow: 0 8px 20px rgba(37,99,235,0.5), 0 2px 6px rgba(37,99,235,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
                }

                #login-container .login-btn:active {
                    transform: scale(0.97);
                }

                #login-container .login-btn:disabled {
                    background: #93c5fd;
                    box-shadow: none;
                    cursor: not-allowed;
                }

        #status-message {
            color: #d32f2f;
            margin-top: 15px;
            font-size: 14px;
            word-break: break-all;
            white-space: pre-wrap;
            text-align: center;
            font-weight: bold;
            line-height: 1.5;
        }

        #main-container {
            display: none;
            flex-direction: column;
            height: 100%;
            position: relative;
        }

        #top-bar {
            position: relative;
            background-color: rgba(255,255,255,0.95);
            padding: 10px 16px;
            padding-top: calc(10px + env(safe-area-inset-top));
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            z-index: 9999;
            backdrop-filter: blur(5px);
        }

        /* 🎯変更（ご要望）：名前・コース選択・便・更新・追従・☰を全て1行にまとめる。 */
        #top-bar-row1 {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* 🎯注：以前ここに横画面用の一時的なレイアウト調整が入っていたが、地図が表示
           されなくなる不具合が起きたため、この一連の変更を撤去し安定した状態に戻した
           （原因はCSSコメントの閉じ忘れで#mapのスタイルが丸ごと無効化されていたことで、
           レイアウト変更自体が原因ではなかった）。
           🎯変更（ご要望）：row1・row2の2段構成を廃止し、全て1行（row1）にまとめた。 */

        #welcome-message {
            font-weight: bold;
            color: #333;
            font-size: 15px;
            display: flex;
            align-items: center;
            white-space: nowrap;
            min-width: 0; /* 🎯追加（不具合対応）：これが無いとflexboxで縮められず、名前が
                             長い場合に他のボタン（コース選択など）を押し出してしまっていた。 */
        }

        /* 🎯追加（不具合対応）：名前が長いと、コース選択などの他ボタンを押し出して
           文字が中途半端に切れてしまう不具合への対応。overflow:hiddenにすることで
           flexboxのシュリンク計算上「ここは縮んでよい」領域として扱われるようになり、
           利用可能な幅までは通常表示、収まらない場合だけ自動でゆっくり横スクロール
           （マーキー表示）させる。実際に必要かどうかはJS側（setupNameMarqueeIfNeeded）
           が描画後の実測幅で判定し、必要な時だけ .marquee-scroll-active を付与する。 */
        #user-name-scroll-box {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            vertical-align: bottom;
            max-width: 100%;
        }
        #user-display {
            display: inline-block;
            white-space: nowrap;
        }
        @keyframes marquee-name-scroll {
            0%   { transform: translateX(0); }
            15%  { transform: translateX(0); }
            85%  { transform: translateX(var(--marquee-distance, 0)); }
            100% { transform: translateX(var(--marquee-distance, 0)); }
        }
        #user-display.marquee-scroll-active {
            animation-name: marquee-name-scroll;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }

        #bus-status-badge {
            margin-left: 10px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
            display: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.15);
            transition: background-color 0.3s;
        }

        #bus-picker {
            flex-grow: 1;
            margin: 0 8px 0 12px;
            padding: 10px 15px;
            border-radius: 20px;
            border: 1px solid #ddd;
            font-size: 14px;
            background-color: #f8f9fa;
            color: #333;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px;
        }

        #track-toggle-btn {
            background-color: #1A73E8;
            color: white;
            border: none;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s ease;
            box-shadow: 0 2px 5px rgba(26,115,232,0.4);
            flex-shrink: 0;
            box-sizing: border-box;
        }

            #track-toggle-btn.inactive {
                background-color: #f1f3f4;
                color: #888;
                box-shadow: none;
                border: 1px solid #ddd;
            }

        /* 🎯追加：内部更新ボタン（Firebaseの接続を強制的に張り直し、最新情報を取り直す） */
        #refresh-data-btn {
            background-color: #F1F5F9;
            color: #475569;
            border: 1px solid #E2E8F0;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.4s ease;
            flex-shrink: 0;
            box-sizing: border-box;
        }

        /* 🎯追加（ご要望）：便選択のアイコンだけのコンパクトなボタン。
           🎯修正（ご指摘対応）：3つのボタンの見た目サイズが枠線の有無で微妙にズレていた
           （border:none vs border:1px solidで、box-sizingの既定値content-boxだと実際の
           表示サイズが2px違ってしまう）。3つとも box-sizing: border-box を明示し、枠線が
           あっても無くても正確に38×38pxで揃うようにする。また、間隔は個々のmarginではなく
           親（row1）側のgapだけに統一し、二重に加算されないようにした上で、gap自体も狭くする。
           🎯修正（重大な不具合対応）：このコメントが誤って"-->"（HTMLコメントの閉じ方）で
           終わっていたため、CSSとして閉じられておらず、この後の#run-type-picker-btn・
           #refresh-data-btn.spinning・#menu-btn・#map（！）までが全てコメントの中に
           飲み込まれてしまっていた。特に#mapのflex-grow:1が効かなくなっていたことが、
           地図の表示エリアが正しい高さを持てなかった直接の原因だった。 */
        #run-type-picker-btn {
            background-color: #FFF7E6;
            color: #B7791F;
            border: 1px solid #F6D999;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 0 0 38px;
            box-sizing: border-box;
        }

        /* 🎯追加（ご要望）：未読の「問い合わせ」があるときだけ表示され、目立つよう点滅する
           バッジ（連絡バッジと同じ、名前の横に表示）。見に行かないと気づけなかった問題への対応。
           🎯修正（ご指摘対応）：右側のアイコン列は幅がぎりぎりで収まらないため、ボタンとしての
           見た目（幅・高さ固定）はやめ、連絡バッジと同じ形（インラインの文字バッジ）にした。 */
        @keyframes blinkAttention {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(1.12); }
        }
        .blink-attention {
            animation: blinkAttention 1.1s ease-in-out infinite;
        }

            #refresh-data-btn.spinning {
                transform: rotate(360deg);
            }

        #menu-btn {
            background: transparent;
            border: none;
            font-size: 24px;
            color: #555;
            cursor: pointer;
            padding: 4px;
            flex-shrink: 0;
        }

        #map {
            flex-grow: 1;
            width: 100%;
        }

        /* ボトムシート */
        #bottom-sheet {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(255,255,255,0.98);
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
            transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            z-index: 9000;
            max-height: 65vh;
            backdrop-filter: blur(10px);
        }

            #bottom-sheet.collapsed {
                /* 🎯修正（不具合対応・追加分）：env(safe-area-inset-bottom)は、本来こうした
                   ジェスチャーナビゲーションバー等の余白を正しく報告してくれるはずだが、
                   端末・ブラウザ（特にPWAとしてホーム画面に追加した「ブラウザアプリ版」の
                   スタンドアロン表示）の組み合わせによっては、実際には余白があるのに0を
                   返してしまうことがある（ブラウザ側の既知の実装差）。そのため、この値だけに
                   頼らず、最低24px分は必ず確保するようにする（max()で大きい方を採用）。
                   これにより、env()が正しく報告される端末ではその値がそのまま使われ、
                   0を誤って返す端末でも、一般的なジェスチャーバーの高さに近い最低限の
                   余白は必ず残るため、タップできる範囲が完全に隠れることを防げる。 */
                transform: translateY(calc(100% - 65px - max(env(safe-area-inset-bottom, 0px), 24px)));
            }

        .expanded-sheet {
            top: 0 !important;
            height: 100% !important;
            max-height: 100% !important;
            border-radius: 0 !important;
            z-index: 9999;
            transform: none !important;
        }

        .sheet-header {
            padding: 10px 20px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-bottom: 1px solid #eee;
        }

        .sheet-handle {
            width: 40px;
            height: 5px;
            background: #ccc;
            border-radius: 3px;
            margin-bottom: 12px;
        }

        .sheet-header-content {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* ★修正：狭い画面でボタンの文字が縦に折り返すのを防ぐ */
            gap: 8px;
            flex-wrap: nowrap;
        }

            /* ★追加：ヘッダー右側のボタン類は絶対に縮めない・折り返さない */
            .sheet-header-content .header-actions {
                display: flex;
                gap: 8px;
                align-items: center;
                flex: 0 0 auto;
            }

                .sheet-header-content .header-actions > * {
                    white-space: nowrap;
                    flex: 0 0 auto;
                }

        /* ★追加：タイトルだけを縮ませ、入りきらなければ「…」で省略する */
        .sheet-header-title {
            font-weight: bold;
            color: #333;
            font-size: 15px;
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* ★追加：表示切替トグルボタン */
        #view-toggle-btn {
            background: #1A73E8;
            color: #fff;
            border: none;
            padding: 9px 16px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(26,115,232,0.35);
            transition: transform 0.1s, background-color 0.2s;
        }

            #view-toggle-btn:active {
                transform: scale(0.96);
            }

        .sheet-content {
            overflow-y: auto;
            padding: 0;
            flex-grow: 1;
        }

        /* カードデザイン */
        .card-list {
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: #f0f2f5;
            min-height: 100%;
        }

        .status-card {
            background: white;
            border-radius: 12px;
            padding: 16px 16px 16px 24px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.06);
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 12px;
            cursor: pointer;
            border: 1px solid #f1f3f4;
            transition: background 0.2s;
        }

            .status-card:active {
                background: #f8f9fa;
            }

        .side-line {
            position: absolute;
            left: 0;
            top: 15%;
            bottom: 15%;
            width: 5px;
            border-radius: 0 4px 4px 0;
        }

            .side-line.green {
                background-color: #00BFA5;
            }

            .side-line.red {
                background-color: #FF5252;
            }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .stop-name {
            font-size: 19px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .status-badge {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            background-color: #E8EAF6;
            color: #5C6BC0;
            font-weight: bold;
        }

        .card-times {
            font-size: 17px;
            color: #555;
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .card-times .arrow {
                color: #ccc;
            }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2px;
        }

        .diff-text {
            font-size: 17px;
            color: #555;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .diff-val {
            font-weight: bold;
            color: #333;
        }

        .diff-badge {
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 4px;
            color: white;
            font-weight: bold;
        }

            .diff-badge.early {
                background-color: #F57C00;
            }

            .diff-badge.late {
                background-color: #D32F2F;
            }

            .diff-badge.ontime {
                background-color: #388E3C;
            }

            .diff-badge.passed {
                background-color: #888;
            }

        .btn-cancel {
            background-color: #F57C00;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(245,124,0,0.3);
            transition: transform 0.1s;
        }

            .btn-cancel:active {
                transform: scale(0.95);
            }

        .btn-pass {
            background-color: #fff;
            color: #555;
            border: 1px solid #ccc;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.1s;
        }

            .btn-pass:active {
                background: #f1f3f4;
            }

        .notification-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }

        .notification-label {
            font-size: 11px;
            color: #777;
            font-weight: bold;
            line-height: 1;
        }

        #menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .card-memo {
            font-size: 13px;
            color: #555;
            background: #f8f9fa;
            padding: 8px 10px;
            border-radius: 6px;
            margin-top: 2px;
            border: 1px solid #eee;
            line-height: 1.4;
            word-break: break-all;
        }

        #menu-panel {
            position: fixed;
            top: 0;
            right: -280px;
            width: 280px;
            height: 100%;
            background: #ffffff;
            box-shadow: -4px 0 15px rgba(0,0,0,0.1);
            z-index: 10001;
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            padding: 24px 20px;
            padding-top: calc(24px + env(safe-area-inset-top));
            box-sizing: border-box;
            overflow-y: auto;
        }

            #menu-panel.open {
                right: 0;
            }

        .menu-title {
            margin: 0 0 20px 0;
            font-size: 18px;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: #888;
            cursor: pointer;
            padding: 0;
        }

        .divider {
            height: 1px;
            background: #eee;
            border: none;
            margin: 15px 0;
        }

        .modern-slider-container {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 15px;
            border: 1px solid #eef0f2;
        }

        .slider-header {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            font-weight: bold;
            color: #555;
            margin-bottom: 10px;
        }

        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: #ddd;
            border-radius: 3px;
            outline: none;
        }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 20px;
                height: 20px;
                background: #1A73E8;
                border-radius: 50%;
                cursor: pointer;
                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                border: 2px solid #fff;
            }

        .modern-btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.2s, filter 0.2s, background 0.2s;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            white-space: nowrap;
        }

            .modern-btn:active {
                transform: scale(0.97);
            }
            .modern-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
                filter: none;
            }

        .btn-success {
            background: linear-gradient(135deg, #81c995 0%, #57bb6c 45%, #34A853 100%);
            color: white;
            box-shadow: 0 6px 16px rgba(52,168,83,0.45), 0 2px 4px rgba(52,168,83,0.3), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
        }
        .btn-success:hover:not(:disabled) {
            filter: brightness(1.05);
            box-shadow: 0 8px 20px rgba(52,168,83,0.5), 0 2px 6px rgba(52,168,83,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
        }

        .btn-danger {
            background: linear-gradient(135deg, #ff8a80 0%, #f16b5f 45%, #EA4335 100%);
            color: white;
            box-shadow: 0 6px 16px rgba(234,67,53,0.45), 0 2px 4px rgba(234,67,53,0.3), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
        }
        .btn-danger:hover:not(:disabled) {
            filter: brightness(1.05);
            box-shadow: 0 8px 20px rgba(234,67,53,0.5), 0 2px 6px rgba(234,67,53,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #9aa0a6 0%, #767b80 45%, #5F6368 100%);
            color: white;
            box-shadow: 0 6px 16px rgba(95,99,104,0.4), 0 2px 4px rgba(95,99,104,0.25), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.1);
        }
        .btn-secondary:hover:not(:disabled) {
            filter: brightness(1.08);
            box-shadow: 0 8px 20px rgba(95,99,104,0.45), 0 2px 6px rgba(95,99,104,0.3), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.1);
        }

        .btn-outline {
            background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
            color: #444;
            border: 1px solid #ddd;
            box-shadow: 0 6px 16px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
        }
        .btn-outline:hover:not(:disabled) {
            filter: brightness(0.98);
            box-shadow: 0 8px 20px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

            .toggle-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

            .toggle-slider:before {
                position: absolute;
                content: "";
                height: 20px;
                width: 20px;
                left: 2px;
                bottom: 2px;
                background-color: white;
                transition: .4s;
                border-radius: 50%;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }

        input:checked + .toggle-slider {
            background-color: #1A73E8;
        }

            input:checked + .toggle-slider:before {
                transform: translateX(20px);
            }

        #alert-banner {
            position: absolute;
            top: calc(15px + env(safe-area-inset-top));
            left: 50%;
            transform: translateX(-50%);
            background-color: #D32F2F;
            color: white;
            padding: 12px 20px;
            border-radius: 30px;
            font-weight: bold;
            font-size: 16px;
            display: none;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            z-index: 11000;
            box-shadow: 0 6px 16px rgba(211,47,47,0.4);
            white-space: normal;
            max-width: 92vw;
            box-sizing: border-box;
            text-align: center;
        }

            #alert-banner button {
                background-color: white;
                color: #D32F2F;
                border: none;
                padding: 8px 16px;
                border-radius: 20px;
                font-weight: bold;
                cursor: pointer;
                font-size: 13px;
            }

        #toast-notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #34A853;
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: bold;
            font-size: 14px;
            z-index: 99999;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            box-shadow: 0 4px 15px rgba(52,168,83,0.4);
            white-space: normal;
            max-width: 90vw;
            box-sizing: border-box;
            text-align: center;
        }

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 20000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: white;
            padding: 25px;
            border-radius: 12px;
            width: 90%;
            max-width: 360px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            max-height: 90vh;
            overflow-y: auto;
            box-sizing: border-box;
        }
        /* 🎯追加（ご要望）：登録モーダルを、別窓のオーバーレイではなく「送迎確認・登録」
           画面のサイドパネル内に埋め込んで表示するための上書き。position:fixedの
           全画面オーバーレイをやめ、通常のブロック要素として親要素の中に収める。 */
        .modal-overlay.embedded {
            position: static !important;
            display: block !important;
            background: transparent !important;
            padding: 0 !important;
            inset: auto !important;
        }
        .modal-overlay.embedded .modal-content {
            max-width: 100% !important;
            width: 100% !important;
            box-shadow: none !important;
            border: 1px solid #eee;
            padding: 12px !important;
            max-height: none !important;
            margin: 0 !important;
        }

        /* 🎯追加：「到着時の動作」モーダルのカード形式選択肢 */
        .aa-card {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px;
            border-radius: 10px;
            border: 2px solid #E2E8F0;
            background: #F8FAFC;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .aa-card:hover { border-color: #93C5FD; }
        .aa-card-selected {
            border-color: #1A73E8;
            background: #E8F0FE;
        }
        .aa-card-icon { font-size: 20px; line-height: 1.3; }
        .aa-card-text { display: flex; flex-direction: column; gap: 2px; }
        .aa-card-label { font-size: 14px; font-weight: bold; color: #1F2937; }
        .aa-card-desc { font-size: 11px; color: #6B7280; line-height: 1.4; }

        /* 🎯追加：バス停タップ時の設定画面（busstop-settings-modal）だけは、
           表示中も裏の地図をドラッグ・ピンチ操作できるようにする。
           外枠（背景）はクリックを一切拾わない（pointer-events:none）ようにし、
           パネル本体（.modal-content）だけがタップを受け取る。
           さらに、地図を操作している間はパネルを半透明にし、パネルをタップしたら
           即座に不透明（100%）に戻す。 */
        #busstop-settings-modal.modal-overlay,
        #single-busstop-edit-modal.modal-overlay {
            background: transparent;
            pointer-events: none;
        }
        #busstop-settings-modal .modal-content,
        #single-busstop-edit-modal .modal-content {
            pointer-events: auto;
            transition: opacity 0.25s ease;
        }

        /* 🎯追加：バス停情報の編集モーダルが縦に長くなりすぎる問題への対策。
           各設定項目をアコーディオン（タップで開閉）にグループ化し、既定では閉じておく。 */
        .se-acc-item {
            border: 1px solid #eee;
            border-radius: 6px;
            margin-bottom: 12px;
            overflow: hidden;
            background: #f8f9fa;
            /* 🎯修正：このアコーディオンをdisplay:flex; flex-direction:columnの親要素
               （#alarm-edit-mode-bar等）の直接の子として置いた場合、既定のflex-shrink:1に
               より、親の高さ制限（max-height）を超えるときに中身が本来の高さより
               縮められてしまい、overflow:hiddenと相まって見出しの文字が見えなく
               なってしまう不具合があった。flex-shrink:0で「縮めない」ようにし、
               収まりきらない場合は親側のoverflow-y:autoでスクロールさせるようにする
               （他のブロック要素（.modal-content等）内で使う場合はflexコンテナでは
               ないためflex-shrinkは無視され、影響が無い）。 */
            flex-shrink: 0;
        }
        .se-acc-header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 12px;
            background: #f8f9fa;
            border: none;
            cursor: pointer;
            text-align: left;
            font-size: 12px;
            font-weight: bold;
            color: #555;
            box-sizing: border-box;
        }
        .se-acc-header .se-acc-title { flex: 1; min-width: 0; }
        .se-acc-header .se-acc-chevron { color: #1A73E8; font-size: 11px; flex-shrink: 0; transition: transform 0.15s ease; }
        .se-acc-header.open .se-acc-chevron { transform: rotate(90deg); }
        .se-acc-body {
            display: none;
            padding: 12px;
            background: #fff;
            border-top: 1px solid #eee;
        }

        .tab-container {
            display: flex;
            border-bottom: 2px solid #ddd;
            margin-bottom: 20px;
            overflow-x: auto;
            white-space: nowrap;
        }

        .tab-btn {
            flex: 1;
            padding: 12px;
            background: transparent;
            border: none;
            font-size: 14px;
            font-weight: bold;
            color: #888;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.2s;
            white-space: nowrap;
        }

            .tab-btn.active {
                color: #1A73E8;
                border-bottom: 3px solid #1A73E8;
            }

        .admin-section {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
            text-align: left;
        }

        .table-scroll-container {
            width: 100%;
            overflow-x: auto;
            margin-top: 10px;
            margin-bottom: 15px;
        }

        .admin-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

            .admin-table th {
                background-color: #f8f9fa;
                border: 1px solid #ddd;
                padding: 8px 4px;
                text-align: center;
                color: #333;
                font-size: 11px;
                white-space: nowrap;
            }

            .admin-table td {
                border: 1px solid #ddd;
                padding: 4px;
                vertical-align: middle;
                white-space: nowrap;
            }

            .admin-table input[type="text"], .admin-table input[type="time"], .admin-table input[type="email"], .admin-table select {
                width: 100%;
                min-width: 80px;
                padding: 6px 4px;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
                font-size: 12px;
                margin: 0;
            }

        .action-btn {
            background-color: #ffe6e6;
            color: #d32f2f;
            border: 1px solid #ffcccc;
            border-radius: 4px;
            cursor: pointer;
            padding: 4px 8px;
            font-size: 11px;
            transition: 0.2s;
            white-space: nowrap;
        }

        /* 🎯追加：稼働中ロガーへの遠隔操作／強制初期化用の「警告風」グラフィカルUI。
           以前は既存の .action-btn（薄い赤背景＋濃い赤文字）に background だけを
           赤で上書きしていたため、文字色が変わらず赤地に赤文字でボタンの文字が
           読めなくなっていた。white文字＋グラデーション＋影付きの専用クラスに置き換える。 */
        .danger-banner {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
            border: 1px solid #fca5a5;
            border-left: 5px solid #dc2626;
            border-radius: 10px;
            padding: 12px 14px;
            margin: 0 0 14px 0;
        }

            .danger-banner .db-icon {
                font-size: 22px;
                line-height: 1;
                flex-shrink: 0;
            }

            .danger-banner h4 {
                margin: 0 0 4px 0;
                font-size: 14px;
                font-weight: 800;
                color: #991b1b;
                letter-spacing: 0.02em;
            }

            .danger-banner p {
                margin: 0;
                font-size: 11px;
                color: #7f1d1d;
                line-height: 1.5;
            }

        .warn-banner {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
            border: 1px solid #fcd34d;
            border-left: 5px solid #d97706;
            border-radius: 10px;
            padding: 12px 14px;
            margin: 0 0 14px 0;
        }

            .warn-banner .db-icon {
                font-size: 22px;
                line-height: 1;
                flex-shrink: 0;
            }

            .warn-banner h4 {
                margin: 0 0 4px 0;
                font-size: 14px;
                font-weight: 800;
                color: #92400e;
                letter-spacing: 0.02em;
            }

            .warn-banner p {
                margin: 0;
                font-size: 11px;
                color: #78350f;
                line-height: 1.5;
            }

        .danger-zone-card {
            background: #ffffff;
            border: 1px solid #fecaca;
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 12px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }

            .danger-zone-card.warn-tone {
                border-color: #fde68a;
            }

            .danger-zone-card .dz-label {
                display: block;
                font-size: 13px;
                font-weight: 700;
                color: #1f2937;
                margin-bottom: 2px;
            }

            .danger-zone-card .dz-desc {
                display: block;
                font-size: 11px;
                color: #6b7280;
                margin-bottom: 8px;
            }

        .danger-btn {
            background: linear-gradient(135deg, #f87171, #dc2626);
            color: #ffffff !important;
            border: none;
            border-radius: 7px;
            padding: 7px 16px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(220,38,38,0.35);
            transition: 0.15s ease;
            white-space: nowrap;
        }

            .danger-btn:hover:not(:disabled) {
                background: linear-gradient(135deg, #ef4444, #b91c1c);
                box-shadow: 0 3px 8px rgba(220,38,38,0.45);
                transform: translateY(-1px);
            }

            .danger-btn:active:not(:disabled) {
                transform: translateY(0);
                box-shadow: 0 1px 3px rgba(220,38,38,0.4);
            }

            .danger-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                box-shadow: none;
                transform: none;
            }

        .warn-btn {
            background: linear-gradient(135deg, #fbbf24, #d97706);
            color: #ffffff !important;
            border: none;
            border-radius: 7px;
            padding: 7px 16px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(217,119,6,0.35);
            transition: 0.15s ease;
            white-space: nowrap;
        }

            .warn-btn:hover:not(:disabled) {
                background: linear-gradient(135deg, #f59e0b, #b45309);
                box-shadow: 0 3px 8px rgba(217,119,6,0.45);
                transform: translateY(-1px);
            }

            .warn-btn:active:not(:disabled) {
                transform: translateY(0);
                box-shadow: 0 1px 3px rgba(217,119,6,0.4);
            }

            .warn-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                box-shadow: none;
                transform: none;
            }

        .live-rec-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #fee2e2;
            color: #b91c1c;
            font-weight: 700;
            font-size: 11px;
            padding: 3px 9px;
            border-radius: 999px;
            border: 1px solid #fca5a5;
            white-space: nowrap;
        }

            .live-rec-badge .dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #dc2626;
                animation: liveRecPulse 1.4s infinite;
            }

        @keyframes liveRecPulse {
            0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.55); }
            70% { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
            100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
        }

        /* 🎯追加（ご要望）：各設定タブの「この内容で確定します」ボタンを押した直後、
           保存処理中（サーバー側の処理時間次第で10秒以上かかることがある）であることが
           一目で分かるようにする、不定形（左右に動き続ける）の進捗ゲージ。 */
        .admin-save-row {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            align-items: stretch;
        }
        .admin-save-row .admin-save-confirm-btn {
            flex: 1;
            margin: 0;
            background: linear-gradient(135deg, #ff8a80 0%, #e57373 45%, #ef5350 100%);
            color: white;
            border: none;
            box-shadow: 0 6px 16px rgba(239,83,80,0.5), 0 2px 4px rgba(239,83,80,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
            letter-spacing: 0.5px;
            transition: transform 0.1s, box-shadow 0.2s, filter 0.2s;
        }
        .admin-save-row .admin-save-confirm-btn:hover:not(:disabled) {
            filter: brightness(1.05);
            box-shadow: 0 8px 20px rgba(239,83,80,0.55), 0 2px 6px rgba(239,83,80,0.4), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
        }
        .admin-save-row .admin-save-confirm-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .admin-save-row .admin-save-close-btn {
            flex: 1;
            margin: 0;
            white-space: nowrap;
            background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
            box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
        }

        /* 🎯追加（ご要望）：「音・通知の設定」モーダルのタブ（カード型）切り替えボタン。 */
        .sound-tab-btn {
            flex: 1;
            min-width: 70px;
            padding: 9px 4px;
            border: 1px solid #ddd;
            border-radius: 10px;
            background: #f8f9fa;
            color: #555;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, box-shadow 0.15s;
        }
        .sound-tab-btn.active {
            background: linear-gradient(135deg, #ffb74d 0%, #F57C00 100%);
            color: white;
            border-color: #F57C00;
            box-shadow: 0 3px 8px rgba(245,124,0,0.35);
        }
        .admin-save-progress {
            display: none;
            margin-top: 8px;
        }
        .admin-save-progress-track {
            width: 100%;
            height: 6px;
            background: #f1f3f4;
            border-radius: 3px;
            overflow: hidden;
        }
        .admin-save-progress-bar {
            width: 40%;
            height: 100%;
            background: #d32f2f;
            border-radius: 3px;
            animation: adminSaveIndeterminate 1.1s ease-in-out infinite;
        }
        .admin-save-progress-label {
            font-size: 11px;
            color: #d32f2f;
            text-align: center;
            margin: 6px 0 0 0;
            font-weight: bold;
        }
        @keyframes adminSaveIndeterminate {
            0% { margin-left: -40%; }
            100% { margin-left: 100%; }
        }

        /* 🎯追加（ご要望）：ログイン画面用、くるくる回るスピナー。 */
        .login-spinner {
            display: none;
            width: 28px;
            height: 28px;
            margin: 10px auto 0;
            border: 3px solid #f1f3f4;
            border-top-color: #1A73E8;
            border-radius: 50%;
            animation: loginSpinnerRotate 0.8s linear infinite;
        }
        @keyframes loginSpinnerRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* 🎯追加（ご要望）：ボタンの文字の横に表示する、小さいインライン版スピナー。 */
        .login-btn-spinner {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-left: 8px;
            vertical-align: -2px;
            border: 2px solid rgba(255,255,255,0.4);
            border-top-color: #fff;
            border-radius: 50%;
            animation: loginSpinnerRotate 0.8s linear infinite;
        }

        /* 🎯追加：まだ運行開始していない「ログイン中」の状態を表すバッジ（稼働中バッジの黄色版）と、
           そのロガーがどの端末番号でログインしているかを示す小さなラベル。 */
        .idle-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #fef9c3;
            color: #854d0e;
            font-weight: 700;
            font-size: 11px;
            padding: 3px 9px;
            border-radius: 999px;
            border: 1px solid #fde68a;
            white-space: nowrap;
        }

            .idle-badge .dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #d97706;
            }

        /* 🎯追加：アプリがタスクキル等で異常終了し、一定時間ハートビート（last_seen）が
           止まっている「ログイン中」ロガーを示すバッジ。誤って正常な「ログイン中」だと
           安心させないよう、グレー系＋警告アイコンで明確に見分けられるようにする。 */
        .stale-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #f1f5f9;
            color: #64748b;
            font-weight: 700;
            font-size: 11px;
            padding: 3px 9px;
            border-radius: 999px;
            border: 1px solid #cbd5e1;
            white-space: nowrap;
        }

        .stale-clear-btn {
            display: inline-block;
            margin-top: 4px;
            background: none;
            border: none;
            color: #64748b;
            font-size: 10.5px;
            text-decoration: underline;
            cursor: pointer;
            padding: 0;
            white-space: nowrap;
        }

            .stale-clear-btn:hover {
                color: #334155;
            }

            .stale-clear-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

        /* 🎯追加：応答なしになってから6時間以上経過した場合の「確認なし・自動ログアウト」
           表示（メッセージ＋カウントダウンOKボタン）。上のstale-clear-btn（グレーアウト中）
           から切り替わっても違和感が無いよう、同系色でまとめつつボタンは操作可能に見えるよう
           はっきりした色にする。 */
        .auto-logout-notice {
            margin-top: 4px;
            padding: 6px 8px;
            background: #fff7ed;
            border: 1px solid #fdba74;
            border-radius: 6px;
        }

            .auto-logout-notice p {
                margin: 0 0 5px 0;
                font-size: 11px;
                color: #9a3412;
                line-height: 1.4;
            }

        .auto-logout-btn {
            display: inline-block;
            background: #ea580c;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 12px;
            cursor: pointer;
            white-space: nowrap;
        }

            .auto-logout-btn:hover {
                background: #c2410c;
            }

            .auto-logout-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }

        .auto-logout-count {
            font-variant-numeric: tabular-nums;
        }

        .device-num-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            color: #334155;
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            padding: 3px 8px;
            white-space: nowrap;
        }

        /* 🎯変更（ご要望）：稼働中・ログイン中のロガー一覧を、テーブルの1行ではなく
           「端末ごとのカード」形式に変更した。上段に端末ID・端末名（折り返しなし・
           専有の1行）を表示し、下段にコース名から得られる情報（状態・現在の便・
           強制変更・操作）をまとめる。端末名が長くても他の情報と重ならないようにする。 */
        .rc-card {
            border: 1px solid #fecaca;
            border-radius: 10px;
            overflow: hidden;
            background: #fffdfd;
            margin-bottom: 14px;
        }
        .rc-card:last-child { margin-bottom: 0; }
        .rc-card-top {
            background: #fef2f2;
            padding: 8px 12px;
            border-bottom: 1px solid #fee2e2;
            overflow-x: auto;
        }
        .rc-card-body { padding: 10px 12px 12px; }
        .rc-card-row-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 13px;
            flex-wrap: wrap;
        }
        .rc-card-cid { font-weight: 700; color: #7f1d1d; }
        .rc-label {
            display: block;
            font-size: 10.5px;
            color: #991b1b;
            font-weight: bold;
            margin-bottom: 3px;
        }
        .rc-card-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 10px;
        }
        .rc-card-item { font-size: 12px; }
        .rc-card-ops { margin-top: 10px; }

        /* 🎯追加：遠隔「運行開始」用のボタン。danger-btn／warn-btnとは違い、危険な上書きではなく
           前向きな操作なので、青系のはっきりした色にして見分けやすくする。 */
        .start-btn {
            background: linear-gradient(135deg, #38bdf8, #0284c7);
            color: #ffffff !important;
            border: none;
            border-radius: 7px;
            padding: 7px 16px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(2,132,199,0.35);
            transition: 0.15s ease;
            white-space: nowrap;
            min-height: 34px;
            min-width: 64px;
            box-sizing: border-box;
        }

            .start-btn:hover:not(:disabled) {
                background: linear-gradient(135deg, #0ea5e9, #0369a1);
                box-shadow: 0 3px 8px rgba(2,132,199,0.45);
                transform: translateY(-1px);
            }

            .start-btn:active:not(:disabled) {
                transform: translateY(0);
                box-shadow: 0 1px 3px rgba(2,132,199,0.4);
            }

            .start-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                box-shadow: none;
                transform: none;
            }

        /* 🎯追加：遠隔「運行停止」用のボタン。ログアウトは伴わない（送信のみ停止）操作のため、
           強制停止（ログアウト＋アプリ終了）の赤とは明確に色を分け、start-btnと対で並べる。 */
        .stop-btn {
            background: linear-gradient(135deg, #94a3b8, #475569);
            color: #ffffff !important;
            border: none;
            border-radius: 7px;
            padding: 7px 16px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(71,85,105,0.35);
            transition: 0.15s ease;
            white-space: nowrap;
            min-height: 34px;
            min-width: 64px;
            box-sizing: border-box;
        }

            .stop-btn:hover:not(:disabled) {
                background: linear-gradient(135deg, #64748b, #334155);
                box-shadow: 0 3px 8px rgba(71,85,105,0.45);
                transform: translateY(-1px);
            }

            .stop-btn:active:not(:disabled) {
                transform: translateY(0);
                box-shadow: 0 1px 3px rgba(71,85,105,0.4);
            }

            .stop-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                box-shadow: none;
                transform: none;
            }

        .danger-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #fecaca;
        }

            .danger-table th {
                background: #fef2f2;
                color: #991b1b;
                font-size: 12px;
                padding: 9px 10px;
                border-bottom: 2px solid #fca5a5;
                text-align: left;
                white-space: nowrap;
            }

            .danger-table td {
                padding: 9px 10px;
                border-bottom: 1px solid #fee2e2;
                font-size: 12px;
                background: #fffdfd;
                vertical-align: middle;
            }

            .danger-table tr:last-child td {
                border-bottom: none;
            }

        /* 🎯修正：ボタン・入力欄の大きさがバラバラで見にくいとのご指摘への対応。
           ボタンの最小サイズを揃え、select（プルダウン）にも専用の見た目を与えて
           danger-btn／warn-btnと統一感が出るようにする。 */
        .danger-btn, .warn-btn {
            min-height: 34px;
            min-width: 64px;
            box-sizing: border-box;
        }

        .danger-table select, .danger-zone-card select {
            padding: 6px 8px;
            border: 1px solid #fca5a5;
            border-radius: 7px;
            font-size: 12px;
            background-color: #ffffff;
            color: #1f2937;
            box-sizing: border-box;
            min-height: 34px;
        }

            .danger-zone-card.warn-tone select {
                border-color: #fcd34d;
            }

        /* 🎯追加：セル内で「プルダウン＋実行ボタン」を必ず横並びのまま保つための共通レイアウト。
           プルダウン側が余った幅を埋め（flex:1）、ボタンは文字分の幅だけを確保する（flex:0 0 auto）。
           flex-wrap:nowrapを明示し、狭い場面でも縦積みにならず横スクロールで対応させる。 */
        .dt-inline-action {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 6px;
        }

            .dt-inline-action select {
                flex: 1 1 auto;
                min-width: 0;
            }

            .dt-inline-action .danger-btn {
                flex: 0 0 auto;
            }

        /* 🎯追加：遠隔操作表の「強制コース変更」「強制便変更」列は、プルダウンの選択肢名が
           長くなりがちな上に列幅も狭いため、横並び（dt-inline-action）のままだとプルダウンが
           潰れて読めなくなる。2段（プルダウンを上、実行ボタンを下）に積んで、どちらも
           列いっぱいの幅で見やすく表示する。 */
        .dt-stack-action {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

            .dt-stack-action select {
                width: 100%;
                box-sizing: border-box;
            }

            .dt-stack-action .danger-btn {
                width: 100%;
            }

        /* 🎯追加：強制初期化（学園単位／コース単位／便単位）のカードを、縦積みではなく
           左・中央・右の3列（画面が狭い時は自動で折り返す）に整列させる。 */
        .force-reset-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 14px;
        }

            .force-reset-grid .danger-zone-card {
                margin-bottom: 0;
                display: flex;
                flex-direction: column;
            }

        /* 🎯全面刷新：「端末・記録操作」タブの現在状況カード。
           以前はコースID単位（同じ物理端末でもコースが変わると別カード扱いになりうる）で
           表示していたが、端末番号を主キーにグルーピングし、1端末＝1カードに固定する。
           見た目もテーブル的な情報量から、一目で状況が分かるグラフィカルなカードへ変更。 */
        .dv-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 12px;
        }

        .dv-card {
            border-radius: 12px;
            padding: 16px;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

            .dv-card.dv-running { border-color: #fca5a5; background: linear-gradient(180deg, #fff5f5 0%, #ffffff 60%); }
            .dv-card.dv-idle { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%); }
            .dv-card.dv-stale { border-color: #cbd5e1; background: #f8fafc; }

        .dv-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            margin-bottom: 8px;
        }

        .dv-card-num {
            font-weight: 800;
            font-size: 15px;
            color: #1f2937;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dv-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10.5px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 999px;
            white-space: nowrap;
            flex-shrink: 0;
        }

            .dv-pill.dv-pill-running { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
            .dv-pill.dv-pill-idle { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
            .dv-pill.dv-pill-stale { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
            .dv-pill.dv-pill-new { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }

            .dv-pill .dv-dot {
                width: 6px; height: 6px; border-radius: 50%;
                background: currentColor;
            }
            .dv-pill-running .dv-dot { animation: liveRecPulse 1.4s infinite; }

        .dv-card-course {
            font-size: 15px;
            font-weight: 700;
            color: #374151;
            margin-bottom: 10px;
            white-space: normal;
            overflow: visible;
            word-break: break-word;
        }
        .dv-card-meta {
            font-size: 13px;
            color: #6B7280;
            margin-bottom: 6px;
        }
            .dv-card-course .dv-runtype { font-weight: 500; color: #6b7280; font-size: 12.5px; }

        .dv-card-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .dv-icon-btn {
            flex: 1 1 auto;
            min-width: 36px;
            height: 34px;
            border-radius: 7px;
            border: 1px solid #e5e7eb;
            background: #f9fafb;
            color: #374151;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            padding: 0 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            transition: 0.15s ease;
        }
            .dv-icon-btn:hover:not(:disabled) { background: #eef2ff; border-color: #a5b4fc; }
            .dv-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
            .dv-icon-btn.dv-icon-btn-danger { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
            .dv-icon-btn.dv-icon-btn-danger:hover:not(:disabled) { background: #fee2e2; }

        .dv-inline-panel {
            display: none;
            gap: 6px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed #e5e7eb;
        }
            .dv-inline-panel select {
                flex: 1 1 auto;
                min-width: 0;
                padding: 6px 8px;
                border: 1px solid #d1d5db;
                border-radius: 6px;
                font-size: 12px;
            }
            .dv-inline-panel .danger-btn { flex: 0 0 auto; padding: 6px 12px; }

        .dv-stale-note {
            margin-top: 8px;
            padding: 6px 8px;
            background: #fff7ed;
            border: 1px solid #fdba74;
            border-radius: 6px;
            font-size: 11px;
            color: #9a3412;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .deleted-row {
            background-color: #fcfcfc;
        }

            .deleted-row td {
                opacity: 0.5;
                text-decoration: line-through;
                pointer-events: none;
            }

                .deleted-row td:last-child {
                    opacity: 1;
                    text-decoration: none;
                    pointer-events: auto;
                }

        .custom-popup-title {
            margin-top: 0;
            font-size: 16px;
            color: #333;
            font-weight: bold;
            border-bottom: 2px solid #1A73E8;
            padding-bottom: 8px;
            margin-bottom: 15px;
            text-align: left;
        }

        .custom-popup-message {
            font-size: 14px;
            color: #444;
            margin-bottom: 20px;
            text-align: left;
            white-space: pre-wrap;
            line-height: 1.5;
        }

        .custom-popup-input {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 14px;
            box-sizing: border-box;
        }

        .custom-popup-btn-container {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .custom-btn {
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            transition: background 0.2s;
        }

        .custom-btn-primary {
            background-color: #1A73E8;
            color: white;
        }

            .custom-btn-primary:active {
                background-color: #1557b0;
            }

        .custom-btn-secondary {
            background-color: #f1f3f4;
            color: #333;
        }

            .custom-btn-secondary:active {
                background-color: #e1e3e4;
            }

        .busstop-label {
            text-shadow: 1px 1px 3px #fff, -1px 1px 3px #fff, 1px -1px 3px #fff, -1px -1px 3px #fff;
        }

        #custom-bus-picker-btn {
            /* 🎯修正（ご要望）：形を他の3つのアイコンボタン（🎫🔄🎯）と完全に揃える
               （丸ではなく、同じ角丸の四角）。サイズ・box-sizingも統一。 */
            flex-grow: 0;
            flex-shrink: 0;
            position: relative;
            width: 38px;
            height: 38px;
            margin-left: auto; /* 🎯変更（ご要望）：アイコン群をまとめて右寄せにする */
            padding: 0;
            border-radius: 8px;
            border: 1px solid #ddd;
            font-size: 18px;
            background-color: #f8f9fa;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
        }
        #custom-bus-picker-selected-dot {
            display: none;
            position: absolute;
            top: 2px;
            right: 2px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #1A73E8;
            border: 1.5px solid #fff;
            box-shadow: 0 0 2px rgba(0,0,0,0.3);
        }

        .picker-option-btn {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 16px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            background-color: #f3f4f6;
            color: #4b5563;
            transition: all 0.2s;
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .picker-option-btn:active {
                transform: scale(0.97);
            }

            .picker-option-btn.selected {
                background-color: #eff6ff;
                color: #2563eb;
                border: 2px solid #2563eb;
            }

        /* 🌟追加：スマホのブラウザで<select>をタップすると出る、OS標準の黒っぽい選択画面の代わりに、
           このアプリ内の他の場所（便の選択など）と同じ「白い綺麗な選択画面」を使うための共通スタイル。
           window.enhanceSelect() が、既存の<select>ごとにこのクラスのボタンを自動生成する。 */
        .enhanced-select-display {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            background-color: #fff;
            color: #333;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
            box-sizing: border-box;
        }

            .enhanced-select-display:disabled {
                cursor: not-allowed;
                opacity: 0.6;
            }

            .enhanced-select-display .enhanced-select-caret {
                color: #888;
                font-size: 0.8em;
                flex-shrink: 0;
                margin-left: 4px;
            }
        /* 🎯追加（ご要望）：未読の「連絡」があるとき、サイドパネルの連絡ボタンを赤く光らせる。 */
        @keyframes contactUnreadGlow {
            0%, 100% { box-shadow: 0 0 4px 1px rgba(211,47,47,0.5); background-color: #ffecec; }
            50% { box-shadow: 0 0 12px 4px rgba(211,47,47,0.85); background-color: #ffd6d6; }
        }
        .contact-btn-unread {
            border-color: #d32f2f !important;
            color: #d32f2f !important;
            font-weight: bold;
            animation: contactUnreadGlow 1.6s ease-in-out infinite;
        }
        /* 🎯修正（ご指摘対応）：「連絡履歴」はadmin-modal（管理者メニュー）を開いたまま
           さらに重ねて開くモーダルだが、HTML内での記述順がadmin-modalより前にあるため、
           同じz-indexのままだと後ろに隠れてしまっていた。連絡関連のモーダルは常に
           他のモーダルより手前に出るよう、z-indexを明示的に高くしておく。 */
        #contact-inbox-modal, #contact-recipient-modal, #contact-content-modal, #contact-history-modal {
            z-index: 20050;
        }
        /* 🎯変更（ご要望）：複数コースを見比べやすいよう、単純な一覧からカード風の
           デザインに変更する。選択中のカードは枠線・背景色・チェックマークで分かりやすく示す。 */
        .active-course-option {
            display: flex; align-items: center; gap: 12px; padding: 14px 16px;
            margin-bottom: 10px; border-radius: 14px; cursor: pointer;
            background: #fff; border: 2px solid #e5e7eb;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
            transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
        }
        .active-course-option:last-child { margin-bottom: 0; }
        .active-course-option.selected {
            border-color: #1A73E8; background: #eaf2ff;
            box-shadow: 0 3px 10px rgba(26,115,232,0.25);
        }
        .active-course-option.all-option { border-style: dashed; }
        .active-course-option .radio-dot {
            width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ccc;
            flex-shrink: 0; position: relative; background: #fff;
        }
        .active-course-option.selected .radio-dot { border-color: #1A73E8; background: #1A73E8; }
        .active-course-option.selected .radio-dot::after {
            content: "✓"; position: absolute; inset: 0; display: flex; align-items: center;
            justify-content: center; color: #fff; font-size: 13px; font-weight: bold;
        }

/* ============================================================
   🎯追加（ご要望）：ハイテク表示テーマ。統括が学園単位でONにした
   場合だけ、bodyに"hightech-theme"クラスが付き、この下のルールが
   有効になる。OFFの学園には一切影響しない。
   ============================================================ */
:where(body.hightech-theme .modern-btn:not(:disabled)),
:where(body.hightech-theme #ao-off-btn:not(:disabled)),
:where(body.hightech-theme #absence-off-btn:not(:disabled)) {
    /* 🎯再修正（ご指摘対応）：小さいボタンで文字が読みにくくなっていたのは、演出自体が
       小さいボタンに不向きだったのではなく、光の帯の「白の濃さ」が強すぎたことが原因
       だった。不透明度をぐっと下げ、帯の幅も少し狭くすることで、小さいボタンでも
       下地を覆い隠さないレベルに調整し、改めて全ボタン（.modern-btn）に適用する。
       光の演出を、テキストの上に重なる可能性のある別要素（::before）ではなく、
       「背景の1レイヤー」として実装している。背景は仕組み上、必ず文字より下に
       描画されるため、文字が隠れることは無い。ボタンの箱のサイズ（高さ・余白）にも
       一切影響しない。
       🎯再修正（ご要望）：特定の色（青〜ミント）を決め打ちで上書きするのではなく、
       各ボタンが元々持っている色（緑＝成功、赤＝危険、オレンジ等）を活かしたまま、
       その色の上に「左上は明るく・右下は暗く」という対角線の重なりを乗せることで、
       色ごとに自然なグラデーションがかかって見えるようにする。背景色そのものは
       上書きしない（!important・color指定も外す）ため、ボタンごとの色分けの意味は
       保たれる。1枚目（手前）が光の帯、2枚目（奥）が明暗の重なり。
       🎯再々修正（ご指摘対応）：黒っぽい背景×白文字のボタン（例：「設定」ボタン）では、
       明るい重なりの角（左上）に白文字がかかると、白文字が明るい背景に溶けて読みにくく
       なっていた（薄いグレー×薄い文字のグレーアウトボタンでも同様の問題があったため、
       disabled属性つきのボタンは演出の対象外にした）。明暗どちら向きの文字色でも
       安全なレベルまで、明るい側・暗い側の両方をさらに弱くする。
       🎯4回目の修正（ご指摘対応・根本原因）：「この内容で登録します」等、既に自分専用の
       濃い色つきグラデーション（background: linear-gradient(...)の一括指定）を持つ
       ボタンがアプリ内に多数あった。以前の.modern-btnセレクタは、CSSの優先順位計算上
       これらの個別指定より強くなってしまい、せっかくの色付きグラデーションを、この
       淡い光沢だけの背景で丸ごと上書きしてしまっていた（結果、透明に近い背景に
       白文字が残り、文字が消えて見えていた）。:where() で自分自身の優先度をゼロまで
       下げ、「他に何も指定が無いボタンにだけ効く、控えめな追加演出」に変更する。
       これにより、既に個性的な色を持つボタンは元の見た目のまま保たれ、無地の
       ボタンにだけこの光沢が乗るようになる。
       🎯5回目の修正（ご指摘対応・見落とし）：4回目の修正では「body.hightech-theme」の
       「body」部分を:where()の外に残していたため、クラスが1つだけの指定（例：
       .btn-success、緑の「＋アカウントを追加」ボタン）に対しては、クラス数が同点
       （1個 対 1個）になり、その同点判定で「body」という要素セレクタの分だけ、
       依然としてこちら側が勝ってしまっていた（.admin-save-confirm-btnのように
       クラスを2つ持つボタンだけは正しく除外できていたが、単独クラスのボタンは
       見落としていた）。「body.hightech-theme」を含めた選択肢全体を:where()で
       囲み、本当に優先度ゼロにすることで、1クラスのボタンに対しても正しく
       負けるようにする。 */
    background-image:
        linear-gradient(120deg, transparent 44%, rgba(255,255,255,0.18) 50%, transparent 56%),
        linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 35%, rgba(0,0,0,0.02) 65%, rgba(0,0,0,0.12) 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 180% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    animation: htShimmerBg 3.6s ease-in-out infinite;
    box-shadow: 0 5px 16px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 6px rgba(0,0,0,0.18), 0 0 14px rgba(26,115,232,0.25), 0 0 0 1px rgba(255,255,255,0.25);
    transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}
@keyframes htShimmerBg {
    0% { background-position: 130% 0, 0 0; }
    50% { background-position: -30% 0, 0 0; }
    100% { background-position: -30% 0, 0 0; }
}
/* 🎯追加（ご要望）：白・薄い色系のボタン（.btn-outline）は、元々の文字色が薄い場合も
   あり、演出の明るい重なりと合わさると読みにくくなることがある。白系のボタンは
   文字色を黒系に固定し、確実に読める状態を保証する（色付きの濃いボタンは対象外、
   それぞれの元の文字色のまま）。 */
body.hightech-theme .btn-outline:not(:disabled) {
    color: #1a1a1a !important;
}
/* 🎯追加（ご要望）：「単色っぽい」というご指摘への対応。.btn-success等、既に自分専用の
   box-shadowを持つボタンには、:where()で優先度を下げたbox-shadowが負けてしまうため、
   影が控えめなままだった。box-shadowとは別のプロパティ（filter: drop-shadow）を使い、
   個々のボタンのbox-shadow指定とは競合しない形で、参考画像のような、はっきりした
   浮き上がるような影を全ボタンに一律で追加する。 */
body.hightech-theme .modern-btn:not(:disabled),
body.hightech-theme #ao-off-btn:not(:disabled),
body.hightech-theme #ao-standing-btn:not(:disabled),
body.hightech-theme #absence-off-btn:not(:disabled) {
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.28)) drop-shadow(0 2px 4px rgba(0,0,0,0.18));
}
/* 🎯追加（ご要望）：タップした瞬間、物理的に押し込まれたように見える3D的な演出。
   ・押した瞬間：少し縮み、下に沈み込み（translateYを大きく）、浮いていた影
   （filter: drop-shadow）はほぼ無くし、代わりに内側の影（inset）を強くして
   「ボタン面がへこんだ」ように見せる。
   ・離した瞬間：通常状態（浮いた影つき）へ素早く戻る＝押し込みが戻る感触になる。
   通常状態・hover状態とは別に、押している間だけ有効なごく短い時間の変化のため、
   transitionもここだけ速くする（ゆっくりだと「沈み込み」の感触が伝わらないため）。 */
body.hightech-theme .modern-btn:active:not(:disabled),
body.hightech-theme #ao-off-btn:active,
body.hightech-theme #ao-standing-btn:active,
body.hightech-theme #absence-off-btn:active {
    transform: scale(0.95) translateY(3px);
    filter: brightness(0.94) drop-shadow(0 1px 1px rgba(0,0,0,0.15));
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 4px 8px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.15);
    transition: transform 0.06s ease-out, filter 0.06s ease-out, box-shadow 0.06s ease-out;
}
body.hightech-theme .modern-btn:hover:not(:disabled),
body.hightech-theme #ao-off-btn:hover,
body.hightech-theme #ao-standing-btn:hover,
body.hightech-theme #absence-off-btn:hover {
    filter: brightness(1.08) drop-shadow(0 8px 14px rgba(0,0,0,0.32)) drop-shadow(0 2px 5px rgba(0,0,0,0.2));
    box-shadow: 0 7px 20px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 6px rgba(0,0,0,0.18), 0 0 20px rgba(26,115,232,0.4);
}
/* カレンダーの選択中セル・見出しにも、控えめに立体感と発光を加える。 */
body.hightech-theme #ao-calendar-grid > div,
body.hightech-theme #absence-calendar-grid > div {
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
body.hightech-theme #ao-calendar-grid > div[style*="3px solid"],
body.hightech-theme #absence-calendar-grid > div[style*="3px solid"] {
    box-shadow: 0 0 0 1px rgba(220,38,38,0.3), 0 3px 10px rgba(220,38,38,0.35);
}
body.hightech-theme .modal-content h3,
body.hightech-theme .modal-content h4 {
    text-shadow: 0 1px 1px rgba(0,0,0,0.08);
}

/* ============================================================
   🎯追加（ご要望）：可愛い表示テーマ（フォント）。統括が学園単位で
   ONにした場合だけ、bodyに"cute-font-theme"クラスが付き、文字全体が
   丸みのある可愛いフォント（Kosugi Maru）に切り替わる。
   ハイテク表示テーマとは独立しており、両方同時にONにもできる。
   OFFの学園には一切影響しない。
   ============================================================ */
body.cute-font-theme {
    font-family: 'Kosugi Maru', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}