/* ========== DJ3C 统一风格CSS - WebStack-Hugo视觉风格 ========== */
/* 这个文件覆盖wanfeng主题的视觉样式，使其与WebStack-Hugo主页风格统一 */
/* 不影响HTML结构和PHP功能逻辑 */

/* CSS变量 - 白天模式 */
:root {
    --bg-color: #f5f5f9;
    --card-bg: #ffffff;
    --card-border: #e8e8ed;
    --text-color: #333333;
    --text-muted: #888888;
    --header-bg: #ffffff;
    --header-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --footer-bg: #ffffff;
    --accent: #82c749;
    --accent-hover: #6bcf82;
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --input-focus: #82c749;
    --nav-text: #555555;
    --nav-hover: #82c749;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.08);
    --radius: 8px;
    --radius-sm: 6px;
    --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* 夜间模式 */
body.io-black-mode {
    --bg-color: #1a1a2e;
    --card-bg: #252540;
    --card-border: #333355;
    --text-color: #cccccc;
    --text-muted: #8888aa;
    --header-bg: #1e1e35;
    --header-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --footer-bg: #1e1e35;
    --input-bg: #2a2a45;
    --input-border: #444466;
    --input-focus: #6bcf82;
    --nav-text: #aaaaaa;
    --nav-hover: #6bcf82;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.3);
}

/* 全局基础样式 */
body {
    font-family: var(--font-family);
    background-color: var(--bg-color) !important;
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

/* 覆盖wanfeng的全局重置 */
* {
    font-family: var(--font-family);
}

/* 顶部导航栏 */
.header {
    background: var(--header-bg) !important;
    box-shadow: var(--header-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.header .top {
    background: transparent !important;
}
.header .top-list nav ul li a {
    color: var(--nav-text) !important;
    font-size: 14px !important;
}
.header .top-list nav ul li a:hover {
    color: var(--nav-hover) !important;
}
.header .logo img {
    max-height: 36px;
}

/* 覆盖wanfeng的3D阴影效果 - 改为扁平卡片 */
.header,
.top,
.shoubox,
.shouluform,
.container,
.wzybox,
.zhandianbox,
.article-list,
.article-content,
.wzynr,
.zdjsbox,
.xgzdbox,
.foot,
.footer,
.card,
.box,
.shadow-box {
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius) !important;
}

/* 卡片样式 */
.shoubox,
.shouluform,
.wzybox,
.zhandianbox,
.article-list,
.article-content,
.wzynr,
.zdjsbox,
.xgzdbox,
.xgzd,
.tabcontent ul li a {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}

/* 文章内容卡片 */
.article-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 20px !important;
}

/* 表单样式 */
.shouluform input[type="text"],
.shouluform input[type="url"],
.shouluform input[type="email"],
.shouluform input[type="password"],
.shouluform select,
.shouluform textarea,
.container input[type="text"],
.container input[type="url"],
.container input[type="email"],
.container input[type="password"],
.container select,
.container textarea,
#form input[type="text"],
#form input[type="url"],
#form input[type="email"],
#form input[type="password"],
#form select,
#form textarea {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-color) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.shouluform input:focus,
.shouluform select:focus,
.shouluform textarea:focus,
.container input:focus,
.container select:focus,
.container textarea:focus,
#form input:focus,
#form select:focus,
#form textarea:focus {
    border-color: var(--input-focus) !important;
    box-shadow: 0 0 0 3px rgba(130,199,73,0.1) !important;
    outline: none !important;
}

/* 按钮样式 */
.shouluform input[type="submit"],
.shouluform button,
.container .submit-btn,
.container button[type="submit"],
#form input[type="submit"],
#form button[type="submit"],
.go_website a,
#submit-comment,
.like-btn {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 8px 24px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.shouluform input[type="submit"]:hover,
.shouluform button:hover,
.container .submit-btn:hover,
.container button[type="submit"]:hover,
#form input[type="submit"]:hover,
#form button[type="submit"]:hover,
.go_website a:hover,
#submit-comment:hover,
.like-btn:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(130,199,73,0.3) !important;
}

/* 标签样式 */
label {
    color: var(--text-color) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color) !important;
}
h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
}
h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* 链接样式 */
a {
    color: var(--accent) !important;
    transition: color 0.2s;
}
a:hover {
    color: var(--accent-hover) !important;
}

