:root {
            --peach-primary: #FFB7B2;
            --peach-dark: #FF8B94;
            --peach-border: #FFD5D5;
            --bg-light: #F6F3F8;
            --text-main: #6D4C41;
            --title-line-gradient: linear-gradient(90deg, rgba(161, 140, 209, 0) 0%, rgba(161, 140, 209, 0.8) 35%, rgba(251, 194, 235, 0.8) 65%, rgba(251, 194, 235, 0) 100%);
            --title-fade: linear-gradient(90deg, rgba(161, 140, 209, 0) 0%, rgba(161, 140, 209, 0.3) 30%, rgba(251, 194, 235, 0.3) 70%, rgba(251, 194, 235, 0) 100%);
        }

        html, body { margin: 0; padding: 0; font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif; background-color: var(--bg-light); color: var(--text-main); scroll-behavior: smooth; overflow-x: hidden; }
        .main-wrapper { width: 100%; display: flex; flex-direction: column; min-height: 100vh; }

        /* --- 1. 導覽列 --- */
        header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); padding: 0 50px; height: 80px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 30px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 10000; border-bottom: 3px solid rgba(255, 213, 213, 0.3); }
        .logo img { height: 65px; width: auto; object-fit: contain; }
        nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 30px; }
        .menu-item > a { text-decoration: none; color: #333; font-weight: 1000; font-size: 18px; transition: 0.3s; padding: 10px 15px; }
        .menu-item > a:hover { color: var(--peach-dark); }

        /* --- 2. 標題 --- */
        .wide-title-box { text-align: center; margin: 80px 0 20px; position: relative; width: 100%; }
        .wide-title-glow { position: absolute; top: 50%; left: 0; width: 100%; height: 90px; background: var(--title-fade); transform: translateY(-50%); filter: blur(30px); z-index: 1; }
        .wide-title-box::after { content: ""; position: absolute; bottom: -15px; left: 0; width: 100%; height: 2px; background: var(--title-line-gradient); z-index: 2; }
        .wide-title-box h2 { position: relative; z-index: 3; font-size: 38px; font-weight: 900; color: var(--peach-dark); letter-spacing: 6px; margin: 0; text-shadow: 2px 2px 10px #fff; }

        /* ? 轉帳提醒文字樣式 */
        .gm-notice {
            background: #FFF0F0;
            color: var(--peach-dark);
            padding: 12px 25px;
            border-radius: 15px;
            font-weight: 900;
            font-size: 15px;
            margin-bottom: 25px;
            border: 2px solid var(--peach-border);
            display: inline-block;
            box-shadow: 0 5px 15px rgba(255, 139, 148, 0.1);
        }

        .info-btn-wrap { text-align: center; margin-bottom: 10px; }
        .btn-how-to { background: white; color: var(--peach-dark); border: 2px solid var(--peach-primary); padding: 10px 25px; border-radius: 50px; font-weight: 900; cursor: pointer; transition: 0.3s; display: inline-flex; align-items: center; gap: 8px; }
        .btn-how-to:hover { background: var(--peach-primary); color: white; transform: translateY(-3px); }

        /* --- 3. 贊助卡片 --- */
        .donate-container { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 20px 60px; }
        .donate-card { width: 100%; max-width: 480px; background: white; border-radius: 50px; padding: 50px 45px; position: relative; box-shadow: 0 10px 40px rgba(255, 183, 178, 0.15); border: 6px solid var(--peach-border); text-align: center; }
        .peach-icon { font-size: 60px; margin-bottom: 15px; display: block; }
        
        .total-display { margin-bottom: 35px; padding: 20px; background: linear-gradient(135deg, #FFF9F9 0%, #FFF0F0 100%); border-radius: 30px; border: 2px solid var(--peach-border); }
        .total-label { font-size: 14px; font-weight: 900; color: #BBAAAA; margin-bottom: 5px; display: block; }
        .total-amount { font-size: 42px; font-weight: 1000; color: var(--peach-dark); }
        .total-currency { font-size: 18px; font-weight: 900; margin-left: 5px; color: var(--peach-primary); }
        
        .stepper { display: flex; align-items: center; justify-content: center; background: #F9F9F9; border-radius: 25px; padding: 8px; border: 2px solid #F0F0F0; transition: 0.3s; }
        .s-btn { width: 50px; height: 50px; background: white; border: none; border-radius: 18px; color: var(--peach-dark); font-size: 24px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        .s-input { width: 120px; border: none; background: transparent; text-align: center; font-size: 32px; font-weight: 900; color: var(--text-main); outline: none; }
        
        .btn-pay { width: 100%; background: linear-gradient(135deg, var(--peach-primary), var(--peach-dark)); color: white; border: none; padding: 22px; border-radius: 30px; font-size: 22px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 30px rgba(255, 139, 148, 0.35); transition: 0.4s; margin-top: 35px; }
        .btn-pay:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(255, 139, 148, 0.5); }

        /* --- ?? 彈跳視窗樣式 (加入圖片支援) --- */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 20000; backdrop-filter: blur(8px); }
        .modal-content { background: white; width: 95%; max-width: 700px; height: 85vh; border-radius: 40px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,0.3); animation: popIn 0.3s ease-out; overflow: hidden; display: flex; flex-direction: column; }
        @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        
        .modal-header { padding: 25px 40px; border-bottom: 2px solid #F6F3F8; display: flex; justify-content: space-between; align-items: center; }
        .modal-header h3 { color: var(--peach-dark); font-size: 26px; margin: 0; font-weight: 900; }
        .close-btn { font-size: 35px; cursor: pointer; color: #DDD; transition: 0.3s; line-height: 1; }
        .close-btn:hover { color: var(--peach-dark); }

        /* 彈窗捲動區域 */
        .modal-scroll-area { flex: 1; overflow-y: auto; padding: 30px 40px; scrollbar-width: thin; scrollbar-color: var(--peach-primary) #FFF; }
        .modal-scroll-area::-webkit-scrollbar { width: 6px; }
        .modal-scroll-area::-webkit-scrollbar-thumb { background: var(--peach-primary); border-radius: 10px; }

        .step-section { margin-bottom: 50px; }
        .step-label { display: block; background: var(--peach-primary); color: white; padding: 6px 20px; border-radius: 50px; font-weight: 900; font-size: 16px; margin-bottom: 20px; display: inline-block; }
        .step-desc { font-size: 18px; font-weight: 900; color: var(--text-main); margin-bottom: 15px; display: block; }
        .step-img-box { width: 100%; border-radius: 20px; overflow: hidden; border: 3px solid var(--peach-border); box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 10px; background: #fafafa; }
        .step-img-box img { width: 100%; height: auto; display: block; }

        footer { background: #111; color: rgba(255,255,255,0.4); text-align: center; padding: 35px 20px; font-size: 14px; font-weight: 700; border-top: 5px solid var(--peach-primary); margin-top: auto; }

        @media (max-width: 768px) {
            header { padding: 0 20px; } nav { display: none; } .menu-toggle { display: block; }
            .wide-title-box h2 { font-size: 28px; }
            .donate-card { padding: 40px 20px; width: 95%; }
            .modal-content { height: 90vh; } .modal-header, .modal-scroll-area { padding: 20px; }
        }