/*
 * 复古个人博客CSS样式
 * 模仿2000年初互联网风格
 */

/* 全局样式 */
html {
    height: 100%;
    overflow-y: overlay;
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background: #c4b8a8;
}

body {
    background-color: #1a0f2e;
    background-image: url("/images/dream-bg.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    font-family: "SimSun", "宋体", "MingLiu", serif;
    font-size: 14px;
    color: #000000;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
    user-select: none;
    cursor: default;
    display: flex;
    flex-direction: column;
}

/* 页面容器和后台容器允许文本选择 */
.page-container,
.admin-wrapper {
    user-select: text;
}

/* ==================== 复古简约滚动条样式 ==================== */
/* WebKit 浏览器 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c4b8a8;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #b8a898;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox 浏览器 */
* {
    scrollbar-width: thin;
    scrollbar-color: #c4b8a8 transparent;
}

/* 自定义滚动条容器 */
.custom-scrollbar {
    scrollbar-gutter: stable;
}

/* 页面容器 - 响应式 */
.page-container {
    width: 75%;
    max-width: 1296px;
    margin: 15px auto;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 30px);
    max-height: calc(100vh - 30px);
    background-color: rgb(232, 223, 208);
    overflow: hidden;
    padding: 0 20px;
}

/* 顶部和底部固定区域 */
.fixed-header,
.fixed-footer {
    flex-shrink: 0;
    padding: 4px 0;
}

/* 中间滚动内容区域 */
.scroll-content {
    flex: 1;
    overflow-y: overlay;
    padding: 4px 0;
    min-height: 0;
}

/* 内部表格容器样式 */
.page-container > table {
    background-color: rgb(232, 223, 208);
    width: 100%;
}

.page-container > table td {
    padding: 0;
}

/* 滚动内容区内部表格 */
.scroll-content table {
    width: 100%;
}

/* 图片加载过渡 */
img {
    opacity: 1;
    transition: opacity 0.2s ease;
}

img.loading {
    opacity: 0;
}

table {
    background-color: rgb(240, 230, 214);
}

a:link, a:visited {
    color: #0000ee;
    text-decoration: underline;
}

a:hover {
    color: #ff0000;
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin: 5px 0 10px 0;
    padding: 0;
    font-weight: normal;
}

/* 头部标题 */
.header {
    background-color: rgb(250, 243, 230);
    border: 1px solid #c4b8a8;
    margin-bottom: 5px;
    border-radius: 0;
}

.header-menu {
    background-color: rgb(250, 243, 230);
    border: 1px solid #c4b8a8;
    border-collapse: collapse;
}

.header-menu td {
    border: none;
    padding: 6px 10px;
}

.header-menu .title {
    margin: 2px 0;
}

.header-menu .subtitle {
    margin: 2px 0 4px 0;
}

.title {
    font-size: 28px;
    color: #8b4513;
    font-family: "SimHei", "黑体", serif;
    margin: 5px 0;
}

.subtitle {
    font-size: 14px;
    color: #666666;
    margin-bottom: 5px;
}

/* 分割线 */
.divider {
    text-align: center;
    margin: 5px 0;
    height: 20px;
}

.divider-small {
    text-align: center;
    margin: 3px 0;
    height: 10px;
}

/* 导航菜单 */
.menu {
    background-color: rgb(232, 220, 200);
    margin: 0;
    border-radius: 0;
}

.menu td {
    font-weight: bold;
    padding: 6px 10px !important;
}

/* 公告 */
.notice {
    margin: 0 0 9px 0;
    border: 1px solid #c4b8a8;
    border-radius: 0;
    overflow: hidden;
    background-color: rgb(250, 243, 230);
}

.notice-text {
    color: #cc0000;
    font-size: 14px;
}

/* 内容区块 */
.content-box {
    background-color: rgb(250, 243, 230);
    border: 1px solid #c4b8a8;
    margin-bottom: 10px;
    border-radius: 0;
}

.sidebar-box {
    background-color: rgb(250, 243, 230);
    border: 1px solid #c4b8a8;
    margin-bottom: 10px;
    border-radius: 0;
}

