/* ===================================================
   👑 BestColorNoise.com - 2026 全螢幕首屏通關完全體樣式表
   =================================================== */

:root {
    --bg-color: #030303;
    --card-bg: #0d0d0d;
    --border-color: #1a1a1a;
    --accent-pink: #ff6b8b;
    --accent-brown: #d4a373;
    --accent-white: #e0e0e0;
    --accent-green: #2ecc71;
    --text-main: #f5f5f5;
    --text-muted: #666666;
}

body {
    background-color: var(--bg-color); 
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    min-height: 100vh; /* 確保主體能垂直撐滿 */
    justify-content: flex-start;
}

/* 1. 大幅縮減頂部標題的內邊距，釋放首屏空間 */
header { 
    text-align: center; 
    padding: 15px 20px 10px 20px; /* 完美壓縮頂部高度 */
    max-width: 800px; 
}

h1 { 
    font-size: 1.8rem; /* 精緻化 SaaS 標題大小 */
    font-weight: 800; 
    margin: 0; 
    letter-spacing: -0.5px; 
}

.subtitle { 
    color: var(--text-muted); 
    font-size: 0.85rem; 
    margin-top: 4px; 
}

/* 2. 緊湊型核心播放器卡片 */
.player-container {
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color);
    border-radius: 24px; 
    padding: 22px 22px; /* 優化上下內邊距，釋放空間 */
    width: 92%; 
    max-width: 440px;
    text-align: center; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.6); 
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* 3. 壓縮與校正噪音選取列 */
.noise-selector { 
    display: flex; 
    background-color: #141414; 
    padding: 3px; 
    border-radius: 30px; 
    margin-bottom: 20px; 
}

.noise-btn { 
    background: none; 
    border: none; 
    color: var(--text-muted); 
    padding: 8px 0; 
    border-radius: 25px; 
    font-weight: 700; /* 👑 鐵證修復：補齊原本斷頭遺失的語法屬性！ */
    cursor: pointer; 
    flex: 1; 
    font-size: 0.85rem; 
    transition: all 0.2s ease; 
}

