* {
    box-sizing: border-box;
}

/* --- 直接將根變量設為黑色，不依賴切換開關 --- */
:root {
    --app-body-bg: #000000;    /* 全局背景黑 */
    --app-phone-bg: #000000;   /* 手機容器背景黑 */

    --surface: #000000;        /* 視頻區域黑 */
    --surface-2: #080808;
    --surface-3: #111111;

    --phone-text: #ffffff;     /* 文字變白 */
    --muted-text: #999999;
    --border-color: #1a1a1a;

    --app-nav-bg: #000000;     /* 導航欄黑 */
    --app-nav-border: #222222;
    --app-nav-text: #888888;
    --app-nav-active: #f96197; /* 激活粉色 */

    --accent: #f96197;
    --accent-weak: rgba(249, 97, 151, 0.1);
    --accent-border: rgba(249, 97, 151, 0.3);

    --text-on-accent: #ffffff;
    --input-bg: #111111;
    --input-placeholder: #555555;
    --thumb-placeholder: #000000;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #000000 !important; /* 物理強制背景黑 */
    color: #ffffff !important;
}

.page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    position: relative;
    background: #000000 !important;
    z-index: 0;
}

/* 徹底移除背景圖影響 */
.page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #000000 !important; 
}

.side {
    flex: 1;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, .9);
}

.phone {
    width: 540px;
    max-width: 100vw;
    min-height: 100vh;
    background: #000000 !important;
    display: flex;
    flex-direction: column;
}

/* 確保所有內部容器也是黑色 */
.content, .section, .grid, .section-head {
    background: #000000 !important;
}

.bottom-nav {
    height: 56px;
    border-top: 1px solid var(--app-nav-border);
    background: #000000 !important;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 540px;
    max-width: 100vw;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    place-items: center;
}

.bottom-nav .item {
    color: var(--app-nav-text);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.bottom-nav .item.active {
    color: var(--app-nav-active) !important;
}

@media (max-width: 900px) {
    .side {
        display: none;
    }
    .phone {
        width: 100%;
    }
    .bottom-nav {
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
    }
}