/* ===== 66_Metro_Grid - Metro磁贴网格风格 ===== */
/* 配色: 主色#00A4EF, 背景#FFFFFF, 各板块色: #E81123/#00A4EF/#107C10/#FF8C00/#5C2D91/#0099BC/#E3008C/#B4009E/#008B8B/#C50F00 */
/* 特色: 4列等宽磁贴网格, 每磁贴不同纯色, 磁贴内含帖子预览文字, 无圆角, 顶部白色标题栏, 磁贴悬停缩放 */
/* CSS前缀: .mg2- */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --mg2-primary: #00A4EF;
    --mg2-bg: #FFFFFF;
    --mg2-text: #262626;
    --mg2-gray: #F2F2F2;
    --mg2-border: #E0E0E0;
}

body.mg2-body {
    font-family: 'Segoe UI', 'Noto Sans SC', sans-serif;
    background: var(--mg2-bg);
    color: var(--mg2-text);
    line-height: 1.6;
    min-height: 100vh;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ===== 顶部白色标题栏 ===== */
.mg2-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    border-bottom: 1px solid var(--mg2-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.mg2-topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 56px;
    gap: 20px;
}

.mg2-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mg2-logo-img {
    width: 32px;
    height: 32px;
}

.mg2-logo-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--mg2-text);
    white-space: nowrap;
}

.mg2-nav {
    display: flex;
    gap: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.mg2-nav::-webkit-scrollbar { display: none; }

.mg2-nav-item {
    color: #666;
    font-size: 14px;
    padding: 8px 14px;
    white-space: nowrap;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
}

.mg2-nav-item:hover {
    background: var(--mg2-gray);
    color: var(--mg2-primary);
}

.mg2-nav-item.mg2-nav-active {
    color: var(--mg2-primary);
    border-bottom-color: var(--mg2-primary);
    font-weight: 600;
}

.mg2-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.mg2-search-btn {
    padding: 6px;
    display: flex;
    transition: background 0.2s;
}

.mg2-search-btn:hover, .mg2-search-btn.mg2-search-active {
    background: var(--mg2-gray);
}

.mg2-user-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--mg2-gray);
}

.mg2-user-avatar {
    width: 28px;
    height: 28px;
}

.mg2-user-name {
    font-size: 13px;
    color: var(--mg2-text);
    white-space: nowrap;
}

/* ===== Banner区 ===== */
.mg2-banner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    height: 200px;
    overflow: hidden;
}

.mg2-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mg2-banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 32px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: #fff;
}

.mg2-banner-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 4px;
}

.mg2-banner-desc {
    font-size: 14px;
    opacity: 0.9;
}

/* ===== 主内容区 ===== */
.mg2-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.mg2-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
}

.mg2-main-col {
    min-width: 0;
}

/* ===== 4列等宽磁贴网格 ===== */
.mg2-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 4px;
}

.mg2-tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 16px;
    transition: transform 0.2s;
}

.mg2-tile:hover {
    transform: scale(0.96);
    z-index: 5;
}

.mg2-tile-icon {
    margin-bottom: auto;
}

.mg2-tile-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.mg2-tile-stats {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 8px;
}

.mg2-tile-preview {
    font-size: 12px;
    opacity: 0.7;
    line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 8px;
}

/* ===== 侧边栏 ===== */
.mg2-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mg2-side-block {
    background: #fff;
    padding: 16px;
    border: 1px solid var(--mg2-border);
}

.mg2-side-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mg2-text);
    margin-bottom: 12px;
}

.mg2-side-text {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
}

.mg2-side-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--mg2-border);
}
.mg2-side-stat:last-child { border-bottom: none; }

.mg2-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--mg2-primary);
}

.mg2-stat-label {
    font-size: 12px;
    color: #999;
}

.mg2-hot-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--mg2-border);
}
.mg2-hot-list li:last-child { border-bottom: none; }
.mg2-hot-list a {
    font-size: 13px;
    color: #666;
    transition: color 0.2s;
}
.mg2-hot-list a:hover { color: var(--mg2-primary); }

.mg2-user-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mg2-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.mg2-user-item img {
    width: 28px;
    height: 28px;
}

