/* ==========================================================================
   NEverland - 全局通用、動態背景特效與電腦版核心樣式 (style.css)
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --night-deep: #0a0e27;
    --night-blue: #1a1f4d;
    --night-purple: #2d3561;
    --dawn-gold: #f5e6c8;
    --dawn-orange: #ff9a76;
    --sunrise-orange: #ff8c42;
    --ocean-deep: #0d1b2a;
    --ocean-blue: #1b263b;
    --card-bg: rgba(30, 35, 75, 0.4);
    --card-border-light: rgba(100, 150, 200, 0.25);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
}

body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    background: transparent;
    color: var(--text-primary);
}

/* 夜空到海洋嘅渐变背景 */
.sky-ocean-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        var(--night-deep) 0%,
        var(--night-blue) 25%,
        var(--night-purple) 45%,
        var(--ocean-blue) 70%,
        var(--ocean-deep) 100%
    );
    z-index: -4;
}

/* 黎明光芒（在山後面）*/
.dawn-glow {
    position: fixed;
    bottom: 26%;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 120px;
    background: radial-gradient(
        ellipse at center,
        rgba(245, 230, 200, 0.7) 0%,
        rgba(255, 216, 155, 0.4) 40%,
        rgba(255, 154, 118, 0.2) 60%,
        transparent 80%
    );
    filter: blur(30px);
    z-index: -3;
    animation: dawnPulse 5s ease-in-out infinite;
}

@keyframes dawnPulse {
    0%, 100% { 
        opacity: 0.5; 
        transform: translateX(-50%) scale(0.95); 
    }
    50% { 
        opacity: 0.8; 
        transform: translateX(-50%) scale(1.05); 
    }
}

/* 神聖光線系統 */
.god-rays {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.ray-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 100%;
    background: 
        radial-gradient(ellipse 30% 80% at 50% 100%, 
            rgba(255, 140, 66, 0.6) 0%, 
            rgba(255, 154, 118, 0.3) 30%, 
            transparent 70%),
        radial-gradient(ellipse 20% 60% at 35% 100%, 
            rgba(245, 230, 200, 0.5) 0%, 
            rgba(255, 216, 155, 0.2) 40%, 
            transparent 70%),
        radial-gradient(ellipse 20% 60% at 65% 100%, 
            rgba(255, 140, 66, 0.5) 0%, 
            rgba(255, 154, 118, 0.2) 40%, 
            transparent 70%),
        radial-gradient(ellipse 15% 40% at 50% 100%, 
            rgba(255, 230, 200, 0.8) 0%, 
            rgba(255, 216, 155, 0.4) 30%, 
            transparent 70%);
    filter: blur(20px);
    will-change: opacity, transform;
}

.ray-layer-2 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 80%;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 216, 155, 0.15) 5%,
            transparent 10%,
            rgba(255, 140, 66, 0.1) 15%,
            transparent 20%
        );
    filter: blur(15px);
    will-change: transform;
}

.ray-beam {
    position: absolute;
    bottom: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(255, 216, 155, 0.4) 0%,
        rgba(255, 140, 66, 0.2) 50%,
        transparent 100%
    );
    filter: blur(10px);
    will-change: opacity, transform;
}

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

.ray-beam:nth-child(4) {
    left: calc(50% - 80px);
    height: 100%;
    opacity: 0.7;
}

.ray-beam:nth-child(5) {
    left: calc(50% + 80px);
    height: 95%;
    opacity: 0.8;
}

.ray-beam:nth-child(6) {
    left: calc(50% + 200px);
    height: 85%;
    opacity: 0.6;
}

.glow-overlay {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 60%;
    background: radial-gradient(
        ellipse at center bottom,
        rgba(255, 140, 66, 0.4) 0%,
        rgba(255, 154, 118, 0.2) 30%,
        transparent 70%
    );
    filter: blur(40px);
    will-change: opacity;
}

/* 地平線 */
.horizon {
    position: fixed;
    bottom: 30%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 216, 155, 0.5) 50%,
        transparent 100%
    );
    z-index: -2;
    box-shadow: 0 0 30px rgba(255, 216, 155, 0.8);
}

/* 群山剪影 */
.mountains {
    position: fixed;
    bottom: 28%;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: -2;
    overflow: hidden;
}

.mountain {
    position: absolute;
    bottom: 0;
    background: linear-gradient(
        180deg,
        #1a1f3a 0%,
        #0f1428 100%
    ) !important;

    /* 🎯 【核心修正】強行鎖死不透明度為 1，徹底消滅 Google AI 留下的半透明詛咒 */
    opacity: 1.0 !important;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    will-change: transform;
}

/* 確保所有獨立山體都繼承 100% 不透明度 */
.mountain:nth-child(1),
.mountain:nth-child(2),
.mountain:nth-child(3),
.mountain:nth-child(4) {
    opacity: 1.0 !important;
}

.mountain:nth-child(1) {
    left: -10%;
    width: 40%;
    height: 120px;
    opacity: 0.8;
}

.mountain:nth-child(2) {
    left: 25%;
    width: 35%;
    height: 100px;
    opacity: 0.7;
}

.mountain:nth-child(3) {
    left: 55%;
    width: 45%;
    height: 130px;
    opacity: 0.85;
}

.mountain:nth-child(4) {
    left: 90%;
    width: 30%;
    height: 90px;
    opacity: 0.6;
}

/* 海洋 */
.ocean {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(
        180deg,
        var(--ocean-blue) 0%,
        var(--ocean-deep) 100%
    );
    z-index: -2;
    overflow: hidden;
}

/* 浪花 */
.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,120 350,0 600,60 C850,120 1050,0 1200,60 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");
    background-size: 50% 100%;
    animation: waveMove 10s linear infinite;
    opacity: 0.6;
}

.wave:nth-child(2) {
    bottom: 10px;
    animation: waveMove 8s linear infinite reverse;
    opacity: 0.4;
}

