/* ==========================================================================
   LOcraft 全站统一设计层

   主站（style.css / mobile.css）、社区外壳（community/app.css）、
   社区语音（css/voice.css）都从这里取同一套设计令牌，
   之前三套各自为政的颜色 / 圆角 / 阴影到此收口。

   1) 设计令牌：浅色 + 深色
   2) 随时间变化的背景氛围层（清晨 / 白天 / 黄昏 / 夜晚）
   3) 导航分类菜单（下拉分组 + 主题按钮）
   4) 主站与社区共用的细节修正

   加载顺序：永远排在 style.css / mobile.css / 社区样式之后，负责覆盖收口。
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
    color-scheme: light;

    /* 背景与面板 */
    --bg: #f4f6fb;
    --panel: #ffffff;
    --panel-soft: #f7f9fc;
    --panel-sunken: #eef2f7;
    --glass: rgba(255, 255, 255, .86);
    --glass-strong: rgba(255, 255, 255, .97);

    /* 文字 */
    --text: #1f2937;
    --text-strong: #0f172a;
    --muted: #6b7280;

    /* 描边 */
    --border: #e6eaf2;
    --border-strong: #dbe3ee;

    /* 主色 */
    --accent: #2563eb;
    --accent-dark: #1d4ed8;      /* 浅色底上的强调文字 / 悬停文字 */
    --accent-strong: #1d4ed8;    /* 主按钮悬停背景 */
    --accent-soft: #eff6ff;
    --accent-border: #dbeafe;
    --accent-2: #f59e0b;

    /* 状态色 */
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --success: #15803d;
    --success-soft: #dcfce7;
    --warn: #b45309;
    --warn-soft: #fef3c7;
    --info: #0369a1;
    --info-soft: #e0f2fe;
    --chip-bg: #eef2f7;
    --chip-text: #4b5563;
    --code-bg: #0f172a;
    --code-text: #cbd8ea;

    /* 圆角 / 阴影 / 尺寸 */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --shadow-sm: 0 2px 10px rgba(15, 23, 42, .05);
    --shadow: 0 10px 28px rgba(15, 23, 42, .07);
    --shadow-hover: 0 16px 36px rgba(37, 99, 235, .14);
    --ring: rgba(37, 99, 235, .18);
    --container: 1160px;

    /* 氛围背景（随时间切换，见下方 data-daypart） */
    --ambient-1: rgba(147, 197, 253, .30);
    --ambient-2: rgba(125, 211, 252, .22);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #12141a;
    --panel: #1b1e26;
    --panel-soft: #22262f;
    --panel-sunken: #262a33;
    --glass: rgba(22, 24, 30, .86);
    --glass-strong: rgba(22, 24, 30, .97);

    --text: #e5e8ee;
    --text-strong: #f5f7fb;
    --muted: #9aa2b1;

    --border: #2b303a;
    --border-strong: #383e4a;

    --accent: #4f8cff;
    --accent-dark: #93b6ff;
    --accent-strong: #3b7bf0;
    --accent-soft: #1e2b45;
    --accent-border: #2c3f66;
    --accent-2: #f0b34a;

    --danger: #f2606f;
    --danger-soft: #3a2226;
    --success: #3ddc84;
    --success-soft: #17301f;
    --warn: #f0b34a;
    --warn-soft: #33280f;
    --info: #7dd3fc;
    --info-soft: #122b3a;
    --chip-bg: #262a33;
    --chip-text: #b9c0cc;
    --code-bg: #0b0e14;
    --code-text: #c6d4e8;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow: 0 12px 30px rgba(0, 0, 0, .45);
    --shadow-hover: 0 16px 36px rgba(0, 0, 0, .55);
    --ring: rgba(79, 140, 255, .30);
}

/* ---------- 2. 随时间变化的背景氛围 ---------- */
/* data-daypart 由 theme.js 按当前时间写入：morning / day / dusk / night */
html[data-daypart="morning"] {
    --ambient-1: rgba(255, 186, 120, .34);
    --ambient-2: rgba(147, 197, 253, .30);
}

