/* =========================================================
   STYLE.CSS - PART 1/3 (核心基礎與導航 - V5.2)
   包含：動畫、側邊欄、導航列
   請貼在檔案最上方
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&family=Roboto:wght@700&family=Orbitron:wght@900&display=swap');

:root {
    --primary: #0076ff;
    --bg-main: #f0f4f9;
    --footer-bg: #0f172a;
    --text-main: #1e293b;
    --danger: #ef4444;
    --success: #10b981;
}

html, body { 
    height: 100%; margin: 0; padding: 0; 
    background: var(--bg-main); 
    font-family: 'Noto Sans TC', sans-serif; 
    overflow-x: hidden !important; 
    max-width: 100vw !important; 
    cursor: auto; 
}

/* 1. 關鍵動畫 (Animations) */
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-slow { 100% { transform: rotate(360deg); } }
@keyframes pulseRed { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); } 50% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(255, 77, 77, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } }
@keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
@keyframes floatMascot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes shake-red { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes hourglass-flip { 0% { transform: rotate(0deg); } 40% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
@keyframes bellShake { 0% { transform: rotate(0); } 15% { transform: rotate(15deg); } 30% { transform: rotate(-15deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } 90% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }

.spin-anim { animation: spin 0.8s linear infinite !important; display: inline-block !important; }
.new-tag-pulse { background: var(--danger); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 8px; display: inline-block; vertical-align: middle; animation: pulseRed 1.5s infinite; }

/* 2. 側邊欄 (Sidebar) */
.sidebar-tech { 
    position: fixed !important; 
    left: 20px !important; 
    top: 110px !important; 
    width: 260px !important; 
    min-width: 260px !important; 
    background: #fff !important; 
    border-radius: 30px !important; 
    border: 1px solid #e2e8f0 !important; 
    padding: 25px 15px !important; 
    height: fit-content !important; 
    min-height: auto !important;
    max-height: calc(100vh - 140px) !important; 
    overflow-y: auto !important; 
    z-index: 999 !important; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.05) !important; 
    transition: width 0.3s ease !important;
}
.sidebar-tech.collapsed { width: 80px !important; min-width: 80px !important; }
.sidebar-tech.collapsed .nav-text { display: none !important; }
.sidebar-tech.collapsed .nav-item-tech { justify-content: center !important; padding: 14px 0 !important; }

.nav-item-tech { 
    display: flex !important; align-items: center !important; gap: 15px !important; 
    padding: 12px 20px !important; color: #64748b !important; text-decoration: none !important; 
    border-radius: 15px !important; margin-bottom: 8px !important; font-weight: 700 !important; 
    transition: all 0.2s ease !important; white-space: nowrap !important;
}
.nav-item-tech:hover, .nav-item-tech.active { 
    background: var(--primary) !important; color: #fff !important; 
    box-shadow: 0 8px 20px rgba(0, 118, 255, 0.25) !important; transform: translateX(5px); 
}
.custom-menu-icon { width: 26px !important; height: 26px !important; object-fit: contain !important; display: inline-block !important; vertical-align: middle !important; }
#sidebarToggle { transition: 0.3s; cursor: pointer; }

/* 3. 主版面配置 (Main Layout) */
.main-wrapper { 
    transition: padding 0.3s; 
    min-height: 85vh; 
    display: flex; 
    flex-direction: column; 
    width: auto !important;
    overflow-x: hidden !important; 
    box-sizing: border-box; 
    padding-right: 60px !important; /* 右側留白 */
}
/* 固定左邊距，防止移動 */
.main-wrapper.has-sidebar { margin-left: 330px !important; width: auto !important; }
body.sidebar-collapsed .main-wrapper.has-sidebar { margin-left: 330px !important; width: auto !important; }

/* 手機版適配 */
@media (max-width: 768px) {
    .main-wrapper.has-sidebar, 
    body.sidebar-collapsed .main-wrapper.has-sidebar {
        margin-left: 0 !important; 
        padding-right: 20px !important; 
        padding-left: 20px !important;
    }
}

/* 4. 頂部導航元件 */
.nav-add-btn { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff !important; 
    font-size: 12px; font-weight: 800; padding: 6px 15px; border-radius: 20px; text-decoration: none; 
    display: inline-flex !important; align-items: center; gap: 5px; margin-left: 12px; 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.3s ease; 
    border: 1px solid rgba(255,255,255,0.2); animation: pulseGreen 2s infinite; 
}
.nav-add-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4); background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }
.balance-pill { background: #f0f9ff; color: #0284c7; padding: 8px 20px; border-radius: 50px; font-weight: 900; font-family: 'Orbitron'; display: flex; align-items: center; gap: 10px; border: 1px solid #bae6fd; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.chrome-notice { font-size: 13px; color: #64748b; font-weight: 700; background: #fff; padding: 4px 15px; border-radius: 50px; border: 1px solid #e2e8f0; display: inline-flex; align-items: center; gap: 6px; height: 32px; white-space: nowrap; }
.chrome-gif { width: 20px !important; height: 20px !important; display: inline-block !important; vertical-align: middle !important; }
.status-active { font-size: 12px; color: var(--success); font-weight: 800; background: #fff; padding: 4px 15px; border-radius: 50px; border: 1px solid rgba(0, 195, 0, 0.2); display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.status-dot-pulse { width: 8px; height: 8px; background-color: #00c300 !important; border-radius: 50%; animation: pulseGreen 2s infinite; }
.section-title { text-align: left; margin: 10px 0 30px 0; padding-left: 20px; font-family: 'Noto Sans TC'; font-weight: 900; font-size: 28px; color: var(--text-main); position: relative; display: flex; align-items: center; gap: 15px; }
.section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 35px; background: var(--primary); border-radius: 10px; box-shadow: 0 0 10px rgba(0, 118, 255, 0.5); }
.section-title::after { content: ''; position: absolute; left: 20px; bottom: -10px; width: 100px; height: 3px; background: linear-gradient(90deg, var(--primary), transparent); border-radius: 10px; }
/* =========================================================
   STYLE.CSS - PART 2/3 (組件、篩選器、搜尋)
   請接在 Part 1 之後
   ========================================================= */

/* 5. 平台篩選器 (Filter Control) */
.filter-control-panel { background: #fff !important; border-radius: 25px !important; padding: 20px !important; margin-bottom: 25px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.02) !important; position: relative !important; overflow: hidden !important; display: block !important; }
.filter-control-panel::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(0,118,255,0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.platform-filter-wrapper { display: flex !important; gap: 12px !important; overflow-x: auto !important; padding: 5px 2px 15px 2px !important; -webkit-overflow-scrolling: touch !important; }
.platform-filter-wrapper::-webkit-scrollbar { height: 0px; display: none; }
.pf-btn { flex: 0 0 auto !important; padding: 10px 22px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; display: flex !important; align-items: center !important; gap: 8px !important; border: 1px solid rgba(255,255,255,0.15) !important; transition: all 0.3s !important; }
.pf-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.pf-btn.active { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 10px 25px rgba(0,0,0,0.2); z-index: 5; }
.pf-all { background: linear-gradient(145deg, #475569, #334155); }
.pf-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.pf-fb { background: linear-gradient(145deg, #1877f2, #0b58c4); }
.pf-yt { background: linear-gradient(145deg, #ff0000, #cc0000); }
.pf-tk { background: linear-gradient(145deg, #000000, #333333); }
.pf-th { background: linear-gradient(145deg, #000000, #1a1a1a); }
.pf-line { background: linear-gradient(145deg, #06c755, #00b900); }
.pf-tg { background: linear-gradient(145deg, #2aabee, #229ed9); }
.pf-web { background: linear-gradient(145deg, #0076ff, #0056b3); }

/* 6. 搜尋框 (Search Box - 圖示位置絕對修正) */
.service-search-box { position: relative !important; margin-bottom: 25px; width: 100%; }
.service-search-input { 
    width: 100%; padding: 15px 20px 15px 55px !important; /* 左邊留空 */
    border-radius: 15px !important; border: 2px solid #e2e8f0 !important; 
    background: #fff !important; font-weight: 600; font-size: 15px; 
    height: 50px !important; transition: 0.3s; 
}
.service-search-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px rgba(0,118,255,0.1) !important; outline: none; }
.search-icon-float { 
    position: absolute !important; left: 20px !important; top: 50% !important; 
    transform: translateY(-50%) !important; color: #94a3b8; font-size: 18px; 
    z-index: 10; pointer-events: none; 
}

.orders-search-box { position: relative; width: 100%; max-width: 300px; }
.orders-search-input { width: 100%; height: 45px; padding: 0 45px 0 20px; border-radius: 50px; border: 1px solid #e2e8f0; background: #f8fafc; font-weight: 600; }
.orders-search-input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(0,118,255,0.1); }
.orders-search-btn { position: absolute; right: 5px; top: 5px; width: 35px; height: 35px; border: none; background: #fff; border-radius: 50%; color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.orders-search-btn:hover { background: var(--primary); color: #fff; }

/* 7. 3D 數據卡片 */
.glass-stats-card { border-radius: 25px; padding: 25px; position: relative; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: 0.3s; min-height: 140px; display: flex; flex-direction: column; justify-content: center; }
.glass-stats-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 118, 255, 0.1); }
.card-blue { border-bottom: 6px solid #0076ff; } .card-green { border-bottom: 6px solid #00c300; } .card-yellow { border-bottom: 6px solid #f59e0b; } .card-purple { border-bottom: 6px solid #a855f7; }
.stats-icon-3d { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 48px; opacity: 1 !important; background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.15)); transition: 0.3s; }
.glass-stats-card:hover .stats-icon-3d { transform: translateY(-50%) scale(1.1) rotate(10deg); }
.icon-3d-blue { background-image: linear-gradient(135deg, #0076ff, #00c6ff); } .icon-3d-green { background-image: linear-gradient(135deg, #00c300, #4ade80); } .icon-3d-yellow { background-image: linear-gradient(135deg, #f59e0b, #fcd34d); } .icon-3d-purple { background-image: linear-gradient(135deg, #a855f7, #d8b4fe); }
.stats-value { font-family: 'Orbitron'; font-size: 26px; font-weight: 900; color: #0f172a; margin-bottom: 5px; z-index: 2; position: relative; }
.stats-label { font-size: 13px; font-weight: 700; color: #64748b; letter-spacing: 1px; z-index: 2; position: relative; }

/* 8. 通用組件 */
.clay-card { background: #fff !important; border-radius: 25px; padding: 25px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s; border: 1px solid #e2e8f0; margin-bottom: 30px; }
.clay-white { background: #fff !important; color: #333 !important; }
.alert { border-radius: 15px; font-weight: 600; border: none; padding: 15px; margin-bottom: 20px; }
.alert-danger { background: #fee2e2; color: #ef4444; }
.alert-success { background: #dcfce7; color: #00c300; }
.cancel-reason-badge { display: block; width: 100%; margin-top: 8px; background: #fff1f2; color: #be123c; font-size: 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid #fda4af; text-align: left; line-height: 1.5; }
.cancel-reason-title { color: #0f172a; font-weight: 900; margin-right: 5px; }
select.form-control { appearance: auto; -webkit-appearance: auto; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 15px; color: #0f172a; font-weight: 600; height: 55px; padding: 0 15px; }
/* =========================================================
   STYLE.CSS - PART 3/3 (頁面內容與頁尾)
   請接在 Part 2 之後
   ========================================================= */

/* 9. 訂單紀錄與表格 (Order History) */
.orders-toolbar { background: #fff; border-radius: 20px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #e2e8f0; margin-bottom: 25px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.status-scroll-wrapper { display: flex; gap: 10px; overflow-x: auto; padding: 10px 5px; flex: 1; -webkit-overflow-scrolling: touch; }
.status-tab { display: flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 50px; background: #f8fafc; color: #64748b; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; transition: 0.3s; border: 1px solid #e2e8f0; }
.status-tab:hover, .status-tab.active { background: linear-gradient(135deg, #0076ff 0%, #0056b3 100%); color: #fff; border-color: transparent; box-shadow: 0 5px 15px rgba(0, 118, 255, 0.3); }

/* 表格本體 */
.custom-order-table { border-spacing: 0; width: 100%; border-collapse: separate; margin-top: 15px; border-radius: 15px 15px 0 0; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 118, 255, 0.05); background: #fff; display: table !important; }
.custom-order-table thead tr { background: linear-gradient(135deg, #0076ff 0%, #0060df 100%); }
.custom-order-table thead th { border: none; color: #fff; font-size: 13px; font-weight: 900; padding: 18px 20px; text-transform: uppercase; letter-spacing: 1px; text-align: left; white-space: nowrap; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.custom-order-table thead th i { color: #fff; margin-right: 8px; font-size: 15px; vertical-align: text-bottom; opacity: 0.9; }
.custom-order-table thead th:first-child { padding-left: 25px; }
.order-row { background: #fff; transition: 0.3s; }
.order-row:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); position: relative; z-index: 2; }
.order-row td { padding: 18px 15px; vertical-align: middle; border: none; color: #334155; font-size: 14px; border-bottom: 1px solid #f1f5f9; background: #fff; }
.ord-id { font-family: 'Orbitron'; font-weight: 900; color: #0f172a; font-size: 13px; }
.ord-date { font-size: 12px; color: #94a3b8; }
.ord-link { display: block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary); font-weight: 600; text-decoration: none; }
.ord-service { font-weight: 700; font-size: 13px; max-width: 250px; display: block; }
.ord-charge { font-family: 'Roboto', sans-serif; font-weight: 700; color: #0f172a; background: #f1f5f9; padding: 6px 12px; border-radius: 8px; }

/* 狀態徽章 */
.status-badge { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 110px; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.status-badge:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.st-processing { background: #eff6ff !important; color: #2563eb !important; border: 1px solid #bfdbfe !important; }
.st-processing i { animation: spin 1.5s linear infinite; display: inline-block !important; }
.st-pending { background: #fffbeb !important; color: #d97706 !important; border: 1px solid #fde68a !important; }
.st-pending i { animation: spin-slow 3s linear infinite; display: inline-block !important; }
.st-queue { background: #f0fdfa !important; color: #0d9488 !important; border: 1px solid #99f6e4 !important; }
.st-queue i { animation: hourglass-flip 3s infinite ease-in-out; display: inline-block !important; }
.st-completed { background: #f0fdf4 !important; color: #16a34a !important; border: 1px solid #bbf7d0 !important; }
.st-completed:hover i { animation: bounce 1s infinite; display: inline-block !important; }
.st-canceled { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; }
.st-canceled:hover { animation: shake-red 0.4s; display: inline-block !important; }
.st-partial { background: #faf5ff !important; color: #9333ea !important; border: 1px solid #e9d5ff !important; }

/* 狀態說明小卡 */
.status-guide-wrapper { display: flex; gap: 15px; overflow-x: auto; padding: 10px 5px 25px 5px; margin-bottom: 20px; }
.guide-card { min-width: 200px; flex: 1; background: #fff; border: 1px solid #e2e8f0; border-radius: 15px; padding: 15px; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.02); display: flex; flex-direction: column; gap: 8px; }
.guide-header { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 14px; margin-bottom: 0; }
.guide-desc { font-size: 12px; color: #64748b; line-height: 1.6; }
.gc-pending .guide-header { color: #d97706; } .gc-pending { border-top: 4px solid #f59e0b; }
.gc-processing .guide-header { color: #2563eb; } .gc-processing { border-top: 4px solid #3b82f6; }
.gc-completed .guide-header { color: #16a34a; } .gc-completed { border-top: 4px solid #22c55e; }
.gc-canceled .guide-header { color: #dc2626; } .gc-canceled { border-top: 4px solid #ef4444; }
.gc-partial .guide-header { color: #9333ea; } .gc-partial { border-top: 4px solid #a855f7; }

/* 10. 服務列表 UI (Service List) */
/* 極光白分類標題 */
.category-header-row td { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important; padding: 20px 25px !important; border-bottom: 3px solid rgba(0, 118, 255, 0.1) !important; position: relative; }
.category-header-row td::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #0076ff, #00c6ff); }
.category-header-title { font-weight: 900 !important; font-size: 17px !important; color: #1e293b !important; display: flex; align-items: center; }
.category-header-icon { width: 26px; height: 26px; object-fit: contain; margin-right: 12px; vertical-align: middle; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }

/* 服務 ID - 支援雙重格式 */
.service-id-badge { display: inline-block; background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%); color: #475569; font-family: 'Orbitron', monospace; font-weight: 900; font-size: 13px; padding: 5px 12px; border-radius: 4px; border-left: 4px solid #64748b; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); min-width: 60px; text-align: center; }
.service-id-tag { display: inline-block; background: #0f172a; color: #00f2fe; font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 900; padding: 3px 10px; border-radius: 6px; border: 1px solid rgba(0, 242, 254, 0.4); box-shadow: 0 0 8px rgba(0, 242, 254, 0.2); min-width: 45px; text-align: center; }

/* 詳情按鈕 */
.btn-view-details { background: linear-gradient(135deg, #0076ff 0%, #0056b3 100%) !important; color: #fff !important; border: none !important; padding: 8px 18px !important; border-radius: 50px !important; font-weight: 700 !important; font-size: 13px !important; white-space: nowrap !important; min-width: 80px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.btn-view-details:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 118, 255, 0.5) !important; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; }
.rate-pill-blue { background: #eff6ff; color: #2563eb; font-weight: 800; padding: 6px 15px; border-radius: 50px; border: 1px solid #bfdbfe; display: inline-block; min-width: 90px; text-align: center; }
.avg-time-badge { font-size: 12px; color: #059669; background: #ecfdf5; padding: 4px 10px; border-radius: 6px; border: 1px solid #a7f3d0; font-weight: 700; display: inline-block; white-space: nowrap; }

/* 11. 登入頁流程 UI (Login Page) */
.process-wrapper { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 20px; position: relative; }
@media (min-width: 992px) { .process-wrapper::before { content: ''; position: absolute; top: 50px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(to right, #cbd5e1 0, #cbd5e1 10px, transparent 10px, transparent 20px); z-index: 0; } }
.process-flow-card { flex: 1; min-width: 200px; background: #fff; padding: 30px 20px; border-radius: 25px; text-align: center; border: 1px solid #e2e8f0; position: relative; z-index: 1; transition: 0.4s; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.process-flow-card:hover { transform: translateY(-15px); box-shadow: 0 20px 40px rgba(0, 118, 255, 0.15); border-color: var(--primary); }/* =========================================
   修正：流程圖示翻轉動畫 (3D Flip Effect)
   請替換原有的 .process-icon 相關設定
   ========================================= */
.process-icon { 
    width: 70px; 
    height: 70px; 
    margin: 0 auto 20px auto; 
    background: #f0f7ff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 28px; 
    color: var(--primary); 
    /* 關鍵：加入 0.6秒 Q彈過渡效果 */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
}

.process-flow-card:hover .process-icon { 
    /* 關鍵：360度 3D 翻轉 + 放大 */
    transform: rotateY(360deg) scale(1.1) !important; 
    background: var(--primary) !important; 
    color: #fff !important; 
    box-shadow: 0 10px 20px rgba(0, 118, 255, 0.3);
}

/* 登入表單元件 */
.login-container-box { width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 40px; padding-bottom: 80px; }
.login-card { width: 100%; max-width: 480px; padding: 45px !important; background: rgba(255, 255, 255, 0.95); border: 1px solid #fff; box-shadow: 0 20px 60px rgba(0, 118, 255, 0.1); border-radius: 35px; animation: floatCard 6s ease-in-out infinite; margin-bottom: 60px; position: relative; z-index: 5; }
.login-title { text-align: center; font-family: 'Orbitron'; font-weight: 900; font-size: 28px; color: var(--primary); margin-bottom: 30px; }
/* 修正 LOGO 樣式 */
.login-card img { max-width: 220px !important; width: auto !important; height: auto !important; display: block !important; margin: 0 auto 25px auto !important; filter: drop-shadow(0 5px 15px rgba(0, 118, 255, 0.15)); }
.btn-login { width: 100%; height: 55px; background: linear-gradient(135deg, #0076ff 0%, #0056b3 100%); color: #fff; border: none; border-radius: 15px; font-weight: 900; font-size: 16px; margin-top: 10px; cursor: pointer; box-shadow: 0 10px 20px rgba(0, 118, 255, 0.3); transition: 0.3s; }
.login-input { padding-left: 55px !important; height: 55px !important; border-radius: 15px !important; border: 1px solid #e2e8f0 !important; background: #f8fafc !important; font-weight: 600; width: 100%; font-size: 15px; }
.input-icon-group { position: relative; width: 100%; margin-bottom: 20px; }
.input-icon-group i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #94a3b8; z-index: 10; font-size: 16px; }
.tech-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 20px !important; width: 100% !important; margin-bottom: 40px !important; }
.glass-tech-card { background: #fff !important; padding: 25px !important; border-radius: 20px !important; border: 1px solid #e2e8f0 !important; text-align: center !important; transition: 0.3s !important; box-shadow: 0 5px 15px rgba(0,0,0,0.02) !important; display: block !important; }
.glass-tech-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important; border-color: var(--primary) !important; }
.tech-icon { font-size: 30px !important; color: var(--primary) !important; margin-bottom: 15px !important; }
.tech-title { font-weight: 800 !important; font-size: 16px !important; color: var(--text-main) !important; margin-bottom: 5px !important; }
.tech-desc { font-size: 12px !important; color: #64748b !important; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; width: 100%; }
.service-intro-card { background: #fff; padding: 25px; border-radius: 20px; border: 1px solid #e2e8f0; text-align: left; transition: 0.3s; display: flex; align-items: center; gap: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.service-intro-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--primary); }
.service-icon-box { width: 50px !important; height: 50px !important; border-radius: 12px !important; display: flex !important; align-items: center; justify-content: center; font-size: 24px !important; color: #fff !important; flex-shrink: 0; }
.srv-fb { background: #1877f2 !important; } .srv-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; } .srv-tk { background: #000 !important; } .srv-yt { background: #ff0000 !important; } .srv-line { background: #00c300 !important; } .srv-threads { background: #000 !important; } .srv-tg { background: #2481cc !important; } .srv-google { background: #4285F4 !important; } .srv-shopee { background: #ee4d2d !important; }
.about-section { margin-bottom: 60px; }
.about-card { background: #fff; border-radius: 30px; padding: 40px; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-bottom: 30px; position: relative; overflow: hidden; }
.about-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary), var(--success)); }
.about-header { font-size: 22px; font-weight: 900; color: var(--text-main); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.about-header i { color: var(--primary); }
.about-content { font-size: 15px; line-height: 1.8; color: #475569; }
.feature-list { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; }
.feature-item { flex: 1 1 45%; background: #f8fafc; padding: 15px; border-radius: 12px; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 10px; border: 1px solid #e2e8f0; }
.feature-item i.fa-check-circle { color: #00c300 !important; }
.feature-item i:not(.fa-check-circle) { color: var(--primary); }
.cta-masterpiece { width: 100%; max-width: 1100px; margin: 80px auto; background: linear-gradient(-45deg, #0076ff, #00c6ff, #0056b3, #0076ff); background-size: 400% 400%; animation: aurora 10s ease infinite; border-radius: 40px; padding: 70px 40px; text-align: center; color: #fff; box-shadow: 0 30px 80px rgba(0, 118, 255, 0.4); position: relative; overflow: hidden; display: block; }
.cta-title-large { font-size: 36px; font-weight: 900; margin-bottom: 15px; text-shadow: 0 5px 15px rgba(0,0,0,0.2); letter-spacing: 1px; color: #fff; }
.cta-desc-large { font-size: 18px; opacity: 0.95; margin-bottom: 40px; font-weight: 500; color: #fff; }
.cta-btn-group { display: flex; gap: 20px; justify-content: center; }
.btn-mega-primary { background: #fff; color: var(--primary); padding: 18px 50px; border-radius: 50px; font-weight: 900; font-size: 18px; text-decoration: none; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: none; display: inline-block; }
.btn-mega-primary:hover { transform: scale(1.05) translateY(-3px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); color: var(--primary); }
.btn-mega-outline { background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.8); color: #fff; padding: 16px 48px; border-radius: 50px; font-weight: 900; font-size: 18px; text-decoration: none; transition: 0.3s; display: inline-block; }
.btn-mega-outline:hover { background: #fff; color: var(--primary); border-color: #fff; }

/* 12. 頁尾與通知 (Footer & Notifications) */
.tech-footer { background-color: #0f172a !important; color: #fff !important; padding: 80px 0 40px 0; margin-top: 80px; position: relative; width: 100%; z-index: 10; }
.footer-mascot { position: absolute !important; right: 5% !important; bottom: 0 !important; width: 150px !important; max-width: 150px !important; height: auto !important; z-index: 10; animation: floatMascot 4s ease-in-out infinite; }
.social-group { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.social-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: rgba(255,255,255,0.1); display: flex !important; align-items: center; justify-content: center; color: #fff !important; text-decoration: none; font-size: 18px !important; cursor: pointer; border: none; }
.social-btn:hover { transform: translateY(-3px); background: var(--primary); }
.srv-ig-footer { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; }
.footer-link { color: #e2e8f0; text-decoration: none; display: block; font-size: 14px; transition: 0.3s; opacity: 0.8; margin-bottom: 8px; }
.footer-link:hover { color: #fff; opacity: 1; padding-left: 5px; }

/* 左下角購買通知 */
.fomo-container { position: fixed !important; bottom: 20px !important; left: 20px !important; z-index: 99999 !important; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.fomo-popup { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 12px 18px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important; display: flex !important; align-items: center; gap: 15px; min-width: 280px; animation: slideInLeft 0.5s ease forwards; pointer-events: auto; position: relative; overflow: hidden; }
.fomo-popup::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #0076ff, #00c6ff, #0056b3, #0076ff); }
.fomo-icon { width: 42px !important; height: 42px !important; background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%); color: #fff !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; font-size: 18px !important; flex-shrink: 0; box-shadow: 0 4px 10px rgba(250, 204, 21, 0.4) !important; }
.fomo-icon i { animation: bellShake 1s ease infinite; }
.fomo-content h5 { margin: 0 0 3px 0 !important; font-size: 13px !important; font-weight: 900 !important; color: #1e293b !important; }
.fomo-content p { margin: 0 !important; font-size: 12px !important; color: #64748b !important; }

/* Modal */
.modal { z-index: 20000 !important; }
.modal-backdrop { z-index: 19999 !important; }
.modal-content { border-radius: 20px !important; border: none !important; box-shadow: 0 25px 50px rgba(0,0,0,0.25) !important; }
.modal-header { border-bottom: 1px solid #f1f5f9 !important; padding: 20px 25px !important; }
.modal-footer { border-top: 1px solid #f1f5f9 !important; padding: 20px 25px !important; }
/* =========================================
   補丁：登入頁底部連結 (Login Links Fix)
   請貼在 style.css 最下方
   ========================================= */
.login-links { 
    text-align: center !important; 
    margin-top: 25px !important; 
    font-size: 14px !important; 
    color: #64748b !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    width: 100% !important; 
}

.login-links a {
    color: var(--primary) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: 0.3s !important;
}

.login-links a:hover {
    text-decoration: underline !important;
    opacity: 0.8 !important;
}
/* /* /* /* /* =========================================
   [V6.1] 餘額加值頁面 - 最終穩定確認版 (Stable Fixed)
   適用策略：後台限制字數 (9字內)，保持版面絕對穩定
   請替換 style.css 最下方的代碼
   ========================================= */

/* 1. 極光背景與基礎 */
.aurora-bg {
    background: linear-gradient(135deg, #0076ff 0%, #00c6ff 100%) !important;
    padding: 40px 20px 30px 20px;
    text-align: center; position: relative; overflow: hidden;
    border-radius: 20px 20px 0 0;
}
.aurora-bg::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
    animation: rotateFlow 15s linear infinite; pointer-events: none;
}
@keyframes rotateFlow { 100% { transform: rotate(360deg); } }
.deposit-title { color: #fff; font-weight: 900; margin-bottom: 5px; font-size: 24px; position: relative; z-index: 2; text-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.deposit-subtitle { color: rgba(255,255,255,0.95); font-size: 13px; font-weight: 500; position: relative; z-index: 2; letter-spacing: 0.5px; }
.animated-icon { width: 80px; height: 80px; object-fit: contain; animation: float-pulse 3s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); }
@keyframes float-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 2. 左側卡片 (結構鎖定) */
.deposit-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 15px 50px rgba(0,0,0,0.05); border: 1px solid #e2e8f0;
    height: 100%; display: flex; flex-direction: column;
    width: 100%;
}
.deposit-body { 
    flex: 1; padding: 30px; display: flex; flex-direction: column; 
    width: 100%; box-sizing: border-box;
}

/* 3. 操作說明面板 (固定高度防跳動) */
.instruction-panel {
    background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 15px; overflow: hidden;
    margin-bottom: 25px;
    height: 220px !important; /* 絕對固定高度 */
    display: flex; flex-direction: column;
    width: 100%;
}
.instruction-header {
    background: #f1f5f9; color: #64748b; padding: 12px 15px; 
    font-weight: 800; font-size: 14px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px dashed #cbd5e1;
    flex-shrink: 0;
}
.instruction-body {
    padding: 15px; font-size: 13px; color: #334155; line-height: 1.8;
    width: 100%; box-sizing: border-box;
    /* 強制斷行，防止長網址撐開 */
    word-break: break-all !important;      
    overflow-wrap: break-word !important;  
    white-space: normal !important;        
}
.instruction-body img, .instruction-body table { max-width: 100% !important; height: auto !important; }
.scrollable-content {
    flex: 1; overflow-y: auto; scrollbar-width: thin; padding-right: 5px;
    overflow-x: hidden;
}
.scrollable-content::-webkit-scrollbar { width: 6px; }
.scrollable-content::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
.no-arrow details > summary { list-style: none !important; }
.no-arrow details > summary::-webkit-details-marker { display: none !important; }

/* 4. 標題與 ID UI */
.modern-section-title {
    font-size: 20px; font-weight: 900; color: #1e293b;
    position: relative; padding-left: 15px; border-left: 5px solid #0076ff;
    line-height: 1.2; letter-spacing: 0.5px;
}
.pulse-dot {
    display: inline-block; width: 8px; height: 8px; background: #10b981;
    border-radius: 50%; margin-left: 8px; vertical-align: middle;
    animation: pulseGreen 2s infinite;
}
.neon-id-badge {
    background: #0f172a; color: #00f2fe; font-family: 'Orbitron', monospace;
    padding: 6px 12px; border-radius: 4px; border-left: 3px solid #00f2fe;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2); font-size: 13px; letter-spacing: 1px; width: fit-content;
}

/* 5. 輸入框與按鈕 */
.blue-input-group {
    display: flex; align-items: center; background: #eff6ff; border: 2px solid #bfdbfe;
    border-radius: 15px; padding: 0 20px; height: 65px; transition: 0.3s;
}
.blue-input-group:focus-within { border-color: #0076ff; background: #fff; box-shadow: 0 0 0 5px rgba(0, 118, 255, 0.15); }
.blue-icon { font-size: 20px; font-weight: 900; color: #0076ff; margin-right: 12px; }
.blue-input {
    border: none !important; background: transparent !important; height: 100% !important;
    font-size: 32px !important; font-weight: 900 !important; color: #0076ff !important;
    padding: 0 !important; box-shadow: none !important; width: 100%;
}
.blue-input::placeholder { color: #dbeafe; }
.btn-pay-premium {
    width: 100%; height: 60px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff; font-size: 18px; font-weight: 900; border: none; border-radius: 15px;
    cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px;
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3); transition: all 0.3s ease;
    margin-top: auto;
}
.btn-pay-premium:hover { transform: translateY(-3px) scale(1.02); background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }

/* 6. 表格與標籤 (固定佈局 Fixed Layout) */
.history-card { background: #fff; border-radius: 20px; box-shadow: 0 15px 50px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; overflow: hidden; height: 100%; }
.history-header { padding: 25px 30px; border-bottom: 1px solid #f1f5f9; background: #fff; }

/* 🌟 核心：強制表格固定寬度，防止變形 */
.premium-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; padding: 0 20px; table-layout: fixed; }
.premium-table thead th { border: none; color: #94a3b8; font-size: 12px; font-weight: 800; padding: 0 15px 5px 15px; }
.premium-row { background: #fff; transition: 0.2s; border-radius: 12px; }
.premium-row:hover { background: #f8fafc; transform: scale(1.01); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.premium-row td { 
    padding: 15px; border: none; vertical-align: middle; border-bottom: 1px solid #f8fafc;
    /* 文字過長自動隱藏 */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 7. 字體與標籤樣式 */
.digit-font { font-family: 'Roboto', sans-serif !important; font-weight: 700; letter-spacing: 0.5px; }
.date-text { font-size: 13px; color: #334155; font-weight: 600; }
.amount-text { color: #10b981; }
.amount-large { font-size: 17px !important; font-weight: 800 !important; }

/* 支付方式標籤 */
.method-tag { 
    font-size: 12px; font-weight: 700; color: #475569; background: #f1f5f9; 
    padding: 5px 12px; border-radius: 50px; border: 1px solid #e2e8f0; 
    display: inline-flex; align-items: center; gap: 5px; 
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; /* 支援 9 字省略 */
}
/* 回饋金特效 (保留給您使用) */
.bonus-tag { 
    background: linear-gradient(135deg, #fff0f6 0%, #ffe4e6 100%); 
    color: #db2777; border: 1px solid #fbcfe8; 
    box-shadow: 0 2px 8px rgba(219, 39, 119, 0.15); 
    animation: pulseRed 2s infinite; 
}

/* 8. 底部與其他 */
.history-footer-notice { text-align: center; padding: 25px; background: #f8fafc; border-top: 1px solid #f1f5f9; color: #64748b; font-size: 13px; font-weight: 500; }
.btn-line-support { display: inline-flex; align-items: center; justify-content: center; background: #06c755; color: #fff !important; font-weight: 900; padding: 12px 30px; border-radius: 50px; text-decoration: none; box-shadow: 0 5px 15px rgba(6, 199, 85, 0.25); transition: all 0.3s ease; margin-top: 15px; font-size: 15px; }
.btn-line-support:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(6, 199, 85, 0.35); background: #05b54d; }
.cs-link { color: #0076ff; font-weight: 700; text-decoration: none; border-bottom: 1px dashed #0076ff; }
.input-label { font-weight: 800; color: #334155; font-size: 14px; margin-bottom: 8px; display: block; }
.modern-select { height: 55px !important; border-radius: 15px !important; border: 2px solid #e2e8f0 !important; font-weight: 700 !important; color: #1e293b !important; padding: 0 45px 0 20px !important; appearance: none; -webkit-appearance: none; background: #fff; width: 100%; }
.modern-select-wrapper { position: relative; }
.select-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }

/* /* /* /* =========================================
   [V6.4] 經銷面板訂單 (Child Panel Pro Max)
   升級：功能列表霸氣放大版
   請替換 V6.3 的 Child Panel Order CSS
   ========================================= */

/* 1. 表單區塊 */
.form-section-title {
    font-size: 16px; font-weight: 800; color: #1e293b;
    margin-bottom: 25px; display: flex; align-items: center; gap: 10px;
    border-bottom: 2px solid #f1f5f9; padding-bottom: 12px;
}
.step-num {
    background: linear-gradient(135deg, #0076ff, #0056b3); 
    color: #fff; width: 28px; height: 28px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900; box-shadow: 0 4px 8px rgba(0, 118, 255, 0.3);
}

/* 2. 輸入框定位 */
.relative-position { position: relative !important; }
.input-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 18px; z-index: 5; pointer-events: none;
}
.pl-5 { padding-left: 50px !important; }

/* 3. DNS 指南 */
.dns-guide-card {
    background: #eff6ff; border: 1px dashed #bfdbfe;
    border-radius: 12px; padding: 20px;
}
.guide-title { font-size: 14px; font-weight: 700; color: #1e40af; margin-bottom: 15px; }
.ns-list {
    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;
}
.ns-list li {
    display: flex; justify-content: space-between; align-items: center;
    background: #fff; padding: 12px 18px; border-radius: 10px;
    border: 1px solid #dbeafe; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.ns-badge { font-family: 'Orbitron', monospace; font-weight: 700; color: #0284c7; letter-spacing: 0.5px; }
.guide-note { font-size: 12px; color: #64748b; margin-top: 15px; display: flex; gap: 6px; align-items: center; }

/* 4. 輸入框高度統一 */
.modern-input, .modern-select {
    height: 55px !important; border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important; font-size: 15px !important; font-weight: 600 !important;
    box-shadow: none !important; transition: 0.3s; width: 100%;
}
.modern-input:focus, .modern-select:focus {
    border-color: #0076ff !important; box-shadow: 0 0 0 4px rgba(0, 118, 255, 0.1) !important;
}
.modern-select-wrapper { position: relative; width: 100%; }

/* 5. 右側：價格方案卡片 (字體加大版) */
.plan-summary-card {
    padding: 40px 30px; text-align: center; border-top: 5px solid #f59e0b;
    position: sticky; top: 100px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.plan-header { margin-bottom: 25px; }
.plan-icon {
    width: 70px; height: 70px; background: #fffbeb; color: #f59e0b;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 32px; margin: 0 auto 15px auto;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.2);
}
.plan-header h4 { font-weight: 900; color: #1e293b; margin-bottom: 5px; font-size: 28px; }
.plan-header p { font-size: 16px; color: #64748b; font-weight: 500; }

.plan-price {
    background: #f8fafc; padding: 25px; border-radius: 15px; margin-bottom: 30px;
    border: 1px solid #f1f5f9;
}
.plan-price .currency { font-size: 18px; font-weight: 700; color: #64748b; vertical-align: top; margin-right: 5px; }
.plan-price .amount { font-size: 40px; font-weight: 900; color: #0076ff; font-family: 'Roboto', sans-serif; letter-spacing: -1px; }
.plan-price .period { font-size: 14px; color: #94a3b8; font-weight: 500; }

/* 🌟 功能列表霸氣升級 (Feature List Pro) */
.features-grid-container { background: #fff; text-align: left; }
.plan-features-grid {
    list-style: none; padding: 0; margin: 0 0 25px 0;
    display: flex; flex-direction: column; /* 改回單欄垂直排列 */
    gap: 12px; 
}
.plan-features-grid li {
    font-size: 15px; /* 字體加大 */
    color: #334155; font-weight: 700; /* 加粗 */
    display: flex; align-items: center; gap: 15px;
    background: #fff; /* 白底 */
    padding: 12px 15px; 
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: 0.2s;
}
/* 懸浮特效 */
.plan-features-grid li:hover {
    transform: translateX(5px);
    border-color: #e2e8f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    background: #f8fafc;
}
.plan-features-grid li i { font-size: 18px; width: 24px; text-align: center; }

/* 功能圖示顏色 */
.text-purple { color: #a855f7; } .text-dark { color: #1e293b; }

/* 6. LINE 客服按鈕 */
.plan-footer-action { margin-top: 20px; border-top: 1px dashed #e2e8f0; padding-top: 20px; }
.btn-contact-support {
    display: block; width: 100%; padding: 12px;
    background: #06c755; color: #fff !important; text-decoration: none; font-weight: 800;
    border-radius: 50px; box-shadow: 0 4px 10px rgba(6, 199, 85, 0.3);
    transition: 0.3s;
}
.btn-contact-support:hover {
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6, 199, 85, 0.4); background: #05b54d;
}
.btn-contact-support i { margin-right: 5px; font-size: 18px; }
.mt-5 { margin-top: 40px !important; }
/* /* /* /* =========================================
   [V7.2] 經銷面板列表 - 全寬指揮官版 (Ultra-Wide Commander)
   修正：強制欄位間距 (Gap)、全螢幕寬度、防止壓縮
   請替換 V7.1 的 CSS
   ========================================= */

/* 1. 儀表板頭部 */
.dashboard-header-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 30px 40px; border-radius: 20px; color: #fff;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.2);
    position: relative; overflow: hidden; margin-bottom: 30px;
}
.dashboard-header-card::after {
    content: ''; position: absolute; right: 0; top: 0; width: 200px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05));
    transform: skewX(-20deg);
}
.dashboard-title { font-weight: 900; margin: 0 0 8px 0; font-size: 28px; letter-spacing: 1px; }
.dashboard-subtitle { color: #94a3b8; margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; font-family: 'Orbitron', monospace; }
.system-status { 
    background: rgba(16, 185, 129, 0.2); color: #34d399; 
    padding: 8px 20px; border-radius: 50px; font-size: 14px; font-weight: 700; border: 1px solid rgba(16, 185, 129, 0.3);
}
.blink-dot {
    display: inline-block; width: 10px; height: 10px; background: #34d399; border-radius: 50%; margin-right: 8px;
    animation: blinkStatus 1.5s infinite;
}
@keyframes blinkStatus { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* 2. 列表佈局與表頭 (關鍵修正：Gap & Flex) */
.panel-grid { display: flex; flex-direction: column; gap: 20px; }
.grid-header {
    display: flex; padding: 0 35px 15px 35px;
    color: #64748b; font-size: 14px; font-weight: 700; text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0; margin-bottom: 10px;
    gap: 40px; /* 🌟 關鍵：表頭也要有間距 */
}
/* 重新分配欄位寬度 */
.col-domain { flex: 3; min-width: 280px; } /* 給網域最大空間 */
.col-status { flex: 2; min-width: 180px; } /* 給狀態足夠空間，防止壓縮 */
.col-date { flex: 1.5; }
.col-expiry { flex: 1.5; }
.col-action { flex: 1; text-align: right; }

/* 3. 科技感卡片列 (放大版 + 間距) */
.tech-card-row {
    background: #fff; border-radius: 16px;
    padding: 30px 35px;
    display: flex; align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
    position: relative; overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 🌟 核心修正：強制欄位間距 */
    gap: 40px; 
}
.tech-card-row:hover {
    transform: translateY(-5px) scale(1.005);
    box-shadow: 0 20px 50px rgba(0, 118, 255, 0.1);
    border-color: #bfdbfe; z-index: 10;
}
.deco-line {
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    background: #cbd5e1; transition: 0.3s;
}
.tech-card-row:hover .deco-line { background: #0076ff; box-shadow: 0 0 15px #0076ff; }
.row-item { font-size: 15px; color: #334155; }

/* 4. 網域徽章 */
.domain-badge { display: flex; align-items: center; gap: 20px; }
.server-icon {
    width: 55px; height: 55px; background: #f1f5f9; color: #475569;
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; transition: 0.3s; flex-shrink: 0; /* 防止 Icon 被壓縮 */
}
.tech-card-row:hover .server-icon { background: #0076ff; color: #fff; }
.domain-info { display: flex; flex-direction: column; gap: 4px; overflow: hidden; } /* 防止文字溢出 */
.domain-url { font-weight: 900; font-size: 18px; color: #1e293b; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.domain-id { font-size: 12px; color: #94a3b8; font-family: 'Orbitron', monospace; font-weight: 700; }

/* 5. 狀態能量條 (顏色修復) */
.status-energy { width: 100%; max-width: 100%; /* 讓它填滿容器 */ }
.energy-bar {
    height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 8px;
}
.energy-bar .fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
.status-text { font-size: 13px; font-weight: 800; text-transform: uppercase; display: block; white-space: nowrap; }

/* 狀態配色 */
.active .fill { background: #10b981; box-shadow: 0 0 10px #10b981; }
.text-active { color: #10b981; }

.pending .fill { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }
.text-pending { color: #f59e0b; }

.terminated .fill { background: #ef4444; box-shadow: 0 0 10px #ef4444; }
.text-terminated { color: #ef4444; }

.frozen .fill { background: #3b82f6; }
.text-frozen { color: #3b82f6; }

/* 6. 日期與到期日 */
.tech-date { color: #64748b; font-weight: 600; font-size: 14px; white-space: nowrap; }
.expiry-counter {
    background: #fff7ed; border: 1px solid #ffedd5;
    padding: 6px 15px; border-radius: 10px; display: inline-block; white-space: nowrap;
}
.expiry-label { display: block; font-size: 11px; color: #9a3412; text-transform: uppercase; font-weight: 800; margin-bottom: 2px; }
.expiry-val { font-size: 15px; font-weight: 800; color: #c2410c; font-family: 'Roboto', sans-serif; }
.expiry-stopped { color: #cbd5e1; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }

/* 7. 操作按鈕 */
.btn-command-center {
    display: inline-flex; align-items: center; justify-content: center;
    background: #0f172a; color: #fff !important;
    padding: 10px 20px; border-radius: 8px;
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: 0.3s; border: 1px solid #1e293b;
    white-space: nowrap;
}
.btn-command-center:hover {
    background: #0076ff; border-color: #0076ff;
    box-shadow: 0 0 20px rgba(0, 118, 255, 0.4);
    transform: translateY(-3px);
}
.btn-command-center i { font-size: 11px; margin-left: 8px; }
.locked-icon { color: #94a3b8; font-weight: 600; font-size: 13px; white-space: nowrap; }

/* 8. 警報通知 */
.tech-alert { display: flex; align-items: center; gap: 20px; padding: 20px 25px; border-radius: 16px; margin-bottom: 25px; }
.renew-alert { background: #fffbeb; border: 2px dashed #f59e0b; }
.restore-alert { background: #fef2f2; border: 2px dashed #ef4444; }
.tech-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.renew-alert .tech-icon { background: #fcd34d; color: #92400e; }
.restore-alert .tech-icon { background: #fecaca; color: #991b1b; }
.tech-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tech-content strong { font-size: 15px; color: #334155; }
.btn-tech-action { background: #fff; padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 800; color: #334155; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: 0.2s; white-space: nowrap; }
.btn-tech-action:hover { transform: scale(1.05); color: #0076ff; }

/* 9. 空狀態 */
.empty-zone { padding: 100px 20px; text-align: center; background: radial-gradient(circle, #f8fafc 0%, #fff 70%); border-radius: 20px; border: 2px dashed #e2e8f0; }
.hologram-icon { font-size: 70px; color: #e2e8f0; margin-bottom: 25px; animation: floatMascot 4s infinite ease-in-out; }
.empty-zone h5 { font-family: 'Orbitron'; font-weight: 900; color: #94a3b8; letter-spacing: 2px; font-size: 20px; }
.btn-initialize { background: #0076ff; color: #fff; padding: 15px 40px; border-radius: 50px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 25px rgba(0, 118, 255, 0.25); transition: 0.3s; margin-top: 20px; display: inline-block; }
.btn-initialize:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0, 118, 255, 0.35); color: #fff; }

/* 手機版調整 */
@media (max-width: 768px) {
    .grid-header { display: none; }
    .tech-card-row { flex-direction: column; align-items: flex-start; gap: 20px; padding: 25px; }
    .row-item { width: 100%; display: flex; justify-content: space-between; align-items: center; }
    .col-action { margin-top: 10px; justify-content: flex-end; }
    .deco-line { width: 100%; height: 6px; top: 0; bottom: auto; }
    .btn-command-center { width: 100%; }
}
/* =========================================
   [V10.6] 服務動態 - 最終校正版
   修正：漲價改為黃橘色、邏輯精準分流
   請替換 V10.2 的 CSS
   ========================================= */

/* 1. 頁面標題 */
.page-header-glass {
    display: flex; align-items: center; gap: 20px;
    background: #fff; padding: 20px 30px; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #f1f5f9;
    position: relative; overflow: hidden;
}
.header-icon-box {
    width: 60px; height: 60px; background: linear-gradient(135deg, #0f172a, #334155);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 24px; box-shadow: 0 5px 15px rgba(15, 23, 42, 0.3);
}
.header-content .title { font-weight: 900; color: #1e293b; margin: 0; font-size: 24px; }
.header-content .subtitle { color: #64748b; margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.live-badge {
    margin-left: auto; background: #ecfdf5; color: #10b981;
    padding: 6px 15px; border-radius: 50px; font-weight: 800; font-size: 12px;
    display: flex; align-items: center; gap: 8px; border: 1px solid #a7f3d0;
}
.pulse-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: blinkStatus 1.5s infinite; }

/* 2. 工具列 */
.toolbar-glass { margin-bottom: 25px; }
.btn-3d-glass-filter {
    width: 100%; height: 55px; background: linear-gradient(145deg, #ffffff, #f0f2f5);
    border: 1px solid #fff; border-radius: 12px;
    box-shadow: 5px 5px 10px #d1d5db, -5px -5px 10px #ffffff;
    display: flex; align-items: center; padding: 0 15px; gap: 10px;
    color: #334155; font-weight: 700; transition: all 0.2s ease;
}
.btn-3d-glass-filter:active, .btn-3d-glass-filter[aria-expanded="true"] {
    box-shadow: inset 3px 3px 6px #d1d5db, inset -3px -3px 6px #ffffff; color: #0076ff;
}
.filter-icon { width: 30px; height: 30px; background: #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #64748b; }
.btn-3d-glass-filter:hover .filter-icon { background: #0076ff; color: #fff; }
.dropdown-menu-3d {
    border: none; padding: 10px; margin-top: 15px !important; border-radius: 16px; background: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); width: 100%; animation: dropdownFade 0.3s ease;
}
@keyframes dropdownFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-menu-3d li { margin-bottom: 5px; }
.dropdown-menu-3d .dropdown-item {
    padding: 12px 15px; border-radius: 10px; font-weight: 600; color: #475569;
    display: flex; align-items: center; gap: 10px; transition: 0.2s;
}
.dropdown-menu-3d .dropdown-item:hover, .dropdown-menu-3d li.active .dropdown-item { background: #f1f5f9; color: #0076ff; transform: translateX(5px); }
.search-glass-group {
    display: flex; align-items: center; background: #fff; border: 2px solid #e2e8f0;
    border-radius: 12px; height: 55px; padding: 5px; transition: 0.3s;
}
.search-glass-group:focus-within { border-color: #0076ff; box-shadow: 0 0 0 4px rgba(0, 118, 255, 0.1); }
.search-icon { padding: 0 20px; color: #94a3b8; }
.input-glass { border: none; background: transparent; height: 100%; flex: 1; outline: none; font-weight: 600; color: #1e293b; }
.btn-glass-search {
    background: #0f172a; color: #fff; border: none; height: 100%; padding: 0 30px; border-radius: 8px; font-weight: 700; transition: 0.3s;
}
.btn-glass-search:hover { background: #0076ff; }

/* 3. Grid 對齊 */
.updates-grid-container { display: flex; flex-direction: column; gap: 15px; }
.grid-header-row, .grid-content-row {
    display: grid; grid-template-columns: 160px 1.5fr 160px 2.5fr;
    gap: 30px; align-items: center; padding: 0 30px;
}
.grid-header-row { margin-bottom: 5px; color: #94a3b8; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.grid-content-row {
    background: #fff; height: auto; min-height: 90px;
    border-radius: 16px; border: 1px solid #f1f5f9;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    padding-top: 20px; padding-bottom: 20px; transition: 0.2s;
}
.grid-content-row:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); z-index: 10; }

/* 高亮邊框特效 */
.highlight-cyan { border-left: 5px solid #06b6d4; } /* 新服務 */
.highlight-purple { border-left: 5px solid #8b5cf6; } /* 恢復 */
.highlight-red-dark { border-left: 5px solid #dc2626; } /* 停用 */
.highlight-green { border-left: 5px solid #10b981; } /* 降價 */
.highlight-orange { border-left: 5px solid #f59e0b; } /* 漲價 (橘黃) */
.highlight-blue-dark { border-left: 5px solid #3b82f6; } /* 預設 */

/* 4. 3D 狀態膠囊 */
.status-3d-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 50px;
    font-size: 13px; font-weight: 800; color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); width: 100%; justify-content: center;
    transition: 0.2s; white-space: nowrap;
}
.status-3d-pill:hover { transform: scale(1.05); }

/* 膠囊配色 (校正) */
.pill-new { background: linear-gradient(135deg, #06b6d4, #0891b2); box-shadow: 0 5px 15px rgba(6, 182, 212, 0.4); } /* 新品藍 */
.pill-enabled { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4); } /* 恢復紫 */
.pill-disabled { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 5px 15px rgba(220, 38, 38, 0.4); } /* 停用紅 */
.pill-down { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4); } /* 降價綠 */
.pill-up { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4); } /* 漲價黃橘 */
.pill-default { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); } /* 預設藍 */
.pill-icon { font-size: 14px; }

/* 5. 內容樣式 */
.service-wrapper { display: flex; flex-direction: column; gap: 5px; }
.id-neon-tag {
    display: inline-block; background: #0f172a; color: #00f2fe; padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 700; font-family: monospace; width: fit-content;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}
.service-name-text { font-size: 15px; font-weight: 700; color: #1e293b; line-height: 1.4; }
.date-glass {
    background: #f8fafc; color: #64748b; padding: 6px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0;
}

/* 6. 全彩詳細說明 (校正) */
.trading-note {
    padding: 12px 15px; border-radius: 10px; border-left: 4px solid;
    display: flex; gap: 10px; align-items: flex-start;
}
.note-new { background: #ecfeff; border-left-color: #06b6d4; color: #0e7490; }
.note-enabled { background: #f5f3ff; border-left-color: #8b5cf6; color: #5b21b6; }
.note-disabled { background: #fef2f2; border-left-color: #ef4444; color: #991b1b; }
.note-down { background: #f0fdf4; border-left-color: #10b981; color: #065f46; }
.note-up { background: #fffbeb; border-left-color: #f59e0b; color: #92400e; } /* 漲價黃橘 */
.note-default { background: #eff6ff; border-left-color: #3b82f6; color: #1e40af; }

.note-icon { font-size: 16px; margin-top: 2px; opacity: 0.8; }
.note-content { font-size: 14px; line-height: 1.6; font-weight: 600; }

/* 7. 分頁 */
.glass-pagination { display: inline-flex; gap: 5px; list-style: none; padding: 0; }
.glass-pagination li a {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: #fff; color: #64748b; font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; text-decoration: none;
}
.glass-pagination li.active a, .glass-pagination li a:hover { background: #0f172a; color: #fff; border-color: #0f172a; }

/* 手機版 RWD */
@media (max-width: 768px) {
    .grid-header-row { display: none; }
    .grid-content-row { grid-template-columns: 1fr; gap: 15px; padding: 25px; height: auto; }
    .gc-status { width: 100%; } .status-3d-pill { width: fit-content; }
    .highlight-green, .highlight-red-dark, .highlight-cyan, .highlight-purple, .highlight-orange, .highlight-blue-dark { border-left: none; border-top: 5px solid; }
}
/* =========================================
   [V11.4] 主選單通知氣泡 (修復版)
   修正：隱藏系統舊Badge、改用琥珀金配色
   ========================================= */

/* 1. 🌟 核心修正：強制隱藏系統原本的 Badge */
/* 這行會把那個黃色的舊數字藏起來，只留我們新的 */
.nav-item-tech .badge {
    display: none !important;
}

/* 2. 氣泡容器 (改用琥珀金) */
.chat-notify-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: auto;
    margin-right: 5px;
    
    /* 🎨 顏色修改：改為琥珀金 (Amber) */
    color: #f59e0b; 
    font-size: 22px; /* 稍微放大一點點 */
    
    /* 動畫：搖擺 */
    animation: bubbleWiggle 3s infinite ease-in-out;
    transform-origin: bottom center;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3)); /* 加一點金色光暈 */
}

/* 3. 數字標籤 (保持紅色，但加強對比) */
.bubble-count {
    position: absolute;
    top: -6px;
    right: -8px;
    
    background: #ef4444; /* 紅色 */
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Roboto', sans-serif;
    
    min-width: 18px; /* 稍微大一點 */
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff; 
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
    z-index: 2;
}

/* 4. 動畫定義：搖擺 */
@keyframes bubbleWiggle {
    0%, 100% { transform: rotate(0deg); }
    5% { transform: rotate(10deg); }
    10% { transform: rotate(-10deg); }
    15% { transform: rotate(5deg); }
    20% { transform: rotate(-5deg); }
    25% { transform: rotate(0deg); }
}

/* 5. 滑鼠懸停與選中狀態 */
/* 當選單被選中(active)時，氣泡變為白色以適應藍底 */
.nav-item-tech.active .chat-notify-bubble,
.nav-item-tech:hover .chat-notify-bubble {
    color: #fff; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    animation: none;
    transform: scale(1.1);
    transition: 0.2s;
}

.nav-item-tech.active .bubble-count,
.nav-item-tech:hover .bubble-count {
    border-color: #0076ff; /* 邊框變色以融入背景 */
    background: #ff4757;   /* 數字保持亮紅 */
}
/* /* /* ==========================================================================
   ★ [V13.1 Final] 全螢幕智能客服指揮中心
   包含：間距優化、科技選單、未讀霓虹標籤、防變形鎖定
   ========================================================================== */

/* --- 1. 左側表單卡片 (強制防爆) --- */
.ticket-form-card {
    background: #fff; border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border: 1px solid #f1f5f9; height: 100%;
    overflow: hidden; display: flex; flex-direction: column;
}

.card-header-gradient {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    padding: 20px 25px; color: #fff; font-weight: 800; font-size: 18px;
    display: flex; align-items: center; gap: 12px;
}
.header-icon-pulse {
    width: 36px; height: 36px; background: rgba(255,255,255,0.2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
}
.card-body-glass { padding: 30px; overflow-y: visible; overflow-x: hidden; }

/* --- 2. 3D 表單元件 --- */
.input-label-3d {
    font-size: 14px; color: #334155; font-weight: 700;
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.input-group-3d { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 15px; color: #94a3b8; z-index: 2; }
.input-3d {
    height: 55px !important; padding-left: 45px; border-radius: 12px !important;
    background: #f8fafc; border: 2px solid #e2e8f0; font-weight: 600; color: #334155;
    transition: 0.3s; width: 100%;
}
.input-3d:focus { background: #fff; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); }

/* --- 3. ★ 科技邊框選單 (Cyber Select) --- */
.cyber-select-wrapper {
    position: relative; border-radius: 12px;
    background: #f8fafc; transition: 0.3s;
}
/* 漸層邊框效果 */
.cyber-select-wrapper::before {
    content: ''; position: absolute; inset: 0; border-radius: 12px; padding: 2px;
    background: linear-gradient(45deg, #e2e8f0, #e2e8f0); 
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: 0.3s;
}
.cyber-select-wrapper:hover::before, .cyber-select-wrapper:focus-within::before {
    background: linear-gradient(45deg, #4f46e5, #00f2fe); /* 懸浮時變雷射色 */
}

.cyber-select {
    height: 55px !important; border-radius: 12px !important; appearance: none; -webkit-appearance: none;
    background: transparent !important; border: none !important;
    padding-left: 20px; padding-right: 40px; font-weight: 700; color: #334155;
    cursor: pointer; width: 100%; position: relative; z-index: 2; outline: none !important;
}
.cyber-arrow {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    color: #64748b; pointer-events: none; z-index: 1; transition: 0.3s;
}
.cyber-select-wrapper:hover .cyber-arrow { color: #4f46e5; transform: translateY(-50%) scale(1.2); }

/* --- 4. 🛑 核彈級防變形 (Addfunds Logic) --- */
.force-contain, #ticket-fields, .dynamic-fields-container {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
    display: block !important; overflow: hidden !important;
}
#ticket-fields .row { margin: 0 !important; width: 100% !important; display: block !important; }
#ticket-fields [class*="col-"] {
    float: none !important; width: 100% !important; padding: 0 !important; margin-bottom: 15px !important; display: block !important; flex: none !important;
}
#ticket-fields label { font-size: 14px !important; color: #334155 !important; font-weight: 700 !important; margin-bottom: 8px !important; display: block !important; text-align: left !important; }
#ticket-fields input, #ticket-fields select, #ticket-fields textarea, #ticket-fields .form-control {
    width: 100% !important; height: 55px !important; border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important; background: #f8fafc !important;
    box-shadow: none !important; padding: 0 15px !important; box-sizing: border-box !important;
    color: #334155 !important; font-weight: 600 !important; display: block !important; outline: none !important; transition: 0.3s !important;
}
#ticket-fields textarea { height: auto !important; min-height: 150px !important; padding: 15px !important; }
#ticket-fields input:focus, #ticket-fields select:focus, #ticket-fields textarea:focus {
    border-color: #4f46e5 !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
}
#ticket-fields hr, #ticket-fields .help-block { display: none !important; }

/* --- 5. 文本區域與上傳 --- */
.textarea-3d {
    border-radius: 12px !important; background: #f8fafc; border: 2px solid #e2e8f0;
    padding: 20px; font-weight: 500; min-height: 150px; resize: vertical; width: 100%;
}
.textarea-3d:focus { border-color: #4f46e5; background: #fff; }
.upload-zone-wrapper {
    background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px;
    padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.upload-zone-wrapper:hover { border-color: #4f46e5; background: #eff6ff; }
.upload-icon-box { font-size: 24px; color: #94a3b8; }
.upload-label { font-size: 14px; font-weight: 800; color: #334155; }
.upload-sub { font-size: 12px; color: #94a3b8; }
.tickets-uploader input[type="file"] { margin: 10px auto 0 auto; max-width: 100%; }
.btn-submit-ticket {
    width: 100%; height: 55px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #0f172a, #334155); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: 1px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2); transition: 0.3s;
}
.btn-submit-ticket:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(15, 23, 42, 0.3); background: #0076ff; }

/* --- 6. 右側佈局 --- */
.ticket-dashboard-wrapper { display: flex; gap: 30px; align-items: flex-start; }
.td-sidebar { width: 420px; flex-shrink: 0; min-width: 420px; }
.td-main { flex-grow: 1; min-width: 0; }

.dashboard-header-glass {
    background: #fff; border-radius: 16px; padding: 20px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: space-between;
}
.header-left { display: flex; align-items: center; gap: 20px; }
.header-icon-box {
    width: 50px; height: 50px; background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
}
.header-text .title { font-weight: 900; color: #1e293b; margin: 0; font-size: 22px; }
.header-text .subtitle { color: #64748b; margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.live-badge {
    background: #ecfdf5; color: #10b981; padding: 6px 15px; border-radius: 50px;
    font-weight: 800; font-size: 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #a7f3d0;
}
.pulse-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: blinkStatus 1.5s infinite; }

.history-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; flex-wrap: wrap; gap: 15px; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px;
}
.title-decoration { font-size: 18px; font-weight: 800; color: #1e293b; display: flex; align-items: center; gap: 10px; }
.title-decoration i { color: #6366f1; background: #e0e7ff; padding: 8px; border-radius: 8px; }
.clean-search-group {
    display: flex; align-items: center; background: #fff; border: 1px solid #cbd5e1;
    border-radius: 8px; height: 40px; width: 260px; transition: 0.3s;
}
.clean-search-group:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }
.search-icon-clean { padding: 0 12px; color: #94a3b8; font-size: 14px; }
.clean-search-input { border: none; background: transparent; height: 100%; width: 100%; outline: none; font-size: 13px; font-weight: 600; color: #334155; }

/* --- 7. 工單列表 --- */
.ticket-grid-container { display: flex; flex-direction: column; gap: 12px; }
.ticket-grid-header, .ticket-grid-row {
    display: grid; grid-template-columns: 80px 1fr 110px 130px; gap: 20px; align-items: center; padding: 0 25px;
}
.ticket-grid-header { color: #94a3b8; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.ticket-grid-row {
    background: #fff; height: 80px; border-radius: 16px; border: 1px solid #f1f5f9;
    text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: 0.2s; position: relative; overflow: hidden;
}
.ticket-grid-row:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.06); z-index: 10; }
.border-neon-green { border-left: 5px solid #10b981; }
.border-orange { border-left: 5px solid #f59e0b; }
.border-gray { border-left: 5px solid #cbd5e1; opacity: 0.9; }

.td-id { font-family: 'Orbitron', monospace; font-weight: 700; color: #64748b; font-size: 13px; }
.hash { color: #cbd5e1; margin-right: 2px; }
.td-subject { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.subject-line {
    font-size: 15px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px;
}
.preview-line { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.td-time { font-size: 12px; color: #94a3b8; font-weight: 600; text-align: right; }

/* ★ 霓虹未讀標籤 (New Badge) */
.badge-unread-neon {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 4px;
    font-weight: 800; box-shadow: 0 0 10px rgba(244, 63, 94, 0.4);
    animation: unreadPulse 2s infinite;
}
@keyframes unreadPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

/* 狀態膠囊 & 動畫 */
.ticket-3d-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 0; width: 100%; border-radius: 50px; font-size: 12px; font-weight: 800; color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.3); text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.tp-answered { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); }
.tp-pending { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3); }
.tp-closed { background: linear-gradient(135deg, #64748b, #475569); box-shadow: 0 5px 15px rgba(100, 116, 139, 0.3); }
.tp-default { background: linear-gradient(135deg, #3b82f6, #2563eb); }
@keyframes bounceIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.anim-bounce { animation: bounceIcon 2s infinite ease-in-out; display: inline-block; }
@keyframes swingIcon { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } }
.anim-swing { animation: swingIcon 2s infinite ease-in-out; display: inline-block; transform-origin: top center; }

/* 分頁 */
.js-pagination-controls { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.js-page-btn {
    width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;
    color: #64748b; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.js-page-btn:hover { background: #f1f5f9; color: #4f46e5; }
.js-page-btn.active { background: #0f172a; color: #fff; border-color: #0f172a; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.3); }
.js-page-btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* RWD */
@media (max-width: 991px) {
    .ticket-dashboard-wrapper { flex-direction: column; }
    .td-sidebar { width: 100%; min-width: 0; }
    .ticket-grid-header { display: none; }
    .ticket-grid-row { grid-template-columns: 1fr; height: auto; padding: 20px; gap: 15px; }
    .td-status { width: fit-content; } .ticket-3d-pill { width: auto; padding: 6px 15px; }
    .td-time { text-align: left; }
    .border-neon-green, .border-orange, .border-gray { border-left: none; border-top: 5px solid; }
}

/* 主選單修復 */
.nav-item-tech .badge { display: none !important; }
.chat-notify-bubble {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    margin-left: auto; margin-right: 5px; color: #f59e0b; font-size: 22px;
    animation: bubbleWiggle 3s infinite ease-in-out; transform-origin: bottom center; filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}
.bubble-count {
    position: absolute; top: -6px; right: -8px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; font-family: 'Roboto', sans-serif;
    min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4); z-index: 2;
}
@keyframes bubbleWiggle { 0%, 100% { transform: rotate(0deg); } 5% { transform: rotate(10deg); } 10% { transform: rotate(-10deg); } 15% { transform: rotate(5deg); } 20% { transform: rotate(-5deg); } 25% { transform: rotate(0deg); } }
.nav-item-tech.active .chat-notify-bubble, .nav-item-tech:hover .chat-notify-bubble { color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); animation: none; transform: scale(1.1); transition: 0.2s; }
.nav-item-tech.active .bubble-count, .nav-item-tech:hover .bubble-count { border-color: #0076ff; background: #ff4757; }
/* /* /* /* /* ==========================================================================
   ★ [V14.6 Final] 工單詳情 (ViewTicket) - 全能通訊指揮官 (完整修復版)
   包含：紅色結案、氣泡UI找回、工具列自適應、Emoji列
   ========================================================================== */

/* --- 1. 頂部儀表板 (Header) --- */
.ticket-header-pro {
    background: #fff; padding: 25px 30px; border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); border: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}
.header-main { display: flex; align-items: center; gap: 20px; flex: 1; }

.btn-back-pulse {
    width: 45px; height: 45px; border-radius: 12px; background: #f8fafc;
    color: #64748b; display: flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; text-decoration: none; transition: 0.3s;
}
.btn-back-pulse:hover { background: #0f172a; color: #fff; box-shadow: 0 5px 15px rgba(15, 23, 42, 0.3); }

/* 狀態標籤 */
.meta-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }

/* 🟢 處理中 (Processing) */
.status-active {
    background: #ecfdf5; color: #059669; padding: 4px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 6px;
    border: 1px solid #a7f3d0;
}
.status-dot { width: 6px; height: 6px; background: #10b981; border-radius: 50%; animation: blinkStatus 2s infinite; }

/* 🔴 已結案 (Closed) - 強制紅色 */
.status-closed {
    background: #fef2f2 !important; color: #ef4444 !important;
    padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 800;
    display: flex; align-items: center; gap: 6px; border: 1px solid #fca5a5 !important;
}

.ticket-id-pro { font-family: 'Orbitron', monospace; color: #94a3b8; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.ticket-subject-pro { font-size: 20px; font-weight: 800; color: #1e293b; margin: 0; line-height: 1.4; }
.last-update { font-size: 12px; color: #64748b; font-weight: 600; background: #f1f5f9; padding: 6px 12px; border-radius: 50px; }

/* --- 2. 對話流 (Chat Stream) - 這裡控制氣泡 --- */
.chat-stream-pro { display: flex; flex-direction: column; gap: 30px; padding: 10px 0; }
.chat-row { display: flex; width: 100%; gap: 20px; }
.user-row { flex-direction: row; justify-content: flex-end; }
.support-row { flex-direction: row; justify-content: flex-start; }

/* 頭像 (Avatar) */
.avatar-wrapper { position: relative; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.chat-avatar {
    width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2; box-shadow: 0 5px 15px rgba(0,0,0,0.1); font-size: 20px;
}
/* 用戶頭像 (太空人) - 漸層紫 */
.avatar-user-pro {
    background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff;
    border: 2px solid #fff;
}
/* 官方頭像 (耳機) - 黑底藍光 */
.avatar-support-pro { background: #0f172a; color: #00f2fe; border: 2px solid #fff; }

/* 雷達波 */
.radar-wave {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; border-radius: 50%;
    border: 1px solid rgba(0, 242, 254, 0.5); animation: radarPulse 2s infinite ease-out; z-index: 1;
}
@keyframes radarPulse { 0% { width: 100%; height: 100%; opacity: 0.8; } 100% { width: 200%; height: 200%; opacity: 0; } }

/* 氣泡與內容 */
.chat-content { max-width: 75%; display: flex; flex-direction: column; }
.user-row .chat-content { align-items: flex-end; }
.support-row .chat-content { align-items: flex-start; }

.chat-author-label { font-size: 13px; font-weight: 800; color: #1e293b; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.verified-badge { color: #0076ff; font-size: 14px; filter: drop-shadow(0 0 2px rgba(0, 118, 255, 0.4)); }

/* ★ 氣泡核心樣式 (這段不見會導致氣泡消失) */
.chat-bubble {
    padding: 18px 25px; border-radius: 18px; font-size: 15px; line-height: 1.6;
    position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.03); word-wrap: break-word;
}
/* 用戶氣泡 */
.bubble-user-pro {
    background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff;
    border-bottom-right-radius: 4px; box-shadow: 0 10px 25px rgba(79, 70, 229, 0.2);
}
/* 官方氣泡 */
.bubble-support-pro {
    background: #fff; color: #334155; border: 1px solid #e2e8f0;
    border-left: 4px solid #0076ff; border-bottom-left-radius: 4px;
}
.chat-time-label { font-size: 11px; color: #94a3b8; margin-top: 8px; font-weight: 600; }

/* 附件 */
.user-attach .file-link { color: #fff; text-decoration: underline; display: block; margin-top: 5px; font-size: 13px; }
.support-attach .file-link { color: #0076ff; font-weight: 700; display: block; margin-top: 5px; font-size: 13px; }

/* --- 3. 專業控制台 (Console) --- */
.pro-console-wrapper {
    background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid #cbd5e1; box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* ★ 快捷工具列 (自適應修復版) */
.chat-toolbar-row {
    background: #f8fafc;
    padding: 12px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* 關鍵：空間不足自動換行 */
    gap: 15px;       /* 增加間距 */
}

.emoji-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap; /* Emoji 太多也可以換行 */
    align-items: center;
}

.emoji-btn {
    cursor: pointer;
    font-size: 20px;
    transition: 0.2s;
    display: inline-block;
    line-height: 1;
}
.emoji-btn:hover { transform: scale(1.3); }

/* 快捷按鈕樣式優化 */
.btn-quick-reply {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: 0.2s;
    white-space: nowrap;     /* 預設不換行 */
    max-width: 100%;         /* 防止超出 */
}
.btn-quick-reply:hover {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.console-textarea {
    width: 100%; border: none; padding: 20px; font-size: 15px; resize: vertical; outline: none;
    min-height: 120px; background: #fff; color: #334155;
}
.console-textarea:focus { background: #fafafa; }

.console-toolbar {
    padding: 15px 20px; background: #fff; border-top: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: center;
}

.tickets-uploader .btn {
    background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1;
    border-radius: 8px; font-weight: 700; padding: 8px 15px; font-size: 13px; transition: 0.2s;
}
.tickets-uploader .btn:hover { background: #e2e8f0; color: #1e293b; }

.btn-send-pro {
    background: #0f172a; color: #fff; border: none; padding: 10px 30px;
    border-radius: 10px; font-weight: 800; display: flex; align-items: center; gap: 8px;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.2); transition: 0.3s;
}
.btn-send-pro:hover {
    background: #0076ff; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 118, 255, 0.3);
}

.ticket-closed-banner {
    background: #f1f5f9; color: #64748b; text-align: center; padding: 30px;
    border-radius: 16px; font-weight: 700; font-size: 16px; border: 2px dashed #cbd5e1;
}

/* RWD 手機版優化：強制分行並填滿 */
@media (max-width: 768px) {
    .chat-header-pro { flex-direction: column; align-items: flex-start; }
    .chat-row { gap: 10px; }
    .avatar-wrapper, .chat-avatar { width: 35px; height: 35px; font-size: 14px; }
    .chat-content { max-width: 85%; }
    .chat-bubble { padding: 12px 15px; font-size: 14px; }
    
    /* 工具列 RWD */
    .console-toolbar { flex-direction: column; gap: 15px; align-items: stretch; }
    .btn-send-pro { justify-content: center; }

    .chat-toolbar-row {
        flex-direction: column; /* 垂直排列 */
        align-items: stretch;   /* 拉伸填滿 */
        gap: 15px;
    }
    .emoji-bar {
        justify-content: center; /* Emoji 置中 */
        padding-bottom: 5px;
        border-bottom: 1px dashed #e2e8f0;
    }
    .btn-quick-reply {
        width: 100%;          /* 按鈕全寬 */
        white-space: normal;  /* 允許文字換行 */
        padding: 10px 15px;
    }
}/* /* /* ==========================================================================
   ★ [V15.2 Final] 帳號設定中心 - 數據儀表板擴充
   包含：完美對齊修復、歡迎卡片、數據方塊、全螢幕適配
   ========================================================================== */

/* --- 1. 頂部標題 --- */
.account-header-glass {
    background: #fff; padding: 25px 30px; border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); border: 1px solid #f1f5f9;
    margin-bottom: 30px;
}
.header-top-row { display: flex; align-items: center; justify-content: space-between; }
.header-content { display: flex; align-items: center; gap: 20px; }
.header-icon-box {
    width: 50px; height: 50px; background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
}
.header-text .title { font-weight: 900; color: #1e293b; margin: 0; font-size: 22px; }
.header-text .subtitle { color: #64748b; margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

/* --- 2. 頂部橫向導航 --- */
.account-nav-wrapper { border-top: 1px solid #f1f5f9; padding-top: 15px; }
.account-nav-top { display: flex; gap: 10px; flex-wrap: wrap; }
.account-nav-top li a {
    color: #64748b; font-weight: 700; padding: 10px 20px; border-radius: 50px;
    transition: 0.3s; display: flex; align-items: center; gap: 8px; font-size: 14px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.account-nav-top li a:hover { background: #e0e7ff; color: #4f46e5; }
.account-nav-top li.active a {
    background: #4f46e5; color: #fff; border-color: #4f46e5;
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
}

/* --- 3. ★ 新增：歡迎卡片 (Welcome Banner) --- */
.welcome-banner-glass {
    background: linear-gradient(135deg, #fff, #f8fafc);
    border-radius: 20px; padding: 25px 30px;
    border: 1px solid #f1f5f9; box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}
.welcome-left { display: flex; align-items: center; gap: 20px; }
.user-avatar-lg {
    width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 28px; box-shadow: 0 5px 20px rgba(99, 102, 241, 0.3);
}
.welcome-text h3 { margin: 0; font-weight: 800; color: #1e293b; font-size: 20px; }
.welcome-text p { margin: 0; color: #64748b; font-size: 13px; font-weight: 500; }

.badge-level-pro {
    background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff;
    padding: 8px 16px; border-radius: 50px; font-weight: 800; font-size: 13px;
    display: flex; align-items: center; gap: 8px; box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
}

/* --- 4. ★ 新增：數據方塊 (Stats Grid) --- */
.stats-grid-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.stat-box-glass {
    background: #fff; border-radius: 16px; padding: 20px 25px;
    border: 1px solid #f1f5f9; box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden;
}
.stat-info { z-index: 2; }
.stat-label { display: block; font-size: 12px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.stat-value { font-size: 24px; font-weight: 900; color: #1e293b; margin: 0; }
.stat-icon {
    font-size: 40px; opacity: 0.1; position: absolute; right: 20px; bottom: 10px; z-index: 1;
}

/* 餘額卡片配色 */
.balance-box { border-left: 5px solid #4f46e5; }
.balance-box .stat-icon { color: #4f46e5; }
.btn-mini-add {
    background: #ecfdf5; color: #059669; padding: 5px 12px; border-radius: 50px;
    font-size: 12px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 5px; z-index: 2;
}
.btn-mini-add:hover { background: #10b981; color: #fff; text-decoration: none; }

/* 消費卡片配色 */
.spent-box { border-left: 5px solid #ec4899; }
.spent-box .stat-icon { color: #ec4899; }

/* --- 5. 內容卡片 --- */
.account-content-card {
    background: #fff; border-radius: 16px; border: 1px solid #f1f5f9;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); overflow: hidden; height: 100%;
}
.card-header-line { padding: 20px 25px; border-bottom: 1px solid #f1f5f9; background: #fcfcfc; }
.card-title { margin: 0; font-weight: 800; color: #1e293b; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.card-body-pro { padding: 30px; }

/* 輸入框 Pro */
.input-label-pro { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 8px; display: block; }
.input-group-pro { position: relative; }
.input-group-pro .input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.input-pro {
    height: 50px; border-radius: 10px; border: 2px solid #e2e8f0; background: #f8fafc;
    padding-left: 15px; font-weight: 600; color: #334155; width: 100%; transition: 0.3s;
}
.input-group-pro .input-pro { padding-left: 45px; } 
.input-pro:focus { background: #fff; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); }
.input-pro[readonly], .input-pro[disabled] { background: #f1f5f9; color: #64748b; cursor: not-allowed; }

/* 按鈕 */
.btn-action-pro {
    background: #fff; border: 2px solid #e2e8f0; color: #475569; padding: 10px 20px;
    border-radius: 10px; font-weight: 700; transition: 0.3s; cursor: pointer;
}
.btn-action-pro:hover { border-color: #4f46e5; color: #4f46e5; background: #eff6ff; }

.btn-save-pro {
    background: linear-gradient(135deg, #0f172a, #334155); color: #fff; border: none;
    padding: 12px 30px; border-radius: 10px; font-weight: 800; transition: 0.3s;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.2); width: 100%;
}
.btn-save-pro:hover { background: #0076ff; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 118, 255, 0.3); }

.btn-danger-glow { color: #ef4444; border-color: #fca5a5; }
.btn-danger-glow:hover { background: #fef2f2; border-color: #ef4444; color: #b91c1c; }

/* --- 6. API Key 亮色版 --- */
.api-display-group-light {
    display: flex; gap: 10px; background: #f8fafc; padding: 5px; border-radius: 10px; border: 1px solid #e2e8f0;
}
.api-input-light {
    background: transparent; border: none; color: #0f172a; font-family: 'Orbitron', monospace; font-weight: 700;
    font-size: 14px; width: 100%; padding: 0 15px; letter-spacing: 1px;
}
.btn-copy-api-light {
    background: #fff; color: #64748b; border: 1px solid #cbd5e1; padding: 8px 15px;
    border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; white-space: nowrap;
}
.btn-copy-api-light:hover { background: #e0e7ff; color: #4f46e5; border-color: #4f46e5; }

/* --- 7. Modal & Others --- */
.modal-content-pro { background: #fff; border-radius: 20px; border: none; box-shadow: 0 25px 50px rgba(0,0,0,0.2); }
.modal-header-pro { padding: 20px 30px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-weight: 800; color: #1e293b; font-size: 18px; margin: 0; }
.close-pro { background: none; border: none; font-size: 24px; color: #94a3b8; cursor: pointer; }
.modal-body-pro { padding: 30px; }
.modal-footer-pro { padding: 20px 30px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 10px; }
.btn-cancel-pro { background: #f1f5f9; border: none; padding: 10px 20px; border-radius: 10px; font-weight: 700; color: #64748b; }
.dashed-divider { border-top: 2px dashed #e2e8f0; margin: 30px 0; }
.no-arrow .holo-arrow { display: none !important; }
/* /* ==========================================================================
   ★ [V15.5] 帳號設定 - 白晝戰術風格 (Daylight)
   ========================================================================== */

/* --- 1. 頂部 & 導航 --- */
.account-header-glass {
    background: #fff; padding: 25px 30px; border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); border: 1px solid #f1f5f9;
    margin-bottom: 30px;
}
.header-top-row { display: flex; align-items: center; justify-content: space-between; }
.header-content { display: flex; align-items: center; gap: 20px; }
.header-icon-box {
    width: 50px; height: 50px; background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
}
.header-text .title { font-weight: 900; color: #1e293b; margin: 0; font-size: 22px; }
.header-text .subtitle { color: #64748b; margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

.account-nav-wrapper { border-top: 1px solid #f1f5f9; padding-top: 15px; }
.account-nav-top { display: flex; gap: 10px; flex-wrap: wrap; }
.account-nav-top li a {
    color: #64748b; font-weight: 700; padding: 10px 20px; border-radius: 50px;
    transition: 0.3s; display: flex; align-items: center; gap: 8px; font-size: 14px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.account-nav-top li a:hover { background: #e0e7ff; color: #4f46e5; }
.account-nav-top li.active a {
    background: #4f46e5; color: #fff; border-color: #4f46e5;
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
}

/* --- 2. Welcome Banner (白晝風格) --- */
.welcome-banner-glass {
    background: linear-gradient(135deg, #fff, #f8fafc);
    border-radius: 20px; padding: 25px 30px;
    border: 1px solid #f1f5f9; box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}
.welcome-left { display: flex; align-items: center; gap: 20px; }
.user-avatar-lg {
    width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 28px; box-shadow: 0 5px 20px rgba(99, 102, 241, 0.3);
}
.welcome-text h3 { margin: 0; font-weight: 800; color: #1e293b; font-size: 20px; }
.welcome-text p { margin: 0; color: #64748b; font-size: 13px; font-weight: 500; }

.badge-level-pro {
    padding: 8px 16px; border-radius: 50px; font-weight: 800; font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}
.vip-glow {
    background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
}
.normal-glow {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1); color: #475569;
}

/* --- 3. ★ 新增：亮色數據卡片 (Pro Light) --- */
.stats-grid-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.stat-box-pro {
    background: #fff; border-radius: 20px; padding: 25px;
    border: 1px solid #f1f5f9; box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    position: relative; overflow: hidden; display: flex; align-items: center;
    transition: transform 0.3s;
}
.stat-box-pro:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.06); }

/* 浮動大圖示 */
.stat-icon-floating {
    width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center;
    justify-content: center; font-size: 28px; margin-right: 20px; z-index: 2;
}
.balance-icon { background: #eff6ff; color: #3b82f6; }
.spent-icon { background: #fdf4ff; color: #d946ef; }

.stat-info-pro { z-index: 2; }
.stat-label-pro { display: block; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 5px; }
.stat-value-pro { font-size: 28px; font-weight: 900; margin: 0; }
.color-blue { color: #3b82f6; }
.color-purple { color: #d946ef; }

/* 裝飾圓圈 (背景) */
.stat-decor-circle {
    position: absolute; right: -20px; bottom: -20px; width: 100px; height: 100px;
    border-radius: 50%; opacity: 0.1; z-index: 1;
}
.c-blue { background: #3b82f6; }
.c-purple { background: #d946ef; }

/* 用戶情報列 */
.user-intel-row {
    display: flex; gap: 20px; flex-wrap: wrap;
    background: #f1f5f9; padding: 12px 20px; border-radius: 12px;
}
.intel-item { display: flex; align-items: center; gap: 8px; color: #475569; font-size: 13px; }
.intel-label { font-weight: 700; }
.intel-value { font-weight: 500; color: #1e293b; background: #fff; padding: 2px 8px; border-radius: 4px; }
.font-mono { font-family: 'Orbitron', monospace; letter-spacing: 0.5px; }

/* --- 4. 內容卡片 --- */
.account-content-card {
    background: #fff; border-radius: 16px; border: 1px solid #f1f5f9;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); overflow: hidden; height: 100%;
}
.card-header-line { padding: 20px 25px; border-bottom: 1px solid #f1f5f9; background: #fcfcfc; }
.card-title { margin: 0; font-weight: 800; color: #1e293b; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.card-body-pro { padding: 30px; }

/* 輸入框 */
.input-label-pro { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 8px; display: block; }
.input-group-pro { position: relative; }
.input-group-pro .input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.input-pro {
    height: 50px; border-radius: 10px; border: 2px solid #e2e8f0; background: #f8fafc;
    padding-left: 15px; font-weight: 600; color: #334155; width: 100%; transition: 0.3s;
}
.input-group-pro .input-pro { padding-left: 45px; } 
.input-pro:focus { background: #fff; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); }
.input-pro[readonly], .input-pro[disabled] { background: #f1f5f9; color: #64748b; cursor: not-allowed; }

/* 按鈕 */
.btn-action-pro {
    background: #fff; border: 2px solid #e2e8f0; color: #475569; padding: 10px 20px;
    border-radius: 10px; font-weight: 700; transition: 0.3s; cursor: pointer;
}
.btn-action-pro:hover { border-color: #4f46e5; color: #4f46e5; background: #eff6ff; }

.btn-save-pro {
    background: linear-gradient(135deg, #0f172a, #334155); color: #fff; border: none;
    padding: 12px 30px; border-radius: 10px; font-weight: 800; transition: 0.3s;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.2); width: 100%;
}
.btn-save-pro:hover { background: #0076ff; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 118, 255, 0.3); }
.btn-danger-glow { color: #ef4444; border-color: #fca5a5; }
.btn-danger-glow:hover { background: #fef2f2; border-color: #ef4444; color: #b91c1c; }

/* API & Modal (保持不變) */
.api-display-group-light { display: flex; gap: 10px; background: #f8fafc; padding: 5px; border-radius: 10px; border: 1px solid #e2e8f0; }
.api-input-light { background: transparent; border: none; color: #0f172a; font-family: 'Orbitron', monospace; font-weight: 700; font-size: 14px; width: 100%; padding: 0 15px; letter-spacing: 1px; }
.btn-copy-api-light { background: #fff; color: #64748b; border: 1px solid #cbd5e1; padding: 8px 15px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.btn-copy-api-light:hover { background: #e0e7ff; color: #4f46e5; border-color: #4f46e5; }

.modal-content-pro { background: #fff; border-radius: 20px; border: none; box-shadow: 0 25px 50px rgba(0,0,0,0.2); }
.modal-header-pro { padding: 20px 30px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-weight: 800; color: #1e293b; font-size: 18px; margin: 0; }
.close-pro { background: none; border: none; font-size: 24px; color: #94a3b8; cursor: pointer; }
.modal-body-pro { padding: 30px; }
.modal-footer-pro { padding: 20px 30px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 10px; }
.btn-cancel-pro { background: #f1f5f9; border: none; padding: 10px 20px; border-radius: 10px; font-weight: 700; color: #64748b; }
.dashed-divider { border-top: 2px dashed #e2e8f0; margin: 30px 0; }
.no-arrow .holo-arrow { display: none !important; }
/* =========================================
   ★ 主選單 Account 圖示 (GIF 替換)
   ========================================= */
/* 請確保您的主選單 <li> 或 <a> 標籤有包含 "account" 字樣的 href
   或是有 class="nav-item-account"
*/

/* 方法 A: 針對 href 屬性 (最通用) */
a[href*="account"] i, 
a[href*="account"] .menu-icon {
    background-image: url('https://storage.perfectcdn.com/l0ogcm/b3nssdj5wtnpq2dy.gif') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: transparent !important; /* 隱藏原本的字體圖示 */
    width: 24px !important;       /* 強制寬度 */
    height: 24px !important;      /* 強制高度 */
    display: inline-block !important;
    filter: none !important;      /* 移除任何濾鏡 */
}

/* 方法 B: 針對特定 Class (如果您有加 class="nav-item-account") */
.nav-item-account .menu-icon {
    background-image: url('https://storage.perfectcdn.com/l0ogcm/b3nssdj5wtnpq2dy.gif') !important;
    background-size: cover !important;
    color: transparent !important;
}

/* /* /* 
==========================================================================
   ★ [V16.2 Final] 通知中心 - 視覺極致優化版
   包含：GIF圖示、表格彩色Icon、滾動條修復
   ========================================================================== */

/* --- 1. 頂部 GIF 圖示容器 --- */
.header-icon-box-gif {
    width: 60px; height: 60px; 
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; overflow: hidden; /* 確保 GIF 圓角 */
    /* 移除背景色，直接顯示 GIF */
}
.header-icon-box-gif img {
    width: 100%; height: 100%; object-fit: cover;
}

/* --- 2. 連接模組卡片 (Connect Modules) --- */
.connect-module-card {
    background: #fff; border-radius: 16px; padding: 25px;
    border: 1px solid #f1f5f9; box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    display: flex; gap: 20px; align-items: flex-start;
    transition: transform 0.3s; position: relative; overflow: hidden;
}
.connect-module-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.06); }

.module-icon {
    width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 32px; flex-shrink: 0;
}

/* Google 模組樣式 */
.email-module { border-left: 4px solid #ea4335; }
.icon-brand-google { background: #fff; border: 1px solid #f1f5f9; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.icon-brand-google i {
    background: linear-gradient(135deg, #4285F4, #DB4437, #F4B400, #0F9D58);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.btn-email { background: #ea4335; color: #fff; }
.btn-email:hover { background: #c5221f; }

/* Telegram 模組樣式 */
.telegram-module { border-left: 4px solid #0088cc; }
.icon-brand-telegram { background: #e0f2fe; color: #0088cc; box-shadow: 0 5px 15px rgba(0, 136, 204, 0.2); }
.icon-brand-telegram i {
    background: linear-gradient(135deg, #2AABEE, #229ED9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.btn-telegram { background: #0088cc; color: #fff; }
.btn-telegram:hover { background: #0077b5; }

.module-content { flex-grow: 1; }
.module-title { margin: 0 0 5px 0; font-weight: 800; font-size: 16px; color: #1e293b; }
.module-desc { font-size: 13px; color: #64748b; margin-bottom: 15px; line-height: 1.5; }

.btn-connect-pro {
    border: none; padding: 8px 20px; border-radius: 50px;
    font-size: 13px; font-weight: 700; transition: 0.3s;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-connect-pro:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }

/* --- 3. 表格內的彩色圖示 (Gradient Icons in Table) --- */
/* Google 信封 */
.gradient-icon-google {
    background: linear-gradient(135deg, #EA4335, #FBBC05, #34A853, #4285F4);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-size: 18px; margin-right: 5px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
/* Telegram 紙飛機 */
.gradient-icon-telegram {
    background: linear-gradient(135deg, #2AABEE, #229ED9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-size: 18px; margin-right: 5px;
}
/* SMS */
.gradient-icon-sms { color: #10b981; font-size: 18px; margin-right: 5px; }

/* --- 4. 表格與滾動條優化 --- */
.table-smooth-scroll {
    overflow-x: auto;
    padding-bottom: 5px; 
    margin-bottom: 5px;
}
/* 讓表格寬度自動撐開，避免文字擠壓 */
.table-notify-pro { 
    margin-bottom: 0; width: 100%; border-collapse: separate; border-spacing: 0 10px;
    min-width: 100%; /* 確保至少填滿容器 */
}
/* 只在內容真的太多時才允許滾動，通常 width:100% 夠用 */
@media (min-width: 992px) {
    .table-notify-pro { min-width: auto; } 
}

.table-notify-pro thead th { border: none; font-size: 13px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 15px; white-space: nowrap; }
.table-notify-pro tbody tr { background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: 0.2s; }
.table-notify-pro tbody tr:hover { transform: scale(1.002); box-shadow: 0 5px 15px rgba(0,0,0,0.05); z-index: 2; position: relative; }

.table-notify-pro td { border: none; padding: 15px; vertical-align: middle; }
.table-notify-pro td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.table-notify-pro td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

.notify-icon { color: #cbd5e1; margin-right: 10px; font-size: 10px; }
.td-name { font-weight: 700; color: #334155; font-size: 14px; white-space: nowrap; }

/* --- 5. iOS 開關 --- */
.switch-pro { position: relative; display: inline-block; width: 46px; height: 24px; margin-bottom: 0; }
.switch-pro input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e2e8f0; transition: .4s; }
.slider.round { border-radius: 34px; }
.slider.round:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: #10b981; }
input:checked + .slider:before { transform: translateX(22px); }
input:disabled + .slider { background-color: #f1f5f9; cursor: not-allowed; opacity: 0.6; }

/* 底部保存按鈕 */
.btn-save-mini { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.btn-save-mini:hover { background: #10b981; color: #fff; }
.form-action-footer { text-align: right; }

/* 迷你提示 */
.alert-mini { position: absolute; top: 15px; right: 15px; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; animation: fadeIn 0.3s ease-out; }
.alert-mini.success { background: #ecfdf5; color: #059669; }
.alert-mini.error { background: #fef2f2; color: #ef4444; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* /* ==========================================================================
   ★ [V16.4] 導航列 ICON 終極修復 (GIF Universal Fix)
   解決在 Account 頁面，導航列圖示無法顯示 GIF 的問題
   ========================================================================== */

/* 1. 通用設定 (隱藏字體，準備背景圖) */
.account-nav-top a i {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: transparent !important; /* 隱藏 FontAwesome */
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 5px;
    filter: none !important;
    transform: translateY(-2px);
}

/* 2. 定義【一般功能】的 GIF (基本資料/安全/API/偏好) */
/* 包含：頁內錨點 (#tab-...) 和 跨頁連結 (account#tab-...) */
.account-nav-top a[href*="tab-"] i,
.account-nav-top a[href^="#tab"] i {
    background-image: url('https://storage.perfectcdn.com/l0ogcm/b3nssdj5wtnpq2dy.gif') !important;
}

/* 3. 定義【通知中心】的 GIF (最後一個按鈕) */
.account-nav-top a[href*="notifications"] i {
    background-image: url('https://storage.perfectcdn.com/l0ogcm/b3oal7bjksmqzk6d.gif') !important;
}

/* 4. 防止 Hover 變色覆蓋 GIF */
.account-nav-top a:hover i,
.account-nav-top li.active a i {
    filter: brightness(1.2) !important;
}
/* ==========================================================================
   ★ [V17.9 Final] API 指揮官 - 極簡尊榮版 (Premium Single Column)
   ========================================================================== */

/* --- 1. Hero 區域 (Premium) --- */
.api-hero-premium {
    background: radial-gradient(circle at 50% -20%, #1e1b4b, #0f172a);
    padding: 80px 0 100px 0; color: #fff; position: relative;
    overflow: hidden; margin-bottom: -60px; /* 讓內容上浮 */
}
/* 背景光暈 */
.hero-bg-glow {
    position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
    width: 800px; height: 800px; background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* ★ V2.0 3D 徽章 */
.version-badge-3d {
    width: 70px; height: 70px; margin: 0 auto 20px auto;
    position: relative; display: flex; align-items: center; justify-content: center;
}
.version-badge-3d .v-inner {
    font-size: 24px; font-weight: 900; color: #fff; z-index: 2;
    text-shadow: 0 0 10px rgba(255,255,255,0.5); font-family: 'Orbitron', sans-serif;
}
.version-badge-3d .v-ring {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid transparent; border-top-color: #6366f1; border-left-color: #00f2fe;
    animation: spinRing 3s linear infinite; box-shadow: 0 0 15px rgba(99,102,241,0.3);
}
@keyframes spinRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.hero-title { font-weight: 900; font-size: 36px; margin-bottom: 10px; letter-spacing: 1px; }
.hero-subtitle { color: #94a3b8; font-size: 16px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }

.btn-hero-glass {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
    padding: 12px 35px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; border-radius: 50px; font-weight: 700; text-decoration: none;
    transition: 0.3s; backdrop-filter: blur(10px);
}
.btn-hero-glass:hover { background: #fff; color: #0f172a; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); text-decoration: none; }

/* --- 2. 內容卡片 (Premium Card) --- */
.content-container-premium { position: relative; z-index: 2; }

.api-card-premium {
    background: #fff; border-radius: 24px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.03);
    overflow: hidden; transition: transform 0.3s;
}
/* 讓一般資訊卡片有點區別 */
#general-info .api-card-premium { border-top: 5px solid #6366f1; }

.api-card-header {
    padding: 30px 40px; border-bottom: 1px solid #f8fafc;
    display: flex; align-items: center; gap: 20px; background: #fff;
}
.header-icon-wrap {
    width: 50px; height: 50px; background: #eff6ff; color: #4f46e5;
    border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.api-section-title { font-size: 22px; font-weight: 800; color: #1e293b; margin: 0; }
.api-section-desc { font-size: 14px; color: #64748b; margin: 5px 0 0 0; }

.api-card-body { padding: 40px; }

.method-chip {
    background: #f0fdf4; color: #16a34a; font-weight: 800; font-size: 14px;
    padding: 6px 15px; border-radius: 50px; border: 1px solid #dcfce7; letter-spacing: 1px;
}

/* Connection Status Pills */
.connection-status-row { display: flex; gap: 20px; padding-bottom: 30px; border-bottom: 1px dashed #e2e8f0; }
.status-pill {
    background: #f8fafc; padding: 8px 20px; border-radius: 12px; border: 1px solid #e2e8f0;
    display: flex; flex-direction: column; min-width: 120px;
}
.pill-label { font-size: 11px; color: #94a3b8; font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
.pill-value { font-size: 16px; font-weight: 800; color: #334155; }
.pill-value.post { color: #22c55e; }
.pill-value.json { color: #6366f1; }

/* --- 3. 輸入框與複製按鈕 (Premium Input) --- */
.input-label-premium {
    font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 8px; display: block;
}
.input-copy-premium {
    position: relative; display: flex; align-items: center;
    background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 12px;
    padding: 5px; transition: 0.3s;
}
.input-copy-premium:focus-within { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); background: #fff; }

.input-field {
    width: 100%; border: none; background: transparent; padding: 10px 15px;
    font-family: 'Consolas', monospace; font-size: 14px; color: #334155; font-weight: 600;
}
.btn-copy-premium {
    border: none; background: #fff; color: #475569; font-size: 13px; font-weight: 700;
    padding: 8px 20px; border-radius: 8px; cursor: pointer; transition: 0.2s; white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #e2e8f0;
    display: flex; align-items: center; gap: 6px;
}
.btn-copy-premium:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }

.key-mode { background: #fff7ed; border-color: #ffedd5; } /* 金鑰框稍微不同色 */
.link-reset-key { font-size: 13px; color: #f97316; font-weight: 600; text-decoration: none; }

/* --- 4. 參數表格 (Clean Table) --- */
.param-table-wrapper { margin-top: 20px; }
.table-params-premium { width: 100%; border-collapse: collapse; }
.table-params-premium th {
    text-align: left; font-size: 12px; color: #94a3b8; font-weight: 800; text-transform: uppercase;
    padding: 15px 0; border-bottom: 2px solid #f1f5f9;
}
.table-params-premium td {
    padding: 20px 0; border-bottom: 1px solid #f8fafc; vertical-align: top;
    font-size: 15px; color: #475569; line-height: 1.6;
}
.table-params-premium tr:last-child td { border-bottom: none; }

.code-pill {
    font-family: 'Consolas', monospace; font-weight: 600; color: #e11d48;
    background: #fff1f2; padding: 4px 10px; border-radius: 6px; font-size: 14px;
}

/* --- 5. 代碼視窗 (Deep Sea Theme) --- */
.code-window-premium {
    background: #0f172a; border-radius: 16px; overflow: hidden;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.3); border: 1px solid #1e293b;
    margin-top: 30px;
}
.window-header {
    background: #1e293b; padding: 12px 20px; display: flex; align-items: center;
    border-bottom: 1px solid #334155;
}
.dots { display: flex; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.win-title { margin-left: 20px; font-size: 12px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

.btn-copy-code-premium {
    margin-left: auto; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1; font-size: 12px; padding: 6px 15px; border-radius: 6px; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.btn-copy-code-premium:hover { background: #fff; color: #0f172a; }
.btn-copy-code-premium.copied { background: #10b981; color: #fff; border-color: #10b981; }

.window-body { padding: 0; max-height: 600px; overflow-y: auto; }
.code-content {
    margin: 0; padding: 30px; color: #e2e8f0; font-family: 'Consolas', monospace;
    font-size: 14px; line-height: 1.7; background: transparent; border: none;
    white-space: pre-wrap; word-break: break-all;
}

/* Select */
.premium-select { height: 45px; border-radius: 12px; border: 1px solid #cbd5e1; background: #fff; font-size: 14px; }
.no-arrow .holo-arrow { display: none; }
/* ==========================================================================
   ★ [V18.6 Final] 鈦金盾合約 - 精準修正版
   特色：獨立洗錢條款、生效綠字、註冊日修復
   ========================================================================== */

/* --- 0. 柔性前導語 --- */
.friendly-notice-bar {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    color: #fff; padding: 12px 0; font-size: 14px; font-weight: 500;
    position: relative; z-index: 10; letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.friendly-notice-bar i { margin-right: 5px; color: #fff7ed; animation: pulse 2s infinite; }

/* --- 1. Hero 頂部 (動態背景) --- */
.hero-quantum-bg {
    background: linear-gradient(-45deg, #020617, #1e3a8a, #0f172a, #312e81);
    background-size: 400% 400%;
    animation: quantumFlow 10s ease infinite;
    padding: 80px 0 140px 0; color: #fff; position: relative;
    overflow: hidden;
}
@keyframes quantumFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 網格疊加層 */
.hero-grid-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle, black 30%, transparent 80%);
}

.hero-icon-wrapper {
    font-size: 60px; color: #6366f1; margin-bottom: 20px;
    filter: drop-shadow(0 0 25px rgba(99, 102, 241, 0.6));
}
.hero-title { font-weight: 900; font-size: 42px; margin: 0; letter-spacing: 2px; text-shadow: 0 5px 20px rgba(0,0,0,0.5); position: relative; z-index: 2; }
.hero-subtitle { color: #94a3b8; font-size: 16px; text-transform: uppercase; letter-spacing: 3px; margin-top: 10px; position: relative; z-index: 2; }

/* V18.6 Meta: 還原分隔線風格 */
.hero-meta {
    margin-top: 30px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08); padding: 10px 25px; border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px);
    font-size: 14px; color: #e2e8f0; gap: 15px; position: relative; z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.hero-meta .divider { color: rgba(255,255,255,0.3); font-weight: 300; }
.highlight-date { color: #f59e0b; font-weight: 700; text-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }

/* ★ 綠色生效文字 */
.active-text { color: #4ade80; font-weight: 700; text-shadow: 0 0 10px rgba(74, 222, 128, 0.4); }

/* --- 2. 鈦金卡片 --- */
.titanium-card {
    background: #fff; border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.05); border: 1px solid #e2e8f0;
    overflow: hidden; position: relative;
}

/* --- 3. 締約雙方 --- */
.parties-container {
    display: flex; justify-content: space-between; align-items: center;
    padding: 40px 60px; background: #fff;
}
.party-block { flex: 1; }
.text-right-md { text-align: right; }

.party-role { display: block; font-size: 12px; color: #64748b; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; }
.party-name { font-size: 26px; font-weight: 900; color: #0f172a; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.party-desc { display: block; font-size: 14px; color: #475569; margin-top: 5px; }
.font-mono { font-family: 'Consolas', monospace; font-weight: 700; color: #6366f1; }

.verified-badge { color: #1d9bf0; font-size: 20px; filter: drop-shadow(0 2px 4px rgba(29, 155, 240, 0.3)); }

.interaction-icon-3d { flex: 0 0 100px; display: flex; justify-content: center; }
.interaction-icon-3d i {
    font-size: 56px;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #6366f1 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.1)) drop-shadow(0 10px 20px rgba(79, 172, 254, 0.4));
    transform: rotate(-10deg); transition: transform 0.3s;
}
.interaction-icon-3d:hover i { transform: rotate(0deg) scale(1.1); }

/* --- 4. 警示網格 (Warning) --- */
.warning-theme { border-top: 5px solid #ef4444; }
.card-header-strip {
    padding: 20px 30px; border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: center;
}
.card-header-strip.red { background: #fef2f2; color: #b91c1c; }
.card-header-strip.blue { background: #f0f9ff; color: #0369a1; border-top: 5px solid #0ea5e9; }

.header-title-group { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.read-badge {
    font-size: 11px; background: #dc2626; color: #fff; padding: 3px 10px; border-radius: 4px; font-weight: 700; letter-spacing: 1px;
}

.card-body-content { padding: 40px; }

.alert-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.alert-item {
    display: flex; gap: 20px; padding: 20px; border-radius: 12px;
    border: 1px solid #e2e8f0; background: #fff; transition: 0.3s;
}
.alert-item:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }

/* 擬真螢光筆 */
.marker-pen {
    background: linear-gradient(100deg, rgba(255, 245, 0, 0) 0%, rgba(255, 245, 0, 0.7) 5%, rgba(255, 245, 0, 0.4) 100%);
    padding: 0 4px; border-radius: 2px;
    font-weight: 800; color: #000;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.highlight-danger { background: #fff5f5; border-color: #fecaca; }
.highlight-danger .num-badge { background: #dc2626; color: #fff; }
.highlight-danger .text { color: #7f1d1d; }

.num-badge {
    flex-shrink: 0; width: 36px; height: 36px; background: #f1f5f9; color: #64748b;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 16px;
}
.alert-item .text { font-size: 15px; line-height: 1.7; color: #334155; text-align: justify; }
.alert-item strong { display: block; color: #0f172a; margin-bottom: 5px; font-size: 16px; }

/* --- 5. 條款內文 --- */
.terms-content { font-size: 15px; line-height: 1.8; color: #334155; }
.term-section { margin-bottom: 35px; }
.term-section h4 {
    font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 15px;
    padding-left: 15px; border-left: 5px solid #0ea5e9;
}
.term-section p { margin-bottom: 12px; text-align: justify; }

.term-footer-note {
    margin-top: 40px; padding: 25px; background: #f8fafc; border-radius: 12px;
    border: 1px dashed #cbd5e1; text-align: center; font-weight: 700; color: #475569;
}
.term-footer-note i { color: #22c55e; margin-right: 5px; }

/* --- 6. LINE 按鈕 --- */
.support-title { font-weight: 800; color: #1e293b; margin-bottom: 5px; font-size: 20px; }
.support-desc { color: #64748b; margin-bottom: 25px; }

.btn-line-mega {
    display: inline-flex; align-items: center; gap: 10px;
    background: #06C755; color: #fff; padding: 15px 45px; border-radius: 60px;
    text-decoration: none; transition: 0.3s; box-shadow: 0 10px 25px rgba(6, 199, 85, 0.3);
}
.btn-line-mega:hover { background: #05b34c; color: #fff; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(6, 199, 85, 0.4); text-decoration: none; }
.btn-line-mega .icon { font-size: 26px; }
.btn-line-mega .text { font-size: 18px; font-weight: 800; }

/* RWD */
@media (max-width: 768px) {
    .parties-container { flex-direction: column; text-align: center; gap: 25px; padding: 30px; }
    .text-right-md { text-align: center; }
    .interaction-icon-3d { transform: rotate(90deg); margin: 10px 0; }
    .hero-meta { flex-direction: column; gap: 10px; border-radius: 16px; width: 100%; }
    .hero-meta .divider { display: none; }
    .hero-title { font-size: 30px; }
}/* ==========================================================================
   ★ [V19.0] 訂單防護模組 (Order Shield)
   ========================================================================== */

.order-shield-wrapper {
    margin-top: 25px;
    margin-bottom: 25px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #ef4444; /* 預設紅色警戒線 */
    border-radius: 8px;
    padding: 15px 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* 勾選後的狀態 */
.order-shield-wrapper.verified {
    border-left-color: #22c55e; /* 綠色通過線 */
    background: #f0fdf4;
    border-color: #bbf7d0;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
}

.shield-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Checkbox 美化 */
.shield-checkbox {
    appearance: none; -webkit-appearance: none;
    width: 24px; height: 24px;
    border: 2px solid #cbd5e1; border-radius: 6px;
    margin-top: 3px; cursor: pointer; position: relative;
    flex-shrink: 0; transition: 0.2s; background: #fff;
}
.shield-checkbox:checked {
    background: #22c55e; border-color: #22c55e;
}
.shield-checkbox:checked::after {
    content: '✓'; color: #fff; font-size: 16px; font-weight: 800;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.shield-label {
    margin: 0; font-size: 15px; color: #334155;
    cursor: pointer; line-height: 1.6;
}

.shield-link {
    color: #2563eb; font-weight: 700; text-decoration: none;
    border-bottom: 1px dashed #2563eb;
}
.shield-link:hover { color: #1e40af; border-bottom-style: solid; }

.shield-subtext {
    display: block; font-size: 13px; color: #64748b; margin-top: 5px;
    line-height: 1.5;
}

/* --- 鎖定按鈕樣式 --- */
/* 強制覆蓋原本的 style="..." */
button[type="submit"].btn-disabled-lock {
    background: #cbd5e1 !important;
    border: 1px solid #94a3b8 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    opacity: 0.8;
    box-shadow: none !important;
    transform: none !important;
}
/* ==========================================================================
   ★ [V19.5] 訂單系統最終修正
   ========================================================================== */

/* 強制解除 Select2 的滾動鎖定 */
body.select2-container--open {
    overflow: visible !important;
    position: static !important;
}

/* 確保下拉選單能正常顯示 */
.select2-container {
    z-index: 10000 !important;
}
.select2-dropdown {
    z-index: 10001 !important;
} 
/* ==========================================================================
   ★* Blog 閱讀體驗優化 CSS */
   ========================================================================== */
.blog-container {
  max-width: 800px;
  margin: 0 auto;
  font-family: 'PingFang TC', 'Helvetica Neue', sans-serif;
  color: #333;
  line-height: 1.8;
  font-size: 18px;
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.blog-category {
  display: inline-block;
  padding: 4px 12px;
  background: #00f2fe;
  color: #05050A;
  font-size: 14px;
  font-weight: bold;
  border-radius: 20px;
  margin-bottom: 16px;
}

.blog-title {
  font-size: 32px;
  font-weight: 900;
  color: #111;
  margin-bottom: 20px;
  line-height: 1.4;
}

.blog-content h2 {
  font-size: 24px;
  color: #222;
  margin-top: 40px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
}

.blog-content p {
  margin-bottom: 20px;
  color: #444;
}

.blog-highlight {
  background: #f8f9fa;
  border-left: 4px solid #4facfe;
  padding: 20px;
  margin: 30px 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #555;
}

.seo-preview-box {
  background: #202124;
  color: #bdc1c6;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 40px;
  font-family: arial, sans-serif;
  font-size: 14px;
}
.seo-preview-box .seo-url { color: #8ab4f8; margin-bottom: 4px;}
.seo-preview-box .seo-title { color: #8ab4f8; font-size: 20px; margin-bottom: 4px;}
.seo-preview-box .seo-desc { line-height: 1.58; }