.wave:nth-child(3) {
    bottom: 20px;
    animation: waveMove 12s linear infinite;
    opacity: 0.3;
}

@keyframes waveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 晨光倒影 */
.dawn-reflection {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 216, 155, 0.5) 0%,
        rgba(255, 216, 155, 0.15) 50%,
        transparent 100%
    );
    filter: blur(10px);
    animation: reflectionShimmer 3s ease-in-out infinite;
}

@keyframes reflectionShimmer {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 流星系統 */
.shooting-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    z-index: -1;
    pointer-events: none;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 0 0 10px white, 0 0 20px var(--dawn-gold);
    animation: twinkle 3s infinite;
}

.shooting-star {
    position: absolute;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, white, transparent);
    opacity: 0;
    transform: rotate(-45deg);
    animation: shooting 3s infinite;
}

/* 🎯 修正流星核：將原本 right: -2px 移去 left: -2px，確保超強發光核心完美黏在最前面的頭部 */
.shooting-star::after {
    content: '';
    position: absolute;
    left: -2px; /* 👈 核心定錨在最左邊的頭部 */
    top: -1.2px;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        0 0 10px 2px rgba(255,255,255,0.95), 
        0 0 20px 4px rgba(210,220,250,0.6), 
        0 0 30px 8px rgba(170,190,240,0.3) !important;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes shooting {
    0% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: translateX(-300px) translateY(300px) rotate(-45deg);
    }
}

/* 導航欄 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 30px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: linear-gradient(180deg, rgba(10, 14, 39, 0.8) 0%, transparent 100%);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.logo:hover {
    color: var(--dawn-gold);
}

.moon-icon {
    font-size: 1.4rem;
    color: var(--dawn-gold);
    animation: moonGlow 4s ease-in-out infinite;
}

@keyframes moonGlow {
    0%, 100% { 
        opacity: 0.8; 
        text-shadow: 0 0 10px rgba(245, 230, 200, 0.3);
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 20px rgba(245, 230, 200, 0.6);
    }
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--dawn-gold);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--dawn-gold);
}

.nav-links a:hover::after {
    width: 100%;
}

/* 主容器 */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 60px 0 60px;
    position: relative;
    z-index: 1;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 150px 0 120px;
    position: relative;
}

.welcome-text {
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    color: var(--text-muted);
    margin-bottom: 50px;
    text-transform: uppercase;
    font-weight: 400;
}

.hero h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 7rem;
    margin-bottom: 30px;
    letter-spacing: 0.02em;
    font-weight: 400;
    line-height: 1;
}

.hero h1 .ne {
    color: var(--dawn-gold);
    text-shadow: 0 0 60px rgba(245, 230, 200, 0.4);
}

.hero h1 .verland {
    color: var(--text-primary);
}

.chinese-subtitle {
    font-size: 0.95rem;
    letter-spacing: 0.3em;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 300;
}

.english-subtitle {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.english-subtitle .and {
    color: var(--text-muted);
    font-style: normal;
}

.three-places {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 60px;
}

.place-item {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    font-weight: 300;
}

.diamond {
    color: var(--text-muted);
    font-size: 0.6rem;
    opacity: 0.6;
}

.curated-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px 0;
}

.curated-section::before,
.curated-section::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
}

.curated-section::before {
    right: calc(50% + 120px);
}

.curated-section::after {
    left: calc(50% + 120px);
}

.curated-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.curated-text .neverne {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

.scroll-indicator {
    margin-top: 80px;
    font-size: 0.6rem;
    letter-spacing: 0.7em;
    color: var(--text-muted);
    text-transform: uppercase;
    animation: bounce 4s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Islands Section */
.islands-section {
    padding: 150px 0;
}

.section-label {
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.first-light-section .section-label {
    color: var(--dawn-gold);
    text-shadow: 0 0 20px rgba(245, 230, 200, 0.3);
}

.section-title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 300;
    letter-spacing: 0.1em;
}

.section-title strong {
    font-weight: 500;
}

.section-description {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 80px;
    line-height: 1.8;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 0 auto 150px auto; /* 👈 確保網格自身也處於置中狀態 */
    max-width: 1200px;         /* 👈 【核心黃金比例】讓卡片網格比主容器稍微收窄，留出兩邊最完美的透氣安全區 */
    width: 100%;
}

.card {
    display: flex;                  /* 👈 核心：開啟 Flexbox 佈局 */
    flex-direction: column;         /* 👈 核心：設定元件由上至下垂直排列 */
    text-decoration: none; 
    color: var(--text-primary); 
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px 35px;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer; 
}

.card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, 
        var(--card-border-light) 0%, 
        rgba(80, 120, 180, 0.15) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.card:hover::before {
    opacity: 1;
}

/* 卡片背景呼吸感/反光效果 */
.card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, 
        rgba(245, 230, 200, 0.25) 0%, 
        rgba(255, 255, 255, 0.1) 30%,
        transparent 70%);
    opacity: 0;
    animation: cardShimmer 10s ease-in-out infinite;
    pointer-events: none;
    border-radius: 16px;
    z-index: 2; 
}

.card:hover::after {
    opacity: 0.4 !important;
    animation: none;
}

@keyframes cardShimmer {
    0%, 100% { opacity: 0.02; transform: scale(0.98); }
    50% { opacity: 0.18; transform: scale(1.02); } 
}

