* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    color: #586e75;
}

/* Style the header */
header {
    background-color: #8a9c7a;  /* #96a48b 莫兰迪-绿色*/
    padding: 10px;
    text-align: center;
    font-size: 20px;
    color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
    float: left;
    width: 20%;
    height: 100%;
    min-height: 100%;
    background-color: #f2ead6;  /* #b5c4b1 莫兰迪-绿色*/
    padding: 20px;
}

nav a {
    font-size: 15px; 
    color: #606060;
}

nav li {
    margin-top: 10px;
}

/* Style the list inside the menu */
nav dl {
    font-size: 15px; 
    color: #606060;
    display: none;
}

nav dt {
    margin-top: 10px;
}

nav dd {
    padding: 3px;
    margin-left: 1em;
}

article {
    float: left;
    padding: 20px;
    width: 80%;
    background-color:#fdf6e3;  /* #e0e5df; 莫兰迪-绿色 */
    min-height: 100%;
}

/* Clear floats after the columns */
section::after {
    content: "";
    display: table;
    clear: both;
}

img {
    width: 100%;
    object-fit: fill;
    border-radius: 4px;
    padding: 10px 10px 5px 10px;
}

/* Style the footer */
footer {
    background-color: #7b8b6f;  /*莫兰迪-绿色*/
    padding: 10px;
    text-align: center;
    color: white;
    font-size: 14px;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
    nav, article {
        width: 100%;
        height: 100%;
    }
    /* 莫兰迪粉色系 - 移动端配色 */
    #menu {
        background-color: #F2EAE3;
    }
    #header {
        background-color: #C89E9C;
    }
    #article {
        background-color: #fff0f5;
    }
    #footer {
        background-color: #a2807e;
    }
    .comment-drawer {
        width: 100%;
        max-width: 100vw;
        right: -110%;
    }
    .comment-drawer.open {
        right: 0;
    }
}

.date {
    font-size: 15px; 
    color: #606060;
    text-align: right;
    transition: color 0.2s ease;
}

.date.read {
    color: #999;
}

.date:hover {
    color: #8B7355;
    transition: none;
}

hr {
    border: none;
    border-top: 3px solid #f7dc6f; 
}

div#blog {
    display: block;
    border: 1px solid #7b8b6f;  /*  莫兰迪-绿色*/
    border-radius: 4px;

    /* 
    background-image: url('pic/sunflower.jpeg');
    background-repeat: repeat;
    */
    
    width: 100%;
    height: 100%;
    
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}


h1, h2 {
    color: #3a5962;
}


mark {
    background-color: #d68f48;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    /*border-radius: 12px;*/
    overflow: hidden; 
    /* 不要给 table 加 border */
}

thead {
    background-color: #f9e79f; /* 备选色: #f0d680, #f2f2f2 */
}

td, th {
    border: 1px solid #e9ca6b;
    text-align: left;
    padding: 8px;
}

a {
    color: #b46b24;
    text-decoration: none;  /* 去掉下划线 */
}

a:hover {
    text-decoration: underline;
}

/* ===== 点赞 & Giscus 评论区 ===== */
.float-actions {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 1000;
}

.float-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #8a9c7a;
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.2s, background 0.2s;
}

.float-btn:hover {
    transform: scale(1.08);
    background: #7b8b6f;
}

@media (max-width: 600px) {
    /* 温暖豆沙色 */
    .float-btn {
        background: #C89E9C;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .float-btn:hover {
        background: #a2807e;
    }
}

.float-btn .like-count {
    font-size: 12px;
    margin-left: 2px;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1001;
    display: none;
}

.comment-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 90vw;
    height: 100%;
    background: #fffbf0;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 1002;
    transition: right 0.3s ease;
    padding: 24px;
    overflow-y: auto;
}

.comment-drawer.open {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f7dc6f;
}

.drawer-header h3 {
    margin: 0;
    color: #3a5962;
}

