*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; color:#333; line-height:1.7; font-size:18px; min-height:100vh; }
a { text-decoration:none; color:#333; transition:color 0.2s; }

/* 七彩背景（与后台系统一致） */
.body-bg { position:fixed; z-index:0; width:100%; height:100%; top:0; background:#7714f8; background:-webkit-linear-gradient(to left, red, orange, yellow, #35f305, #0ed5f0, blue, #7714f8); background:linear-gradient(to left, red, orange, yellow, #35f305, #0ed5f0, blue, #7714f8); }

/* 内容区浅色覆盖 */
.content-wrapper { position:relative; z-index:2; max-width:100%; margin:0 auto; padding:20px; min-height:100vh; }
.content-inner { background-color:rgb(251,243,250); border-radius:10px; padding:20px; min-height:calc(100vh - 40px); }

/* Header */
.site-header { background:rgba(255,255,255,0.88); backdrop-filter:blur(10px); border-radius:8px; margin-bottom:20px; position:sticky; top:10px; z-index:100; }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 24px; }
.site-logo { font-size:28px; font-weight:700; background:linear-gradient(to right, red, orange, #35f305, #0ed5f0, blue, #7714f8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:1px; }
.site-logo a { background:linear-gradient(to right, red, orange, #35f305, #0ed5f0, blue, #7714f8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.site-logo a.active { text-decoration:underline; text-underline-offset:6px; }
.main-nav { display:flex; gap:4px; align-items:center; }
.main-nav a { padding:5px 12px; border-radius:4px; font-size:14px; color:#555; transition:all 0.2s; white-space:nowrap; }
.main-nav > a.active, .main-nav > a:hover { background:#7714f8; color:#fff; }

/* 多级菜单容器 */
.main-nav .nav-group { position:relative; }
.main-nav .nav-group > a { display:block; }
/* 鼠标在 nav-group 区域内（含子菜单），父链接保持高亮 */
.main-nav .nav-group:hover > a,
.main-nav .nav-group > a.active { background:#7714f8; color:#fff; }
/* 二级菜单：向下展开 */
.main-nav > .nav-group > .nav-sub,
.main-nav > .nav-sub { display:none; position:absolute; top:100%; left:0; background:#fff; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,0.12); min-width:130px; padding:6px 0; z-index:200; }
.main-nav > .nav-group:hover > .nav-sub { display:block; }
/* 三级及以上菜单：向右展开 */
.nav-sub .nav-group { position:relative; }
.nav-sub .nav-group > .nav-sub { display:none; position:absolute; top:0; left:100%; background:#fff; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,0.12); min-width:130px; padding:6px 0; z-index:210; }
.nav-sub .nav-group:hover > .nav-sub { display:block; }
/* 子菜单项 */
.main-nav .nav-sub a,
.nav-sub .nav-group > a { display:block; padding:6px 16px; border-radius:0; font-size:13px; color:#555; white-space:nowrap; }
.main-nav .nav-sub a:hover,
.nav-sub .nav-group > a:hover { background:#f5f0fa; color:#7714f8; }

/* 汉堡菜单图标 */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; width:40px; height:40px; position:relative; }
.nav-toggle .hamburger-line { display:block; width:22px; height:2px; background:#555; border-radius:2px; margin:4px auto; transition:all 0.3s ease; }
/* 菜单打开时线条变形 */
.nav-toggle.open .hamburger-line:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle.open .hamburger-line:nth-child(2) { opacity:0; }
.nav-toggle.open .hamburger-line:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ===== Search ===== */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

/* 大屏：显示完整搜索框 */
.search-input {
    width: 160px;
    height: 34px;
    padding: 0 14px 0 34px;
    border: 1px solid #e0d6e8;
    border-radius: 10px;
    background: #faf5ff;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: width 0.3s, border-color 0.2s;
}

.search-input:focus {
    width: 220px;
    border-color: #7714f8;
    background: #fff;
}

.search-input::placeholder {
    color: #bbb;
}

.search-icon-btn {
    display: none; /* 大屏默认隐藏图标按钮 */
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #555;
    padding: 6px;
}

/* 搜索图标（放大镜）定位在输入框内 */
.search-box .search-icon-inner {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #aaa;
    pointer-events: none;
}

/* 小屏：隐藏输入框，显示搜索图标 */
@media (max-width: 768px) {
    .search-input {
        display: none;
    }
    .search-icon-inner {
        display: none;
    }
    .search-icon-btn {
        display: block;
    }
    /* 小屏点击图标后展开搜索框 */
    .search-box.mobile-active .search-input {
        display: block;
        position: absolute;
        top: 50px;
        right: 0;
        width: 280px;
        z-index: 200;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
}

/* Hero */
.hero { background:linear-gradient(135deg, #667eea 0%, #7714f8 100%); color:#fff; padding:10px 10px; border-radius:10px; text-align:center; margin-bottom:24px; }
.hero h1 { font-size:30px; margin-bottom:8px; font-weight:700; }
.hero h1 a { color:#fff; text-decoration:none; }
.hero h1 a:hover { text-decoration:none; }
.hero h1 .breadcrumb-sep { opacity:0.6; margin:0 4px; }
.hero h1 .breadcrumb-current { opacity:1; }
.hero p { font-size:15px; opacity:0.9; }

/* Main Layout（两栏，侧边栏在右） */
.main-layout { display:flex; gap:24px; }
.content-area { flex:1; min-width:0; }
.sidebar { width:300px; flex-shrink:0; }

/* Post Card（摘要卡片） */
.post-card { background:#fff; border-radius:8px; padding:22px 26px; margin-bottom:18px; border:1px solid #f0e6f0; transition:box-shadow 0.25s, transform 0.25s; }
.post-card:hover { box-shadow:0 6px 24px rgba(119,20,248,0.12); transform:translateY(-2px); }
.post-meta { display:flex; align-items:center; gap:12px; font-size:13px; color:#999; margin-bottom:10px; flex-wrap:wrap; }
.post-tag { padding:2px 10px; border-radius:4px; font-size:12px; color:#fff; font-weight:500; }
.post-card h2 { font-size:19px; margin-bottom:8px; line-height:1.5; }
.post-card h2 a:hover { color:#7714f8; }
.post-excerpt { color:#666; font-size:14px; line-height:1.8; }
.post-footer { display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:13px; color:#999; }
.read-more { color:#7714f8; font-weight:600; }
.read-more:hover { text-decoration:underline; }

/* 空状态 */
.empty-tip { text-align:center; padding:60px 20px; color:#999; font-size:15px; }

/* 分页 */
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; padding:20px 0 10px; flex-wrap:wrap; }
.pagination a, .pagination span { display:inline-block; min-width:36px; height:36px; line-height:36px; text-align:center; border-radius:6px; font-size:14px; transition:all 0.2s; }
.pagination a { background:#fff; color:#555; border:1px solid #e0d6e8; }
.pagination a:hover { background:#7714f8; color:#fff; border-color:#7714f8; }
.pagination .page-current { background:#7714f8; color:#fff; font-weight:600; }
.pagination .page-total { color:#999; margin-left:8px; font-size:13px; }

/* Sidebar Widgets */
.widget { background:#fff; border-radius:8px; padding:20px; margin-bottom:18px; border:1px solid #f0e6f0; }
.widget-title { font-size:16px; font-weight:700; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid #7714f8; display:inline-block; }
.about-widget .avatar { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, #e74c3c, #7714f8); color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 14px; }
.about-widget p { font-size:14px; color:#666; text-align:center; line-height:1.8; }
.rank-list { list-style:none; }
.rank-list li { padding:8px 0; border-bottom:1px dashed #eee; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.rank-list li:last-child { border-bottom:none; }
.rank-num { display:inline-block; width:20px; height:20px; line-height:20px; text-align:center; border-radius:3px; font-size:12px; color:#fff; background:#ccc; margin-right:8px; flex-shrink:0; }
.rank-num.top { background:#e74c3c; }
.post-views { font-size:12px; color:#999; flex-shrink:0; margin-left:8px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag-cloud a { padding:4px 12px; border-radius:4px; font-size:13px; font-weight:500; transition:all 0.2s; }
.tag-cloud a:hover { opacity:0.8; transform:scale(1.05); }

.timeline-list { list-style:none; }
.timeline-list li { padding:8px 0 8px 16px; border-left:2px solid #7714f8; position:relative; font-size:14px; color:#555; margin-left:6px; }
.timeline-list li::before { content:''; position:absolute; left:-5px; top:14px; width:8px; height:8px; border-radius:50%; background:#7714f8; }
.tl-date { font-size:12px; color:#999; display:block; margin-bottom:2px; }

/* Footer */
.site-footer { background:linear-gradient(135deg, #667eea 0%, #7714f8 100%); color:#ffffff; padding:15px 0 15px; margin-top:15px; border-radius:10px; }
.footer-inner { text-align:center;  max-width:98%; margin-left:auto; margin-right:auto; }
.footer-bottom { text-align:center; padding-top:10px; margin-top:10px; border-top:1px solid #c9a0ff; font-size:13px; color:#c9a0ff; max-width:98%; margin-left:auto; margin-right:auto; }

/* Responsive */
@media (max-width:768px) {
    .main-nav { display:none; position:absolute; top:56px; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; padding:10px 0; border-radius:0 0 8px 8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); max-height:80vh; overflow-y:auto; }
    .main-nav.open { display:flex; }
    .nav-toggle { display:block; }

    /* 移动端：取消绝对定位，子菜单内嵌展开 */
    .main-nav .nav-group { position:static; }
    .main-nav > .nav-group > .nav-sub,
    .main-nav > .nav-sub,
    .nav-sub .nav-group > .nav-sub { position:static; display:none; box-shadow:none; border-radius:0; min-width:auto; padding:0; background:transparent; }
    .main-nav .nav-group.expanded > .nav-sub,
    .nav-sub .nav-group.expanded > .nav-sub { display:block; }

    /* 移动端子菜单缩进 */
    .main-nav .nav-group > a { padding:8px 16px; font-size:14px; color:#555; text-align:left; }
    /* 二级菜单项（.nav-sub 下的直接子元素） */
    .main-nav > .nav-group > .nav-sub > a,
    .main-nav > .nav-group > .nav-sub > .nav-group > a { padding-left:32px; }
    /* 三级菜单项 */
    .main-nav .nav-sub .nav-sub > a,
    .main-nav .nav-sub .nav-sub > .nav-group > a { padding-left:48px; }
    /* 四级及以上菜单项 */
    .main-nav .nav-sub .nav-sub .nav-sub > a,
    .main-nav .nav-sub .nav-sub .nav-sub > .nav-group > a { padding-left:64px; }

    /* 有子菜单的项右侧加箭头 */
    .main-nav .nav-group > a::after { content:' ▾'; font-size:10px; }
    .main-nav .nav-group.expanded > a::after { content:' ▴'; }

    /* 取消 hover 高亮，改用 active */
    .main-nav .nav-group > a.active { background:#7714f8; color:#fff; }

    .main-layout { flex-direction:column; }
    .sidebar { width:100%; }
    .hero h1 { font-size:22px; }
    .footer-inner { flex-direction:column; }
}