html[data-daypart="day"] {
    --ambient-1: rgba(147, 197, 253, .30);
    --ambient-2: rgba(125, 211, 252, .22);
}

html[data-daypart="dusk"] {
    --ambient-1: rgba(251, 176, 118, .34);
    --ambient-2: rgba(167, 139, 250, .26);
}

html[data-daypart="night"] {
    --ambient-1: rgba(99, 102, 241, .22);
    --ambient-2: rgba(56, 189, 248, .16);
}

html[data-theme="dark"][data-daypart="morning"] {
    --ambient-1: rgba(255, 160, 80, .16);
    --ambient-2: rgba(96, 165, 250, .14);
}

html[data-theme="dark"][data-daypart="day"] {
    --ambient-1: rgba(59, 130, 246, .18);
    --ambient-2: rgba(20, 184, 166, .12);
}

html[data-theme="dark"][data-daypart="dusk"] {
    --ambient-1: rgba(251, 146, 60, .16);
    --ambient-2: rgba(139, 92, 246, .16);
}

html[data-theme="dark"][data-daypart="night"] {
    --ambient-1: rgba(79, 70, 229, .20);
    --ambient-2: rgba(14, 165, 233, .12);
}

/* 页面底色 + 氛围光：主站和社区外壳共用同一层 */
body {
    background:
        radial-gradient(1100px 640px at 8% -12%, var(--ambient-1), transparent 60%),
        radial-gradient(900px 600px at 96% -6%, var(--ambient-2), transparent 62%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
    background-attachment: fixed;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] {
    scrollbar-color: #3a4150 #171a21;
}

/* ---------- 3. 顶部导航：分类菜单 ---------- */
.nav-links {
    align-items: center;
}

.nav-group {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-links .nav-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.nav-links .nav-group-toggle:hover {
    background: var(--panel-soft);
    color: var(--accent-dark);
}

.nav-group-toggle .nav-caret {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    transition: transform .15s ease;
}

.nav-group.is-open > .nav-group-toggle,
.nav-group.has-active > .nav-group-toggle {
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 650;
}

.nav-group.is-open > .nav-group-toggle .nav-caret {
    transform: rotate(225deg);
    margin-top: 3px;
}

.nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 40;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 196px;
    padding: 6px;
    transform: translateX(-50%);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* 悬停时中间不留缝，鼠标从按钮滑到菜单不会误关 */
.nav-group::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.nav-group.is-open .nav-menu {
    display: flex;
}

@media (hover: hover) and (min-width: 1025px) {
    .nav-group:hover .nav-menu,
    .nav-group:focus-within .nav-menu {
        display: flex;
    }
}

.nav-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--text);
    font-size: .92rem;
    text-decoration: none;
    white-space: nowrap;
}

.nav-menu a:hover {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.nav-menu a.is-active {
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 650;
}

.nav-menu a small {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 400;
}

/* 主题切换按钮 */
.nav-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0 2px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-soft);
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.nav-theme:hover {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent-dark);
}

/* 手机 / 平板：分组变成可折叠的小节 */
@media (max-width: 1024px) {
    .nav-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .nav-links .nav-group-toggle {
        justify-content: space-between;
        width: 100%;
        padding: 13px 14px;
        font-size: 1rem;
        text-align: left;
    }

    .nav-group::after {
        display: none;
    }

    .nav-menu {
        position: static;
        transform: none;
        min-width: 0;
        margin: 2px 0 6px;
        padding: 2px 0 2px 10px;
        background: transparent;
        border: 0;
        border-left: 2px solid var(--border);
        border-radius: 0;
        box-shadow: none;
    }

    .nav-menu a {
        padding: 11px 12px;
        font-size: .96rem;
    }

    .nav-theme {
        width: 100%;
        height: 44px;
        margin: 6px 0 2px;
        justify-content: center;
        gap: 8px;
    }

    .nav-theme::after {
        content: attr(data-label);
        font-size: .95rem;
        color: var(--text);
    }
}

/* ---------- 4. 主站 / 社区共用细节 ---------- */
/* 顶部栏与页脚统一成同一套半透明观感 */
.topbar {
    background: var(--glass);
}

.footer {
    background: var(--glass);
    color: var(--muted);
}

