/* ==========================================================================
   白夜 · 全站设计系统 (theme.css)
   --------------------------------------------------------------------------
   内容顺序：
   1. 设计变量 (Design Tokens)
   2. 基础重置与排版
   3. 页面背景与遮罩系统
   4. 布局容器
   5. 顶部 Header
   6. 导航栏
   7. 卡片 / 面板
   8. 按钮
   9. 表单
   10. 页面标题区
   11. 徽标 / 标签 / 提示条
   12. 列表与空状态
   13. 页脚
   14. 工具类与响应式
   ========================================================================== */

/* ==========================================================================
   1. 设计变量
   ========================================================================== */
:root {
    /* ---- 品牌色 ---- */
    --brand-50:  #fdf9f3;
    --brand-100: #f9f1e5;
    --brand-200: #f2e5d3;
    --brand-300: #e8d5be;
    --brand-400: #d9bfa1;
    --brand-500: #b98f5e;
    --brand-600: #9a6f42;
    --brand-700: #7a5530;
    --brand-800: #5a3e2b;
    --brand-900: #3a2a1e;
    --brand-950: #2a1d14;

    /* ---- 强调色（金色） ---- */
    --gold-100: #fdf3d7;
    --gold-300: #f5d98a;
    --gold-400: #f0c95c;
    --gold-500: #e0ab2e;
    --gold-600: #c38f1c;

    /* ---- 中性色 ---- */
    --ink-900: #202a33;
    --ink-800: #2b3742;
    --ink-700: #3c4b58;
    --ink-500: #5c6b78;
    --ink-400: #7d8a95;
    --ink-300: #9aa5ae;
    --line:    rgba(90, 62, 43, 0.12);

    /* ---- 语义色 ---- */
    --success: #3f8f5f;
    --danger:  #c0453f;
    --info:    #4a7fc1;

    /* ---- 表面与文字 ---- */
    --surface:        rgba(255, 255, 255, 0.92);
    --surface-strong: #ffffff;
    --surface-muted:  rgba(255, 255, 255, 0.66);
    --text-on-header: #f7efe4;
    --text-muted:     var(--ink-500);

    /* ---- 边框与圆角 ---- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* ---- 阴影 ---- */
    --shadow-xs: 0 1px 2px rgba(42, 29, 20, 0.05);
    --shadow-sm: 0 2px 8px rgba(42, 29, 20, 0.06);
    --shadow-md: 0 8px 24px rgba(42, 29, 20, 0.10);
    --shadow-lg: 0 18px 48px rgba(42, 29, 20, 0.16);

    /* ---- 字体与节奏 ---- */
    --font-sans: "Inter", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC",
                 system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- 层级 ---- */
    --z-overlay: 1040;
    --z-drawer: 1050;
}

/* ==========================================================================
   2. 基础重置与排版
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink-800);
    background-color: var(--brand-50);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-900);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.2px;
}

h4 { font-size: 1.2rem; }
h5 { font-size: 1.08rem; }

p { margin-bottom: 0.9rem; }

a { color: var(--brand-700); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--gold-600); }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    opacity: 1;
    margin: 1.9rem 0;
}

code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--brand-800);
    background: var(--brand-100);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
}

::selection {
    background: rgba(224, 171, 46, 0.28);
    color: var(--ink-900);
}

:focus-visible {
    outline: 3px solid rgba(224, 171, 46, 0.45);
    outline-offset: 2px;
}

/* ==========================================================================
   3. 页面背景与遮罩系统
   --------------------------------------------------------------------------
   默认：内页使用统一的暖色渐变 + 极淡纹理，保证长时间阅读舒适。
   覆盖：给 body 加上 .has-photo-bg 并提供 --page-bg 变量即可使用照片背景，
         遮罩由 .page-bg-overlay 统一渲染，避免每页各写一套。
   ========================================================================== */
body {
    background-image:
        radial-gradient(circle at 12% 8%, rgba(224, 171, 46, 0.10), transparent 45%),
        radial-gradient(circle at 88% 0%, rgba(185, 143, 94, 0.12), transparent 42%),
        linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%);
    background-attachment: fixed;
}

