/* ========== Base & Variables ========== */
    :root {
        /* Light Mode Colors (Warm Tech) */
        --primary-gradient: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
        --accent-color: #FF5E62;
        --bg-color: #FDFBF7;
        --bg-gradient: linear-gradient(180deg, #FDFBF7 0%, #F5EFE6 100%);
        --card-bg: rgba(255, 255, 255, 0.85);
        --text-primary: #2D2420;
        --text-secondary: #5D5550;
        --border-color: rgba(255, 94, 98, 0.15);
        --shadow-sm: 0 4px 12px rgba(139, 69, 19, 0.05);
        --shadow-lg: 0 8px 24px rgba(139, 69, 19, 0.12);
        --code-bg: rgba(255, 94, 98, 0.08);
        --capsule-bg: rgba(45, 36, 32, 0.9);
        --capsule-text: #fff;

        /* Layout */
        --radius-lg: 20px;
        --radius-md: 12px;
        --radius-sm: 8px;
        --container-width: 700px;
        --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    body.dark-mode {
        /* Dark Mode Colors */
        --primary-gradient: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
        --accent-color: #FF9966;
        --bg-color: #1A1816;
        --bg-gradient: linear-gradient(180deg, #1A1816 0%, #2C2420 100%);
        --card-bg: rgba(44, 36, 32, 0.8);
        --text-primary: #E6E1DE;
        --text-secondary: #A8A09A;
        --border-color: rgba(255, 255, 255, 0.1);
        --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
        --code-bg: rgba(255, 255, 255, 0.1);
        --capsule-bg: rgba(255, 255, 255, 0.15);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
        background: var(--bg-color);
        background-image: var(--bg-gradient);
        background-attachment: fixed;
        color: var(--text-primary);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        padding-bottom: 100px;
        /* Space for capsule */
        transition: background-color var(--transition), color var(--transition);
    }

    /* ========== Decorative Background ========== */
    .bg-blob {
        position: fixed;
        width: 60vw;
        height: 60vw;
        background: radial-gradient(circle, rgba(255, 94, 98, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
        border-radius: 50%;
        z-index: -1;
        pointer-events: none;
        animation: float 10s infinite ease-in-out;
    }

    .blob-1 {
        top: -20%;
        left: -20%;
    }

    .blob-2 {
        bottom: -20%;
        right: -20%;
        animation-delay: -5s;
    }

    @keyframes float {

        0%,
        100% {
            transform: translate(0, 0);
        }

        50% {
            transform: translate(30px, 50px);
        }
    }

    /* ========== Header ========== */
    .header-section {
        text-align: center;
        margin-bottom: 32px;
        animation: fadeInDown 0.8s ease-out;
        position: relative;
        z-index: 2;
    }

    .profile-container {
        width: 100px;
        height: 100px;
        margin: 0 auto 16px;
        border-radius: 24px;
        padding: 4px;
        background: #fff;
        box-shadow: var(--shadow-lg);
        transform: rotate(-5deg);
        transition: transform var(--transition);
    }

    body.dark-mode .profile-container {
        background: #3a302c;
    }

    .profile-container:hover {
        transform: rotate(0) scale(1.05);
    }

    .profile-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        display: block;
    }

    h1 {
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .subtitle {
        font-size: 0.9rem;
        color: var(--accent-color);
        font-weight: 600;
        background: rgba(255, 94, 98, 0.1);
        padding: 6px 16px;
        border-radius: 50px;
        display: inline-block;
    }

    /* ========== Main Content (Accordion) ========== */
    .main-container {
        width: 100%;
        max-width: var(--container-width);
        display: flex;
        flex-direction: column;
        gap: 16px;
        z-index: 2;
    }

    .step-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        overflow: hidden;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: var(--shadow-sm);
        transition: all var(--transition);
        animation: slideUp 0.6s ease-out backwards;
    }

    .step-card:hover {
        box-shadow: var(--shadow-lg);
        border-color: var(--accent-color);
    }

    /* Accordion Header */
    .card-header {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none;
        background: transparent;
    }

    .header-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .step-badge {
        background: var(--primary-gradient);
        color: white;
        font-size: 0.75rem;
        padding: 4px 10px;
        border-radius: 8px;
        font-weight: 800;
    }

    /* Arrow Icon (CSS Shape) */
    .arrow-icon {
        width: 12px;
        height: 12px;
        border-right: 2px solid var(--text-secondary);
        border-bottom: 2px solid var(--text-secondary);
        transform: rotate(45deg);
        transition: transform var(--transition);
        margin-right: 4px;
    }

    .step-card.active .arrow-icon {
        transform: rotate(225deg);
        border-color: var(--accent-color);
    }

    /* Accordion Content */
    .card-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        background: rgba(0, 0, 0, 0.02);
    }

    .content-inner {
        padding: 20px;
        padding-top: 0;
    }

    /* Links and Buttons */
    .action-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .btn-link {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 14px;
        border-radius: var(--radius-md);
        background: #fff;
        color: var(--text-primary);
        text-decoration: none;
        font-weight: 600;
        border: 1px solid var(--border-color);
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    body.dark-mode .btn-link {
        background: #362f2b;
        border-color: rgba(255, 255, 255, 0.05);
    }

    .btn-link:hover {
        background: var(--primary-gradient);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(255, 94, 98, 0.3);
    }

    .btn-link.secondary {
        background: transparent;
        border: 1px dashed var(--text-secondary);
        color: var(--text-secondary);
        box-shadow: none;
    }

    .btn-link.secondary:hover {
        background: rgba(0, 0, 0, 0.05);
        border-color: var(--text-primary);
        color: var(--text-primary);
        transform: none;
    }

    body.dark-mode .btn-link.secondary {
        border-color: rgba(255, 255, 255, 0.3);
        color: rgba(255, 255, 255, 0.7);
    }

    body.dark-mode .btn-link.secondary:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.6);
        color: #fff;
    }

    /* Gift Content Styling */
    .gift-item {
        background: var(--code-bg);
        padding: 16px;
        border-radius: var(--radius-md);
        margin-bottom: 12px;
        border-left: 4px solid var(--accent-color);
    }

    .gift-code {
        display: block;
        color: var(--accent-color);
        font-weight: 800;
        font-size: 1.1rem;
        margin-bottom: 8px;
        font-family: monospace;
        letter-spacing: 1px;
    }

    .gift-desc {
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.6;
    }

    .info-text {
        font-size: 0.9rem;
        color: var(--text-secondary);
        text-align: center;
        padding: 8px 0;
    }

    /* ========== Floating Dock (Capsule) ========== */
    .dock-wrapper {
        position: fixed;
        bottom: 30px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 100;
        pointer-events: none;
    }

    .floating-dock {
        background: var(--capsule-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 6px 8px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        gap: 4px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        pointer-events: auto;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: transform 0.3s ease;
    }

    .dock-btn {
        background: transparent;
        border: none;
        color: var(--capsule-text);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
        position: relative;
    }

    .dock-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Icons in CSS to avoid Emojis */
    .icon-sun,
    .icon-moon,
    .icon-up {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }

    .dock-divider {
        width: 1px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        margin: 0 4px;
    }

    /* Animations */
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* SVG Icons */
    .svg-icon {
        width: 24px;
        height: 24px;
        fill: currentColor;
    }

    /* ========== Gift Claim Button ========== */
    .gift-claim-btn {
        /* 佈局與尺寸 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 16px;
        margin-left: auto;
        /* 如果父層是 flex，這會讓按鈕靠右 */

        /* 外觀風格 - 繼承主視覺 */
        background: var(--primary-gradient);
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: 700;
        text-decoration: none;
        border-radius: 50px;
        /* 膠囊形狀 */

        /* 陰影與特效 */
        box-shadow: 0 2px 8px rgba(255, 94, 98, 0.3);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        user-select: none;
    }

    /* 滑鼠懸停效果 */
    .gift-claim-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 94, 98, 0.5);
        filter: brightness(1.1);
    }

    /* 點擊效果 */
    .gift-claim-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(255, 94, 98, 0.3);
    }

    /* 深色模式適配 (確保文字清晰) */
    body.dark-mode .gift-claim-btn {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        color: #fff;
        /* 強制白色文字 */
    }

    /* ========== 點擊複製功能樣式 ========== */

    /* 讓禮包碼看起來可以點擊 */
    .gift-code {
        cursor: pointer;
        position: relative;
        transition: color 0.2s, transform 0.1s;
        user-select: none;
        /* 防止點擊時選取文字，提升像按鈕一樣的感覺 */
    }

    /* 滑鼠懸停效果 */
    .gift-code:hover {
        color: var(--primary-gradient);
        /* 或者稍微變深 */
        opacity: 0.8;
    }

    /* 點擊時的按壓效果 */
    .gift-code:active {
        transform: scale(0.98);
    }

    /* 點擊後的提示框 (Toast) */
    .toast-notification {
        position: fixed;
        bottom: 100px;
        /* 位於底部 Dock 之上 */
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(45, 36, 32, 0.95);
        color: #fff;
        padding: 10px 20px;
        border-radius: 50px;
        font-size: 0.9rem;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 8px;
        backdrop-filter: blur(8px);
    }

    /* 顯示狀態 */
    .toast-notification.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    /* 深色模式適配 */
    body.dark-mode .toast-notification {
        background: rgba(255, 255, 255, 0.9);
        color: #000;
    }

    /* ========== 浮窗導航列 (Floating Nav) ========== */
    .floating-nav-wrapper {
        position: fixed;
        bottom: 100px;
        right: 20px;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        pointer-events: none;
    }

    /* 導航主按鈕 */
    .nav-toggle-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--primary-gradient);
        border: none;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(255, 94, 98, 0.4);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        z-index: 10;
        pointer-events: auto;
    }

    .nav-toggle-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(255, 94, 98, 0.5);
    }

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

    /* 導航圖標 */
    .nav-toggle-btn .nav-icon {
        width: 24px;
        height: 24px;
        position: relative;
        transition: transform 0.3s ease;
    }

    .nav-toggle-btn .nav-icon span {
        display: block;
        position: absolute;
        width: 18px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        left: 3px;
        transition: all 0.3s ease;
    }

    .nav-toggle-btn .nav-icon span:nth-child(1) {
        top: 6px;
    }

    .nav-toggle-btn .nav-icon span:nth-child(2) {
        top: 11px;
        width: 14px;
    }

    .nav-toggle-btn .nav-icon span:nth-child(3) {
        top: 16px;
        width: 10px;
    }

    /* 展開時的圖標變化 (變成 X) */
    .floating-nav-wrapper.expanded .nav-toggle-btn .nav-icon span:nth-child(1) {
        transform: rotate(45deg);
        top: 11px;
        width: 18px;
    }

    .floating-nav-wrapper.expanded .nav-toggle-btn .nav-icon span:nth-child(2) {
        opacity: 0;
        transform: translateX(10px);
    }

    .floating-nav-wrapper.expanded .nav-toggle-btn .nav-icon span:nth-child(3) {
        transform: rotate(-45deg);
        top: 11px;
        width: 18px;
    }

    /* 導航選單容器 */
    .nav-menu {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) scale(0.8);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        pointer-events: none;
    }

    .floating-nav-wrapper.expanded .nav-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    /* 導航項目 */
    .nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--capsule-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 10px 16px;
        border-radius: 50px;
        color: var(--capsule-text);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
        white-space: nowrap;
        opacity: 0;
        transform: translateX(20px);
    }

    .floating-nav-wrapper.expanded .nav-item {
        opacity: 1;
        transform: translateX(0);
    }

    /* 每個項目的延遲動畫 */
    .floating-nav-wrapper.expanded .nav-item:nth-child(1) { transition-delay: 0.05s; }
    .floating-nav-wrapper.expanded .nav-item:nth-child(2) { transition-delay: 0.1s; }
    .floating-nav-wrapper.expanded .nav-item:nth-child(3) { transition-delay: 0.15s; }
    .floating-nav-wrapper.expanded .nav-item:nth-child(4) { transition-delay: 0.2s; }
    .floating-nav-wrapper.expanded .nav-item:nth-child(5) { transition-delay: 0.25s; }
    .floating-nav-wrapper.expanded .nav-item:nth-child(6) { transition-delay: 0.3s; }

    /* 收起時重置延遲 */
    .nav-item:nth-child(1) { transition-delay: 0.15s; }
    .nav-item:nth-child(2) { transition-delay: 0.1s; }
    .nav-item:nth-child(3) { transition-delay: 0.05s; }
    .nav-item:nth-child(4) { transition-delay: 0s; }
    .nav-item:nth-child(5) { transition-delay: 0s; }
    .nav-item:nth-child(6) { transition-delay: 0s; }

    .nav-item:hover {
        background: var(--primary-gradient);
        transform: translateX(-5px);
        box-shadow: 0 6px 20px rgba(255, 94, 98, 0.4);
    }

    /* 導航項目徽章 */
    .nav-item-badge {
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    /* 深色模式適配 */
    body.dark-mode .nav-item {
        background: rgba(60, 50, 45, 0.95);
    }

    body.dark-mode .nav-item:hover {
        background: var(--primary-gradient);
    }

    /* 背景遮罩 (點擊外部關閉) */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 98;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .nav-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* 響應式調整 */
    @media (max-width: 480px) {
        .floating-nav-wrapper {
            right: 15px;
            bottom: 90px;
        }

        .nav-toggle-btn {
            width: 46px;
            height: 46px;
        }

        .nav-item {
            padding: 8px 14px;
            font-size: 0.85rem;
        }
    }
    /* ==========================================================================
       Mobile / Accessibility Pass  (2026-09)
       只新增樣式，不移除或改名任何既有 class，
       故 admin/api.php 的 renderSiteHtml() 產出的 HTML 完全不需變動。
       ========================================================================== */

    /* --------------------------------------------------------------
       1. 可讀性 Token：淺色底上的「文字用」強調色
       亮色的 #FF5E62 當文字時對比只有 2.6:1（WCAG AA 需 4.5:1），
       這裡另外給一個純文字用的深色版，裝飾用的 --accent-color 維持不變，
       品牌的琥珀／橘漸層（按鈕、徽章）也完全保留。
       -------------------------------------------------------------- */
    :root {
        --accent-strong: #C0392B;   /* 對白底 5.44:1 / 對膠囊底 4.72:1 */
    }

    body.dark-mode {
        --accent-strong: #FF9966;   /* 深色底本來就有 7.25:1，沿用原色 */
    }

    .subtitle {
        color: var(--accent-strong);
        max-width: 100%;
        line-height: 1.5;
    }

    /* 未由後台指定顏色的禮包碼採用高對比色；
       後台若有指定 inline color，仍以後台設定為準（不加 !important）。 */
    .gift-code {
        color: var(--accent-strong);
    }

    /* 修正舊規則的無效值：.gift-code:hover 原本寫 color: var(--primary-gradient)
       （漸層不能當 color），會讓 hover 時文字顏色掉回繼承值。 */
    .gift-code:hover {
        color: var(--accent-strong);
        opacity: 0.75;
    }

    /* renderSiteHtml() 的 intro_text 帶有 inline style="color: var(--accent-color)"，
       只能用 !important 覆蓋，選擇器精準鎖定該 inline style，不會誤傷其他文字。 */
    .info-text[style*="var(--accent-color)"] {
        color: var(--accent-strong) !important;
    }

    /* --------------------------------------------------------------
       2. 版面基礎防護：safe-area、文字折行、避免溢出
       -------------------------------------------------------------- */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        overflow-x: hidden;
    }

    body {
        /* viewport-fit=cover 後，橫置瀏海機需要左右安全區 */
        padding-left: max(20px, env(safe-area-inset-left, 0px));
        padding-right: max(20px, env(safe-area-inset-right, 0px));
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    img {
        max-width: 100%;
    }

    /* 長標題／長按鈕文字在 320px 也要能折行，不可被裁切 */
    h1,
    .subtitle,
    .header-title,
    .btn-link,
    .gift-code,
    .gift-desc,
    .info-text,
    .nav-item {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    h1 {
        line-height: 1.35;
        max-width: 100%;
    }

    /* 標題列：徽章不被壓扁、標題文字可換行 */
    .card-header {
        gap: 12px;
    }

    .header-title {
        flex-wrap: wrap;
        min-width: 0;
        flex: 1 1 auto;
        line-height: 1.45;
    }

    .step-badge {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .arrow-icon {
        flex-shrink: 0;
    }

    .btn-link {
        line-height: 1.45;
    }

    /* 禮包描述 + 「使用礼包码」按鈕是 inline style 的 flex row，
       inline style 沒有寫 flex-wrap，所以這裡不需要 !important 就能讓它換行。 */
    .gift-desc {
        flex-wrap: wrap;
    }

    .gift-claim-btn {
        flex-shrink: 0;
    }

    .gift-item {
        overflow: hidden;
    }

    /* Toast 內容是使用者複製的文字，可能很長 —— 必須限寬並換行 */
    .toast-notification {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
        max-width: min(calc(100vw - 32px), 420px);
        white-space: normal;
        text-align: center;
        line-height: 1.5;
        justify-content: center;
    }

    /* 固定定位元件避開 iPhone 手勢列 */
    .dock-wrapper {
        bottom: calc(30px + env(safe-area-inset-bottom, 0px));
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    .floating-nav-wrapper {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    /* 鍵盤操作可見的焦點框（原本完全沒有） */
    .dock-btn:focus-visible,
    .nav-toggle-btn:focus-visible,
    .btn-link:focus-visible,
    .gift-claim-btn:focus-visible,
    .gift-code:focus-visible,
    .nav-item:focus-visible,
    .card-header:focus-visible {
        outline: 3px solid var(--accent-strong);
        outline-offset: 2px;
    }

    /* 表單控件（目前產生器不會產出，但預留防護）：
       iOS 在 font-size < 16px 時聚焦會自動放大頁面 */
    input,
    select,
    textarea,
    button {
        font-family: inherit;
        font-size: 16px;
    }

    /* --------------------------------------------------------------
       3. 手機版：關閉重度模糊 / 固定背景，並放大觸控目標
       backdrop-filter 與 background-attachment: fixed 是中低階 Android
       滾動掉幀的主因，桌機維持原樣。
       -------------------------------------------------------------- */
    @media (max-width: 600px) {

        :root {
            /* 拿掉毛玻璃後把卡片底色改為不透明，維持可讀性 */
            --card-bg: #FFFFFF;
        }

        body.dark-mode {
            --card-bg: #2C2420;
        }

        body {
            background-attachment: scroll;
            padding-top: 16px;
            padding-left: max(14px, env(safe-area-inset-left, 0px));
            padding-right: max(14px, env(safe-area-inset-right, 0px));
        }

        /* 裝飾球：保留漸層，關掉持續動畫 */
        .bg-blob {
            animation: none;
            opacity: 0.8;
        }

        .step-card,
        .floating-dock,
        .nav-item,
        .toast-notification {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        /* 手機沒有 hover，避免 sticky hover 造成殘留狀態 */
        .step-card:hover {
            box-shadow: var(--shadow-sm);
            border-color: var(--border-color);
        }

        .btn-link:hover {
            transform: none;
        }

        .header-section {
            margin-bottom: 24px;
        }

        .profile-container {
            width: 84px;
            height: 84px;
        }

        h1 {
            font-size: 1.35rem;
        }

        .main-container {
            gap: 12px;
        }

        /* --- 觸控目標 ≥ 44x44 --- */
        .card-header {
            padding: 16px;
            min-height: 56px;
        }

        .content-inner {
            padding: 16px;
            padding-top: 0;
        }

        .header-title {
            font-size: 1.05rem;
        }

        .btn-link {
            min-height: 48px;
            padding: 13px 14px;
        }

        .action-list {
            gap: 10px;
        }

        /* 禮包碼本身是「點擊複製」的按鈕，用負 margin 擴大點擊區但不位移版面 */
        .gift-code {
            min-height: 44px;
            display: block;
            padding: 11px 10px;
            margin: -11px -10px 4px;
            border-radius: var(--radius-sm);
            line-height: 1.45;
        }

        .gift-code:active {
            background: rgba(0, 0, 0, 0.06);
        }

        body.dark-mode .gift-code:active {
            background: rgba(255, 255, 255, 0.10);
        }

        .gift-claim-btn {
            min-height: 44px;
            padding: 10px 18px;
            margin-left: 0;
        }

        .gift-desc {
            row-gap: 10px;
        }

        /* 補回 .gift-code 負 margin 吃掉的上緣留白，讓視覺位置與改動前一致 */
        .gift-item {
            padding: 27px 16px 16px;
        }

        .dock-wrapper {
            bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        }

        .dock-btn {
            width: 46px;
            height: 46px;
        }

        .toast-notification {
            bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        }
    }

    /* 浮窗導航：原本 white-space: nowrap，長標題在窄螢幕會被切掉 */
    @media (max-width: 600px) {

        .floating-nav-wrapper {
            right: 14px;
            bottom: calc(84px + env(safe-area-inset-bottom, 0px));
            max-width: calc(100vw - 28px);
        }

        .nav-toggle-btn {
            width: 48px;
            height: 48px;
        }

        .nav-menu {
            max-width: 100%;
            align-items: flex-end;
        }

        .nav-item {
            white-space: normal;
            min-height: 44px;
            padding: 10px 16px;
            max-width: calc(100vw - 34px);
            line-height: 1.4;
            border-radius: 22px;
            text-align: left;
        }

        .nav-item:hover {
            transform: none;
        }

        .nav-item-badge {
            flex-shrink: 0;
        }
    }

    /* 極窄螢幕 (320 - 360px) 再收一次 */
    @media (max-width: 360px) {

        body {
            padding-left: max(10px, env(safe-area-inset-left, 0px));
            padding-right: max(10px, env(safe-area-inset-right, 0px));
        }

        h1 {
            font-size: 1.2rem;
        }

        .header-title {
            font-size: 1rem;
        }

        .card-header {
            padding: 14px 12px;
        }

        .content-inner {
            padding: 14px 12px;
            padding-top: 0;
        }

        .gift-item {
            padding: 25px 12px 14px;
        }

        .gift-code {
            font-size: 1rem;
            margin: -11px -8px 4px;
            padding: 11px 8px;
        }
    }

    /* --------------------------------------------------------------
       4. 尊重系統的「減少動態效果」設定
       注意：.step-card 的 animation 用了 fill-mode backwards，且
       renderSiteHtml() 會給每張卡片遞增的 inline animation-delay，
       關掉動畫後必須明確把 opacity/transform 復原，否則卡片會看不見。
       -------------------------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            animation-delay: 0s !important;
            animation: none !important;
            transition: none !important;
            scroll-behavior: auto !important;
        }

        .step-card,
        .header-section {
            opacity: 1 !important;
            transform: none !important;
        }

        .bg-blob {
            transform: none !important;
        }

        /* 手風琴仍由 JS 直接設定 max-height，關掉 transition 後改為瞬間展開 */
        .step-card.active .card-content {
            max-height: none !important;
        }

        /* 導航展開／收起改為即時，不留延遲 */
        .floating-nav-wrapper.expanded .nav-item,
        .nav-item {
            transition-delay: 0s !important;
        }
    }

    /* ==========================================================================
       Visual refresh — 2026-09
       目標：把「所有元素同一個視覺重量」的問題拆開，建立層次。
       禮包碼是使用者真正要帶走的東西，給它最高的視覺權重；
       獎勵說明是長文字牆，給它最好的閱讀節奏；
       導覽按鈕退到次要層級。
       此區塊為純附加，不移除、不改名任何既有 class，
       因此 renderSiteHtml() 產生的 HTML 完全不需要改動。
       ========================================================================== */

    :root {
        --surface: #FFFFFF;
        --surface-2: #FFFAF4;
        --hairline: rgba(45, 36, 32, 0.09);
        --rail: linear-gradient(180deg, #FF9966 0%, #FF5E62 100%);
        --code-chip-bg: #FFF6EF;
        --code-chip-border: rgba(255, 94, 98, 0.42);
        --shadow-card: 0 1px 2px rgba(90, 55, 30, 0.05), 0 8px 24px -8px rgba(90, 55, 30, 0.14);
        --shadow-card-open: 0 1px 2px rgba(90, 55, 30, 0.06), 0 18px 44px -14px rgba(90, 55, 30, 0.24);
    }

    body.dark-mode {
        --surface: #241E1B;
        --surface-2: #2B2320;
        --hairline: rgba(255, 255, 255, 0.09);
        --code-chip-bg: rgba(255, 153, 102, 0.08);
        --code-chip-border: rgba(255, 153, 102, 0.38);
        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
        --shadow-card-open: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 44px -14px rgba(0, 0, 0, 0.65);
    }

    /* ---------- Header：把 logo 的傾斜拿掉，改用穩定的方形圓角與細環 ---------- */
    .profile-container {
        width: 96px;
        height: 96px;
        border-radius: 26px;
        padding: 5px;
        background: var(--surface);
        transform: none;
        box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline);
    }

    .profile-container:hover {
        transform: translateY(-3px);
    }

    .header-section h1 {
        letter-spacing: -0.02em;
        line-height: 1.25;
    }

    /* ---------- Step card：實心表面 + 髮絲邊框 + 分層陰影 ---------- */
    .step-card {
        background: var(--surface);
        border: 1px solid var(--hairline);
        border-radius: 18px;
        box-shadow: var(--shadow-card);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* 展開時：左側主色軌 + 更深的陰影，一眼看得出目前在哪一步 */
    .step-card.active {
        box-shadow: var(--shadow-card-open);
        border-color: rgba(255, 94, 98, 0.28);
    }

    .step-card.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--rail);
        border-radius: 18px 0 0 18px;
    }

    .step-card {
        position: relative;
    }

    .card-header {
        padding: 18px 20px;
        gap: 14px;
    }

    .step-card.active .card-header {
        padding-bottom: 14px;
    }

    /* ---------- Badge：從小色片改成有份量的膠囊 ---------- */
    .step-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        box-shadow: 0 2px 8px -2px rgba(255, 94, 98, 0.55);
    }

    .header-title {
        font-size: 1.16rem;
        font-weight: 750;
        letter-spacing: -0.01em;
        line-height: 1.4;
    }

    /* ---------- 箭頭：放進一個圓形底座，點擊區更明確 ---------- */
    .arrow-icon {
        width: 9px;
        height: 9px;
        border-width: 2px;
        margin-right: 0;
        flex-shrink: 0;
        position: relative;
        top: -2px;
    }

    /* 箭頭本身就是用 border 畫出來的，任何 ::before/::after 底座都會蓋在它之上
       （負 z-index 的子元素依繪製順序仍在元素邊框之上），所以不加底座，
       改用加粗與展開時的主色來強化狀態。 */
    .step-card.active .arrow-icon {
        border-color: var(--accent-color);
    }

    /* ---------- 展開內容：頂部髮絲線分隔 ---------- */
    .card-content {
        background: transparent;
    }

    .content-inner {
        padding: 4px 20px 22px;
        border-top: 1px solid var(--hairline);
        padding-top: 18px;
    }

    .info-text {
        text-align: left;
        line-height: 1.7;
        padding: 0 0 4px;
    }

    /* ---------- 導覽按鈕：退到次要層級，右側加指向箭頭 ---------- */
    .action-list {
        gap: 10px;
    }

    .btn-link {
        position: relative;
        background: var(--surface-2);
        border: 1px solid var(--hairline);
        border-radius: 14px;
        box-shadow: none;
        padding: 15px 42px;
        line-height: 1.55;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .btn-link:not([href=""])::after {
        content: '';
        position: absolute;
        right: 18px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-50%) rotate(-45deg);
        opacity: 0.35;
    }

    .btn-link:not([href=""]):hover {
        transform: translateY(-2px);
        border-color: var(--code-chip-border);
        background: var(--surface);
        /* 早期的 .btn-link:hover 把文字设成白色，这里底色改回浅色后必须一起还原，否则滑过／点按时字会消失 */
        color: var(--text-primary);
        box-shadow: 0 8px 20px -10px rgba(90, 55, 30, 0.45);
    }

    .btn-link:not([href=""]):active {
        transform: translateY(0);
    }

    /* 後台把「按鈕」當成說明文字用（全站 270 個中有 57 個 href=''）。
       空 href 點下去會整頁重新載入，所以這裡改成純說明樣式並停用點擊。 */
    .btn-link[href=""] {
        background: transparent;
        border: 1px dashed var(--hairline);
        box-shadow: none;
        cursor: default;
        pointer-events: none;
        padding: 13px 16px;
        font-weight: 500;
        text-align: left;
        justify-content: flex-start;
    }

    /* ---------- 禮包碼：這頁的主角，給最高視覺權重 ---------- */
    .gift-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .gift-item {
        background: var(--surface-2);
        border: 1px solid var(--hairline);
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 0;
        position: relative;
        overflow: hidden;
    }

    .gift-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--rail);
    }

    .gift-code {
        position: relative;
        display: block;
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
        font-size: 1.02rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        line-height: 1.7;
        padding: 13px 15px;
        margin: 0 0 12px;
        background: var(--code-chip-bg);
        border: 1px dashed var(--code-chip-border);
        border-radius: 12px;
        cursor: pointer;
        word-break: break-word;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .gift-code::after {
        content: '点击复制';
        display: block;
        margin-top: 9px;
        font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        opacity: 0.6;
    }

    .gift-code:hover {
        box-shadow: 0 6px 18px -8px rgba(255, 94, 98, 0.6);
    }

    .gift-code:active {
        transform: scale(0.995);
    }

    /* ---------- 獎勵說明：幾百項用頓號串成的長文，重點是閱讀節奏 ---------- */
    .gift-desc {
        font-size: 0.9rem;
        line-height: 1.9;
        letter-spacing: 0.01em;
        word-break: break-word;
        padding-top: 12px;
        border-top: 1px solid var(--hairline);
    }

    .gift-claim-btn {
        border-radius: 999px;
        font-weight: 800;
        letter-spacing: 0.02em;
        box-shadow: 0 4px 14px -4px rgba(255, 94, 98, 0.65);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .gift-claim-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px -6px rgba(255, 94, 98, 0.75);
    }

    /* ---------- Dock ---------- */
    .floating-dock {
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
    }

    /* ---------- 手機：重新校準這次改版的間距，並維持既有的 44px 觸控高度 ---------- */
    @media (max-width: 600px) {
        .card-header {
            padding: 15px 16px;
            min-height: 56px;
        }

        .header-title {
            font-size: 1.08rem;
        }

        .content-inner {
            padding: 16px 16px 18px;
        }

        .btn-link {
            padding: 14px 38px;
            min-height: 48px;
        }

        .btn-link[href=""] {
            padding: 12px 14px;
            min-height: 0;
        }

        /* 這次改版讓禮包碼本身就有足夠的實體內距，
           不再需要早先那組用負 margin 擴大點擊區的補償寫法。 */
        .gift-code {
            padding: 13px 14px;
            margin: 0 0 11px;
            min-height: 44px;
            font-size: 0.98rem;
        }

        .gift-item {
            padding: 15px 14px;
        }

        .profile-container {
            width: 84px;
            height: 84px;
            border-radius: 22px;
        }
    }

    @media (max-width: 360px) {
        .card-header {
            padding: 14px 12px;
        }

        .content-inner {
            padding: 14px 12px 16px;
        }

        .gift-item {
            padding: 14px 12px;
        }

        .gift-code {
            padding: 12px 12px;
            margin: 0 0 10px;
            font-size: 0.94rem;
        }
    }

    /* ==========================================================================
       Dock 重新配置 — 2026-09
       1. 主題切換移到頁面右上角，隨頁面捲動，不再浮在畫面上
       2. 回到頂部改成右下角，且只在捲動一段距離後才出現（class 由 share.js 切換）
       樣板的 HTML 結構完全不動，純靠 CSS 解構原本的膠囊容器。
       ========================================================================== */

    /* 容器不再產生方塊，兩顆按鈕各自獨立定位。
       注意 pointer-events 會繼承，原本 .dock-wrapper 是 none，必須在按鈕上補回 auto。 */
    .dock-wrapper,
    .floating-dock {
        display: contents;
    }

    .dock-divider {
        display: none;
    }

    .dock-btn {
        position: fixed;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--surface);
        color: var(--text-primary);
        border: 1px solid var(--hairline);
        box-shadow: var(--shadow-card);
        pointer-events: auto;
        z-index: 100;
        transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.25s ease, visibility 0.25s ease;
    }

    .dock-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card-open);
    }

    .dock-btn:active {
        transform: translateY(0) scale(0.94);
    }

    /* 主題切換：頁面右上角，position:absolute 讓它隨內容捲走而不是黏在畫面上 */
    #themeToggle {
        position: absolute;
        top: max(16px, env(safe-area-inset-top, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: auto;
        left: auto;
    }

    /* 回到頂部：右下角，預設隱藏，捲動超過門檻才由 JS 加上 .is-visible */
    #backToTop {
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        top: auto;
        left: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
    }

    #backToTop.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #backToTop.is-visible:hover {
        transform: translateY(-2px);
    }

    /* 沒有 JS 時（.is-visible 永遠不會被加上）仍讓按鈕可用，不要變成永遠看不到 */
    @media (scripting: none) {
        #backToTop {
            opacity: 1;
            visibility: visible;
            transform: none;
        }
    }

    @media (max-width: 600px) {
        #themeToggle {
            top: max(12px, env(safe-area-inset-top, 0px));
            right: max(12px, env(safe-area-inset-right, 0px));
        }

        #backToTop {
            right: max(12px, env(safe-area-inset-right, 0px));
            bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        }
    }