.mg2-user-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

.mg2-user-card-avatar {
    width: 60px;
    height: 60px;
}

.mg2-user-card-name {
    font-size: 15px;
    font-weight: 600;
}

.mg2-user-card-role {
    font-size: 11px;
    color: #999;
}

/* ===== 面包屑 ===== */
.mg2-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 13px;
    color: #666;
}

.mg2-breadcrumb a:hover { color: var(--mg2-primary); }
.mg2-crumb-sep { color: #999; }
.mg2-crumb-current { color: var(--mg2-text); font-weight: 600; }

/* ===== 板块信息 ===== */
.mg2-board-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    color: #fff;
    margin-bottom: 16px;
}

.mg2-board-icon {
    flex-shrink: 0;
}

.mg2-board-detail {
    flex: 1;
}

.mg2-board-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}

.mg2-board-desc {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.mg2-board-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    opacity: 0.85;
}

.mg2-post-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}

.mg2-post-btn:hover {
    background: rgba(255,255,255,0.35);
}

/* ===== 帖子列表 ===== */
.mg2-post-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mg2-post-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--mg2-border);
    padding: 16px;
    transition: all 0.2s;
}

.mg2-post-tile:hover {
    border-color: var(--mg2-primary);
    box-shadow: 0 2px 8px rgba(0,164,239,0.1);
}

.mg2-post-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.mg2-post-body {
    flex: 1;
}

.mg2-post-tag {
    display: inline-block;
    font-size: 11px;
    color: #fff;
    padding: 2px 8px;
    margin-right: 8px;
    font-weight: 600;
}

.mg2-post-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--mg2-text);
    display: inline;
    transition: color 0.2s;
}

.mg2-post-tile:hover .mg2-post-title {
    color: var(--mg2-primary);
}

.mg2-post-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}

.mg2-post-time { color: var(--mg2-primary); }

/* ===== 分页 ===== */
.mg2-pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 24px 0;
    flex-wrap: wrap;
}

.mg2-page-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--mg2-border);
    color: var(--mg2-text);
    font-size: 14px;
    transition: all 0.2s;
    padding: 0 12px;
}

.mg2-page-btn:hover {
    background: var(--mg2-primary);
    color: #fff;
    border-color: var(--mg2-primary);
}

.mg2-page-active {
    background: var(--mg2-primary);
    color: #fff;
    border-color: var(--mg2-primary);
    font-weight: 600;
}

.mg2-page-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.mg2-page-ellipsis {
    line-height: 40px;
    color: #999;
    padding: 0 4px;
}

/* ===== 帖子详情 ===== */
.mg2-topic-header {
    padding: 20px;
    color: #fff;
    margin-bottom: 16px;
}

.mg2-topic-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
}

.mg2-topic-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    opacity: 0.85;
    flex-wrap: wrap;
}

.mg2-post-detail {
    background: #fff;
    border: 1px solid var(--mg2-border);
    margin-bottom: 4px;
}

.mg2-post-detail.mg2-post-op {
    border-left: 4px solid var(--mg2-primary);
}

.mg2-post-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--mg2-border);
}

.mg2-post-detail-avatar {
    width: 48px;
    height: 48px;
}

.mg2-post-detail-author {
    font-size: 15px;
    font-weight: 600;
}

.mg2-post-detail-role {
    font-size: 11px;
    color: #fff;
    padding: 2px 8px;
    display: inline-block;
    margin-top: 2px;
}

.mg2-post-detail-floor {
    margin-left: auto;
    font-size: 13px;
    color: #999;
}

.mg2-post-detail-body {
    padding: 16px;
    font-size: 14px;
    line-height: 1.8;
}

.mg2-post-detail-body p {
    margin-bottom: 12px;
}

.mg2-post-img {
    max-width: 100%;
    margin-top: 12px;
    display: block;
}

.mg2-post-detail-foot {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--mg2-border);
}

.mg2-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 12px;
    transition: all 0.2s;
    font-family: inherit;
}

.mg2-action-btn:hover {
    background: var(--mg2-gray);
    color: var(--mg2-primary);
}

