:root {
    color-scheme: light dark;
    --text-color: #333;
    --bg-color: #f9f9f9;
    --border-color: #ccc;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --button-text: #fff;
    --button-bg: rgba(211, 211, 211, 0.5);
    --button-hover-bg: #333333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #e0e0e0;
        --bg-color: #1a1a1a;
        --border-color: #404040;
        --timestamp-color: #999;
        --shadow-color: rgba(0, 0, 0, 0.3);
        --button-bg: #404040;
        --button-hover-bg: #505050;
        --link-color: #ffffff;
        /* 暗色模式链接颜色 */
    }

    @media (prefers-color-scheme: dark) {
        .comment-title {
            color: #ffffff !important;
            /* 强制覆盖 */
        }
    }

    body {
        background-color: #181818;
        color: var(--text-color);
    }

    input,
    textarea {
        background-color: #1a1a1a;
        /* 调整背景色以减少刺眼感 */
        color: var(--text-color);
        border-color: var(--border-color);
    }
}

.gen-container {
    margin: 0 auto;
    max-width: 1080px;
    border: 1px solid var(--border-color);    
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: var(--bg-color);
    box-shadow: 0 4px 10px var(--shadow-color);
    color: var(--text-color);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
    word-break: break-all
}

body .subUrl {
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--link-color);     /* 使用链接颜色 */
    text-decoration: none;
    display: block;
    transition: color 0.3s;       /* 颜色过渡效果 */
}

.gen-btn {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 0;    
    border-radius: 20px;
    width: 120px;
    height: 50px;
    font-size: 20px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    box-shadow: 0 4px 10px var(--shadow-color);
}