:root {
    --primary: #175cd3;
    --primary-deep: #134ba9;
    --primary-border: rgba(23, 92, 211, 0.22);
    --bg: #f5f6f8;
    --panel: #ffffff;
    --text: #202733;
    --muted: #707a89;
    --line: #dfe3e8;
    --success: #267a59;
    --warning: #9f611b;
    --reply-bg: #f5f7f9;
    --reply-text: #424b58;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "PingFang SC","Microsoft YaHei",sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 28px auto 40px; }
.card {
    position: relative;
    padding: 24px 26px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
.card + .card { margin-top: 18px; }
.title { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 700; }
.page-context { margin-bottom: 8px; color: var(--primary); font-size: 13px; line-height: 1.6; font-weight: 700; }
.subline { margin-top: 10px; color: #667085; font-size: 14px; line-height: 1.85; }
.meta { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meta-text { color: #98a2b3; font-size: 12px; line-height: 1.7; display: inline-flex; align-items: center; min-height: 28px; }
.badge { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #f5f7fa; color: #667085; font-size: 12px; line-height: 1; font-weight: 700; white-space: nowrap; }
.badge.success { background: rgba(16,185,129,0.10); color: var(--success); }
.badge.warning { background: rgba(245,158,11,0.12); color: var(--warning); }
.content {
    margin-top: 18px;
    padding: 18px 18px 16px;
    border-radius: 16px;
    background: var(--reply-bg);
    border: 1px solid #eef2f6;
    color: var(--reply-text);
    font-size: 14px;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}
.section-title { margin: 0; color: #1f2937; font-size: 18px; line-height: 1.5; font-weight: 700; }
.reply-time { margin-top: 10px; color: #98a2b3; font-size: 12px; line-height: 1.7; }
.actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.button:hover { background: var(--primary-deep); }
.button.secondary { background: #fff; color: var(--primary); border-color: var(--primary-border); }
.button.secondary:hover { background: #fff; color: var(--primary-deep); border-color: var(--primary-border); }
@media (max-width: 640px) {
    .shell { width: calc(100% - 20px); margin-top: 18px; }
    .card { padding: 20px 18px; }
    .title { font-size: 24px; }
}

.guestbook-footer {
    padding: 26px 0 4px;
    color: #8a94a3;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}
.guestbook-footer__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.guestbook-footer a { color: inherit; text-decoration: none; }
.guestbook-footer a:hover { color: var(--primary); }
.guestbook-footer__divider { width: 1px; height: 12px; background: #d8dde5; }

.theme-default,
.theme-china-red,
.theme-vibrant-orange,
.theme-education-green {
    --bg: #f5f6f8;
    --panel: #fff;
    --text: #25282d;
    --muted: #70798a;
    --line: #dfe3e8;
    --reply-bg: #f6f7f9;
    --reply-text: #434b59;
}
.theme-default {
    --primary: #175cd3;
    --primary-deep: #134ba9;
    --primary-border: rgba(23, 92, 211, .22);
    --success: #267a59;
    --warning: #9f611b;
}
.theme-china-red {
    --primary: #a61b29;
    --primary-deep: #80131f;
    --primary-border: rgba(166, 27, 41, .22);
    --success: #267a59;
    --warning: #a05c16;
}
.theme-vibrant-orange {
    --primary: #e87524;
    --primary-deep: #c85d13;
    --primary-border: rgba(232, 117, 36, .24);
    --success: #2e8062;
    --warning: #a75b16;
}
.theme-education-green {
    --primary: #2f8056;
    --primary-deep: #236542;
    --primary-border: rgba(47, 128, 86, .22);
    --success: #2f8056;
    --warning: #9a681c;
}
.theme-default .card,
.theme-china-red .card,
.theme-vibrant-orange .card,
.theme-education-green .card {
    padding: 28px 30px;
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: none;
}
.theme-default .card:first-of-type,
.theme-china-red .card:first-of-type,
.theme-vibrant-orange .card:first-of-type,
.theme-education-green .card:first-of-type {
    border-top: 1px solid var(--line);
}
.theme-default .card::before,
.theme-china-red .card::before,
.theme-vibrant-orange .card::before,
.theme-education-green .card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 0;
    background: var(--primary);
    content: "";
}
.theme-default .card::before {
    width: 7px;
    border-radius: 5px 0 0 5px;
    background: repeating-linear-gradient(
        135deg,
        #175cd3 0 9px,
        #ffffff 9px 14px,
        #6f8299 14px 23px,
        #ffffff 23px 28px
    );
}
.theme-china-red .card::before {
    width: 7px;
    border-radius: 5px 0 0 5px;
    background: repeating-linear-gradient(
        135deg,
        #a61b29 0 9px,
        #ffffff 9px 14px,
        #456b8f 14px 23px,
        #ffffff 23px 28px
    );
}
.theme-education-green .card::before {
    width: 7px;
    border-radius: 5px 0 0 5px;
    background: repeating-linear-gradient(
        135deg,
        #2f8056 0 9px,
        #ffffff 9px 14px,
        #6f8d80 14px 23px,
        #ffffff 23px 28px
    );
}
.theme-vibrant-orange .card::before {
    width: 7px;
    border-radius: 5px 0 0 5px;
    background: repeating-linear-gradient(
        135deg,
        #e87524 0 9px,
        #ffffff 9px 14px,
        #8a786b 14px 23px,
        #ffffff 23px 28px
    );
}
.theme-default .content,
.theme-china-red .content,
.theme-vibrant-orange .content,
.theme-education-green .content {
    border: 0;
    border-left: 3px solid var(--primary-border);
    border-radius: 0;
    background: var(--reply-bg);
}
.theme-default .button,
.theme-china-red .button,
.theme-vibrant-orange .button,
.theme-education-green .button,
.theme-default .badge,
.theme-china-red .badge,
.theme-vibrant-orange .badge,
.theme-education-green .badge {
    border-radius: 6px;
    box-shadow: none;
    letter-spacing: 0;
}

@media (max-width: 640px) {
    .theme-default .card,
    .theme-china-red .card,
    .theme-vibrant-orange .card,
    .theme-education-green .card {
        padding: 22px 20px;
    }
}