.card:hover {
    border-color: rgba(245, 230, 200, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.card-icon {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.card:hover .card-icon {
    border-color: rgba(245, 230, 200, 0.4);
    transform: scale(1.05);
}

.card-number {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.card-title {
    font-size: 1.4rem;
    margin-bottom: 8px;
    font-weight: 500;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

.card-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.card-description {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.card-link {
    margin-top: auto;           /* 👈 神級魔法：全自動將自己推到卡片最底部 */
    padding-top: 20px;          /* 👈 額外保險：確保文字就算極長，跟上方描述依然有 20px 安全距離 */
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

.card-link:hover {
    color: var(--dawn-gold);
}

.card-link::after {
    content: '→';
    transition: transform 0.3s ease;
}

.card:hover .card-link::after {
    transform: translateX(5px);
}

/* First Light Section */
.first-light-section {
    padding: 100px 0 150px;
    text-align: center;
}

.quote {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3rem;
    line-height: 1.6;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    margin: 40px 0;
    font-style: italic;
}

.quote-source {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.15em;
}

/* Footer */
footer {
    text-align: center;
    padding: 60px 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.fade-in {
    animation: fadeIn 1.2s ease-out;
}

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

/* ==================== 天氣追蹤分頁專屬樣式 ==================== */

/* 返回按鈕佈局 */
.back-nav-container {
    width: 100%;
    max-width: 1200px;
    margin-bottom: 2rem;
}

/* 標題英雄區 */
.weather-hero {
    text-align: center;
    margin-bottom: 4rem;
}

.weather-hero-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: bounce 4s infinite;
}

.weather-page-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.weather-page-subtitle {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    color: var(--dawn-gold);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.weather-page-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* 開始新旅程按鈕 */
.weather-action-bar {
    margin-bottom: 3rem;
    text-align: center;
}

.btn-add-journey {
    background: var(--card-bg);
    border: 1px solid var(--card-border-light);
    color: var(--dawn-gold);
    padding: 1rem 2.5rem;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.btn-add-journey:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 230, 200, 0.4);
    box-shadow: 0 6px 30px rgba(245, 230, 200, 0.15);
}

.plus-icon {
    margin-right: 8px;
    font-weight: bold;
}

/* 主內容左右排版 */
.weather-main-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    padding-top: 20px;
    padding-bottom: 140px; 
}

/* 玻璃擬態大卡片（表單與列表通用） */
.journey-form-card, .journey-list-section {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.form-title, .list-title {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--dawn-gold);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.form-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 表單輸入框樣式 */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.form-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.form-group input, .form-group textarea, .node-input-row input {
    background: rgba(10, 14, 39, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: white;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s;
}

.form-group input:focus, .form-group textarea:focus, .node-input-row input:focus {
    border-color: rgba(245, 230, 200, 0.4);
    box-shadow: 0 0 10px rgba(245, 230, 200, 0.1);
}

.form-group textarea {
    height: 100px;
    resize: none;
}

/* 時空節點連線編輯區 */
.nodes-editor-zone {
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.5rem;
}

.nodes-editor-zone label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 1rem;
}

.nodes-input-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 1.5rem;
}

/* 點對點連線的單行排版 */
.node-input-row {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.node-index {
    width: 24px;
    height: 24px;
    background: var(--night-purple);
    border: 1px solid var(--card-border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--dawn-gold);
}

.node-input-row .input-place { flex: 2; }
.node-input-row .input-date { flex: 1.5; color-scheme: dark; } 

.geo-tag {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    min-width: 100px;
}

/* + 新增節點按鈕 */
.btn-add-node {
    background: transparent;
    border: 1px dashed rgba(245, 230, 200, 0.3);
    color: var(--text-secondary);
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.85rem;
}

.btn-add-node:hover {
    border-color: var(--dawn-gold);
    color: var(--dawn-gold);
    background: rgba(245, 230, 200, 0.02);
}

.btn-save-journey:hover {
    border-color: var(--dawn-gold);
    color: var(--dawn-gold);
    background: rgba(245, 230, 200, 0.02);
}

/* 表單儲存與取消按鈕 */
/* ─── 表單底部按鈕區：整體 Z 軸穿透 ─── */
.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 2.5rem;
    position: relative;
    z-index: 1;
}

/* 確保第三段貨櫃在相對定位時，不會因為邊距擠壓導致遮罩移位 */
.form-section-bottom {
    position: relative;
    width: 100%;
}
.btn-cancel-journey {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text-secondary);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-cancel-journey:hover { background: rgba(255,255,255,0.05); }

.btn-save-journey {
    background: linear-gradient(135deg, var(--night-purple) 0%, #1b263b 100%);
    border: 1px solid var(--dawn-gold);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: transform 0.2s;
}

/* 旅程列表空狀態 */
.empty-state-box {
    text-align: center;
    padding: 60px 0;
}

.empty-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
}

/* 7. Day 下拉選單美化 */
.input-day-select {
    background: rgba(10, 14, 39, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 10px;
    color: var(--dawn-gold);
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    min-width: 60px;
}

/* API 搜尋關鍵字建議選單 */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(15, 20, 50, 0.95);
    border: 1px solid var(--card-border-light);
    border-radius: 8px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}

.suggestion-item {
    padding: 10px 15px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: left;
}

.suggestion-item:hover {
    background: rgba(245, 230, 200, 0.1);
    color: var(--dawn-gold);
}

/* 1. 防止手機滑動時背景動效被 resize 裁切 */
.sky-ocean-bg, .shooting-stars, .ocean, .mountains {
    will-change: transform;
    transform: translate3d(0,0,0); 
}

/* 隱藏下拉選單中不合邏輯的過期 Day（由 JS 動態控制控制） */
.input-day-select option.disabled-day {
    display: none !important;
}

/* 三段式表單鎖定遮罩層 */
.section-lock-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 14, 39, 0.6);
    backdrop-filter: blur(4px);
    z-index: 100;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.section-lock-overlay span {
    background: rgba(30, 35, 75, 0.9);
    border: 1px solid var(--card-border-light);
    color: var(--text-secondary);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

/* 唯讀 Day 標籤 */
.input-day-readonly {
    background: rgba(10, 14, 39, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 12px 5px;
    font-size: 0.9rem;
    outline: none;
}

/* ─── 30. 全局智慧返回按鈕 ─── */
#global-floating-back-btn.back-route-btn {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    display: inline-block;
    background: rgba(25, 30, 65, 0.85) !important;
    border: 1px solid var(--card-border-light) !important;
    color: var(--dawn-gold) !important;
    padding: 12px 24px !important;
    border-radius: 30px !important;
    font-size: 0.9rem !important;
    z-index: 999999 !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
    opacity: 0 !important; 
    animation: backBtnForceFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s forwards !important;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s !important;
}

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

#global-floating-back-btn.back-route-btn:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(245, 230, 200, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 40px rgba(245, 230, 200, 0.25) !important;
}

/* 詳情分頁專屬浮動返回按鈕 */
.detail-page-floating-back-btn {
    position: fixed !important;
    bottom: 40px !important;
    right: 40px !important;
    background: rgba(30, 35, 75, 0.85) !important;
    border: 1px solid rgba(245, 230, 200, 0.3) !important;
    color: var(--dawn-gold) !important;
    padding: 12px 26px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 999999 !important; 
    transition: all 0.3s ease !important;
}

.detail-page-floating-back-btn:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(245, 230, 200, 0.8) !important;
    color: white !important;
    box-shadow: 0 12px 45px rgba(245, 230, 200, 0.25) !important;
}

/* 全毛玻璃區塊全功能點擊穿透與小手圖示 */
.clickable-glass-card {
    cursor: pointer !important;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.clickable-glass-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 230, 200, 0.4) !important;
}

/* 7天長廊小卡片全區小手圖示 */
#seven-days-grid .card {
    cursor: pointer !important;
    transition: all 0.3s ease;
}
#seven-days-grid .card:hover {
    transform: translateY(-3px);
    background: rgba(245, 230, 200, 0.05) !important;
    border-color: var(--dawn-gold) !important;
}

/* ==========================================================================
   NEverland - 開放功能分頁與全局浮動按鈕視覺升級
   ========================================================================== */

/* 1. 物理消滅左上角不合調子的舊外掛返回按鈕 */
/* 根據你 Console 報錯中提到的結構，直接將這個破壞美感的舊框框消滅 */
.back-nav-container, 
a[href="#/weather"] + span,
.container > a:first-child {
    display: none !important;
}

/* 2. 重新約束功能卡片網格 - 完美還原精緻與透氣感 */
.features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 強制變為三欄並排 */
    gap: 30px !important;                             /* 注入 30px 的完美空氣感 */
    max-width: 1200px !important;                     /* 核心：將寬度收窄，不再無限制橫向爆版 */
    margin: 60px auto 0 auto !important;              /* 居中定錨 */
    width: 100% !important;
}