body.has-photo-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--page-bg);
    background-size: cover;
    background-position: var(--page-bg-position, center);
    background-repeat: no-repeat;
}

/* 柔和遮罩：自上而下渐深，保证文字对比度的同时保留背景图的氛围 */
body.has-photo-bg::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(253, 249, 243, 0.30) 0%, rgba(253, 249, 243, 0.48) 45%, rgba(249, 241, 229, 0.70) 100%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%);
    backdrop-filter: saturate(0.94);
    -webkit-backdrop-filter: saturate(0.94);
}

/* ==========================================================================
   4. 布局容器
   ========================================================================== */
main.container {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1180px;
    padding: 0 20px;
    margin: 0 auto;
}

.page-shell {
    max-width: 940px;
    margin: 28px auto 48px;
}

/* 内容主面板：全站统一的半透明卡片 */
.surface-panel {
    background-color: var(--surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 36px 40px 40px;
}

.surface-panel--narrow { max-width: 620px; margin-left: auto; margin-right: auto; }
.surface-panel--form   { max-width: 720px; margin-left: auto; margin-right: auto; }

/* main 内的标题区不再自带分割线，交给具体页面控制 */
main.container > .pb-2.border-bottom {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   5. 顶部 Header
   ========================================================================== */
.site-header {
    background: linear-gradient(120deg, var(--brand-900) 0%, var(--brand-800) 55%, var(--brand-700) 100%);
    color: var(--text-on-header);
    padding: 14px 0;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid rgba(224, 171, 46, 0.25);
}

.site-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--text-on-header);
}

.site-brand:hover { color: #fff; }

.site-brand__mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--brand-950);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 6px 18px rgba(224, 171, 46, 0.35);
    flex: none;
}

.site-brand__text { display: flex; flex-direction: column; line-height: 1.25; }

.site-brand__name {
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #fff;
}

.site-brand__tagline {
    font-size: 0.74rem;
    letter-spacing: 1.6px;
    color: rgba(247, 239, 228, 0.72);
    text-transform: uppercase;
}

.site-header__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
    margin-left: 4px;
    border-left: 1px solid rgba(247, 239, 228, 0.22);
    font-size: 0.82rem;
    letter-spacing: 0.6px;
    color: rgba(247, 239, 228, 0.78);
}

.site-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.site-header__actions--main { flex: 1 1 auto; justify-content: flex-end; }

/* Header 内的次级按钮 */
.btn-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(247, 239, 228, 0.92);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(247, 239, 228, 0.28);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: var(--transition);
}

.btn-header:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(224, 171, 46, 0.6);
    color: #fff;
    transform: translateY(-1px);
}

/* ==========================================================================
   6. 导航栏
   ========================================================================== */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: rgba(253, 249, 243, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    padding: 0;
    margin-bottom: 4px;
}

.site-nav__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.site-nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 auto 0 0;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 15px 14px;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--brand-800);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    cursor: pointer;
    font-family: inherit;
}

.site-nav__link:hover {
    color: var(--gold-600);
    border-bottom-color: var(--gold-400);
}

.site-nav__link.is-active {
    color: var(--gold-600);
    border-bottom-color: var(--gold-500);
    font-weight: 600;
}

.site-nav__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.site-nav__user {
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* 桌面端：菜单始终展开，汉堡按钮隐藏 */
.site-nav__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    gap: 6px;
}

.site-nav__toggle { display: none; }

/* ==========================================================================
   7. 卡片 / 面板
   ========================================================================== */
.ui-card {
    background-color: var(--surface);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px 26px;
    transition: var(--transition);
}

.ui-card--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(224, 171, 46, 0.35);
}

.ui-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 14px;
}

/* ==========================================================================
   8. 按钮
   ========================================================================== */
.btn-primary-ui,
.btn-ghost-ui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 32px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
    line-height: 1.4;
}