/* 深色下的首页横幅：保留层次感，别再是一片浅蓝 */
html[data-theme="dark"] .hero {
    background:
        radial-gradient(760px 280px at 88% -30%, rgba(79, 140, 255, .22), transparent 62%),
        linear-gradient(135deg, rgba(79, 140, 255, .16) 0%, rgba(79, 140, 255, .05) 55%, rgba(56, 189, 248, .10) 100%);
    border-color: var(--accent-border);
}

html[data-theme="dark"] .hero p {
    color: var(--muted);
}

/* 深色下照片 / 视频边框别用纯白 */
html[data-theme="dark"] img {
    color-scheme: dark;
}

/* 社区外壳与语音模块直接复用主站令牌，三套变量归一 */
.app-shell {
    --app-page: var(--bg);
    --app-surface: var(--panel);
    --app-surface-2: var(--panel-soft);
    --app-line: var(--border);
    --app-line-strong: var(--border-strong);
    --app-text: var(--text);
    --app-muted: var(--muted);
    --app-accent: var(--accent);
    --app-accent-soft: var(--accent-soft);
    --app-accent-text: #ffffff;
    --app-green: var(--success);
    --app-red: var(--danger);
    --app-amber: var(--warn);
    --app-hover: var(--panel-soft);
    --app-radius: var(--radius);
    --app-radius-sm: var(--radius-sm);
    --app-shadow: var(--shadow);
}

/* 提高优先级：盖过 voice.css / app.css 里自带的深色变量块 */
html[data-theme] .app-shell,
html[data-app-theme] .app-shell,
html[data-theme] .voice-app,
html[data-app-theme] .voice-app {
    --app-page: var(--bg);
    --app-surface: var(--panel);
    --app-surface-2: var(--panel-soft);
    --app-line: var(--border);
    --app-line-strong: var(--border-strong);
    --app-text: var(--text);
    --app-muted: var(--muted);
    --app-accent: var(--accent);
    --app-accent-soft: var(--accent-soft);
    --app-accent-text: #ffffff;
    --app-green: var(--success);
    --app-red: var(--danger);
    --app-amber: var(--warn);
    --app-hover: var(--panel-soft);
    --app-radius: var(--radius);
    --app-radius-sm: var(--radius-sm);
    --app-shadow: var(--shadow);

    --vc-page: var(--bg);
    --vc-surface: var(--panel);
    --vc-surface-2: var(--panel-soft);
    --vc-line: var(--border);
    --vc-line-strong: var(--border-strong);
    --vc-text: var(--text);
    --vc-muted: var(--muted);
    --vc-accent: var(--accent);
    --vc-accent-soft: var(--accent-soft);
    --vc-accent-text: #ffffff;
    --vc-green: var(--success);
    --vc-red: var(--danger);
    --vc-amber: var(--warn);
    --vc-hover: var(--panel-soft);
    --vc-bubble: var(--panel-soft);
    --vc-radius: var(--radius);
    --vc-radius-sm: var(--radius-sm);
}

/* 社区外壳让页面氛围透进来，别再是两块割裂的底色 */
.app-shell,
html[data-theme] .app-view,
html[data-app-theme] .app-view {
    background: transparent;
}

/* 社区顶部栏与主站顶栏对齐：同样的毛玻璃 + 描边 */
.app-topbar {
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

/* 主站里内嵌社区外壳时，去掉重复的圆角边框感 */
body.community-web-body .app-shell {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--panel);
}

/* 深色下的小细节 */
/* 表格里的路径 / 域名 / 命令不要被从中间截断，交给 .table-wrap 横向滚动 */
.table code,
.table .mono {
    white-space: nowrap;
}

/* 徽标文字不换行，否则窄列里会被挤成两行变成椭圆 */
.badge,
.app-tag {
    white-space: nowrap;
}

html[data-theme="dark"] .footer {
    color: var(--muted);
}

html[data-theme="dark"] .bbs-search-form input,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color-scheme: dark;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: rgba(100, 116, 139, .45);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, .7);
}

@media (prefers-reduced-motion: reduce) {
    body {
        background-attachment: scroll;
    }
}