/* ==========================================================================
   NEverland - 響應式手機與平板專用覆蓋樣式 (mobile_style.css)
   ========================================================================== */

/* ─── 1. 平板與小螢幕橫向優化 (max-width: 1024px) ─── */
@media (max-width: 1024px) {
    .navbar {
        padding: 25px 40px;
    }

    .container {
        padding: 0 40px;
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1 {
        font-size: 5rem;
    }

    .god-rays {
        height: 40%;
    }

    .nav-links {
        gap: 25px;
    }

    /* 7天時空長廊在手機螢幕下的響應式橫向滾動優化 */
    #seven-days-grid {
        display: flex !important;
        overflow-x: auto !important;
        padding-bottom: 15px !important;
        gap: 15px !important;
        -webkit-overflow-scrolling: touch;
    }
    
    #seven-days-grid .card {
        min-width: 130px !important;
        flex-shrink: 0 !important;
    }
}

/* ─── 2. 純手機端佈局重置 (max-width: 768px) ─── */
@media (max-width: 768px) {
    .navbar {
        /* 🚀 空間釋放：將左右內邊距從 30px 縮小到 12px，幫右側選單爭取巨大橫向舞台 */
        padding: 15px 12px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .logo {
        /* 稍微控制手機版 Logo 寬度比例，防止它把右邊擠扁 */
        font-size: 1rem !important;
        gap: 6px !important;
    }

    .moon-icon {
        font-size: 1.1rem !important; /* 縮小手機版月亮，留出透氣區 */
    }

    .nav-links {
        /* 🚀 緊湊連鎖：將選單項目之間的 Gap 從 20px 縮小到 10px，讓它們緊密並排 */
        display: flex !important;
        flex-direction: row !important; /* 確保保持橫向一排 */
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .nav-links li {
        display: inline-block !important;
        white-space: nowrap !important; /* 🌟 鋼鐵鐵律：強制文字絕對不准換行！ */
    }

    .nav-links a {
        /* 🚀 字體極限優化：微調為 0.85rem，並把字距徹底拉緊，粉碎雙行殘影 */
        font-size: 0.85rem !important;
        letter-spacing: 0.02em !important; /* 鎖緊字距 */
        padding: 4px 2px !important;
        display: block !important;
        white-space: nowrap !important; /* 雙重鎖死不准換行 */
    }

    .container {
        padding: 0 30px;
    }

    .hero {
        padding: 120px 0 100px;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .three-places {
        flex-direction: row;  /* 改做 row */
        flex-wrap: wrap;  /* 允許換行 */
        gap: 10px;  /* 縮細 gap */
        justify-content: center;  /* 居中 */
    }
    
    .place-item {
        font-size: 0.75rem;  /* 縮細字體 */
    }
    
    .diamond {
        font-size: 0.5rem;  /* 縮細菱形 */
    }

    .curated-section::before {
        display: block !important;
        right: calc(50% + 100px);  /* 縮細距離 */
        width: calc(25% + 0px);  /* 縮短線長 */
    }

    .curated-section::after {
        display: block !important;
        left: calc(50% + 100px);  /* 縮細距離 */
        width: calc(25% + 0px);  /* 縮短線長 */
    }

    /* 縮細副標題 */
    .chinese-subtitle {
        font-size: 0.8rem;  /* 從 0.95rem 縮細 */
        letter-spacing: 0.2em;  /* 縮細字距 */
    }
    
    .english-subtitle {
        font-size: 0.9rem;  /* 從 1rem 縮細 */
    }
    
    /* 縮細 curated by */
    .curated-text {
        font-size: 0.65rem;  /* 從 0.9rem 縮細 */
    }
    
    /* 縮細卡片描述 */
    .card-description {
        font-size: 0.85rem;  /* 從 0.9rem 縮細 */
        line-height: 1.7;
    }
    
    /* 縮細 quote */
    .quote {
        font-size: 1.2rem;  /* 從 1.3rem 縮細 */
    }

    .god-rays {
        height: 35%;
    }

    .ray-beam {
        width: 40px;
    }

    .ray-beam:nth-child(3) {
        left: calc(50% - 100px);
    }

    .ray-beam:nth-child(4) {
        left: calc(50% - 40px);
    }

    .ray-beam:nth-child(5) {
        left: calc(50% + 40px);
    }

    .ray-beam:nth-child(6) {
        left: calc(50% + 100px);
    }

    /* 天氣追蹤分頁手機優化 */
    .weather-page-title { font-size: 2.3rem; }
    .journey-form-card, .journey-list-section { padding: 20px; }
    
    .node-input-row { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 10px; 
        border-bottom: 1px solid rgba(255,255,255,0.05); 
        padding-bottom: 15px;
    }
    
    .node-input-row input { width: 100%; }
    .node-index { position: absolute; top: -5px; left: -5px; z-index: 2;}
    .geo-tag { margin-left: 35px; }

    /* 詳情分頁專屬浮動返回按鈕手機版 */
    .detail-page-floating-back-btn {
        bottom: 20px !important;
        right: 20px !important;
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }
}

/* 手機版響應式同步微調：對齊你 1024px 和 768px 網格內部的導航欄縮小間距 */
@media (max-width: 1024px) {
    #nav-back-li { margin-right: 25px !important; }
    #global-back-nav-arrow { font-size: 0.95rem !important; }
}

@media (max-width: 768px) {
    #nav-back-li { margin-right: 20px !important; }
    #global-back-nav-arrow { font-size: 0.85rem !important; }
}

@media (max-width: 768px) {
    
    .features-grid {
        /* 🚀 降維重灌：從死板的三欄一排，改為手機端最流暢的「單欄垂直平鋪」！ */
        grid-template-columns: 1fr !important; 
        gap: 20px !important; /* 縮小卡片與卡片之間的垂直間距 */
        max-width: 100% !important;
        margin: 30px auto 0 auto !important; /* 縮小頂部間距，防範爆版 */
        padding: 0 10px !important;
    }

    .features-grid .card {
        /* 🚀 物理縮骨：解鎖電腦版的 min-height 詛咒，改為最精緻的手機版高度 */
        min-height: auto !important; 
        height: auto !important;
        padding: 25px 22px !important; /* 重新調整內部內邊距，令內容有呼吸空間 */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* 靠左對齊，符合常規閱讀習慣 */
        border-radius: 16px !important;
        gap: 12px !important;
    }

    /* 🎯 徹底粉碎文字垂直重疊、拉長換行嘅肉酸靈異現象 */
    .features-grid .card .card-title {
        font-size: 1.25rem !important; /* 適度縮小標題字體 */
        margin-bottom: 4px !important;
        color: var(--dawn-gold) !important;
        writing-mode: horizontal-tb !important; /* 🌟 鎖死：絕對保持橫向排版，不准變垂直！ */
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .features-grid .card .card-description {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        color: var(--text-secondary) !important;
        text-align: left !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    .features-grid .card .card-link {
        /* 讓「進入 →」連結優雅、自然地停靠在每張卡片的左下角 */
        margin-top: auto !important;
        padding-top: 10px !important;
        font-size: 0.85rem !important;
        color: var(--dawn-gold) !important;
    }
    
    /* 微調開放功能頁面頂部的標題，防止大字體在手機端過度刺眼 */
    body:has(.features-grid) .weather-page-title {
        font-size: 2.2rem !important;
        margin-top: 20px !important;
    }
    body:has(.features-grid) .weather-page-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ==========================================================================
   🛠️ 師父鋼鐵修正：頂部導航欄 [← 返回] 手機端智慧分流（首頁打死收埋，分頁秒速彈出）
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 🚀 1. 首頁鐵腕消滅：預設在手機端，最高權限將頂部返回按鈕徹底隱形，粉碎爆版！ */
    #nav-back-li {
        display: none !important;
    }

    /* 🚀 2. 分頁智慧解鎖：只有當手機端走進這三個功能分頁時，才允許這枚箭頭合法亮起！ */
    body:has(.features-grid) #nav-back-li,
    body:has(.weather-main-layout) #nav-back-li,
    body:has(#detail-nodes-track) #nav-back-li {
        display: inline-block !important; /* 只有在分頁，才准現身 */
        margin-right: 12px !important;    /* 手機端縮小右側間距，留出呼吸區 */
    }

    /* 批量對齊微調手機端這個返回箭頭的字體，防止它把右邊的探索聯繫擠扁 */
    #global-back-nav-arrow {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        letter-spacing: 0em !important;
        padding-right: 6px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* ==========================================================================
   🛠️ 師父極限二度微雕：真實首頁 (home.html) 字體再縮小 + 玻璃卡片更精緻內縮
   ========================================================================== */
@media (max-width: 768px) {

    /* 🚀 1. 極限拯救爆 Mon 文字：再度按比例全面縮小，釋放夜空大氣感 */
    
    /* "The Islands" 小標籤 */
    .islands-section .section-label {
        font-size: 0.75rem !important; /* 再度微縮，保持低調奢華 */
        letter-spacing: 0.2em !important; /* 稍微拉開字距，增加呼吸感 */
        margin-bottom: 4px !important;
        opacity: 0.6 !important;
    }

    /* "這片土地的六個區域" 核心大標題 */
    .islands-section .section-title {
        font-size: 1.45rem !important; /* 🎯 從 1.8rem 再度極限裁切縮小！確保字體纖細、絕對不產生視覺壓迫 */
        font-weight: 400 !important;   /* 稍微調輕字重，令畫面更顯清秀 */
        letter-spacing: 0.05em !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    /* "每一張卡片...某個房間" 下面那行細字說明 */
    .islands-section .section-description {
        font-size: 0.78rem !important; /* 🎯 從 0.85rem 再度內縮降級！變成最精緻的微觀說明字 */
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.55) !important; /* 稍微調低亮度，使其優雅地融入背景 */
        padding: 0 25px !important; /* 增加左右內縮防線，逼迫文字在中間乖乖對齊 */
        max-width: 85% !important;  /* 寬度收得更緊凑 */
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }


    /* 🚀 2. 玻璃網格極致收窄：再度逼出兩側大面積星空透氣位 */
    
    .cards-grid {
        grid-template-columns: 1fr !important; /* 維持單欄垂直平鋪 */
        gap: 16px !important; /* 稍微縮小卡片之間的上下空隙，讓排版更緊湊連貫 */
        
        /* 🌟 終極微調天機：將寬度從 90% 再次狠狠收窄到 86%！
           左右兩邊各留出高達 7% 嘅神聖呼吸位，讓背景的群山和月光大面積透出來！ */
        width: 86% !important;
        max-width: 380px !important; /* 🎯 嚴格鎖死手機端最大寬度，哪怕大螢幕手機也絕不橫向肥胖 */
        margin: 0 auto !important; /* 確保水平完美置中對齊 */
        padding: 0 !important;
    }

    /* 確保這六塊晶瑩剔透的卡片完美聽從 86% 父容器的縮骨調教 */
    .cards-grid .card {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px 18px !important; /* 🎯 內邊距再次收細，粉碎臃腫，恢復晶瑩薄片質感 */
        border-radius: 14px !important; /* 稍微把圓角改小，使其更契合縮小後的精緻盒子模型 */
    }

    /* 卡片微觀元件同步二度收細 */
    .cards-grid .card .card-icon {
        width: 32px !important;  /* 電腦版 40px -> 手機版極限縮小到 32px */
        height: 32px !important;
        font-size: 1rem !important;
    }
    
    .cards-grid .card .card-title {
        font-size: 1.15rem !important; /* 標題字體再次收細 */
        margin-top: 6px !important;
        letter-spacing: 0.02em !important;
    }

    .cards-grid .card .card-subtitle {
        font-size: 0.65rem !important; /* 英文副標題極限低調化 */
        margin-bottom: 12px !important;
    }

    .cards-grid .card .card-description {
        font-size: 0.8rem !important; /* 內文描述字體收細 */
        line-height: 1.45 !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
}

/* ==========================================================================
   🛠️ 師父鐵腕重灌：2 號時空地獄表單 (journey-form-card) 手機端縱向流線優化
   ========================================================================== */
@media (max-width: 768px) {

    /* 🚀 1. 磨砂大卡片整體瘦身：釋放橫向透氣安全區 */
    .journey-form-card {
        padding: 25px 16px !important; /* 將原本臃腫的 40px 壓縮，把更多寬度留給輸入框 */
        margin: 0 auto !important;
        width: 92% !important; /* 保持與主頁卡片一致的透氣邊距 */
        box-sizing: border-box !important;
    }

    /* 🚀 2. 徹底粉碎死板的內聯 1fr 1fr 排版！強行將所有並排欄位改為「縱向一列平鋪」 */
    .journey-form-card div[style*="grid-template-columns: 1fr 1fr"],
    .journey-form-card .info-grid-2x2 {
        grid-template-columns: 1fr !important; /* 💥 降維：全部強制變成單欄垂直排列！ */
        gap: 15px !important;
        width: 100% !important;
    }

    /* 🚀 3. 修復『自定義旅程標籤 (ID)』文字重疊與蒙查查的靈異現象 */
    .form-group {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .form-group label {
        font-size: 0.85rem !important;
        white-space: nowrap !important; /* 強制標籤文字絕對不准折行扭曲 */
        color: var(--dawn-gold) !important;
        margin-bottom: 4px;
    }

    /* 🎯 精密修復：修正 ID 提示文字在手機端重疊擠壓的 Bug */
    .id-input-wrapper {
        width: 100% !important;
    }
    
    #journey-id {
        width: 100% !important;
        font-size: 0.95rem !important;
    }

    .id-suggestion-hint {
        font-size: 0.8rem !important; /* 稍微縮小提示字體 */
        left: 12px !important;
        color: rgba(255, 255, 255, 0.3) !important;
    }

    /* 🚀 4. 修復『系統密鑰框』與『複製按鈕』撞車撞到粉碎的慘劇 */
    .journey-form-card div[style*="display: flex; gap: 10px"] {
        flex-direction: row !important; /* 保持橫向，但重新約束比例 */
        align-items: center !important;
        width: 100% !important;
    }

    #journey-random-key {
        flex: 1 !important; /* 輸入框自動吞噬剩餘空間 */
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
    }

    /* 微調複製按鈕，使其緊貼密鑰框右側，體積更精修 */
    .journey-form-card button[onclick="copyRandomKey()"] {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
        height: 42px !important; /* 與輸入框高度嚴絲合縫對齊 */
        white-space: nowrap !important;
    }

    /* 🚀 5. 智優化『歷史軌跡節點軸』：將繁雜的行內資料流暢梳理 */
    .nodes-input-list {
        gap: 20px !important;
    }

    /* 讓每天的軌道行在手機端具備獨立的微磨砂底色，增加區隔感 */
    .node-input-row {
        flex-direction: column !important; /* 💥 軌道降維：改為垂直疊加 */
        align-items: stretch !important;
        gap: 10px !important;
        padding: 15px 12px !important;
        background: rgba(10, 14, 39, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-radius: 12px;
    }

    /* 序號徽章定位微調 */
    .node-index {
        align-self: flex-start;
        margin-bottom: 2px;
    }

    /* 強制讓節點軸內部的 國家選單 和 地點輸入框 100% 撐滿各自的行 */
    .node-country-select,
    .node-input-row .input-place,
    .node-input-row .input-date {
        width: 100% !important;
        flex: none !important; /* 解除電腦版的 flex 比例分配 */
    }

    /* 🚀 6. 遮罩層智適應優化：確保鎖定層完美包裹變形後的表單 */
    .section-lock-overlay {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 12px;
    }
    
    .section-lock-overlay span {
        font-size: 0.8rem !important;
        padding: 8px 16px !important;
        text-align: center;
        max-width: 85%;
    }

    /* 🚀 7. 表單底部按鈕區域橫向拉平（取消與下一步） */
    .form-actions {
        flex-direction: column-reverse !important; /* 💥 手機端按鈕垂直疊加，取消在下，前進在上，符合單手大拇指操作習慣 */
        gap: 10px !important;
        width: 100% !important;
    }

    .form-actions button {
        width: 100% !important; /* 按鈕全面撐滿，極好點擊 */
        padding: 14px !important;
        font-size: 0.95rem !important;
    }
}

/* ==========================================================================
   🛠️ 師父鐵腕修正：解決解鎖動態注入節點時，背景撐爆爆 Mon 嘅視覺黑洞
   ========================================================================== */
@media (max-width: 768px) {

    /* 🚀 1. 父容器大解放：在手機端將 Grid 物理閹割，換成最流暢、最不會高度當機的 Block 佈局！ */
    .weather-main-layout {
        display: block !important; /* 強制流線型向下排列 */
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 🚀 2. 表單卡片彈性化：鎖死全自動高度適應，徹底粉碎異步高度算力抽風 */
    .journey-form-card {
        display: block !important;
        width: 92% !important; /* 保持精緻透氣留白 */
        max-width: 500px !important;
        height: auto !important;     /* 🌟 核心：高度交給內容全權作主！ */
        min-height: auto !important; /* 解除一切硬性限制 */
        margin: 0 auto 30px auto !important; /* 填完表單後，與下方的歷史列表留出 30px 優雅間距 */
        
        box-sizing: border-box !important;
        overflow: visible !important; /* 容許內部解鎖時的彈性延伸 */
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* 注入奢華順滑伸縮過渡 */
    }

    /* 🚀 3. 歷史列表卡片同步順應下移：被表單自然向下推，絕不重疊 */
    .journey-list-section {
        display: block !important;
        width: 92% !important;
        max-width: 500px !important;
        height: auto !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* 🚀 4. 精密微調：當節點軸動態生成時，強制內部的每一行軌道具備鋼鐵盒子約束 */
    .nodes-input-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important; /* 確保容器本身不鎖死高度 */
        margin-top: 15px !important;
    }

    .node-input-row {
        box-sizing: border-box !important;
        width: 100% !important;
        /* 注入平滑淡入動畫，讓 23 天節點蹦出來時像流水一樣優雅，不閃爍 */
        animation: neverlandStreamlineFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards !important;
    }

    @keyframes neverlandStreamlineFadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* 🚀 5. 遮罩層精密貼合：確保解鎖前鎖定框完美蓋在容器正上方，不溢出半個像素 */
    .journey-form-card .form-section-middle,
    .journey-form-card .form-section-bottom {
        width: 100% !important;
        position: relative !important;
        height: auto !important;
    }

    .section-lock-overlay {
        position: absolute !important;
        top: -5px !important;
        left: -5px !important;
        right: -5px !important;
        bottom: -5px !important;
        width: calc(100% + 10px) !important;
        height: calc(100% + 10px) !important;
        z-index: 99 !important;
    }
}

/* ==========================================================================
   🛠️ 師父終極解鎖：澈底根除手機端節點軸元件集體「原地疊羅漢」靈異重疊
   ========================================================================== */
@media (max-width: 768px) {

    /* 🚀 1. 大外殼防護：限制大卡片最大物理寬度，敢出界的髒數據一律剪裁消隱 */
    .journey-form-card {
        display: block !important;
        width: 90% !important; /* 與主頁保持完全對齊的黃金透氣位 */
        max-width: 400px !important; /* 嚴格限制手機端死上限 */
        height: auto !important;
        margin: 20px auto 30px auto !important;
        padding: 24px 16px !important; /* 瘦身內邊距，留出更多內部空間 */
        box-sizing: border-box !important;
        overflow: hidden !important; 
        position: relative !important;
    }

    /* 父佈局容器完全流線化，防止高度與寬度算力當機 */
    .weather-main-layout {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .nodes-input-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 16px !important;
    }

    /* 🚀 2. 核心軌道大重灌：【徹底割除 Flex 橫向排版基因】！
       全面降維成最單純的 Block 佈局，逼迫內部的所有組件 100% 自動垂直換行延伸！ */
    .node-input-row {
        display: block !important;         /* 💥 斬殺 Flex！換上最純淨的垂直 Block 佈局！ */
        width: 100% !important;            /* 鎖死寬度，絕對不准超出父箱子 */
        max-width: 100% !important;
        height: auto !important;           /* 🌟 核心：高度交給內容，允許無限制垂直伸展控制！ */
        min-height: auto !important;
        box-sizing: border-box !important; /* 防止 Padding 向外頂爆 */
        
        padding: 16px 14px !important;
        background: rgba(10, 14, 39, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
        
        /* 徹底清洗、阻斷電腦版可能殘留的橫向不換行命令 */
        white-space: normal !important; 
    }

    /* 🚀 3. 序號徽章與 Day 1 獨立成行的精置容器（橫向第一層） */
    .flex-row-align {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 12px !important; /* 留出垂直空隙給下方的國家選單 */
        box-sizing: border-box !important;
        white-space: nowrap !important; /* 只有這行小字准並排 */
    }

    /* 序號徽章（如圓圈 1） */
    .node-index {
        position: static !important; /* 割除一切絕對定位 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 0.7rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* "Day 1" 標籤字體 */
    .node-input-row span[style*="font-size"],
    .node-input-row .bottom-card-day-label {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: var(--dawn-gold) !important;
        display: inline-block !important;
        margin: 0 !important;
    }

    /* 🚀 4. 【終極封印線】：把國家、區域、地點、日期所有輸入框死死釘在各自獨立的行中！
       既然外層開啟了 Block，我們只要讓它們 100% 撐滿，瀏覽器就會強行命令它們逐行向下平鋪！ */
    .node-country-select,
    .node-input-row .input-place,
    .node-input-row .input-date,
    .node-input-row select,
    .node-input-row input {
        width: 100% !important;        /* 💥 100% 撐滿各自一行，絕對不准並排！ */
        max-width: 100% !important;
        min-width: 0 !important;       /* 解除 CSS 默認的最小寬度限制 */
        box-sizing: border-box !important;
        
        display: block !important;     /* 強制變為塊級元件，全自動換行 */
        height: 40px !important;       /* 鎖定黃金高度 */
        margin: 8px 0 0 0 !important;  /* 幫每個輸入框頂部留出 8px 的垂直透氣空隙 */
        
        background: rgba(16, 24, 64, 0.8) !important;
        border: 1px solid rgba(135, 206, 250, 0.2) !important;
        color: #ffffff !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }

    /* 🚀 5. 子節點裂變行（同胞加號裂變）同步安全約束 */
    .sub-node-row {
        display: block !important;
        padding-left: 0 !important; /* 手機端取消縮進 */
        margin-top: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .sub-node-row::before {
        display: none !important;
    }

    /* 經緯度微調 */
    .geo-tag {
        margin-left: 0 !important;
        margin-top: 4px !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 精緻的動態補充「＋」號按鈕手機端長條化 */
    .btn-add-subnode {
        width: 100% !important;       
        text-align: center !important;
        padding: 10px !important;
        font-size: 0.85rem !important;
        margin-top: 8px !important;
        display: block !important;
    }

    /* 🚀 6. 遮罩層全面精密無縫貼合 */
    .journey-form-card .form-section-top,
    .journey-form-card .form-section-middle,
    .journey-form-card .form-section-bottom {
        width: 100% !important;
        position: relative !important;
    }

    .section-lock-overlay {
        position: absolute !important;
        top: -4px !important;
        left: -4px !important;
        right: -4px !important;
        bottom: -4px !important;
        width: calc(100% + 8px) !important;
        height: calc(100% + 8px) !important;
        z-index: 90 !important;
    }
    
    .section-lock-overlay span {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }

    /* 表單底部按鈕（下一步與取消）垂直撐滿 */
    .form-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .form-actions button {
        width: 100% !important;
        padding: 12px !important;
    }
}

@media (max-width: 768px) {
    
    /* 🚀 強制限制手機端所有輸入框和下拉選單的字體大小，絕對不准超過 0.85rem，防範字體撐大盒子！ */
    .node-input-row select,
    .node-input-row input,
    .node-country-select,
    .node-place-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important; /* 鎖死盒子模型 */
        
        font-size: 0.85rem !important;     /* 🎯 字體按比例縮細！ */
        height: 38px !important;           /* 稍微調矮高度，更加精修 */
        padding: 8px 10px !important;
        letter-spacing: 0em !important;    /* 字距拉緊 */
    }

    /* 確保父容器高度全自動向下野蠻生長 */
    .node-input-row {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
}

@media (max-width: 768px) {

    /* 🚀 鋼鐵修復手機端「時空密鑰與複製按鈕」錯位撞車爆邊的慘劇 */
    
    /* 找到密鑰和複製按鈕所在的那個 display: flex 父容器 */
    .journey-form-card div[style*="display: flex; gap: 10px"] {
        display: flex !important;
        flex-direction: row !important; /* 保持橫向一排 */
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 8px !important; /* 鎖定緊湊間距 */
    }

    /* 密鑰隨機碼輸入框 */
    #journey-random-key {
        flex: 1 !important; /* 強制輸入框吞噬左側所有寬度，防範把按鈕頂開 */
        width: 60% !important;
        max-width: 70% !important;
        font-size: 0.85rem !important;
        height: 40px !important;
        background: rgba(10, 14, 39, 0.5) !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* 📋 複製按鈕：強制約束體積，聽話歸位、絕對不准凸出邊界！ */
    .journey-form-card button[onclick="copyRandomKey()"] {
        width: auto !important;
        min-width: 70px !important; /* 鎖定小巧寬度 */
        max-width: 85px !important;
        height: 40px !important; /* 與左側輸入框高度嚴絲合縫垂直對齊 */
        padding: 0 8px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important; /* 鎖死文字不准換行 */
        
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important; /* 💥 鐵律：不管螢幕多窄，這粒按鈕絕對不准被壓扁、不准變形！ */
    }
}

/* ==========================================================================
   🛠️ 師父純 CSS 鐵腕重灌：保障大弟子原裝 JS 鏈路，手機端極限降維與按鈕晶瑩化
   ========================================================================== */
@media (max-width: 768px) {

    /* 🚀 1. 磨砂卡片整體安全防護：溢出剪裁 */
    .journey-form-card {
        overflow: hidden !important;
        position: relative !important;
        width: 90% !important;
        max-width: 400px !important;
        margin: 20px auto 30px auto !important;
        padding: 24px 16px !important;
        box-sizing: border-box !important;
    }

    /* 🚀 2. 行軌道大清洗：在手機端將萬惡的橫向 .flex-row-align 一秒解體變垂直排列！ */
    .node-input-row .flex-row-align {
        display: flex !important;
        flex-direction: column !important; /* 💥 核心：手機端瞬間變為直列！ */
        align-items: stretch !important;
        gap: 12px !important;              /* 元件與元件之間的垂直透氣空隙 */
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* 讓每天的軌道行在手機端具備獨立的微磨砂底色，增加區隔感 */
    .node-input-row {
        background: rgba(15, 20, 50, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 14px !important;
        padding: 18px 14px !important;
        height: auto !important;
    }

    /* 🚀 3. 序號徽章與 Day 標籤在垂直模式下靠左，體積收細 */
    .node-input-row .node-index {
        align-self: flex-start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
        font-size: 0.8rem !important;
        background: rgba(45, 53, 97, 0.6) !important;
        border: 1px solid rgba(100, 150, 200, 0.3) !important;
        border-radius: 50% !important;
        color: var(--dawn-gold) !important;
    }

    .node-input-row span[style*="min-width: 55px"] {
        display: block !important;
        min-width: auto !important;
        font-size: 0.85rem !important;
        margin-top: -4px !important;
        margin-bottom: 2px !important;
    }

    /* 🚀 4. 【字體縮細與橫向防破防線】：鎖死所有輸入框和下拉選單在手機端的最大寬度 */
    .node-country-select,
    .autocomplete-wrapper-region,
    .autocomplete-wrapper,
    .node-region-input,
    .node-place-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important; /* 撤銷電腦版的比例調配 */
        box-sizing: border-box !important;
        
        font-size: 0.85rem !important; /* 🎯 字體與欄位精細化縮細！ */
        height: 38px !important;
        background: rgba(10, 14, 39, 0.7) !important;
        border: 1px solid rgba(135, 206, 250, 0.25) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
    }

    /* 🚀 5. 終極美修手機端按鈕：把原本粗糙的大色塊，蛻變為精緻嘅晶瑩玻璃擬態薄片！ */
    
    /* 綠色加號按鈕精修 */
    .node-input-row .btn-add-subnode,
    .btn-add-subnode {
        width: 100% !important;
        height: 38px !important;
        background: rgba(46, 204, 113, 0.08) !important; /* 輕薄半透明綠 */
        border: 1px solid rgba(46, 204, 113, 0.35) !important;
        color: #2ecc71 !important;
        border-radius: 8px !important;
        font-size: 1.1rem !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* 紅色減號/刪除按鈕精修 */
    .node-input-row .btn-delete-subnode,
    .node-input-row .btn-remove-node,
    div[class*="sub-node"] button,
    .sub-nodes-container button {
        width: 100% !important;
        height: 38px !important;
        background: rgba(231, 76, 60, 0.06) !important; /* 輕薄半透明紅 */
        border: 1px solid rgba(231, 76, 60, 0.25) !important;
        color: #e74c3c !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* 🚀 6. 座標狀態標籤與錯誤提示手機端安全約束 */
    .node-input-row .geo-tag {
        text-align: left !important;
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace !important;
        font-size: 0.72rem !important;
        color: rgba(255, 255, 255, 0.45) !important;
        margin-top: 4px !important;
    }

    .node-error-tip {
        margin-left: 0 !important; /* 拿掉手機端不合適的左邊距 */
        padding: 0 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   🛠️ 師父鐵腕重灌：手機端 (max-width: 768px) 序號置中與加號掣晶瑩瘦身案
   ========================================================================== */
@media (max-width: 768px) {

    /* 🎯 修正 1：徹底根除手機端「1」字序號圓圈歪斜、偏心殘影 */
    .node-input-row .node-index,
    .main-timeline-row .node-index {
        position: static !important;        /* 割除萬惡嘅絕對定位，讓它回歸常態流 */
        display: inline-flex !important;    /* 激活高維彈性盒子 */
        align-items: center !important;     /* 垂直硬性對齊中軸線 */
        justify-content: center !important;  /* 水平絕對幾何置中 */
        
        width: 24px !important;             /* 手機端精修黃金尺寸 */
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        
        background: rgba(45, 53, 97, 0.7) !important; /* 滿血還原高貴磨砂夜藍 */
        border: 1px solid rgba(135, 206, 250, 0.3) !important;
        border-radius: 50% !important;       /* 強制死鎖成完美正圓形殼 */
        
        color: var(--dawn-gold) !important;
        font-size: 0.85rem !important;      /* 微調字體，確保數字在圓圈內完美透氣 */
        font-weight: 700 !important;
        line-height: 1 !important;          /* 閹割一切行高造成的上下位移 */
        padding: 0 !important;              /* 清理任何內邊距走私 */
        margin: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    /* 🚀 修正 2：將全寬長條化嘅綠色「+」號掣進行物理「縮骨降維」 */
    .node-input-row .btn-add-subnode,
    .btn-add-subnode {
        width: 100% !important;             /* 遵從手機版單欄 100% 撐滿基因 */
        max-width: 100% !important;
        height: 34px !important;            /* 🎯 核心縮骨：由電腦版 40px 狠狠剪裁落 34px，防範高度臃腫 */
        min-height: 34px !important;
        
        display: flex !important;           /* 塊級 Flex 部署 */
        align-items: center !important;     /* 斬殺垂直高度突起 */
        justify-content: center !important;  /* 符號中軸絕對置中 */
        
        background: rgba(46, 204, 113, 0.06) !important; /* 降低高光亮度，消滅巨大化錯覺 */
        border: 1px solid rgba(46, 204, 113, 0.25) !important; /* 精細化微光邊框 */
        color: #2ecc71 !important;
        border-radius: 6px !important;      /* 收緊圓角，契合精修模型 */
        
        font-size: 1rem !important;         /* 適度縮小符號字體，防止文字過度刺眼 */
        font-weight: 500 !important;
        padding: 0 !important;              /* 徹底粉碎原生 Padding 頂爆黑洞 */
        margin: 6px 0 0 0 !important;       /* 幫頂部留出 6px 嘅黃金透氣間距，絕不撞車 */
        box-sizing: border-box !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        transition: all 0.2s ease-in-out !important;
    }

    /* 手機端 Hover/觸控微光回應 */
    .node-input-row .btn-add-subnode:active,
    .btn-add-subnode:active {
        background: rgba(46, 204, 113, 0.15) !important;
        transform: scale(0.99) !important;  /* 注入絲滑按壓沉降感 */
    }

    /* 🎯 補強：手機端「↳ 軌跡裂變」子地點裝飾線精密對齊 */
    .sub-node-row {
        display: block !important;
        padding-left: 0 !important;        /* 清理舊殘留縮進 */
        margin-top: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   🎯 師父終極定錨：將手機端 Autocomplete 建議清單強行「磁吸」貼回輸入框底部
   ========================================================================== */
@media (max-width: 768px) {

    /* 🛡️ 核心防禦：為輸入框外殼強制灌入相對定位，作為清單定位的「地基」 */
    .autocomplete-wrapper,
    .autocomplete-wrapper-region {
        position: relative !important; /* 🌟 鋼鐵鐵律：給予 absolute 兒子一個合法的物理地基！ */
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 🛡️ 空間壓縮：確保輸入框本身乾乾淨淨，不留多餘的行內間距干擾計算 */
    .node-place-input,
    .node-region-input {
        position: relative !important;
        margin-top: 8px !important;    /* 保持欄位與欄位之間順滑的 8px 呼吸位 */
        margin-bottom: 0 !important;   /* 底部必須歸零，防止清單被往下推開 */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 🎯 磁吸鎖定：強行逼使彈出來的下拉清單，垂直貼緊在輸入框的下邊緣 */
    .search-suggestions,
    .region-suggestions-row {
        position: absolute !important;  /* 絕對定位 */
        
        /* 🔥 先知預判：因為輸入框設了 margin-top: 8px，所以清單頂部要扣除地心引力，
           直接給 top: 100% 或者精確坐標，將佢由半空扯返落黎！ */
        top: 100% !important;           
        left: 0 !important;
        width: 100% !important;         /* 寬度死死鎖定，跟輸入框一字不差一樣闊 */
        
        /* 🎨 空靈感防禦美學：確保清單浮在所有組件最上層，唔會被後面的元件吞噬 */
        z-index: 9999 !important;       
        
        /* 保底微調：稍微向上微調 2px，等佢無縫吻合輸入框底邊 */
        margin-top: -2px !important;    
        
        /* 視覺優化：深邃玻璃擬態底色，防止文字與背景重疊肉酸 */
        background: #1e234b !important; 
        border: 1px solid rgba(135, 206, 250, 0.4) !important;
        border-radius: 0 0 8px 8px !important; /* 下方圓角優化 */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   🛠️ 師父鐵腕重灌：雙時空長廊手機端智慧型橫向滾動 (mobile_style.css)
   ========================================================================== */
@media (max-width: 768px) {

    /* 🎯 1. 頂部「🗺️ 旅程大氣時空長廊總覽」父容器網格降維與磁吸解鎖 */
    .macro-weather-strip .macro-grid-container {
        display: flex !important;           /* 💥 斬殺固定 Grid 基因，換上流暢 Flexbox */
        flex-direction: row !important;     /* 保持橫向一排 */
        flex-wrap: nowrap !important;       /* 🌟 鋼鐵鐵律：最高權限絕對禁止換行扭曲！ */
        overflow-x: auto !important;        /* 激活橫向智慧型滾動條 */
        overflow-y: hidden !important;
        gap: 0 !important;
        width: 100% !important;
        padding-bottom: 12px !important;    /* 留出底部分流透氣位 */
        
        /* 注入 iOS/Android 原生極致順滑手勢滾動 */
        id: neverland-smooth-scroll;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;     /* 磁吸式滾動定錨 */
    }

    /* 🎯 2. 頂部大氣長廊單個「直式流線柱體」物理縮骨約束 */
    .macro-weather-strip .macro-day-card {
        flex: 0 0 130px !important;         /* 🌟 核心天機：鎖死每條柱體寬度為 130px，拒絕被擠壓變形！ */
        min-width: 130px !important;
        max-width: 130px !important;
        border-right: 1px dashed rgba(255, 255, 255, 0.08) !important; /* 補回時空分隔虛線 */
        box-sizing: border-box !important;
        scroll-snap-align: start;          /* 滾動停止時自動對齊邊界 */
    }

    /* 🎯 3. 下方「✦ 未來 7 日時空長廊趨勢」父容器（#seven-days-grid）智慧同步 */
    #seven-days-grid {
        display: flex !important;           /* 解除死板 grid */
        flex-direction: row !important;
        flex-wrap: nowrap !important;       /* 雙重鎖死不准換行 */
        overflow-x: auto !important;        /* 激活橫向滾動 */
        overflow-y: hidden !important;
        gap: 12px !important;               /* 方塊之間的空靈呼吸感 */
        width: 100% !important;
        padding-bottom: 12px !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    /* 🎯 4. 下方未來 7 日單個磨砂小卡片物理鎖寬 */
    #seven-days-grid .card {
        flex: 0 0 120px !important;         /* 鎖死小卡片寬度為 120px，拒絕肥胖扭曲 */
        min-width: 120px !important;
        max-width: 120px !important;
        padding: 18px 10px !important;       /* 緊湊內部內邊距 */
        box-sizing: border-box !important;
        scroll-snap-align: start;
    }

    /* ==========================================================================
       🔮 終極視覺魔法：物理消滅所有手機端肉酸、粗糙嘅原生 Scrollbar 滾動條
       ========================================================================== */
    .macro-weather-strip .macro-grid-container::-webkit-scrollbar,
    #seven-days-grid::-webkit-scrollbar {
        display: none !important;           /* 💥 Safari, Chrome, Opera 完美隱形 */
        width: 0 !important;
        height: 0 !important;
    }
    
    .macro-weather-strip .macro-grid-container,
    #seven-days-grid {
        -ms-overflow-style: none !important;  /* IE and Edge */
        scrollbar-width: none !important;     /* Firefox */
    }

    /* 微調：長廊內部極長字體的極限低調化，防止大字體撐破薄片 */
    .macro-place-line {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;      /* 容許直列柱體內部的極長字數優雅折行 */
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;   /* 超過三行全自動化為優雅的省略號 ... */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

/* ==========================================================================
   🔮 師父鐵腕超渡：觀測站主面板 (current-station-panel) 手機端美學重灌
   ========================================================================== */
@media (max-width: 768px) {

    /* 🎯 1. 主磨砂玻璃大容器：縮減手機端過度空曠的內邊距，提升緊湊感 */
    #current-station-panel {
        padding: 25px 18px !important;    /* 由 45px 降為緊湊的 18px，防止手機畫面被吃光 */
        border-radius: 18px !important;
    }

    /* 🎯 2. 頂部控制列父容器：由橫排強制降維成直排（Vertical Stack） */
    #current-station-panel > div:first-child {
        flex-direction: column !important; /* 斬殺橫排，直行排列 */
        align-items: stretch !important;   /* 撐滿寬度 */
        gap: 15px !important;              /* 釋放上下呼吸感 */
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        padding-bottom: 20px !important;
        margin-bottom: 25px !important;
    }

    /* 🎯 3. 標題與包含集群區域：文字靠左，防止在手機端居中顯得不倫不類 */
    #current-station-panel > div:first-child > div:first-child {
        text-align: left !important;
    }
    #station-name {
        font-size: 1.4rem !important;      /* 稍微收斂標題字體 */
    }

    /* 🎯 4. 按鈕與日期右側區域：粉碎疊羅漢！改成橫向平鋪、智慧換行，按鈕均分寬度 */
    #current-station-panel > div:first-child > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;        /* 容許在極小螢幕下安全折行 */
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: left !important;
        width: 100% !important;
    }

    /* 讓按鈕在手機端更有存在感，字體微調 */
    #btn-edit-journey, #btn-share-journey {
        flex: 1 1 auto !important;         /* 智慧伸縮 */
        padding: 10px 14px !important;     /* 手機端更易點擊的肥美度 */
        font-size: 0.78rem !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* 日期標籤：強制打破右靠攏，在手機端優雅平鋪 */
    #station-date {
        width: 100% !important;            /* 日期獨佔一行，成為完美底座 */
        text-align: center !important;
        box-sizing: border-box !important;
        margin-top: 5px !important;
    }

    /* 🎯 5. 中間核心氣象大網格：徹底粉碎 1fr 1.8fr 左右夾擊，改成直列上下佈局！ */
    #current-station-panel > div:nth-child(2) {
        display: flex !important;
        flex-direction: column !important; /* 太陽在上，卡片在下 */
        gap: 30px !important;              /* 留出神聖的時空呼吸感 */
        align-items: stretch !important;
    }

    /* 左側大天氣區塊：解除右邊框分隔虛線，改為底部精緻虛線，並居中對齊 */
    #current-station-panel > div:nth-child(2) > div:first-child {
        border-right: none !important;     /* 拿掉左右分割線，因為已經變成上下排 */
        border-bottom: 1px dashed rgba(255,255,255,0.08) !important; /* 換成優雅的下劃虛線 */
        padding-right: 0 !important;
        padding-bottom: 25px !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    #station-weather-icon {
        font-size: 4.8rem !important;      /* 稍微縮小，避免在手機端喧賓奪主 */
    }
    #station-temp {
        font-size: 3.8rem !important;
        margin: 10px 0 5px 0 !important;
    }

    /* ==========================================================================
       🎯 6. 右側 4 格數據小卡片：斬殺 2x2 窒息網格，重鑄為 100% 流線型橫向玻璃面板
       ========================================================================== */
    #current-station-panel > div:nth-child(2) > div:last-child {
        display: flex !important;
        flex-direction: column !important; /* 💥 解除 2 欄並排！改為由上至下垂直平鋪 */
        gap: 12px !important;              /* 方塊之間的流暢時空空隙 */
        width: 100% !important;
    }

    /* 將每個小卡片改造成高級的「橫向流線型兩翼對齊」佈局 */
    #current-station-panel > div:nth-child(2) > div:last-child .card {
        display: flex !important;
        flex-direction: row !important;    /* 橫向平鋪：左邊文字，右邊數值 */
        justify-content: space-between !important; /* 兩翼極限拉開，釋放中央大片留白 */
        align-items: center !important;    /* 垂直居中對齊 */
        padding: 18px 20px !important;     /* 肥美的按壓感內邊距 */
        background: rgba(10, 14, 39, 0.35) !important; /* 稍稍加深背景，增強磨砂質感 */
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 16px !important;    /* 圓潤天衣無縫 */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 左側：大氣學名與圖示 */
    #current-station-panel > div:nth-child(2) > div:last-child .card div:first-child {
        font-size: 0.88rem !important;     /* 🚀 放大字體！大氣學名獨享左翼 */
        color: rgba(255, 255, 255, 0.75) !important;
        font-family: ui-sans-serif, system-ui, sans-serif;
        letter-spacing: 0.8px !important;
        margin-bottom: 0 !important;       /* 拔除原本向下壓的盲腸 margin */
        white-space: nowrap !important;    /* 🌟 鋼鐵鐵律：神聖不可侵犯，絕對禁止折行！ */
    }
    
    /* 右側：觀測數值 */
    #current-station-panel > div:nth-child(2) > div:last-child .card div:last-child {
        font-size: 1.35rem !important;     /* 🚀 放大數值！讓數據在右翼傲然挺立 */
        font-weight: 700 !important;
        font-family: ui-sans-serif, system-ui, sans-serif;
        letter-spacing: -0.5px !important;
        text-align: right !important;
        white-space: nowrap !important;    /* 絕對不換行 */
    }
}

/* ==========================================================================
   🎯 師父賠罪終極重灌：24 小時微觀時空觀測卡 (#hourly-cards-grid) 手機端橫向智慧滾動
   ========================================================================== */
@media (max-width: 768px) {

    /* 🛡️ 核心解鎖：斬殺死板 4 欄並排網格，重鑄為流暢橫向 Flex 軌道 */
    #hourly-cards-grid {
        display: flex !important;           /* 💥 徹底解鎖 grid 枷鎖，換上 Flexbox */
        flex-direction: row !important;     /* 保持橫向一排 */
        flex-wrap: nowrap !important;       /* 🌟 鋼鐵鐵律：最高權限絕對禁止折行扭曲！ */
        overflow-x: auto !important;        /* 激活橫向智慧型滾動 */
        overflow-y: hidden !important;
        gap: 12px !important;               /* 卡片之間的完美空靈呼吸間距 */
        width: 100% !important;
        padding-bottom: 12px !important;    /* 留出底部分流透氣位 */
        
        /* 注入 iOS/Android 原生極致順滑手勢滾動 */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;     /* 磁吸式滾動定錨 */
    }

    /* 🛡️ 物理鎖骨：為 24 小時微觀小卡片強行注入神聖物理防線 */
    #hourly-cards-grid .card {
        flex: 0 0 115px !important;         /* 🌟 核心天機：鎖死每格卡片寬度為 115px，拒絕被擠壓變形！ */
        min-width: 115px !important;
        max-width: 115px !important;
        padding: 16px 10px !important;       /* 瘦身內部內邊距，留出更多透氣空間 */
        box-sizing: border-box !important;
        scroll-snap-align: start;          /* 滾動停止時自動對齊邊界 */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 微調卡片內部元件，防止字體過大頂爆盒子 */
    #hourly-cards-grid .card div:first-child {
        font-size: 0.72rem !important;      /* 時間標籤（如 03:00 凌晨）微調 */
        white-space: nowrap !important;
    }
    #hourly-cards-grid .card div:nth-child(2) {
        font-size: 1.8rem !important;       /* 天氣圖示（如 🌧️）大小微調 */
        margin: 5px 0 !important;
    }
    #hourly-cards-grid .card div:nth-child(3) {
        font-size: 1.1rem !important;       /* 溫度字體（如 22°C）精修 */
    }

    /* 🎯 徹底粉碎「濕度: 82%」原地折行扭曲之異相 */
    #hourly-cards-grid .card div:last-child {
        font-size: 0.7rem !important;       /* 縮細底部濕度字體 */
        padding: 2px 6px !important;
        letter-spacing: 0em !important;     /* 字距拉緊 */
        white-space: nowrap !important;    /* 🌟 強制鎖死：絕對保持橫向一排，不准垂直折行！ */
    }

    /* ==========================================================================
       🔮 終極視覺隱形：物理消滅 24 小時觀測卡手機端肉酸、粗糙嘅原生 Scrollbar
       ========================================================================== */
    #hourly-cards-grid::-webkit-scrollbar {
        display: none !important;           /* 💥 Safari, Chrome, Opera 完美隱形 */
        width: 0 !important;
        height: 0 !important;
    }
    
    #hourly-cards-grid {
        -ms-overflow-style: none !important;  /* IE and Edge */
        scrollbar-width: none !important;     /* Firefox */
    }
}

/* ==========================================================================
   ✦ NEverland — 手機版（≤ 768px）專屬修正區塊 ✦
   ────────────────────────────────────────────────────────────
   修正 1：靜態閃爍星星只分布喺手機版上半部（避免散落落山體 / 海面）
   修正 2：六大功能區塊（cards-grid / features-grid）唔再貼住左右邊界
   ========================================================================== */

@media (max-width: 768px) {

    /* ───── 修正 1：靜態星星只分布上半部 ───── */
    /* 策略：
       (a) 收窄 .shooting-stars 容器高度由 70% 降至 45%
           → 即使 JS 隨機散落 .star，都會物理被限制喺上半屏
       (b) 加埋 mask-image 由上至下漸隱
           → 接近底部嘅星星都會優雅淡出，唔會有「硬切邊」嘅感覺
    */
    .shooting-stars {
        height: 45% !important;
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 60%,
            rgba(0, 0, 0, 0.5) 85%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 60%,
            rgba(0, 0, 0, 0.5) 85%,
            transparent 100%
        );
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

    /* 流星亦同步收窄活動範圍，唔好突然從海面射出嚟 */
    .shooting-star {
        max-height: 40vh;
    }

    /* ───── 修正 2：六大功能區塊唔再貼邊 ───── */
    /* 策略：
       (a) 主容器 .container 嘅 padding 由 60px 縮到 20px（合理嘅手機留白）
       (b) .cards-grid / .features-grid 額外再加 10px 嘅左右 padding 作為雙重保險
       (c) 三欄並排強制改為單欄堆疊（手機唔可能塞三張卡）
    */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 90px !important;
    }

    .cards-grid,
    .features-grid {
        grid-template-columns: 1fr !important;  /* 手機單欄排列 */
        gap: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    /* 卡片本身內距亦稍微收窄，避免文字頂到玻璃邊框 */
    .cards-grid .card,
    .features-grid .card {
        padding: 30px 25px !important;
    }
}

/* ───── 超細螢幕（≤ 380px，例如 iPhone SE）再細微補強 ───── */
@media (max-width: 380px) {
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .cards-grid,
    .features-grid {
        padding-left: 4px !important;
        padding-right: 4px !important;
        gap: 16px !important;
    }
}