/* Page wrap */
.forum-list-page { padding: 20px 0 40px; }

/* Hero */
.forum-hero {
    background: linear-gradient(120deg, #2377e8, #61a2ff);
    border-radius: 10px;
    color: #fff;
    padding: 26px 28px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.forum-hero h1 { margin: 0; font-size: 28px; line-height: 1.35; }
.forum-hero p { margin: 10px 0 14px; color: rgba(255,255,255,.9); line-height: 1.8; font-size: 14px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-btn {
    padding: 7px 16px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
    background: rgba(255,255,255,.15);
    transition: background .2s;
    line-height: 1.5;
}
.hero-btn:hover { background: rgba(255,255,255,.3); color: #fff; }
.hero-btn.primary { background: #fff; color: #2377e8; border-color: #fff; }
.hero-btn.primary:hover { background: #ecf5ff; }
.hero-search {
    display: flex;
    margin-top: 14px;
    border-radius: 6px;
    overflow: hidden;
    max-width: 400px;
}
.hero-search input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 12px;
    font-size: 14px;
    height: 36px;
    background: rgba(255,255,255,.92);
    color: #333;
    margin: 0;
}
.hero-search button {
    width: 68px;
    height: 36px;
    background: rgba(0,0,0,.2);
    border: none;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
}
.hero-search button:hover { background: rgba(0,0,0,.35); }
.forum-hero-stats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    align-content: start;
}
.forum-hero-stats .hs-item {
    background: rgba(255,255,255,.16);
    border-radius: 8px;
    padding: 12px;
}
.forum-hero-stats .hs-label { font-size: 12px; opacity: .88; }
.forum-hero-stats .hs-num { margin-top: 6px; font-size: 24px; font-weight: 700; }

/* Two-column layout */
.forum-layout {
    display: grid;
    grid-template-columns: 1fr 268px;
    gap: 16px;
    align-items: start;
}

/* Board Section */
.board-section {
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 6px;
    overflow: hidden;
}
.board-section:last-child { margin-bottom: 0; }
.section-head {
    height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f4;
    background: #f6f8fb;
}
.section-title { font-size: 17px; color: #37455d; font-weight: 600; letter-spacing: .4px; }
.section-more { color: #b4bdcc; font-size: 12px; }

/* Board Cards */
.board-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
}
.board-card {
    padding: 13px 12px;
    border-right: 1px solid #eef2f6;
    border-top: 1px solid #eef2f6;
    min-height: 92px;
    transition: background .2s;
    cursor: pointer;
}
.board-card:hover { background: #f9fbff; }
.board-cards .board-card:nth-child(-n+4) { border-top: none; }
.board-cards .board-card:nth-child(4n) { border-right: none; }
.card-name { display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.card-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5fb;
    border: 1px solid #e2e8f2;
    font-size: 14px;
    font-weight: 700;
}
.card-link { font-size: 15px; color: #344257; font-weight: 600; text-decoration: none; }
.card-link:hover { color: #2c8eff; text-decoration: underline; }
.card-desc { margin-top: 7px; font-size: 12px; color: #8d97a9; line-height: 1.65; }
.card-desc b { color: #5f6d86; font-weight: 600; }
.card-last { margin-top: 3px; color: #b0b8c7; font-size: 11px; }
.ic-red { color: #d95a5e; background: #fdf0f0 !important; border-color: #f6d0d1 !important; }
.ic-orange { color: #db8b2f; background: #fdf5ec !important; border-color: #f7e0c2 !important; }
.ic-green { color: #3eaa6b; background: #f0faf3 !important; border-color: #c4e8d4 !important; }
.ic-blue { color: #4e87d8; background: #eef5fd !important; border-color: #c5d9f5 !important; }
.ic-cyan { color: #3d9daa; background: #eef8fa !important; border-color: #c3e1e6 !important; }
.ic-purple { color: #7d69c7; background: #f4f2fc !important; border-color: #d5cef0 !important; }
.ic-gold { color: #a8874f; background: #faf6ef !important; border-color: #e6d7c0 !important; }

/* Sidebar */
.forum-sidebar { display: flex; flex-direction: column; gap: 14px; }
.sidebar-panel {
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 6px;
    overflow: hidden;
}
.sidebar-panel-head {
    height: 40px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f4;
    background: #f6f8fb;
    font-size: 15px;
    font-weight: 600;
    color: #37455d;
}
.sidebar-panel-head a { font-size: 12px; color: #b4bdcc; font-weight: normal; text-decoration: none; }
.sidebar-panel-head a:hover { color: #2c8eff; }
.sidebar-panel-body { padding: 12px 14px; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    text-align: center;
}
.stats-grid .sg-item { padding: 10px 4px; background: #f8fafc; border-radius: 6px; }
.stats-grid .sg-num { font-size: 20px; font-weight: 700; color: #2c8eff; line-height: 1; }
.stats-grid .sg-label { font-size: 11px; color: #8898b0; margin-top: 4px; }
.create-btn {
    display: block;
    text-align: center;
    background: #2c8eff;
    color: #fff;
    border-radius: 6px;
    padding: 9px 0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
    margin-top: 12px;
}
.create-btn:hover { background: #1a7ae0; color: #fff; }
.thread-item {
    padding: 9px 0;
    border-top: 1px dashed #edf0f5;
    font-size: 13px;
}
.thread-item:first-child { border-top: none; padding-top: 0; }
.thread-item a {
    color: #344257;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.5;
}
.thread-item a:hover { color: #2c8eff; }
.thread-item .ti-meta { color: #b0b8c7; font-size: 11px; margin-top: 3px; display: flex; gap: 8px; }
.thread-item .ti-badge {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 10px;
    line-height: 18px;
    vertical-align: middle;
    margin-right: 4px;
    background: #fff3eb;
    color: #e07b2a;
}
.thread-item .ti-badge.top { background: #fff0f0; color: #d95a5e; }
.loading-wrap { text-align: center; padding: 60px 20px; color: #8898b0; }
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e6ebf5;
    border-top-color: #4e87d8;
    border-radius: 50%;
    animation: spin .9s linear infinite;
    margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-tip { text-align: center; padding: 48px 20px; color: #8898b0; }
.forum-shortcuts {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}
.forum-shortcut {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    border: 1px solid #e2e8f2;
    border-radius: 5px;
    font-size: 13px;
    color: #5572a5;
    text-decoration: none;
}
@media (max-width: 900px) {
    .forum-hero { grid-template-columns: 1fr; padding: 20px; }
    .forum-hero h1 { font-size: 22px; }
    .forum-hero-stats { display: flex; flex-wrap: wrap; }
    .forum-hero-stats .hs-item { flex: 1 0 40%; }
    .forum-layout { grid-template-columns: 1fr; }
    .forum-sidebar { display: none; }
    .board-cards { grid-template-columns: repeat(2,1fr); }
    .board-cards .board-card:nth-child(-n+4) { border-top: 1px solid #eef2f6; }
    .board-cards .board-card:nth-child(-n+2) { border-top: none; }
    .board-cards .board-card:nth-child(4n) { border-right: 1px solid #eef2f6; }
    .board-cards .board-card:nth-child(2n) { border-right: none; }
}