/* 確保開放功能頁面內部的卡片同樣支援 Flex 底部對齊 */
.features-grid .card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 280px !important;                     /* 稍微拉高，令玻璃擬態更有呼吸空間 */
}

.features-grid .card .card-link {
    margin-top: auto !important;                      /* 「進入」一秒定錨鎖死在卡片左下角 */
}

/* 3. 全局智慧返回按鈕激活調教 (取代原有的最高權限阻斷) */
#global-floating-back-btn.back-route-btn {
    opacity: 1 !important;                             /* 解除強行隱形，允許動態顯現 */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   NEverland - 第一版靈魂特效滿血復活庫 (style.css 終極優化)
   ========================================================================== */

/* ─── 1. 右下角浮動按鈕：智慧型分流顯示 ─── */
/* 預設在主頁時（即 container 裡面只有純粹的領域卡片時）將浮動按鈕消滅 */
#global-floating-back-btn.back-route-btn {
    display: none !important;
}
/* 當網頁處於開放功能頁面、或者天氣追蹤分頁時，最高權限強行彈出 */
body:has(.features-grid) #global-floating-back-btn.back-route-btn,
body:has(.weather-main-layout) #global-floating-back-btn.back-route-btn,
body:has(#detail-nodes-track) #global-floating-back-btn.back-route-btn {
    display: inline-flex !important;
}

/* ─── 2. 導航欄「返回」按鈕美化 ─── */
.back-link-nav {
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* 加一條優雅的分隔線 */
}
.back-link-nav:hover {
    color: var(--text-primary) !important;
    text-shadow: 0 0 10px rgba(245, 230, 200, 0.5);
}

/* ─── 第一版月亮精神滿血復活 ─── */
.moon-icon {
    color: #f5e6c8 !important; /* 還原第一版的 text-amber-100 金黃色調 */
    font-size: 1.2rem !important;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-right: 5px;
    /* 注入奢華雙重外發光濾鏡 */
    filter: drop-shadow(0 0 5px rgba(245, 230, 200, 0.8)) drop-shadow(0 0 15px rgba(245, 230, 200, 0.4)) !important;
    animation: moonReflectivePulse 8s ease-in-out infinite !important;
}

@keyframes moonReflectivePulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(245, 230, 200, 0.6)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 12px rgba(245, 230, 200, 0.9)); transform: scale(1.05); }
}

/* ─── 🌞 永無島黎明旭日 - 倒影絕對定錨與光學夾心版 ─── */
.dawn-sun {
    position: fixed; /* 改用 fixed，與地平線及倒影同步定錨 */
    
    /* 🎯 幾何絕對居中：與海面金色倒影 100% 筆直對齊，解決偏右問題 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* 🎯 高度完美下沉：根據你的綠色箭頭，卡在兩山交界的 V 型凹陷正後方 */
    bottom: 30.5vh !important; 
    
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    
    /* 🎯 終極層次消滅遮擋：設定為 -3！高於天際線(-4)，但絕對臣服於神聖光線(-2)與群山(-2)背後 */
    z-index: -3 !important; 
    
    /* 五重神級光暈（融合大氣擴散，讓光芒穿透山體邊緣） */
    box-shadow: 
        0 0 20px 5px #fff,
        0 0 60px 20px rgba(245, 230, 200, 0.85),
        0 0 120px 40px rgba(255, 150, 100, 0.5),
        0 0 200px 70px rgba(138, 180, 248, 0.3),
        0 0 400px 150px rgba(245, 230, 200, 0.15);
        
    animation: sunGlowPulse 12s ease-in-out infinite;
}