.btn-primary-ui {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    color: var(--brand-950);
    box-shadow: 0 6px 20px rgba(224, 171, 46, 0.32);
}

.btn-primary-ui:hover {
    color: var(--brand-950);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(224, 171, 46, 0.42);
}

.btn-primary-ui:active { transform: translateY(0); }

.btn-ghost-ui {
    background: rgba(255, 255, 255, 0.6);
    color: var(--brand-800);
    border-color: var(--line);
}

.btn-ghost-ui:hover {
    background: #fff;
    color: var(--brand-800);
    border-color: var(--brand-400);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-block-ui { width: 100%; }

/* 危险操作按钮 */
.btn-danger-ui {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--danger);
    background: rgba(192, 69, 63, 0.07);
    border: 1px solid rgba(192, 69, 63, 0.18);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition);
}

.btn-danger-ui:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* Bootstrap 按钮在本站中的统一外观 */
.btn-primary {
    background-color: var(--brand-800) !important;
    border-color: var(--brand-800) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
}

.btn-outline-secondary {
    color: var(--brand-800) !important;
    border-color: var(--line) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--brand-800) !important;
    border-color: var(--brand-800) !important;
    color: #fff !important;
}

/* ==========================================================================
   9. 表单
   ========================================================================== */
.ui-form label,
.ui-form .form-label {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink-800);
    margin-bottom: 7px;
}

.ui-form input[type="text"],
.ui-form input[type="email"],
.ui-form input[type="password"],
.ui-form input[type="number"],
.ui-form input[type="url"],
.ui-form textarea,
.ui-form select,
.ui-form .form-control {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--ink-900);
    background-color: rgba(255, 255, 255, 0.85);
    border: 1.5px solid var(--brand-200);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: var(--transition);
    margin-bottom: 4px;
}

.ui-form input:focus,
.ui-form textarea:focus,
.ui-form select:focus,
.ui-form .form-control:focus {
    background-color: #fff;
    border-color: var(--gold-400);
    box-shadow: 0 0 0 4px rgba(224, 171, 46, 0.16);
    outline: none;
}

.ui-form input::placeholder,
.ui-form textarea::placeholder { color: var(--ink-300); }

.ui-form textarea { min-height: 170px; resize: vertical; line-height: 1.7; }

/* 说明性提示：单独成块，避免与下一个字段挤在一起 */
.ui-form p.helptext,
.ui-form p.form-text {
    display: block;
    margin: 10px 0 4px;
    padding: 11px 15px;
    max-width: 520px;
    font-size: 0.81rem;
    line-height: 1.85;
    color: var(--ink-500);
    background: rgba(255, 255, 255, 0.58);
    border-left: 3px solid var(--brand-300);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.ui-form ul.errorlist + p.helptext,
.ui-form ul.errorlist + .helptext { margin-top: 8px; }

.ui-form fieldset,
.ui-form .form-group { margin-bottom: 22px; }

.ui-form label + input,
.ui-form label + textarea,
.ui-form label + select { margin-top: 2px; }

.ui-form .errorlist {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    font-size: 0.84rem;
    color: var(--danger);
}

.form-actions { margin-top: 24px; }

/* 表单卡片内的分组标题 */
.form-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--brand-500);
    margin-bottom: 10px;
}

/* ==========================================================================
   10. 页面标题区
   ========================================================================== */
.page-head {
    text-align: center;
    margin-bottom: 26px;
}

.page-head__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold-600);
    background: rgba(224, 171, 46, 0.12);
    border: 1px solid rgba(224, 171, 46, 0.28);
    border-radius: var(--radius-pill);
    padding: 4px 14px;
    margin-bottom: 14px;
}

.page-head__title {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.page-head__subtitle {
    font-size: 0.98rem;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.4px;
    /* 页面标题区可能叠在照片背景上，加极淡白色描边保证可读性 */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.55);
}

/* 内容页内的段落小标题 */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(224, 171, 46, 0.28);
}

.section-title__index {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-600);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.prose { color: var(--ink-700); }
.prose p { line-height: 1.95; }
.prose--lead { font-size: 1.02rem; }

