/* static/css/style.css */

/* ================== */
/* ===  CSS 变量  === */
/* ================== */

/* --- 浅色主题 (默认) --- */
:root, [data-theme="light"], html[data-bs-theme="light"] {
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-body-color: #212529;
    --bs-body-bg: #ffffff;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-tertiary-bg: #e9ecef;
    --navbar-bg: rgba(255, 255, 255, 0.9);
    --card-bg: #ffffff;
    --card-bg-rgb: 255, 255, 255; /* <--- 新增: 卡片背景的 RGB 值 */
    --footer-bg: #f8f9fa;
    --footer-text-color: #6c757d;
}

/* --- 深色主题 --- */
[data-theme="dark"], html[data-bs-theme="dark"] {
    --bs-primary: #6ea8fe;
    --bs-secondary: #adb5bd;
    --bs-success: #48a77a;
    --bs-info: #6edff6;
    --bs-warning: #ffcd39;
    --bs-danger: #e66573;
    --bs-light: #343a40;
    --bs-dark: #e9ecef;
    --bs-body-color: #e9ecef;
    --bs-body-bg: #1a1a2e; /* 深蓝紫色背景 */
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #9ec5fe;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-tertiary-bg: #2c303a;
    --navbar-bg: rgba(26, 26, 46, 0.85); /* 深色导航栏，带透明 */
    --card-bg: #232a34; /* 深色卡片 */
    --card-bg-rgb: 43, 48, 53; /* <--- 新增: 卡片背景的 RGB 值 (#2b3035) */
    --footer-bg: #1a1a2e;
    --footer-text-color: #adb5bd;
}
/* === 深色主题适配 === */

/* 1. 大背景遮罩：半透明黑色，让背景图变暗一点，突出主体 */
[data-theme="dark"] .register-wrapper {
    background: rgba(0, 0, 0, 0) !important; /* 简单的黑色半透明遮罩 */
}

[data-theme="dark"] .register-box {
    /* 深灰/黑色半透明背景 */
    background-color: rgba(30, 30, 30, 0);

    /* 边框稍微亮一点 */
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* 加上深色模式专属的阴影，更有质感 */
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.5);

}

/* 3. 文字颜色 */
[data-theme="dark"] .register-box .right h1 {
    color: #f5f5dc;
}

[data-theme="dark"] .register-box .acc {
    border-bottom: 1px solid #8ec5fc;
    color: #fff;
}

/* 输入框占位符颜色适配 */
[data-theme="dark"] .register-box .acc::placeholder {
    color: #bbb;
}

[data-theme="dark"] .register-box .fn p,
[data-theme="dark"] .register-box .fn a {
    color: #ccc;
}

/* --- 宁静蓝 (Blue) --- */
html[data-bs-theme="light"] #ajax-content-container[data-current-theme="blue"] {
    --bs-primary: #007bff;
    --bs-link-color: #0056b3;
    --bs-link-hover-color: #007bff;
}
html[data-bs-theme="dark"] #ajax-content-container[data-current-theme="blue"] {
    --bs-primary: #4dabf7;
    --bs-link-color: #4dabf7;
    --bs-link-hover-color: #74c0fc;
}

/* --- 青春绿 (Green) --- */
html[data-bs-theme="light"] #ajax-content-container[data-current-theme="green"] {
    --bs-primary: #28a745;
    --bs-link-color: #1e7e34;
    --bs-link-hover-color: #28a745;
}
html[data-bs-theme="dark"] #ajax-content-container[data-current-theme="green"] {
    --bs-primary: #4dabf7;
    --bs-link-color: #4dabf7;
    --bs-link-hover-color: #74c0fc;
}

/* --- 活力橙 (Yuan) --- */
html[data-bs-theme="light"] #ajax-content-container[data-current-theme="yuan"] {
    --bs-primary: #9c9c97;
    --bs-link-color: #4dabf7;
    --bs-link-hover-color: #74c0fc;
}
html[data-bs-theme="dark"] #ajax-content-container[data-current-theme="yuan"] {
    --bs-primary: 	#f5f5dc;
    --bs-link-color: #4dabf7;
    --bs-link-hover-color: #74c0fc;
}


/* ================== */
/* === 基本和通用 === */
/* ================== */
html, body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 50px; /* 导航栏高度补偿 */
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

