/* ============================================================
   Game Boy 整机配色系统 - 家庭藏宝图公共样式
   机身=容器(中性灰) · 屏幕=数据(LCD黄绿) · 按钮=操作(酒红CTA)
   改配色只改这一处，index.html / wardrobe.html 同时生效
   ============================================================ */

/* ===== 全局变量（两页历史别名并存，同色同源） ===== */
:root {
    /* 机身 */
    --bg: #C8CCC8;
    --surface2: #D8DCD8;
    --card: #FFFFFF;
    --surface: #FFFFFF;
    --border: #8B9070;
    --border-hi: rgba(155, 47, 77, 0.3);

    /* 文字 */
    --text: #1A1A1A;
    --text-2: #4A4A4A;  /* wardrobe 别名 */
    --text2: #4A4A4A;
    --text-3: #8B8B8B;
    --text3: #8B8B8B;

    /* 主操作 CTA（A/B 键酒红） */
    --primary: #9B2F4D;
    --accent: #9B2F4D;
    --primary-light: #F5E6EA;
    --primary-dark: #7A1F38;
    --accent-d: #7A1F38;
    --accent-bg: rgba(155, 47, 77, 0.1);

    /* LOGO 紫 */
    --logo-purple: #3F4AA0;
    --purple: #3F4AA0;
    --purple-bg: rgba(63, 74, 160, 0.1);

    /* 状态色 */
    --danger: #E63946;
    --danger-light: #FFE5E7;
    --success: #306230;
    --success-light: #E8F5D0;
    --info: #4060C0;
    --info-light: #E0E8F5;

    /* LCD 屏幕模块 */
    --lcd-bg: #9BBC0F;
    --lcd-text: #0F380F;
    --screen-frame: #6A6A6A;

    /* 几何 */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 14px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.18);

    /* 顶栏红蓝细线 */
    --topline-red: #C04050;
    --topline-blue: #4060C0;
}

/* ===== 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
[x-cloak] { display: none !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ===== 统一跨页导航条（藏宝图·搜索·统计·洞察·穿搭） ===== */
.gb-nav {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gb-nav-item {
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.gb-nav-item.active { background: var(--primary); color: #fff; }
.gb-nav-item:not(.active):hover { background: var(--border); color: var(--text); }
.gb-nav-right { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }

/* ===== 页脚 / 备案 ===== */
.app-footer {
    text-align: center;
    padding: 14px 20px;
    font-size: 11px;
    color: var(--text-3);
    border-top: 1px solid var(--border);
    background: var(--surface2);
}
.app-footer strong { color: var(--text-2); font-weight: 600; }
.app-footer .sep { margin: 0 6px; opacity: 0.4; }
.gb-tag {
    display: inline-block;
    font-family: monospace;
    color: var(--lcd-text);
    background: var(--lcd-bg);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: 6px;
    border: 1px solid var(--screen-frame);
}
.beian-footer {
    text-align: left;
    font-size: 11px;
    color: var(--text-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 170px;
    align-self: center;
    padding: 12px 0;
}
.beian-footer strong { color: var(--text-2); font-weight: 600; }
.beian-footer .sep { margin: 0 5px; opacity: 0.4; }
.af-beian:empty { display: none; }
.af-beian a {
    color: var(--text-3);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-3);
    padding-bottom: 1px;
}
.af-beian a:hover { color: var(--text-2); }
.app-footer a {
    color: var(--text-3);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-3);
    padding-bottom: 1px;
}
.app-footer a:hover { color: var(--text-2); }