.box-title {
    color: #8b4513;
    font-size: 16px;
    font-family: "SimHei", "黑体", serif;
    border-bottom: 1px dotted #c4b8a8;
    padding-bottom: 3px;
    margin-bottom: 6px;
}

/* 首页最新文章列表 */
.article-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.article-list li {
    padding: 3px 0;
    border-bottom: 1px dotted #c4b8a8;
}

.article-list a {
    font-size: 14px;
}

.article-list .date {
    float: right;
    color: #666666;
    font-size: 12px;
}

/* 站点统计 */
.stats {
    line-height: 2;
}

.counter {
    font-family: "Courier New", monospace;
    font-size: 18px;
    color: #cc0000;
    font-weight: bold;
    letter-spacing: 2px;
}

/* 友情链接列表 */
.links-list ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.links-list li {
    padding: 4px 0;
}

/* 装饰文字 */
.decor-text {
    color: #666666;
    font-style: italic;
    margin-top: 10px;
}

/* 页脚 */
.footer {
    background-color: rgb(250, 243, 230);
    border: 1px solid #c4b8a8;
    margin-top: 5px;
    border-radius: 0;
}

.copyright {
    color: #666666;
    font-size: 12px;
    line-height: 1.8;
}

.footer-gif {
    margin-top: 5px;
}

/* 关于页面文字 */
.about-text p {
    margin: 10px 0;
    line-height: 1.8;
}

/* 文章列表页 */
.article-full-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.article-full-list li {
    padding: 8px 0;
}

.article-title {
    font-size: 18px;
    color: #8b4513;
    font-weight: bold;
    text-decoration: none;
}

.article-meta {
    color: #666666;
    font-size: 12px;
    margin: 3px 0 8px 0;
}

.article-summary {
    color: #333333;
    line-height: 1.6;
}

.read-more {
    font-size: 12px;
    background-color: #e8dcc8;
    border: 1px solid #c4b8a8;
    padding: 3px 8px;
    text-decoration: none;
}

.hr-retro {
    border: none;
    border-top: 1px dotted #c4b8a8;
    margin: 5px 0;
}

/* 分页 */
.pagination {
    margin-top: 15px;
    text-align: center;
    font-size: 12px;
}

.pagination a {
    margin: 0 3px;
    padding: 2px 6px;
    border: 1px solid #c4b8a8;
    background-color: #e8dcc8;
    text-decoration: none;
}

.back-link {
    font-size: 14px;
}

/* 文章详情 */
.article-content {
    line-height: 1.8;
    font-size: 14px;
}

.article-content p {
    margin: 10px 0;
}

/* 留言板 */
.input-retro {
    background-color: #ffffff;
    border: 1px solid #c4b8a8;
    padding: 3px;
    font-family: "SimSun", "宋体", serif;
    font-size: 14px;
}

.textarea-retro {
    background-color: #ffffff;
    border: 1px solid #c4b8a8;
    padding: 5px;
    font-family: "SimSun", "宋体", serif;
    font-size: 14px;
}

.button-retro {
    background-color: #e8dcc8;
    border: 1px solid #c4b8a8;
    padding: 4px 12px;
    font-family: "SimSun", "宋体", serif;
    font-size: 14px;
    cursor: pointer;
}

.button-retro:hover {
    background-color: #f0e6d6;
}

.message-item {
    padding: 5px 0;
}

.message-author {
    color: #8b4513;
}

.message-date {
    color: #666666;
    font-size: 12px;
    margin-left: 10px;
}

.message-content {
    margin-top: 5px;
    line-height: 1.6;
    padding-left: 5px;
}

/* 相册 */
.album-grid {
    background-color: rgb(250, 243, 230);
    border-radius: 0;
    padding: 15px;
    margin-bottom: 20px;
}

.photo-item {
    background-color: rgb(240, 230, 214);
    border: 1px solid #c4b8a8;
    border-radius: 0;
}

.photo-box {
    padding: 10px;
}

.photo {
    border: 1px solid #c4b8a8;
    max-width: 300px;
    max-height: 225px;
    border-radius: 0;
}

.photo-caption {
    margin-top: 8px;
    color: #666666;
    margin-bottom: 0;
}

.album-note {
    margin-top: 20px;
    color: #666666;
}

/* 友情链接页面 */
.link-info {
    line-height: 1.8;
}