.noise-btn.active[data-type="white"] { background-color: var(--accent-white); color: #000; }
.noise-btn.active[data-type="pink"] { background-color: var(--accent-pink); color: #000; }
.noise-btn.active[data-type="brown"] { background-color: var(--accent-brown); color: #000; }
.noise-btn.active[data-type="green"] { background-color: var(--accent-green); color: #000; }

/* 4. 壓縮核心播放大按鈕尺寸 */
.play-trigger { 
    width: 85px; 
    height: 85px; 
    border-radius: 50%; 
    background-color: var(--accent-pink); 
    border: none; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    margin-bottom: 20px; 
}

.play-trigger:hover { transform: scale(1.06); }

.play-trigger svg { 
    width: 32px; 
    height: 32px; 
    fill: #000; 
}

/* 5. 緊湊型控制滑桿區 */
.controls-grid { 
    width: 100%; 
    margin-bottom: 15px; 
}

.control-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px; 
    margin-bottom: 12px; 
}

.slider-label { 
    font-size: 0.78rem; 
    color: var(--text-muted); 
    width: 110px; 
    text-align: left; 
    font-weight: 600; 
}

.slider { 
    -webkit-appearance: none; 
    width: 100%; 
    max-width: 280px; 
    height: 5px; 
    background: #1a1a1a; 
    border-radius: 3px; 
    outline: none; 
}

.slider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    background: var(--theme-accent, var(--accent-pink)); /* 支援 JS 變數動態注入 */
    cursor: pointer; 
}

.switch-label { 
    font-size: 0.85rem; 
    color: #aaa; 
    cursor: pointer; 
    font-weight: 600; 
    text-align: left; 
    width: 100%; 
    display: block; 
    margin-top: 5px;
}

/* 6. 收藏與分享按鈕矩陣列 */
.action-matrix-row { 
    display: flex; 
    gap: 10px; 
    margin-top: 15px; 
    border-top: 1px solid #141414; 
    padding-top: 10px; 
}

.matrix-action-btn { 
    flex: 1; 
    padding: 10px; 
    background: #141414; 
    border: 1px solid #222; 
    color: #aaa; 
    border-radius: 10px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    transition: all 0.2s ease; 
}

.matrix-action-btn:hover { 
    border-color: var(--theme-accent, var(--accent-pink)) !important; 
    color: #ffffff !important; 
    background-color: #0d0d0d !important; 
}

/* 7. 緊湊型計時器選單區 */
.timer-section { 
    border-top: 1px solid #1a1a1a; 
    padding-top: 15px; /* 👑 修正衝突：從 25px 壓縮到 15px */
}

.timer-select { 
    background-color: #141414; 
    border: 1px solid #222; 
    color: #fff; 
    padding: 8px 15px; /* 優化按鈕厚度 */
    border-radius: 10px; 
    width: 100%; 
    font-size: 0.9rem; 
    cursor: pointer; 
}

.features-row { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 10px; 
    font-size: 0.78rem; 
    color: #555; 
    align-items: center; 
}

.feature-hint { font-weight: 500; }
.feature-hint input { vertical-align: middle; margin-right: 4px; }

.countdown-display { font-size: 0.85rem; color: var(--accent-pink); margin-top: 10px; height: 20px; font-weight: bold; }
.progress-bar-container { width: 100%; height: 5px; background-color: #111; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.progress-bar-fill { width: 100%; height: 100%; background-color: var(--accent-pink); transition: width 1s linear; }

/* 8. 橫幅廣告位精緻對稱化：寬度完美對齊播放器，100% 在首屏內露出吸金 */
.ad-banner-inside {
    width: 100%;
    min-height: 60px; /* 緊湊型高度，完全不擠壓版面 */
    background-color: #050505; /* 比卡片再深一階的純黑，營造高級液晶螢幕感 */
    border: 1px solid #1a1a1a; 
    border-radius: 12px;
    margin: 10px 0 15px 0; /* 優化上下間距 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444444; /* 微弱的提示文字顏色 */
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-sizing: border-box;
}

/* 9. 雜誌級極致流暢長文閱讀區 */
.seo-content { 
    width: 90%; 
    max-width: 680px; /* 人類黃金視線寬度 */
    padding: 30px 0; 
    box-sizing: border-box; 
    line-height: 1.85; 
    font-size: 1.05rem; 
    text-align: left; 
}

.seo-content h2 { 
    font-size: 1.55rem; 
    font-weight: 800; 
    color: #ffffff; 
    margin-top: 30px; 
    margin-bottom: 16px; 
    letter-spacing: -0.3px; 
    border-bottom: 1px solid #141414; 
    padding-bottom: 8px; 
}

.seo-content strong { 
    color: #ffffff; 
    font-weight: 700; 
    background: linear-gradient(180deg, transparent 70%, rgba(255,255,255,0.05) 30%); 
    padding: 0 2px; 
}

.seo-content p { 
    color: #a3a3a3; 
    margin-bottom: 24px; 
}

/* 10. 高轉化 Amazon 推薦卡片矩陣 */
.product-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    margin-top: 30px; 
}

@media(max-width: 600px) { 
    .product-grid { grid-template-columns: 1fr; gap: 16px; } 
}

.product-card { 
    background-color: #0a0a0a; 
    border: 1px solid #1a1a1a; 
    border-radius: 16px; 
    padding: 24px; 
    text-align: left; 
    transition: border-color 0.2s ease; 
}

.product-card h4 { margin: 0 0 10px 0; color: #fff; }
.product-card:hover { border-color: #333333; }
.product-link { display: inline-block; background-color: #f0c14b; color: #111; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 0.85rem; margin-top: 10px; }

/* 11. 頁尾 */
footer { 
    margin: 40px 0; 
    color: var(--text-muted); 
    font-size: 0.85rem; 
    text-align: center; 
    width: 90%; 
    max-width: 800px; 
    border-top: 1px solid #111; 
    padding-top: 20px; 
}

.amazon-disclosure { font-size: 0.78rem; color: #555; font-style: italic; margin-bottom: 10px; }
.footer-links a { color: #888; text-decoration: none; font-size: 0.82rem; margin: 0 5px; }
.footer-links a:hover { color: #fff; }

/* 12. 法律網頁彈窗（AdSense 政策強制合規） */
.legal-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 2000; }
.legal-modal-content { background: #111; border: 1px solid #333; border-radius: 16px; padding: 30px; width: 90%; max-width: 600px; text-align: left; box-sizing: border-box; }
.legal-modal-content h3 { margin-top: 0; color: #fff; border-bottom: 1px solid #222; padding-bottom: 10px; }
.legal-body { color: #ccc; font-size: 0.88rem; line-height: 1.6; max-height: 350px; overflow-y: auto; margin-bottom: 20px; padding-right: 5px; }
.legal-body p { margin-bottom: 15px; }
.legal-close-btn { background: #222; border: 1px solid #444; color: #fff; padding: 8px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: background 0.2s; float: right; }
.legal-close-btn:hover { background: #333; }