.text-muted { color: var(--text-muted) !important; }

/* ==========================================================================
   11. 徽标 / 标签 / 提示条
   ========================================================================== */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--brand-700);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(185, 143, 94, 0.28);
    border-radius: var(--radius-pill);
    padding: 4px 13px;
}

.ui-badge--gold {
    color: var(--gold-600);
    background: rgba(224, 171, 46, 0.12);
    border-color: rgba(224, 171, 46, 0.3);
}

.ui-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--ink-500);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold-400);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
}

.ui-note--soft {
    border-left-color: var(--brand-400);
    background: rgba(255, 255, 255, 0.5);
}

/* 统计条（共 N 个主题 / N 条记录） */
.ui-statbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--brand-200);
}

.ui-statbar__count {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 0.4px;
}

/* ==========================================================================
   12. 列表与空状态
   ========================================================================== */
.ui-list { list-style: none; padding: 0; margin: 0; }

.ui-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.ui-list-item:hover {
    background: #fff;
    border-color: rgba(224, 171, 46, 0.4);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.ui-list-item__title {
    flex: 1 1 60%;
    font-size: 1.04rem;
    font-weight: 600;
    color: var(--ink-900);
    text-decoration: none;
}

.ui-list-item__title:hover { color: var(--gold-600); }

.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.empty-state__icon { font-size: 3.4rem; line-height: 1; margin-bottom: 14px; opacity: 0.75; }
.empty-state__title { font-size: 1.06rem; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
.empty-state__hint { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 18px; }

/* 全局轻提示（游戏成就、签到等） */
.fw-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 24px);
    z-index: 1080;
    max-width: min(92vw, 460px);
    padding: 13px 22px;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-800), var(--brand-950));
    border: 1px solid rgba(224, 171, 46, 0.45);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fw-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ==========================================================================
   13. 页脚
   ========================================================================== */.site-footer {
    margin-top: 56px;
    background: linear-gradient(120deg, var(--brand-950) 0%, var(--brand-900) 60%, var(--brand-800) 100%);
    color: rgba(247, 239, 228, 0.75);
    padding: 34px 0 26px;
    font-size: 0.86rem;
}

.site-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
}

.site-footer__brand { color: #fff; font-weight: 700; letter-spacing: 3px; font-size: 1rem; }
.site-footer__desc { margin: 6px 0 0; max-width: 420px; line-height: 1.8; }

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__links a {
    color: rgba(247, 239, 228, 0.78);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__links a:hover { color: var(--gold-400); }

.site-footer__bottom {
    max-width: 1180px;
    margin: 22px auto 0;
    padding: 16px 20px 0;
    border-top: 1px solid rgba(247, 239, 228, 0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    font-size: 0.8rem;
    color: rgba(247, 239, 228, 0.55);
}

/* 备案信息（ICP / 公安备案号）。
   法规要求展示在网站底部，且要能点进官方查询页。
   号码没配置时模板整块不渲染，所以这里不用考虑"空着一行"的情况。 */
.site-footer__beian {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.78rem;
}

.site-footer__beian a {
    color: rgba(247, 239, 228, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__beian a:hover {
    color: var(--gold-400);
    text-decoration: underline;
}

/* 主题切换按钮 */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.theme-toggle__icon { font-size: 0.95em; line-height: 1; }

/* 返回顶部 */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 1035;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-800);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--brand-800);
    color: #fff;
    border-color: var(--brand-800);
}

/* 首页「今日专注」卡片 */
.focus-card {
    padding: 22px 20px !important;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(232, 213, 190, 0.7);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.focus-card__timer {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--ink-900);
    letter-spacing: 3px;
    line-height: 1.1;
    margin: 4px 0 16px;
    font-variant-numeric: tabular-nums;
}

.focus-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.focus-card__btn {
    flex: 1 1 0;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-800);
    background: rgba(90, 62, 43, 0.06);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.focus-card__btn:hover { background: rgba(90, 62, 43, 0.12); }

.focus-card__btn--primary {
    color: var(--brand-950);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(224, 171, 46, 0.3);
}

.focus-card__btn--primary:hover { background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); }
.focus-card__btn--primary.is-running {
    color: #fff;
    background: linear-gradient(135deg, #ef6c6c, #d64545);
    box-shadow: 0 4px 14px rgba(214, 69, 69, 0.3);
}

.focus-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px dashed var(--brand-200);
}

.focus-stat { text-align: center; }
.focus-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-700);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.focus-stat__label { font-size: 0.74rem; color: var(--text-muted); }