/* ===== 回复框 ===== */
.mg2-reply-box {
    background: #fff;
    border: 1px solid var(--mg2-border);
    padding: 20px;
    margin-top: 16px;
}

.mg2-reply-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.mg2-reply-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 2px solid var(--mg2-border);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.mg2-reply-textarea:focus {
    border-color: var(--mg2-primary);
}

.mg2-reply-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.mg2-reply-tool {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mg2-gray);
    border: 1px solid var(--mg2-border);
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.mg2-reply-tool:hover {
    background: var(--mg2-primary);
    color: #fff;
    border-color: var(--mg2-primary);
}

.mg2-reply-submit {
    margin-left: auto;
    color: #fff;
    border: none;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s;
}

.mg2-reply-submit:hover { opacity: 0.85; }

/* ===== 搜索页 ===== */
.mg2-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: #fff;
    margin-bottom: 16px;
}

.mg2-search-input {
    flex: 1;
    height: 44px;
    padding: 0 16px;
    border: none;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    background: rgba(255,255,255,0.95);
    color: var(--mg2-text);
}

.mg2-search-go {
    padding: 0 28px;
    height: 44px;
    background: rgba(0,0,0,0.3);
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.mg2-search-go:hover { background: rgba(0,0,0,0.5); }

.mg2-filter-row {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mg2-filter-tile {
    padding: 8px 16px;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: transform 0.2s;
}

.mg2-filter-tile:hover { transform: scale(0.96); }

.mg2-filter-active {
    outline: 3px solid var(--mg2-text);
    outline-offset: 2px;
}

.mg2-search-count {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
}

.mg2-search-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--mg2-border);
    border-left: 4px solid var(--mg2-primary);
    padding: 16px;
    margin-bottom: 4px;
    transition: all 0.2s;
}

.mg2-search-tile:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mg2-search-tile-cat {
    display: inline-block;
    font-size: 11px;
    color: #fff;
    padding: 2px 8px;
    margin-bottom: 8px;
}

.mg2-search-tile-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mg2-text);
    display: block;
    margin-bottom: 6px;
    transition: color 0.2s;
}

.mg2-search-tile:hover .mg2-search-tile-title {
    color: var(--mg2-primary);
}

.mg2-search-tile-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 8px;
}

.mg2-search-tile-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #999;
}

.mg2-hot-search {
    margin-top: 24px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--mg2-border);
}

.mg2-hot-search-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.mg2-hot-search-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.mg2-hot-tag {
    padding: 8px 16px;
    color: #fff;
    font-size: 13px;
    transition: transform 0.2s;
}

.mg2-hot-tag:hover { transform: scale(0.96); }

/* ===== 页脚 ===== */
.mg2-footer {
    background: #1F1F1F;
    color: #999;
    margin-top: 40px;
}

.mg2-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 20px;
}

.mg2-footer-copy {
    font-size: 12px;
}

.mg2-footer-nav {
    display: flex;
    gap: 20px;
}

.mg2-footer-nav a {
    font-size: 13px;
    color: #999;
    transition: color 0.2s;
}

.mg2-footer-nav a:hover { color: var(--mg2-primary); }

.mg2-footer-time {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
    .mg2-content {
        grid-template-columns: 1fr;
    }
    .mg2-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mg2-nav { display: none; }
}

@media (max-width: 640px) {
    .mg2-tile-grid { grid-template-columns: 1fr; }
    .mg2-banner { height: 140px; }
    .mg2-banner-title { font-size: 20px; }
    .mg2-footer-nav { display: none; }
    .mg2-user-name { display: none; }
    .mg2-board-info { flex-direction: column; text-align: center; }
}

/* ============================================================
   CMS 扩展样式 - 使用 Metro Grid 配色 (--mg2-primary:#00A4EF)
   ============================================================ */