.links-table {
    line-height: 1.8;
}

.link-name {
    font-weight: bold;
}

.link-desc {
    color: #666666;
}

/* 关于我页面 */
.avatar {
    border: 2px solid #c4b8a8;
    margin-bottom: 20px;
}

.about-content {
    line-height: 1.8;
    font-size: 14px;
}

.contact-info {
    margin-top: 20px;
    background-color: rgb(240, 230, 214);
    color: #666666;
    border-radius: 0;
}

/* 后台管理 */
.admin-table {
    background-color: rgb(240, 230, 214);
    border-collapse: collapse;
}

.admin-table th {
    background-color: #e8dcc8;
    font-weight: normal;
}

.admin-table td, .admin-table th {
    border: 1px solid #c4b8a8;
}

.stat-item {
    background-color: rgb(232, 223, 208);
}

.stat-number {
    font-size: 24px;
    color: #8b4513;
    font-weight: bold;
}

.stat-label {
    color: #666666;
    font-size: 12px;
}

.admin-button {
    display: inline-block;
    background-color: #e8dcc8;
    border: 1px solid #c4b8a8;
    padding: 10px 20px;
    text-decoration: none;
    color: #0000ee;
    font-weight: bold;
}

.admin-button:hover {
    background-color: #f0e6d6;
    color: #ff0000;
}

/* 走马灯 */
marquee {
    color: #cc0000;
}