.focus-card__hint {
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.focus-card__hint kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--brand-800);
    background: rgba(90, 62, 43, 0.08);
    border: 1px solid var(--line);
    border-radius: 5px;
}

@media (max-width: 768px) {
    .back-to-top { right: 14px; bottom: 16px; width: 40px; height: 40px; }
    .focus-card__timer { font-size: 2.1rem; }
}

/* ---- 深色主题：重映射语义令牌，组件无需改动 ---- */
:root[data-theme="dark"] {
    --surface:        rgba(38, 31, 26, 0.92);
    --surface-strong: #2a221d;
    --surface-muted:  rgba(38, 31, 26, 0.66);
    --text-muted:     #a99e91;

    --ink-900: #f2ece4;
    --ink-800: #e2d9ce;
    --ink-700: #cfc4b7;
    --ink-500: #a99e91;
    --ink-400: #8d8377;
    --ink-300: #6f665c;
    --line:    rgba(226, 200, 168, 0.16);

    --brand-50:  #1a1512;
    --brand-100: #221b16;
    --brand-200: #33281f;
    --brand-300: #4a3a2c;
    --brand-400: #6b543f;
    --brand-500: #a98b63;
    --brand-600: #c8a878;
    --brand-700: #e0c49a;
    --brand-800: #efd9b8;
    --brand-900: #f6e8d2;
    --brand-950: #fdf6ea;

    --gold-100: #3a2c14;
    --gold-300: #a8823a;
    --gold-400: #d8a83c;
    --gold-500: #e8bd52;
    --gold-600: #f0cd74;

    --success: #6fce8e;
    --danger:  #ef8480;
    --info:    #7fb2ee;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] body {
    background-image:
        radial-gradient(circle at 12% 8%, rgba(216, 168, 60, 0.10), transparent 45%),
        radial-gradient(circle at 88% 0%, rgba(168, 139, 99, 0.12), transparent 42%),
        linear-gradient(180deg, #14100d 0%, #1c1613 100%);
    color-scheme: dark;
}

:root[data-theme="dark"] body.has-photo-bg::after {
    background:
        linear-gradient(180deg, rgba(16, 13, 10, 0.60) 0%, rgba(16, 13, 10, 0.70) 55%, rgba(12, 10, 8, 0.80) 100%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%);
}

:root[data-theme="dark"] .site-header {
    background: linear-gradient(120deg, #14100d 0%, #1e1713 55%, #2a2019 100%);
    border-bottom-color: rgba(232, 189, 82, 0.28);
}

:root[data-theme="dark"] .site-nav {
    background-color: rgba(26, 21, 18, 0.94);
}

:root[data-theme="dark"] .site-footer {
    background: linear-gradient(120deg, #0f0c0a 0%, #171310 60%, #1f1814 100%);
}

/* 深色下的表层元素：把硬编码的白色换成深色玻璃。
   新增页面时，只要组件用了「硬编码的白/浅色背景 + 变量文字色」，
   就必须把它的类名加进这个列表，否则会出现"浅色文字压在浅色底上"而看不见。

   ★ 这里用 !important 是刻意的：base.html 里 {% block extra_css %} 排在
   theme.css 之后，各页面模板的 <style> 会覆盖本文件。两边选择器特异性相同
   （都是 :root[data-theme] + 单个类），后加载的模板样式就会赢，深色适配失效。
   已有一处同类先例（:root[data-theme="dark"] .btn-primary）也是这么处理的。 */
:root[data-theme="dark"] .ui-card,
:root[data-theme="dark"] .surface-panel,
:root[data-theme="dark"] .ui-list-item,
:root[data-theme="dark"] .ui-note,
:root[data-theme="dark"] .playlist-card,
:root[data-theme="dark"] .mood-card,
:root[data-theme="dark"] .focus-card,
:root[data-theme="dark"] .stat-box,
:root[data-theme="dark"] .ach-item,
:root[data-theme="dark"] .board-list li,
:root[data-theme="dark"] .contact-channel,
:root[data-theme="dark"] .tech-item,
:root[data-theme="dark"] .thank-list li,
:root[data-theme="dark"] .game-card,
:root[data-theme="dark"] .progress-card,
:root[data-theme="dark"] .progress-topics li,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .game-guide,
:root[data-theme="dark"] .toolbox-widget {
    background-color: var(--surface) !important;
    background-image: none !important;
    border-color: var(--line) !important;
}

/* 提示条有几个变体用 background 简写覆盖底色，深色下要单独处理。
   注意：上面那条规则里的 background-image: none 会"清空"简写设置的颜色，
   所以变体必须显式再给一次 background-color。 */
:root[data-theme="dark"] .ui-note--soft {
    background-color: var(--surface-muted) !important;
    border-color: var(--line) !important;
}

/* 游戏卡片的图标圆底是白→米色的径向渐变，深色下要换成深色渐变，
   否则圆里会出现一块突兀的白斑。 */
:root[data-theme="dark"] .game-card__emoji {
    background: radial-gradient(circle, #322a23, rgba(38, 31, 26, 0.9)) !important;
}

/* 分类小标签原本是浅米色胶囊，深色下换成半透明深色 */
:root[data-theme="dark"] .game-card__category {
    color: var(--brand-600) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* 难度那一行用的是 --ink-400，在深色卡片上只有 4.42:1，差一点点不达标，
   提到 --ink-500（#a99e91，6.25:1）更稳。 */
:root[data-theme="dark"] .game-card__difficulty {
    color: var(--ink-500) !important;
}

/* 白兔对话气泡：文字是品牌粉，深色底上要提亮才够对比 */
:root[data-theme="dark"] .bunny-talk {
    background-color: var(--surface) !important;
    color: #f2a3c0 !important;
    border-color: var(--line) !important;
}

/* 小圆角按钮（次要按钮、游戏按钮、触摸按钮、心情/地球按钮、移动端菜单键） */
:root[data-theme="dark"] .btn-ghost-ui,
:root[data-theme="dark"] .btn-header,
:root[data-theme="dark"] .game-btn,
:root[data-theme="dark"] .touch-btn,
:root[data-theme="dark"] .mood-btn,
:root[data-theme="dark"] .globe-btn,
:root[data-theme="dark"] .site-nav__toggle {
    background: rgba(255, 255, 255, 0.09) !important;
    color: var(--brand-800) !important;
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .btn-ghost-ui:hover,
:root[data-theme="dark"] .game-btn:hover,
:root[data-theme="dark"] .touch-btn:hover,
:root[data-theme="dark"] .mood-btn:hover,
:root[data-theme="dark"] .globe-btn:hover,
:root[data-theme="dark"] .site-nav__toggle:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: var(--gold-400) !important;
    color: var(--gold-500) !important;
}

/* 移动端展开态的汉堡按钮：原来是深底白字，深色下反过来才看得清 */
:root[data-theme="dark"] .site-nav__toggle.is-active {
    background: var(--gold-500) !important;
    border-color: var(--gold-500) !important;
    color: #1a1512 !important;
}

/* 游戏 HUD（生命/分数条）与徽标原本是半透明白底 */
:root[data-theme="dark"] .game-hud,
:root[data-theme="dark"] .game-hud__item,
:root[data-theme="dark"] .ui-badge {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--line) !important;
}

/* 小工具面板里的输入控件与下拉框 */
:root[data-theme="dark"] .pomodoro-settings input,
:root[data-theme="dark"] .weather-selector select {
    background-color: rgba(20, 16, 13, 0.75) !important;
    color: var(--ink-900) !important;
    border-color: var(--line) !important;
}

/* 列表项悬停：原来是纯白，深色下用更亮的玻璃色 */
:root[data-theme="dark"] .board-list li:hover,
:root[data-theme="dark"] .song-item:hover,
:root[data-theme="dark"] .progress-topics li:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

:root[data-theme="dark"] .ui-form input,
:root[data-theme="dark"] .ui-form textarea,
:root[data-theme="dark"] .ui-form select,
:root[data-theme="dark"] .ui-form .form-control {
    background-color: rgba(20, 16, 13, 0.75);
    color: var(--ink-900);
    border-color: var(--line);
}

:root[data-theme="dark"] .ui-form input:focus,
:root[data-theme="dark"] .ui-form textarea:focus,
:root[data-theme="dark"] .ui-form select:focus {
    background-color: rgba(20, 16, 13, 0.95);
}

:root[data-theme="dark"] .ui-form p.helptext,
:root[data-theme="dark"] .ui-form p.form-text {
    background: rgba(20, 16, 13, 0.6);
}

:root[data-theme="dark"] .btn-outline-secondary {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--brand-800) !important;
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--gold-500) !important;
    border-color: var(--gold-500) !important;
    color: #1a1512 !important;
}

:root[data-theme="dark"] .btn-primary {
    background-color: var(--gold-500) !important;
    border-color: var(--gold-500) !important;
    color: #1a1512 !important;
}

:root[data-theme="dark"] .back-to-top {
    background: rgba(38, 31, 26, 0.94);
    color: var(--brand-800);
}

:root[data-theme="dark"] .home-hero,
:root[data-theme="dark"] .home-dream,
:root[data-theme="dark"] .home-game {
    background: linear-gradient(140deg, rgba(40, 33, 27, 0.96), rgba(30, 25, 21, 0.94));
    border-color: var(--line);
}

:root[data-theme="dark"] .feature-banner {
    background: linear-gradient(125deg, #241811 0%, #33231a 45%, #4a2c1c 100%);
}

:root[data-theme="dark"] .coin-panel,
:root[data-theme="dark"] .total-coins-panel {
    background: linear-gradient(135deg, rgba(58, 44, 20, 0.9), rgba(74, 56, 24, 0.85));
}

:root[data-theme="dark"] .weather-result {
    background: linear-gradient(140deg, rgba(38, 32, 26, 0.9), rgba(28, 26, 32, 0.9));
}

:root[data-theme="dark"] .globe-wrapper {
    background-color: var(--surface);
}

/* ==========================================================================
   14. 工具类与响应式
   ========================================================================== */.u-mt-24 { margin-top: 24px; }
.u-mt-16 { margin-top: 16px; }
.u-mb-0  { margin-bottom: 0; }
.u-center { text-align: center; }

.inline-form { display: inline-flex; margin: 0; }

@media (max-width: 768px) {
    body { font-size: 15.5px; }

    .surface-panel { padding: 24px 18px 28px; border-radius: var(--radius-lg); }
    .page-shell { margin: 16px auto 32px; }
    main.container { padding: 0 14px; }

    .site-header { padding: 12px 0; }
    .site-header__row { gap: 10px; }
    .site-brand { gap: 10px; }
    .site-brand__mark { width: 38px; height: 38px; font-size: 1.15rem; border-radius: 11px; }
    .site-brand__name { font-size: 1.16rem; letter-spacing: 3px; }
    .site-brand__tagline { display: none; }
    .site-header__meta { display: none; }

    /* 移动端：三个入口按钮均分整行，避免溢出 */
    .site-header__actions--main {
        flex: 1 1 100%;
        justify-content: stretch;
        gap: 6px;
    }
    .site-header__actions--main .btn-header {
        flex: 1 1 0;
        justify-content: center;
        padding: 7px 8px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* 移动端：折叠式导航 */
    .site-nav__inner { padding: 0 14px; position: relative; }

    .site-nav__toggle {
        display: grid;
        place-items: center;
        position: absolute;
        top: 8px;
        right: 14px;
        z-index: 2;
        width: 42px;
        height: 38px;
        padding: 0;
        color: var(--brand-800);
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid var(--line);
        border-radius: var(--radius-xs);
        cursor: pointer;
        transition: var(--transition);
    }
    .site-nav__toggle:hover { border-color: var(--gold-400); }
    .site-nav__toggle-icon { display: block; fill: currentColor; }
    .site-nav__toggle.is-active {
        color: #fff;
        background: var(--brand-800);
        border-color: var(--brand-800);
    }

    /* 收起状态给汉堡按钮留出高度 */
    .site-nav__inner { min-height: 54px; }

    .site-nav__menu { display: none; }
    .site-nav__menu.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding-bottom: 14px;
        border-top: 1px solid var(--line);
    }

    .site-nav__links {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 6px 0 0;
    }
    .site-nav__links > li { width: 100%; }
    .site-nav__link {
        display: flex;
        width: 100%;
        padding: 12px 4px;
        font-size: 0.94rem;
        border-bottom: 1px solid rgba(90, 62, 43, 0.08);
    }
    .site-nav__link.is-active { background: rgba(224, 171, 46, 0.08); }

    .site-nav__right {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        margin: 12px 0 0;
        padding-top: 12px;
        border-top: 1px dashed var(--brand-200);
    }
    .site-nav__right .btn,
    .site-nav__right .inline-form { width: 100%; }
    .site-nav__right .btn { padding: 9px 16px; }
    .site-nav__user { text-align: center; }

    .page-head__title { letter-spacing: 1px; }
    .ui-card { padding: 20px 18px; }
    .ui-list-item { padding: 13px 14px; }
    .btn-primary-ui, .btn-ghost-ui { padding: 11px 24px; font-size: 0.94rem; }
}

/* ==========================================================================
   小屏手机（≤480px）：iPhone SE / 多数安卓机
   768px 那档的间距在这个宽度下仍偏大，容易把内容挤到需要横滑。
   ========================================================================== */
@media (max-width: 480px) {
    body { font-size: 15px; line-height: 1.7; }

    main.container { padding: 0 10px; }
    .surface-panel { padding: 20px 14px 22px; border-radius: var(--radius-md); }
    .page-shell { margin: 12px auto 26px; }

    /* 顶栏：品牌与按钮进一步收紧，避免三颗按钮换行后过高 */
    .site-header { padding: 10px 0; }
    .site-brand__mark { width: 34px; height: 34px; font-size: 1.05rem; border-radius: 10px; }
    .site-brand__name { font-size: 1.05rem; letter-spacing: 2px; }
    .site-header__actions--main .btn-header {
        padding: 6px 6px;
        font-size: 0.72rem;
        letter-spacing: 0;
    }

    /* 导航抽屉里的条目矮一点，一屏能看全 */
    .site-nav__link { padding: 11px 4px; font-size: 0.9rem; }
    .site-nav__toggle { width: 38px; height: 34px; }

    /* 标题与卡片 */
    .page-head__title { font-size: 1.42rem; letter-spacing: 0.5px; }
    .page-head__subtitle { font-size: 0.88rem; }
    .ui-card { padding: 18px 14px; }
    .section-title { font-size: 1.08rem; }

    /* 按钮：仍保持足够点按高度（≥40px），但宽度不再溢出 */
    .btn-primary-ui, .btn-ghost-ui {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
    }

    /* 长时间不换行的中文标题在窄屏容易顶破容器 */
    h1, h2, h3, h4 { word-break: break-word; }

    /* 表格/预格式文本在小屏必须能自己滚动，而不是撑破页面 */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 手机横屏时给画布留出足够高度 */
@media (max-height: 520px) and (orientation: landscape) {
    #gameCanvas { max-height: calc(100vh - 120px); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}