.close-drawer {
    background: none;
    border: none;
    font-size: 24px;
    color: #606060;
    cursor: pointer;
}

.like-section {
    text-align: center;
    margin-bottom: 24px;
}

.like-btn {
    background: #fff;
    border: 2px solid #e9ca6b;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.2s;
}

.like-btn:hover, .like-btn.liked {
    background: #ffe066;
    border-color: #f7dc6f;
}

.like-btn.liked {
    animation: like-beat 0.4s ease;
}

@keyframes like-beat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.like-text {
    margin-top: 8px;
    color: #606060;
    font-size: 14px;
}

.giscus-notice {
    background: #f9e79f;
    border-left: 4px solid #e9ca6b;
    padding: 12px;
    font-size: 13px;
    color: #606060;
    margin-bottom: 16px;
    border-radius: 4px;
}

/* ===== 错误提示样式 ===== */
.error-container {
    text-align: center;
    padding: 60px 20px;
    color: #606060;
}

.error-message {
    font-size: 18px;
    margin-bottom: 8px;
}

.error-detail {
    font-size: 14px;
    color: #999;
}


/* ============================================================
 * Solarized Light - Color Palette (unused / 备用配色方案)
 * Reference: https://ethanschoonover.com/solarized/
 *
 * 以下样式已被注释，仅作参考保留。
 * 如需启用，请取消注释并替换上方对应的规则。
 * ============================================================
 *
 * :root {
 *     --base03: #002b36;
 *     --base02: #073642;
 *     --base01: #586e75;
 *     --base00: #657b83;
 *     --base0:  #839496;
 *     --base1:  #93a1a1;
 *     --base2:  #eee8d5;
 *     --base3:  #fdf6e3;
 *
 *     --yellow:  #b58900;
 *     --orange:  #cb4b16;
 *     --red:     #dc322f;
 *     --magenta: #d33682;
 *     --violet:  #6c71c4;
 *     --blue:    #268bd2;
 *     --cyan:    #2aa198;
 *     --green:   #859900;
 * }
 *
 * body {
 *     background-color: var(--base3);
 *     color: var(--base00);
 *     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 *     line-height: 1.6;
 * }
 *
 * h1, h2, h3, h4, h5, h6 {
 *     color: var(--base01);
 *     border-bottom: 1px solid var(--base2);
 *     padding-bottom: 0.3em;
 * }
 *
 * a { color: var(--blue); text-decoration: none; }
 * a:visited { color: var(--violet); }
 * a:hover { color: var(--orange); text-decoration: underline; }
 *
 * code {
 *     background-color: var(--base2);
 *     color: var(--base01);
 *     padding: 0.2em 0.4em;
 *     border-radius: 3px;
 *     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
 * }
 *
 * pre {
 *     background-color: var(--base2);
 *     color: var(--base01);
 *     padding: 1em;
 *     border-radius: 6px;
 *     overflow-x: auto;
 * }
 * pre code { background-color: transparent; padding: 0; }
 *
 * blockquote {
 *     border-left: 4px solid var(--base1);
 *     margin: 0;
 *     padding-left: 1em;
 *     color: var(--base01);
 * }
 *
 * table { border-collapse: collapse; width: 100%; }
 * th, td { border: 1px solid var(--base2); padding: 0.5em; }
 * th { background-color: var(--base2); color: var(--base01); }
 *
 * ::selection { background-color: var(--base2); color: var(--base03); }
 *
 * .syntax-keyword  { color: var(--green); }
 * .syntax-string   { color: var(--cyan); }
 * .syntax-comment  { color: var(--base1); font-style: italic; }
 * .syntax-function { color: var(--blue); }
 * .syntax-number   { color: var(--magenta); }
 * .syntax-variable { color: var(--yellow); }
 * .syntax-operator { color: var(--orange); }
 * .syntax-error    { color: var(--red); }
 */