/* ==================== 后台管理系统样式 ==================== */
.admin-page {
    background-color: #1a0f2e;
    background-image: url("/images/dream-bg.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
}

.admin-wrapper {
    display: flex;
    width: 96%;
    max-width: 1296px;
    height: calc(100vh - 30px);
    max-height: calc(100vh - 30px);
    margin: 15px auto;
    background-color: rgb(232, 223, 208);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.admin-sidebar {
    width: 200px;
    background-color: #8b4513;
    color: #fff;
    padding: 15px 0;
}

.admin-sidebar h2 {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid #a0522d;
    margin: 0;
    font-family: "SimHei", "黑体", serif;
}

.admin-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.admin-sidebar li {
    padding: 0;
}

.admin-sidebar a {
    display: block;
    padding: 8px 15px;
    color: #ffe4b5;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid #a0522d;
}

.admin-sidebar a:hover {
    background-color: #a0522d;
    color: #fff;
}

.admin-sidebar a.active {
    background-color: #d2691e;
    color: #fff;
    font-weight: bold;
}

.admin-sidebar .sidebar-section {
    margin-top: 15px;
}

.admin-sidebar .sidebar-section h3 {
    color: #ffe4b5;
    font-size: 12px;
    padding: 0 15px;
    margin: 0;
    border-bottom: none;
}

.admin-main {
    flex: 1;
    padding: 20px;
    background-color: rgb(240, 230, 214);
    min-width: 0;
}

.admin-topbar {
    background-color: rgb(232, 220, 200);
    border: 1px solid #c4b8a8;
    padding: 10px 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-topbar h1 {
    color: #8b4513;
    font-size: 18px;
    margin: 0;
    font-family: "SimHei", "黑体", serif;
}

.admin-topbar .user-info {
    font-size: 12px;
    color: #666;
}

.admin-topbar .user-info a {
    margin-left: 10px;
}

.admin-content {
    background-color: rgb(250, 243, 230);
    border: 1px solid #c4b8a8;
    padding: 15px;
    margin-bottom: 15px;
}

.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.stats-grid .stat-card {
    flex: 1;
    min-width: 140px;
    background-color: rgb(250, 243, 230);
    border: 1px solid #c4b8a8;
    padding: 15px;
    text-align: center;
}

.stats-grid .stat-card .stat-number {
    font-size: 28px;
    color: #8b4513;
    font-weight: bold;
    font-family: "Arial", sans-serif;
}

.stats-grid .stat-card .stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgb(250, 243, 230);
    margin-bottom: 15px;
}

.data-table th {
    background-color: #e8dcc8;
    color: #8b4513;
    font-weight: bold;
    padding: 8px 10px;
    border: 1px solid #c4b8a8;
    text-align: left;
    font-size: 13px;
}

.data-table td {
    padding: 6px 10px;
    border: 1px solid #c4b8a8;
    font-size: 13px;
    vertical-align: top;
}

.data-table tr:hover {
    background-color: #f5ecd9;
}

.data-table .actions {
    white-space: nowrap;
}

.data-table .actions a {
    margin-right: 5px;
}

.badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    border: 1px solid #c4b8a8;
    background-color: #e8dcc8;
}

.badge.published {
    color: #006400;
    background-color: #e0ffe0;
}

.badge.draft {
    color: #666;
    background-color: #e8e8e8;
}

.badge.approved {
    color: #006400;
    background-color: #e0ffe0;
}

.badge.pending {
    color: #b22222;
    background-color: #ffe0e0;
}

.badge.enabled {
    color: #006400;
    background-color: #e0ffe0;
}

.badge.disabled {
    color: #666;
    background-color: #e8e8e8;
}

.admin-form {
    max-width: 600px;
}

.admin-form .form-row {
    margin-bottom: 12px;
}

.admin-form label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.admin-form .form-actions {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dotted #c4b8a8;
}

.admin-pagination {
    text-align: center;
    padding: 10px;
    font-size: 13px;
}

.admin-pagination a, .admin-pagination span {
    display: inline-block;
    padding: 3px 8px;
    margin: 0 2px;
    border: 1px solid #c4b8a8;
    background-color: #e8dcc8;
    text-decoration: none;
}

.admin-pagination .current {
    background-color: #8b4513;
    color: #fff;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 10px 0;
}

.quick-actions a {
    display: block;
    text-align: center;
    padding: 12px 5px;
    background-color: #e8dcc8;
    border: 1px solid #c4b8a8;
    color: #0000ee;
    text-decoration: none;
    font-size: 13px;
}

.quick-actions a:hover {
    background-color: #d4b896;
}

.recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-list li {
    padding: 5px 0;
    border-bottom: 1px dotted #c4b8a8;
    font-size: 13px;
}

.recent-list li:last-child {
    border-bottom: none;
}

.recent-list .meta {
    color: #999;
    font-size: 11px;
    float: right;
}

.admin-footer {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 10px;
    border-top: 1px dotted #c4b8a8;
}

.inline-form {
    display: inline;
}

.inline-form button {
    background: none;
    border: none;
    color: #0000ee;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

.inline-form button:hover {
    color: #ff0000;
}

/* ==================== 照片网格（自动换行） ==================== */
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 5px 0;
}

.photo-grid-item {
    flex: 0 0 auto;
    width: 160px;
    text-align: center;
}

.photo-grid-img {
    width: 160px;
    height: 120px;
    object-fit: cover;
    border: 2px solid #c4b8a8;
    padding: 2px;
    background: #fff;
}

.photo-grid-title {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    word-break: break-all;
}

/* ==================== 响应式适配 ==================== */
@media screen and (max-width: 800px) {
    .page-container {
        width: 100%;
    }

    /* 侧边栏在小屏幕隐藏或折叠 */
    .sidebar-box {
        display: none;
    }

    /* 导航菜单换行 */
    .menu td {
        font-size: 12px;
        padding: 4px 3px;
    }

    /* 照片网格缩小 */
    .photo-grid-item {
        width: 120px;
    }

    .photo-grid-img {
        width: 120px;
        height: 90px;
    }
}

@media screen and (max-width: 480px) {
    body {
        font-size: 13px;
    }

    .title {
        font-size: 20px;
    }

    /* 导航菜单竖排 */
    .menu tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .menu td {
        font-size: 11px;
        padding: 3px 2px;
    }

    /* 照片网格两列 */
    .photo-grid {
        justify-content: center;
    }

    .photo-grid-item {
        width: 45%;
        max-width: 160px;
    }

    .photo-grid-img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
    }

    /* 管理后台表格可横向滚动 */
    .admin-main {
        overflow-x: auto;
    }
}

/* ==================== Markdown 渲染样式 ==================== */
.markdown-content {
    font-family: "SimSun", "宋体", serif;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    word-wrap: break-word;
}

.markdown-content h1 {
    font-size: 24px;
    color: #8b4513;
    margin: 20px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #c4b8a8;
    font-weight: bold;
}