/* 🎯 【終極雕鑽解法】在紅框位置精準編織「山谷大氣散射三角形光束」 */
/* ─── 🌞 永無島黎明旭日 - 修正舞台燈 Bug ─── */
.dawn-sun::after {
    content: '';
    position: absolute;
    
    /* 🎯 往下壓低：讓光暈中心緊貼太陽核心 */
    bottom: -10px !important; 
    left: 50%;
    transform: translateX(-50%);
    
    /* 改用寬扁的矩形，橫向擴散 */
    width: 400px !important;
    height: 180px !important;
    
    /* 物理剪裁直接移除，改用純粹的橢圓放射漸變，做出紅框位置的微光邊界 */
    clip-path: none !important;
    
    /* 🎨 核心：由中央高亮，向四周極限羽化 */
    background: radial-gradient(
        ellipse at center bottom,
        rgba(255, 245, 220, 0.35) 0%,   /* 山谷口凝聚的溫柔晨曦 */
        rgba(255, 150, 100, 0.1) 50%,   /* 邊界處的淡淡暖橙 */
        transparent 75%                  /* 優雅隱入夜空，絕不向上衝爆 */
    ) !important;
    
    /* 💨 增強模糊，徹底消滅任何硬邊界 */
    filter: blur(25px) !important;
    mix-blend-mode: screen !important; 
    z-index: 5; /* 確保死死鎖在群山後面 */
    
    pointer-events: none;
    animation: rayAtmospherePulse 12s ease-in-out infinite;
}

/* 太陽呼吸動畫保持原樣 */
@keyframes sunGlowPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        filter: brightness(1);
    }
    50% {
        transform: translateX(-50%) scale(1.04);
        filter: brightness(1.15);
    }
}

/* 🎯 讓神聖光束跟着太陽同步產生大氣折射的流動呼吸感 */
@keyframes rayAtmospherePulse {
    0%, 100% { opacity: 0.8; filter: blur(15px) brightness(1); }
    50% { opacity: 1; filter: blur(12px) brightness(1.2); } /* 能量強時光束更凝聚、更亮 */
}

/* ==========================================================================
   ✦ NEverland UI/UX 家族基因：三段式智慧鎖定與 Hover 黎明金錨點補強 ✦
   ========================================================================== */

/* 1. 全局 Disabled 狀態：統一複製「+ 補充行程節點」虛線款基因 */
input:disabled, select:disabled, textarea:disabled, button:disabled,
[disabled] {
    background: transparent !important;
    border: 1px dashed rgba(255, 255, 255, 0.1) !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 2. Static 狀態次級文字與返回鍵定錨 */
.weather-page-desc, .form-group label, .geo-tag, .card-number {
    color: var(--text-secondary) !important;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

/* 3. Hover 狀態：統一變色為黎明金 #f5e6c8，並帶有平滑底部發光下劃線 */
.btn-add-journey, .btn-save-journey, .btn-cancel-journey, .btn-add-node {
    position: relative;
    overflow: hidden;
}

/* 導航欄與核心操作按鈕底部的 0.3s 平滑延伸發光下劃線 */
.nav-links a::after, .btn-add-journey::after, .btn-save-journey::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dawn-gold), transparent);
    box-shadow: 0 0 10px var(--dawn-gold), 0 0 5px var(--dawn-gold);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover::after, .btn-add-journey:hover::after, .btn-save-journey:hover::after {
    width: 100%;
    left: 0;
}

.nav-links a:hover, .btn-add-journey:hover, .btn-save-journey:hover, .btn-add-node:hover {
    color: var(--dawn-gold) !important;
}

/* 4. 玻璃擬態遮罩與防穿透分層管制 */
.journey-form-card, .journey-list-section {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(8px); /* 嚴格遵守 8px 磨砂定理 */
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 10; /* 前景正中，不准山脈(-2)與太陽(-3)光暈穿透 */
}

