/* 页面整体样式 */
body {
    margin: 0;
    background-color: #f5f2ed;
    color: #333333;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.7;
}

a {
    color: #333333;
    text-decoration: none;
}

/* 顶部导航 */
.header {
    width: 100%;
    padding: 15px 8%;
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
}

.logo {
    color: #8c1c13;
    font-size: 22px;
}

.nav a {
    margin-left: 25px;
    padding-bottom: 5px;
}

.nav a:hover,
.nav .active {
    color: #8c1c13;
    border-bottom: 2px solid #8c1c13;
}

/* 页面头部介绍 */
.banner {
    padding: 70px 20px;
    text-align: center;
}

.banner h1 {
    margin: 0;
    font-size: 46px;
}

.banner p {
    color: #777777;
    font-size: 18px;
}

.red {
    color: #8c1c13;
}

.button {
    display: inline-block;
    margin: 10px 5px;
    padding: 10px 22px;
    color: #ffffff;
    background-color: #8c1c13;
    border-radius: 4px;
}

.button:hover {
    background-color: #64130d;
}

/* 主要内容 */
.content {
    width: 80%;
    margin: auto;
    padding-bottom: 55px;
}

.section {
    margin-bottom: 45px;
}

.title {
    margin: 15px 0 25px;
    text-align: center;
}

.intro-box {
    padding: 25px;
    background-color: #ffffff;
    border-left: 5px solid #8c1c13;
}

.photo-box {
    width: 140px;
    height: 140px;
    color: #ffffff;
    background-color: #8c1c13;
    font-size: 45px;
    text-align: center;
    line-height: 140px;
    border-radius: 70px;
}

/* 卡片 */
.card {
    padding: 22px;
    background-color: #ffffff;
    border-top: 4px solid #8c1c13;
    box-shadow: 0 3px 10px #dddddd;
}

.card:hover {
    background-color: #fffaf7;
}

.card h3 {
    color: #8c1c13;
}

/* 数据表格 */
.data {
    width: 100%;
    background-color: #ffffff;
    border-collapse: collapse;
}

.data th,
.data td {
    padding: 12px;
    border: 1px solid #dddddd;
    text-align: left;
}

.data th {
    color: #ffffff;
    background-color: #8c1c13;
}

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

/* 留言表单 */
.form-box {
    width: 60%;
    margin: auto;
    padding: 30px;
    background-color: #ffffff;
    box-shadow: 0 3px 12px #dddddd;
}

input[type="text"],
input[type="email"],
select,
textarea {
    width: 95%;
    padding: 9px;
    border: 1px solid #bbbbbb;
}

textarea {
    resize: vertical;
}

.submit,
.reset {
    padding: 9px 22px;
    border: 0;
    cursor: pointer;
}

.submit {
    color: #ffffff;
    background-color: #8c1c13;
}

.reset {
    background-color: #dddddd;
}

/* 页脚 */
.footer {
    padding: 25px;
    color: #bbbbbb;
    background-color: #222222;
    text-align: center;
}

.footer a {
    color: #e5b6b1;
}

/* 窄屏显示 */
@media screen and (max-width: 700px) {
    .content {
        width: 92%;
    }

    .banner h1 {
        font-size: 34px;
    }

    .form-box {
        width: 85%;
    }
}

/* BOM 升级：操作控件与访客数据 */
* { box-sizing: border-box; }
.theme-toggle, .page-actions button, .text-button, .delete-message {
    font: inherit;
    cursor: pointer;
}
.theme-toggle {
    margin-left: 20px;
    padding: 6px 10px;
    color: #8c1c13;
    background: #fff;
    border: 1px solid #8c1c13;
    border-radius: 4px;
}
.visitor-info { max-width: 500px; margin: 18px auto 0; padding-top: 10px; border-top: 1px solid #666; }
.visitor-info h2 { margin: 4px 0; color: #fff; font-size: 17px; }
.visitor-info p { margin: 2px 0; }
.visit-statistics { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin-top: 12px; }
.page-actions { width: 80%; margin: -35px auto 25px; text-align: right; }
.page-actions button, .page-actions a { padding: 7px 12px; color: #8c1c13; background: #fff; border: 1px solid #8c1c13; border-radius: 4px; }
.page-actions a { display: inline-block; margin-left: 8px; }
.text-button { color: #8c1c13; background: none; border: 0; text-decoration: underline; }
.message-history { max-width: 760px; margin: 40px auto 0; }
.message-card { margin-bottom: 16px; padding: 18px 22px; background: #fff; border-top: 3px solid #8c1c13; box-shadow: 0 3px 10px #ddd; }
.message-card h3 { margin: 0 0 4px; color: #8c1c13; }
.message-meta { margin: 0 0 10px; color: #777; font-size: 14px; }
.message-content { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.delete-message { padding: 5px 12px; color: #8c1c13; background: #fff; border: 1px solid #8c1c13; border-radius: 4px; }
.empty-messages { padding: 20px; text-align: center; background: #fff; color: #777; }

/* 超过一屏后淡入的回到顶部按钮。 */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #8c1c13;
    box-shadow: 0 3px 12px #0004;
    font: 26px/1 Arial, sans-serif;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:focus-visible { outline: 3px solid #e9b9b3; outline-offset: 3px; }
body.dark-mode .back-to-top { background: #9e4238; }
@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: none; }
}

/* 夜间模式统一覆盖原网站各页面的主要背景与文字。 */
body.dark-mode { background: #171c24; color: #e8edf4; }
body.dark-mode .header, body.dark-mode .intro-box, body.dark-mode .card,
body.dark-mode .data, body.dark-mode .form-box, body.dark-mode .message-card,
body.dark-mode .empty-messages, body.dark-mode .reg-form-wrap,
body.dark-mode .reg-notice { background: #252d39; color: #e8edf4; border-color: #46556a; box-shadow: none; }
body.dark-mode .need-register { background: #41392b; color: #f7e6c7; }
body.dark-mode .user-bar { background: #233d36; color: #d6f3e9; }
body.dark-mode .footer { background: #0e1218; }
body.dark-mode .data th { background: #533a42; }
body.dark-mode .data tr:hover, body.dark-mode .card:hover { background: #303a48; }
body.dark-mode a, body.dark-mode .logo, body.dark-mode .red,
body.dark-mode .nav .active, body.dark-mode .card h3,
body.dark-mode .message-card h3, body.dark-mode .reg-label {
    color: #f1a59b;
}
body.dark-mode .banner p, body.dark-mode .message-meta, body.dark-mode .empty-messages { color: #bdc6d3; }
body.dark-mode .button, body.dark-mode .submit { color: #fff; background: #9e4238; }
body.dark-mode .theme-toggle, body.dark-mode .page-actions button,
body.dark-mode .page-actions a, body.dark-mode .delete-message {
    color: #f1a59b; background: #252d39; border-color: #f1a59b;
}
body.dark-mode .text-button { color: #f1a59b; }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
    color: #e8edf4; background: #1c232d; border-color: #5a6674;
}
body.dark-mode .reg-notice p, body.dark-mode .reg-notice h2 { color: #f1a59b; }
body.dark-mode #thanksArea h2 { color: #f1a59b !important; }
body.dark-mode .footer a { color: #f1a59b; }

@media screen and (max-width: 700px) {
    .header { padding: 12px 3%; }
    .logo { font-size: 16px; }
    .nav a { margin-left: 8px; font-size: 14px; }
    .theme-toggle { margin: 6px 0 0 8px; font-size: 13px; }
    .page-actions { width: 92%; margin-top: -25px; }
    .form-box { width: 100%; }
}