/* 文章列表项 */
.article-list {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 15px !important;
}
.article-list ul li {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
    box-shadow: var(--shadow-sm) !important;
}
.article-list ul li:last-child {
    margin-bottom: 0 !important;
}
.article-list ul li:hover {
    background: var(--bg-color) !important;
    border-color: var(--accent) !important;
}
.article-list ul li a {
    color: var(--text-color) !important;
    font-size: 14px !important;
}
.article-list ul li a:hover {
    color: var(--accent) !important;
}

/* 过渡页样式 */
.zhandianbox .zhandianbt {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}
.zdbox {
    background: transparent !important;
}
.zhandianlogo img {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
}
.zhandianyc p {
    color: var(--text-color) !important;
    font-size: 14px !important;
}
.go_website a {
    display: inline-block;
    padding: 10px 32px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* 相关站点 */
.xgzdbox .tabcontent ul li a {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    transition: all 0.2s;
}
.xgzdbox .tabcontent ul li a:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

/* 底部 */
.foot, .footer {
    background: var(--footer-bg) !important;
    box-shadow: none !important;
    border-top: 1px solid var(--card-border) !important;
}
.foot .banquan, .foot .banquan a, .footer a {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

/* 底部波浪 - 隐藏(WebStack-Hugo风格没有波浪) */
.wiiuii_layout {
    display: none !important;
}

/* 封面图 */
.wzfm {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
}
.wzfm img {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* 文章内容区 */
.wzynrzw {
    color: var(--text-color) !important;
    line-height: 1.8 !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    padding: 20px !important;
    box-shadow: var(--shadow-sm) !important;
}
.wzynrzw img {
    border-radius: var(--radius) !important;
    max-width: 100%;
}

/* 评论区 */
#comment-section {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    padding: 16px !important;
}
#comment-content {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-color) !important;
    border-radius: var(--radius-sm) !important;
    width: 100%;
    padding: 10px !important;
    font-size: 14px !important;
}
.comment-item {
    border-bottom: 1px solid var(--card-border) !important;
    padding: 10px 0 !important;
}
.comment-username {
    color: var(--text-color) !important;
    font-weight: 500 !important;
}
.comment-time {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}
.comment-content {
    color: var(--text-color) !important;
}

/* 右侧文章TOP区 */
.wzyright {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
}
.grbjtp {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 15px !important;
    overflow: hidden !important;
}
.grbjtp img {
    border-radius: var(--radius) !important;
}
.grzy {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    padding: 15px !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}
.grzynr {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    padding: 15px !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 15px !important;
}
.grzynr a {
    color: var(--text-color) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.grzylist {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    padding: 15px !important;
    box-shadow: var(--shadow-sm) !important;
}
.grzylist ul li {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    box-shadow: var(--shadow-sm) !important;
}
.grzylist ul li:last-child {
    margin-bottom: 0 !important;
}
.grzylist ul li a {
    color: var(--text-color) !important;
}
.grzylist ul li:hover a {
    color: var(--accent) !important;
}

/* 侧边栏 */
.sidebar, .cblzc {
    background: var(--card-bg) !important;
}
.cblfl ul li a, .cblfldb a {
    color: var(--text-color) !important;
}
.cblfl ul li a:hover, .cblfldb a:hover {
    color: var(--accent) !important;
}

/* 说明区 */
.shuoming, .tjsm {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    color: var(--text-color) !important;
    padding: 16px !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

/* 文章结束提示 */
.wzjsy {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    color: var(--text-muted) !important;
}

/* 文章列表卡片 */
.wzlm ul li a {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s;
}
.wzlm ul li a:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}
.wzk {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s;
}
.wzk:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

/* 日夜模式切换按钮（悬浮） */
#mode-switch {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 50% !important;
    box-shadow: var(--shadow-sm) !important;
}

/* 置顶按钮 */
#scroll-to-top {
    box-shadow: var(--shadow-sm) !important;
    border-radius: 50% !important;
}

/* 加载动画背景 */
#loader, .container#loader {
    background: var(--bg-color) !important;
}

/* 移动端适配 */
@media (max-width: 767.98px) {
    .shoubox, .shouluform, .container, .wzybox, .zhandianbox {
        margin: 8px !important;
        padding: 12px !important;
    }
}

/* 覆盖wanfeng的淡入动画等 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}