.card {
    border: 1px solid var(--bs-border-color-translucent); /* 使用半透明边框 */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

    /* 设置半透明背景色 */
    background-color: rgba(var(--card-bg-rgb), 0.85); /* 85% 不透明度 */

    /* 添加毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
}

/* ================== */
/* === 注册页面适配 === */
/* ================== */

/* 注册页面的外部容器 */

.register-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* === 变化 1：反向抵消 body 的 padding === */
    margin-top: -50px;
    min-height: 100vh;
    /* === 变化 3：内部补偿 === */
    /* 所以这里加 padding-top，数值 = 导航栏高度(70px) + 原本想要的间距(20px) */
    padding-top: 70px;
    padding-bottom: 20px;
    width: 100%;
    /* 现在改成 RGBA (0.85 代表 85% 不透明度)，让背后的图透出来！ */
    background: linear-gradient(
        120deg,
        rgba(224, 195, 252, 0.85) 0%,   /* 对应 #e0c3fc */
        rgba(142, 197, 252, 0.85) 100%  /* 对应 #8ec5fc */
    );
    /*background: transparent !important;*/
    background-attachment: fixed;
    position: relative;
}
/* 2. 复用并覆盖 .box 样式：
   注册内容多，高度需要由内容撑开 (height: auto)，
   或者设一个更大的固定高度 */
/* 注册框主体 */
.register-box {
    display: flex;
    width: 60rem;
    height: auto;
    min-height: 40rem;

    /* === 核心修改开始 === */
    /* 1. 背景色调得更淡一点 (0.7 或 0.6)，让背景隐约可见 */
    background-color: rgba(255, 255, 255, 0.7);

    /* 2. 添加毛玻璃模糊特效 (让背后的背景图变模糊，提升文字可读性) */
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);

    /* 3.以此来增加边缘质感 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* === 核心修改结束 === */

    border-radius: 1.5rem;
    box-shadow: 0 0 1rem 0.2rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* 确保在某些深色主题下，文字依然清晰 */
    color: #333;
}

/* 左侧图片区域适配 */
.register-box .left {
    position: relative;
    width: 35%;
    /* 注册页左侧图片，如果没有单独图片，可以和登录页共用一张，
       或者在这里单独指定 background-image */
    background-image: url('../images/left.jpg');
    background-size: cover;
    background-position: center;
}

/* 右侧表单区域适配 */
.register-box .right {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 2rem; /* 上下多留点白 */
}

/* 标题样式复用 */
.register-box .right h1 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5rem;
    text-align: center;
}