/* 三段式智慧鎖定遮罩層優化 */
.section-lock-overlay {
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    background: rgba(10, 14, 39, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.section-lock-overlay span {
    background: rgba(30, 35, 75, 0.95);
    border: 1px solid var(--card-border-light);
    box-shadow: 0 0 20px rgba(245, 230, 200, 0.1);
    color: var(--dawn-gold);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.id-input-container {
    width: 100%;
    position: relative;
}
.input-suggestion-hint {
    width: 100%;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.25); /* 極度低調的暗灰字，富有科技感 */
    font-size: 0.95rem;
    pointer-events: none; /* 🎯 關鍵：滑鼠點擊穿透，不會干擾使用者點選 Input */
    z-index: 1;
    display: block;
}
/* 當 Input 聚焦或裡面有內容時，提示字自動隱藏 */
#journey-id-input:focus + .input-suggestion-hint,
#journey-id-input:not(:placeholder-shown) + .input-suggestion-hint {
    display: none;
}

/* ==========================================================================
   ✦ NEverland 2026 行程資訊區塊美化與自定義提示層 (style.css) ✦
   ========================================================================== */

/* 1. 精緻子區塊佈局 - 行程資訊 */
.form-section-info-block {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.info-grid-2x2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-top: 15px;
}

/* 🎯 修正 2：強行將自定義 ID 框的底色、邊框、寬度與『目的國家』100% 同步 */
.id-input-wrapper {
    position: relative;
    width: 100%;    /* 撐滿貨櫃，與國家欄位筆直對齊 */
}

.id-input-wrapper input {
    position: relative;
    z-index: 2;
    width: 100% !important;
    /* 完美同步全站輸入框的經典磨砂底色與呼吸邊框 */
    background: rgba(10, 14, 39, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: white !important;
}

.id-suggestion-hint {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.25) !important;
    font-size: 0.95rem;
    pointer-events: none; /* 滑鼠穿透，不干擾輸入 */
    z-index: 1;
    transition: opacity 0.25s ease;
}

/* 當輸入框聚焦，或者裡面有打字(不處於placeholder-shown狀態)時，提示自動隱形 */
.id-input-wrapper input:focus + .id-suggestion-hint,
.id-input-wrapper input:not(:placeholder-shown) + .id-suggestion-hint {
    opacity: 0 !important;
}

/* 3. 保底高亮提示項 */
.suggestion-item.fallback-item {
    background: rgba(255, 154, 118, 0.08) !important;
    border-left: 3px solid var(--dawn-orange) !important;
}
.suggestion-item.fallback-item:hover {
    background: rgba(255, 154, 118, 0.15) !important;
}

/* ==========================================================================
   ✦ NEverland 2026 局部樣式修正案：粉碎刺眼 Autofill、還原玻璃藍 Overlay ✦
   ========================================================================== */

/* 🎯 修正 1：用最底層 Webkit 內陰影，強制消滅所有瀏覽器快取 Autofill 刺眼色 */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0px 1000px #101840 inset !important; /* 統一換上深邃玻璃藍底 */
    -webkit-box-shadow: 0 0 0px 1000px #101840 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 🎯 修正 2：大弟子最愛嘅「大批量語意化群組定義法」- 徹底消滅多餘白框與邪修外觀 */
#journey-id, 
#journey-country, 
#journey-region,
.node-input-row .input-place {
    width: 100% !important;
    background: rgba(16, 24, 64, 0.75) !important; /* 溫和不刺眼玻璃藍 */
    border: 1px solid rgba(135, 206, 250, 0.2) !important; /* 撤除原生粗糙白框，換上天空藍微光 */
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    outline: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none !important; /* 🎯 物理消滅圖 3 溢出嘅雙重外白框 */
}

/* 🎯 修正 1：強行提升所有輸入框、下拉選單內置 Placeholder 提示字的能見度 */
#journey-id::placeholder,
#journey-region::placeholder,
.node-input-row .input-place::placeholder {
    color: rgba(255, 255, 255, 0.45) !important; /* 提高灰度亮度，清晰飽滿 */
    opacity: 1 !important;
}

/* 批量定義 Hover 與 Focus 狀態 */
#journey-id:focus, 
#journey-country:focus, 
#journey-region:focus,
.node-input-row .input-place:focus {
    border-color: var(--dawn-gold) !important;
    box-shadow: 0 0 10px rgba(245, 230, 200, 0.25) !important;
}

/* 🎯 修正 3：提升自定義 ID 疊加提示字（Placeholder Hint）的能見度 */
.id-suggestion-hint {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45) !important; /* 提高不透明度，由 0.25 升至 0.45，清晰可見 */
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 1;
}

/* 溫和淡入紅字警告樣式 */
.error-tip-msg {
    color: var(--dawn-orange);
    font-size: 0.8rem;
    margin-top: 5px;
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.node-error-tip {
    color: var(--dawn-orange) !important;
    font-size: 0.75rem !important;
    margin-top: 4px;
    margin-left: 100px; /* 與輸入框筆直對齊 */
    display: none;
    animation: fadeIn 0.25s ease-out;
}

/* 確保下拉選單彈出來的選項不會變白變醜 */
#journey-country option {
    background: #0c1233 !important;
    color: #ffffff !important;
    padding: 10px !important;
}

/* 當區域被停用 (Disabled) 時的暗沉磨砂質感 */
#journey-region:disabled {
    background: rgba(10, 14, 30, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* ==========================================================================
   ✦ NEverland 2026 局部樣式修正：消滅 ID 殘影與強化輸入字體能見度 ✦
   ========================================================================== */

/* 🎯 修正 1：徹底根除自定義 ID 蒙查查、文字重疊的靈異殘影 */
.id-input-wrapper {
    position: relative;
    width: 100%;
}

/* 確保使用者打字時，字體永遠處於最前端 (Z-Index 最高)，顏色純白銳利 */
#journey-id {
    position: relative !important;
    z-index: 5 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* 強化底層提示文字的透明度控制：當輸入框有字或聚焦時，提示字必須 100% 物理隱形，絕對不准干擾白字！ */
#journey-id:focus + .id-suggestion-hint,
#journey-id:not(:placeholder-shown) + .id-suggestion-hint {
    opacity: 0 !important;
    display: none !important;
}

/* 常態下低調的 Placeholder 樣式，確保不蒙 */
#journey-id::placeholder,
.node-place-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    text-shadow: none !important;
}

/* ==========================================================================
   ✦ NEverland 2026 局部樣式修正：行內國家選單玻璃藍化 ✦
   ========================================================================== */

/* 🎯 修正：將每日行內嘅國家選擇下拉框，大批量同步成高貴玻璃藍 */
.node-country-select {
    background: rgba(16, 24, 64, 0.75) !important;
    border: 1px solid rgba(135, 206, 250, 0.2) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    outline: none !important;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s ease-in-out;
}

.node-country-select:focus {
    border-color: var(--dawn-gold) !important;
    box-shadow: 0 0 8px rgba(245, 230, 200, 0.2) !important;
}

/* 確保下拉菜單展開時的選項底色保持深邃夜藍 */
.node-country-select option {
    background: #0c1233 !important;
    color: #ffffff !important;
}

#journey-id::placeholder,
.node-place-input::placeholder,
.node-country-select::placeholder {
    color: rgba(255, 255, 255, 0.75) !important; /* 不透明度由 0.4 大幅提升至 0.75！ */
    font-weight: 400 !important;
}

/* 針對自定義 ID 欄位未輸入時，底層浮動提示字的極限白化 */
.id-suggestion-hint {
    color: rgba(255, 255, 255, 0.35) !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    z-index: 10
}

/* ==========================================================================
   ✦ NEverland 2026 局部樣式修正：單行三位一體平排與子節點裂變 ✦
   ========================================================================== */

/* 🎯 修正 1：每日時空核心軌道 */
.node-input-row {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05) !important;
}

/* 🎯 修正 2：將 序號、Day、國家、區域、地點、加號 筆直拉平排的容器 */
.flex-row-align {
    width: 100%;
    margin-bottom: 8px;
}

