/* 內海字體 (NaikaiFont, SIL OFL 1.1) — 可愛少女手寫繁體，供字體選單選用。
   宣告而已，瀏覽器只有在使用者實際選了「甜妞」時才會下載這顆字型檔，
   預設使用者完全不會載到，故不影響首屏。常用字精簡版 ~2.1MB。 */
        @font-face {
            font-family: 'Naikai';
            src: url('/trip-assets/fonts/NaikaiFont-Regular-Lite.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @property --trip-accent {
            syntax: '<color>';
            inherits: true;
            initial-value: #4F7C74;
        }
        @property --trip-accent-strong {
            syntax: '<color>';
            inherits: true;
            initial-value: #365B55;
        }
        @property --trip-accent-soft {
            syntax: '<color>';
            inherits: true;
            initial-value: #EFE8E2;
        }
        @property --trip-header-surface {
            syntax: '<color>';
            inherits: true;
            initial-value: #F7F3EF;
        }
        @property --trip-highlight {
            syntax: '<color>';
            inherits: true;
            initial-value: #F1C96B;
        }

        :root {
            /* Color Palette - Synchronized with iOS Liquid Glass */
            --primary: var(--trip-accent);
            --primary-light: var(--trip-accent-soft);
            --accent: var(--trip-accent);
            --bg: #f5f5f7;
            --card: rgba(255, 255, 255, 0.72);
            --card-solid: #ffffff;
            --ink: #1d1d1f;
            --ink-strong: #000000;
            --muted: #86868b;
            --border: rgba(0, 0, 0, 0.08);
            --trip-accent: #0071e3;
            --trip-accent-strong: #0077ed;
            --trip-accent-soft: rgba(0, 113, 227, 0.08);
            --trip-header-surface: rgba(255, 255, 255, 0.68);
            --trip-highlight: #ff9f43;

            /* Section theme (unified under trip accent) */
            --sec-bg: rgba(255, 255, 255, 0.5);
            --sec-bg-strong: rgba(0, 0, 0, 0.03);
            --sec-surface: rgba(255, 255, 255, 0.82);
            --sec-border: rgba(0, 0, 0, 0.08);
            --sec-border-strong: rgba(0, 0, 0, 0.12);
            --sec-text: #1d1d1f;
            --sec-text-muted: #86868b;
            --sec-chip-bg: var(--trip-accent-soft);
            --sec-chip-border: color-mix(in srgb, var(--trip-accent) 15%, transparent);

            /* Elevation & Shadow - Liquid Glass Style */
            --shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
            --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.04);
            
            /* Radius System - Standardized Squircle */
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 12px;
            --radius-pill: 999px;
            --glass-blur: blur(28px) saturate(190%);
            --glass-border: 1px solid rgba(255, 255, 255, 0.42);

            /* User-selectable fonts: Latin/EN first (only covers Latin glyphs),
               Chinese font picks up the rest. Both overridable per-device. */
            --font-en: 'Plus Jakarta Sans';
            --font-zh: 'Noto Sans TC';
        }
        :root.is-theme-transitioning {
            transition:
                --trip-accent 720ms cubic-bezier(0.22, 1, 0.36, 1),
                --trip-accent-strong 720ms cubic-bezier(0.22, 1, 0.36, 1),
                --trip-accent-soft 720ms cubic-bezier(0.22, 1, 0.36, 1),
                --trip-header-surface 720ms cubic-bezier(0.22, 1, 0.36, 1),
                --trip-highlight 720ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
        /* Disable iOS Safari double-tap-to-zoom site-wide. Safari resolves the
           double-tap gesture from the touched element's OWN touch-action (it is
           not inherited), so a body-level rule isn't enough — it must be applied
           universally. `manipulation` still allows scrolling and pinch-zoom; it
           only drops the legacy double-tap zoom + 300ms tap delay. Elements that
           need custom drag/pan (cover editor, etc.) set their own touch-action
           with higher specificity and are unaffected. */
        * { touch-action: manipulation; }
        body {
            font-family: var(--font-en, 'Plus Jakarta Sans'), var(--font-zh, 'Noto Sans TC'), -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.6;
        }

        /* --- Boot loading state --- */
        body.is-booting {
            display: grid;
            place-items: center;
            min-height: 100vh;
            padding: 24px;
            background: linear-gradient(180deg, #F7F3EF, var(--bg));
        }
        .boot-card {
            width: min(100%, 440px);
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 26px;
            box-shadow: var(--shadow);
            text-align: center;
        }
        .boot-card h1 { margin: 0 0 10px; font-size: 1.4rem; font-weight: 800; color: var(--ink-strong); }
        .boot-card p { margin: 0; color: var(--muted); line-height: 1.7; }

        /* --- Offline banner --- */
        .trip-offline-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 8500;
            background: #6b7280;
            color: #fff;
            text-align: center;
            font-size: 0.78rem;
            font-weight: 600;
            padding: 6px 16px;
            padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
            font-family: var(--font-en, 'Plus Jakarta Sans'), var(--font-zh, 'Noto Sans TC'), sans-serif;
            opacity: 0;
            transform: translateY(-100%);
            transition: opacity 0.3s, transform 0.3s;
        }
        .trip-offline-banner.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Itinerary app shell --- */
        .itin-app { display: none; max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
        body.is-itinerary .boot-card { display: none; }
        body.is-itinerary .itin-app { display: block; }
        body.is-itinerary {
            display: block;
            padding: 0;
            background-color: #f5f5f7;
            background-image: 
                radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--trip-accent) 6%, transparent) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--trip-highlight, #ff9f43) 5%, transparent) 0%, transparent 42%) !important;
        }

        /* ── Shared tab header ── */
        .tab-header {
            position: relative;
            padding: calc(env(safe-area-inset-top, 0px) + 3rem) 1rem 1.5rem;
            text-align: center;
            border-radius: 0 0 24px 24px;
            background: var(--trip-header-surface);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
            border-bottom: 1px solid var(--border);
            margin-bottom: 1rem;
            cursor: pointer;
        }
        .tab-header h1 {
            margin: 0 0 0.3rem;
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .tab-header-date {
            font-size: 0.9rem;
            font-weight: 600;
            color: #8A7E7A;
        }
        .tab-header-sync {
            position: absolute;
            top: calc(env(safe-area-inset-top, 0px) + 1rem);
            right: 1rem;
            font-size: 0.75rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .tab-header-sync-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
        }

        .itin-header {
            background: var(--trip-header-surface);
            cursor: default;
            overflow: hidden;
        }
        .itin-header.has-cover {
            min-height: 286px;
            color: #fff;
        }
        .itin-header.has-cover::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
                linear-gradient(180deg, rgba(20, 24, 28, 0.34) 0%, rgba(20, 24, 28, 0.42) 34%, rgba(20, 24, 28, 0.72) 100%);
        }
        .itin-header-cover {
            position: absolute;
            inset: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        .itin-header-cover-frame {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            display: grid;
            place-items: center;
        }
        .itin-header-cover-viewport {
            position: relative;
            aspect-ratio: 13 / 9;
            min-width: 100%;
            min-height: 100%;
        }
        .itin-header-cover-viewport .itin-header-cover.is-framed {
            position: absolute;
            inset: auto;
            max-width: none;
            object-fit: fill;
        }
        .itin-header.has-cover > *:not(.itin-header-cover):not(.itin-header-cover-frame) {
            position: relative;
            z-index: 2;
        }
        .itin-header.has-cover h1 {
            color: #fff;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
        }
        .itin-header-top {
            width: min(100%, 680px);
            margin: 0 auto 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .itin-header-meta-row {
            display: flex;
            flex: 1 1 auto;
            min-width: 0;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            gap: 10px;
        }
        .itin-header-main {
            width: min(100%, 680px);
            margin: 0 auto;
            display: grid;
            gap: 0;
            text-align: left;
        }
        .itin-header .itin-header-date {
            background: var(--trip-accent-soft);
            display: inline-block;
            padding: 6px 14px;
            border-radius: var(--radius-md);
        }
        .itin-header .itin-header-summary {
            margin-top: 2px;
            font-size: 0.88rem;
            color: var(--muted);
            line-height: 1.55;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            cursor: pointer;
        }
        .itin-header.has-cover .itin-header-date {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .itin-header.has-cover .itin-header-summary {
            color: rgba(255, 255, 255, 0.86);
            text-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
        }
        .itin-header .itin-header-summary.is-expanded {
            -webkit-line-clamp: unset;
            overflow: visible;
        }
        .itin-header-utility-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 0 0 auto;
        }
        .itin-header-focus-row {
            width: min(100%, 680px);
            margin: 14px auto 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            flex-wrap: wrap;
        }
        .itin-header-focus-items {
            min-width: 0;
            max-width: 100%;
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1 1 auto;
            flex-wrap: wrap;
        }
        .itin-header-focus-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            max-width: min(100%, 100%);
            padding: 8px 14px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid var(--border);
            border-radius: 999px;
            box-shadow: 0 4px 12px rgba(138, 125, 122, 0.06);
            text-align: left;
            flex-wrap: wrap;
        }
        .itin-header-focus-main {
            font-size: 0.84rem;
            font-weight: 900;
            color: var(--ink-strong);
            line-height: 1.3;
        }
        .itin-header-focus-dot {
            color: #B7ACA7;
            font-size: 0.78rem;
            line-height: 1;
        }
        .itin-header-focus-meta {
            min-width: 0;
            font-size: 0.82rem;
            font-weight: 700;
            color: #857B76;
            line-height: 1.3;
            word-break: break-word;
        }
        .itin-header-mode-pill {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding: 0 12px;
            border-radius: 999px;
            background: var(--trip-accent-soft);
            border: 1px solid var(--trip-accent-soft);
            color: var(--trip-accent-strong);
            font-size: 0.77rem;
            font-weight: 900;
        }
        .itin-header-weather-row {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            min-width: 0;
            flex: 0 1 auto;
        }
        .itin-header-weather-row[hidden] {
            display: none !important;
        }
        .itin-header-weather-chip {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            margin: 0;
            min-height: 36px;
            padding: 8px 14px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 4px 12px rgba(138, 125, 122, 0.06);
            color: #6F6864;
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1.35;
            font-family: inherit;
            text-align: left;
            white-space: normal;
            cursor: pointer;
            transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
        }
        .itin-header-weather-chip:hover {
            transform: translateY(-1px);
            border-color: #DCCFC8;
            box-shadow: 0 6px 16px rgba(138, 125, 122, 0.12);
        }
        .itin-header-weather-chip:focus-visible {
            outline: 2px solid rgba(99, 137, 196, 0.34);
            outline-offset: 2px;
        }
        .itin-header-weather-chip.is-rain-alert {
            background: rgba(238, 246, 255, 0.92);
            border-color: #C7D9F4;
            color: #4A688E;
        }
        .itin-header-weather-chip-copy {
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .itin-header.has-cover .itin-header-focus-pill,
        .itin-header.has-cover .itin-header-weather-chip {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.28);
            color: #fff;
            box-shadow: none;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .itin-header.has-cover .itin-header-focus-main,
        .itin-header.has-cover .itin-header-focus-meta,
        .itin-header.has-cover .itin-header-focus-dot {
            color: #fff;
        }
        .itin-cover-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
            flex-wrap: wrap;
        }
        .itin-cover-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 0 13px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 22%, transparent);
            background: rgba(255, 255, 255, 0.76);
            color: var(--trip-accent-strong);
            font: 800 0.78rem/1 'Nunito', 'Noto Sans TC', sans-serif;
            cursor: pointer;
            transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
        }
        .itin-cover-btn:hover {
            transform: translateY(-1px);
            background: #fff;
        }
        .itin-header.has-cover .itin-cover-btn {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.28);
            background: rgba(20, 24, 28, 0.22);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .itin-header.has-cover .itin-cover-btn:hover {
            background: rgba(20, 24, 28, 0.38);
        }
        body.itin-cover-editor-open {
            overflow: hidden;
        }
        .itin-cover-editor-root {
            position: fixed;
            inset: 0;
            z-index: 8100;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        .itin-cover-editor-overlay {
            position: absolute;
            inset: 0;
            background: rgba(28, 31, 36, 0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .itin-cover-editor {
            position: relative;
            width: min(680px, calc(100vw - 24px));
            max-height: min(92vh, 760px);
            overflow-y: auto;
            margin-bottom: max(12px, env(safe-area-inset-bottom, 0px));
            padding: 20px;
            border-radius: 26px;
            background: #fff;
            box-shadow: 0 22px 54px rgba(27, 34, 40, 0.26);
        }
        .itin-cover-editor-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 42px;
            height: 42px;
            border: 1px solid var(--sec-border);
            border-radius: 999px;
            background: var(--sec-surface);
            color: var(--sec-text);
            font-size: 1.35rem;
            line-height: 1;
            cursor: pointer;
        }
        .itin-cover-editor-kicker {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 0 10px;
            margin-bottom: 10px;
            border-radius: 999px;
            background: var(--trip-accent-soft);
            color: var(--trip-accent-strong);
            font-size: 0.75rem;
            font-weight: 900;
        }
        .itin-cover-editor h2 {
            padding-right: 42px;
            color: var(--ink-strong);
            font-size: 1.24rem;
            font-weight: 900;
            line-height: 1.35;
        }
        .itin-cover-editor-copy {
            margin: 8px 0 16px;
            color: var(--muted);
            font-size: 0.85rem;
            line-height: 1.6;
        }
        .itin-cover-editor-stage {
            position: relative;
            width: 100%;
            height: clamp(284px, 49vh, 420px);
            overflow: hidden;
            border-radius: 18px;
            background: #161b20;
            cursor: grab;
            touch-action: none;
            user-select: none;
        }
        .itin-cover-editor-stage.is-dragging {
            cursor: grabbing;
        }
        .itin-cover-editor-crop-window {
            position: absolute;
            width: calc(100% - 32px);
            aspect-ratio: 13 / 9;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .itin-cover-editor-crop-window img {
            position: absolute;
            max-width: none;
            display: block;
            pointer-events: none;
        }
        .itin-cover-editor-crop-guide {
            position: absolute;
            inset: 0;
            z-index: 2;
            border: 2px solid rgba(255, 255, 255, 0.96);
            border-radius: 14px;
            box-shadow: 0 0 0 999px rgba(12, 17, 22, 0.58);
            pointer-events: none;
        }
        .itin-cover-editor-crop-guide span {
            position: absolute;
            left: 50%;
            bottom: 12px;
            transform: translateX(-50%);
            padding: 5px 12px;
            border-radius: 999px;
            color: #fff;
            background: rgba(20, 24, 28, 0.5);
            font-size: 0.74rem;
            font-weight: 800;
            pointer-events: none;
        }
        .itin-cover-editor-zoom {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-top: 14px;
            color: var(--sec-text);
            font-size: 0.8rem;
            font-weight: 800;
        }
        .itin-cover-editor-zoom button {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border: 1px solid var(--sec-border);
            border-radius: 999px;
            background: var(--sec-surface);
            color: var(--trip-accent-strong);
            font-size: 1.3rem;
            font-weight: 700;
            cursor: pointer;
        }
        .itin-cover-editor-status {
            min-height: 22px;
            margin: 10px 0 4px;
            color: var(--sec-text);
            font-size: 0.78rem;
            font-weight: 700;
        }
        .itin-cover-editor-actions {
            display: flex;
            gap: 10px;
        }
        .itin-cover-editor-cancel,
        .itin-cover-editor-save {
            flex: 1 1 0;
            min-height: 46px;
            border-radius: 999px;
            font: 800 0.88rem/1 'Nunito', 'Noto Sans TC', sans-serif;
            cursor: pointer;
        }
        .itin-cover-editor-cancel {
            border: 1px solid var(--sec-border);
            background: var(--sec-surface);
            color: var(--sec-text);
        }
        .itin-cover-editor-save {
            border: 0;
            background: var(--trip-accent);
            color: #fff;
            box-shadow: 0 8px 18px color-mix(in srgb, var(--trip-accent) 28%, transparent);
        }
        .itin-cover-editor-save:disabled {
            cursor: wait;
            opacity: 0.68;
        }
        @media (prefers-reduced-motion: reduce) {
            :root.is-theme-transitioning {
                transition-duration: 1ms;
            }
        }
        .itin-workbench {
            padding: 0 1rem;
            margin: -0.15rem 0 1.2rem;
        }
        .itin-workbench-shell {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            background: var(--card);
            border-radius: var(--radius-xl);
            border: var(--glass-border);
            box-shadow: 
                var(--shadow),
                inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
                inset 0 -1px 0 rgba(255, 255, 255, 0.2);
            padding: 16px;
        }
        .itin-workbench-head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 12px; margin-bottom: 12px;
        }
        .itin-workbench-kicker {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 4px 10px; border-radius: var(--radius-pill);
            background: var(--trip-accent-soft); color: var(--accent);
            font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em;
        }
        .itin-workbench-title {
            margin: 8px 0 0;
            font-size: 1.12rem; font-weight: 900; color: var(--ink-strong);
        }
        .itin-workbench-subtitle {
            margin: 6px 0 0;
            font-size: 0.86rem; line-height: 1.65; color: var(--muted);
        }
        .itin-workbench-summary {
            display: inline-flex; align-items: center; justify-content: center;
            min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill);
            background: rgba(255,255,255,0.78); color: var(--accent);
            border: var(--glass-border); font-size: 0.82rem; font-weight: 800;
            white-space: nowrap;
        }
        .itin-workbench-grid {
            display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
        }
        .itin-workbench-card {
            border: var(--glass-border);
            background: rgba(255, 255, 255, 0.60);
            border-radius: var(--radius-lg);
            padding: 14px;
            text-align: left;
            display: grid;
            gap: 8px;
            box-shadow: var(--shadow-soft);
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .itin-workbench-card:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 8px 20px color-mix(in srgb, var(--trip-accent) 8%, transparent);
            border-color: var(--primary);
        }
        .itin-workbench-card:active {
            transform: scale(0.95);
            box-shadow: 0 4px 10px color-mix(in srgb, var(--trip-accent) 4%, transparent);
        }
        .itin-workbench-card.accent-prepare { background: linear-gradient(180deg, rgba(16, 172, 132, 0.08), rgba(255,255,255,0.60)); }
        .itin-workbench-card.accent-memory { background: linear-gradient(180deg, rgba(255, 75, 75, 0.05), rgba(255,255,255,0.60)); }
        .itin-workbench-card.accent-members { background: linear-gradient(180deg, rgba(84, 160, 255, 0.08), rgba(255,255,255,0.60)); }
        .itin-workbench-card.accent-expense { background: linear-gradient(180deg, rgba(255, 159, 67, 0.08), rgba(255,255,255,0.60)); }
        .itin-workbench-card-head {
            display: flex; align-items: center; justify-content: space-between; gap: 8px;
        }
        .itin-workbench-icon {
            width: 40px; height: 40px; border-radius: var(--radius-md);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.2rem; background: var(--trip-accent-soft);
            transition: transform 0.3s ease;
        }
        .itin-workbench-card:hover .itin-workbench-icon {
            transform: scale(1.1) rotate(-5deg);
        }
        .itin-workbench-arrow {
            font-size: 1rem; font-weight: 900; color: var(--muted);
            transition: transform 0.2s ease;
        }
        .itin-workbench-card:hover .itin-workbench-arrow {
            transform: translateX(3px);
            color: var(--accent);
        }
        .itin-workbench-label {
            margin: 0; font-size: 0.9rem; font-weight: 800; color: var(--ink-strong);
        }
        .itin-workbench-value {
            margin: 0; font-size: 1.18rem; font-weight: 900; color: var(--ink-strong);
        }
        .itin-workbench-note {
            margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--muted);
        }
        body.is-itinerary.is-itinerary-editing .itin-bottom-nav,
        body.is-itinerary.is-itinerary-editing .itin-nav-handle,
        body.is-itinerary.is-itinerary-editing .ai-speed-dial,
        body.is-itinerary.is-itinerary-editing .ai-sd-scrim,
        body.is-itinerary.is-itinerary-editing .itin-fab-top,
        body.is-itinerary.is-itinerary-editing #assistant-fab,
        body.is-itinerary.is-itinerary-editing #chat-fab {
            display: none !important;
        }

        /* --- Logistics (single collapsible info panel, matches HTML sample) --- */
        .itin-logistics { padding: 0 1rem; margin-bottom: 1.2rem; }
        .itin-logistics-panel {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            background: var(--card);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            box-shadow: var(--shadow-soft);
            border: var(--glass-border);
        }
        .itin-logistics-panel > summary {
            list-style: none; cursor: pointer; user-select: none;
            -webkit-tap-highlight-color: transparent; outline: none;
        }
        .itin-logistics-panel > summary::-webkit-details-marker { display: none; }
        .itin-logistics-panel > summary h2 {
            font-size: 1.15rem; font-weight: 700; color: var(--ink-strong);
            display: flex; align-items: center; gap: 8px; margin: 0;
        }
        .itin-logistics-chevron {
            font-size: 0.8rem; color: var(--muted); margin-left: auto;
            transition: transform 0.3s ease;
        }
        .itin-logistics-panel[open] > summary .itin-logistics-chevron { transform: rotate(180deg); color: var(--accent); }

        .itin-logistics-list {
            list-style: none; margin-top: 12px; padding: 0;
        }
        .itin-logistics-item {
            margin-bottom: 1rem; padding-bottom: 1rem;
            font-size: 0.95rem; color: var(--muted);
            border-bottom: 1px dashed var(--border); line-height: 1.7;
        }
        .itin-logistics-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
        .itin-logistics-item strong {
            color: var(--ink); display: inline-block; margin-bottom: 4px; font-size: 1rem;
        }
        .itin-logistics-item .itin-field-key {
            color: var(--ink-strong); font-weight: 600;
        }

        /* --- Day tabs (sticky) ---
           Shares the unified frosted-glass top-bar recipe with the notes /
           expense / prepare sticky sub-bars so every page's pinned header
           looks the same (see mobile.css "Unified frosted-glass sticky top bar"). */
        .itin-day-tabs-sticky {
            position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100;
            background: rgba(255, 255, 255, 0.6);
            -webkit-backdrop-filter: blur(20px) saturate(140%);
            backdrop-filter: blur(20px) saturate(140%);
            padding: 12px 0 10px; margin: 0 0 0.9rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.55);
            box-shadow: 0 8px 22px rgba(80, 58, 41, 0.06),
                        inset 0 1px 0 rgba(255, 255, 255, 0.6);
            transition: padding 0.26s ease;
        }
        /* Invisible probe just above the sticky bar; an IntersectionObserver
           flips .is-condensed on the bar the moment it pins to the top. */
        .itin-sticky-sentinel {
            height: 1px;
            margin: 0;
            pointer-events: none;
        }
        
        .itin-day-tabs {
            display: flex; gap: 12px;
            padding: 4px 1.5rem 10px;
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            scrollbar-width: none; scroll-snap-type: x mandatory;
            /* Scroll masks applied to the scrolling container */
            mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
        }
        .itin-day-tabs::-webkit-scrollbar { display: none; }

        .itin-day-tab {
            position: relative;
            display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
            min-width: 104px; min-height: 72px; padding: 11px 12px 12px;
            border: 1px solid rgba(218, 207, 199, 0.86); background: rgba(255, 255, 255, 0.86);
            border-radius: 18px; color: #8A7E7A; cursor: pointer;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, min-height 0.26s ease, padding 0.26s ease, border-radius 0.26s ease;
            scroll-snap-align: center; flex-shrink: 0;
            box-shadow: 0 8px 22px rgba(80, 58, 41, 0.05);
            font-family: inherit;
            text-align: left;
            -webkit-tap-highlight-color: transparent;
        }
        .itin-day-tab::after {
            content: '';
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 7px;
            height: 3px;
            border-radius: 999px;
            background: transparent;
            transition: background-color 0.18s ease;
        }
        .itin-day-tab:hover {
            transform: translateY(-1px);
            border-color: #DCCFC8;
            box-shadow: 0 10px 24px rgba(80, 58, 41, 0.08);
        }
        .itin-day-tab.active {
            background: var(--trip-accent); color: #FFFFFF; border-color: var(--trip-accent);
            transform: translateY(-2px); box-shadow: 0 14px 30px rgba(60, 58, 54, 0.22);
        }
        .itin-day-tab.active::after {
            background: var(--trip-highlight);
        }
        .itin-day-tab:focus-visible {
            outline: 3px solid var(--trip-accent-soft);
            outline-offset: 3px;
        }
        .itin-day-tab-label {
            font-size: 0.82rem;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1.15;
            text-transform: uppercase;
        }
        .itin-day-tab-date {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            max-height: 30px;
            margin-top: 7px;
            padding: 3px 8px;
            border-radius: 999px;
            background: #F6F1EC;
            color: #746A66;
            font-size: 0.76rem;
            font-weight: 800;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            transition: max-height 0.26s ease, opacity 0.18s ease, margin-top 0.26s ease, padding 0.26s ease;
        }
        .itin-day-tab.active .itin-day-tab-date {
            background: rgba(255, 255, 255, 0.18);
            color: #FFFFFF;
        }

        /* --- Condensed sticky day tabs (after the bar pins to the top) ---
           Shrinks each tab to a compact pill and tucks the date line away,
           giving the itinerary more room. Toggled by .is-condensed (set via
           an IntersectionObserver on a sentinel above the bar). */
        .itin-day-tabs-sticky.is-condensed {
            padding-top: 6px;
            padding-bottom: 6px;
        }
        .itin-day-tabs-sticky.is-condensed .itin-day-tabs {
            padding-bottom: 4px;
        }
        .itin-day-tabs-sticky.is-condensed .itin-day-tab {
            min-height: 40px;
            min-width: 92px;
            padding: 7px 12px;
            border-radius: 14px;
        }
        .itin-day-tabs-sticky.is-condensed .itin-day-tab.active {
            transform: none;
        }
        .itin-day-tabs-sticky.is-condensed .itin-day-tab::after {
            bottom: 4px;
        }
        .itin-day-tabs-sticky.is-condensed .itin-day-tab-date {
            max-height: 0;
            margin-top: 0;
            padding-top: 0;
            padding-bottom: 0;
            opacity: 0;
        }

        /* --- Share Button --- */
        .itin-share-btn {
            flex: 0 0 auto;
            width: 46px; height: 46px; border-radius: var(--radius-pill);
            background: transparent; border: none;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease;
            box-shadow: none;
            padding: 0;
        }
        .itin-share-btn:hover { background: transparent; transform: scale(1.05); }
        .itin-share-btn:active { transform: scale(0.95); }
        .itin-share-btn span { line-height: 1; }
        .itin-header-more-btn {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--ink-strong);
            letter-spacing: 0.06em;
        }
        .itin-header.has-cover .itin-header-more-btn {
            color: #fff;
        }
        .itin-header.has-cover .itin-share-btn {
            background: rgba(255, 255, 255, 0.16);
        }
        .itin-share-btn-icon {
            width: 30px;
            height: 30px;
            display: block;
            object-fit: contain;
            pointer-events: none;
        }

        /* --- Day panel --- */
        .itin-day-panel {
            display: none; padding: 0 1rem 40px;
            animation: fadeIn 0.4s ease forwards;
        }
        .itin-day-panel.active {
            display: block;
            touch-action: pan-y;
        }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        .itin-day-card {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            background: var(--card);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-soft);
            border: var(--glass-border);
            overflow: hidden;
        }
        .itin-day-header {
            padding: 1.5rem 1.5rem 1rem;
        }
        .itin-day-title { font-weight: 800; font-size: 1.2rem; color: var(--ink-strong); line-height: 1.4; font-family: inherit; }
        .itin-day-meta { font-size: 0.88rem; color: var(--muted); margin-top: 2px; }
 
        /* --- Plan toggle (main / backup) --- */
        .itin-plan-toggle {
            display: flex;
            background: rgba(255, 255, 255, 0.42);
            -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
            padding: 4px;
            margin: 0 1.5rem 1rem;
            border-radius: 14px;
            border: 1px solid var(--border);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }
        .itin-plan-toggle-btn {
            flex: 1;
            padding: 10px 0;
            border: 1px solid transparent;
            background: transparent;
            border-radius: 10px;
            font-size: 0.92rem;
            font-weight: 800;
            color: var(--muted);
            cursor: pointer;
            transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
            font-family: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .itin-plan-toggle-btn:active {
            transform: scale(0.975);
        }
        .itin-plan-toggle-btn.active {
            color: var(--trip-accent-strong);
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 12px color-mix(in srgb, var(--trip-accent) 8%, transparent);
        }
        .itin-plan-toggle-icon {
            width: 16px;
            height: 16px;
            stroke-width: 2.2;
            flex-shrink: 0;
        }
        .itin-member-filters {
            display: flex; align-items: center; gap: 8px; overflow-x: auto;
            padding: 0.65rem 1.5rem 0.15rem; scrollbar-width: none;
        }
        .itin-member-filters::-webkit-scrollbar { display: none; }
        .itin-member-filters-label {
            flex: 0 0 auto; color: #8A7A70; font-size: 0.78rem; font-weight: 800;
        }
        .itin-member-filter-pill,
        .itin-participant-option {
            flex: 0 0 auto; padding: 7px 12px; border: 1px solid #E2DAD4;
            border-radius: 999px; background: #fff; color: #6D5C53;
            font-size: 0.82rem; font-weight: 700; font-family: inherit; cursor: pointer;
        }
        .itin-member-filter-pill.active,
        .itin-participant-option.active {
            border-color: var(--ink-strong); background: var(--ink-strong); color: #fff;
        }
        .itin-member-filter-pill.is-static { cursor: default; }
        .itin-plan-timeline { display: none; }
        .itin-plan-timeline.active { display: block; animation: fadeIn 0.3s ease; }
        .itin-plan-timeline.backup .itin-time-block::before { background: #E2DFDD; }
        .itin-plan-timeline.backup .itin-time-block::after { border-color: #C5BCB9; }
        .itin-edit-plan-section-cue {
            display: none;
        }

        /* --- Timeline --- */
        .itin-timeline { padding: 0.5rem 1.5rem 2rem; }
        .itin-time-block {
            position: relative; padding-left: 28px; padding-bottom: 28px; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .itin-time-block:last-child { padding-bottom: 0; }
        .itin-time-block::before {
            content: ''; position: absolute; left: 5px; top: 24px; bottom: -10px;
            width: 1px; background: #DCCCBF; z-index: 1;
        }
        .itin-time-block:last-child::before { display: none; }
        .itin-time-block::after {
            content: ''; position: absolute; left: 0; top: 7px;
            width: 11px; height: 11px; border-radius: 50%;
            background: var(--card); border: 3px solid #DCCCBF; z-index: 2;
            transition: all 0.3s ease;
        }
        .itin-time-block.past-time::after {
            background: var(--trip-accent);
            border-color: var(--trip-accent);
            opacity: 0.45;
            transition: none;
        }
        .itin-time-block.current-time-highlight::after {
            background: var(--trip-accent);
            border-color: #FFF;
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--trip-accent) 24%, transparent);
            animation: itinCurrentPulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* 長按 → 進入編輯時，被聚焦的行程卡短暫高亮，讓使用者知道改的是這張 */
        @keyframes itinBlockFocusFlash {
            0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--trip-accent) 50%, transparent); }
            60% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--trip-accent) 22%, transparent); }
            100% { box-shadow: 0 0 0 9px transparent; }
        }
        .itin-block-focus-flash {
            animation: itinBlockFocusFlash 1.5s ease-out 1;
            border-radius: 14px;
        }

        .itin-time-badge {
            display: inline-flex; align-items: center; background: #F7F3EF; color: #7A6F6B;
            font-size: 0.85rem; font-weight: 700; padding: 4px 10px;
            min-height: 32px; border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border);
        }
        .itin-time-block.current-time-highlight .itin-time-badge {
            background: var(--trip-accent);
            color: #FFF;
            border-color: var(--trip-accent);
            box-shadow: 0 4px 10px color-mix(in srgb, var(--trip-accent) 18%, transparent);
        }
        .itin-time-block-meta-row {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 6px;
        }
        .itin-time-block-meta-row .itin-time-badge,
        .itin-time-block-meta-row .itin-time-block-category,
        .itin-time-block-meta-row .itin-budget-badge {
            margin-bottom: 0;
        }
        .itin-time-block-meta-row .itin-budget-badge {
            margin-left: 0;
        }
        .itin-time-block-title {
            display: block; color: var(--ink-strong); font-size: 1.05rem;
            font-weight: 800; margin-bottom: 4px; line-height: 1.4;
        }
        /* 觀看模式行程卡不可選取，避免長按編輯時跳出系統選字選單 */
        .itin-time-block[data-activity-id]:not(.itin-time-block-editing),
        .itin-time-block[data-activity-id]:not(.itin-time-block-editing) * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }
        .itin-time-block[data-activity-id]:not(.itin-time-block-editing) {
            touch-action: pan-y;
        }
        .itin-time-block-category {
            display: inline-block; font-size: 0.76rem; font-weight: 700;
            padding: 3px 10px; border-radius: var(--radius-pill); margin-bottom: 6px;
            letter-spacing: 0.02em;
            background: #F3EEE8;
            color: #7C6F69;
        }

        /* Category badge colors */
        .itin-cat-景點, .itin-cat-觀光 { background: #FEE2E2; color: #991B1B; }
        .itin-cat-餐廳, .itin-cat-餐飲, .itin-cat-美食, .itin-cat-食 { background: #FFEDD5; color: #9A3412; }
        .itin-cat-交通 { background: #DBEAFE; color: #1E40AF; }
        .itin-cat-住宿, .itin-cat-飯店 { background: #EDE9FE; color: #5B21B6; }
        .itin-cat-購物 { background: #FCE7F3; color: #9D174D; }
        .itin-cat-休息, .itin-cat-自由 { background: #F3F4F6; color: #374151; }
        .itin-cat-航班, .itin-cat-機票 { background: #E0F2FE; color: #075985; }
        .itin-cat-租車 { background: #D1FAE5; color: #065F46; }
        .itin-cat-票券 { background: #FEF3C7; color: #854D0E; }
        /* Map pin link (inline, next to title like Tokyo HTML 📍導航) */
        .itin-map-pin {
            position: relative;
            display: inline-flex; align-items: center; gap: 2px;
            font-size: 0.78rem; font-weight: 700; color: #7A6F6B;
            min-width: 44px; min-height: 44px; background: #F0EAE5; padding: 6px 12px; border-radius: 6px;
            text-decoration: none; border: 1px solid var(--border);
            margin-left: 6px; vertical-align: middle;
            transition: background 0.2s;
            touch-action: manipulation;
        }
        .itin-map-pin:hover, .itin-map-pin:active { background: #E5DDD6; color: var(--ink-strong); }
        .itin-map-pin:focus-visible {
            outline: 2px solid var(--trip-accent);
            outline-offset: 2px;
        }
        /* 地圖按鈕已收斂為右上角「單顆」.itin-map-pin（與展開 chevron 同款，樣式見
           .itin-time-block-title-row .itin-map-pin 區）；舊的 N/G 雙圓 group 樣式已移除。 */
        .itin-map-pin.itin-map-pin-inline {
            margin-left: 0;
        }
        .itin-inline-link {
            color: #A36348;
            font-weight: 700;
            text-decoration: underline;
            text-decoration-thickness: 1.5px;
            text-underline-offset: 3px;
            word-break: break-all;
        }
        .itin-inline-link:hover,
        .itin-inline-link:active {
            color: var(--ink-strong);
        }
        .itin-budget-badge {
            display: inline-block; font-size: 0.85rem; font-weight: 600;
            color: #A16207; background: #FEF3C7;
            padding: 4px 10px; border-radius: 8px; margin-left: 6px; margin-bottom: 6px;
            border: 1px solid #FDE68A;
        }
        .itin-participant-chips {
            display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 7px;
        }
        .itin-participant-chip {
            display: inline-flex; align-items: center; border-radius: 999px;
            background: #F2EDEA; color: #66554B; padding: 3px 8px;
            font-size: 0.74rem; font-weight: 700; line-height: 1.4;
        }
        .itin-participant-chip.all { background: #EEF3EE; color: #52624E; }
        .itin-note-text {
            margin: 6px 0 2px; padding: 10px 14px;
            font-size: 0.92rem; color: var(--ink);
            background: color-mix(in srgb, var(--trip-accent-soft) 38%, #FFFDF5); border-radius: 12px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 18%, #F5EAD6); line-height: 1.7;
        }
        .itin-time-block-primary-fields {
            display: grid;
            gap: 6px;
            margin-top: 8px;
            padding: 12px 14px;
            background: rgba(255, 255, 255, 0.78);
            border-radius: 12px;
            border: 1px solid var(--border);
            font-size: 0.92rem;
            line-height: 1.7;
        }
        .itin-note-text.itin-note-text-editor {
            display: block;
            width: 100%;
            resize: none;
            overflow: hidden;
            outline: none;
            font-family: inherit;
        }
        .itin-time-block-primary-fields .itin-field-row-visible {
            padding: 0;
        }
        .itin-time-block-primary-fields .itin-field-key {
            font-weight: 700;
            color: var(--ink-strong);
        }

        /* Expandable extra fields */
        .itin-time-block-fields {
            display: none; margin-top: 8px; padding: 12px 14px;
            background: var(--bg); border-radius: 12px;
            border: 1px solid var(--border); font-size: 0.92rem; line-height: 1.7;
        }
        .itin-time-block.open .itin-time-block-fields { display: block; }
        .itin-time-block-fields .itin-field-row { padding: 2px 0; }
        .itin-time-block-fields .itin-field-key { font-weight: 700; color: var(--ink-strong); }
        .itin-time-block-chevron {
            font-size: 0.7rem; color: var(--muted); margin-left: 6px;
            transition: transform 0.2s; display: inline-block;
        }
        .itin-time-block.open .itin-time-block-chevron { transform: rotate(180deg); }
        @keyframes itinCurrentPulse {
            0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--trip-accent) 32%, transparent); }
            70% { box-shadow: 0 0 0 10px transparent; }
            100% { box-shadow: 0 0 0 0 transparent; }
        }
        .itin-time-block.itin-time-block-editing {
            cursor: default;
            padding-left: 36px;
            padding-right: 164px;
            padding-bottom: 18px;
        }
        .itin-time-block.itin-time-block-editing::before {
            left: 13px;
        }
        .itin-time-block.itin-time-block-editing::after {
            left: 8px;
        }
        .itin-time-badge.itin-time-badge-editing {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
        }
        .itin-time-block.itin-time-block-editing .itin-time-badge,
        .itin-time-block.itin-time-block-editing .itin-time-block-category {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            max-width: 100%;
            vertical-align: top;
        }
        .itin-inline-plain-input,
        .itin-inline-editable {
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            padding: 0;
            margin: 0;
            min-width: 0;
            outline: none;
        }
        .itin-inline-plain-input {
            width: 100%;
        }
        .itin-inline-plain-input::placeholder {
            color: #A89A93;
        }
        .itin-inline-editable {
            display: inline-block;
            min-width: 1ch;
            width: auto;
            max-width: 100%;
            white-space: pre-wrap;
            word-break: break-word;
            cursor: text;
        }
        .itin-inline-editable.is-block {
            display: block;
            width: 100%;
        }
        .itin-inline-editable[contenteditable="true"]:empty::before {
            content: attr(data-placeholder);
            color: #A89A93;
        }
        .itin-inline-editable[contenteditable="true"]:focus {
            outline: none;
            background: rgba(245, 238, 232, 0.9);
            border-radius: 8px;
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--trip-accent) 14%, transparent);
        }
        .itin-inline-plain-input.time {
            width: 74px;
            font-size: 0.84rem;
            font-weight: 700;
            color: #7A6F6B;
            font-variant-numeric: tabular-nums;
        }
        .itin-inline-plain-input.time-range,
        .itin-inline-editable.time-range {
            width: 112px;
            text-align: center;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .itin-time-select-range {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-wrap: nowrap;
            max-width: 100%;
        }
        .itin-time-picker {
            min-width: 88px;
            border: 0;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.9);
            color: #7A6F6B;
            font: inherit;
            font-size: 0.82rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            padding: 3px 6px;
            outline: none;
            box-shadow: inset 0 0 0 1px rgba(209, 196, 185, 0.9);
        }
        .itin-time-picker:focus {
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--trip-accent) 18%, transparent);
        }
        .itin-time-range-divider {
            color: #9E8F86;
            font-size: 0.78rem;
            font-weight: 800;
            line-height: 1;
        }
        .itin-inline-badge-sep {
            color: #A1928B;
            font-size: 0.82rem;
            font-weight: 700;
        }
        .itin-inline-plain-input.title,
        .itin-inline-editable.title {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--ink-strong);
            line-height: 1.4;
        }
        .itin-time-block.itin-time-block-editing .itin-time-block-title {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .itin-time-block.itin-time-block-editing .itin-inline-editable.title {
            flex: 1 1 180px;
        }
        .itin-time-block.itin-time-block-editing,
        .itin-note-block.itin-note-block-editing,
        .itin-divider-block.itin-divider-block-editing,
        .itin-day-card,
        .itin-logistics-section-card,
        .itin-logistics-item.itin-logistics-item-edit-card.is-editing {
            transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }
        .itin-time-block.itin-time-block-editing:focus-within,
        .itin-note-block.itin-note-block-editing:focus-within,
        .itin-divider-block.itin-divider-block-editing:focus-within,
        .itin-day-card:focus-within,
        .itin-logistics-section-card:focus-within,
        .itin-logistics-item.itin-logistics-item-edit-card.is-editing:focus-within {
            background: rgba(255, 250, 247, 0.94);
            box-shadow: 0 10px 26px rgba(124, 103, 88, 0.08);
        }
        .itin-inline-category-input,
        .itin-inline-editable.category {
            width: auto;
            min-width: 56px;
            max-width: 112px;
            text-align: center;
            white-space: nowrap;
        }
        .itin-edit-block-tools {
            position: absolute;
            right: 0;
            top: 2px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: flex-end;
            opacity: 0;
            transform: translateY(4px);
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .itin-edit-block-tools .itin-mini-btn,
        .itin-edit-block-tools .itin-mini-btn-danger {
            background: rgba(255,255,255,0.86);
        }
        .itin-time-block-fields.editing {
            display: grid;
            gap: 8px;
        }
        .itin-time-block-actions {
            display: flex;
            justify-content: flex-end;
            opacity: 0.14;
            transition: opacity 0.18s ease;
        }
        .itin-day-title-prefix {
            color: var(--ink-strong);
            font-weight: 800;
            flex: none;
        }
        .itin-day-title {
            display: flex;
            align-items: flex-start;
            gap: 4px;
            flex-wrap: wrap;
        }
        .itin-inline-plain-input.day-title,
        .itin-inline-editable.day-title {
            min-width: 120px;
            font-size: 1.2rem;
            font-weight: 800;
            color: var(--ink-strong);
            line-height: 1.4;
            width: auto;
            flex: 1 1 140px;
        }
        .itin-day-meta-edit {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 2px;
        }
        .itin-inline-plain-input.day-meta,
        .itin-inline-plain-input.day-date,
        .itin-inline-editable.day-meta,
        .itin-inline-editable.day-date {
            width: auto;
            color: var(--muted);
            font-size: 0.88rem;
            font-weight: 600;
        }
        .itin-day-header-tools {
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            transform: translateY(4px);
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .itin-day-header-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .itin-day-header-actions-compact {
            display: none;
        }
        .itin-day-quick-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(4px);
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .itin-day-quick-btn {
            border: 1px solid rgba(223, 215, 208, 0.92);
            border-radius: 999px;
            background: rgba(255,255,255,0.86);
            color: #7A6F6B;
            font-family: inherit;
            font-size: 0.76rem;
            font-weight: 800;
            padding: 6px 10px;
            cursor: pointer;
            white-space: nowrap;
        }
        .itin-day-quick-btn:hover,
        .itin-day-quick-btn:focus-visible {
            background: #fff;
            color: var(--ink-strong);
            border-color: color-mix(in srgb, var(--trip-accent) 32%, transparent);
            outline: none;
        }
        .itin-day-compact-menu {
            position: relative;
        }
        .itin-day-compact-menu summary {
            list-style: none;
        }
        .itin-day-compact-menu summary::-webkit-details-marker {
            display: none;
        }
        .itin-day-compact-summary {
            min-width: 0;
        }
        .itin-day-compact-menu-panel {
            margin-top: 8px;
            display: grid;
            gap: 6px;
        }
        .itin-day-compact-menu-panel .itin-mini-btn-danger {
            justify-content: center;
        }
        .itin-day-card:hover .itin-day-quick-actions,
        .itin-day-card:focus-within .itin-day-quick-actions {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .itin-activity-more {
            margin-top: 10px;
            display: grid;
            gap: 8px;
        }
        .itin-mobile-activity-summary,
        .itin-activity-sheet-layer {
            display: none;
        }
        .itin-mobile-activity-move-controls {
            display: none;
        }

        /* ── 電腦版行程編輯：活動卡片 + 置中 Modal（重用手機 sheet 的欄位／儲存邏輯）── */
        @media (min-width: 721px) {
            body.is-itinerary-editing .itin-time-block.itin-time-block-editing .itin-desktop-activity-inline {
                display: none;
            }
            body.is-itinerary-editing .itin-mobile-activity-summary {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 12px;
                min-height: 64px;
            }
            .itin-mobile-activity-summary-body {
                min-width: 0; display: grid; gap: 5px; padding: 6px 6px;
                border-radius: 12px; cursor: pointer;
                transition: background 0.15s ease;
            }
            .itin-mobile-activity-summary-body:hover { background: color-mix(in srgb, var(--trip-accent) 10%, transparent); }
            .itin-mobile-activity-summary-body:focus-visible {
                outline: 2px solid color-mix(in srgb, var(--trip-accent) 42%, transparent); outline-offset: 4px;
            }
            .itin-mobile-activity-summary-top,
            .itin-mobile-activity-meta,
            .itin-mobile-activity-actions {
                display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            }
            .itin-mobile-activity-time {
                color: #5F5148; font-size: 0.84rem; font-weight: 900; font-variant-numeric: tabular-nums;
            }
            .itin-mobile-activity-category {
                max-width: 100%; padding: 4px 10px; border-radius: 999px;
                background: #F6EFE8; color: #7A5B37; font-size: 0.76rem; font-weight: 900; line-height: 1.2;
            }
            .itin-mobile-activity-title {
                min-width: 0; color: var(--ink-strong); font-size: 1.02rem; line-height: 1.35; overflow-wrap: anywhere;
            }
            .itin-mobile-activity-meta { color: #8A7A70; font-size: 0.76rem; font-weight: 800; }
            .itin-mobile-activity-actions { justify-content: flex-end; align-self: stretch; }
            .itin-mobile-activity-actions .itin-mini-btn,
            .itin-mobile-activity-actions .itin-map-pin {
                min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
            }

            /* 抽屜在電腦呈現為置中 Modal */
            body.is-itinerary-editing .itin-activity-sheet-layer {
                display: flex; position: fixed; inset: 0; z-index: 11000;
                align-items: center; justify-content: center; padding: 24px;
                background: rgba(37, 31, 27, 0.42);
            }
            .itin-activity-sheet {
                width: min(580px, 100%); max-height: 88vh;
                display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
                overflow: hidden; border-radius: 20px; background: #fff;
                border: 1px solid rgba(229, 221, 214, 0.95);
                box-shadow: 0 24px 64px rgba(47, 38, 31, 0.28); box-sizing: border-box;
            }
            .itin-activity-sheet-grip { display: none; }
            .itin-activity-sheet-head {
                display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
                padding: 16px 18px 12px; border-bottom: 1px solid rgba(229, 221, 214, 0.82);
            }
            .itin-activity-sheet-title-copy { min-width: 0; display: grid; gap: 3px; }
            .itin-activity-sheet-head h2 { margin: 0; color: var(--ink-strong); font-size: 1.08rem; line-height: 1.35; overflow-wrap: anywhere; }
            .itin-activity-sheet-kicker { color: #8A7A70; font-size: 0.76rem; font-weight: 900; line-height: 1.3; }
            .itin-activity-sheet-meta {
                width: fit-content; max-width: 100%; padding: 4px 9px; border-radius: 999px;
                background: #F7F3EF; color: #6F625C; font-size: 0.74rem; font-weight: 900;
                line-height: 1.2; overflow-wrap: anywhere;
            }
            .itin-activity-sheet-head .itin-mini-btn { flex: 0 0 auto; min-height: 36px; padding-inline: 12px; }
            .itin-activity-sheet-body {
                min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; gap: 14px; padding: 16px 18px 20px;
            }
            .itin-activity-sheet-section {
                display: grid; gap: 12px; padding-bottom: 14px;
                border-bottom: 1px solid rgba(229, 221, 214, 0.72);
            }
            .itin-activity-sheet-section:last-child { border-bottom: 0; padding-bottom: 0; }
            .itin-activity-sheet-section h3,
            .itin-activity-sheet-section-head h3 { margin: 0; color: #5F5148; font-size: 0.84rem; font-weight: 900; }
            .itin-activity-sheet-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
            .itin-activity-sheet-field { min-width: 0; display: grid; gap: 7px; }
            .itin-activity-sheet-field span { color: #8A7A70; font-size: 0.76rem; font-weight: 900; line-height: 1.3; }
            .itin-activity-sheet-input,
            .itin-activity-sheet-textarea,
            .itin-activity-sheet .itin-time-picker {
                width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
                border-radius: 12px; border: 1px solid rgba(229, 221, 214, 0.95);
                background: #FFFDFC; color: var(--ink-strong); font-family: inherit;
                font-size: 0.95rem; font-weight: 700; line-height: 1.45; outline: none;
            }
            .itin-activity-sheet-textarea { min-height: 96px; resize: vertical; }
            .itin-activity-sheet-input:focus,
            .itin-activity-sheet-textarea:focus,
            .itin-activity-sheet .itin-time-picker:focus {
                border-color: color-mix(in srgb, var(--trip-accent) 58%, transparent); background: #fff;
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent) 16%, transparent);
            }
            .itin-activity-sheet-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
            .itin-participant-selector { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
            .itin-participant-help { margin: 0; color: #8A7A70; font-size: 0.8rem; }
            .itin-activity-sheet-fields { display: grid; gap: 10px; }
            .itin-activity-sheet-field-row {
                display: grid; gap: 8px; padding: 10px; border-radius: 14px;
                background: #FBF8F4; border: 1px solid rgba(229, 221, 214, 0.86);
            }
            .itin-activity-sheet-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
            .itin-activity-sheet-footer {
                display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px;
                padding: 12px 18px; border-top: 1px solid rgba(229, 221, 214, 0.82); background: #fff;
            }
            .itin-activity-sheet-footer .itin-editor-btn,
            .itin-activity-sheet-footer .itin-editor-btn-ghost,
            .itin-activity-sheet-footer .itin-editor-btn-danger {
                width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
            }
        }
        .itin-activity-more-edit-panel {
            margin-top: 8px;
        }
        .itin-activity-more-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            cursor: pointer;
            border-radius: 12px;
            padding: 2px 2px 2px 0;
        }
        .itin-activity-more-btn {
            border: 1px solid rgba(223, 215, 208, 0.92);
            border-radius: 999px;
            background: rgba(255,255,255,0.84);
            color: #7A6F6B;
            font-family: inherit;
            font-size: 0.76rem;
            font-weight: 800;
            padding: 5px 10px;
            cursor: pointer;
            white-space: nowrap;
        }
        .itin-activity-more-btn:hover,
        .itin-activity-more-btn:focus-visible {
            background: #fff;
            color: var(--ink-strong);
            border-color: color-mix(in srgb, var(--trip-accent) 32%, transparent);
            outline: none;
        }
        .itin-activity-more-toggle:hover .itin-activity-more-summary,
        .itin-activity-more-toggle:focus-within .itin-activity-more-summary {
            color: var(--ink-strong);
        }
        .itin-activity-more-summary {
            color: var(--muted);
            font-size: 0.78rem;
            line-height: 1.55;
        }
        .itin-activity-more-panel {
            display: none;
            gap: 10px;
            padding: 2px 0 2px 12px;
            border-left: 1px solid rgba(229, 221, 214, 0.9);
        }
        .itin-activity-more.open .itin-activity-more-panel {
            display: grid;
        }
        .itin-activity-more.open .itin-activity-more-summary {
            display: none;
        }
        .itin-activity-more-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .itin-activity-more-empty {
            color: var(--muted);
            font-size: 0.8rem;
            line-height: 1.6;
        }
        .itin-empty-activity-hint {
            display: none;
        }
        .itin-activity-fixed-fields {
            display: grid;
            gap: 8px;
        }
        .itin-activity-fixed-field {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        .itin-activity-fixed-field.multiline {
            align-items: stretch;
        }
        .itin-activity-fixed-label {
            width: 2.8em;
            flex: none;
            color: var(--muted);
            font-size: 0.78rem;
            font-weight: 800;
            line-height: 1.7;
            padding-top: 2px;
        }
        .itin-activity-fixed-field.multiline .itin-activity-fixed-label {
            padding-top: 4px;
        }
        .itin-activity-fixed-input {
            flex: 1;
            min-width: 0;
        }
        .itin-activity-custom-fields {
            display: grid;
            gap: 8px;
        }
        .itin-activity-custom-fields-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
        }
        .itin-activity-custom-fields-title {
            color: var(--muted);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.02em;
        }
        .itin-day-tab.is-editing {
            position: relative;
            padding-right: 30px;
        }
        .itin-day-tab-edit-indicator {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
        }
        .itin-note-block.itin-note-block-editing,
        .itin-divider-block.itin-divider-block-editing {
            position: relative;
            padding-right: 92px;
        }
        .itin-note-block-editor {
            width: 100%;
            border: 0;
            background: transparent;
            color: var(--ink-strong);
            font-family: inherit;
            font-size: 0.92rem;
            line-height: 1.7;
            resize: none;
            overflow: hidden;
            outline: none;
            padding: 0;
            margin: 0;
        }
        .itin-note-block-editor.checklist {
            font-family: "SFMono-Regular", "Menlo", monospace;
        }
        .itin-note-text.itin-note-text-editor[contenteditable="true"],
        .itin-note-block-editor[contenteditable="true"] {
            min-height: 1.6em;
        }
        .itin-inline-edit-field-row {
            display: flex;
            align-items: flex-start;
            gap: 6px;
        }
        .itin-inline-edit-field-row + .itin-inline-edit-field-row {
            margin-top: 6px;
        }
        .itin-inline-edit-field-key {
            font-weight: 700;
            color: var(--ink-strong);
            min-width: 2.5em;
        }
        .itin-inline-edit-field-sep {
            color: var(--muted);
            flex: none;
        }
        .itin-inline-edit-field-value {
            flex: 1;
            min-width: 0;
        }
        .itin-inline-edit-field-tools {
            opacity: 0;
            transform: translateY(4px);
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
            flex: none;
        }
        .itin-inline-edit-field-row:hover .itin-inline-edit-field-tools,
        .itin-inline-edit-field-row:focus-within .itin-inline-edit-field-tools {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .itin-inline-backup-add {
            display: flex;
            justify-content: flex-end;
            padding: 0 1.5rem 1rem;
        }
        .itin-timeline .itin-block-insert-rail {
            margin-left: 0;
            padding: 0;
            gap: 4px;
        }
        .itin-logistics-panel.is-editing {
            position: relative;
        }
        .itin-logistics-edit-shell {
            margin-top: 12px;
        }
        .itin-logistics-edit-section {
            display: block;
        }
        .itin-logistics-edit-section:first-child {
            border-top: 0;
            padding-top: 0;
        }
        .itin-logistics-section-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }
        .itin-logistics-section-copy {
            flex: 1;
            min-width: 0;
        }
        .itin-logistics-section-input {
            font-size: 1rem;
            font-weight: 700;
            color: var(--ink-strong);
        }
        .itin-logistics-edit-items {
            display: grid;
            gap: 10px;
            padding-left: 28px;
            margin-top: 10px;
        }
        .itin-logistics-edit-item {
            display: grid;
            gap: 8px;
            padding-left: 12px;
            border-left: 1px solid rgba(220, 204, 191, 0.9);
        }
        .itin-logistics-item-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .itin-logistics-item-input {
            font-size: 0.96rem;
            font-weight: 700;
            color: var(--ink);
        }
        .itin-logistics-list.is-editing {
            margin-top: 0;
        }
        .itin-logistics-item.is-editing {
            position: relative;
            padding-right: 92px;
        }
        .itin-logistics-item-copy {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            min-width: 0;
            flex: 1;
        }
        .itin-logistics-item-copy strong {
            margin-bottom: 0;
        }
        .itin-logistics-section-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--ink);
        }
        .itin-logistics-sections {
            display: grid;
            gap: 12px;
        }
        .itin-logistics-section-card {
            margin: 0;
        }
        .itin-logistics-section-footer,
        .itin-logistics-empty-actions {
            margin-top: 10px;
            padding-left: 28px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .itin-logistics-item.itin-logistics-item-edit-card.is-editing {
            position: relative;
            padding-right: 0;
        }
        .itin-logistics-item-main {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }
        .itin-logistics-item-name {
            display: block;
            min-width: 0;
        }
        .itin-logistics-item-more {
            margin-top: 8px;
            display: grid;
            gap: 8px;
            padding-left: 4px;
        }
        .itin-logistics-item-more.open .itin-activity-more-panel {
            display: grid;
        }
        .itin-logistics-item-more.open .itin-activity-more-summary {
            display: none;
        }
        .itin-logistics-item-empty {
            color: var(--muted);
            font-size: 0.8rem;
            line-height: 1.6;
        }
        .itin-logistics-tools {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: flex-end;
            opacity: 0;
            transform: translateY(4px);
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .itin-time-block.itin-time-block-editing:hover .itin-edit-block-tools,
        .itin-time-block.itin-time-block-editing:focus-within .itin-edit-block-tools,
        .itin-note-block.itin-note-block-editing:hover .itin-edit-block-tools,
        .itin-note-block.itin-note-block-editing:focus-within .itin-edit-block-tools,
        .itin-divider-block.itin-divider-block-editing:hover .itin-edit-block-tools,
        .itin-divider-block.itin-divider-block-editing:focus-within .itin-edit-block-tools,
        .itin-day-card:hover .itin-day-header-tools,
        .itin-day-card:focus-within .itin-day-header-tools,
        .itin-time-block.itin-time-block-editing:hover .itin-time-block-actions,
        .itin-time-block.itin-time-block-editing:focus-within .itin-time-block-actions,
        .itin-logistics-edit-section:hover .itin-logistics-tools,
        .itin-logistics-edit-section:focus-within .itin-logistics-tools {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* --- System slots --- */
        .itin-section-title { font-size: 1rem; font-weight: 700; margin: 20px 0 10px; padding: 0 2px; color: var(--ink-strong); }
        .itin-section-row {
            display: flex; align-items: center; justify-content: space-between;
            gap: 10px; margin-top: 20px; margin-bottom: 10px;
        }
        .itin-section-row .itin-section-title {
            margin: 0;
            padding: 0;
        }
        .itin-inline-action {
            border: 1px solid var(--border);
            background: #F7F3EF;
            color: var(--ink-strong);
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 0.8rem; font-weight: 800; font-family: inherit;
            cursor: pointer;
            white-space: nowrap;
        }
        .itin-memory-empty {
            background: rgba(255,255,255,0.72);
            border: 1px dashed var(--border);
            border-radius: 14px;
            padding: 14px 16px;
            color: var(--muted);
            font-size: 0.86rem; line-height: 1.7;
        }

        .itin-bottom-sections {
            padding: 0 1rem calc(env(safe-area-inset-bottom, 0px) + 92px);
            display: grid; gap: 18px;
        }

        /* Memory cards */
        .trip-memory-card {
            background: rgba(255, 255, 255, 0.65); border-radius: 16px; padding: 14px 16px;
            margin-bottom: 10px; border: 1px solid rgba(255, 255, 255, 0.55);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.65);
        }
        .trip-memory-card h4 { margin: 0 0 6px; font-size: 0.92rem; color: var(--ink-strong); }
        .trip-memory-card p { margin: 0 0 8px; font-size: 0.86rem; color: var(--muted); line-height: 1.6; }
        .trip-memory-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
        .trip-memory-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; }

        /* --- Assistant tab --- */
        .assistant-section { display: none; max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
        body.is-itinerary.show-assistant .itin-app { display: none; }
        body.is-itinerary.show-assistant .assistant-section { display: block; animation: fadeIn 0.4s ease forwards; }
        .assistant-header {
            background: linear-gradient(180deg, var(--sec-bg), var(--sec-bg-strong));
            border-bottom: 1px solid var(--sec-border);
        }
        .assistant-header-date {
            margin-top: 4px;
            color: var(--sec-text-muted);
        }
        .assistant-header .tab-header-sync {
            color: var(--sec-text);
        }
        .assistant-header .tab-header-sync-dot {
            background: color-mix(in srgb, var(--trip-accent) 42%, #96ACCF);
        }
        .assistant-page-body { padding: 0 1rem; }
        .assistant-shell {
            display: grid;
            gap: 14px;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            background: var(--card);
            border-radius: var(--radius-xl);
            border: var(--glass-border);
            box-shadow: 
                var(--shadow),
                inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
                inset 0 -1px 0 rgba(255, 255, 255, 0.2);
            padding: 16px;
        }
        .assistant-summary-card,
        .assistant-panel {
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 22px;
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        .assistant-ask-panel {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px 12px;
            align-items: center;
            padding: 14px 16px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        .assistant-ask-copy {
            min-width: 0;
        }
        .assistant-ask-copy h2 {
            margin: 0;
            color: var(--ink-strong);
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.35;
        }
        .assistant-ask-copy p {
            margin: 3px 0 0;
            color: var(--muted);
            font-size: 0.82rem;
            line-height: 1.55;
        }
        .assistant-ask-panel .assistant-quick-grid {
            grid-column: 1 / -1;
        }
        .assistant-summary-card {
            padding: 14px 16px;
            background: linear-gradient(160deg, var(--sec-surface), color-mix(in srgb, var(--trip-accent-soft) 18%, rgba(250, 246, 255, 0.96)));
        }
        .assistant-summary-kicker {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 0 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid var(--sec-border);
            color: var(--sec-text);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.04em;
        }
        .assistant-summary-title {
            margin: 10px 0 0;
            font-size: 1.24rem;
            font-weight: 900;
            color: var(--ink-strong);
        }
        .assistant-summary-note {
            margin: 8px 0 0;
            font-size: 0.88rem;
            line-height: 1.7;
            color: var(--sec-text-muted);
        }
        .assistant-copy-stack,
        .assistant-summary-copy,
        .assistant-weather-copy,
        .assistant-card-copy,
        .assistant-quick-action-copy,
        .assistant-empty-copy,
        .assistant-panel-caption-stack,
        .assistant-nearby-ai-copy,
        .assistant-sheet-copy {
            min-width: 0;
            display: grid;
        }
        .assistant-summary-copy,
        .assistant-weather-copy,
        .assistant-card-copy,
        .assistant-sheet-copy {
            gap: 6px;
        }
        .assistant-quick-action-copy,
        .assistant-empty-copy,
        .assistant-panel-caption-stack,
        .assistant-nearby-ai-copy {
            gap: 4px;
        }
        .assistant-summary-copy {
            margin-top: 8px;
        }
        .assistant-summary-note {
            margin: 0;
            word-break: break-word;
        }
        .assistant-summary-note.is-lead {
            color: var(--sec-text);
            font-weight: 700;
        }
        .assistant-summary-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: 12px;
        }
        .assistant-summary-stat {
            min-width: 0;
            display: grid;
            gap: 4px;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid var(--sec-border);
            background: rgba(255, 255, 255, 0.88);
        }
        .assistant-summary-stat.span-full {
            grid-column: 1 / -1;
        }
        .assistant-summary-label {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: var(--sec-text-muted);
            text-transform: uppercase;
        }
        .assistant-summary-value {
            display: block;
            font-size: 0.92rem;
            font-weight: 800;
            line-height: 1.45;
            color: var(--ink-strong);
            word-break: break-word;
        }
        .assistant-panel { padding: 16px; }
        .assistant-panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }
        .assistant-panel-tools {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
        }
        .assistant-panel-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid var(--sec-border-strong);
            background: var(--sec-bg);
            color: var(--trip-accent-strong);
            font-size: 0.78rem;
            font-weight: 800;
            line-height: 1.2;
            text-decoration: none;
            box-shadow: 0 3px 10px color-mix(in srgb, var(--trip-accent) 10%, rgba(90, 124, 169, 0.08));
            transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }
        .assistant-panel-link:hover,
        .assistant-panel-link:active {
            background: var(--sec-chip-bg);
            border-color: var(--sec-border);
            transform: translateY(-1px);
        }
        .assistant-panel-title {
            margin: 0;
            font-size: 1.04rem;
            font-weight: 900;
            color: var(--ink-strong);
        }
        .assistant-panel-subtitle {
            margin: 4px 0 0;
            font-size: 0.82rem;
            line-height: 1.55;
            color: var(--muted);
        }
        .assistant-panel-caption {
            margin: 0;
            font-size: 0.78rem;
            font-weight: 800;
            line-height: 1.55;
            color: var(--sec-text);
            letter-spacing: 0.03em;
            word-break: break-word;
        }
        .assistant-panel-caption-stack {
            margin: -2px 0 12px;
        }
        .assistant-touch-target {
            min-height: 44px;
        }
        .assistant-panel-trigger,
        .assistant-panel-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 12px;
            border-radius: 12px;
            border: 1px solid var(--sec-border-strong);
            background: linear-gradient(160deg, var(--sec-bg), var(--sec-bg-strong));
            color: var(--sec-text);
            font-size: 0.8rem;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
        }
        .assistant-panel-toggle {
            background: rgba(255, 255, 255, 0.92);
        }
        .assistant-panel-trigger:hover,
        .assistant-panel-toggle:hover {
            transform: translateY(-1px);
        }
        .assistant-panel-trigger.is-loading,
        .assistant-panel-trigger:disabled,
        .assistant-panel-toggle:disabled {
            cursor: wait;
            opacity: 0.68;
            transform: none;
        }
        .assistant-ai-panel.is-collapsed .assistant-panel-head {
            margin-bottom: 0;
        }
        .assistant-ai-panel.is-collapsed .assistant-panel-subtitle {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
        .assistant-ai-panel-content {
            display: grid;
            gap: 10px;
        }
        .assistant-ai-panel.is-collapsed .assistant-ai-panel-content {
            display: none;
        }
        .assistant-alternatives-panel.is-collapsed .assistant-panel-head {
            margin-bottom: 0;
        }
        .assistant-alternatives-panel.is-collapsed .assistant-card-stack {
            display: none;
        }
        .assistant-card-stack {
            display: grid;
            gap: 10px;
        }
        .assistant-weather-summary-card {
            display: grid;
            gap: 14px;
            padding: 14px;
            border-radius: 18px;
            border: 1px solid var(--sec-border);
            background: linear-gradient(180deg, #FFFFFF, var(--sec-bg));
        }
        .assistant-weather-summary-main {
            display: grid;
            gap: 6px;
            min-width: 0;
        }
        .assistant-weather-kicker {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            width: fit-content;
            padding: 0 10px;
            border-radius: 999px;
            background: var(--sec-chip-bg);
            border: 1px solid var(--sec-chip-border);
            color: var(--sec-text);
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.03em;
        }
        .assistant-weather-title {
            margin: 0;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.55;
            color: var(--ink-strong);
        }
        .assistant-weather-note {
            margin: 0;
            font-size: 0.84rem;
            line-height: 1.68;
            color: var(--muted);
            word-break: break-word;
        }
        .assistant-weather-note.is-lead {
            color: var(--sec-text);
            font-weight: 700;
        }
        .assistant-weather-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .assistant-weather-outfit {
            padding-top: 10px;
            border-top: 1px solid rgba(229, 234, 243, 0.6);
        }
        .assistant-weather-outfit strong {
            display: block;
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-primary, #2D3142);
            margin-bottom: 4px;
        }
        .assistant-weather-outfit p {
            font-size: 0.82rem;
            line-height: 1.55;
            color: var(--text-secondary, #6B7280);
            margin: 0;
        }
        .assistant-weather-outfit-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }
        .assistant-weather-stat {
            min-width: 0;
            display: grid;
            gap: 5px;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid var(--sec-border);
            background: rgba(255, 255, 255, 0.82);
        }
        .assistant-weather-label {
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.03em;
            color: var(--sec-text-muted);
        }
        .assistant-weather-value {
            font-size: 0.95rem;
            font-weight: 900;
            line-height: 1.4;
            color: var(--ink-strong);
        }
        .assistant-weather-note-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .assistant-weather-chip {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 999px;
            background: var(--sec-chip-bg);
            border: 1px solid var(--sec-chip-border);
            color: var(--sec-text);
            font-size: 0.76rem;
            font-weight: 700;
        }
        .assistant-weather-chip.source {
            background: var(--sec-bg-strong);
            border-color: var(--sec-border);
            color: var(--sec-text);
        }
        .assistant-hourly-strip-wrapper {
            display: grid;
            gap: 8px;
        }
        .assistant-hourly-kicker {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            width: fit-content;
            padding: 0 10px;
            border-radius: 999px;
            background: var(--sec-chip-bg);
            border: 1px solid var(--sec-chip-border);
            color: var(--sec-text);
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.03em;
        }
        .assistant-hourly-strip {
            display: flex;
            gap: 0;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            padding-bottom: 4px;
            margin: 0 -4px;
        }
        .assistant-hourly-strip::-webkit-scrollbar {
            height: 3px;
        }
        .assistant-hourly-strip::-webkit-scrollbar-track {
            background: transparent;
        }
        .assistant-hourly-strip::-webkit-scrollbar-thumb {
            background: var(--sec-border);
            border-radius: 4px;
        }
        .assistant-hourly-card {
            flex: 0 0 auto;
            width: 54px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 10px 4px 8px;
            scroll-snap-align: start;
            border-radius: 14px;
            transition: background 0.15s;
        }
        .assistant-hourly-card.is-rain {
            background: rgba(59, 130, 246, 0.06);
        }
        .assistant-hourly-hour {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--sec-text-muted);
            white-space: nowrap;
        }
        .assistant-hourly-icon {
            font-size: 1.2rem;
            line-height: 1;
        }
        .assistant-hourly-temp {
            font-size: 0.82rem;
            font-weight: 900;
            color: var(--ink-strong);
        }
        .assistant-hourly-precip-bar {
            width: 20px;
            height: 24px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        .assistant-hourly-precip-fill {
            width: 100%;
            border-radius: 3px 3px 0 0;
            background: color-mix(in srgb, var(--trip-accent) 32%, #B8D4F0);
            min-height: 2px;
            transition: height 0.2s;
        }
        .assistant-hourly-precip-fill.high {
            background: color-mix(in srgb, var(--trip-accent) 42%, #60A5FA);
        }
        .assistant-hourly-precip-label {
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--sec-text-muted);
        }
        .assistant-nearby-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        .assistant-nearby-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid var(--sec-border);
            background: linear-gradient(180deg, #FFFFFF, var(--sec-bg));
            color: var(--sec-text);
            font-size: 0.82rem;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
        }
        .assistant-nearby-chip:hover {
            transform: translateY(-1px);
        }
        .assistant-nearby-chip.is-active {
            border-color: var(--sec-border-strong);
            background: linear-gradient(160deg, var(--sec-bg), var(--sec-bg-strong));
            color: var(--sec-text);
            box-shadow: 0 10px 20px color-mix(in srgb, var(--trip-accent) 10%, rgba(108, 122, 157, 0.08));
        }
        .assistant-nearby-chip.is-loading,
        .assistant-nearby-chip:disabled {
            opacity: 0.7;
            cursor: wait;
            transform: none;
        }
        .assistant-nearby-chip-icon {
            font-size: 0.94rem;
            line-height: 1;
        }
        .assistant-nearby-chip-label {
            line-height: 1.2;
        }
        .assistant-nearby-ai-note {
            margin: 0;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid var(--sec-border);
            background: linear-gradient(180deg, var(--sec-bg), var(--sec-surface));
            color: var(--sec-text);
            font-size: 0.82rem;
            line-height: 1.66;
            font-weight: 700;
            word-break: break-word;
        }
        .assistant-nearby-ai-copy {
            margin: 0 0 12px;
        }
        .assistant-nearby-ai-cta {
            display: grid;
            gap: 6px;
            margin-top: 8px;
            text-align: center;
        }
        .assistant-nearby-ai-cta-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            min-height: 44px;
            padding: 0 16px;
            border-radius: 14px;
            border: 1px solid var(--sec-border-strong);
            background: linear-gradient(160deg, var(--sec-bg), var(--sec-bg-strong));
            color: var(--sec-text);
            font-size: 0.84rem;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            transition: transform 160ms ease, box-shadow 160ms ease;
        }
        .assistant-nearby-ai-cta-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px color-mix(in srgb, var(--trip-accent) 14%, rgba(108, 122, 157, 0.12));
        }
        .assistant-nearby-ai-cta-btn:active {
            transform: scale(0.98);
        }
        .assistant-nearby-ai-cta-icon {
            font-size: 1rem;
        }
        .assistant-nearby-ai-cta-note {
            margin: 0;
            color: var(--sec-text-muted);
            font-size: 0.74rem;
            line-height: 1.5;
        }
        .assistant-card {
            min-width: 0;
            display: grid;
            gap: 10px;
            padding: 14px;
            border-radius: 18px;
            border: 1px solid var(--sec-border);
            background: linear-gradient(180deg, #FFFFFF, var(--sec-surface));
        }
        .assistant-card[data-assistant-priority="high"] {
            border-color: color-mix(in srgb, var(--trip-accent) 24%, rgba(120, 138, 170, 0.22));
            box-shadow: 0 10px 20px color-mix(in srgb, var(--trip-accent) 8%, rgba(108, 122, 157, 0.07));
        }
        .assistant-card[data-assistant-priority="medium"] {
            border-color: rgba(167, 181, 207, 0.34);
        }
        .assistant-card[data-assistant-priority="low"] {
            border-style: dashed;
        }
        .assistant-card-head {
            display: grid;
            gap: 8px;
            min-width: 0;
        }
        .assistant-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .assistant-card-tag {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 0 10px;
            border-radius: 999px;
            font-size: 0.76rem;
            font-weight: 800;
            border: 1px solid transparent;
            white-space: nowrap;
        }
        .assistant-card-tag.type {
            background: var(--sec-chip-bg);
            border-color: var(--sec-chip-border);
            color: var(--sec-text);
        }
        .assistant-card-tag.priority {
            background: color-mix(in srgb, var(--trip-accent-soft) 32%, #F3EFF7);
            border-color: color-mix(in srgb, var(--trip-accent) 10%, #E5DDEB);
            color: var(--sec-text-muted);
        }
        .assistant-card[data-assistant-priority="high"] .assistant-card-tag.priority {
            background: var(--sec-bg-strong);
            border-color: var(--sec-border);
            color: var(--sec-text);
        }
        .assistant-card-source {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 0 10px;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 600;
            white-space: nowrap;
            background: var(--sec-chip-bg);
            border: 1px solid var(--sec-chip-border);
            color: var(--sec-text-muted);
        }
        .assistant-card-title {
            margin: 0;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.45;
            color: var(--ink-strong);
            word-break: break-word;
        }
        .assistant-card-message {
            margin: 0;
            font-size: 0.88rem;
            line-height: 1.72;
            color: var(--sec-text-muted);
            word-break: break-word;
        }
        .assistant-card-message.is-lead {
            color: var(--sec-text);
            font-weight: 700;
        }
        .assistant-card-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .assistant-card-action {
            min-height: 44px;
            padding: 0 14px;
            border-radius: 12px;
            border: 1px solid var(--sec-border);
            background: var(--sec-bg);
            color: var(--sec-text);
            font-size: 0.84rem;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
        }
        .assistant-card-action.primary {
            background: linear-gradient(160deg, var(--sec-bg), var(--sec-bg-strong));
            border-color: var(--sec-border-strong);
            color: var(--sec-text);
        }
        .assistant-card-action.secondary:hover,
        .assistant-card-action.primary:hover,
        .assistant-quick-action:hover {
            transform: translateY(-1px);
        }
        .assistant-card-action.is-loading,
        .assistant-quick-action.is-loading,
        .assistant-sheet-action.is-loading {
            opacity: 0.72;
            pointer-events: none;
        }
        .assistant-card-action.is-disabled,
        .assistant-quick-action.is-disabled,
        .assistant-sheet-action.is-disabled,
        .assistant-card-action:disabled,
        .assistant-quick-action:disabled,
        .assistant-sheet-action:disabled {
            cursor: not-allowed;
            opacity: 0.62;
            transform: none;
        }
        .assistant-quick-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .assistant-quick-action {
            min-width: 0;
            min-height: 44px;
            text-align: left;
            display: grid;
            gap: 3px;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid var(--sec-border);
            background: rgba(255, 255, 255, 0.78);
            cursor: pointer;
            font-family: inherit;
            color: inherit;
            transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
        }
        .assistant-quick-action-title {
            font-size: 0.88rem;
            font-weight: 900;
            color: var(--ink-strong);
            word-break: break-word;
        }
        .assistant-quick-action-description {
            font-size: 0.76rem;
            line-height: 1.45;
            color: var(--muted);
            word-break: break-word;
        }
        .assistant-quick-action-description.is-lead {
            color: var(--sec-text);
            font-weight: 700;
        }
        .assistant-empty {
            text-align: center;
            display: grid;
            gap: 8px;
            padding: 22px 16px;
            border-radius: 18px;
            border: 1px dashed var(--sec-border-strong);
            background: color-mix(in srgb, var(--sec-bg) 72%, transparent);
            color: var(--sec-text-muted);
        }
        .assistant-empty-icon {
            font-size: 2rem;
            line-height: 1;
        }
        /* Assistant panel line icons */
        .assistant-empty-icon .assistant-empty-icon-svg { width: 34px; height: 34px; opacity: 0.75; }
        .assistant-hourly-icon .assistant-weather-icon-svg { width: 22px; height: 22px; display: block; }
        .assistant-nearby-chip-icon .assistant-nearby-chip-icon-svg { width: 18px; height: 18px; display: block; }
        .assistant-nearby-ai-cta-icon .assistant-cta-icon-svg { width: 16px; height: 16px; display: block; }
        .assistant-empty-title {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .assistant-empty-text {
            font-size: 0.84rem;
            line-height: 1.7;
        }
        .assistant-empty-copy {
            justify-items: center;
        }
        .assistant-empty-text.is-lead {
            color: var(--sec-text);
            font-weight: 700;
        }
        .assistant-sheet-root {
            position: relative;
            z-index: 40;
        }
        .assistant-sheet-overlay {
            position: fixed;
            inset: 0;
            background: rgba(47, 58, 80, 0.34);
            backdrop-filter: blur(4px);
            z-index: 940;
        }
        .assistant-sheet {
            position: fixed;
            left: 50%;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
            transform: translateX(-50%);
            width: min(720px, calc(100vw - 24px));
            max-height: min(78vh, 720px);
            overflow: auto;
            padding: 18px;
            border-radius: 24px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 10%, rgba(224, 230, 241, 0.96));
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--sec-bg) 58%, rgba(247, 250, 255, 0.98)));
            box-shadow: 0 24px 48px color-mix(in srgb, var(--trip-accent) 12%, rgba(72, 88, 124, 0.22));
            z-index: 950;
        }
        .assistant-sheet-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 44px;
            height: 44px;
            border-radius: 999px;
            border: 1px solid var(--sec-border);
            background: rgba(255, 255, 255, 0.92);
            color: var(--sec-text);
            font-size: 1.3rem;
            line-height: 1;
            cursor: pointer;
        }
        .assistant-sheet-kicker {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 999px;
            background: var(--sec-chip-bg);
            border: 1px solid var(--sec-chip-border);
            color: var(--sec-text);
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.04em;
        }
        .assistant-sheet-title {
            margin: 12px 0 0;
            font-size: 1.12rem;
            font-weight: 900;
            color: var(--ink-strong);
            line-height: 1.45;
            word-break: break-word;
        }
        .assistant-sheet-message {
            margin: 0;
            font-size: 0.88rem;
            line-height: 1.72;
            color: #6F6B77;
            word-break: break-word;
        }
        .assistant-sheet-copy {
            margin-top: 10px;
        }
        .assistant-sheet-message.is-lead {
            color: #5F6472;
            font-weight: 700;
        }
        .assistant-sheet-facts {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 14px;
        }
        .assistant-sheet-fact {
            min-width: 0;
            display: grid;
            gap: 6px;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid var(--sec-border);
            background: rgba(255, 255, 255, 0.84);
        }
        .assistant-sheet-fact-label {
            font-size: 0.74rem;
            font-weight: 800;
            color: var(--sec-text-muted);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .assistant-sheet-fact-value {
            font-size: 0.92rem;
            font-weight: 800;
            color: var(--ink-strong);
            line-height: 1.6;
            word-break: break-word;
        }
        .assistant-sheet-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
        }
        .assistant-sheet-action {
            min-height: 44px;
            padding: 0 14px;
            border-radius: 12px;
            border: 1px solid var(--sec-border);
            background: var(--sec-bg);
            color: var(--sec-text);
            font-size: 0.84rem;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
        }
        .assistant-sheet-action.primary {
            background: linear-gradient(160deg, var(--sec-bg), var(--sec-bg-strong));
            border-color: var(--sec-border-strong);
            color: var(--sec-text);
        }
        .assistant-sheet-action.secondary:hover,
        .assistant-sheet-action.primary:hover {
            transform: translateY(-1px);
        }
        .assistant-linked-focus {
            animation: assistant-linked-focus-pulse 1.7s ease;
        }
        @keyframes assistant-linked-focus-pulse {
            0% { box-shadow: 0 0 0 0 rgba(108, 122, 157, 0.22); }
            30% { box-shadow: 0 0 0 8px rgba(108, 122, 157, 0.16); }
            100% { box-shadow: 0 0 0 0 rgba(108, 122, 157, 0); }
        }
        @keyframes assistant-skeleton-pulse {
            0%, 100% { opacity: 0.45; }
            50% { opacity: 0.8; }
        }
        .assistant-skeleton {
            animation: assistant-skeleton-pulse 1.6s ease-in-out infinite;
        }
        .assistant-skeleton-bar {
            height: 14px;
            border-radius: 8px;
            background: linear-gradient(90deg, #E4E9F3, #EDF1F8, #E4E9F3);
            animation: assistant-skeleton-pulse 1.6s ease-in-out infinite;
        }
        .assistant-skeleton-bar.w60 { width: 60%; }
        .assistant-skeleton-bar.w40 { width: 40%; }
        .assistant-skeleton-bar.w80 { width: 80%; }
        .assistant-skeleton-bar.tall { height: 18px; }
        .assistant-skeleton-stack {
            display: grid;
            gap: 10px;
            padding: 16px 0;
        }

        /* Preparation tab */
        .prepare-page { display: none; max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
        body.is-itinerary.show-prepare .itin-app { display: none; }
        body.is-itinerary.show-prepare .prepare-page { display: block; animation: fadeIn 0.4s ease forwards; }
        .prepare-page-header {
            background: var(--sec-bg);
        }
        .prepare-page-header .tab-header-sync { color: var(--sec-text); }
        .prepare-page-header .tab-header-sync-dot { background: color-mix(in srgb, var(--trip-accent) 48%, #95AF87); }
        .prepare-page-header .tab-header-sync.is-syncing { color: #5F7450; }
        .prepare-page-header .tab-header-sync.is-syncing .tab-header-sync-dot {
            background: #869C72;
            box-shadow: 0 0 0 4px rgba(134, 156, 114, 0.14);
        }
        .prepare-page-header .tab-header-sync.is-warning { color: #8B7445; }
        .prepare-page-header .tab-header-sync.is-warning .tab-header-sync-dot {
            background: #B89D6B;
            box-shadow: 0 0 0 4px rgba(184, 157, 107, 0.12);
        }
        .prepare-page-header .tab-header-sync.is-error { color: #B35D43; }
        .prepare-page-header .tab-header-sync.is-error .tab-header-sync-dot {
            background: #D18A75;
            box-shadow: 0 0 0 4px rgba(209, 138, 117, 0.14);
        }
        .prepare-page-body { padding: 0 1rem; }
        .prepare-page-body.is-editing { padding-bottom: calc(92px + env(safe-area-inset-bottom, 20px)) !important; }
        .prepare-shell {
            background: rgba(255, 255, 255, 0.58);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border-radius: 26px; padding: 16px;
            border: 1px solid rgba(255, 255, 255, 0.45);
            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }
        .prepare-header {
            margin-bottom: 10px;
        }
        .prepare-header-copy {
            display: grid;
            gap: 2px;
            margin-bottom: 8px;
        }
        .prepare-header-copy h2 {
            margin: 0;
            color: var(--ink-strong);
            font-size: 1.05rem;
            font-weight: 900;
            line-height: 1.35;
        }
        .prepare-header-copy p {
            margin: 0;
            color: var(--muted);
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1.45;
        }
        .prepare-header-actions {
            display: flex; align-items: center; justify-content: flex-start;
            gap: 6px; flex-wrap: nowrap; overflow-x: auto;
            width: 100%; padding-bottom: 2px; scrollbar-width: none;
        }
        .prepare-header-actions::-webkit-scrollbar { display: none; }
        .prepare-status-pill,
        .prepare-sync-pill {
            display: inline-flex; align-items: center; justify-content: center;
            min-height: 34px; padding: 0 12px; border-radius: 999px;
            font-size: 0.78rem; font-weight: 800; white-space: nowrap; flex: 0 0 auto;
        }
        .prepare-status-pill {
            background: rgba(255,255,255,0.72); color: var(--muted);
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        .prepare-sync-pill {
            background: color-mix(in srgb, var(--trip-accent-soft) 60%, rgba(255,255,255,0.72)); color: var(--trip-accent-strong);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 12%, transparent);
        }
        .prepare-sync-pill.is-syncing {
            background: rgba(111, 129, 86, 0.16);
            color: #5C6947;
            border-color: rgba(111, 129, 86, 0.22);
        }
        .prepare-sync-pill.is-warning {
            background: rgba(181, 149, 86, 0.14);
            color: #7E6638;
            border-color: rgba(181, 149, 86, 0.2);
        }
        .prepare-sync-pill.is-error {
            background: rgba(210, 120, 92, 0.14);
            color: #B35D43;
            border-color: rgba(210, 120, 92, 0.22);
        }
        .prepare-action-btn {
            min-height: 34px; padding: 0 12px; border-radius: 999px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: rgba(255,255,255,0.76); color: var(--ink);
            font-size: 0.82rem; font-weight: 800; font-family: inherit; cursor: pointer;
            white-space: nowrap; flex: 0 0 auto;
            transition: background 160ms ease, transform 160ms ease;
        }
        .prepare-action-btn:active {
            transform: scale(0.96);
        }
        .prepare-action-btn.primary {
            border: none; background: var(--trip-accent); color: #fff;
            box-shadow: 0 8px 18px color-mix(in srgb, var(--trip-accent) 28%, transparent);
        }
        .prepare-action-btn.warning {
            background: rgba(210, 120, 92, 0.12); color: #B35D43;
            border-color: rgba(210, 120, 92, 0.16);
        }
        .prepare-action-btn:disabled { opacity: 0.55; cursor: wait; }
        .prepare-group-tabs {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 4px;
            margin-bottom: 10px;
            padding: 3px;
            border-radius: 14px;
            background: color-mix(in srgb, var(--trip-accent-soft) 42%, rgba(255,255,255,0.74));
            border: 1px solid color-mix(in srgb, var(--trip-accent) 10%, rgba(214, 207, 198, 0.46));
        }
        .prepare-group-tab {
            min-width: 0;
            border: 0;
            background: transparent;
            color: color-mix(in srgb, var(--ink-strong) 68%, var(--muted));
            border-radius: 11px;
            padding: 7px 8px;
            font-family: inherit; cursor: pointer; text-align: center;
            font-size: 0.85rem; font-weight: 760;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 36px;
            line-height: 1.2;
            transition: background 200ms cubic-bezier(0.34, 1.56, 0.64, 1), color 160ms ease, box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .prepare-group-tab-title {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            min-width: 0;
            max-width: 100%;
        }
        .prepare-group-tab-label {
            min-width: 0;
            font-size: 0.84rem;
            font-weight: 850;
            line-height: 1.1;
            white-space: nowrap;
        }
        .prepare-group-tab-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 19px;
            padding: 0 6px;
            border-radius: 999px;
            background: rgba(255,255,255,0.52);
            color: color-mix(in srgb, var(--trip-accent-strong) 34%, #7B7368);
            font-size: 0.68rem;
            font-weight: 900;
            line-height: 1;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }
        .prepare-group-tab.active {
            background: rgba(255,255,255,0.94);
            color: var(--trip-accent-strong);
            box-shadow: 0 2px 8px color-mix(in srgb, var(--trip-accent) 12%, transparent);
            transform: scale(1.02);
        }
        .prepare-group-tab.active .prepare-group-tab-count {
            background: color-mix(in srgb, var(--trip-accent) 10%, rgba(255,255,255,0.86));
            color: var(--trip-accent-strong);
        }
        .prepare-content-header {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px; margin-bottom: 8px;
        }
        .prepare-scope-pills {
            display: flex; gap: 8px; overflow-x: auto;
            flex: 1; min-width: 0;
            padding-bottom: 2px; margin-bottom: 0;
            scrollbar-width: none;
        }
        .prepare-scope-pills::-webkit-scrollbar { display: none; }
        .prepare-scope-pill {
            border: 1px solid rgba(163, 157, 143, 0.28);
            background: rgba(255,255,255,0.76); color: #6D665D;
            border-radius: 999px; padding: 6px 12px;
            font-size: 0.82rem; font-weight: 800; font-family: inherit;
            display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
            white-space: nowrap;
        }
        .prepare-scope-pill.active {
            background: var(--trip-accent); color: #fff; border-color: transparent;
            box-shadow: 0 8px 20px color-mix(in srgb, var(--trip-accent) 26%, transparent);
        }
        .prepare-scope-avatar {
            width: 20px; height: 20px; border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.82); font-size: 0.84rem;
        }
        .prepare-card {
            background: rgba(255,255,255,0.82); border-radius: 16px; padding: 12px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 8%, rgba(0, 0, 0, 0.05));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
        }
        .prepare-card.is-shopping {
            background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250, 244, 235, 0.94));
        }
        .prepare-progress-text {
            font-size: 0.82rem; color: #6E695F; font-weight: 700;
            white-space: nowrap; flex: 0 0 auto;
        }
        .prepare-progress-bar {
            position: relative; height: 6px; border-radius: 999px;
            background: color-mix(in srgb, var(--trip-accent-soft) 50%, rgba(220, 213, 201, 0.58)); overflow: hidden; margin-bottom: 12px;
        }
        .prepare-progress-fill {
            position: absolute; inset: 0 auto 0 0; border-radius: inherit;
            background: linear-gradient(90deg, var(--trip-accent), var(--trip-accent-strong));
        }
        .prepare-editor-grid {
            display: grid; gap: 10px; margin-bottom: 12px;
        }
        .prepare-input,
        .prepare-textarea {
            width: 100%; box-sizing: border-box; border-radius: 16px;
            border: 1px solid rgba(179, 171, 158, 0.58); background: #FAF7F1;
            color: var(--ink-strong); font-family: inherit; outline: none;
            padding: 12px 14px; font-size: 1rem;
        }
        .prepare-textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
        .prepare-input:focus,
        .prepare-textarea:focus { border-color: var(--trip-accent); }
        .prepare-items { display: grid; gap: 10px; }
        .prepare-item {
            display: flex; align-items: flex-start; gap: 10px;
            padding: 10px 11px; border-radius: 12px;
            background: rgba(255,255,255,0.92); border: 1px solid color-mix(in srgb, var(--trip-accent) 8%, rgba(0, 0, 0, 0.05));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
            transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease, transform 160ms ease;
        }
        .prepare-item[data-prepare-item-row]:active {
            transform: scale(0.985);
        }
        .prepare-item[data-prepare-item-row]:hover {
            border-color: color-mix(in srgb, var(--trip-accent) 18%, rgba(226, 218, 206, 0.86));
            background: rgba(255,255,255,0.98);
        }
        .prepare-item[data-prepare-item-row] {
            cursor: pointer;
        }
        .prepare-item.shopping {
            background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246, 238, 226, 0.96));
        }
        .prepare-item.is-checked {
            background: color-mix(in srgb, var(--trip-accent-soft) 48%, rgba(246, 244, 240, 0.88));
            border-color: color-mix(in srgb, var(--trip-accent) 8%, rgba(206, 198, 185, 0.72));
        }
        .prepare-item.is-checked:not(.is-editing) {
            opacity: 0.7;
        }
        .prepare-item.is-important:not(.is-checked) {
            border-left: 3px solid color-mix(in srgb, var(--trip-accent) 72%, var(--trip-accent-strong));
            padding-left: 9px;
        }
        .prepare-item.is-checked:not(.is-editing) .prepare-item-label {
            text-decoration: line-through;
            text-decoration-color: rgba(90, 85, 77, 0.4);
        }
        .prepare-item.is-editing { align-items: stretch; }
        .prepare-item-check {
            appearance: none;
            -webkit-appearance: none;
            width: 22px; height: 22px; margin: 0; padding: 0;
            border-radius: 7px;
            border: 1.5px solid color-mix(in srgb, var(--trip-accent) 34%, #B8B0A4);
            background: color-mix(in srgb, var(--trip-accent-soft) 28%, #FFFFFF);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
            flex-shrink: 0;
            display: grid;
            place-content: center;
            cursor: pointer;
            position: relative;
            transition: background 160ms ease, border-color 160ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .prepare-item-check::before {
            content: '';
            position: absolute;
            top: -11px;
            left: -11px;
            right: -11px;
            bottom: -11px;
        }
        .prepare-item-check::after {
            content: "";
            width: 11px;
            height: 7px;
            border-left: 2px solid #FFFFFF;
            border-bottom: 2px solid #FFFFFF;
            transform: rotate(-45deg) scale(0.72);
            opacity: 0;
            margin-top: -2px;
            transition: opacity 140ms ease, transform 140ms ease;
        }
        .prepare-item-check:checked {
            background: var(--trip-accent);
            border-color: var(--trip-accent);
            transform: scale(1.08);
        }
        .prepare-item-check:checked::after {
            opacity: 1;
            transform: rotate(-45deg) scale(1);
        }
        .prepare-item-check:focus-visible {
            outline: 3px solid color-mix(in srgb, var(--trip-accent) 22%, transparent);
            outline-offset: 2px;
        }
        .prepare-item-copy { min-width: 0; flex: 1; }
        .prepare-item-main { min-width: 0; flex: 1; display: grid; gap: 8px; }
        .prepare-item-topline {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 10px;
        }
        .prepare-item-topline .prepare-inline-input.label {
            flex: 1;
            min-width: 0;
        }
        .prepare-item-label {
            margin: 0; color: #4F4942; font-size: 0.96rem; font-weight: 760; line-height: 1.38;
        }
        .prepare-item-note {
            margin: 4px 0 0; color: #8D8477; font-size: 0.84rem; line-height: 1.6;
        }
        .prepare-item-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 6px;
            color: #9C8F87;
            font-size: 0.72rem;
            font-weight: 760;
        }
        .prepare-item-meta span {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 0 7px;
            border-radius: 6px;
            background: color-mix(in srgb, var(--trip-accent-soft) 34%, rgba(255, 255, 255, 0.62));
        }
        .prepare-item-meta .prepare-item-priority {
            color: #7A4F18;
            background: rgba(199, 138, 58, 0.12);
        }
        .prepare-item-fields {
            display: grid; gap: 8px; min-width: 0; flex: 1;
        }
        .prepare-item-side {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: stretch;
            flex-shrink: 0;
            width: 96px;
        }
        .prepare-shopping-photo {
            width: 88px;
            height: 88px;
            border-radius: 16px;
            overflow: hidden;
            background: rgba(255,255,255,0.8);
            border: 1px solid rgba(220, 212, 200, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .prepare-shopping-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            cursor: zoom-in;
        }
        .prepare-shopping-photo.placeholder {
            color: #A09184;
            font-size: 0.78rem;
            font-weight: 700;
            text-align: center;
            line-height: 1.5;
            padding: 10px;
        }
        .prepare-photo-actions {
            display: grid;
            gap: 6px;
            width: 100%;
        }
        .prepare-photo-btn,
        .prepare-photo-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 10px;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            border: 1px solid rgba(187, 178, 164, 0.45);
            background: rgba(255,255,255,0.88);
            color: #6A655B;
            width: 100%;
            box-sizing: border-box;
            white-space: nowrap;
        }
        .prepare-photo-btn.busy {
            opacity: 0.6;
            pointer-events: none;
        }
        .prepare-photo-remove {
            color: #B35D43;
            background: rgba(205, 118, 92, 0.1);
            border-color: rgba(205, 118, 92, 0.18);
        }
        .prepare-photo-input {
            display: none;
        }
        .prepare-item-meta-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .prepare-item-kind-pill {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 0 10px;
            border-radius: 999px;
            background: rgba(255,255,255,0.8);
            color: #907C69;
            font-size: 0.74rem;
            font-weight: 800;
        }
        .prepare-inline-input {
            width: 100%; box-sizing: border-box; border: none; outline: none;
            border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,0.92);
            font-size: 1rem; color: var(--ink-strong); font-family: inherit;
        }
        .prepare-inline-input.label {
            font-size: 1rem;
            font-weight: 800;
        }
        .prepare-inline-input.note {
            font-size: 0.85rem; color: var(--muted);
        }
        .prepare-item-remove {
            width: 44px; height: 44px; border: none; border-radius: 12px;
            background: rgba(205, 118, 92, 0.12); color: #B35D43;
            font-size: 1rem; font-weight: 900; cursor: pointer; flex-shrink: 0;
        }
        .prepare-item-remove.prepare-item-remove-inline {
            align-self: flex-start;
        }
        .prepare-add-row {
            display: grid; grid-template-columns: minmax(0, 1fr) 46px;
            gap: 8px; margin-top: 12px;
        }
        .prepare-add-btn {
            border: none; border-radius: 12px; background: var(--trip-accent); color: #fff;
            font-size: 0.88rem; font-weight: 700; cursor: pointer;
            box-shadow: 0 4px 12px color-mix(in srgb, var(--trip-accent) 22%, transparent);
        }
        .prepare-add-hint {
            margin-top: 6px;
            color: #8D8477;
            font-size: 0.78rem;
            line-height: 1.5;
        }
        .prepare-group-section {
            position: relative;
            margin-bottom: 15px;
            padding-left: 11px;
            border-left: 1px solid color-mix(in srgb, var(--trip-accent) 20%, rgba(214, 204, 190, 0.64));
        }
        .prepare-group-section.is-active-group {
            border-left-color: color-mix(in srgb, var(--trip-accent) 62%, transparent);
        }
        .prepare-group-head {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 0 4px;
        }
        .prepare-group-header {
            flex: 1;
            min-width: 0;
            display: grid;
            grid-template-columns: 16px minmax(0, 1fr) auto;
            align-items: center;
            gap: 8px;
            padding: 4px 2px 5px 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            font: inherit;
            text-align: left;
            cursor: pointer;
            user-select: none;
            transition: color 160ms ease;
        }
        .prepare-group-header:hover {
            color: var(--trip-accent-strong);
        }
        .prepare-group-header-copy {
            min-width: 0;
            display: block;
        }
        .prepare-group-chevron {
            font-size: 0.78rem;
            color: color-mix(in srgb, var(--trip-accent) 54%, #7E766B);
            width: 18px;
            text-align: center;
        }
        .prepare-group-header-label {
            min-width: 0;
            font-weight: 850;
            font-size: 0.95rem;
            color: #4F463F;
            line-height: 1.25;
            word-break: break-word;
        }
        .prepare-group-header-total {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 0 7px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--trip-accent) 10%, transparent);
            color: var(--trip-accent-strong);
            font-size: 0.7rem;
            font-weight: 900;
            white-space: nowrap;
        }
        .prepare-group-summary {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 0 7px 24px;
        }
        .prepare-group-progress-text {
            font-size: 0.76rem;
            font-weight: 760;
            color: #81786D;
            white-space: nowrap;
        }
        .prepare-group-progress-bar {
            position: relative;
            flex: 1;
            min-width: 0;
            height: 4px;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(214, 205, 191, 0.82);
        }
        .prepare-group-progress-fill {
            position: absolute;
            inset: 0 auto 0 0;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--trip-accent), var(--trip-accent-strong));
        }
        .prepare-group-summary-note {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 0 10px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--trip-accent) 14%, transparent);
            color: var(--trip-accent-strong);
            font-size: 0.72rem;
            font-weight: 800;
            white-space: nowrap;
        }
        .prepare-group-remove {
            width: 34px;
            height: 34px;
            align-self: flex-start;
            border: none;
            border-radius: 14px;
            background: rgba(205, 118, 92, 0.12);
            color: #A15C48;
            font-size: 1rem;
            font-weight: 900;
            cursor: pointer;
            line-height: 1;
            flex: 0 0 auto;
        }
        .prepare-group-remove:hover { background: rgba(205, 118, 92, 0.18); }
        .prepare-group-body {
            position: relative;
            padding: 0 0 0 24px;
        }
        .prepare-group-body .prepare-items {
            padding: 0;
            gap: 7px;
            border-radius: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
        }
        .prepare-group-body .prepare-item {
            position: relative;
            background: rgba(255,255,255,0.94);
            border-color: color-mix(in srgb, var(--trip-accent) 8%, rgba(224, 215, 203, 0.86));
            box-shadow: none;
            margin-left: 0;
        }
        .prepare-group-body .prepare-item-category,
        .prepare-group-body .prepare-item-group-label {
            display: none;
        }
        .prepare-group-empty {
            text-align: center;
            padding: 16px 14px;
            color: var(--muted, #7C7467);
            font-size: 0.82rem;
            border: 1px dashed rgba(194, 184, 169, 0.72);
            border-radius: 16px;
            background: rgba(255,255,255,0.78);
        }
        .prepare-add-group-row {
            margin-bottom: 10px;
            padding: 8px 12px;
            background: rgba(255,252,248,0.8);
            border: 1px dashed var(--border);
            border-radius: 10px;
        }
        .prepare-group-select-row {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
        }
        .prepare-group-select-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--muted, #7C7467);
            white-space: nowrap;
        }
        .prepare-group-select {
            flex: 0 1 auto;
            min-width: 80px;
            padding: 5px 8px;
            border-radius: 8px;
            border: 1px solid var(--border);
            font-family: inherit;
            font-size: 0.8rem;
            background: #fff;
        }
        .prepare-group-divider {
            color: var(--border); font-size: 0.8rem;
        }
        .prepare-new-group-input {
            flex: 1;
            min-width: 80px;
            font-size: 0.8rem !important;
            padding: 5px 8px !important;
        }
        .prepare-group-create-btn {
            background: #7C8F66;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 5px 10px;
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
        }
        .prepare-group-create-btn:hover { opacity: 0.85; }
        .prepare-group-toggle-btn {
            border: 1px dashed rgba(156, 158, 133, 0.4);
            background: transparent;
            color: #7C8F66;
            border-radius: 12px;
            padding: 8px 16px;
            font-size: 0.85rem;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            width: 100%;
        }
        .prepare-item-group-select {
            padding: 3px 6px;
            border-radius: 6px;
            border: 1px solid var(--border);
            font-family: inherit;
            font-size: 0.75rem;
            background: rgba(255,255,255,0.8);
            color: var(--muted, #7C7467);
        }

        .prepare-empty {
            text-align: center; padding: 28px 16px;
            color: var(--muted); font-size: 0.92rem; line-height: 1.7;
            border: 1px dashed color-mix(in srgb, var(--trip-accent) 18%, rgba(0, 0, 0, 0.08));
            border-radius: 16px;
            background: color-mix(in srgb, var(--trip-accent-soft) 40%, rgba(255, 255, 255, 0.6));
        }

        /* Lightbox */
        .itin-lightbox { display: none; position: fixed; inset: 0; z-index: 10100; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; }
        .itin-lightbox.active { display: flex; }
        .itin-lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 6px; }
        .itin-lightbox iframe { max-width: 95vw; max-height: 90vh; width: 90vw; height: 85vh; border: none; border-radius: 6px; background: #fff; }
        .itin-lightbox-close { position: absolute; top: max(env(safe-area-inset-top, 12px), 12px); right: 16px; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; background: none; border: none; padding: 4px; z-index: 10101; }

        /* Back to top */
        .itin-fab-top {
            position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); right: 20px;
            background: color-mix(in srgb, var(--trip-header-surface) 78%, #fff); color: var(--trip-accent-strong); width: 48px; height: 48px;
            border-radius: 50%; display: flex; justify-content: center; align-items: center;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 23%, transparent);
            box-shadow: 0 8px 22px color-mix(in srgb, var(--trip-accent) 18%, transparent);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            cursor: pointer; opacity: 0; visibility: hidden;
            transform: translateY(16px);
            transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.24s ease, box-shadow 0.2s ease, bottom 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 999;
        }
        .itin-fab-top-icon { display: block; width: 20px; height: 20px; }
        .itin-fab-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
        .itin-fab-top.visible:active { transform: scale(0.94); }
        .itin-fab-top:focus-visible,
        .chat-fab:focus-visible { outline: 3px solid var(--trip-accent-soft); outline-offset: 3px; }

        /* --- Bottom navigation bar --- */
        .itin-bottom-nav {
            display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
            background: rgba(255, 255, 255, 0.45) !important;
            backdrop-filter: blur(16px) saturate(130%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
            padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 4px);
            box-shadow: 0 -4px 20px rgba(122, 111, 107, 0.02) !important;
        }
        body.is-itinerary .itin-bottom-nav { display: block; }
        /* Bottom-nav grabber handle is mobile-only; hidden elsewhere. */
        .itin-nav-handle { display: none; }
        .itin-bottom-nav-inner {
            display: flex; align-items: center;
            gap: 0; overflow-x: hidden; scrollbar-width: none;
            max-width: 760px; margin: 0 auto; padding: 0 8px;
            overscroll-behavior-x: contain;
            -webkit-overflow-scrolling: touch;
        }
        .itin-bottom-nav-inner::-webkit-scrollbar { display: none; }
        .itin-nav-item {
            display: flex; flex-direction: column; align-items: center; gap: 2px;
            padding: 6px 0 4px; min-width: 0; flex: 1 1 0;
            background: none; border: none; cursor: pointer;
            color: var(--muted); font-family: inherit;
            transition: color 0.2s;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        .itin-nav-item:focus-visible {
            outline: 3px solid var(--trip-accent-soft);
            outline-offset: -3px;
            border-radius: 12px;
        }
        .itin-nav-item.active { color: var(--ink-strong); }
        .itin-nav-item.active[data-nav="itinerary"] { color: var(--trip-accent); }
        .itin-nav-item.active[data-nav="prepare"] { color: var(--trip-accent); }
        .itin-nav-item.active[data-nav="memory"] { color: var(--trip-accent); }
        .itin-nav-item.active[data-nav="expense"] { color: var(--trip-accent-strong); }
        .itin-nav-item.active[data-nav="booking"] { color: var(--trip-accent); }
        .itin-nav-item.active[data-nav="members"] { color: var(--trip-accent); }
        .itin-nav-item.active[data-nav="more"] { color: var(--trip-accent); }
        .itin-nav-icon {
            width: 28px;
            height: 28px;
            display: block;
            flex: 0 0 auto;
            transition: transform 0.2s ease;
        }
        /* Unified monochrome line icons: tinted by the item's text color
           (muted when inactive, trip accent when active) via CSS mask. */
        .itin-nav-item[data-nav="itinerary"] .itin-nav-icon,
        .itin-nav-item[data-nav="notes"] .itin-nav-icon,
        .itin-nav-item[data-nav="expense"] .itin-nav-icon,
        .itin-nav-item[data-nav="prepare"] .itin-nav-icon {
            background-color: currentColor;
            -webkit-mask: var(--itin-nav-icon) center / contain no-repeat;
            mask: var(--itin-nav-icon) center / contain no-repeat;
        }
        .itin-nav-label { font-size: 0.76rem; font-weight: 800; }
        .itin-nav-item[data-nav="itinerary"] {
            --itin-nav-icon: url("/trip-assets/icons/line/itinerary.svg");
        }
        .itin-nav-item[data-nav="prepare"] {
            --itin-nav-icon: url("/trip-assets/icons/line/prepare.svg");
        }
        .itin-nav-item[data-nav="memory"] {
            --itin-nav-icon-active: url("/trip-assets/icons/travel/memories_active_flat.svg");
            --itin-nav-icon-inactive: url("/trip-assets/icons/travel/memories_inactive_flat.svg");
        }
        .itin-nav-item[data-nav="expense"] {
            --itin-nav-icon: url("/trip-assets/icons/line/expense.svg");
        }
        .itin-nav-item[data-nav="booking"] {
            --itin-nav-icon-active: url("/trip-assets/icons/travel/bookings_active_flat.svg");
            --itin-nav-icon-inactive: url("/trip-assets/icons/travel/bookings_inactive_flat.svg");
        }
        .itin-nav-item[data-nav="members"] {
            --itin-nav-icon-active: url("/trip-assets/icons/travel/members_active_flat.svg");
            --itin-nav-icon-inactive: url("/trip-assets/icons/travel/members_inactive_flat.svg");
        }
        .itin-nav-item[data-nav="more"] {
            --itin-nav-icon-active: none;
            --itin-nav-icon-inactive: none;
        }
        .itin-nav-item[data-nav="more"] .itin-nav-icon {
            position: relative;
        }
        .itin-nav-item[data-nav="more"] .itin-nav-icon::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 4px;
            height: 4px;
            border-radius: 999px;
            background: currentColor;
            transform: translate(-50%, -50%);
            box-shadow: -8px 0 0 currentColor, 8px 0 0 currentColor;
        }

        /* --- Booking tab --- */
        .booking-section { display: none; max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
        body.is-itinerary.show-booking .itin-app { display: none; }
        body.is-itinerary.show-booking .booking-section { display: block; animation: fadeIn 0.4s ease forwards; }

        .booking-shell {
            background: var(--card);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: var(--radius-xl);
            padding: 16px;
            border: var(--glass-border);
            box-shadow: 
                var(--shadow),
                inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
                inset 0 -1px 0 rgba(255, 255, 255, 0.2);
            margin: 0 1rem 1rem;
            display: grid;
            gap: 14px;
        }

        .booking-header {
            background: var(--sec-bg);
            border-bottom: 1px solid var(--sec-border);
            gap: 12px;
        }
        .booking-header-main {
            min-width: 0;
            display: grid;
            gap: 4px;
        }
        .booking-manage-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 28%, rgba(255, 255, 255, 0.72));
            background: color-mix(in srgb, var(--trip-accent) 14%, rgba(255, 255, 255, 0.84));
            color: var(--trip-accent-strong);
            font-size: 0.86rem;
            font-weight: 800;
            text-decoration: none;
            white-space: nowrap;
            box-shadow: 0 10px 24px rgba(72, 54, 40, 0.08);
        }
        .booking-manage-link:active {
            transform: translateY(1px);
        }
        .booking-header .tab-header-sync { color: var(--sec-text); }
        .booking-header .tab-header-sync-dot { background: color-mix(in srgb, var(--trip-accent) 48%, #96ACCF); }

        /* Category pills */
        .booking-categories {
            display: flex; gap: 0; padding: 0; margin-bottom: 0.5rem;
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .booking-categories::-webkit-scrollbar { display: none; }
        .booking-cat-pill {
            flex: 1; min-width: 0;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            padding: 12px 8px; background: rgba(255, 255, 255, 0.35); border: none;
            cursor: pointer; font-family: inherit;
            transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
            -webkit-tap-highlight-color: transparent;
            color: var(--muted);
        }
        .booking-cat-pill:first-child { border-radius: 14px 0 0 14px; }
        .booking-cat-pill:last-child { border-radius: 0 14px 14px 0; }
        .booking-cat-pill.active {
            background: rgba(255, 255, 255, 0.72); color: var(--trip-accent-strong);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
            position: relative; z-index: 1;
            border: 1px solid rgba(255, 255, 255, 0.5);
            transform: scale(1.02);
        }
        .booking-cat-icon { font-size: 1.5rem; line-height: 1; }
        .booking-cat-label { font-size: 0.72rem; font-weight: 700; }

        /* Total amount card */
        .booking-total-card {
            margin: 0 0 1rem; padding: 1.2rem 1.5rem;
            background: rgba(255, 255, 255, 0.55);
            border-radius: 18px; color: var(--ink-strong);
            display: flex; align-items: center; justify-content: space-between;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        .booking-total-label { font-size: 0.82rem; font-weight: 600; opacity: 0.9; margin-bottom: 4px; }
        .booking-total-amount { font-size: 2rem; font-weight: 800; letter-spacing: 1px; }
        .booking-total-icon { font-size: 2.5rem; opacity: 0.4; }

        /* Edit button */
        .booking-edit-row {
            display: flex; justify-content: flex-end; padding: 0; margin-bottom: 0.8rem;
        }
        .booking-edit-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 16px; background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px;
            font-size: 0.85rem; font-weight: 700; color: var(--trip-accent-strong);
            cursor: pointer; font-family: inherit;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
            transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .booking-edit-btn:active {
            transform: scale(0.96);
        }

        /* Booking cards container */
        .booking-cards { padding: 0; }

        /* --- Flight card (boarding pass style) --- */
        .booking-flight-card {
            background: rgba(255, 255, 255, 0.65); border-radius: 18px; overflow: hidden;
            margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.55);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.65);
        }
        .booking-flight-header {
            background: rgba(255, 255, 255, 0.45);
            padding: 12px 16px;
            display: flex; align-items: center; justify-content: space-between;
            color: var(--ink-strong);
            border-bottom: 1px solid rgba(255, 255, 255, 0.45);
        }
        .booking-flight-title { font-size: 0.92rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
        .booking-flight-badge {
            font-size: 0.74rem; font-weight: 700; letter-spacing: 0.5px;
            background: rgba(120, 143, 178, 0.12); color: #6B81A6; padding: 3px 10px;
            border-radius: 6px;
        }
        .booking-flight-body { padding: 20px 16px 8px; }
        .booking-flight-route {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 14px;
        }
        .booking-airport { text-align: center; }
        .booking-airport-code { font-size: 2.2rem; font-weight: 800; color: var(--ink-strong); letter-spacing: 2px; }
        .booking-airport-name { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
        .booking-flight-arrow { font-size: 1.5rem; color: #7D94BA; flex-shrink: 0; padding: 0 12px; }
        .booking-flight-times {
            display: flex; justify-content: space-between;
            padding: 10px 0; margin-bottom: 6px;
            border-top: 1px solid var(--border); border-bottom: 1px dashed var(--border);
        }
        .booking-flight-time-label { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
        .booking-flight-time-value { font-size: 1.3rem; font-weight: 800; color: var(--ink-strong); }
        .booking-flight-time-value.arrival { color: #6B81A6; }
        .booking-flight-extras {
            display: flex; gap: 0; margin-top: 8px; padding-bottom: 12px;
        }
        .booking-flight-extra {
            flex: 1; padding: 10px 12px;
            border: 1px solid var(--border); border-radius: 0;
        }
        .booking-flight-extra:first-child { border-radius: 10px 0 0 10px; }
        .booking-flight-extra:last-child { border-radius: 0 10px 10px 0; border-left: none; }
        .booking-flight-extra-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
        .booking-flight-extra-value { font-size: 0.92rem; font-weight: 700; color: var(--ink-strong); margin-top: 2px; }

        /* --- Generic booking card (accommodation, car rental, voucher, etc.) --- */
        .booking-generic-card {
            background: rgba(255, 255, 255, 0.65); border-radius: 18px; overflow: hidden;
            margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.55);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.65);
        }
        .booking-generic-header {
            padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
        }
        .booking-generic-header.flight { background: rgba(255, 255, 255, 0.45); color: var(--ink-strong); border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
        .booking-generic-header.accommodation { background: rgba(255, 255, 255, 0.45); color: var(--ink-strong); border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
        .booking-generic-header.car_rental { background: rgba(255, 255, 255, 0.45); color: var(--ink-strong); border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
        .booking-generic-header.voucher { background: rgba(255, 255, 255, 0.45); color: var(--ink-strong); border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
        .booking-generic-header.insurance { background: rgba(255, 255, 255, 0.45); color: var(--ink-strong); border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
        .booking-generic-header.other { background: rgba(255, 255, 255, 0.45); color: var(--ink-strong); border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
        .booking-generic-title { font-size: 0.92rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
        .booking-generic-badge {
            font-size: 0.74rem; font-weight: 700; letter-spacing: 0.5px;
            background: rgba(255,255,255,0.25); padding: 3px 10px;
            border-radius: 6px;
        }
        .booking-generic-header.flight .booking-generic-badge {
            background: rgba(120, 143, 178, 0.12);
            color: #6B81A6;
        }
        .booking-generic-header.accommodation .booking-generic-badge {
            background: rgba(120, 143, 178, 0.12);
            color: #7386A3;
        }
        .booking-generic-header.car_rental .booking-generic-badge {
            background: rgba(120, 143, 178, 0.1);
            color: #70859B;
        }
        .booking-generic-header.voucher .booking-generic-badge {
            background: rgba(120, 143, 178, 0.1);
            color: #7C8798;
        }
        .booking-generic-header.insurance .booking-generic-badge {
            background: rgba(120, 143, 178, 0.12);
            color: #6F84A0;
        }
        .booking-generic-header.other .booking-generic-badge {
            background: rgba(120, 143, 178, 0.08);
            color: #7B7F88;
        }
        .booking-generic-body { padding: 16px; }
        .booking-generic-fields {
            display: grid; gap: 0;
        }
        .booking-generic-fields-extra {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 220ms ease, opacity 180ms ease;
        }
        .booking-generic-fields-extra.is-expanded {
            max-height: 2000px;
            opacity: 1;
        }
        .booking-generic-field {
            padding: 10px 0;
            border-bottom: 1px dashed rgba(235, 228, 223, 0.6);
        }
        .booking-generic-field:last-child { border-bottom: none; }
        .booking-generic-fields-extra .booking-generic-field:first-child { border-top: 1px dashed rgba(235, 228, 223, 0.6); }
        .booking-generic-fields-extra .booking-generic-field:last-child { border-bottom: 1px dashed rgba(235, 228, 223, 0.6); }
        .booking-generic-field-key { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
        .booking-generic-field-value { font-size: 0.95rem; font-weight: 700; color: var(--ink-strong); margin-top: 2px; }
        .booking-generic-more-btn {
            margin-top: 10px;
            min-height: 44px;
            padding: 0 14px;
            border-radius: 12px;
            border: 1px solid #DDE5F0;
            background: #F7FAFD;
            color: #677C9A;
            font-size: 0.84rem;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
        }
        .booking-generic-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            max-width: 100%;
            margin-top: 2px;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid var(--sec-border-strong);
            background: var(--sec-bg);
            color: var(--trip-accent-strong);
            font-size: 0.88rem;
            font-weight: 800;
            line-height: 1.3;
            text-decoration: none;
            box-shadow: 0 3px 10px color-mix(in srgb, var(--trip-accent) 10%, rgba(90, 124, 169, 0.08));
            transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }
        .booking-generic-link:hover,
        .booking-generic-link:active {
            background: #EEF6FF;
            border-color: #C4D8EE;
            transform: translateY(-1px);
        }
        .booking-generic-link-icon {
            flex: 0 0 auto;
            line-height: 1;
        }
        .booking-generic-link-caption {
            margin-top: 6px;
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--muted);
            word-break: break-all;
        }
        .booking-urgent-panel {
            display: grid;
            gap: 8px;
            margin: 0 0 12px;
        }
        .booking-focus-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .booking-focus-item {
            min-width: 0;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 9px 10px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 10%, var(--border));
            border-radius: 12px;
            background: color-mix(in srgb, var(--trip-accent-soft) 18%, rgba(255, 255, 255, 0.74));
        }
        .booking-focus-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            border-radius: 8px;
            color: var(--trip-accent-strong);
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 10%, transparent);
        }
        .booking-focus-icon-svg {
            width: 14px;
            height: 14px;
            display: block;
        }
        .booking-focus-copy {
            min-width: 0;
            display: grid;
            gap: 2px;
        }
        .booking-focus-label {
            color: #9C8F87;
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1.2;
        }
        .booking-focus-value {
            min-width: 0;
            color: var(--ink-strong);
            font-size: 0.86rem;
            font-weight: 800;
            line-height: 1.38;
            word-break: break-word;
        }
        .booking-focus-value.is-code {
            font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
        }
        .booking-quick-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .booking-quick-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 44px;
            padding: 8px 12px;
            border-radius: 12px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 14%, var(--border));
            background: #FFFFFF;
            color: var(--trip-accent-strong);
            font-size: 0.82rem;
            font-weight: 800;
            line-height: 1.2;
            text-decoration: none;
            box-shadow: 0 3px 10px color-mix(in srgb, var(--trip-accent) 8%, transparent);
        }
        .booking-quick-action.is-static {
            color: #7A6F6B;
            background: rgba(255, 255, 255, 0.58);
            box-shadow: none;
        }
        .booking-notice-card {
            display: grid;
            gap: 8px;
            margin-top: 12px;
            padding: 11px 12px;
            border-radius: 12px;
            border: 1px solid color-mix(in srgb, #D8A351 18%, var(--border));
            background: color-mix(in srgb, #F7E6C6 34%, #FFFFFF);
        }
        .booking-notice-head {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #7A5D2A;
            font-size: 0.74rem;
            font-weight: 900;
            line-height: 1.2;
        }
        .booking-notice-row {
            display: grid;
            gap: 3px;
        }
        .booking-notice-label {
            color: #9B7B43;
            font-size: 0.68rem;
            font-weight: 800;
        }
        .booking-notice-text {
            color: var(--ink);
            font-size: 0.86rem;
            font-weight: 650;
            line-height: 1.58;
            word-break: break-word;
        }
        .booking-generic-note {
            margin-top: 10px; padding: 12px 14px;
            background: #F8FBFE; border-radius: 12px;
            border: 1px solid #E1E8F3;
            font-size: 0.88rem; color: var(--ink); line-height: 1.6;
        }

        /* Empty state */
        .booking-empty {
            text-align: center; padding: 3rem 1rem;
            color: var(--muted);
        }
        .booking-empty-icon { font-size: 3rem; margin-bottom: 12px; }
        .booking-empty-text { font-size: 0.95rem; font-weight: 600; }
        .booking-empty .booking-manage-link { margin-top: 18px; }
        /* Booking card line icons */
        .booking-total-icon-svg { width: 40px; height: 40px; display: block; }
        .booking-empty-icon-svg { width: 44px; height: 44px; }
        .booking-line-inline { width: 15px; height: 15px; display: block; flex: 0 0 auto; }
        .booking-generic-title-icon,
        .booking-flight-title-icon { width: 18px; height: 18px; flex: 0 0 auto; }
        .booking-flight-arrow-svg { width: 20px; height: 20px; display: block; }
        .booking-attach-pdf-icon svg { width: 24px; height: 24px; display: block; }
        .booking-generic-link-icon svg { width: 15px; height: 15px; vertical-align: -0.15em; }

        /* Booking loading */
        .booking-loading {
            text-align: center; padding: 3rem 1rem; color: var(--muted);
            font-size: 0.95rem; font-weight: 600;
        }

        /* --- Members tab --- */
        .members-section { display: none; max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
        body.is-itinerary.show-members .itin-app { display: none; }
        body.is-itinerary.show-members .members-section { display: block; animation: fadeIn 0.4s ease forwards; }

        .members-header {
            background: #F6F3F7;
        }
        .members-header .tab-header-sync { color: #8F7A95; }
        .members-header .tab-header-sync-dot { background: #BFB1C8; }

        .members-shell {
            background: var(--card);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: var(--radius-xl);
            padding: 16px;
            border: var(--glass-border);
            box-shadow: 
                var(--shadow),
                inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
                inset 0 -1px 0 rgba(255, 255, 255, 0.2);
            margin: 0 1rem 1rem;
            display: grid;
            gap: 14px;
        }

        .members-info-card {
            margin: 0; padding: 1.5rem;
            background: rgba(255, 255, 255, 0.55);
            border-radius: 20px; color: var(--ink-strong); text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        .members-info-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 4px; }
        .members-info-date { font-size: 0.85rem; color: #7F7788; margin-bottom: 8px; }
        .members-info-sync { font-size: 0.8rem; color: #928699; margin-bottom: 10px; }
        .members-share-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.5);
            color: var(--trip-accent-strong); padding: 8px 18px; border-radius: 12px;
            font-size: 0.85rem; font-weight: 700; cursor: pointer;
            font-family: inherit;
            transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .members-share-btn:active {
            transform: scale(0.96);
        }

        .members-count {
            display: flex; justify-content: space-between; align-items: center;
            padding: 4px 6px; font-size: 1rem; font-weight: 800; color: var(--ink-strong);
        }
        .members-count-hint { font-size: 0.8rem; font-weight: 600; color: var(--muted); }

        .members-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
            padding: 0;
        }
        .member-card {
            background: rgba(255, 255, 255, 0.65); border-radius: 16px;
            padding: 1.2rem; text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.55);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.65);
            position: relative;
        }
        .member-avatar {
            width: 72px; height: 72px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 2.8rem; margin: 0 auto 10px;
            background: #F7F3EF; border: 2px solid var(--border);
        }
        .member-name {
            font-size: 1.05rem; font-weight: 800; color: var(--ink-strong);
            margin-bottom: 4px;
        }
        .member-edit-btn {
            position: absolute; top: 6px; right: 6px;
            background: none; border: none; cursor: pointer;
            font-size: 1rem; padding: 10px; min-width: 44px; min-height: 44px;
            display: flex; align-items: center; justify-content: center;
        }
        .member-remove {
            font-size: 0.84rem; font-weight: 700; color: #9A7F8D;
            cursor: pointer; border: none; background: none;
            border-top: 1px dashed var(--border); width: 100%;
            padding: 12px 0 4px; margin-top: 8px; font-family: inherit;
            min-height: 44px;
        }
        .member-add-card {
            background: transparent; border-radius: 16px;
            padding: 1.2rem; text-align: center;
            border: 2px dashed #C5BCB9; cursor: pointer;
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; min-height: 160px;
            color: var(--muted); transition: border-color 0.2s;
        }
        .member-add-card:hover { border-color: #DDD1E4; color: #857593; background: rgba(248, 244, 250, 0.72); }
        .member-add-icon { font-size: 2rem; margin-bottom: 6px; opacity: 0.5; }
        .member-add-text { font-size: 0.9rem; font-weight: 700; }

        /* --- Member dialog --- */
        .member-dlg-overlay {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.5);
            display: flex; align-items: center; justify-content: center;
            padding: 1rem;
        }
        .member-dlg-card {
            background: var(--card); border-radius: 20px; padding: 1.5rem;
            width: min(100%, 360px); box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        }
        .member-dlg-title {
            margin: 0 0 1rem; font-size: 1.05rem; font-weight: 800;
            color: var(--ink-strong); text-align: center;
        }
        .member-dlg-avatar-section { text-align: center; margin-bottom: 1rem; }
        .member-dlg-avatar-display {
            width: 72px; height: 72px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 2.8rem; margin: 0 auto 8px;
            background: #F7F3EF; border: 2px solid var(--border); cursor: default;
        }
        .member-dlg-avatar-grid {
            display: flex; flex-wrap: wrap; gap: 8px;
            justify-content: center; padding: 8px 0;
        }
        .member-dlg-avatar-opt {
            font-size: 1.8rem; cursor: pointer; padding: 6px; border-radius: 8px;
            min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
        }
        .member-dlg-avatar-opt.active { background: linear-gradient(135deg, #EFF3F9, #F5ECF2); }
        .member-dlg-avatar-input {
            display: block; width: auto; max-width: 220px; margin: 6px auto 0;
            padding: 7px 12px; text-align: center;
            border: 1px dashed var(--border); border-radius: 10px;
            font-size: 1rem; font-family: inherit;
            background: var(--bg); color: var(--ink); outline: none; box-sizing: border-box;
        }
        .member-dlg-avatar-input:focus {
            border-color: #C8BCD4; box-shadow: 0 0 0 3px rgba(200, 188, 212, 0.12);
        }
        .member-dlg-input {
            width: 100%; padding: 10px 14px; border: 1px solid var(--border);
            border-radius: 12px; font-size: 1rem; font-family: inherit;
            background: var(--bg); color: var(--ink); outline: none;
            margin-bottom: 1rem; box-sizing: border-box;
        }
        .member-dlg-input:focus {
            border-color: #C8BCD4;
            box-shadow: 0 0 0 3px rgba(200, 188, 212, 0.12);
        }
        .member-dlg-actions { display: flex; gap: 8px; }
        .member-dlg-btn {
            flex: 1; padding: 10px; border-radius: 12px; min-height: 44px;
            font-size: 0.9rem; font-family: inherit; cursor: pointer;
        }
        .member-dlg-btn.cancel {
            border: 1px solid var(--border); font-weight: 700;
            background: var(--bg); color: var(--muted);
        }
        .member-dlg-btn.confirm {
            border: 1px solid #DDD2E6; font-weight: 800;
            background: linear-gradient(160deg, #F0EAF5, #E8DFF0); color: #776887;
        }

        /* --- Memory tab --- */
        .memory-section { display: none; max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
        body.is-itinerary.show-memory .itin-app { display: none; }
        body.is-itinerary.show-memory .memory-section { display: block; animation: fadeIn 0.4s ease forwards; }
        .memory-header {
            background: var(--sec-bg);
        }
        .memory-header .tab-header-sync { color: var(--sec-text); }
        .memory-header .tab-header-sync-dot { background: color-mix(in srgb, var(--trip-accent) 48%, #B3A7C8); }
        .memory-shell {
            background: var(--card);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: var(--radius-xl);
            padding: 16px;
            border: var(--glass-border);
            box-shadow: 
                var(--shadow),
                inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
                inset 0 -1px 0 rgba(255, 255, 255, 0.2);
            margin: 0 1rem 1rem;
            display: grid;
            gap: 14px;
        }
        .memory-composer,
        .memory-manage-card {
            background: rgba(255, 255, 255, 0.55);
            border-radius: var(--radius-lg);
            padding: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        .memory-composer-head,
        .memory-manage-head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 10px; margin-bottom: 12px;
        }
        .memory-composer-title,
        .memory-manage-title {
            margin: 0; font-size: 1rem; font-weight: 900; color: var(--ink-strong);
        }
        .memory-composer-note,
        .memory-manage-note {
            margin: 6px 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--muted);
        }
        .memory-status-pill {
            display: inline-flex; align-items: center; justify-content: center;
            min-height: 44px; padding: 0 12px; border-radius: 999px;
            background: var(--sec-chip-bg); color: var(--sec-text); font-size: 0.78rem; font-weight: 800;
            white-space: nowrap;
        }
        .memory-form-grid { display: grid; gap: 10px; }
        .memory-date-select-wrap {
            display: grid;
            gap: 6px;
        }
        .memory-day-chips::-webkit-scrollbar {
            display: none;
        }
        .memory-day-chip-btn {
            min-height: 40px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--ink);
            font-size: 0.84rem;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .memory-day-chip-btn.active {
            background: var(--trip-accent);
            color: #fff;
            border-color: transparent;
        }
        .memory-field-kicker {
            font-size: 0.76rem;
            font-weight: 800;
            color: var(--muted);
            line-height: 1.4;
        }
        .memory-input,
        .memory-textarea {
            width: 100%; box-sizing: border-box; border-radius: 14px;
            border: 1px solid var(--border); background: var(--bg);
            color: var(--ink); font-family: inherit; outline: none;
            padding: 11px 13px; font-size: 1rem;
        }
        .memory-input:focus,
        .memory-textarea:focus {
            border-color: var(--trip-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent) 14%, transparent);
        }
        .memory-textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
        .memory-upload-row {
            display: flex; align-items: center; justify-content: space-between;
            gap: 10px; flex-wrap: wrap;
        }
        .memory-upload-btn,
        .memory-save-btn,
        .memory-delete-btn {
            border: none; border-radius: 14px; font-family: inherit; cursor: pointer;
            font-size: 0.88rem; font-weight: 800; padding: 10px 14px; min-height: 44px;
        }
        .memory-upload-btn {
            background: var(--sec-chip-bg); color: var(--sec-text);
            border: 1px solid var(--sec-chip-border);
        }
        .memory-save-btn {
            background: linear-gradient(160deg, var(--sec-bg), var(--sec-bg-strong)); color: var(--sec-text);
            border: 1px solid var(--sec-border);
        }
        .memory-delete-btn {
            background: var(--sec-bg); color: var(--sec-text-muted);
            border: 1px solid var(--sec-border);
        }
        .memory-file-hint {
            font-size: 0.8rem; color: var(--muted); line-height: 1.5;
        }
        .memory-photo-preview-strip {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 2px 0 4px;
            scrollbar-width: none;
        }
        .memory-photo-preview-strip::-webkit-scrollbar {
            display: none;
        }
        .memory-photo-preview-item {
            position: relative;
            width: 60px;
            height: 60px;
            flex: 0 0 auto;
        }
        .memory-photo-preview-thumb {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            object-fit: cover;
            display: block;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 12%, rgba(215, 206, 224, 0.9));
            background: var(--sec-chip-bg);
        }
        .memory-photo-preview-remove {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 22px;
            height: 22px;
            border: none;
            border-radius: 999px;
            background: color-mix(in srgb, var(--trip-accent-strong) 82%, rgba(72, 58, 97, 0.88));
            color: #fff;
            font-size: 0.76rem;
            font-weight: 800;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px color-mix(in srgb, var(--trip-accent) 24%, rgba(72, 58, 97, 0.22));
        }
        .memory-list { display: grid; gap: 10px; }
        .memory-meta-row {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-bottom: 8px;
        }
        .memory-date-chip,
        .memory-day-chip {
            display: inline-flex; align-items: center; justify-content: center;
            min-height: 28px; padding: 0 10px; border-radius: 999px;
            font-size: 0.76rem; font-weight: 800;
        }
        .memory-date-chip { background: var(--sec-chip-bg); color: var(--sec-text); }
        .memory-day-chip { background: var(--sec-bg-strong); color: var(--sec-text); }
        .memory-card-title { margin: 0; font-size: 1rem; font-weight: 900; color: var(--ink-strong); }
        .memory-card-note { margin: 8px 0 0; font-size: 0.86rem; line-height: 1.65; color: var(--muted); }
        .memory-empty {
            text-align: center; padding: 28px 16px;
            color: var(--muted); font-size: 0.9rem; line-height: 1.7;
        }

        /* --- Notes tab --- */
        .notes-section { display: none; max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
        body.is-itinerary.show-notes .itin-app { display: none; }
        body.is-itinerary.show-notes .notes-section { display: block; animation: fadeIn 0.4s ease forwards; }
        .notes-header { background: var(--sec-bg); }
        .notes-header .tab-header-sync { color: var(--sec-text); }
        .notes-header .tab-header-sync-dot { background: color-mix(in srgb, var(--trip-accent) 48%, #E0B547); }
        .notes-shell { padding: 0 1rem; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
        .notes-toolbar {
            background: var(--card); border-radius: 20px; padding: 14px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 16px rgba(165, 155, 152, 0.04);
            display: grid; gap: 10px;
        }
        .notes-search-row {
            display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
        }
        .notes-search-input-wrap {
            position: relative; flex: 1 1 200px; min-width: 0;
        }
        .notes-search-input {
            width: 100%; box-sizing: border-box;
            border-radius: 14px; border: 1px solid var(--border);
            background: var(--bg); color: var(--ink); font-family: inherit;
            padding: 11px 36px 11px 13px; font-size: 1rem; outline: none;
        }
        .notes-search-input:focus {
            border-color: var(--trip-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent) 18%, transparent);
        }
        .notes-search-clear {
            position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
            width: 26px; height: 26px; border-radius: 50%;
            border: 0; cursor: pointer;
            background: #E0D5C3; color: #5C524E;
            font-size: 1rem; font-weight: 700; line-height: 1;
            display: inline-flex; align-items: center; justify-content: center;
            padding: 0;
        }
        .notes-search-clear[hidden] { display: none; }
        .notes-search-clear:hover { background: #D2C5B0; }
        .notes-add-btn {
            border: none; border-radius: 14px; cursor: pointer;
            background: linear-gradient(160deg, var(--trip-accent), var(--trip-accent-strong));
            color: #fff; font-family: inherit; font-weight: 800;
            font-size: 0.92rem; padding: 11px 16px; min-height: 44px;
            box-shadow: 0 4px 12px color-mix(in srgb, var(--trip-accent) 22%, transparent);
        }
        .notes-chips {
            display: flex; gap: 8px; overflow-x: auto; padding: 2px 0;
            scrollbar-width: none; -webkit-overflow-scrolling: touch;
        }
        .notes-chips::-webkit-scrollbar { display: none; }
        .notes-chip {
            min-height: 40px; padding: 0 14px; border-radius: 999px;
            border: 1px solid var(--border); background: var(--bg);
            color: var(--ink); font-size: 0.84rem; font-weight: 700;
            font-family: inherit; cursor: pointer; white-space: nowrap;
            flex: 0 0 auto;
        }
        .notes-chip.active {
            background: var(--trip-accent); color: #fff; border-color: transparent;
        }
        .notes-chip-count {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 18px; height: 18px; padding: 0 6px; margin-left: 6px;
            border-radius: 999px;
            background: rgba(74, 64, 60, 0.08); color: var(--muted);
            font-size: 0.7rem; font-weight: 800;
        }
        .notes-chip.active .notes-chip-count {
            background: rgba(255, 255, 255, 0.32); color: #fff;
        }
        .notes-list-section { display: grid; gap: 12px; }
        .notes-list { display: grid; gap: 12px; }
        .notes-card {
            background: var(--card); border-radius: 18px; padding: 14px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 16px rgba(165, 155, 152, 0.04);
            display: grid; gap: 8px;
        }
        .notes-card-head {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            justify-content: space-between;
        }
        .notes-card-category {
            display: inline-flex; align-items: center;
            padding: 4px 10px; border-radius: 999px;
            background: var(--sec-chip-bg); color: var(--trip-accent-strong);
            font-size: 0.76rem; font-weight: 800;
        }
        .notes-card-time {
            font-size: 0.74rem; color: var(--muted); font-weight: 700;
        }
        .notes-card-title {
            margin: 0; font-size: 1.02rem; font-weight: 900; color: var(--ink-strong);
            line-height: 1.4; word-break: break-word;
        }
        .notes-card-content {
            margin: 0; font-size: 0.92rem; line-height: 1.7;
            color: var(--ink); white-space: pre-wrap; word-break: break-word;
        }
        .notes-card-actions {
            display: flex; gap: 8px; flex-wrap: wrap;
            margin-top: 4px; align-items: center;
        }
        .notes-card-url-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 9px 14px; border-radius: 12px;
            background: linear-gradient(160deg, var(--trip-accent), var(--trip-accent-strong));
            color: #fff; font-weight: 800; font-size: 0.86rem;
            text-decoration: none; min-height: 40px; box-sizing: border-box;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--trip-accent) 22%, transparent);
        }
        .notes-card-url-btn:hover { filter: brightness(1.02); }
        .notes-card-edit,
        .notes-card-delete {
            border: 1px solid var(--border); background: var(--bg);
            color: var(--ink); font-family: inherit; font-weight: 700;
            font-size: 0.84rem; padding: 8px 12px; border-radius: 12px;
            cursor: pointer; min-height: 40px;
        }
        .notes-card-delete { color: #B85B5B; border-color: #F2D8D8; background: #FBF1F1; }
        .notes-preview-card {
            display: flex; gap: 12px;
            padding: 10px; border-radius: 14px;
            border: 1px solid var(--border); background: #FFFCF4;
            text-decoration: none; color: inherit;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
            min-height: 96px;
        }
        .notes-preview-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(218, 175, 71, 0.14);
        }
        .notes-preview-thumb-wrap {
            flex: 0 0 96px; width: 96px; height: 96px;
            border-radius: 10px; overflow: hidden;
            background: #F0EBDF;
        }
        .notes-preview-thumb {
            width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .notes-preview-body {
            flex: 1 1 auto; min-width: 0;
            display: flex; flex-direction: column; gap: 4px; justify-content: center;
        }
        .notes-preview-title {
            font-size: 0.95rem; font-weight: 800; color: var(--ink-strong);
            line-height: 1.35; word-break: break-word;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .notes-preview-desc {
            font-size: 0.82rem; color: var(--ink); line-height: 1.5; word-break: break-word;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .notes-preview-site {
            font-size: 0.74rem; color: var(--muted); font-weight: 700;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        /* IG / Threads 官方嵌入：固定高度視窗，只露出開頭、底部漸層淡出 */
        .notes-embed {
            width: 100%; max-width: 100%; margin: 2px 0;
            display: flex; flex-direction: column; align-items: stretch;
        }
        .notes-embed-frame {
            position: relative;
            width: 100%; max-width: 100%;
            max-height: 360px; overflow: hidden;
            border: 1px solid var(--border); border-radius: 14px;
            background: var(--card);
        }
        /* 底部漸層淡出，暗示「還有更多，點下方看完整」 */
        .notes-embed-frame::after {
            content: ''; position: absolute; left: 0; right: 0; bottom: 0;
            height: 64px; pointer-events: none;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card));
        }
        /* 強制嵌入內容收進容器寬度，避免把版面撐爆（跑版） */
        .notes-embed-frame iframe,
        .notes-embed-frame .instagram-media,
        .notes-embed-frame .text-post-media {
            max-width: 100% !important; min-width: 0 !important;
            width: 100% !important; margin: 0 auto !important;
        }
        .notes-embed-more {
            align-self: flex-start; margin-top: 8px;
            font-size: 0.82rem; font-weight: 800; color: var(--accent, #E85A4F);
            text-decoration: none;
        }
        .notes-embed-more:hover { text-decoration: underline; }
        /* IG 連結卡片（官方嵌入被 Meta 鎖死，改用乾淨卡片） */
        .notes-social-card {
            display: flex; align-items: center; gap: 12px;
            padding: 12px; border-radius: 14px;
            border: 1px solid var(--border); background: #FFFCF4;
            text-decoration: none; color: inherit;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .notes-social-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(165, 155, 152, 0.16);
        }
        .notes-social-icon {
            flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
        }
        .notes-social-instagram .notes-social-icon {
            background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
        }
        .notes-social-body {
            display: flex; flex-direction: column; gap: 2px; min-width: 0;
        }
        .notes-social-title {
            font-size: 0.95rem; font-weight: 800; color: var(--ink-strong);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .notes-social-host {
            font-size: 0.78rem; color: var(--muted); font-weight: 700;
        }
        /* 嵌入腳本載入/處理前的備援連結外觀（被處理後 blockquote 會被換掉，不受影響） */
        .notes-embed-frame > blockquote > a {
            display: inline-block; padding: 12px 14px;
            color: var(--ink-strong); font-weight: 700; font-size: 0.88rem;
            text-decoration: none;
        }
        .notes-empty {
            text-align: center; padding: 28px 16px;
            color: var(--muted); font-size: 0.9rem; line-height: 1.7;
            background: var(--card); border-radius: 18px; border: 1px dashed var(--border);
        }

        /* Notes editor dialog */
        .notes-dlg-overlay {
            position: fixed; inset: 0; z-index: 10000;
            background: rgba(74, 64, 60, 0.34);
            display: flex; align-items: flex-end; justify-content: center;
            padding: 0;
        }
        .notes-dlg-card {
            width: min(100%, 520px); margin: 0 auto;
            background: var(--card-solid); color: var(--ink-strong);
            border-radius: 20px 20px 0 0;
            padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
            box-shadow: 0 -18px 48px rgba(74, 64, 60, 0.18);
            display: grid; gap: 12px; max-height: 92vh; overflow-y: auto;
        }
        .notes-dlg-title { margin: 0; font-size: 1.08rem; font-weight: 900; }
        .notes-dlg-field { display: grid; gap: 6px; }
        .notes-dlg-field > span {
            font-size: 0.78rem; font-weight: 800; color: var(--muted);
        }
        .notes-dlg-input,
        .notes-dlg-textarea {
            width: 100%; box-sizing: border-box;
            border-radius: 14px; border: 1px solid var(--border);
            background: var(--bg); color: var(--ink); font-family: inherit;
            padding: 11px 13px; font-size: 1rem; outline: none;
        }
        .notes-dlg-input:focus,
        .notes-dlg-textarea:focus {
            border-color: color-mix(in srgb, var(--trip-accent) 45%, var(--border));
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent) 14%, transparent);
        }
        .notes-dlg-textarea { resize: vertical; line-height: 1.6; }
        .notes-dlg-chips {
            display: flex; gap: 6px; flex-wrap: wrap;
            margin: -2px 0 2px;
        }
        .notes-dlg-chip {
            border: 1px solid var(--border); background: var(--bg);
            color: var(--ink); font-family: inherit; font-weight: 700;
            font-size: 0.85rem; padding: 7px 12px; border-radius: 999px;
            cursor: pointer; min-height: 36px;
            transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
        }
        .notes-dlg-chip.active {
            background: var(--trip-accent); color: #fff; border-color: transparent;
        }
        .notes-dlg-chip:not(.active):hover {
            border-color: color-mix(in srgb, var(--trip-accent) 40%, var(--border));
        }
        .notes-dlg-image-strip {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
            gap: 8px;
        }
        .notes-dlg-image-strip[hidden] { display: none; }
        .notes-dlg-image-item {
            position: relative;
            display: block;
            aspect-ratio: 1;
            border-radius: 12px;
            overflow: hidden;
            background: color-mix(in srgb, var(--trip-accent-soft) 36%, var(--bg));
            border: 1px solid color-mix(in srgb, var(--trip-accent) 10%, var(--border));
        }
        .notes-dlg-image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .notes-dlg-image-item button {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 24px;
            height: 24px;
            border: 0;
            border-radius: 8px;
            background: rgba(30, 24, 20, 0.62);
            color: #fff;
            font-size: 0.95rem;
            font-weight: 900;
            line-height: 1;
            cursor: pointer;
        }
        .notes-dlg-image-item.is-pending::after {
            content: '待上傳';
            position: absolute;
            left: 5px;
            bottom: 5px;
            padding: 2px 6px;
            border-radius: 999px;
            background: rgba(255,255,255,0.86);
            color: var(--trip-accent-strong);
            font-size: 0.64rem;
            font-weight: 900;
        }
        .notes-dlg-image-add {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            border: 1px dashed color-mix(in srgb, var(--trip-accent) 26%, var(--border));
            border-radius: 14px;
            background: color-mix(in srgb, var(--trip-accent-soft) 34%, rgba(255,255,255,0.7));
            color: var(--trip-accent-strong);
            font-size: 0.9rem;
            font-weight: 800;
            cursor: pointer;
        }
        .notes-dlg-image-add input { display: none; }
        .notes-dlg-image-hint {
            margin: -2px 0 0;
            color: var(--muted);
            font-size: 0.76rem;
            line-height: 1.5;
        }
        .notes-dlg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .notes-dlg-btn {
            min-height: 48px; border-radius: 14px; border: 0;
            cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 800;
        }
        .notes-dlg-btn.cancel {
            background: var(--bg); border: 1px solid var(--border); color: var(--muted);
        }
        .notes-dlg-btn.confirm {
            background: linear-gradient(160deg, var(--trip-accent), var(--trip-accent-strong)); color: #fff;
        }

        /* --- Expense tab --- */
        .expense-section { display: none; max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
        /* Contain wide content (charts/tables) here instead of on .expense-section,
           so the section isn't a clip/scroll container that fights the sticky bar. */
        #expense-content { overflow-x: clip; }
        body.is-itinerary.show-expense .itin-app { display: none; }
        body.is-itinerary.show-expense .expense-section { display: block; animation: fadeIn 0.4s ease forwards; }

        .expense-header {
            background: var(--sec-bg);
        }
        .expense-header .tab-header-sync { color: var(--trip-accent-strong); }
        .expense-header .tab-header-sync-dot { background: color-mix(in srgb, var(--trip-accent) 48%, var(--border, rgba(0, 0, 0, 0.08))); }
        #expense-header { cursor: default; }
        #expense-back-btn { cursor: pointer; }

        .expense-mode-toggle {
            display: flex; margin: 0.8rem 1rem;
            background: rgba(255, 255, 255, 0.45);
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.45);
            padding: 4px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .expense-mode-btn {
            flex: 1; padding: 10px 0; border: none; background: transparent;
            border-radius: 12px; font-size: 0.95rem; font-weight: 700;
            color: var(--muted); cursor: pointer; transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
            font-family: inherit; display: flex; align-items: center;
            justify-content: center; gap: 6px;
        }
        .expense-mode-btn.active {
            color: var(--trip-accent-strong);
            background: rgba(255, 255, 255, 0.72);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transform: scale(1.02);
        }

        .expense-total-card {
            margin: 0.8rem 1rem; padding: 1.5rem;
            background: rgba(255, 255, 255, 0.58) !important;
            backdrop-filter: blur(16px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
            border-radius: 20px; color: var(--ink-strong);
            border: 1px solid rgba(255, 255, 255, 0.45) !important;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--trip-accent) 6%, rgba(0, 0, 0, 0.02)), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
        }
        .expense-total-label { font-size: 0.85rem; font-weight: 700; opacity: 0.7; }
        .expense-total-amount { font-size: 2.2rem; font-weight: 800; margin: 4px 0; }
        .expense-total-note {
            font-size: 0.78rem; font-weight: 600; opacity: 0.6;
            background: rgba(0,0,0,0.08); display: inline-block;
            padding: 4px 12px; border-radius: 8px; margin-top: 4px;
        }
        .expense-quick-overview {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: 0.8rem 1rem 0.45rem;
            padding: 14px 15px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.58) !important;
            backdrop-filter: blur(16px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
            border: 1px solid rgba(255, 255, 255, 0.45) !important;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--trip-accent) 6%, rgba(0, 0, 0, 0.02)), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
        }
        .expense-quick-main {
            min-width: 0;
            display: grid;
            gap: 2px;
        }
        .expense-quick-label {
            color: var(--muted);
            font-size: 0.76rem;
            font-weight: 800;
        }
        .expense-quick-amount {
            color: var(--ink-strong);
            font-size: 1.55rem;
            font-weight: 900;
            line-height: 1.15;
            font-variant-numeric: tabular-nums;
        }
        .expense-quick-note {
            color: var(--muted);
            font-size: 0.78rem;
            font-weight: 700;
            line-height: 1.4;
        }
        .expense-quick-add,
        .expense-empty-action {
            flex: 0 0 auto;
            min-height: 42px;
            padding: 0 14px;
            border-radius: 12px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 20%, var(--border));
            background: var(--trip-accent);
            color: #fff;
            font: 800 0.86rem/1 'Nunito', 'Noto Sans TC', sans-serif;
            cursor: pointer;
        }
        .expense-empty-action {
            margin-top: 12px;
            background: color-mix(in srgb, var(--trip-accent) 88%, #fff);
        }

        .expense-dashboard {
            padding: 0.5rem 1rem 1.5rem;
        }
        .expense-dashboard-grid {
            display: grid; gap: 12px;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
        .expense-dashboard-card {
            background: rgba(255, 255, 255, 0.58) !important;
            backdrop-filter: blur(16px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
            border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.45) !important;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--trip-accent) 6%, rgba(0, 0, 0, 0.02)), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
            padding: 1rem 1rem 1.05rem;
        }
        .expense-dashboard-kicker {
            font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em;
            color: var(--muted); margin-bottom: 8px;
        }
        .expense-dashboard-value {
            font-size: 1.7rem; line-height: 1.1; font-weight: 800; color: var(--ink-strong);
        }
        .expense-dashboard-note {
            margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--muted);
            line-height: 1.5;
        }
        .expense-dashboard-note strong { color: var(--ink-strong); }
        .expense-dashboard-button {
            margin-top: 10px; border: 1px solid var(--sec-border); background: var(--sec-bg);
            color: var(--trip-accent-strong); border-radius: 12px; padding: 8px 12px;
            font-size: 0.84rem; font-weight: 700; font-family: inherit; cursor: pointer;
        }
        .expense-budget-track {
            width: 100%; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--trip-accent) 8%, var(--border, rgba(0, 0, 0, 0.08)));
            overflow: hidden; margin-top: 12px;
        }
        .expense-budget-fill {
            height: 100%; border-radius: inherit; transition: width 0.25s ease;
        }
        .expense-budget-fill.good { background: linear-gradient(90deg, #82C78D, #5FA96B); }
        .expense-budget-fill.warn { background: linear-gradient(90deg, #F2C76F, #E5A93A); }
        .expense-budget-fill.danger { background: linear-gradient(90deg, #F08B80, #D95C59); }
        .expense-member-list {
            display: grid; gap: 10px; margin-top: 12px;
        }
        .expense-member-row {
            display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center;
        }
        .expense-member-avatar {
            width: 42px; height: 42px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid var(--border); background: color-mix(in srgb, var(--trip-accent) 6%, var(--bg)); font-size: 1.5rem;
        }
        .expense-member-meta {
            min-width: 0;
        }
        .expense-member-name {
            font-size: 0.9rem; font-weight: 800; color: var(--ink-strong);
        }
        .expense-member-share {
            margin-top: 4px; font-size: 0.76rem; font-weight: 700; color: var(--muted);
        }
        .expense-member-amount {
            font-size: 0.88rem; font-weight: 800; color: var(--ink-strong);
        }
        .expense-member-empty {
            margin-top: 12px; font-size: 0.82rem; color: var(--muted); font-weight: 600;
        }
        .expense-stats {
            padding: 0.5rem 1rem 1.5rem;
            display: grid;
            gap: 12px;
        }
        .expense-stats-summary {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .expense-stats-summary::-webkit-scrollbar { display: none; }
        .expense-stats-chip {
            flex: 0 0 180px;
            background: rgba(255, 255, 255, 0.58) !important;
            backdrop-filter: blur(16px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
            border: 1px solid rgba(255, 255, 255, 0.45) !important;
            border-radius: 18px;
            padding: 14px 14px 13px;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--trip-accent) 6%, rgba(0, 0, 0, 0.02)), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
        }
        .expense-stats-chip-label {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: var(--muted);
        }
        .expense-stats-chip-value {
            margin-top: 8px;
            font-size: 1.08rem;
            line-height: 1.25;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .expense-stats-chip-note {
            margin-top: 6px;
            font-size: 0.78rem;
            line-height: 1.45;
            color: var(--muted);
            font-weight: 700;
        }
        .expense-stats-card {
            background: rgba(255, 255, 255, 0.58) !important;
            backdrop-filter: blur(16px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.45) !important;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--trip-accent) 6%, rgba(0, 0, 0, 0.02)), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
            padding: 1rem;
            min-width: 0;
        }
        .expense-stats-card.full {
            padding-bottom: 0.9rem;
        }
        .expense-stats-grid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }
        .expense-stats-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 12px;
        }
        .expense-stats-title {
            font-size: 1rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .expense-stats-caption {
            font-size: 0.78rem;
            line-height: 1.4;
            font-weight: 700;
            color: var(--muted);
        }
        .expense-stats-empty {
            padding: 1.1rem 0 0.2rem;
            font-size: 0.84rem;
            line-height: 1.55;
            color: var(--muted);
            font-weight: 700;
        }
        .expense-trend-scroll {
            overflow-x: auto;
            padding-bottom: 4px;
        }
        .expense-trend-scroll::-webkit-scrollbar {
            height: 6px;
        }
        .expense-trend-scroll::-webkit-scrollbar-thumb {
            background: rgba(122, 111, 107, 0.18);
            border-radius: 999px;
        }
        .expense-trend-canvas {
            min-width: 100%;
        }
        .expense-trend-chart {
            width: 100%;
            height: 200px;
            display: block;
        }
        .expense-trend-labels {
            display: grid;
            gap: 8px;
            margin-top: 6px;
        }
        .expense-trend-label {
            text-align: center;
            min-width: 0;
        }
        .expense-trend-date {
            font-size: 0.78rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .expense-trend-location {
            margin-top: 2px;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .expense-trend-amount {
            margin-top: 3px;
            font-size: 0.72rem;
            font-weight: 800;
            color: var(--muted);
        }
        .expense-donut-layout {
            display: grid;
            grid-template-columns: minmax(150px, 180px) 1fr;
            gap: 16px;
            align-items: center;
            min-width: 0;
        }
        .expense-donut-wrap {
            position: relative;
            width: 170px;
            height: 170px;
            margin: 0 auto;
            max-width: 100%;
        }
        .expense-donut-svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }
        .expense-donut-track {
            fill: none;
            stroke: #EFE7E1;
            stroke-width: 16;
        }
        .expense-donut-segment {
            fill: none;
            stroke-width: 16;
        }
        .expense-donut-center {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            pointer-events: none;
        }
        .expense-donut-center strong {
            font-size: 0.82rem;
            font-weight: 800;
            color: var(--muted);
        }
        .expense-donut-center span {
            margin-top: 4px;
            font-size: 1rem;
            line-height: 1.35;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .expense-legend-list {
            display: grid;
            gap: 10px;
            min-width: 0;
        }
        .expense-legend-row {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 10px;
            align-items: center;
            min-width: 0;
        }
        .expense-legend-swatch {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-top: 2px;
        }
        .expense-legend-main {
            min-width: 0;
        }
        .expense-legend-name {
            font-size: 0.88rem;
            font-weight: 800;
            color: var(--ink-strong);
            overflow-wrap: anywhere;
        }
        .expense-legend-sub {
            margin-top: 3px;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--muted);
        }
        .expense-legend-value {
            font-size: 0.84rem;
            font-weight: 800;
            color: var(--ink-strong);
            text-align: right;
            overflow-wrap: anywhere;
        }
        .expense-bar-list {
            display: grid;
            gap: 12px;
        }
        .expense-bar-row {
            display: grid;
            gap: 8px;
        }
        .expense-bar-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 12px;
        }
        .expense-bar-label {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .expense-bar-value {
            font-size: 0.82rem;
            font-weight: 800;
            color: var(--muted);
        }
        .expense-bar-track {
            width: 100%;
            height: 10px;
            border-radius: 999px;
            background: #EFE7E1;
            overflow: hidden;
        }
        .expense-bar-fill {
            height: 100%;
            border-radius: inherit;
        }
        .expense-bar-note {
            font-size: 0.75rem;
            line-height: 1.45;
            font-weight: 700;
            color: var(--muted);
        }
        .expense-top-list {
            display: grid;
            gap: 8px;
        }
        .expense-top-item {
            display: grid;
            grid-template-columns: 34px 1fr auto;
            gap: 10px;
            align-items: center;
            padding: 11px 12px;
            background: #FAF7F3;
            border-radius: 14px;
            border: 1px solid var(--border);
            min-width: 0;
        }
        .expense-top-rank {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #F6EEE0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.82rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .expense-top-main {
            min-width: 0;
        }
        .expense-top-label {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .expense-top-sub {
            margin-top: 4px;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--muted);
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            overflow-wrap: anywhere;
        }
        .expense-top-amount {
            text-align: right;
            min-width: 0;
        }
        .expense-top-amount-main {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .expense-top-amount-sub {
            margin-top: 3px;
            font-size: 0.74rem;
            font-weight: 700;
            color: var(--muted);
        }
        .expense-compare-list {
            display: grid;
            gap: 12px;
        }
        .expense-compare-row {
            display: grid;
            gap: 8px;
        }
        .expense-compare-head {
            display: grid;
            grid-template-columns: 40px 1fr auto;
            gap: 10px;
            align-items: center;
            min-width: 0;
        }
        .expense-compare-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--trip-accent) 6%, var(--bg));
            font-size: 1.35rem;
        }
        .expense-compare-main {
            min-width: 0;
        }
        .expense-compare-name {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .expense-compare-note {
            margin-top: 4px;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--muted);
        }
        .expense-compare-amount {
            font-size: 0.84rem;
            font-weight: 800;
            color: var(--ink-strong);
            text-align: right;
        }


        .expense-filter-pills {
            display: flex; gap: 8px; padding: 0.5rem 1rem;
            overflow-x: auto; scrollbar-width: none;
        }
        .expense-filter-pills::-webkit-scrollbar { display: none; }
        .expense-filter-pill {
            flex-shrink: 0; padding: 8px 16px; border-radius: 12px;
            border: 1px solid var(--border); background: var(--card);
            font-size: 0.88rem; font-weight: 700; color: var(--muted);
            cursor: pointer; font-family: inherit; transition: all 0.2s;
        }
        .expense-filter-pill.active {
            background: color-mix(in srgb, var(--trip-accent) 18%, var(--trip-accent-soft)); color: var(--trip-accent-strong); border-color: color-mix(in srgb, var(--trip-accent) 24%, var(--border));
        }

        /* Expense interactive states: hover / pressed / keyboard focus (a11y) */
        .expense-mode-btn:not(.active):hover {
            color: var(--ink); background: color-mix(in srgb, var(--trip-accent-soft) 38%, transparent);
        }
        .expense-mode-btn:active { transform: scale(0.97); }
        .expense-mode-btn:focus-visible {
            outline: 2px solid var(--trip-accent); outline-offset: -2px; border-radius: 12px;
        }
        .expense-filter-pill:not(.active):hover {
            color: var(--ink); border-color: color-mix(in srgb, var(--trip-accent) 22%, var(--border));
        }
        .expense-filter-pill:active { transform: scale(0.97); }
        .expense-filter-pill:focus-visible {
            outline: 2px solid var(--trip-accent); outline-offset: 1px;
        }
        .expense-quick-add,
        .expense-empty-action {
            transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
        }
        .expense-quick-add:hover,
        .expense-empty-action:hover {
            filter: brightness(1.04);
            box-shadow: 0 6px 16px color-mix(in srgb, var(--trip-accent) 26%, transparent);
        }
        .expense-quick-add:active,
        .expense-empty-action:active { transform: scale(0.97); }
        .expense-quick-add:focus-visible,
        .expense-empty-action:focus-visible {
            outline: 2px solid var(--trip-accent-strong); outline-offset: 2px;
        }
        .expense-payer-option:active { transform: scale(0.97); }
        .expense-payer-option:focus-visible {
            outline: 2px solid var(--trip-accent); outline-offset: 2px; border-radius: 12px;
        }
        .expense-form-input:focus-visible,
        .expense-form-select:focus-visible {
            border-color: var(--trip-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent) 22%, transparent);
        }
        .expense-form-date-picker:focus-within {
            outline: 2px solid var(--trip-accent); outline-offset: 2px; border-radius: 12px;
        }

        .expense-date-group { padding: 0.8rem 1rem; }
        .expense-date-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 4px 0; margin-bottom: 8px;
            border-bottom: 1px dashed var(--border);
        }
        .expense-date-label { font-size: 0.9rem; font-weight: 800; color: var(--trip-accent-strong); }
        .expense-date-subtotal { font-size: 0.85rem; font-weight: 700; color: var(--muted); }

        .expense-item {
            display: flex; align-items: flex-start; gap: 12px;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            background: var(--card); border-radius: 16px;
            padding: 14px 16px; margin-bottom: 8px;
            border: var(--glass-border);
            box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.6);
            transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .expense-item:active {
            transform: scale(0.975);
        }
        .expense-item-amounts { align-self: flex-start; }
        .expense-item-avatar {
            width: 44px; height: 44px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; background: color-mix(in srgb, var(--trip-accent) 6%, var(--bg)); flex-shrink: 0;
            border: 1px solid var(--border);
        }
        .expense-item-info { flex: 1; min-width: 0; }
        .expense-item-label { font-size: 0.95rem; font-weight: 800; color: var(--ink-strong); }
        .expense-item-subline {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 3px;
            color: var(--muted);
            font-size: 0.76rem;
            font-weight: 700;
            line-height: 1.35;
        }
        .expense-item-subline span:not(:last-child)::after {
            content: '·';
            margin-left: 6px;
            color: color-mix(in srgb, var(--trip-accent) 24%, var(--border, rgba(0, 0, 0, 0.08)));
        }
        .expense-item-meta {
            display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap;
        }
        .expense-item-badge {
            font-size: 0.72rem; font-weight: 700; padding: 2px 8px;
            border-radius: 6px; background: color-mix(in srgb, var(--trip-accent) 8%, var(--bg)); color: var(--trip-accent-strong);
        }
        .expense-item-amounts { text-align: right; flex-shrink: 0; }
        .expense-item-amount { font-size: 1.12rem; font-weight: 900; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
        .expense-item-converted { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
        .expense-item-actions {
            display: flex; flex-direction: row; gap: 6px;
            flex-shrink: 0;
        }
        .expense-item-note {
            margin-top: 7px;
            padding: 7px 11px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--trip-accent) 5%, var(--card));
            border: 1px solid color-mix(in srgb, var(--trip-accent) 9%, var(--border));
            color: var(--ink);
            font-size: 0.82rem;
            font-weight: 600;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .expense-item-edit,
        .expense-item-delete {
            background: none; cursor: pointer;
            font-size: 0.9rem; line-height: 1; color: var(--muted);
            width: 30px; height: 30px; padding: 0;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid transparent; border-radius: 9px;
            opacity: 0.55; transition: opacity 0.2s, color 0.2s, background 0.2s, border-color 0.2s, transform 0.12s;
        }
        .expense-item-edit:hover {
            opacity: 1; color: var(--trip-accent-strong);
            background: var(--trip-accent-soft);
            border-color: color-mix(in srgb, var(--trip-accent) 22%, var(--border));
        }
        .expense-item-delete:hover {
            opacity: 1; color: #C2533F;
            background: color-mix(in srgb, #C2533F 9%, transparent);
            border-color: color-mix(in srgb, #C2533F 22%, var(--border));
        }
        .expense-item-edit:active,
        .expense-item-delete:active { transform: scale(0.9); }
        .expense-item-edit:focus-visible,
        .expense-item-delete:focus-visible {
            outline: 2px solid var(--trip-accent); outline-offset: 1px;
            opacity: 1; border-radius: 9px;
        }

        /* Expense form */
        .expense-form { padding: 0.5rem 1rem; }
        .expense-form-card {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            background: var(--card); border-radius: 20px;
            padding: 1.2rem; border: var(--glass-border);
            box-shadow: var(--shadow), inset 0 1.5px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.2);
        }
        .expense-form-editing {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; margin-bottom: 14px; padding: 10px 12px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--trip-accent-soft) 56%, var(--card));
            border: 1px solid color-mix(in srgb, var(--trip-accent) 22%, var(--border));
        }
        .expense-form-editing-text { display: grid; gap: 2px; min-width: 0; }
        .expense-form-editing-title {
            font-size: 0.92rem; font-weight: 800; color: var(--trip-accent-strong);
        }
        .expense-form-editing-hint {
            font-size: 0.74rem; font-weight: 700; color: var(--muted);
        }
        .expense-form-cancel {
            flex-shrink: 0; padding: 7px 14px; border-radius: 10px;
            border: 1px solid var(--border); background: var(--card);
            color: var(--ink); font: 800 0.82rem/1 'Nunito', 'Noto Sans TC', sans-serif;
            cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.12s;
        }
        .expense-form-cancel:hover {
            background: var(--trip-header-surface);
            border-color: color-mix(in srgb, var(--trip-accent) 20%, var(--border));
        }
        .expense-form-cancel:active { transform: scale(0.97); }
        .expense-form-cancel:focus-visible {
            outline: 2px solid var(--trip-accent); outline-offset: 2px;
        }
        .expense-form-row {
            margin-bottom: 12px;
        }
        .expense-form-label {
            font-size: 0.82rem; font-weight: 700; color: var(--ink-strong);
            margin-bottom: 4px; display: block;
        }
        .expense-form-input {
            width: 100%; padding: 10px 14px; border: 1px solid var(--border);
            border-radius: 12px; font-size: 1rem; font-family: inherit;
            background: var(--bg); color: var(--ink); outline: none;
            transition: border-color 0.2s;
            box-sizing: border-box;
            min-width: 0;
        }
        .expense-form-input:focus { border-color: var(--trip-accent); }
        .expense-form-row-inline {
            display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
            margin-bottom: 12px;
        }
        .expense-form-row-inline > div,
        .expense-form-field {
            min-width: 0;
        }
        .expense-form-select {
            width: 100%; padding: 10px 14px; border: 1px solid var(--border);
            border-radius: 12px; font-size: 1rem; font-family: inherit;
            background: var(--bg); color: var(--ink); outline: none;
            appearance: none; -webkit-appearance: none;
            box-sizing: border-box;
            min-width: 0;
        }
        .expense-form-input:focus,
        .expense-form-select:focus,
        .expense-form-date-picker:focus-within {
            border-color: var(--trip-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent) 18%, transparent);
        }
        .expense-form-select.hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .expense-payer-picker {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
            gap: 8px;
        }
        .expense-payer-option {
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, 0.45);
            -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
            border-radius: 14px;
            min-height: 70px;
            padding: 10px 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
            font-family: inherit;
            position: relative;
        }
        .expense-payer-option:active {
            transform: scale(0.98);
        }
        .expense-payer-option.selected {
            border-color: var(--trip-accent);
            background: var(--trip-accent-soft);
            box-shadow: 0 6px 14px color-mix(in srgb, var(--trip-accent) 12%, transparent);
        }
        .expense-payer-option.selected::after {
            content: "✓";
            position: absolute;
            top: 8px;
            right: 8px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--trip-accent) 14%, transparent);
            color: var(--trip-accent-strong);
            font-size: 0.72rem;
            font-weight: 900;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .expense-payer-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #FFFFFF;
            border: 1px solid rgba(122, 111, 107, 0.12);
            font-size: 1.15rem;
        }
        .expense-payer-name {
            font-size: 0.78rem;
            font-weight: 800;
            color: var(--ink-strong);
            text-align: center;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }
        .expense-payer-note {
            display: none;
        }
        .expense-payer-empty {
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px dashed var(--border);
            background: rgba(255, 255, 255, 0.25);
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--muted);
            line-height: 1.5;
        }
        .expense-form-date-picker {
            position: relative;
            min-height: 46px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--bg);
            overflow: hidden;
        }
        .expense-form-date-display {
            min-height: 46px;
            padding: 0 42px 0 14px;
            display: flex;
            align-items: center;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--ink-strong);
            box-sizing: border-box;
        }
        .expense-form-date-display.is-empty {
            color: var(--muted);
        }
        .expense-form-date-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.9rem;
            color: var(--muted);
            pointer-events: none;
        }
        .expense-form-date-input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            border: 0;
            padding: 0;
            opacity: 0.01;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
            background: transparent;
        }
        .expense-form-submit {
            width: 100%; padding: 12px;
            border-radius: 14px; font-size: 1rem; font-weight: 800;
            font-family: inherit; cursor: pointer;
            background: var(--trip-accent);
            color: #fff; transition: transform 0.1s;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 22%, transparent);
            box-shadow: 0 4px 12px color-mix(in srgb, var(--trip-accent) 18%, transparent);
        }
        .expense-form-submit:active { transform: scale(0.98); }

        .expense-scan-btn {
            width: 100%; padding: 14px; border: 2px dashed var(--border);
            border-radius: 14px; font-size: 0.95rem; font-weight: 700;
            font-family: inherit; cursor: pointer;
            background: color-mix(in srgb, var(--trip-accent-soft) 38%, #FFFDF5); color: var(--ink-strong);
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.2s; margin-bottom: 12px;
        }
        .expense-scan-btn:active { transform: scale(0.98); border-color: var(--trip-accent); }
        .expense-scan-btn.scanning {
            pointer-events: none; opacity: 0.7;
            border-color: var(--trip-accent); background: var(--sec-chip-bg);
        }
        .expense-scan-preview {
            margin-bottom: 12px; border-radius: 12px; overflow: hidden;
            border: 1px solid var(--border); position: relative;
        }
        .expense-scan-preview img {
            width: 100%; max-height: 200px; object-fit: cover; display: block;
        }
        .expense-scan-preview .scan-overlay {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.5); color: white; font-size: 0.9rem; font-weight: 700;
        }
        .expense-scan-confidence {
            font-size: 0.75rem; font-weight: 600; padding: 4px 10px;
            border-radius: 8px; display: inline-block; margin-bottom: 8px;
        }
        .expense-scan-confidence.high { background: #D1FAE5; color: #065F46; }
        .expense-scan-confidence.medium { background: #FEF3C7; color: #92400E; }
        .expense-scan-confidence.low { background: #FEE2E2; color: #991B1B; }
        .expense-scan-items {
            font-size: 0.8rem; color: var(--muted); padding: 8px 10px;
            background: #F9F6F2; border-radius: 8px; margin-bottom: 8px;
        }
        .expense-scan-items .item-row {
            display: flex; justify-content: space-between; padding: 2px 0;
        }
        .expense-scan-clear {
            width: 100%; margin: -2px 0 12px; border: none; background: transparent;
            color: var(--muted); font-size: 0.82rem; font-weight: 700; font-family: inherit;
            cursor: pointer;
        }
        .expense-scan-result { margin-bottom: 12px; }
        .expense-scan-detail {
            font-size: 0.8rem; color: var(--muted); margin-bottom: 4px;
        }
        .expense-scan-footer {
            font-size: 0.78rem; color: var(--muted);
        }
        .expense-scan-icon { font-size: 1.3rem; }

        /* --- Booking attachments --- */
        .booking-attach-wrap {
            margin: 0;
            padding: 10px 16px 14px;
            border-top: 1px solid color-mix(in srgb, var(--trip-accent) 8%, var(--border));
            background: color-mix(in srgb, var(--trip-accent-soft) 12%, rgba(255, 255, 255, 0.38));
        }
        .booking-attach-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 9px;
        }
        .booking-attach-title {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--ink-strong);
            font-size: 0.78rem;
            font-weight: 900;
        }
        .booking-attach-head-icon {
            width: 15px;
            height: 15px;
            display: block;
            color: var(--trip-accent-strong);
        }
        .booking-attach-hint {
            min-width: 0;
            color: #9C8F87;
            font-size: 0.7rem;
            font-weight: 800;
            text-align: right;
        }
        .booking-attach-row {
            display: flex; flex-wrap: wrap; gap: 8px; padding: 0;
        }
        .booking-attach-thumb {
            width: 96px; height: 96px; object-fit: cover; border-radius: 10px;
            border: 1px solid var(--border); cursor: pointer;
            background: #F2F4F7;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--trip-accent) 8%, transparent);
            transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
        }
        .booking-attach-thumb:hover,
        .booking-attach-thumb:active {
            border-color: color-mix(in srgb, var(--trip-accent) 22%, var(--border));
            box-shadow: 0 5px 14px color-mix(in srgb, var(--trip-accent) 14%, transparent);
            transform: translateY(-1px);
        }
        .booking-attach-pdf {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; width: 96px; height: 96px;
            background: #F5F8FC; border-radius: 10px; border: 1px solid #E1E8F3;
            text-decoration: none; gap: 4px; cursor: pointer;
        }
        .booking-attach-pdf-icon {
            display: inline-flex;
            color: var(--trip-accent-strong);
        }
        .booking-attach-pdf-name {
            font-size: 0.72rem; color: var(--muted); font-weight: 600;
            max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }

        .booking-pin-overlay {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0, 0, 0, 0.45);
            display: flex; align-items: center; justify-content: center;
            padding: 24px;
        }
        .booking-pin-dialog {
            background: #fff; border-radius: 16px;
            padding: 28px 24px; max-width: 340px; width: 100%;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
            text-align: center;
        }
        .booking-pin-title {
            font-size: 1.15rem; font-weight: 700; margin-bottom: 8px;
        }
        .booking-pin-desc {
            font-size: 0.9rem; color: #666; margin-bottom: 20px; line-height: 1.5;
        }
        .booking-pin-input {
            width: 100%; padding: 12px 16px; font-size: 1.1rem;
            border: 2px solid #ddd; border-radius: 12px;
            text-align: center; letter-spacing: 4px;
            font-family: inherit; margin-bottom: 16px;
        }
        .booking-pin-input:focus {
            border-color: #6B81A6; outline: none;
        }
        .booking-pin-actions {
            display: flex; gap: 10px; justify-content: center;
        }
        .booking-pin-actions button {
            padding: 10px 24px; border-radius: 10px; font-size: 0.95rem;
            font-weight: 600; border: none; cursor: pointer;
        }
        .booking-pin-confirm {
            background: #6B81A6; color: #fff;
        }
        .booking-pin-cancel {
            background: #f0f0f0; color: #666;
        }

        .expense-receipt-link {
            cursor: pointer; text-decoration: none;
        }
        .expense-receipt-link:hover { background: var(--primary-light); }
        .expense-item-store {
            margin-top: 4px; font-size: 0.78rem; color: var(--muted); font-weight: 600;
        }

        .expense-empty {
            text-align: center; padding: 3rem 1rem; color: var(--muted);
        }
        .expense-empty-icon { font-size: 3rem; margin-bottom: 12px; }
        .expense-empty-text { font-size: 0.95rem; font-weight: 600; }

        .itin-editor-toolbar {
            position: fixed;
            top: calc(env(safe-area-inset-top, 0px) + 12px);
            right: 12px;
            z-index: 220;
            padding: 0;
            margin: 0;
            pointer-events: none;
        }
        .itin-editor-toolbar-shell {
            pointer-events: auto;
            background: rgba(255,255,255,0.88);
            border: 1px solid rgba(220, 209, 200, 0.92);
            border-radius: 999px;
            padding: 8px 10px;
            box-shadow: 0 12px 28px rgba(106, 90, 80, 0.12);
            display: flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .itin-editor-toolbar-head {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;
        }
        .itin-editor-toolbar-copy {
            display: none;
        }
        .itin-editor-toolbar-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
        }
        .itin-editor-toolbar-quick-group {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
            min-width: max-content;
        }
        .itin-editor-toolbar-divider {
            width: 1px;
            height: 20px;
            background: rgba(220, 209, 200, 0.92);
            flex: none;
        }
        .itin-editor-toolbar-label {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding: 0 10px;
            border-radius: 999px;
            background: rgba(247, 243, 239, 0.92);
            color: #7A6F6B;
            font-size: 0.76rem;
            font-weight: 800;
            white-space: nowrap;
        }
        .itin-editor-btn,
        .itin-editor-btn-ghost,
        .itin-editor-btn-danger {
            border: 0;
            border-radius: 999px;
            padding: 9px 14px;
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 800;
            cursor: pointer;
            white-space: nowrap;
        }
        .itin-editor-btn {
            background: linear-gradient(160deg, var(--trip-accent), var(--trip-accent-strong));
            color: #fff;
            box-shadow: 0 8px 18px color-mix(in srgb, var(--trip-accent) 28%, transparent);
        }
        .itin-editor-btn-ghost {
            background: rgba(255,255,255,0.92);
            color: var(--ink-strong);
            border: 1px solid var(--border);
        }
        .itin-editor-btn-danger {
            background: rgba(234, 122, 108, 0.12);
            color: #B14F45;
            border: 1px solid rgba(234, 122, 108, 0.18);
        }
        .itin-editor-btn:disabled,
        .itin-editor-btn-ghost:disabled,
        .itin-editor-btn-danger:disabled {
            opacity: 0.6;
            cursor: wait;
        }
        .itin-editor-status {
            min-height: 0;
            color: var(--muted);
            font-size: 0.78rem;
            line-height: 1;
            font-weight: 800;
            white-space: nowrap;
        }
        .itin-editor-status-hint {
            color: #A08D7C;
            font-size: 0.74rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .itin-editor-status.success { color: #2E7D5B; }
        .itin-editor-status.error { color: #B14F45; }
        .itin-editor-status.info { color: #8A6B55; }
        .itin-editor-grid {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 14px;
        }
        .itin-editor-grid.single {
            grid-template-columns: 1fr;
        }
        .itin-edit-section {
            padding: 0 1rem;
            margin-bottom: 1rem;
        }
        .itin-edit-section-shell {
            background: rgba(255,255,255,0.94);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 16px;
            box-shadow: 0 8px 20px rgba(138, 125, 122, 0.06);
            display: grid;
            gap: 12px;
        }
        .itin-edit-section-head,
        .itin-edit-card-head,
        .itin-edit-subcard-head,
        .itin-edit-group-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .itin-edit-section-head h3,
        .itin-edit-group-head h4,
        .itin-edit-card-head strong,
        .itin-edit-subcard-head strong {
            margin: 0;
            color: var(--ink-strong);
        }
        .itin-edit-help {
            color: var(--muted);
            font-size: 0.83rem;
            line-height: 1.65;
        }
        .itin-edit-card,
        .itin-edit-subcard,
        .itin-activity-editor-card {
            background: transparent;
            border: 0;
            border-left: 1px solid rgba(223, 215, 208, 0.92);
            border-radius: 0;
            padding: 6px 0 6px 12px;
            display: grid;
            gap: 10px;
        }
        .itin-edit-subcard {
            background: transparent;
        }
        .itin-edit-control-group {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .itin-mini-btn,
        .itin-mini-btn-danger {
            border: 0;
            border-radius: 10px;
            padding: 6px 8px;
            background: transparent;
            color: #7A6F6B;
            font-family: inherit;
            font-size: 0.76rem;
            font-weight: 800;
            cursor: pointer;
        }
        .itin-mini-btn-danger {
            color: #B14F45;
            background: rgba(234, 122, 108, 0.08);
        }
        .itin-edit-field {
            display: grid;
            gap: 6px;
            min-width: 0;
        }
        .itin-edit-field span {
            color: var(--muted);
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.04em;
        }
        .itin-edit-field input,
        .itin-edit-field textarea {
            width: 100%;
            border-radius: 14px;
            border: 1px solid var(--border);
            padding: 11px 13px;
            font-family: inherit;
            font-size: 0.94rem;
            background: #fff;
            color: var(--ink-strong);
            outline: none;
        }
        .itin-edit-field input:focus,
        .itin-edit-field textarea:focus {
            border-color: var(--trip-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent) 14%, transparent);
        }
        .itin-field-row-editor {
            display: grid;
            grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) auto;
            gap: 8px;
            align-items: end;
        }
        .itin-field-empty {
            padding: 12px 14px;
            border: 1px dashed var(--border);
            border-radius: 16px;
            color: var(--muted);
            font-size: 0.84rem;
            background: rgba(255,255,255,0.7);
        }
        .itin-edit-activity-groups {
            display: grid;
            gap: 14px;
            margin-top: 14px;
        }
        .itin-edit-activity-group {
            display: grid;
            gap: 10px;
            padding: 14px;
            border-radius: 18px;
            background: rgba(247, 243, 239, 0.96);
            border: 1px solid var(--border);
        }
        .itin-edit-activity-group.backup {
            background: rgba(244, 239, 234, 0.96);
        }
        .itin-edit-activity-stack {
            display: grid;
            gap: 10px;
        }
        .itin-edit-activity-empty {
            padding: 14px;
            border-radius: 16px;
            border: 1px dashed var(--border);
            color: var(--muted);
            font-size: 0.84rem;
            background: rgba(255,255,255,0.82);
        }
        .itin-day-card.is-editing {
            padding: 1.1rem;
        }
        .itin-day-card.is-editing .itin-day-header {
            padding: 0;
        }
        .itin-editor-section-note {
            color: var(--muted);
            font-size: 0.82rem;
            line-height: 1.65;
        }
        .itin-editor-empty {
            padding: 14px;
            border-radius: 16px;
            border: 1px dashed var(--border);
            background: rgba(255,255,255,0.84);
            color: var(--muted);
            font-size: 0.84rem;
        }
        .itin-editor-toolbar-meta {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .itin-editor-summary-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 9px;
            border-radius: 999px;
            background: rgba(255,255,255,0.58);
            border: 1px solid rgba(223, 215, 208, 0.88);
            color: #857972;
            font-size: 0.74rem;
            font-weight: 800;
        }
        .itin-block-editor {
            padding: 0 1rem 1rem;
        }
        .itin-block-editor-shell {
            display: grid;
            gap: 8px;
        }
        .itin-block-section {
            background: transparent;
            border: 0;
            border-top: 1px solid rgba(223, 215, 208, 0.92);
            border-radius: 0;
            padding: 10px 0 0;
            box-shadow: none;
            display: grid;
            gap: 10px;
        }
        .itin-block-section-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .itin-block-section-head h3 {
            margin: 0;
            color: var(--ink-strong);
            font-size: 0.95rem;
        }
        .itin-block-section-head p {
            margin: 4px 0 0;
            color: var(--muted);
            font-size: 0.78rem;
            line-height: 1.55;
        }
        .itin-block-stack {
            display: grid;
            gap: 8px;
        }
        .itin-block-card {
            background: transparent;
            border: 1px solid transparent;
            border-radius: 12px;
            padding: 4px 0;
            display: grid;
            gap: 8px;
            box-shadow: none;
        }
        .itin-block-card[data-itin-draggable-kind] {
            cursor: default;
        }
        .itin-block-card.is-dragging {
            opacity: 0.45;
            transform: scale(0.99);
        }
        .itin-block-card.is-drag-source {
            box-shadow: 0 10px 20px color-mix(in srgb, var(--trip-accent) 10%, transparent);
            border-color: color-mix(in srgb, var(--trip-accent) 32%, transparent);
        }
        .itin-block-card-day {
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249, 244, 238, 0.98));
        }
        .itin-block-card-logistics {
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245, 247, 241, 0.98));
        }
        .itin-block-card-note {
            background: linear-gradient(180deg, rgba(255,252,245,0.98), rgba(255,255,255,0.98));
        }
        .itin-block-card-divider {
            background: linear-gradient(180deg, rgba(251, 248, 245, 0.98), rgba(255,255,255,0.98));
        }
        .itin-block-card-backup {
            background: linear-gradient(180deg, rgba(250, 241, 237, 0.98), rgba(255,255,255,0.98));
        }
        .itin-block-card-head,
        .itin-block-card-title,
        .itin-block-controls {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .itin-block-card-title {
            justify-content: flex-start;
            align-items: center;
            flex: 1;
            min-width: 0;
        }
        .itin-block-card-title strong {
            color: var(--ink-strong);
            font-size: 0.92rem;
        }
        .itin-block-card-caption {
            color: var(--muted);
            font-size: 0.76rem;
            line-height: 1.5;
            margin-top: 2px;
        }
        .itin-block-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            background: rgba(244, 238, 233, 0.78);
            color: #857972;
            white-space: nowrap;
        }
        .itin-block-chip.day { background: #F1E5DA; color: #845F47; }
        .itin-block-chip.logistics-section { background: #E8F0E2; color: #57734D; }
        .itin-block-chip.activity { background: #E7EEF9; color: #476885; }
        .itin-block-chip.note { background: color-mix(in srgb, var(--trip-highlight) 32%, #FFF1D9); color: var(--trip-accent-strong); }
        .itin-block-chip.checklist { background: #E8F3E3; color: #4D754E; }
        .itin-block-chip.divider { background: #EEE8E4; color: #83766F; }
        .itin-block-chip.backup-group { background: #F7E3DE; color: #A05D4F; }
        .itin-block-chip.zone {
            background: transparent;
            border: 1px solid rgba(223, 215, 208, 0.88);
            color: var(--muted);
            text-transform: none;
        }
        .itin-move-btn {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 22%, transparent);
            border-radius: 10px;
            background: rgba(255, 248, 244, 0.7);
            color: var(--muted);
            font-size: 0.72rem;
            line-height: 1;
            cursor: pointer;
            user-select: none;
            touch-action: manipulation;
            transition: background 0.15s, border-color 0.15s;
        }
        .itin-move-btn:active {
            background: color-mix(in srgb, var(--trip-accent) 16%, transparent);
            border-color: color-mix(in srgb, var(--trip-accent) 38%, transparent);
        }
        .itin-move-btn:disabled,
        .itin-move-btn[aria-disabled="true"] {
            cursor: not-allowed;
            opacity: 0.36;
            background: rgba(246, 239, 232, 0.72);
            border-color: rgba(223, 215, 208, 0.72);
            color: #A99C94;
        }
        .itin-block-handle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 8px;
            border: 0;
            background: transparent;
            color: var(--muted);
            font-size: 0.96rem;
            line-height: 1;
            user-select: none;
            cursor: grab;
            touch-action: none;
            transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
        }
        .itin-block-handle:hover,
        .itin-block-handle:focus-visible {
            background: rgba(244, 238, 233, 0.92);
            box-shadow: none;
            transform: translateY(-1px);
            outline: none;
        }
        .itin-block-handle:active {
            cursor: grabbing;
            transform: scale(0.97);
        }
        .itin-block-handle-grip {
            letter-spacing: -0.08em;
            font-size: 0.98rem;
            font-weight: 900;
        }
        .itin-block-controls {
            justify-content: flex-end;
            align-items: center;
        }
        .itin-day-outline-list {
            display: grid;
            gap: 8px;
        }
        .itin-day-outline-item {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            padding: 6px 0;
            transition: border-color 0.18s ease, background 0.18s ease;
        }
        .itin-day-outline-item.active {
            border-color: transparent;
            background: rgba(255, 248, 244, 0.72);
            box-shadow: none;
        }
        .itin-day-outline-main {
            border: 0;
            background: none;
            padding: 0;
            display: grid;
            gap: 4px;
            text-align: left;
            cursor: pointer;
            color: inherit;
            min-width: 0;
            font-family: inherit;
        }
        .itin-day-outline-main strong {
            color: var(--ink-strong);
            font-size: 0.92rem;
            line-height: 1.4;
        }
        .itin-day-outline-main:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--trip-accent) 32%, transparent);
            outline-offset: 4px;
            border-radius: 12px;
        }
        .itin-day-outline-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            color: var(--muted);
            font-size: 0.8rem;
            line-height: 1.5;
        }
        .itin-day-outline-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 2px 6px;
            background: rgba(244, 238, 233, 0.72);
            border: 1px solid rgba(221, 213, 206, 0.75);
            color: #7A6F6B;
            font-size: 0.72rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .itin-editor-focus-card {
            display: grid;
            gap: 10px;
        }
        .itin-editor-focus-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .itin-editor-focus-head strong {
            color: var(--ink-strong);
            font-size: 0.92rem;
        }
        .itin-editor-day-card {
            background: transparent;
            border: 0;
            border-left: 1px solid rgba(223, 215, 208, 0.92);
            border-radius: 0;
            padding: 6px 0 6px 14px;
            display: grid;
            gap: 10px;
        }
        .itin-editor-day-head {
            display: grid;
            gap: 10px;
        }
        .itin-editor-day-title-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .itin-editor-day-title-input {
            flex: 1;
            min-width: 180px;
            border: 0;
            border-bottom: 1px solid rgba(223, 215, 208, 0.92);
            background: transparent;
            padding: 3px 0 5px;
            color: var(--ink-strong);
            font-family: inherit;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.35;
        }
        .itin-editor-day-title-input:focus {
            outline: none;
            border-bottom-color: color-mix(in srgb, var(--trip-accent) 38%, transparent);
        }
        .itin-editor-day-meta-row {
            display: grid;
            grid-template-columns: 164px minmax(0, 1fr);
            gap: 10px;
        }
        .itin-editor-day-meta-row input {
            min-width: 0;
            border: 1px solid transparent;
            border-bottom-color: rgba(223, 215, 208, 0.96);
            border-radius: 10px;
            background: transparent;
            color: var(--ink-strong);
            font-family: inherit;
            font-size: 0.88rem;
            font-weight: 700;
            padding: 8px 10px;
        }
        .itin-editor-day-meta-row input:focus {
            outline: none;
            border-color: color-mix(in srgb, var(--trip-accent) 34%, transparent);
            background: rgba(255,255,255,0.7);
        }
        .itin-block-canvas.compact {
            gap: 6px;
        }
        .itin-inline-block {
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: flex-start;
            gap: 10px;
            background: transparent;
            border-color: transparent;
            border-radius: 14px;
            padding: 6px 0;
        }
        .itin-inline-block.is-drag-source {
            background: color-mix(in srgb, var(--trip-accent-soft) 42%, rgba(255, 248, 244, 0.92));
            border-color: color-mix(in srgb, var(--trip-accent) 28%, transparent);
        }
        .itin-inline-block-main {
            display: grid;
            gap: 8px;
            min-width: 0;
        }
        .itin-inline-block-topline {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .itin-inline-block-side {
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: flex-end;
            flex-wrap: wrap;
        }
        .itin-inline-activity-grid {
            display: grid;
            grid-template-columns: 108px 108px 96px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
        }
        .itin-inline-input,
        .itin-inline-note-editor {
            min-width: 0;
            border: 1px solid transparent;
            border-bottom-color: rgba(224, 216, 210, 0.95);
            border-radius: 10px;
            background: transparent;
            color: var(--ink-strong);
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            line-height: 1.5;
            padding: 8px 10px;
        }
        .itin-inline-input:focus,
        .itin-inline-note-editor:focus {
            outline: none;
            background: rgba(255,255,255,0.7);
            border-color: color-mix(in srgb, var(--trip-accent) 34%, transparent);
            box-shadow: none;
        }
        .itin-inline-input.time {
            font-variant-numeric: tabular-nums;
        }
        .itin-inline-input.title {
            font-size: 1rem;
            font-weight: 800;
        }
        .itin-inline-note-editor {
            min-height: 46px;
            resize: none;
            overflow: hidden;
        }
        .itin-inline-field-sheet {
            display: grid;
            gap: 8px;
            padding: 4px 0 4px 12px;
            border-radius: 0;
            background: transparent;
            border: 0;
            border-left: 1px solid rgba(229, 221, 214, 0.9);
        }
        .itin-inline-field-sheet .itin-edit-group-head {
            margin: 0;
        }
        .itin-inline-divider-row {
            align-items: center;
        }
        .itin-inline-divider-row .itin-divider-preview {
            min-height: 42px;
        }
        .itin-inline-backup-row {
            align-items: center;
        }
        .itin-inline-backup-copy {
            display: grid;
            gap: 4px;
        }
        .itin-inline-backup-copy strong {
            color: var(--ink-strong);
            font-size: 0.92rem;
        }
        .itin-inline-backup-copy p {
            margin: 0;
            color: var(--muted);
            font-size: 0.78rem;
            line-height: 1.55;
        }
        .itin-inline-logistics-section {
            gap: 10px;
            padding: 6px 0;
        }
        .itin-inline-logistics-head {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 10px;
            align-items: flex-start;
        }
        .itin-inline-logistics-items {
            display: grid;
            gap: 8px;
            margin-left: 38px;
        }
        .itin-inline-logistics-item {
            display: grid;
            gap: 8px;
            padding: 6px 0 6px 12px;
            border-left: 1px solid rgba(229, 221, 214, 0.9);
        }
        .itin-inline-logistics-item-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
        }
        .itin-block-canvas {
            display: grid;
            gap: 10px;
        }
        .itin-block-canvas-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .itin-block-canvas-head strong {
            color: var(--ink-strong);
            font-size: 0.84rem;
        }
        .itin-block-helper {
            color: var(--muted);
            font-size: 0.76rem;
            line-height: 1.55;
        }
        .itin-block-insert-rail {
            position: relative;
            border: 0;
            border-radius: 18px;
            background: transparent;
            padding: 1px 0;
            display: grid;
            gap: 4px;
            transition: background 0.2s, box-shadow 0.2s;
        }
        .itin-block-insert-line {
            position: relative;
            height: 8px;
        }
        .itin-block-insert-line::before {
            content: "";
            position: absolute;
            left: 38px;
            right: 0;
            top: 50%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(166, 151, 144, 0.62), transparent);
            transform: translateY(-50%);
        }
        .itin-block-insert-rail.is-drop-target,
        .itin-block-insert-rail.open {
            background: rgba(255, 248, 244, 0.62);
        }
        .itin-block-insert-rail.is-drop-target .itin-block-insert-line::before,
        .itin-block-insert-rail.open .itin-block-insert-line::before,
        .itin-block-insert-rail:hover .itin-block-insert-line::before {
            height: 2px;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--trip-accent) 62%, transparent), transparent);
        }
        .itin-block-insert-btn {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border: 1px solid rgba(223, 215, 208, 0.82);
            border-radius: 999px;
            background: rgba(255,255,255,0.84);
            color: #7A6F6B;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 800;
            cursor: pointer;
            justify-self: start;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.42;
            transition: opacity 0.15s, transform 0.15s, border-color 0.15s;
            box-shadow: none;
        }
        .itin-block-insert-rail.open .itin-block-insert-btn,
        .itin-block-insert-rail.is-drop-target .itin-block-insert-btn,
        .itin-block-insert-rail:hover .itin-block-insert-btn {
            opacity: 1;
            transform: translateY(-50%) scale(1);
        }
        body.itin-touch-dragging {
            user-select: none;
        }
        body.itin-touch-dragging .itin-block-insert-btn {
            opacity: 1;
            transform: translateY(-50%) scale(1);
        }
        .itin-block-insert-btn:hover,
        .itin-block-insert-btn:focus-visible {
            border-color: color-mix(in srgb, var(--trip-accent) 38%, transparent);
            outline: none;
        }
        .itin-block-insert-quick {
            position: absolute;
            left: 38px;
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }
        .itin-block-insert-rail.open .itin-block-insert-quick,
        .itin-block-insert-rail.is-drop-target .itin-block-insert-quick,
        .itin-block-insert-rail:hover .itin-block-insert-quick,
        .itin-block-insert-rail:focus-within .itin-block-insert-quick {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(-50%) translateX(0);
        }
        .itin-block-insert-chip {
            border: 1px solid rgba(223, 215, 208, 0.92);
            border-radius: 999px;
            background: rgba(255,255,255,0.92);
            color: #7A6F6B;
            font-family: inherit;
            font-size: 0.74rem;
            font-weight: 800;
            line-height: 1;
            padding: 7px 10px;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 6px 18px rgba(124, 107, 93, 0.08);
        }
        .itin-block-insert-chip:hover,
        .itin-block-insert-chip:focus-visible {
            background: #fff;
            color: var(--ink-strong);
            border-color: color-mix(in srgb, var(--trip-accent) 32%, transparent);
            outline: none;
        }
        .itin-block-insert-chip.more {
            color: #8A6B55;
            background: rgba(255, 248, 244, 0.92);
        }
        /* 電腦版：把插入鈕「＋」移到時間軸右側、對齊活動卡片內容欄（編輯區塊 padding-left:36px），
           完全離開進度線，不再重疊。放在原始規則之後以確保生效。 */
        @media (min-width: 721px) {
            .itin-block-insert-btn {
                left: 36px;
                width: 28px;
                height: 28px;
                font-size: 0.95rem;
            }
            /* 連接線從按鈕右側開始 */
            .itin-block-insert-line::before {
                left: 76px;
            }
            /* 快速插入 chips 也接在按鈕右側，避免被蓋住 */
            .itin-block-insert-quick {
                left: 76px;
            }
        }
        .itin-block-palette {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            padding: 4px 0 2px;
        }
        .itin-block-palette button {
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 8px 12px;
            background: #fff;
            color: var(--ink-strong);
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 800;
            cursor: pointer;
        }
        .itin-block-empty {
            padding: 18px;
            border-radius: 18px;
            border: 1px dashed var(--border);
            background: rgba(255,255,255,0.78);
            color: var(--muted);
            font-size: 0.84rem;
            line-height: 1.7;
        }
        .itin-divider-preview,
        .itin-divider-block {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--muted);
        }
        .itin-divider-preview::before,
        .itin-divider-preview::after,
        .itin-divider-block::before,
        .itin-divider-block::after {
            content: "";
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(166, 151, 144, 0.65), transparent);
        }
        .itin-backup-marker {
            padding: 14px;
            border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 18%, transparent);
            background: rgba(255,255,255,0.84);
        }
        .itin-backup-marker strong {
            display: block;
            color: var(--ink-strong);
            margin-bottom: 4px;
        }
        .itin-backup-marker p {
            margin: 0;
            color: var(--muted);
            font-size: 0.84rem;
            line-height: 1.65;
        }
        .itin-note-editor {
            min-height: 46px;
            resize: none;
            overflow: hidden;
        }
        .itin-note-editor.checklist {
            font-family: "SFMono-Regular", "Menlo", monospace;
        }
        .itin-note-helper {
            color: var(--muted);
            font-size: 0.78rem;
            line-height: 1.65;
        }
        .itin-note-block {
            border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 22%, rgba(232, 194, 129, 0.14));
            background: linear-gradient(180deg, color-mix(in srgb, var(--trip-accent-soft) 48%, rgba(255, 249, 238, 0.98)), rgba(255,255,255,0.98));
            padding: 14px 15px;
        }
        .itin-note-block-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            color: var(--trip-accent-strong);
            font-size: 0.76rem;
            font-weight: 900;
            letter-spacing: 0.04em;
        }
        .itin-note-block p {
            margin: 0;
            color: var(--ink-strong);
            line-height: 1.75;
            white-space: pre-wrap;
        }
        .itin-checklist-editor {
            display: grid;
            gap: 10px;
        }
        .itin-checklist-edit-item {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 10px;
            align-items: start;
        }
        .itin-checklist-toggle {
            width: 20px;
            height: 20px;
            border-radius: 7px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 34%, transparent);
            background: #fff;
            color: var(--trip-accent-strong);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: none;
            font-family: inherit;
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1;
            margin-top: 1px;
            cursor: pointer;
        }
        .itin-checklist-toggle:hover,
        .itin-checklist-toggle:focus-visible {
            border-color: color-mix(in srgb, var(--trip-accent) 44%, transparent);
            background: rgba(255, 252, 247, 0.96);
            outline: none;
        }
        .itin-checklist-input {
            width: 100%;
            min-width: 0;
            border: 0;
            background: transparent;
            color: var(--ink-strong);
            font-family: inherit;
            font-size: 0.92rem;
            line-height: 1.7;
            padding: 0;
            margin: 0;
            outline: none;
        }
        .itin-checklist-input::placeholder {
            color: #A89A93;
        }
        .itin-checklist-input:focus {
            background: rgba(245, 238, 232, 0.9);
            border-radius: 8px;
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--trip-accent) 14%, transparent);
        }
        .itin-checklist-edit-item.done .itin-checklist-input {
            color: var(--muted);
            text-decoration: line-through;
        }
        .itin-checklist-editor-actions {
            display: flex;
            justify-content: flex-start;
            padding-left: 30px;
        }
        .itin-checklist-add {
            white-space: nowrap;
        }
        .itin-checklist-preview {
            display: grid;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .itin-checklist-preview li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: var(--ink-strong);
            line-height: 1.7;
        }
        .itin-checklist-box {
            width: 20px;
            height: 20px;
            border-radius: 7px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 34%, transparent);
            background: #fff;
            color: var(--trip-accent-strong);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: none;
            font-size: 0.78rem;
            font-weight: 900;
            margin-top: 1px;
            padding: 12px; box-sizing: content-box;
        }
        .itin-checklist-preview li.done span:last-child {
            color: var(--muted);
            text-decoration: line-through;
        }
        .itin-slash-menu {
            position: fixed;
            z-index: 250;
            min-width: min(320px, calc(100vw - 24px));
            max-width: min(360px, calc(100vw - 24px));
            border-radius: 18px;
            border: 1px solid rgba(21, 33, 53, 0.08);
            background: rgba(255,255,255,0.98);
            box-shadow: 0 22px 48px rgba(94, 81, 73, 0.18);
            padding: 10px;
            display: grid;
            gap: 8px;
            backdrop-filter: blur(18px);
        }
        .itin-slash-menu-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 2px 4px 0;
            color: var(--muted);
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .itin-slash-menu-query {
            color: var(--trip-accent-strong);
        }
        .itin-slash-menu-empty {
            padding: 12px 14px;
            border-radius: 14px;
            background: rgba(247, 243, 239, 0.72);
            color: var(--muted);
            font-size: 0.84rem;
            line-height: 1.6;
        }
        .itin-slash-item {
            width: 100%;
            border: 0;
            border-radius: 14px;
            background: transparent;
            padding: 11px 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
            cursor: pointer;
        }
        .itin-slash-item.active,
        .itin-slash-item:hover,
        .itin-slash-item:focus-visible {
            background: rgba(247, 239, 234, 0.92);
            outline: none;
        }
        .itin-slash-item-icon {
            width: 34px;
            height: 34px;
            border-radius: 11px;
            background: rgba(255,255,255,0.92);
            border: 1px solid rgba(21, 33, 53, 0.08);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--ink-strong);
            flex: none;
        }
        .itin-slash-item-copy strong {
            display: block;
            color: var(--ink-strong);
            font-size: 0.9rem;
        }
        .itin-slash-item-copy span {
            display: block;
            margin-top: 3px;
            color: var(--muted);
            font-size: 0.8rem;
            line-height: 1.55;
        }
        body.itin-touch-dragging .itin-block-insert-line::before {
            height: 2px;
        }

        /* ================================================================
           Chat — Floating AI advisor
           ================================================================ */

        /* --- FAB (left side to avoid right-side toolbar conflicts) --- */
        .chat-fab {
            position: fixed;
            bottom: calc(80px + env(safe-area-inset-bottom, 0px));
            left: 16px;
            z-index: 250;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(160deg, var(--trip-accent), var(--trip-accent-strong));
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px color-mix(in srgb, var(--trip-accent) 34%, transparent);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .chat-fab:active { transform: scale(0.92); }
        .chat-fab.is-hidden { display: none; }

        /* --- Overlay (animation-ready: visibility + opacity) --- */
        .chat-overlay {
            position: fixed;
            inset: 0;
            z-index: 8000;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            visibility: hidden;
            pointer-events: none;
        }
        .chat-overlay.is-active {
            visibility: visible;
            pointer-events: auto;
        }

        .chat-overlay-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(74, 64, 60, 0.36);
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .chat-overlay.is-active .chat-overlay-backdrop {
            opacity: 1;
        }

        /* --- Body scroll lock --- */
        body.chat-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }
        /* Hide the bottom nav while the chat modal is open so it doesn't
           bleed through the panel and collide with the input area. */
        body.chat-open .itin-bottom-nav {
            display: none;
        }

        /* --- Panel (slide-up animation) --- */
        .chat-panel {
            position: relative;
            width: min(100%, 520px);
            height: min(85vh, 680px);
            background: rgba(255, 255, 255, 0.48) !important;
            backdrop-filter: blur(20px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
            border-radius: 20px 20px 0 0;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            box-shadow: 0 -12px 40px rgba(122, 111, 107, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
            overflow: hidden;
            transform: translateY(100%);
            opacity: 0;
            transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
        }
        .chat-overlay.is-active .chat-panel {
            transform: translateY(0);
            opacity: 1;
        }

        @media (prefers-reduced-motion: reduce) {
            .chat-panel,
            .chat-overlay-backdrop {
                transition: none;
            }
        }

        /* --- Header (warm gradient) --- */
        .chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            background: rgba(255, 255, 255, 0.35) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
            flex-shrink: 0;
        }
        .chat-header-title {
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--ink, #5C524E);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .chat-header-title::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: linear-gradient(160deg, var(--trip-accent), var(--trip-accent-strong));
            flex-shrink: 0;
        }
        .chat-close-btn {
            background: none;
            border: none;
            font-size: 1.4rem;
            color: var(--muted, #9B8E85);
            cursor: pointer;
            padding: 4px 8px;
            line-height: 1;
            border-radius: 8px;
            transition: background 0.15s;
        }
        .chat-close-btn:active {
            background: rgba(0, 0, 0, 0.05);
        }
        .chat-close-btn:focus-visible {
            outline: 2px solid var(--trip-accent);
            outline-offset: 2px;
        }

        /* --- Drag handle (visual cue for swipe-to-close) --- */
        .chat-drag-handle {
            width: 36px;
            height: 4px;
            border-radius: 2px;
            background: rgba(0, 0, 0, 0.12);
            margin: 8px auto 0;
            flex-shrink: 0;
        }

        /* --- Messages area --- */
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            -webkit-overflow-scrolling: touch;
        }

        .chat-msg {
            display: flex;
            max-width: 85%;
            animation: chat-msg-appear 0.2s ease;
        }
        .chat-msg-user {
            align-self: flex-end;
        }
        .chat-msg-assistant, .chat-msg-error {
            align-self: flex-start;
        }

        .chat-proposal-card {
            background: #FBF8F4;
            border: 1px solid #E8DFD3;
            border-radius: 12px;
            padding: 12px 16px;
            margin: 4px 0;
        }
        .chat-proposal-summary {
            font-size: 14px;
            color: #2f3640;
            margin-bottom: 10px;
            line-height: 1.5;
        }
        .chat-proposal-actions {
            display: flex;
            gap: 8px;
        }
        .chat-proposal-confirm,
        .chat-proposal-cancel {
            flex: 1;
            border-radius: 8px;
            font-size: 14px;
            min-height: 44px;
            cursor: pointer;
        }
        .chat-proposal-confirm {
            background: linear-gradient(135deg, var(--trip-accent), var(--trip-accent-strong));
            color: #fff;
            border: none;
            padding: 10px 0;
            font-weight: 600;
        }
        .chat-proposal-confirm[disabled] {
            opacity: 0.72;
            cursor: wait;
        }
        .chat-proposal-cancel {
            background: #F3F4F6;
            color: #6b7280;
            border: 1px solid #E5E7EB;
            padding: 10px 0;
        }
        .chat-proposal-cancel[disabled] {
            cursor: not-allowed;
            opacity: 0.72;
        }
        .chat-proposal-result {
            font-size: 13px;
            line-height: 1.5;
            color: #4b5563;
        }
        .chat-proposal-card.is-success {
            background: #F0FDF4;
            border-color: #BBF7D0;
        }
        .chat-proposal-card.is-error {
            background: #FEF2F2;
            border-color: #FECACA;
        }
        .chat-proposal-card.is-cancelled {
            background: #F9FAFB;
            border-color: #E5E7EB;
            opacity: 0.7;
        }
        .chat-proposal-undo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 8px;
            padding: 6px 16px;
            font-size: 13px;
            color: var(--trip-accent);
            background: transparent;
            border: 1px solid var(--trip-accent);
            border-radius: 6px;
            cursor: pointer;
            min-height: 44px;
        }
        .chat-proposal-undo:active {
            background: var(--trip-accent-soft);
        }
        .chat-proposal-diff {
            margin-top: 10px;
            padding: 10px;
            background: #FFFBF0;
            border: 1px solid #F0E6D0;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            font-size: 13px;
            line-height: 1.6;
        }
        .chat-proposal-diff-warning {
            color: #B45309;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 13px;
        }
        .chat-proposal-diff-stats {
            color: #6B7280;
            margin-bottom: 8px;
            font-size: 12px;
        }
        .chat-proposal-diff-section {
            margin-bottom: 6px;
        }
        .chat-proposal-diff-heading {
            font-weight: 600;
            color: var(--trip-accent);
            margin-bottom: 4px;
            font-size: 13px;
        }
        .chat-proposal-diff-row {
            padding: 3px 0;
            color: #374151;
            border-bottom: 1px solid #F3F0E8;
            font-size: 13px;
        }
        .chat-proposal-diff-row:last-child {
            border-bottom: none;
        }
        .chat-proposal-diff-heading--remove {
            color: #DC2626;
        }
        .chat-proposal-diff-row--remove {
            color: #9CA3AF;
            text-decoration: line-through;
            border-bottom-color: #F3F0E8;
        }

        @keyframes chat-msg-appear {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .chat-bubble {
            padding: 10px 14px;
            font-size: 0.9rem;
            line-height: 1.6;
            word-break: break-word;
            white-space: pre-wrap;
        }
        .chat-msg-user .chat-bubble {
            background: linear-gradient(135deg, rgba(240, 234, 229, 0.85), rgba(235, 227, 220, 0.85)) !important;
            color: var(--ink, #5C524E);
            border-radius: 16px 16px 4px 16px;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
            border: 1px solid rgba(255, 255, 255, 0.55) !important;
            box-shadow: 0 4px 12px rgba(80, 58, 41, 0.03) !important;
        }
        .chat-msg-assistant .chat-bubble {
            background: rgba(255, 255, 255, 0.55) !important;
            color: var(--ink, #5C524E);
            border-radius: 16px 16px 16px 4px;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            box-shadow: 0 4px 12px rgba(80, 58, 41, 0.02) !important;
        }
        .chat-bubble.is-streaming {
            border-right: 2px solid var(--trip-accent);
            animation: chat-cursor-blink 0.8s step-end infinite;
        }
        .chat-bubble.is-refusal {
            background: #FDF0E8;
            color: #8B5E3C;
            border-color: rgba(139, 94, 60, 0.15);
        }
        .chat-error-bubble {
            background: #FDE8E8;
            color: #9B4444;
            border-radius: 12px;
            font-size: 0.85rem;
        }

        @keyframes chat-cursor-blink {
            50% { border-color: transparent; }
        }

        /* --- Input area --- */
        .chat-input-area {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            margin: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
            padding: 10px 12px !important;
            border-radius: 24px !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            flex-shrink: 0 !important;
            background: rgba(255, 255, 255, 0.65) !important;
            backdrop-filter: blur(16px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
            box-shadow: 0 8px 32px rgba(80, 58, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
            border-top: none !important;
        }
        .chat-input {
            flex: 1;
            resize: none;
            border: 1px solid rgba(255, 255, 255, 0.55) !important;
            border-radius: var(--radius-md, 12px);
            padding: 9px 12px;
            font-size: 0.9rem;
            line-height: 1.45;
            max-height: 100px;
            background: rgba(255, 255, 255, 0.6) !important;
            color: var(--ink-strong) !important;
            font-family: inherit;
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
        }
        .chat-input:focus {
            background: rgba(255, 255, 255, 0.85) !important;
            border-color: var(--trip-accent) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-accent) 14%, transparent) !important;
        }
        .chat-send-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(160deg, var(--trip-accent), var(--trip-accent-strong));
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: opacity 0.15s, transform 0.15s;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--trip-accent) 24%, transparent);
        }
        .chat-send-btn:active { transform: scale(0.92); }
        .chat-send-btn:focus-visible {
            outline: 2px solid var(--trip-accent-strong);
            outline-offset: 2px;
        }
        .chat-send-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            transform: none;
        }

        /* --- Typing indicator --- */
        .chat-typing-bubble {
            display: flex;
            gap: 5px;
            align-items: center;
            padding: 12px 16px;
            background: var(--trip-header-surface);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 14%, transparent);
            border-radius: 16px 16px 16px 4px;
        }
        .chat-typing-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--trip-accent);
            opacity: 0.35;
            animation: chat-typing-bounce 1.2s ease-in-out infinite;
        }
        .chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
        .chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }
        @keyframes chat-typing-bounce {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
            30% { transform: translateY(-4px); opacity: 0.9; }
        }

        /* --- Empty state --- */
        .chat-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            gap: 16px;
            padding: 40px 20px;
        }
        .chat-empty-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--trip-accent-soft), var(--trip-header-surface));
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chat-empty-icon svg {
            stroke: var(--trip-accent);
            opacity: 0.6;
        }
        .chat-empty-text {
            color: var(--muted, #9B8E85);
            font-size: 0.92rem;
            font-weight: 500;
        }
        .chat-suggested-prompts {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            max-width: 360px;
            margin-top: 4px;
        }
        .chat-suggested-btn {
            background: var(--trip-accent-soft);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 22%, transparent);
            border-radius: var(--radius-pill, 999px);
            padding: 7px 14px;
            font-size: 0.82rem;
            color: var(--trip-accent-strong);
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
            font-weight: 500;
        }
        .chat-suggested-btn:hover, .chat-suggested-btn:active {
            background: color-mix(in srgb, var(--trip-accent) 14%, var(--trip-accent-soft));
            border-color: color-mix(in srgb, var(--trip-accent) 36%, transparent);
        }
        .chat-suggested-btn:active { transform: scale(0.97); }
        .chat-suggested-btn:focus-visible {
            outline: 2px solid var(--trip-accent);
            outline-offset: 2px;
        }

        /* ======================================================================
           Mobile polish layer — 20260528
           Targeted, additive overrides to lift the front-of-house travel UI
           toward a calm, premium, JP/KR travel-app feel. Read order matters:
           this block sits at the bottom so its rules win over earlier defaults
           without needing !important. Nothing here changes DOM structure or
           data; only typography, spacing, color, and one redundant chip.
           ====================================================================== */

        /* Day card — drop the misplaced serif, refine the surface */
        .itin-day-card {
            background:
                linear-gradient(180deg,
                    color-mix(in srgb, var(--trip-accent) 8%, #FFFFFF) 0,
                    var(--card) 96px);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 9%, var(--border));
            box-shadow: 0 14px 30px color-mix(in srgb, var(--trip-accent) 8%, rgba(80, 58, 41, 0.04));
        }
        .itin-day-header {
            padding: 1.4rem 1.4rem 0.7rem;
        }
        .itin-day-title {
            font-family: inherit;
            font-size: 1.18rem;
            font-weight: 800;
            color: var(--ink-strong);
            line-height: 1.35;
            letter-spacing: -0.005em;
        }
        .itin-day-title-prefix {
            color: color-mix(in srgb, var(--trip-accent-strong) 80%, var(--ink-strong));
            font-weight: 800;
        }
        .itin-day-meta {
            margin-top: 4px;
            font-size: 0.86rem;
            font-weight: 600;
            color: #8A7E7A;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.01em;
        }

        /* Header — polish title, date pill, sync chip, action buttons */
        .itin-header h1 {
            font-size: 1.42rem;
            font-weight: 800;
            letter-spacing: -0.01em;
            line-height: 1.3;
            text-wrap: balance;
        }
        .itin-header .itin-header-date {
            font-variant-numeric: tabular-nums;
            font-weight: 800;
            letter-spacing: 0.01em;
            padding: 5px 13px;
            border-radius: 999px;
        }
        .itin-header .itin-header-summary {
            font-size: 0.9rem;
            line-height: 1.6;
            font-weight: 600;
            text-wrap: pretty;
        }
        .itin-header-utility-actions {
            gap: 4px;
        }
        .itin-share-btn,
        .itin-share-btn.itin-header-more-btn {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.74);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 10%, transparent);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--trip-accent) 7%, transparent);
            transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
        }
        .itin-share-btn:hover,
        .itin-share-btn.itin-header-more-btn:hover {
            background: #fff;
            transform: translateY(-1px);
        }
        .itin-share-btn:active,
        .itin-share-btn.itin-header-more-btn:active {
            transform: scale(0.96);
        }
        .itin-share-btn-icon {
            width: 22px;
            height: 22px;
        }
        .itin-header.has-cover .itin-share-btn,
        .itin-header.has-cover .itin-share-btn.itin-header-more-btn {
            background: rgba(20, 24, 28, 0.32);
            border-color: rgba(255, 255, 255, 0.22);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .itin-header-more-btn {
            font-size: 1.3rem;
            letter-spacing: 0.04em;
        }
        .itin-header-focus-pill {
            padding: 7px 12px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.86);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 12%, var(--border));
            box-shadow: 0 4px 12px color-mix(in srgb, var(--trip-accent) 6%, transparent);
        }
        .itin-header-focus-main {
            font-weight: 800;
            letter-spacing: -0.005em;
        }
        .itin-header-focus-meta {
            font-weight: 600;
            color: #8A7E7A;
            font-variant-numeric: tabular-nums;
        }

        /* Day tabs — gentler typography */
        .itin-day-tab-label {
            text-transform: none;
            letter-spacing: 0;
            font-weight: 800;
        }
        .itin-day-tab-date {
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.01em;
        }
        .itin-day-tab {
            border: 1px solid color-mix(in srgb, var(--trip-accent) 8%, rgba(218, 207, 199, 0.6));
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 6px 18px color-mix(in srgb, var(--trip-accent) 5%, rgba(80, 58, 41, 0.04));
        }
        .itin-day-tab.active {
            box-shadow: 0 12px 26px color-mix(in srgb, var(--trip-accent) 22%, rgba(60, 58, 54, 0.16));
        }

        /* Timeline rail — single thin line, smaller dots, refined spacing */
        .itin-timeline {
            padding: 0.6rem 1.4rem 1.8rem;
        }
        .itin-time-block {
            padding-left: 24px;
            padding-bottom: 22px;
        }
        .itin-time-block::before {
            left: 4px;
            top: 22px;
            bottom: -8px;
            background: color-mix(in srgb, var(--trip-accent) 18%, #E6DCD3);
        }
        .itin-time-block::after {
            left: 0;
            top: 9px;
            width: 9px;
            height: 9px;
            border: 2px solid color-mix(in srgb, var(--trip-accent) 38%, #C9BAAE);
            background: #FFFFFF;
            box-shadow: 0 0 0 4px var(--bg);
        }
        .itin-time-block.past-time::after {
            background: color-mix(in srgb, var(--trip-accent) 60%, transparent);
            border-color: color-mix(in srgb, var(--trip-accent) 60%, transparent);
            opacity: 0.55;
        }
        .itin-time-block.current-time-highlight::after {
            background: var(--trip-accent);
            border-color: #FFFFFF;
            box-shadow: 0 0 0 4px var(--bg),
                        0 0 0 8px color-mix(in srgb, var(--trip-accent) 22%, transparent);
            animation: none;
        }

        /* Time chip — no border, lighter ink, tabular numerals */
        .itin-time-badge {
            background: rgba(247, 243, 239, 0.7);
            color: #7A6F6B;
            border: 0;
            padding: 3px 10px;
            min-height: 28px;
            border-radius: 8px;
            font-size: 0.82rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.01em;
        }
        .itin-time-block.current-time-highlight .itin-time-badge {
            background: var(--trip-accent);
            color: #FFFFFF;
            box-shadow: 0 4px 12px color-mix(in srgb, var(--trip-accent) 30%, transparent);
        }

        /* Activity title — calm, balanced, with cleaner emoji spacing */
        .itin-time-block-title {
            font-size: 1.02rem;
            font-weight: 800;
            color: var(--ink-strong);
            line-height: 1.4;
            letter-spacing: -0.005em;
            text-wrap: pretty;
        }
        .itin-time-block-category {
            font-size: 0.74rem;
            font-weight: 800;
            padding: 3px 9px;
            letter-spacing: 0.01em;
        }

        /* Map pin — softer, inline, less button-like */
        .itin-map-pin {
            min-width: 44px;
            min-height: 44px;
            padding: 4px 10px;
            font-size: 0.76rem;
            font-weight: 800;
            color: #7A6F6B;
            background: rgba(240, 234, 229, 0.7);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 8%, var(--border));
            border-radius: 999px;
            margin-left: 8px;
        }

        /* Notes inside activity — softer */
        .itin-note-text {
            background: color-mix(in srgb, var(--trip-accent-soft) 30%, #FFFCF6);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 12%, #F0E7D6);
            font-size: 0.9rem;
            line-height: 1.7;
            color: var(--ink);
            padding: 10px 13px;
        }
        .itin-time-block-primary-fields {
            background: rgba(255, 255, 255, 0.66);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 8%, var(--border));
            border-radius: 12px;
            padding: 11px 13px;
            font-size: 0.9rem;
            line-height: 1.7;
        }

        /* Hide the redundant "全員" chip in display mode — it's the implicit
           default and the user has called out this constant text as noise.
           Specific participant chips still render normally. */
        body.is-itinerary:not(.is-itinerary-editing) .itin-participant-chip.all {
            display: none;
        }
        .itin-participant-chip {
            background: color-mix(in srgb, var(--trip-accent) 6%, #F4EFEA);
            color: #66554B;
            font-weight: 700;
            padding: 3px 9px;
            font-size: 0.74rem;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 8%, transparent);
        }
        .itin-participant-chips {
            margin: 6px 0 4px;
            gap: 4px;
        }

        /* Final itinerary UX tightening — compact header, scannable notes */
        .itin-header.has-cover {
            min-height: 218px;
        }
        .itin-header.has-cover::before {
            background:
                linear-gradient(180deg, rgba(20, 24, 28, 0.24) 0%, rgba(20, 24, 28, 0.38) 44%, rgba(20, 24, 28, 0.68) 100%);
        }
        .itin-header-top {
            margin-bottom: 8px;
        }
        .itin-header-focus-row {
            margin-top: 9px;
        }
        .itin-day-tabs-sticky {
            padding: 8px 0 7px;
            margin-bottom: 0.65rem;
        }
        .itin-day-tabs {
            gap: 8px;
            padding: 2px 1.25rem 7px;
        }
        .itin-day-tab {
            min-width: 92px;
            min-height: 58px;
            padding: 8px 10px 9px;
            border-radius: 14px;
        }
        .itin-day-tab-date {
            min-height: 20px;
            margin-top: 4px;
            padding: 2px 7px;
            font-size: 0.68rem;
        }
        .itin-time-block.open .itin-time-block-note.is-long {
            display: none;
        }
        .itin-time-block-note-details {
            display: grid;
            gap: 8px;
        }
        .itin-note-detail-section {
            display: grid;
            gap: 3px;
        }
        .itin-note-detail-section h5,
        .itin-title-member-hint span {
            margin: 0;
            color: #9C8F87;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.01em;
        }
        .itin-note-detail-lines {
            display: grid;
            gap: 2px;
            color: #665B56;
            font-size: 0.82rem;
            line-height: 1.55;
        }
        .itin-note-detail-section.is-reminder .itin-note-detail-lines {
            color: #7A4F18;
            font-weight: 700;
        }
        .itin-title-member-hint {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 1px;
        }
        .itin-title-member-hint b {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 2px 7px;
            border-radius: 8px;
            background: color-mix(in srgb, var(--trip-accent) 6%, #F7F3EF);
            color: #66554B;
            font-size: 0.74rem;
            font-weight: 700;
        }
        .chat-fab {
            left: auto;
            right: 18px;
            bottom: calc(86px + env(safe-area-inset-bottom, 0px));
            width: 44px;
            height: 44px;
            opacity: 0.82;
            box-shadow: 0 3px 12px color-mix(in srgb, var(--trip-accent) 24%, transparent);
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s, background 0.2s, color 0.2s;
        }
        .chat-fab:hover,
        .chat-fab:focus-visible {
            opacity: 1;
        }
        .chat-fab-icon {
            position: absolute;
            inset: 0;
            margin: auto;
            transition: opacity 0.16s ease, transform 0.16s ease;
        }
        .chat-fab-icon-top {
            opacity: 0;
            transform: translateY(5px) scale(0.86);
        }

        /* Member filter — quieter label, refined pills */
        .itin-member-filters {
            padding: 0.55rem 1.4rem 0.1rem;
            gap: 7px;
        }
        .itin-member-filters-label {
            color: #9C8F87;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .itin-member-filter-pill {
            padding: 6px 12px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 10%, rgba(226, 218, 212, 0.86));
            background: rgba(255, 255, 255, 0.78);
            color: #6D5C53;
            font-size: 0.8rem;
            font-weight: 800;
            transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
        }
        .itin-member-filter-pill:hover {
            background: #fff;
        }
        .itin-member-filter-pill.active {
            border-color: var(--trip-accent-strong);
            background: var(--trip-accent-strong);
            color: #fff;
            box-shadow: 0 6px 14px color-mix(in srgb, var(--trip-accent) 22%, transparent);
        }

        /* Shared info (logistics) — cleaner card list, no dashed underlines */
        .itin-logistics-panel {
            border-radius: 22px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 9%, var(--border));
            padding: 1.2rem 1.2rem 1rem;
            box-shadow: 0 12px 28px color-mix(in srgb, var(--trip-accent) 6%, rgba(80, 58, 41, 0.05));
        }
        .itin-logistics-panel > summary h2 {
            font-size: 1.04rem;
            font-weight: 800;
            color: var(--ink-strong);
        }
        .itin-logistics-list {
            display: grid;
            gap: 10px;
            margin-top: 14px;
            padding: 0;
        }
        .itin-logistics-item {
            margin: 0;
            padding: 12px 14px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 8%, var(--border));
            border-bottom: 1px solid color-mix(in srgb, var(--trip-accent) 8%, var(--border));
            border-radius: 14px;
            background: rgba(255, 253, 250, 0.92);
            font-size: 0.9rem;
            line-height: 1.7;
            color: var(--ink);
        }
        .itin-logistics-item:last-child {
            border-bottom: 1px solid color-mix(in srgb, var(--trip-accent) 8%, var(--border));
            margin: 0;
            padding: 12px 14px;
        }
        .itin-logistics-item strong {
            display: block;
            font-size: 0.98rem;
            font-weight: 800;
            color: var(--ink-strong);
            margin-bottom: 6px;
            letter-spacing: -0.005em;
        }
        .itin-logistics-item .itin-field-key {
            color: #8A7E7A;
            font-weight: 700;
            font-size: 0.78rem;
            letter-spacing: 0.02em;
        }

        /* Booking flight + generic cards — tabular nums and softer extras */
        .booking-airport-code,
        .booking-flight-time-value,
        .booking-total-amount {
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
        }
        .booking-flight-times {
            border-bottom: 1px solid var(--border);
        }
        .booking-generic-field {
            border-bottom: 1px solid color-mix(in srgb, var(--trip-accent) 6%, rgba(235, 228, 223, 0.5));
        }
        .booking-generic-fields-extra .booking-generic-field:first-child,
        .booking-generic-fields-extra .booking-generic-field:last-child {
            border-color: color-mix(in srgb, var(--trip-accent) 6%, rgba(235, 228, 223, 0.5));
        }
        .booking-cat-pill {
            background: rgba(247, 243, 239, 0.74);
            color: #8A7E7A;
        }
        .booking-cat-pill.active {
            background: #fff;
            color: var(--trip-accent-strong);
            border-color: color-mix(in srgb, var(--trip-accent) 18%, var(--border));
            box-shadow: 0 6px 16px color-mix(in srgb, var(--trip-accent) 8%, transparent);
        }
        .booking-cat-label {
            font-size: 0.74rem;
            font-weight: 800;
        }

        /* Bottom nav — refined active accent (calm, no harsh background swap) */
        .itin-bottom-nav .itin-nav-item.active .itin-nav-label {
            color: var(--trip-accent-strong);
            font-weight: 900;
        }

        /* 390px-specific tightening for the day card + timeline */
        @media (max-width: 420px) {
            .itin-day-header {
                padding: 1.1rem 1.05rem 0.6rem;
            }
            .itin-day-title {
                font-size: 1.06rem;
            }
            .itin-day-meta {
                font-size: 0.82rem;
            }
            .itin-timeline {
                padding: 0.5rem 1.05rem 1.4rem;
            }
            .itin-time-block {
                padding-left: 22px;
                padding-bottom: 20px;
            }
            .itin-time-block-title {
                font-size: 0.98rem;
            }
            .itin-time-badge {
                font-size: 0.8rem;
            }
            .itin-map-pin {
                margin-left: 6px;
            }
            .itin-logistics {
                padding: 0 0.95rem;
            }
            .itin-logistics-panel {
                padding: 1rem 0.95rem 0.85rem;
            }
        }
        .itin-timeline {
            position: relative;
            padding: 0.8rem 1.25rem 2rem 2.2rem;
        }
        .itin-timeline::before {
            content: '';
            position: absolute;
            left: 1.15rem;
            top: 1rem;
            bottom: 2rem;
            width: 1.5px;
            background: color-mix(in srgb, var(--trip-accent) 15%, var(--border, rgba(0, 0, 0, 0.08)));
            z-index: 1 !important;
        }
        .itin-time-block {
            position: relative;
            z-index: 2 !important;
            margin-bottom: 14px;
            padding: 14px 16px;
            background: rgba(255, 255, 255, 0.52);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 14px;
            box-shadow: 
                0 4px 12px color-mix(in srgb, var(--trip-accent) 3%, rgba(80, 58, 41, 0.02)),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .itin-time-block:hover {
            background: rgba(255, 255, 255, 0.72);
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 
                0 6px 18px color-mix(in srgb, var(--trip-accent) 6%, rgba(80, 58, 41, 0.04)),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
            transform: translateY(-1px);
        }
        .itin-time-block:active {
            transform: scale(0.99) translateY(0);
            background: rgba(255, 255, 255, 0.45);
        }
        .itin-time-block::before {
            display: none !important;
        }
        .itin-time-block::after {
            content: '';
            position: absolute;
            left: -1.05rem;
            top: 22px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #FFF !important;
            border: 2.5px solid var(--trip-accent);
            z-index: 2;
            transform: translateX(-50%);
            transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .itin-time-block.past-time::after {
            background: var(--trip-accent);
            border-color: var(--trip-accent);
            opacity: 0.45;
            transition: none;
        }
        .itin-time-block.current-time-highlight::after {
            background: var(--trip-accent);
            border-color: #FFF;
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--trip-accent) 24%, transparent);
            animation: itinCurrentPulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }
        .itin-time-block.next-time-highlight::after {
            background: #FFFFFF !important;
            border-color: var(--trip-accent-strong);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--trip-accent) 14%, transparent);
        }
        .itin-time-block.current-time-highlight {
            border-color: color-mix(in srgb, var(--trip-accent) 26%, var(--border));
            background: color-mix(in srgb, var(--trip-accent) 5%, rgba(255, 255, 255, 0.55));
        }
        .itin-time-block.next-time-highlight {
            border-color: color-mix(in srgb, var(--trip-accent) 18%, var(--border));
        }
        .itin-time-block.past-time .itin-time-badge,
        .itin-time-block.past-time .itin-time-block-title {
            color: #9C8F87;
        }

        .itin-time-block-head {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin: 0 0 6px;
        }
        .itin-time-block .itin-time-badge {
            background: transparent;
            border: 0;
            padding: 0;
            min-height: 0;
            color: var(--trip-accent-strong);
            font-size: 0.88rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.015em;
        }
        .itin-time-status {
            display: none;
            align-items: center;
            justify-content: center;
            min-height: 22px;
            padding: 2px 8px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 0;
            white-space: nowrap;
        }
        .itin-time-block.current-time-highlight .itin-time-status,
        .itin-time-block.next-time-highlight .itin-time-status,
        .itin-time-block.past-time .itin-time-status {
            display: inline-flex;
        }
        .itin-time-block.current-time-highlight .itin-time-status {
            background: color-mix(in srgb, var(--trip-accent) 12%, #FFFFFF);
            border-color: color-mix(in srgb, var(--trip-accent) 20%, transparent);
            color: var(--trip-accent-strong);
        }
        .itin-time-block.current-time-highlight .itin-time-status::before {
            content: '現在';
        }
        .itin-time-block.next-time-highlight .itin-time-status {
            background: #FFFFFF;
            border-color: color-mix(in srgb, var(--trip-accent) 16%, var(--border));
            color: var(--trip-accent-strong);
        }
        .itin-time-block.next-time-highlight .itin-time-status::before {
            content: '下一站';
        }
        .itin-time-block.past-time .itin-time-status {
            background: transparent;
            border-color: color-mix(in srgb, var(--trip-accent) 10%, var(--border));
            color: #9C8F87;
        }
        .itin-time-block.past-time .itin-time-status::before {
            content: '已完成';
        }
        .itin-time-block .itin-time-block-category,
        .itin-time-block .itin-cat-景點,
        .itin-time-block .itin-cat-觀光,
        .itin-time-block .itin-cat-餐廳,
        .itin-time-block .itin-cat-餐飲,
        .itin-time-block .itin-cat-美食,
        .itin-time-block .itin-cat-食,
        .itin-time-block .itin-cat-交通,
        .itin-time-block .itin-cat-住宿,
        .itin-time-block .itin-cat-飯店,
        .itin-time-block .itin-cat-購物,
        .itin-time-block .itin-cat-休息,
        .itin-time-block .itin-cat-自由,
        .itin-time-block .itin-cat-航班,
        .itin-time-block .itin-cat-機票,
        .itin-time-block .itin-cat-租車,
        .itin-time-block .itin-cat-票券 {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 2px 7px;
            min-height: 0;
            background: rgba(255, 255, 255, 0.45);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--muted);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.02em;
        }
        .itin-time-block-head .itin-time-block-category::before {
            display: none;
        }
        .itin-cat-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
            background: var(--trip-accent);
            flex-shrink: 0;
        }
        /* Custom category dot colors (Premium iOS palette) */
        .itin-cat-景點 .itin-cat-dot, .itin-cat-觀光 .itin-cat-dot { background: #EF4444; }
        .itin-cat-餐廳 .itin-cat-dot, .itin-cat-餐飲 .itin-cat-dot, .itin-cat-美食 .itin-cat-dot, .itin-cat-食 .itin-cat-dot { background: #F97316; }
        .itin-cat-交通 .itin-cat-dot { background: #3B82F6; }
        .itin-cat-住宿 .itin-cat-dot, .itin-cat-飯店 .itin-cat-dot { background: #8B5CF6; }
        .itin-cat-購物 .itin-cat-dot { background: #EC4899; }
        .itin-cat-休息 .itin-cat-dot, .itin-cat-自由 .itin-cat-dot { background: #6B7280; }
        .itin-cat-航班 .itin-cat-dot, .itin-cat-機票 .itin-cat-dot { background: #0EA5E9; }
        .itin-cat-租車 .itin-cat-dot { background: #10B981; }
        .itin-cat-票券 .itin-cat-dot { background: #F59E0B; }

        .itin-time-block .itin-budget-badge {
            display: inline-flex;
            align-items: center;
            margin: 0;
            padding: 2px 7px;
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid rgba(245, 158, 11, 0.18);
            border-radius: 6px;
            color: #D97706;
            font-size: 0.72rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
        }
        .itin-time-block-head .itin-budget-badge::before {
            display: none;
        }
        .itin-time-block-head .itin-time-block-chevron {
            position: absolute !important;
            right: 14px !important;
            top: 14px !important;
            width: 32px !important;
            height: 32px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important;
            border: 1px solid var(--border) !important;
            background: var(--card, rgba(255, 255, 255, 0.72)) !important;
            color: var(--muted) !important;
            cursor: pointer !important;
            line-height: 1 !important;
            margin: 0 !important;
            padding: 0 !important;
            -webkit-tap-highlight-color: transparent !important;
            transition: color 200ms ease, border-color 200ms ease, background 200ms ease,
                        transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }
        .itin-time-block-head .itin-time-block-chevron .itin-chevron-icon {
            width: 16px !important;
            height: 16px !important;
            display: block !important;
        }
        .itin-time-block-head .itin-time-block-chevron:hover {
            color: var(--trip-accent-strong) !important;
            border-color: color-mix(in srgb, var(--trip-accent) 45%, var(--border)) !important;
        }
        .itin-time-block-head .itin-time-block-chevron:focus-visible {
            outline: 2px solid var(--trip-accent) !important;
            outline-offset: 2px !important;
        }
        .itin-time-block.open .itin-time-block-head .itin-time-block-chevron {
            color: var(--trip-accent-strong) !important;
            border-color: color-mix(in srgb, var(--trip-accent) 45%, var(--border)) !important;
            transform: rotate(180deg) !important;
        }

        .itin-time-block-title-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin: 0 0 6px;
            padding-right: 44px; /* Give room for compass arrow */
        }
        .itin-time-block-title {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            color: var(--ink-strong);
            font-size: 1.05rem;
            font-weight: 800;
            line-height: 1.35;
            letter-spacing: -0.01em;
            overflow-wrap: anywhere;
        }
        .itin-time-block-title-emoji {
            display: inline-flex;
            align-items: center;
            margin-right: 6px;
            opacity: 1;
            line-height: 0;
            vertical-align: -0.05em;
        }
        /* Minimalist line-style category icons (replaces emoji glyphs) */
        .itin-cat-icon {
            width: 17px;
            height: 17px;
            flex: 0 0 auto;
            color: #6b7280;
            vertical-align: -0.2em;
        }
        .itin-time-block-title .emoji {
            display: inline-flex;
            align-items: center;
            color: #6b7280;
        }
        .itin-mobile-activity-category .itin-cat-icon {
            width: 13px;
            height: 13px;
            vertical-align: -0.15em;
        }
        .itin-time-block-title-row .itin-map-pin:not(.itin-map-pin-inline) {
            position: absolute !important;
            right: 50px !important;
            top: 14px !important;
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            max-width: 32px !important;
            min-height: 32px !important;
            max-height: 32px !important;
            border-radius: 50% !important;
            border: 1px solid var(--border) !important;
            background: var(--card, rgba(255, 255, 255, 0.72)) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: var(--muted) !important;
            cursor: pointer !important;
            transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            -webkit-tap-highlight-color: transparent !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .itin-time-block-title-row .itin-map-pin:not(.itin-map-pin-inline)::before,
        .itin-map-pin.itin-map-pin-inline::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            transform: translate(-50%, -50%);
            pointer-events: auto;
        }
        .itin-map-pin-icon {
            width: 14px;
            height: 14px;
            stroke-width: 2.3;
            flex-shrink: 0;
        }
        .itin-time-block-title-row .itin-map-pin:not(.itin-map-pin-inline):hover,
        .itin-time-block-title-row .itin-map-pin:not(.itin-map-pin-inline):focus-visible {
            color: var(--trip-accent-strong);
            border-color: color-mix(in srgb, var(--trip-accent) 45%, var(--border));
            background: var(--card);
            transform: scale(1.08) rotate(15deg);
        }
        .itin-time-block-title-row .itin-map-pin:not(.itin-map-pin-inline):active {
            transform: scale(0.95);
            background: rgba(255, 255, 255, 0.9);
        }
        /* No expand chevron on this card -> slide the nav button into the
           rightmost slot so there is no empty gap on the right. */
        .itin-time-block:not([data-expandable]) .itin-time-block-title-row .itin-map-pin:not(.itin-map-pin-inline) {
            right: 14px !important;
        }

        /* Robust override for parsed inline address links */
        .itin-map-pin.itin-map-pin-inline {
            display: inline-flex !important;
            align-items: center !important;
            position: relative !important;
            width: auto !important;
            height: auto !important;
            min-height: auto !important;
            padding: 0 !important;
            margin: 0 4px !important;
            border: none !important;
            background: transparent !important;
            border-radius: 0 !important;
            color: var(--trip-accent-strong) !important;
            font-size: 0.82rem !important;
            font-weight: 800 !important;
            text-decoration: underline !important;
            text-underline-offset: 2px;
            box-shadow: none !important;
            vertical-align: baseline !important;
            transform: none !important;
            transition: none !important;
        }
        .itin-map-pin.itin-map-pin-inline::before {
            display: block !important;
        }
        .itin-map-pin.itin-map-pin-inline:hover {
            color: var(--ink-strong) !important;
            background: transparent !important;
            transform: none !important;
        }

        .itin-time-block-meta {
            display: grid;
            gap: 1px;
            margin: 3px 0 0;
        }
        .itin-meta-line {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            min-width: 0;
            color: #8B7F7B;
            font-size: 0.78rem;
            font-weight: 500;
            line-height: 1.45;
        }
        .itin-meta-line-icon {
            flex: 0 0 auto;
            width: 13px;
            text-align: center;
            color: #BFB4AC;
            font-size: 0.78rem;
            line-height: 1.45;
            opacity: 0.85;
        }
        .itin-meta-icon-svg {
            width: 13px;
            height: 13px;
            display: block;
            margin-top: 2px;
        }
        .itin-meta-line-text {
            min-width: 0;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
        }
        .itin-time-block.open .itin-meta-line-text {
            display: block;
            -webkit-line-clamp: unset;
            overflow: visible;
            text-overflow: clip;
        }
        .itin-meta-line-hours .itin-meta-line-text {
            font-variant-numeric: tabular-nums;
        }
        .itin-meta-line a {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px dotted color-mix(in srgb, var(--trip-accent) 22%, #C8BEB6);
        }

        .itin-time-block-note {
            position: relative;
            margin: 5px 0 0;
            padding: 2px 0 2px 9px;
            border-left: 2px solid color-mix(in srgb, var(--trip-accent) 12%, #EAE0D6);
            background: transparent;
            color: #6B5F5B;
            font-size: 0.82rem;
            line-height: 1.55;
        }
        .itin-time-block-note-flag {
            display: inline-flex;
            align-items: center;
            margin: 0 6px 2px 0;
            padding: 1px 7px;
            border-radius: 6px;
            background: rgba(199, 138, 58, 0.12);
            color: #875321;
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            vertical-align: 2px;
        }
        .itin-time-block-note-body {
            display: block;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .itin-note-line {
            display: block;
            padding: 0;
        }
        .itin-note-line.is-empty { height: 0.4em; }
        .itin-note-line-deadline {
            color: #7A4F18;
            font-weight: 700;
        }
        .itin-note-line-backup {
            color: #5A6B85;
            font-weight: 600;
        }
        .itin-note-line-reminder {
            color: #6B5848;
            font-weight: 600;
        }

        body.is-itinerary:not(.is-itinerary-editing) .itin-time-block:not(.open) .itin-time-block-note.is-long .itin-time-block-note-body {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        body.is-itinerary:not(.is-itinerary-editing) .itin-time-block:not(.open) .itin-time-block-note.is-long::after {
            content: '展開更多';
            display: inline-block;
            margin-top: 1px;
            color: var(--trip-accent-strong);
            font-size: 0.72rem;
            font-weight: 800;
            opacity: 0.8;
            pointer-events: none;
        }

        .itin-time-block-details {
            display: none;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed color-mix(in srgb, var(--trip-accent) 10%, var(--border));
        }
        .itin-time-block.open .itin-time-block-details {
            display: grid;
            gap: 6px;
        }
        .itin-time-block-details .itin-participant-chips {
            margin: 0;
            gap: 4px;
        }
        .itin-time-block-details .itin-participant-chip {
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 8%, var(--border));
            color: #7A6F6B;
            font-size: 0.74rem;
            font-weight: 700;
        }
        .itin-time-block-details .itin-time-block-fields {
            display: grid;
            gap: 4px;
            margin: 0;
            padding: 0;
            background: transparent;
            border: 0;
            font-size: 0.84rem;
            line-height: 1.6;
            color: #5C524E;
        }
        .itin-time-block-details .itin-field-key {
            color: #9C8F87;
            font-weight: 700;
            font-size: 0.76rem;
            letter-spacing: 0.02em;
            margin-right: 4px;
        }

        /* Suppress legacy artifacts (no longer rendered but guard anyway) */
        .itin-time-block .itin-note-text,
        .itin-time-block .itin-note-card {
            background: transparent !important;
            border: 0 !important;
            padding: 0 !important;
            margin: 6px 0 0 !important;
            box-shadow: none !important;
            color: #5C524E !important;
        }
        .itin-time-block .itin-note-card::before,
        .itin-time-block .itin-note-card-label,
        .itin-time-block .itin-time-block-meta-pills,
        .itin-time-block .itin-meta-pill {
            display: none !important;
        }

        /* ── Notes page — calm storage drawer ───────────────────────────── */
        /* Flattened: the page background is the canvas. No outer glass card —
           the note cards are the only elevated surface, which keeps the page
           calm and the text readable (no glass-on-glass-on-glass). */
        .notes-shell {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border-radius: 0;
            padding: 0;
            border: 0;
            box-shadow: none;
            margin: 0 1rem 1rem;
            display: grid;
            gap: 14px;
        }
        .notes-toolbar {
            background: transparent;
            border-radius: 0;
            border: 0;
            box-shadow: none;
            padding: 4px 0 0;
            display: grid;
            gap: 10px;
        }
        .notes-search-row {
            gap: 8px;
        }
        .notes-search-input {
            background: var(--card-solid);
            border-color: var(--border);
            font-size: 0.92rem;
            padding: 8px 36px 8px 12px;
            border-radius: 12px;
            min-height: 40px;
        }
        .notes-search-clear {
            width: 22px;
            height: 22px;
            background: rgba(160, 150, 147, 0.18);
            color: #6B5F5B;
            font-size: 0.92rem;
        }
        .notes-add-btn {
            background: var(--trip-accent);
            color: #fff;
            border: 1px solid transparent;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--trip-accent) 22%, transparent);
            font-size: 0.82rem;
            padding: 8px 14px;
            min-height: 40px;
            border-radius: 12px;
            font-weight: 800;
        }
        .notes-chips {
            gap: 6px;
            padding: 0;
        }
        .notes-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 30px;
            padding: 4px 12px;
            font-size: 0.78rem;
            font-weight: 700;
            background: var(--card-solid);
            border: 1px solid var(--border);
            color: #6B5F5B;
            border-radius: 999px;
        }
        .notes-chip-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            letter-spacing: 0;
        }
        .notes-chip-category .notes-chip-label {
            max-width: 9em;
        }
        .notes-chip.active {
            background: var(--trip-accent);
            border-color: transparent;
            color: #fff;
        }
        .notes-chip.active .notes-chip-count {
            background: rgba(255, 255, 255, 0.24);
            color: #fff;
        }
        .notes-chip-count {
            min-width: 14px;
            height: 14px;
            padding: 0 5px;
            margin-left: 0;
            background: rgba(122, 111, 107, 0.1);
            color: #8A7E7A;
            font-size: 0.62rem;
        }
        .notes-chip.active .notes-chip-count {
            background: rgba(255, 255, 255, 0.24);
            color: #fff;
        }

        .notes-list { gap: 12px; display: grid; }
        .notes-card {
            position: relative;
            background: var(--card-solid);
            border-radius: 14px;
            padding: 14px 16px;
            border: 1px solid var(--border);
            box-shadow: 0 1px 2px rgba(74, 64, 60, 0.04);
            display: grid;
            gap: 8px;
            margin-bottom: 10px;
        }
        .notes-card:last-child { margin-bottom: 0; }
        .notes-card-head {
            gap: 6px;
            align-items: center;
            padding-right: 36px;
        }
        .notes-card-category {
            display: inline-flex;
            align-items: center;
            padding: 0;
            background: transparent;
            color: #9C8F87;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: none;
        }
        .notes-card-category::before {
            content: '#';
            margin-right: 2px;
            color: #C8BEB6;
            font-weight: 700;
        }
        .notes-card-time {
            margin-left: auto;
            font-size: 0.68rem;
            color: #B0A49C;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }
        .notes-card-title {
            margin: 1px 0 0;
            font-size: 0.96rem;
            font-weight: 800;
            color: var(--ink-strong);
            line-height: 1.4;
            letter-spacing: -0.005em;
            text-wrap: balance;
        }
        .notes-card-content {
            margin: 0;
            font-size: 0.86rem;
            line-height: 1.62;
            color: #44434a;
            cursor: pointer;
        }
        .notes-card[data-notes-card-open="false"] .notes-card-content,
        .notes-card:not([data-notes-card-open="true"]) .notes-card-content {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .notes-card[data-notes-card-open="true"] .notes-card-content {
            cursor: default;
        }

        .notes-image-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            margin-top: 5px;
            max-width: 360px;
        }
        .notes-image-grid.single {
            grid-template-columns: minmax(0, 180px);
            max-width: 220px;
        }
        .notes-image-link {
            display: block;
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 10px;
            background: color-mix(in srgb, var(--trip-accent-soft) 42%, rgba(255,255,255,0.8));
            border: 1px solid color-mix(in srgb, var(--trip-accent) 8%, var(--border));
            text-decoration: none;
        }
        .notes-image-link img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            transition: transform 180ms ease;
        }
        .notes-image-link:hover img {
            transform: scale(1.025);
        }

        .notes-card-url-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin: 4px 0 0;
            padding: 3px 10px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--trip-accent-strong);
            font-size: 0.74rem;
            font-weight: 700;
            min-height: 24px;
            box-shadow: none;
            text-decoration: none;
            max-width: 60%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .notes-card-url-btn::before {
            content: '↗';
            color: color-mix(in srgb, var(--trip-accent) 60%, currentColor);
            font-weight: 700;
            font-size: 0.78rem;
        }
        .notes-card-url-btn:hover {
            background: #fff;
        }
        .notes-card-actions {
            position: absolute;
            top: 8px;
            right: 0;
            margin: 0;
            padding: 0;
            background: transparent;
            gap: 0;
        }
        .notes-card-edit,
        .notes-card-delete {
            display: none;
        }
        .notes-card-menu {
            position: relative;
            display: inline-block;
        }
        .notes-card-menu > summary {
            list-style: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            color: #9C8F87;
            font-size: 1.1rem;
            font-weight: 800;
            line-height: 1;
            user-select: none;
        }
        .notes-card-menu > summary::-webkit-details-marker { display: none; }
        .notes-card-menu[open] > summary {
            background: rgba(255, 255, 255, 0.86);
            color: var(--trip-accent-strong);
        }
        .notes-card-menu-panel {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            min-width: 124px;
            padding: 4px;
            background: var(--card-solid);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 10%, var(--border));
            border-radius: 12px;
            box-shadow: 0 10px 26px rgba(80, 58, 41, 0.12);
            z-index: 10;
            display: grid;
            gap: 2px;
        }
        .notes-card-menu-panel button {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 36px;
            padding: 0 12px;
            background: transparent;
            border: 0;
            border-radius: 8px;
            font-family: inherit;
            font-size: 0.84rem;
            font-weight: 700;
            color: var(--ink-strong);
            text-align: left;
            cursor: pointer;
        }
        .notes-card-menu-panel button:hover {
            background: rgba(247, 243, 239, 0.78);
        }
        .notes-card-menu-panel button[data-notes-delete] {
            color: #B85B5B;
        }
        .notes-card-menu-panel button[data-notes-delete]:hover {
            background: rgba(255, 240, 240, 0.84);
        }

        .notes-preview-card {
            min-height: 0;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px;
            gap: 9px;
            margin-top: 3px;
        }
        .notes-preview-card:hover {
            box-shadow: 0 3px 10px color-mix(in srgb, var(--trip-accent) 8%, transparent);
        }
        .notes-preview-thumb-wrap {
            flex: 0 0 58px;
            width: 58px;
            height: 58px;
            border-radius: 8px;
        }
        .notes-preview-body {
            justify-content: flex-start;
            gap: 4px;
        }
        .notes-preview-source {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            max-width: 100%;
            color: #9C8F87;
            font-size: 0.66rem;
            font-weight: 800;
            line-height: 1.2;
        }
        .notes-preview-source-icon {
            display: inline-flex;
            width: 13px;
            height: 13px;
            flex: 0 0 13px;
            color: color-mix(in srgb, var(--trip-accent) 56%, #9C8F87);
        }
        .notes-preview-source-icon svg {
            width: 100%;
            height: 100%;
        }
        .notes-preview-source-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .notes-preview-title {
            font-size: 0.85rem;
            font-weight: 800;
            line-height: 1.32;
        }
        .notes-preview-desc {
            font-size: 0.74rem;
            color: #7A6F6B;
            line-height: 1.45;
            -webkit-line-clamp: 2;
        }
        .notes-preview-site {
            font-size: 0.66rem;
            color: #9C8F87;
        }
        .notes-preview-open {
            width: fit-content;
            margin-top: 1px;
            color: var(--trip-accent-strong);
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1.2;
        }
        .notes-preview-open::after {
            content: '↗';
            margin-left: 4px;
            font-size: 0.72rem;
        }
        .notes-empty {
            background: transparent;
            border: 0;
            color: #8A7E7A;
            font-size: 0.86rem;
            padding: 30px 12px;
        }
        .notes-header {
            background: var(--bg);
            border-bottom: 1px solid color-mix(in srgb, var(--trip-accent) 6%, var(--border));
        }

        @media (max-width: 520px) {
            .itin-timeline {
                padding: 0.5rem 12px calc(92px + env(safe-area-inset-bottom, 0px)) 36px !important;
            }
            .itin-timeline::before {
                left: 18px !important;
                top: 0.5rem !important;
                bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
                width: 1.5px !important;
                z-index: 1 !important;
            }
            .itin-time-block {
                margin-left: 0 !important;
                margin-bottom: 10px !important;
                padding: 12px 14px !important;
                border-radius: 12px !important;
                z-index: 2 !important;
            }
            .itin-time-block::after {
                left: -18px !important;
                top: 22px !important;
                width: 8px !important;
                height: 8px !important;
                border-width: 2px !important;
                transform: translateX(-50%) !important;
                background: #FFF !important;
                z-index: 3 !important;
            }
            .itin-time-block.current-time-highlight::after {
                background: var(--trip-accent) !important;
                border-color: #FFF !important;
                box-shadow: 0 0 0 4px color-mix(in srgb, var(--trip-accent) 22%, transparent) !important;
            }
            .itin-time-block.next-time-highlight::after {
                background: #FFF !important;
                border-color: var(--trip-accent-strong) !important;
                box-shadow: 0 0 0 4px color-mix(in srgb, var(--trip-accent) 12%, transparent) !important;
            }
            .itin-time-block.past-time::after {
                background: color-mix(in srgb, var(--trip-accent) 62%, #FFF) !important;
                border-color: color-mix(in srgb, var(--trip-accent) 62%, #FFF) !important;
                opacity: 0.58 !important;
            }
            .itin-time-status {
                min-height: 21px;
                padding: 2px 7px;
                font-size: 0.66rem;
            }
            .itin-time-block-title { font-size: 0.96rem; }
            .itin-meta-line { font-size: 0.76rem; }
            .itin-time-block-note { font-size: 0.8rem; padding-left: 8px; }
            /* Position mobile chevron absolutely in the top-right corner of the card */
            .itin-time-block-head .itin-time-block-chevron {
                position: absolute !important;
                right: 12px !important;
                top: 12px !important;
                width: 28px !important;
                height: 28px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin: 0 !important;
            }
            .itin-time-block-head .itin-time-block-chevron .itin-chevron-icon {
                width: 14px !important;
                height: 14px !important;
            }
            /* Position mobile map pin absolutely to the left of the chevron */
            .itin-time-block-title-row .itin-map-pin:not(.itin-map-pin-inline) {
                position: absolute !important;
                top: 12px !important;
                right: 44px !important;
                width: 28px !important;
                height: 28px !important;
                min-width: 28px !important;
                max-width: 28px !important;
                min-height: 28px !important;
                max-height: 28px !important;
                padding: 0 !important;
                margin: 0 !important;
                border-radius: 50% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                box-shadow: none !important;
            }
            .itin-time-block-title-row .itin-map-pin:not(.itin-map-pin-inline)::before {
                width: 44px !important;
                height: 44px !important;
            }
            .itin-time-block-title-row .itin-map-pin-icon {
                width: 12px !important;
                height: 12px !important;
            }
            /* No chevron -> nav button takes the rightmost slot (mobile) */
            .itin-time-block:not([data-expandable]) .itin-time-block-title-row .itin-map-pin:not(.itin-map-pin-inline) {
                right: 12px !important;
            }

            .notes-shell { padding: 0; }
            .notes-card { padding: 12px 14px; }
            .notes-card-title { font-size: 0.94rem; }
            .notes-card-content { font-size: 0.83rem; }
        }

        /* ── Notes category — compact chips + sheet picker ─────────────── */
        .notes-chips {
            flex-wrap: wrap;
            overflow-x: visible;
        }
        .notes-chip-more {
            background: transparent;
            border: 1px dashed color-mix(in srgb, var(--trip-accent) 18%, var(--border));
            color: var(--trip-accent-strong);
        }
        .notes-chip-more:hover {
            background: var(--card-solid);
            border-style: solid;
        }
        .notes-filter-state {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
            padding: 4px 6px 4px 10px;
            background: color-mix(in srgb, var(--trip-accent) 8%, var(--card-solid));
            border: 1px solid color-mix(in srgb, var(--trip-accent) 14%, var(--border));
            border-radius: 999px;
            font-size: 0.76rem;
            color: #6B5F5B;
            width: fit-content;
            max-width: 100%;
        }
        .notes-filter-state-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
        }
        .notes-filter-state-label strong {
            color: var(--trip-accent-strong);
            font-weight: 800;
        }
        .notes-filter-state-clear {
            flex: 0 0 auto;
            min-height: 24px;
            padding: 0 9px;
            border: 0;
            border-radius: 999px;
            background: rgba(160, 150, 147, 0.16);
            color: #6B5F5B;
            font-family: inherit;
            font-size: 0.72rem;
            font-weight: 800;
            cursor: pointer;
        }
        .notes-filter-state-clear:hover {
            background: rgba(160, 150, 147, 0.26);
        }

        /* Bottom-sheet category picker */
        .notes-cat-picker-overlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
            background: rgba(74, 64, 60, 0);
            opacity: 0;
            transition: background 220ms ease, opacity 220ms ease;
        }
        .notes-cat-picker-overlay.is-active {
            background: rgba(74, 64, 60, 0.34);
            opacity: 1;
        }
        .notes-cat-picker {
            width: min(100%, 520px);
            max-height: min(78vh, 78dvh, 640px);
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
            background: var(--card-solid);
            border-radius: 22px 22px 0 0;
            box-shadow: 0 -22px 56px rgba(74, 64, 60, 0.22);
            transform: translateY(100%);
            transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
            font-family: inherit;
            color: var(--ink-strong);
        }
        .notes-cat-picker-overlay.is-active .notes-cat-picker {
            transform: translateY(0);
        }
        .notes-cat-picker-handle {
            width: 38px;
            height: 4px;
            margin: 0 auto 10px;
            border-radius: 999px;
            background: rgba(160, 150, 147, 0.45);
        }
        .notes-cat-picker-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin: 0 0 10px;
        }
        .notes-cat-picker-head h3 {
            margin: 0;
            font-size: 1rem;
            font-weight: 800;
            color: var(--ink-strong);
            letter-spacing: -0.005em;
        }
        .notes-cat-picker-close {
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 10px;
            background: rgba(160, 150, 147, 0.16);
            color: #6B5F5B;
            font-size: 1.1rem;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
        }
        .notes-cat-picker-search {
            display: block;
            margin: 0 0 8px;
        }
        .notes-cat-picker-search input {
            width: 100%;
            box-sizing: border-box;
            min-height: 40px;
            padding: 8px 12px;
            border: 1px solid color-mix(in srgb, var(--trip-accent) 10%, var(--border));
            border-radius: 12px;
            background: var(--bg);
            color: var(--ink-strong);
            font: inherit;
            font-size: 16px;
            outline: none;
        }
        .notes-cat-picker-search input:focus {
            border-color: color-mix(in srgb, var(--trip-accent) 30%, var(--border));
            background: #fff;
        }
        .notes-cat-picker-list {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            margin: 0 -4px;
            padding: 4px;
            display: grid;
            gap: 2px;
        }
        .notes-cat-picker-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
            min-height: 44px;
            padding: 8px 12px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: var(--ink-strong);
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .notes-cat-picker-row:hover,
        .notes-cat-picker-row:focus-visible {
            background: rgba(247, 243, 239, 0.78);
            outline: none;
        }
        .notes-cat-picker-row.is-active {
            background: color-mix(in srgb, var(--trip-accent) 10%, transparent);
            color: var(--trip-accent-strong);
            font-weight: 800;
        }
        .notes-cat-picker-row.is-active .notes-cat-picker-count {
            color: var(--trip-accent-strong);
        }
        .notes-cat-picker-label {
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .notes-cat-picker-count {
            flex: 0 0 auto;
            color: #9C8F87;
            font-size: 0.78rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
        }
        .notes-cat-picker-empty {
            padding: 24px 12px;
            text-align: center;
            color: #9C8F87;
            font-size: 0.86rem;
        }

        /* ======================================================================
           Integrated FX Tab & Floating Assistant Redesign — 20260529
           ====================================================================== */


        /* Notes navigation icons and active colors */
        .itin-nav-item.active[data-nav="notes"] { color: var(--trip-accent); }
        .itin-nav-item[data-nav="notes"] {
            --itin-nav-icon: url("/trip-assets/icons/line/notes.svg");
        }

        /* FX iframe tab full-bleed container */
        .fx-section {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 100;
            overflow: hidden;
            overscroll-behavior: none;
            touch-action: none;
        }
        body.is-itinerary.show-fx .itin-app { display: none; }
        body.is-itinerary.show-fx .fx-section { display: block; animation: fadeIn 0.4s ease forwards; }
        .fx-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        .fx-section {
            --fx-bg: #f5f5f7;
            --fx-header: rgba(255, 255, 255, 0.68);
            --fx-surface: rgba(255, 255, 255, 0.72);
            --fx-ink: #1d1d1f;
            --fx-muted: #86868b;
            --fx-line: rgba(0, 0, 0, 0.08);
            --fx-accent: var(--trip-accent, #0071e3);
            --fx-accent-deep: var(--trip-accent-strong, #0077ed);
            --fx-accent-soft: color-mix(in srgb, var(--trip-accent, #0071e3) 12%, transparent);
            --fx-danger: #ff3b30;
            --fx-danger-soft: rgba(255, 59, 48, 0.10);
            --fx-warn: #ff9f0a;
            --fx-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.07);
            --fx-shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.04);
            --fx-radius-card: 24px;
            --fx-radius-control: 16px;
            --fx-radius-key: 16px;
            --fx-glass-blur: blur(24px) saturate(180%);
            --fx-glass-border: 1px solid rgba(255, 255, 255, 0.5);
            background:
                radial-gradient(125% 80% at 100% 0%, color-mix(in srgb, var(--fx-accent) 8%, transparent), transparent 58%),
                radial-gradient(120% 75% at 0% 100%, color-mix(in srgb, var(--fx-accent) 6%, transparent), transparent 55%),
                var(--fx-bg);
            color: var(--fx-ink);
            font-family: var(--font-en, 'Plus Jakarta Sans'), var(--font-zh, 'Noto Sans TC'), sans-serif;
            font-feature-settings: "tnum" 1;
        }
        .fx-section,
        .fx-section * {
            box-sizing: border-box;
        }
        body.is-itinerary.show-fx {
            overflow-x: hidden;
        }
        .fx-shell {
            width: 100%;
            max-width: min(480px, 100vw);
            min-width: 0;
            height: 100%;
            margin: 0 auto;
            padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-left, 0px)) calc(84px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-right, 0px));
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: hidden;
        }
        .fx-body {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            min-height: 0;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: hidden;
        }
        .fx-section .top-area {
            position: relative;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            min-height: 0;
            flex: 0 0 auto;
        }
        .fx-header {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 48px;
            align-items: center;
            column-gap: 12px;
            padding: 4px 2px;
        }
        .fx-titles { min-width: 0; line-height: 1.1; }
        .fx-eyebrow {
            margin: 0;
            color: var(--fx-accent);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }
        .fx-header h1 {
            margin: 2px 0 0;
            font-size: clamp(1.55rem, 6.8vw, 1.9rem);
            font-weight: 800;
            letter-spacing: 0;
        }
        .fx-status {
            margin: 4px 0 0;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--fx-muted);
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .fx-status #fx-status-text {
            color: var(--fx-accent-deep);
            font-weight: 700;
        }
        .fx-status-sep { color: var(--fx-line); font-weight: 800; }
        .fx-status-sep[hidden] { display: none; }
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--fx-muted);
            flex: 0 0 auto;
        }
        .status-dot.ok { background: var(--fx-accent); }
        .status-dot.warn { background: var(--fx-warn); }
        .status-dot.loading { background: var(--fx-accent-deep); }
        .fx-section .icon-button {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            border: var(--fx-glass-border);
            background: var(--fx-header);
            -webkit-backdrop-filter: var(--fx-glass-blur);
            backdrop-filter: var(--fx-glass-blur);
            color: var(--fx-accent-deep);
            display: grid;
            place-items: center;
            font-size: 1.2rem;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            box-shadow: var(--fx-shadow-soft);
        }
        .fx-section .icon-button:active {
            background: var(--fx-accent-soft);
            transform: scale(0.95);
        }
        .fx-section .converter,
        .fx-section .history-panel {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 100%);
            -webkit-backdrop-filter: var(--fx-glass-blur);
            backdrop-filter: var(--fx-glass-blur);
            border: var(--fx-glass-border);
            border-radius: var(--fx-radius-card);
            box-shadow: var(--fx-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.6);
            padding: 18px;
        }
        .fx-section .converter {
            display: grid;
            gap: 10px;
            transition: opacity 0.2s ease;
        }
        .fx-section .mode-history .converter {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0s linear 0.2s;
        }
        .fx-section .money-row {
            display: grid;
            min-width: 0;
            gap: 6px;
        }
        .fx-section .money-label {
            color: var(--fx-accent-deep);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .fx-section .money-control {
            display: flex;
            align-items: stretch;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            border: 1px solid var(--fx-line);
            border-radius: var(--fx-radius-control);
            background: rgba(255, 255, 255, 0.78);
            overflow: hidden;
            transition: border-color 0.16s ease, box-shadow 0.16s ease;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .fx-section .money-row.is-active .money-control {
            border-color: var(--fx-accent);
            box-shadow: 0 0 0 3px var(--fx-accent-soft);
        }
        .fx-section .amount-input,
        .fx-section .currency-select {
            min-width: 0;
            width: 100%;
            max-width: 100%;
            border: 0;
            background: transparent;
            color: var(--fx-ink);
            font-size: 16px;
            font: inherit;
        }
        .fx-section .amount-input {
            flex: 1 1 auto;
            padding: 14px;
            font-size: clamp(1.85rem, 8vw, 2.45rem);
            font-weight: 800;
            letter-spacing: 0;
            text-align: right;
            cursor: pointer;
            caret-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            font-variant-numeric: tabular-nums;
            line-height: 1.05;
            overflow: hidden;
            text-overflow: clip;
            transition: font-size 0.12s ease;
        }
        .fx-section .amount-input.is-long { font-size: clamp(1.65rem, 7.4vw, 2.3rem); }
        .fx-section .amount-input.is-extra-long { font-size: clamp(1.35rem, 6vw, 1.9rem); }
        .fx-section .amount-input:focus,
        .fx-section .currency-select:focus {
            outline: none;
        }
        .fx-section .currency-select {
            flex: 0 0 96px;
            width: 96px;
            max-width: 96px;
            border-left: 1px solid var(--fx-line);
            padding: 0 20px 0 8px;
            color: var(--fx-accent-deep);
            font-weight: 800;
            font-size: clamp(1.05rem, 4.6vw, 1.25rem);
            letter-spacing: 0;
            text-align: center;
            text-align-last: center;
            appearance: none;
            -webkit-appearance: none;
            background-image:
                linear-gradient(45deg, transparent 50%, var(--fx-accent) 50%),
                linear-gradient(135deg, var(--fx-accent) 50%, transparent 50%);
            background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
            background-size: 4px 4px;
            background-repeat: no-repeat;
        }
        .fx-section .swap-row {
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr);
            align-items: center;
            min-width: 0;
            gap: 12px;
            padding: 2px 0;
        }
        .fx-section .swap-button {
            width: 52px;
            height: 52px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            font-size: 1.4rem;
            color: #fff;
            background: linear-gradient(160deg, var(--fx-accent), var(--fx-accent-deep));
            border: 0;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            box-shadow: 0 8px 20px color-mix(in srgb, var(--fx-accent) 32%, transparent);
        }
        .fx-section .swap-button:active { transform: scale(0.94); }
        .fx-section .rate-line {
            min-height: 22px;
            color: var(--fx-ink);
            font-size: 1rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            overflow-wrap: anywhere;
        }
        .fx-section .chips {
            display: flex;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            gap: 8px;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 2px 4px 2px 1px;
            scrollbar-width: none;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
            -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
        }
        .fx-section .chips::-webkit-scrollbar { display: none; }
        .fx-section .chip {
            flex: 0 0 auto;
            height: 44px;
            border: var(--fx-glass-border);
            background: var(--fx-surface);
            -webkit-backdrop-filter: var(--fx-glass-blur);
            backdrop-filter: var(--fx-glass-blur);
            color: var(--fx-ink);
            border-radius: 999px;
            padding: 0 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 800;
            cursor: pointer;
            font-size: 1.05rem;
            scroll-snap-align: start;
            user-select: none;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .fx-section .chip:active { background: var(--fx-accent-soft); }
        .fx-section .chip span {
            color: var(--fx-muted);
            font-size: 0.78rem;
            font-weight: 600;
        }
        .fx-section .chips-section {
            flex: 0 0 auto;
        }
        .fx-section .keypad {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: repeat(4, minmax(0, 1fr));
            width: 100%;
            max-width: 100%;
            min-width: 0;
            gap: 6px;
            min-height: 0;
            flex: 1 1 auto;
            overflow: hidden;
        }
        .fx-section .keypad-button {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            min-height: 0;
            border: var(--fx-glass-border);
            border-radius: var(--fx-radius-key);
            background: var(--fx-surface);
            -webkit-backdrop-filter: blur(14px) saturate(160%);
            backdrop-filter: blur(14px) saturate(160%);
            color: var(--fx-ink);
            font-size: clamp(1.25rem, 5.6vw, 1.7rem);
            font-weight: 700;
            cursor: pointer;
            box-shadow: var(--fx-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.55);
            transition: transform 0.06s ease, background 0.12s ease;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            font-variant-numeric: tabular-nums;
        }
        .fx-section .keypad-button:active {
            background: var(--fx-accent-soft);
            transform: scale(0.96);
        }
        .fx-section .keypad-button:focus-visible {
            outline: 2px solid var(--fx-accent);
            outline-offset: 2px;
        }
        .fx-section .keypad-button:disabled {
            color: rgba(147, 140, 134, 0.32);
            cursor: not-allowed;
            background: rgba(249, 245, 236, 0.5);
            box-shadow: none;
        }
        .fx-section .keypad-button-aux {
            background: var(--fx-accent-soft);
            color: var(--fx-accent-deep);
            border-color: transparent;
            font-weight: 800;
        }
        .fx-section .keypad-button-clear {
            background: var(--fx-danger-soft);
            color: var(--fx-danger);
            border-color: transparent;
            letter-spacing: 0;
            font-weight: 800;
        }
        .fx-section .keypad-button-cat {
            display: block;
            padding: 0;
            background: transparent;
            border: 0;
            overflow: hidden;
            border-radius: var(--fx-radius-key);
            box-shadow: var(--fx-shadow-soft);
        }
        .fx-section .keypad-button-cat img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: var(--fx-radius-key);
            display: block;
            pointer-events: none;
        }
        .fx-section .history-panel {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 14px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0s linear 0.2s;
        }
        .fx-section .mode-history .history-panel {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease;
        }
        .fx-section .history-head {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
        }
        .fx-section .history-title {
            margin: 0;
            text-align: left;
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: 0;
        }
        .fx-section .history-clear,
        .fx-section .history-search,
        .fx-section .history-entry,
        .fx-section .history-del {
            font: inherit;
        }
        .fx-section .history-clear {
            height: 34px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid var(--fx-line);
            background: var(--fx-surface);
            font-weight: 800;
            font-size: 0.85rem;
            cursor: pointer;
            color: var(--fx-danger);
            justify-self: end;
        }
        .fx-section .history-clear:disabled {
            color: rgba(147, 140, 134, 0.4);
            cursor: not-allowed;
            background: var(--fx-surface);
        }
        .fx-section .history-search {
            flex: 0 0 auto;
            width: 100%;
            height: 40px;
            padding: 0 14px;
            border: 1px solid var(--fx-line);
            border-radius: var(--fx-radius-control);
            background: var(--fx-surface);
            color: var(--fx-ink);
            font-size: 16px;
            font-weight: 600;
            appearance: none;
        }
        .fx-section .history-search:focus {
            outline: none;
            border-color: var(--fx-accent);
            box-shadow: 0 0 0 3px var(--fx-accent-soft);
        }
        .fx-section .history-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            padding-right: 2px;
        }
        .fx-section .history-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 8px;
        }
        .fx-section .history-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 44px;
            align-items: stretch;
            background: var(--fx-surface);
            border: 1px solid var(--fx-line);
            border-radius: var(--fx-radius-control);
            overflow: hidden;
        }
        .fx-section .history-entry {
            min-width: 0;
            border: 0;
            background: transparent;
            text-align: left;
            padding: 12px;
            cursor: pointer;
            display: grid;
            gap: 4px;
            -webkit-tap-highlight-color: transparent;
        }
        .fx-section .history-entry:active { background: var(--fx-accent-soft); }
        .fx-section .history-pair {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 8px;
            color: var(--fx-ink);
            font-weight: 800;
            font-size: 1.02rem;
            font-variant-numeric: tabular-nums;
        }
        .fx-section .history-arrow,
        .fx-section .history-amount-to {
            color: var(--fx-accent);
        }
        .fx-section .history-meta {
            color: var(--fx-muted);
            font-size: 0.76rem;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        .fx-section .history-del {
            border: 0;
            border-left: 1px solid var(--fx-line);
            background: transparent;
            color: var(--fx-muted);
            font-size: 1rem;
            cursor: pointer;
        }
        .fx-section .history-del:active {
            background: var(--fx-danger-soft);
            color: var(--fx-danger);
        }
        .fx-section .history-empty {
            margin: 10px 4px;
            text-align: center;
            color: var(--fx-muted);
            font-size: 0.9rem;
            line-height: 1.7;
        }
        .fx-section .history-empty[hidden] { display: none; }
        .fx-footnote {
            margin: 0;
            color: var(--fx-muted);
            font-size: 0.74rem;
            line-height: 1.45;
            text-align: center;
        }
        @media (max-width: 380px) {
            .fx-shell {
                padding-left: max(12px, env(safe-area-inset-left, 0px));
                padding-right: max(12px, env(safe-area-inset-right, 0px));
                gap: 12px;
            }
            .fx-section .converter,
            .fx-section .history-panel {
                padding: 14px;
            }
            .fx-section .money-control {
                display: flex;
            }
            .fx-section .currency-select {
                flex-basis: 88px;
                width: 88px;
                max-width: 88px;
            }
            .fx-section .amount-input {
                padding: 12px;
                font-size: clamp(1.65rem, 7.2vw, 2.15rem);
            }
            .fx-section .swap-button {
                width: 48px;
                height: 48px;
            }
            .fx-section .keypad {
                gap: 5px;
            }
        }

        /* Assistant FAB (🪄) */
        .assistant-fab {
            position: fixed;
            left: auto;
            right: 18px;
            bottom: calc(142px + env(safe-area-inset-bottom, 0px));
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--trip-accent, #0071e3), var(--trip-accent-strong, #0077ed));
            color: #FFFFFF;
            border: none;
            cursor: pointer;
            z-index: 7000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.82;
            box-shadow: 0 4px 14px color-mix(in srgb, var(--trip-accent) 28%, transparent);
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, opacity 0.2s, background 0.2s;
            -webkit-tap-highlight-color: transparent;
        }
        .assistant-fab:hover,
        .assistant-fab:focus-visible {
            opacity: 1;
            transform: scale(1.06) translateY(-1px);
            box-shadow: 0 6px 18px color-mix(in srgb, var(--trip-accent) 36%, transparent);
        }
        .assistant-fab:active {
            transform: scale(0.94) translateY(0);
        }
        .assistant-fab-icon {
            font-size: 1.25rem;
            display: block;
            line-height: 1;
        }
        .assistant-fab-icon-svg {
            width: 24px;
            height: 24px;
            display: block;
        }
        /* Unified line icons: expense / booking / members */
        .booking-cat-icon .booking-cat-icon-svg {
            width: 26px;
            height: 26px;
            display: block;
        }
        .expense-cat-icon {
            width: 14px;
            height: 14px;
            flex: 0 0 auto;
            vertical-align: -0.18em;
        }
        .expense-scan-icon .expense-inline-icon {
            width: 20px;
            height: 20px;
            vertical-align: -0.2em;
        }
        .expense-form-date-icon .expense-inline-icon {
            width: 18px;
            height: 18px;
            display: block;
        }
        .member-edit-icon {
            width: 16px;
            height: 16px;
            display: block;
            color: var(--muted);
        }

        /* Assistant Overlay container */
        .assistant-overlay {
            position: fixed;
            inset: 0;
            z-index: 8000;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            visibility: hidden;
            pointer-events: none;
        }
        .assistant-overlay.is-active {
            visibility: visible;
            pointer-events: auto;
        }
        .assistant-overlay-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(40, 36, 34, 0.42);
            opacity: 0;
            transition: opacity 0.28s ease;
        }
        .assistant-overlay.is-active .assistant-overlay-backdrop {
            opacity: 1;
        }

        /* Assistant Slide-up panel drawer (Glassmorphism) */
        .assistant-overlay-panel {
            position: relative;
            width: min(100%, 640px);
            height: min(85vh, 720px);
            background: rgba(255, 255, 255, 0.62) !important;
            backdrop-filter: blur(28px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
            border-radius: 24px 24px 0 0;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            box-shadow: 0 -12px 42px rgba(80, 72, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
            overflow: hidden;
            transform: translateY(100%);
            opacity: 0;
            transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease;
        }
        .assistant-overlay.is-active .assistant-overlay-panel {
            transform: translateY(0);
            opacity: 1;
        }
        .assistant-overlay-panel .assistant-section {
            display: block !important;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
            max-width: none;
            margin: 0;
        }
        .assistant-drag-handle {
            width: 36px;
            height: 5px;
            background: rgba(0, 0, 0, 0.12);
            border-radius: 99px;
            margin: 10px auto 4px;
            flex-shrink: 0;
        }
        .assistant-close-panel-btn {
            position: absolute;
            top: 14px;
            right: 18px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.05);
            border: none;
            color: var(--ink, #5C524E);
            font-size: 1.2rem;
            font-weight: bold;
            line-height: 28px;
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: background 0.16s ease, transform 0.16s ease;
        }
        .assistant-close-panel-btn:hover {
            background: rgba(0, 0, 0, 0.1);
            transform: scale(1.05);
        }
        .assistant-close-panel-btn:active {
            transform: scale(0.95);
        }

        /* FAB mutual exclusions */
        body.chat-open .assistant-fab {
            display: none !important;
        }
        body.show-assistant #chat-fab {
            display: none !important;
        }
        body.show-fx .assistant-fab,
        body.show-fx #chat-fab {
            display: none !important;
        }

        /* ---------------------------------------------------------------------
           AI speed-dial launcher
           Single "AI" button that fans out into 助手 + 對話. The original
           assistant/chat FABs are kept in the DOM (the dial delegates to them)
           but hidden from view.
           --------------------------------------------------------------------- */
        .assistant-fab,
        .chat-fab {
            display: none !important;
        }

        .ai-sd-scrim {
            position: fixed;
            inset: 0;
            z-index: 6990;
            background: rgba(74, 64, 60, 0);
            pointer-events: none;
            transition: background 0.24s ease;
        }
        .ai-sd-scrim.is-active {
            background: rgba(74, 64, 60, 0.16);
            pointer-events: auto;
        }

        .ai-speed-dial {
            position: fixed;
            right: 18px;
            bottom: calc(86px + env(safe-area-inset-bottom, 0px));
            z-index: 7000;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 12px;
            transition: bottom 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
            /* The closed dial still reserves layout space for its (invisible)
               action buttons, so its box overlaps the back-to-top button above
               the toggle. Let pointer events fall THROUGH the container's empty
               area to whatever is beneath (e.g. the back-to-top button); only
               the toggle and the revealed actions remain interactive. */
            pointer-events: none;
        }

        .ai-sd-toggle {
            position: relative;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: none;
            pointer-events: auto;
            background: linear-gradient(160deg, var(--trip-accent), var(--trip-accent-strong));
            color: #fff;
            cursor: pointer;
            box-shadow: 0 4px 16px color-mix(in srgb, var(--trip-accent) 34%, transparent);
            transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .ai-sd-toggle:active {
            transform: scale(0.92);
        }
        .ai-sd-toggle:focus-visible {
            outline: 3px solid var(--trip-accent-soft);
            outline-offset: 3px;
        }
        .ai-speed-dial.is-open .ai-sd-toggle {
            box-shadow: 0 6px 22px color-mix(in srgb, var(--trip-accent) 44%, transparent);
        }
        .ai-sd-toggle-face {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .ai-sd-toggle-text {
            font-weight: 800;
            font-size: 1.04rem;
            letter-spacing: 0.04em;
        }
        .ai-sd-toggle-close {
            opacity: 0;
            transform: rotate(-90deg) scale(0.5);
        }
        .ai-sd-toggle-close svg {
            width: 24px;
            height: 24px;
        }
        .ai-speed-dial.is-open .ai-sd-toggle-text {
            opacity: 0;
            transform: rotate(90deg) scale(0.5);
        }
        .ai-speed-dial.is-open .ai-sd-toggle-close {
            opacity: 1;
            transform: rotate(0) scale(1);
        }

        .ai-sd-action {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            opacity: 0;
            transform: translateY(14px) scale(0.82);
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .ai-speed-dial.is-open .ai-sd-action {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        .ai-speed-dial.is-open .ai-sd-chat {
            transition-delay: 0.04s;
        }
        .ai-speed-dial.is-open .ai-sd-assistant {
            transition-delay: 0.1s;
        }
        .ai-sd-label {
            background: var(--card, #fff);
            color: var(--ink-strong, #4A403C);
            font-size: 0.84rem;
            font-weight: 800;
            letter-spacing: -0.005em;
            padding: 6px 12px;
            border-radius: 11px;
            white-space: nowrap;
            box-shadow: 0 3px 12px rgba(74, 64, 60, 0.18);
        }
        .ai-sd-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--card, #fff);
            color: var(--trip-accent-strong);
            border: 1px solid color-mix(in srgb, var(--trip-accent) 20%, var(--border));
            box-shadow: 0 4px 14px color-mix(in srgb, var(--trip-accent) 18%, transparent);
            transition: transform 0.16s ease;
        }
        .ai-sd-action:active .ai-sd-icon {
            transform: scale(0.92);
        }
        .ai-sd-icon svg {
            width: 22px;
            height: 22px;
            display: block;
        }

        /* Back-to-top sits above the dial on the itinerary page and steps aside
           while the dial is expanded. */
        body.is-itinerary .itin-fab-top {
            bottom: calc(150px + env(safe-area-inset-bottom, 0px));
            right: 18px;
        }
        body.ai-dial-open .itin-fab-top {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        /* When the bottom nav sinks away, the FAB stack drops to the corner;
           when the nav is up, they ride above it. Driven by body.nav-collapsed. */
        body.nav-collapsed .ai-speed-dial {
            bottom: calc(22px + env(safe-area-inset-bottom, 0px));
        }
        body.is-itinerary.nav-collapsed .itin-fab-top {
            bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        }
        body.chat-open .ai-speed-dial,
        body.show-assistant .ai-speed-dial,
        body.show-fx .ai-speed-dial,
        body.chat-open .itin-fab-top,
        body.show-assistant .itin-fab-top,
        body.show-fx .itin-fab-top {
            display: none !important;
        }