.markdown-content h2 {
    font-size: 20px;
    color: #8b4513;
    margin: 18px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #c4b8a8;
    font-weight: bold;
}

.markdown-content h3 {
    font-size: 18px;
    color: #8b4513;
    margin: 15px 0 10px;
    padding-bottom: 4px;
    border-bottom: 1px dotted #c4b8a8;
    font-weight: bold;
}

.markdown-content h4, .markdown-content h5, .markdown-content h6 {
    color: #6b3410;
    margin: 12px 0 8px;
    font-weight: bold;
}

.markdown-content p {
    margin: 10px 0;
    text-indent: 2em;
}

.markdown-content p:first-child {
    text-indent: 0;
}

.markdown-content strong {
    color: #8b4513;
    font-weight: bold;
}

.markdown-content em {
    font-style: italic;
}

.markdown-content del {
    text-decoration: line-through;
    color: #999;
}

.markdown-content a {
    color: #0000ee;
    text-decoration: underline;
}

.markdown-content a:hover {
    color: #ff0000;
}

.markdown-content ul, .markdown-content ol {
    margin: 10px 0;
    padding-left: 2em;
}

.markdown-content ul {
    list-style-type: disc;
}

.markdown-content ol {
    list-style-type: decimal;
}

.markdown-content li {
    margin: 5px 0;
    line-height: 1.6;
}

.markdown-content blockquote {
    border-left: 4px solid #c4b8a8;
    background-color: #f0e6d6;
    margin: 15px 0;
    padding: 10px 15px;
    color: #555;
    font-style: italic;
}

.markdown-content blockquote p {
    margin: 5px 0;
    text-indent: 0;
}

.markdown-content code {
    background-color: #e8dfd0;
    border: 1px solid #d4c4b0;
    padding: 2px 6px;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    font-size: 13px;
    color: #8b0000;
    border-radius: 0;
}

.markdown-content pre {
    background-color: #2d2d2d;
    border: 1px solid #1a1a1a;
    margin: 15px 0;
    padding: 15px;
    overflow-x: auto;
    border-radius: 0;
}

.markdown-content pre code {
    background-color: transparent;
    border: none;
    padding: 0;
    color: #f8f8f2;
    font-size: 13px;
    line-height: 1.6;
}

.markdown-content hr {
    border: none;
    border-top: 2px dotted #c4b8a8;
    margin: 20px 0;
}

.markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0;
    font-size: 13px;
}

.markdown-content table th {
    background-color: #e8dcc8;
    color: #8b4513;
    font-weight: bold;
    border: 1px solid #c4b8a8;
    padding: 8px 12px;
    text-align: left;
}

.markdown-content table td {
    border: 1px solid #c4b8a8;
    padding: 8px 12px;
    background-color: #faf3e6;
}

.markdown-content table tr:hover td {
    background-color: #f0e6d6;
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid #c4b8a8;
    padding: 3px;
    background: #fff;
    border-radius: 0;
    margin: 10px 0;
}

.markdown-content img:hover {
    border-color: #8b4513;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.2);
}

.markdown-content sup {
    font-size: 0.75em;
    vertical-align: super;
}

.markdown-content sub {
    font-size: 0.75em;
    vertical-align: sub;
}

.markdown-content .task-list-item {
    list-style: none;
    margin-left: -2em;
}

.markdown-content .task-list-item input[type="checkbox"] {
    margin-right: 8px;
}

/* 照片描述 Markdown 样式 (更紧凑) */
.photo-desc-content {
    font-family: "SimSun", "宋体", serif;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
}

.photo-desc-content p {
    margin: 5px 0;
    text-indent: 0;
}

.photo-desc-content h1, .photo-desc-content h2, .photo-desc-content h3 {
    font-size: 16px;
    margin: 8px 0 5px;
    color: #8b4513;
}

.photo-desc-content blockquote {
    border-left: 3px solid #c4b8a8;
    background-color: #f0e6d6;
    margin: 8px 0;
    padding: 8px 12px;
}

.photo-desc-content code {
    background-color: #e8dfd0;
    padding: 1px 4px;
    font-size: 12px;
}

.photo-desc-content img {
    max-width: 100%;
    border: 1px solid #c4b8a8;
    padding: 2px;
    margin: 5px 0;
}