/* ---------- 分页(CMS) ---------- */
.jv-pagination{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:24px 0;justify-content:center;
}
.jv-page-info{
  font-size:13px;color:#999;margin-right:12px;
}
.jv-pagination a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  font-size:14px;font-weight:500;cursor:pointer;
  background:#FFFFFF;border:1px solid var(--mg2-border);
  color:var(--mg2-text);
  transition:all 0.2s ease;text-decoration:none;
}
.jv-pagination a:hover{
  background:var(--mg2-primary);color:#fff;
  border-color:var(--mg2-primary);
}
.jv-pagination a.active{
  background:var(--mg2-primary);border-color:var(--mg2-primary);
  color:#fff;font-weight:600;
}
.jv-pagination a.disabled{
  color:#999;border-color:var(--mg2-border);
  cursor:not-allowed;pointer-events:none;opacity:.4;
}
.jv-page-dots{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;color:#999;font-size:14px;
}

/* ---------- 评论区 ---------- */
.comment-section{margin-top:0}
.comment-form-area{margin-bottom:20px}
.comment-login-notice{
  background:#fff;border:1px solid var(--mg2-border);
  padding:20px;text-align:center;
}
.comment-list{display:flex;flex-direction:column}
.comment-item{
  display:flex;gap:12px;padding:16px 0;
  border-bottom:1px solid var(--mg2-border);
}
.comment-item:last-child{border-bottom:none}
.comment-avatar{
  flex-shrink:0;width:40px;height:40px;
  background:var(--mg2-primary);color:#fff;
  font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.comment-main{flex:1;min-width:0}
.comment-head{
  display:flex;align-items:center;gap:8px;
  margin-bottom:6px;flex-wrap:wrap;
}
.comment-author{font-size:14px;font-weight:700;color:var(--mg2-text)}
.comment-reply-to{font-size:12px;color:#999}
.comment-reply-to::before{content:'\2192';margin-right:3px}
.comment-time{font-size:12px;color:#999;margin-left:auto}
.comment-content{font-size:14px;color:#666;line-height:1.7;word-break:break-word}
.comment-actions{margin-top:8px}
.comment-reply-btn{
  display:inline-flex;align-items:center;
  height:26px;padding:0 12px;
  border:none;background:transparent;
  color:#666;font-size:12px;cursor:pointer;
  transition:all 0.2s ease;
}
.comment-reply-btn:hover{color:var(--mg2-primary)}
.comment-reply-form{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.comment-reply-input{
  width:100%;border:2px solid var(--mg2-border);
  padding:10px 14px;
  font-size:13px;line-height:1.5;resize:vertical;min-height:60px;
  font-family:inherit;background:#fff;color:var(--mg2-text);
  transition:border-color 0.2s ease;outline:none;
}
.comment-reply-input:focus{border-color:var(--mg2-primary)}
.comment-reply-submit{
  align-self:flex-end;display:inline-flex;align-items:center;
  height:32px;padding:0 16px;
  border:none;background:var(--mg2-primary);color:#fff;
  font-size:12px;font-weight:600;cursor:pointer;
  transition:opacity 0.2s ease;
}
.comment-reply-submit:hover{opacity:0.85}
.comment-reply-submit:disabled{opacity:.6;cursor:not-allowed}
.comment-replies{
  margin-left:52px;padding-left:16px;
  border-left:2px solid var(--mg2-border);
  display:flex;flex-direction:column;
}
.comment-reply-item{
  display:flex;gap:10px;padding:12px 0;
  border-bottom:1px solid var(--mg2-border);
}
.comment-reply-item:last-child{border-bottom:none}
.comment-reply-item .comment-avatar{width:32px;height:32px;font-size:13px}
.comment-reply-item .comment-author{font-size:13px}
.comment-reply-item .comment-content{font-size:13px}
.comment-empty{text-align:center;padding:32px 16px;color:#999;font-size:14px}
.comment-empty p{margin:0}
.comment-load-more{display:flex;justify-content:center;padding:16px 0}
.comment-load-more-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 28px;
  border:1px solid var(--mg2-border);
  background:#fff;color:var(--mg2-text);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:all 0.2s ease;
}
.comment-load-more-btn:hover{
  background:var(--mg2-primary);color:#fff;
  border-color:var(--mg2-primary);
}
.comment-submit-btn:disabled{opacity:.6;cursor:not-allowed}
.comment-char-count{font-size:13px;color:#999}

/* ---------- 文章内容图片 ---------- */
.mg2-post-detail-body img{max-width:100%;height:auto}