/* 🎯 修正 3：精緻的動態補充「＋」號按鈕樣式 */
.btn-add-subnode {
    background: rgba(46, 204, 113, 0.15) !important;
    border: 1px solid rgba(46, 204, 113, 0.4) !important;
    color: #2ecc71 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn-add-subnode:hover {
    background: rgba(46, 204, 113, 0.3) !important;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.4) !important;
    transform: scale(1.05);
}

/* 🎯 修正 4：子地點（同胞裂變行）的精美縮進與左側裝飾線 */
.sub-node-row {
    position: relative;
    padding-left: 115px; /* 完美對齊上方國家欄位的左側起點 */
    margin-top: 6px;
    margin-bottom: 6px;
    animation: fadeIn 0.2s ease-out;
}

/* 裝飾線：讓使用者看出這是屬於同一天的延伸足跡 */
.sub-node-row::before {
    content: "";
    position: absolute;
    left: 95px;
    top: -10px;
    bottom: 15px;
    width: 2px;
    border-left: 2px dashed rgba(135, 206, 250, 0.3);
}

/* ==========================================================================
   ✦ NEverland 2026 Toast 告示系統視覺分流補強 ✦
   ========================================================================== */
#neverland-toast.toast-success {
    border-color: #2ecc71 !important;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.4) !important;
}

#neverland-toast.toast-warning {
    border-color: #ff9a76 !important;
    box-shadow: 0 0 15px rgba(255, 154, 118, 0.4) !important;
}

.flex-row-align {
    position: relative; /* 提供絕對定位錨點 */
}

.region-suggestions {
    position: absolute !important;
    top: 42px !important;
    left: 235px !important; /* 精確懸浮在區域輸入框正下方 */
    width: 120px !important;
    z-index: 9999 !important;
    background: rgba(12, 18, 51, 0.95) !important;
    border: 1px solid rgba(135, 206, 250, 0.2) !important;
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
}

/* ==========================================================================
   ✦ NEverland 縱向流線時空大氣長廊 (Vertical Streamline Columns) ✦
   ========================================================================== */
.macro-weather-strip {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    background: rgba(20, 25, 55, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 25px;
    backdrop-filter: blur(15px);
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.02), 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.macro-strip-title {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--dawn-gold);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(245, 230, 200, 0.3);
}

.macro-grid-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;                /* 🎯 注入呼吸位 */
    width: 100%;
    position: relative;
    padding: 4px;             /* 🎯 給放大效果留邊界緩衝 */
}

/* 物理消滅方框！改為清爽的直式流線柱體 */
.macro-day-card {
    background: transparent;
    border: 1px solid transparent;     /* 🎯 改用透明 border 取代 border-right，hover 切換時冇位移跳格 */
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;                 /* 🎯 z-index 生效前提 */
    z-index: 1;                         /* 🎯 基線層 */
    border-radius: 12px;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* 🎯 用 ::after 偽元素重做時空分隔虛線，唔再佔用 border 屬性 */
.macro-day-card:not(:last-child)::before {
    content: '';
    position: absolute;
    right: -7px;                       /* 喺 gap (14px) 中間 */
    top: 15%;
    bottom: 15%;
    width: 1px;
    border-right: 1px dashed rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

/* 最後一欄不需要右側分隔虛線 */
.macro-grid-container .macro-day-card:last-child {
    border-right: none;
}

/* Hover 時的微光捕捉 */
.macro-day-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    transform: translateY(-2px);
}

.macro-date-zone {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.macro-day-label {
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* 🎯 縱向疊加的核心：允許換行且優雅居中 */
.macro-places-vertical-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin: 8px 0;
    min-height: 50px; /* 留出空間給特種兵行程 */
    justify-content: flex-start;
}

.macro-place-line {
    font-size: 0.75rem;
    color: var(--dawn-gold);
    opacity: 0.85;
    line-height: 1.3;
    word-break: break-all;
    padding: 0 4px;
    text-shadow: 0 0 8px rgba(245, 230, 200, 0.1);
}

.macro-icon-zone {
    font-size: 1.6rem;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.1));
    margin: 4px 0;
}

.macro-temp-bar {
    font-size: 0.85rem;
    font-family: Georgia, serif;
    font-weight: 600;
    color: #ffffff;
    background: rgba(10, 14, 39, 0.5);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    margin-top: auto; /* 逼迫溫度永遠在底部對齊 */
}

/* ==========================================================================
   ✦ NEverland 時空雙向高亮矩陣專屬美學基因 ✦
   ========================================================================== */

/* 頂部城市按鈕被智慧高亮時的金色晨曦邊框 */
.btn-add-journey.clickable-glass-card.active-day-anchor {
    background: rgba(245, 230, 200, 0.18) !important;
    border-color: var(--dawn-gold) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(245, 230, 200, 0.25), inset 0 0 10px rgba(245, 230, 200, 0.1) !important;
}

/* 歷史長廊直欄被動態定錨時的流線極光外殼 */
.macro-day-card.active-strip-column {
    background: rgba(245, 230, 200, 0.08) !important;
    border: 1px solid rgba(245, 230, 200, 0.3) !important;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(245, 230, 200, 0.05);
    transform: translateY(-2px);
}

/* 高亮直欄頂部的日期標記微調 */
.macro-day-card.active-strip-column .macro-date-zone {
    color: var(--dawn-gold) !important;
    font-weight: 500;
}

/* 高亮直欄內部的 Day 標籤微調 */
.macro-day-card.active-strip-column .macro-day-label {
    color: var(--dawn-orange) !important;
    text-shadow: 0 0 8px rgba(255, 154, 118, 0.4);
}

/* ==========================================================================
   ✦ NEverland 底層全景足跡矩陣雷達共振樣式 ✦
   ========================================================================== */

/* 全景卡片的基礎過渡，確保半透明與亮起時有絲滑的淡入淡出 */
.bottom-journey-node-card {
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0 0 20px transparent !important;
    opacity: 1; /* 預設完全不透明 */
}