/* 表单宽度 */
.register-box form {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 既然要同步样式，输入框直接复用登录页的 .login-page .acc 样式
   但因为CSS选择器限制，我们需要手动复制一份通用样式，
   或者在HTML里把父级容器 class 加上 login-page (不推荐，容易乱)，
   这里我把 .acc 的样式提取出来给 .register-box 用 */
.register-box .acc {
    outline: none;
    width: 100%;
    font-size: 1rem;
    padding: 0.8rem;
    margin-bottom: 1.2rem; /* 间距稍微调小一点，因为输入框多 */
    border: none;
    border-bottom: 1px solid rgb(144,129,241);
    color: rgb(144,129,241);
    background-color: rgba(0,0,0,0);
    transition: all 0.3s;
}

.register-box .acc:focus {
    outline: none;
    color: rgb(144,129,241);
    padding: 1rem 0 0 1.6rem;
}

/* 注册按钮复用 */
.register-box .submit-btn {
    width: 60%;
    height: 3.5rem;
    border: none;
    border-radius: 0.5rem;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 1.5rem;
}
.register-box .submit-btn:hover {
    box-shadow: 0 0 2rem -0.5rem rgb(0 0 0 / 15%);
    filter: brightness(1.1);
}

        /*登陆*/
body.login-page {
    min-height: 100vh; /* 确保最小高度填满屏幕 */
    padding-top:0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    padding: 20px; /* 防止小屏幕贴边 */
}
.box-container {
    display: flex;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1.5rem;
    box-shadow: 0 0 1rem 0.2rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: auto;
}

/* 登录框特定尺寸 */
.login-page .box {
    display: flex; /* 保持原有flex布局 */
    width: 55rem;
    height: 32rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1.5rem;
    box-shadow: 0 0 1rem 0.2rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.login-page .box .left::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../images/left.jpg');
    background-size: cover;
    background-position: center;
}
.login-page .box .left {
    position: relative;
    width: 35%;
    height: 100%;
    background-color: skyblue;
}

.login-page .box .right {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.login-page .box .right h1 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5rem;
}

.login-page .box .right p {
    color: #555;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}


.login-page form {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 登录输入框样式 */
.login-page .acc {
    outline: none;
    width: 100%;
    font-size: 1.1rem;
    padding: 0.8rem;
    margin-bottom: 1.5rem;
    border: none;
    border-bottom: 1px solid rgb(144,129,241);
    color: rgb(144,129,241);
    background-color: rgba(0,0,0,0);
    transition: all 0.3s;
}

.login-page .acc:focus {
    outline: none;
    color: rgb(144,129,241);
    padding: 1rem 0 0 1.6rem;
}

/* 登录按钮样式 */
.login-page .Login {
    width: 60%;
    height: 3.5rem;
    border: none;
    border-radius: 0.5rem;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 2rem 0 0 0; /* 修正 margin，原代码 transform 导致位置很难控制 */
}

.login-page .Login:hover {
    box-shadow: 0 0 2rem -0.5rem rgb(0 0 0 / 15%);
    filter: brightness(1.1); /* 简单的变亮效果 */
}

.login-page .fn {
    margin-top: 1.5rem;
    width: 70%;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.login-page .fn a {
    font-size: 0.9rem;
    color: #777;
    text-decoration: none;
    transition: color 0.3s;
}

.login-page .fn a:hover {
    color: rgb(144,129,241);
    text-decoration: underline;
}

/* ================== */
/* ===   导航栏   === */
/* ================== */
.navbar {
    background-color: var(--navbar-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background-color 0.3s ease;
}
.navbar .navbar-brand { color: var(--bs-primary); font-weight: bold; }
.navbar .nav-link { color: var(--bs-body-color); }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--bs-primary); }
.navbar .dropdown-menu { background-color: var(--card-bg); border-color: var(--bs-border-color-translucent); }
.navbar .dropdown-item { color: var(--bs-body-color); }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.theme-toggle-button { background: none; border: none; color: var(--bs-body-color); font-size: 1.1rem; padding: 0.375rem 0.75rem; }
.theme-toggle-button:hover { color: var(--bs-primary); }

/* ================== */
/* ===   内容区   === */
/* ================== */
.main-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.flash-messages-container {
    position: sticky;
    top: 70px; /* 导航栏高度 + 一点间距 */
    z-index: 1050;
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none; /* 允许点击穿透 */
}
.flash-messages-container .alert {
    pointer-events: auto; /* 让 alert 可以被点击 */
}

/* --- 背景伪元素 --- */
.main-content::before,
.main-content::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition: opacity 0.6s ease-in-out; /* 稍长过渡 */
  opacity: 0;
  z-index: -1;
}
.main-content::before { background-image: var(--before-bg-image), none; }
.main-content::after { background-image: var(--after-bg-image), none; }
.main-content.js-bg-before-active::before { opacity: 1; }
.main-content.js-bg-after-active::after { opacity: 1; }

/* --- 文章列表和详情 --- */
.post-preview { max-height: 150px; overflow: hidden; color: var(--bs-secondary); }
.post-content { line-height: 1.7; font-size: 1.1rem; }
.post-content img, .post-content video, .post-content audio { max-width: 100%; height: auto; display: block; margin: 1rem auto; border-radius: 8px; box-shadow: 0 4px 8px var(--bs-border-color-translucent); }
.post-content blockquote { border-left: 5px solid var(--bs-tertiary-bg); padding-left: 1rem; margin-left: 0; color: var(--bs-secondary); font-style: italic; }
.post-content pre { background-color: var(--bs-tertiary-bg); padding: 1rem; border-radius: 5px; overflow-x: auto; }
.post-content code { font-size: 0.9em; color: var(--bs-danger); background-color: var(--bs-tertiary-bg); padding: 0.2em 0.4em; border-radius: 3px; }
.post-content pre code { color: inherit; background-color: transparent; padding: 0; }

/* ================== */
/* ===   评论区   === */
/* ================== */
#comments .card { background-color: color-mix(in srgb, var(--card-bg) 95%, transparent); }
#comments .comment-entry { border-left: 3px solid var(--bs-border-color); }
#comments .comment-entry .card-body { padding: 1rem; }
.reply-link { font-size: 0.85em; cursor: pointer; color: var(--bs-secondary); }
.reply-link:hover { color: var(--bs-primary); }

/* ================== */
/* ===   EasyMDE  === */
/* ================== */
.EasyMDEContainer { background-color: var(--card-bg); border-color: var(--bs-border-color) !important; }
.CodeMirror { background-color: var(--card-bg); color: var(--bs-body-color); border-color: var(--bs-border-color) !important; }
.editor-toolbar { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color) !important; }
.editor-toolbar a { color: var(--bs-body-color) !important; }
.editor-toolbar a:hover, .editor-toolbar a.active { background-color: var(--bs-border-color); border-color: var(--bs-border-color) !important; }
.editor-preview, .editor-preview-side { background-color: var(--card-bg); border-color: var(--bs-border-color) !important; }

/* ================== */
/* ===   页脚     === */
/* ================== */
.footer { background-color: var(--footer-bg); color: var(--footer-text-color); transition: background-color 0.3s ease, color 0.3s ease; border-top: 1px solid var(--bs-border-color-translucent); }

/* ================== */
/* === 音乐播放器 === */
/* ================== */
#theme-music-player {
  position: fixed;
  bottom: 15px; right: 15px;
  border: none;
  width: 298px; height: 66px;
  z-index: 1000;
  display: none;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
#theme-music-player:hover { opacity: 1; transform: scale(1.02); }