/* ===== 變數 ===== */
:root {
    --brand-h: 72px; /* BrandingBar 高度（桌機） */
    --footer-h: 48px; /* Footer 高度（桌機） */
    --title-bg-from: #94aee3;
    --title-bg-to: #ffffff;
    --title-radius: 10px;
}

/* ===== 底部版權（固定在底） ===== */
#pageFooter {
    position: fixed;
    left: 0;
    right: 0; /* 等同 width:100% 更安全 */
    bottom: 0;
    z-index: 20;
    text-align: center;
    padding: .5rem 1rem;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); /* iOS 底部安全區 */
    font-size: .85rem;
    color: rgba(255,255,255,.85);
    pointer-events: none; /* 外層不擋點擊 */
    background: linear-gradient(180deg, rgba(17, 24, 39, .72), rgba(17, 24, 39, .55));
    border-top: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    /* 讓內層文字/鏈結可點擊 */
    #pageFooter span,
    #pageFooter a {
        pointer-events: auto;
    }

/* ===== 品牌列（LOGO 區，固定在頂） ===== */
#brandingBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--brand-h);
    z-index: 30; /* 高於其他背景與面板 */
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 內容寬度控制 */
#brandingInner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LOGO */
#logoImg {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* 主內容避開固定頂列與固定底列 */
.with-brandbar #MainPanel {
    /* 若你的主要內容容器叫別的名字，改選擇器即可 */
    padding-top: calc(var(--brand-h) + 16px) !important;
    padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom) + 8px) !important;
}

/* 右上切換鈕層級 */
#themeToggle {
    z-index: 32;
}

/* 主題色微調（可保留/刪除） */
body.theme-tech-blue #brandingBar {
    background: linear-gradient(180deg, rgba( 0,132,255,.15), rgba(255,255,255,.05));
}

body.theme-dark-purple #brandingBar {
    background: linear-gradient(180deg, rgba(132, 0,255,.18), rgba(255,255,255,.05));
}

body.theme-fresh-green #brandingBar {
    background: linear-gradient(180deg, rgba( 0,200,120,.16), rgba(255,255,255,.05));
}

body.theme-minimal-gray#brandingBar {
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}

/* 小螢幕：高度收斂 */
@media (max-width: 640px) {
    :root {
        --brand-h: 56px;
        --footer-h: 44px;
        --panel-max: 520px;
    }

    #logoImg {
        height: 32px;
    }
}

/* 沒有 backdrop-filter 的瀏覽器備援（稍加底色） */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    #brandingBar {
        background: rgba(255,255,255,.9);
    }

    #pageFooter {
        background: rgba(17,24,39,.9);
    }
}