/* 当大氣長廊激活某天時，底部非當天卡片優雅沉睡、退入夜空背景 */
.bottom-journey-node-card.shrouded-in-night {
    opacity: 0.35 !important;
    filter: grayscale(0.2);
}

/* 🎯 完美對接第 2 點：當天卡片觸發「雷達共振」時的極致奢華高亮 */
.bottom-journey-node-card.active-radar-resonance {
    opacity: 1 !important;
    transform: scale(1.03) translateY(-4px) !important; /* 微幅放大並升起，辨識度拉爆 */
    background: rgba(245, 230, 200, 0.12) !important; /* 注入晨曦微光 */
    border-color: var(--dawn-gold) !important; /* 金色定錨邊框 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 
                0 0 20px 4px rgba(245, 230, 200, 0.2) !important; /* 奢華外發光 */
}

/* 共振卡片內部的 Day 標籤與溫度同步亮起 */
.bottom-journey-node-card.active-radar-resonance [style*="color: #f5e6c8"],
.bottom-journey-node-card.active-radar-resonance .macro-day-label {
    color: var(--dawn-orange) !important;
    text-shadow: 0 0 8px rgba(255, 154, 118, 0.5);
}

/* 讓上下的高亮卡片都擁有奢華金邊與發光背景 */
.macro-day-card.active-strip-column,
.seven-days-weather-card.active-strip-column {
    border: 1px solid var(--dawn-gold) !important;
    background: rgba(245, 230, 200, 0.15) !important;
    box-shadow: 0 0 15px rgba(245, 230, 200, 0.2);
    transform: translateY(-2px) scale(1.02);
    z-index: 20 !important;            /* 🎯 浮起到最頂，唔再被隔籬卡邊界穿過 */
    position: relative;
}

/* ==========================================================================
   ✦ NEverland 海面碎金粒子（Gold Sparkles on the Ocean）✦
   ────────────────────────────────────────────────────────────
   定位策略：浮喺 .dawn-reflection 之上、.wave 之上，但永遠臣服於群山
   不影響：太陽核心、神聖光線、地平線輝光
   ========================================================================== */

/* ==========================================================================
   ✦ NEverland 海面碎金粒子（Gold Sparkles on the Ocean）— Mobile Safe 版 ✦
   ────────────────────────────────────────────────────────────
   修正：mask-image 跨瀏覽器相容（手機 Safari/Android Chrome 不再滿屏散落）
   策略：
     1. mask 改用「最保守」嘅 radial-gradient 寫法（無 ellipse 顯式半徑）
     2. 加上 mask-size / mask-repeat / mask-position 顯式聲明
     3. 提供 ::before 物理收窄做 fallback（即使 mask 全 fail 都唔會爆出光柱範圍）
   ========================================================================== */

.gold-sparkles {
    position: absolute;
    /* 物理收窄：唔再 100% 寬度，而係只佔中央 35% 闊度 */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;

    /* 用最保守嘅 radial-gradient 語法（farthest-side 取代顯式 ellipse 半徑） */
    -webkit-mask-image: radial-gradient(
        farthest-side at 50% 0%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.85) 30%,
        rgba(0, 0, 0, 0.4) 60%,
        transparent 90%
    );
    mask-image: radial-gradient(
        farthest-side at 50% 0%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.85) 30%,
        rgba(0, 0, 0, 0.4) 60%,
        transparent 90%
    );

    /* 顯式聲明，避免 iOS Safari 用奇怪預設值 */
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
}

.gold-fleck {
    position: absolute;
    width: 1.5px;
    height: 1.5px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 2px 0.5px rgba(255, 245, 220, 0.95),
        0 0 4px 1px rgba(255, 230, 170, 0.6),
        0 0 7px 2px rgba(255, 215, 140, 0.2);
    opacity: 0;
    will-change: opacity, transform;
    animation: goldFleckTwinkle var(--life, 3.5s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.gold-fleck.fleck-large {
    width: 2.5px;
    height: 2.5px;
    box-shadow:
        0 0 3px 1px rgba(255, 255, 230, 1),
        0 0 7px 2px rgba(255, 235, 180, 0.7),
        0 0 12px 4px rgba(255, 220, 150, 0.25);
}

.gold-fleck.fleck-tiny {
    width: 1px;
    height: 1px;
    box-shadow:
        0 0 1.5px 0.5px rgba(255, 245, 210, 0.85),
        0 0 3px 1px rgba(255, 230, 160, 0.4);
}

@keyframes goldFleckTwinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.4);
    }
    40% {
        opacity: 1;
        transform: scale(0.6);
    }
    60% {
        opacity: 0.85;
        transform: scale(0.8);
    }
}


/* 🎯 修正點 1：對齊你的原始 Class 名稱 .macro-day-card */
.macro-day-card.is-historical {
    position: relative; /* 確保右上角的 📚 有定錨點 */
    
    /* 🎨 師父嘅浪漫：微微帶啲懷舊色調（色相微調、飽和度微降） */
    filter: hue-rotate(-10deg) saturate(0.92);
    
    /* 額外加碼：讓歷史卡片帶有一層淡淡的時光毛玻璃感，與 NEverland 美學融合 */
    background: rgba(15, 20, 40, 0.5) !important;
    border-color: rgba(245, 230, 200, 0.15) !important;
    transition: all 0.3s ease;
}

/* 🎯 右上角優雅飄出一個書本小圖標 */
.macro-day-card.is-historical::after {
    content: '📚';    
    position: absolute;    
    top: 6px;    
    right: 6px;    
    font-size: 11px;    
    opacity: 0.55;
}

/* 滑鼠指過去歷史卡片時，稍微亮起，喚醒記憶 */
.macro-day-card.is-historical:hover {
    filter: hue-rotate(-10deg) saturate(1);
    border-color: rgba(245, 230, 200, 0.4) !important;
}

/* ==========================================================================
   ✦ 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;
    }
}