/**
 * src/style.global.css -- 2026-01-10 11:31:10
 */

:root,
:root[data-theme="light"] {
    --bg-primary: #f6f6f6; /* 背景主题色 */
    --text-primary: #000000; /* 你原版 黑色文字色 */
    --border-color: #e0e0e0; /* 你原版 浅灰边框色 */
    --bg-gray: #f0f0f0; /* 浅灰背景 */
    --bg-black: #0f0f0f; /* 你原版 btn_black 黑色背景 */
    --bg-white: #ffffff; /* 白色文本/反色用 */
    --btn-hover-border: #0099ff; /* 按钮hover边框蓝 */
    --btn-hover-bg: #00aaff; /* 按钮hover背景蓝 */
    --bar-bg: color(display-p3 1 1 1 / 0.8);
    --border-bottom-color: #e0e0e0;
    --led-bg-color: #f1f1f1;
    --card-bg-white: #ffffff; /* 卡片白色背景色 */
    --line-q: #f0f0f0;
    --text-333333: #333333;
    --title-bar: rgba(255, 255, 255, 0.88);
    --link-visited: color(display-p3 100 410 1023 / 1);
}

:root[data-theme="dark"] {
    --bg-primary: #0a0a0a; /* 背景主题色 */
    --text-primary: #f6f6f6; /* 深色反色 浅白文字 */
    --border-color: #333333; /* 深色反色 深灰边框 */
    --bg-gray: #171717; /* 浅灰背景 */
    --bg-black: #f0f0f0; /* 深色 btn_black 浅灰背景 */
    --bg-white: #1e1e1e; /* 深色 卡片/模块背景 */
    --btn-hover-border: #40a9ff; /* 深色按钮hover 亮一点的蓝 */
    --btn-hover-bg: #00aaff; /* 按钮hover蓝不变，深色下更醒目 */
    --bar-bg: rgba(0, 0, 0, 0.88);
    --border-bottom-color: #202020;
    --led-bg-color: #0f0f0f;
    --card-bg-white: #0f0f0f; /* 卡片白色背景色 */
    --line-q: #171717;
    --text-333333: #cccccc;
    --title-bar: rgba(0, 0, 0, 0.88);
    --link-hover: color(display-p3 0 0 1 / 1);
    --link-visited: color(display-p3 0 0.39 0.4 / 1);
}

/* 全局过渡动画：主题切换时，所有颜色渐变200ms */
* {
    margin: 0;
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

html {
    /*  Display P3 广色域 */
    color-gamut: p3;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary);
    font-size: 16px;
    color: var(--text-primary);
    font-family: "PingFang SC", "Helvetica Neue", Helvetica, STHeiTi, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.wrapper {
    margin: 0 auto;
    padding: 10px;
    max-width: 1200px;
}

button {
    width: auto;
    height: auto;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    color: var(--bg-white);
    text-align: center;
    background: var(--bg-gray);
    border: solid 1px var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    border: solid 1px var(--btn-hover-border);
    background-color: var(--btn-hover-bg);
    color: var(--bg-white);
}

.btn {
    width: 100%;
    height: auto;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    color: var(--bg-white);
    text-align: center;
    background: var(--bg-gray);
    border: solid 1px var(--border-color);
    border-radius: 4px;
}

.btn:hover {
    border: solid 1px var(--btn-hover-border);
    background-color: var(--btn-hover-bg);
    color: var(--bg-white);
}

.btn_line {
    width: 100%;
    height: 45px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    color: var(--bg-white);
    text-align: center;
    background: var(--bg-gray);
    border: solid 1px var(--border-color);
    border-radius: 4px;
}

.btn_line:hover {
    border: solid 1px var(--btn-hover-border);
    background-color: var(--btn-hover-bg);
    color: var(--bg-white);
}

.btn:visited {
    color: var(--bg-white);
}

.btn_black {
    width: auto;
    height: auto;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    color: var(--bg-white);
    text-align: center;
    background: var(--bg-black);
    border: solid 1px var(--border-color);
    border-radius: 4px;
}

.btn_black:hover {
    border: solid 1px var(--btn-hover-border);
    background-color: var(--btn-hover-bg);
    color: var(--bg-white);
}

.h1 {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--text-333333);
}

a:visited {
    color: var(--link-visited);
}

a:hover {
    color: var(--link-hover);
}

.data-time {
    color: #00ff33;
}

.line_100 {
    height: 100px
}

.avatar_48 {
    width: 48px;
    height: 48px;
    border-radius: 10%;
}

/* 1. 屏幕 < 600px：基准 h4 = 12px */
@media (max-width: 600px) {
    h1 {
        font-size: 24px;
    }

    /* 12px × 2（默认h1是h4的2倍） */
    h2 {
        font-size: 18px;
    }

    /* 12px × 1.5（默认h2是h4的1.5倍） */
    h3 {
        font-size: 14px;
    }

    /* 12px × 1.17（默认h3是h4的1.17倍） */
    h4 {
        font-size: 12px;
    }

    /* 基准值 */
    h5 {
        font-size: 10px;
    }

    /* 12px × 0.83（默认h5是h4的0.83倍） */
    h6 {
        font-size: 8px;
    }

    /* 12px × 0.67（默认h6是h4的0.67倍） */
}

/* 2. 屏幕 600-480px：使用浏览器默认值（无需额外设置） */
@media (min-width: 600px) and (max-width: 4800px) {
    /* 这里留空，自动使用浏览器默认字号：
       h1=32px、h2=24px、h3=18.72px、h4=16px、h5=13.28px、h6=10.72px */
}

    .tab_bar.svelte-6lwbc4 {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 55px;
        background-color: var(--bar-bg);
        z-index: 50;
        backdrop-filter: blur(20px);
    }

    .tab_bar.svelte-6lwbc4 .container:where(.svelte-6lwbc4) {
        display: block;
        margin: 0 auto;
        max-width: 640px;
    }

    .menu.svelte-6lwbc4 {
        display: flex;
        margin-top: 6px;
        padding: 0px;
        width: 100%;
    }

    .menu-item.svelte-6lwbc4 {
        flex: 1;
        align-items: center;
        text-decoration: none;
        color: --var(--color-text);
        font-size: 12px;
        font-weight: bold;
        border-radius: 16px;
    }

    .menu-item.svelte-6lwbc4:hover {
        background-color: var(--color-primary);
    }

    .menu-item.svelte-6lwbc4 i.bi:where(.svelte-6lwbc4) {
        display: block;
        margin: 0 auto;
        width: 20px;
        height: 20px;
        font-size: 20px;
        border-radius: 4px;
    }

    .menu-item.svelte-6lwbc4 span:where(.svelte-6lwbc4) {
        display: block;
        margin: 0;
        height: 24px;
        font-size: 10px;
        text-align: center;
        line-height: 24px;
        border-radius: 4px;
    }

    .menu-item.svelte-6lwbc4:hover {
        color: #0070f3;
        background: #f1f1f1;
    }

    .menu-item.svelte-6lwbc4:active {
        color: #ffffff;
        background: #0011ff;
    }