/*
Theme Name: Dahuangfeng Jiaoyu
Theme URI: https://www.dahuangfengjiaoyu.com
Author: 深圳大黄蜂教育咨询有限公司
Author URI: https://www.dahuangfengjiaoyu.com
Description: 大黄蜂教育 - 分类信息网站主题。采用黄黑配色（大黄蜂品牌色），适合招聘、房屋租售、二手、生活服务、教育培训等分类信息发布与浏览。响应式设计，支持 WordPress 自定义菜单、小工具、特色图片。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dahuangfengjiaoyu
Tags: classified, directory, yellow-black, responsive, custom-menu, custom-colors, featured-images, threaded-comments, translation-ready
*/

/* ============================================
   1. CSS Reset & Base
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-primary: #FFC107;        /* 大黄蜂黄 */
    --color-primary-dark: #FFA000;
    --color-dark: #1A1A1A;           /* 大黄蜂黑 */
    --color-dark-2: #2D2D2D;
    --color-dark-3: #444;
    --color-bg: #F5F5F5;
    --color-bg-2: #FAFAFA;
    --color-white: #FFFFFF;
    --color-gray: #999;
    --color-gray-light: #E5E5E5;
    --color-text: #333;
    --color-text-light: #666;
    --color-link: #E65100;
    --color-danger: #D32F2F;
    --color-success: #388E3C;
    --color-info: #1976D2;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
    --radius: 6px;
    --radius-lg: 10px;
    --container: 1200px;
    --font-base: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    /* 用户中心扩展变量 */
    --white:#fff;--pri:#E65100;--accent2:#FFA000;--dark:#1A1A1A;
    --g50:#FAFAFA;--g100:#F5F5F5;--g200:#E5E5E5;--g300:#CCC;--g400:#AAA;--g500:#999;--g600:#666;--g700:#555;--g800:#444;--g900:#333;
    --red:#D32F2F;--red2:rgba(211,47,47,.1);--green:#388E3C;--green2:rgba(56,142,60,.1);
    --gold:#FFA000;--sec:#FFC107;--sec3:rgba(255,193,7,.1);--pri3:rgba(230,81,0,.08);
    --radius-sm:4px;--radius-full:999px;--trans:all .2s ease;

}

html {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    font-size: 14px;
}

a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
}

/* ============================================
   2. Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-dark);
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.85rem; }

/* ============================================
   3. Buttons
   ============================================ */
.btn {
    display: inline-block;
    padding: 8px 20px;
    border: none;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-dark);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    line-height: 1.5;
}

.btn:hover {
    background: var(--color-primary-dark);
    color: var(--color-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-dark);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

.btn-dark {
    background: var(--color-dark);
    color: var(--color-primary);
}

.btn-dark:hover {
    background: var(--color-dark-2);
    color: var(--color-primary);
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-lg {
    padding: 12px 28px;
    font-size: 16px;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

/* ============================================
   4. Top Bar
   ============================================ */
.top-bar {
    background: var(--color-dark);
    color: #ccc;
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 2px solid var(--color-primary);
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.top-bar a {
    color: #ccc;
}

.top-bar a:hover {
    color: var(--color-primary);
}

.top-bar .top-left span {
    margin-right: 16px;
}

.top-bar .top-right a {
    margin-left: 14px;
}

.top-bar .welcome {
    color: var(--color-primary);
    font-weight: 600;
}

/* ============================================
   5. Header
   ============================================ */
.site-header {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-main {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-gray-light);
}

.header-main .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.site-logo {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    font-weight: 900;
    font-size: 26px;
    box-shadow: 0 4px 12px rgba(255,193,7,0.4);
}

.site-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-dark);
    margin: 0;
    line-height: 1.2;
}

.site-title a {
    color: var(--color-dark);
}

.site-title .highlight {
    color: var(--color-primary-dark);
}

.site-description {
    font-size: 12px;
    color: var(--color-gray);
    margin: 2px 0 0;
}

/* Search Box */
.header-search {
    flex: 1;
    max-width: 560px;
    display: flex;
}

.header-search .search-input {
    flex: 1;
    padding: 11px 16px;
    border: 2px solid var(--color-primary);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: 14px;
    outline: none;
    background: var(--color-bg-2);
}

.header-search .search-input:focus {
    background: var(--color-white);
}

.header-search .search-btn {
    padding: 0 24px;
    background: var(--color-primary);
    border: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--color-dark);
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.header-search .search-btn:hover {
    background: var(--color-primary-dark);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.post-btn {
    padding: 10px 22px;
    background: var(--color-dark);
    color: var(--color-primary) !important;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.post-btn:hover {
    background: var(--color-dark-2);
    transform: translateY(-1px);
}

.post-btn::before {
    content: "+";
    font-size: 18px;
    font-weight: 900;
}

/* ============================================
   6. Main Navigation
   ============================================ */
.main-navigation {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-light);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.main-nav > li > a {
    display: block;
    padding: 14px 22px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-dark);
    position: relative;
    transition: all 0.2s;
}

.main-nav > li > a:hover,
.main-nav > li.current-menu-item > a,
.main-nav > li.current_page_item > a {
    color: var(--color-primary-dark);
    background: rgba(255,193,7,0.08);
}

.main-nav > li.current-menu-item > a::after,
.main-nav > li > a:hover::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: var(--color-primary);
    border-radius: 3px 3px 0 0;
}

.main-nav .menu-item-home > a::before {
    content: "🏠 ";
}

/* Sub menu */
.main-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    border-radius: 0 0 var(--radius) var(--radius);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s;
    z-index: 999;
    padding: 6px 0;
}

.main-nav li {
    position: relative;
}

.main-nav li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav .sub-menu a {
    display: block;
    padding: 9px 18px;
    font-size: 13px;
    color: var(--color-text);
    transition: all 0.15s;
}

.main-nav .sub-menu a:hover {
    background: var(--color-bg);
    color: var(--color-primary-dark);
    padding-left: 22px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--color-dark);
}

/* ============================================
   7. Page Layout
   ============================================ */
.site-main {
    padding: 24px 0;
    min-height: 60vh;
}

.layout-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
}

.layout-full {
    max-width: 100%;
}

.content-area {
    min-width: 0;
}

/* Breadcrumb */
.breadcrumb {
    background: var(--color-white);
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
    box-shadow: var(--shadow-sm);
}

.breadcrumb a {
    color: var(--color-text-light);
}

.breadcrumb a:hover {
    color: var(--color-primary-dark);
}

.breadcrumb .separator {
    margin: 0 8px;
    color: var(--color-gray);
}

.breadcrumb .current {
    color: var(--color-dark);
    font-weight: 600;
}

/* ============================================
   8. Home - Category Grid
   ============================================ */
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-dark);
    position: relative;
}

.section-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: var(--color-primary);
}

.section-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title h2::before {
    content: "";
    width: 4px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 2px;
}

.section-title .more-link {
    font-size: 13px;
    color: var(--color-gray);
    font-weight: 500;
}

.section-title .more-link:hover {
    color: var(--color-primary-dark);
}

/* Category Grid */
.category-section {
    background: var(--color-white);
    padding: 20px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 8px;
    background: var(--color-bg-2);
    border-radius: var(--radius);
    text-align: center;
    transition: all 0.25s;
    border: 1.5px solid transparent;
    cursor: pointer;
}

.cat-card:hover {
    background: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.cat-card .cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--color-dark);
    font-weight: bold;
}

.cat-card .cat-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-dark);
}

.cat-card .cat-count {
    font-size: 11px;
    color: var(--color-gray);
    margin-top: 2px;
}

/* ============================================
   9. Info List (Listing Cards)
   ============================================ */
.info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.info-block {
    background: var(--color-white);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.info-block .section-title h2 {
    font-size: 18px;
}

.info-list {
    display: flex;
    flex-direction: column;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--color-gray-light);
    transition: all 0.15s;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item:hover {
    background: var(--color-bg-2);
    margin: 0 -8px;
    padding: 12px 8px;
}

.info-item .info-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-primary);
    color: var(--color-dark);
    font-size: 11px;
    border-radius: 3px;
    font-weight: 600;
    flex-shrink: 0;
}

.info-item .info-tag.tag-hot {
    background: var(--color-danger);
    color: var(--color-white);
}

.info-item .info-tag.tag-rec {
    background: var(--color-info);
    color: var(--color-white);
}

.info-item .info-title {
    flex: 1;
    font-size: 14px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-item .info-title:hover {
    color: var(--color-primary-dark);
}

.info-item .info-area {
    color: var(--color-gray);
    font-size: 12px;
    flex-shrink: 0;
}

.info-item .info-date {
    color: var(--color-gray);
    font-size: 12px;
    flex-shrink: 0;
}

/* ============================================
   10. Listing Card (with image)
   ============================================ */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.listing-card {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
}

.listing-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.listing-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg);
}

.listing-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.listing-card:hover .listing-thumb img {
    transform: scale(1.06);
}

.listing-thumb .listing-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 10px;
    background: var(--color-primary);
    color: var(--color-dark);
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
}

.listing-thumb .listing-badge.hot {
    background: var(--color-danger);
    color: var(--color-white);
}

.listing-thumb .listing-price {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.75);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px;
}

.listing-body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.listing-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listing-title a:hover {
    color: var(--color-primary-dark);
}

.listing-meta {
    font-size: 12px;
    color: var(--color-gray);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.listing-area, .listing-cat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.listing-desc {
    font-size: 12px;
    color: var(--color-text-light);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    flex: 1;
}

.listing-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--color-gray-light);
    font-size: 12px;
}

.listing-author {
    color: var(--color-text-light);
}

.listing-date {
    color: var(--color-gray);
}

/* ============================================
   11. Sidebar Widgets
   ============================================ */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.widget {
    background: var(--color-white);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.widget-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--color-dark);
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.widget-title::before {
    content: "";
    width: 4px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 2px;
}

.widget ul {
    list-style: none;
}

.widget li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-gray-light);
    font-size: 13px;
}

.widget li:last-child {
    border-bottom: none;
}

.widget li a {
    color: var(--color-text);
    display: block;
    transition: color 0.15s;
}

.widget li a:hover {
    color: var(--color-primary-dark);
}

/* Hot info widget */
.widget-hot li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.widget-hot .rank {
    width: 20px;
    height: 20px;
    background: var(--color-gray-light);
    color: var(--color-gray);
    border-radius: 3px;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.widget-hot li:nth-child(1) .rank {
    background: var(--color-danger);
    color: var(--color-white);
}

.widget-hot li:nth-child(2) .rank {
    background: #FF6F00;
    color: var(--color-white);
}

.widget-hot li:nth-child(3) .rank {
    background: var(--color-primary);
    color: var(--color-dark);
}

.widget-hot .hot-title {
    flex: 1;
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quick post widget */
.widget-quick-post {
    text-align: center;
}

.widget-quick-post p {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Contact widget */
.widget-contact .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--color-text);
}

.widget-contact .contact-item .label {
    color: var(--color-gray);
    flex-shrink: 0;
    width: 50px;
}

.widget-contact .contact-item .value {
    color: var(--color-text);
    word-break: break-all;
}

/* ============================================
   12. Archive / List Page
   ============================================ */
.archive-header {
    background: var(--color-white);
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.archive-header h1 {
    font-size: 22px;
    color: var(--color-dark);
    margin: 0;
}

.archive-header .archive-count {
    color: var(--color-gray);
    font-size: 13px;
}

.archive-header .archive-count strong {
    color: var(--color-primary-dark);
    font-size: 16px;
}

/* Filter bar */
.filter-bar {
    background: var(--color-white);
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    font-size: 13px;
}

.filter-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-gray-light);
    gap: 12px;
}

.filter-row:last-child {
    border-bottom: none;
}

.filter-label {
    color: var(--color-gray);
    flex-shrink: 0;
    font-weight: 500;
    width: 60px;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-options a {
    padding: 3px 12px;
    border-radius: 3px;
    color: var(--color-text);
    transition: all 0.15s;
}

.filter-options a:hover {
    background: var(--color-bg);
    color: var(--color-primary-dark);
}

.filter-options a.active {
    background: var(--color-primary);
    color: var(--color-dark);
    font-weight: 600;
}

/* List view (no image) */
.list-compact .listing-card {
    flex-direction: row;
    align-items: stretch;
}

.list-compact .listing-thumb {
    width: 180px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.list-compact .listing-body {
    padding: 14px 18px;
}

/* Pagination */
.pagination {
    text-align: center;
    padding: 24px 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 13px;
    transition: all 0.15s;
}

.pagination .page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.pagination .page-numbers.current {
    background: var(--color-primary);
    color: var(--color-dark);
    border-color: var(--color-primary);
    font-weight: 700;
}

.pagination .page-numbers.dots {
    border: none;
    background: transparent;
}

/* ============================================
   13. Single Post
   ============================================ */
.single-header {
    background: var(--color-white);
    padding: 24px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.single-title {
    font-size: 24px;
    color: var(--color-dark);
    margin-bottom: 12px;
    line-height: 1.4;
}

.single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--color-gray);
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-light);
}

.single-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.single-meta .meta-item strong {
    color: var(--color-text);
}

/* Topinfo: 图片 + 简介横排布局 */
.topinfo {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.topinfo-thumb {
    flex: 0 0 38%;
    max-width: 38%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--color-white);
}

.topinfo-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.topinfo-body {
    flex: 1;
    min-width: 0;
}

.topinfo-body .single-content {
    margin-bottom: 0;
}

/* 移动端：图片与简介上下堆叠 */
@media (max-width: 768px) {
    .topinfo {
        flex-direction: column;
    }
    .topinfo-thumb {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
    .topinfo-img {
        aspect-ratio: 16 / 9;
    }
}

.single-content {
    background: var(--color-white);
    padding: 24px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text);
}

.single-content p {
    margin-bottom: 16px;
}

.single-content h2,
.single-content h3,
.single-content h4 {
    margin: 24px 0 12px;
}

.single-content img {
    border-radius: var(--radius);
    margin: 12px 0;
}

.single-content ul,
.single-content ol {
    margin: 12px 0 12px 24px;
}

.single-content ul li { list-style: disc; }
.single-content ol li { list-style: decimal; }

.single-content blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-bg-2);
    padding: 12px 16px;
    margin: 16px 0;
    color: var(--color-text-light);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.single-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.single-content table th,
.single-content table td {
    border: 1px solid var(--color-gray-light);
    padding: 10px;
    text-align: left;
}

.single-content table th {
    background: var(--color-bg-2);
    font-weight: 700;
}

/* Contact card */
.contact-card {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    padding: 20px 24px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.contact-card .contact-label {
    font-size: 14px;
    color: var(--color-text-light);
    margin-right: 8px;
}

.contact-card .contact-phone {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-danger);
    letter-spacing: 1px;
}

.contact-card .contact-btn {
    margin-left: auto;
}

/* Tags & Share */
.single-footer {
    background: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
}

.tag-list a {
    display: inline-block;
    padding: 3px 10px;
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: 3px;
    margin-right: 6px;
    margin-bottom: 4px;
}

.tag-list a:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

.share-list {
    display: flex;
    gap: 8px;
    align-items: center;
}

.share-list a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.share-list a:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

/* Author box */
.author-box {
    background: var(--color-white);
    padding: 20px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 16px;
    align-items: center;
}

.author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    font-weight: 700;
    font-size: 22px;
    flex-shrink: 0;
}

.author-info h4 {
    margin-bottom: 4px;
    font-size: 16px;
}

.author-info p {
    font-size: 13px;
    color: var(--color-gray);
}

/* Related posts */
.related-posts {
    background: var(--color-white);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.related-posts .section-title {
    margin-bottom: 14px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.related-item {
    padding: 10px;
    background: var(--color-bg-2);
    border-radius: var(--radius);
    transition: all 0.2s;
}

.related-item:hover {
    background: var(--color-primary);
}

.related-item:hover a {
    color: var(--color-dark);
}

.related-item a {
    font-size: 13px;
    color: var(--color-text);
    display: block;
    line-height: 1.5;
}

/* Comments */
.comments-area {
    background: var(--color-white);
    padding: 20px;
    border-radius: var(--radius);
    margin-top: 16px;
    box-shadow: var(--shadow-sm);
}

.comments-title {
    font-size: 18px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-gray-light);
}

.comment-list {
    margin-bottom: 20px;
}

.comment-body {
    padding: 12px 0;
    border-bottom: 1px dashed var(--color-gray-light);
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}

.comment-author {
    font-weight: 700;
    color: var(--color-dark);
}

.comment-date {
    color: var(--color-gray);
}

.comment-content {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.7;
}

.comment-reply-link {
    font-size: 12px;
    color: var(--color-primary-dark);
    margin-top: 6px;
    display: inline-block;
}

#respond {
    margin-top: 20px;
}

#respond h3 {
    margin-bottom: 14px;
    font-size: 16px;
}

#respond .comment-form-comment,
#respond .comment-form-author,
#respond .comment-form-email {
    margin-bottom: 12px;
}

#respond label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--color-text);
    font-weight: 600;
}

#respond input[type="text"],
#respond input[type="email"],
#respond textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
}

#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

#respond textarea {
    min-height: 100px;
    resize: vertical;
}

/* ============================================
   14. Page Template
   ============================================ */
.page-content {
    background: var(--color-white);
    padding: 28px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-size: 15px;
    line-height: 1.8;
}

.page-header {
    background: var(--color-white);
    padding: 20px 24px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-primary);
}

.page-title {
    font-size: 22px;
    color: var(--color-dark);
}

/* About page */
.about-section {
    margin-bottom: 24px;
}

.about-section h3 {
    margin-bottom: 12px;
    color: var(--color-dark);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.company-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.company-info-table th,
.company-info-table td {
    padding: 12px 16px;
    border: 1px solid var(--color-gray-light);
}

.company-info-table th {
    background: var(--color-bg-2);
    width: 130px;
    text-align: left;
    font-weight: 700;
    color: var(--color-dark);
}

/* ============================================
   15. Post Form (Submit Page)
   ============================================ */
.post-form-wrap {
    background: var(--color-white);
    padding: 28px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.form-section {
    margin-bottom: 24px;
}

.form-section h3 {
    font-size: 16px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-gray-light);
    color: var(--color-dark);
}

.form-group {
    display: flex;
    margin-bottom: 14px;
    align-items: flex-start;
}

.form-label {
    width: 120px;
    padding-top: 8px;
    font-size: 14px;
    color: var(--color-text);
    flex-shrink: 0;
}

.form-label .required {
    color: var(--color-danger);
    margin-left: 3px;
}

.form-control {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-white);
    transition: border-color 0.2s;
}

.form-control:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,193,7,0.15);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

select.form-control {
    cursor: pointer;
}

.form-hint {
    font-size: 12px;
    color: var(--color-gray);
    margin-top: 4px;
    margin-left: 120px;
}

.form-actions {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-light);
}

.form-actions .btn {
    margin: 0 6px;
}

/* ============================================
   16. Banner / Hero
   ============================================ */
.hero-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
    color: var(--color-white);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,193,7,0.18) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-section .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

.hero-stat {
    text-align: center;
    padding: 16px;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.hero-stat:last-child {
    border-right: none;
}

.hero-stat .stat-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 6px;
}

.hero-stat .stat-label {
    font-size: 13px;
    color: #ccc;
}

/* ============================================
   17. Footer
   ============================================ */
.site-footer {
    background: var(--color-dark);
    color: #999;
    padding: 36px 0 0;
    border-top: 3px solid var(--color-primary);
}

.footer-widgets {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #333;
}

.footer-widget h4 {
    color: var(--color-white);
    font-size: 15px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    position: relative;
}

.footer-widget h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--color-primary);
}

.footer-widget .footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-widget .footer-brand .logo {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: var(--color-dark);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
}

.footer-widget .footer-brand .name {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
}

.footer-widget p {
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 10px;
}

.footer-widget ul li {
    padding: 5px 0;
    font-size: 13px;
}

.footer-widget ul li a {
    color: #999;
    transition: color 0.2s;
}

.footer-widget ul li a:hover {
    color: var(--color-primary);
}

.footer-widget .contact-line {
    font-size: 13px;
    margin-bottom: 8px;
    display: flex;
    gap: 6px;
}

.footer-widget .contact-line .label {
    color: var(--color-primary);
    flex-shrink: 0;
}

.footer-widget .contact-line .value {
    color: #ccc;
    word-break: break-all;
}

.footer-widget .qr-code {
    width: 100px;
    height: 100px;
    background: var(--color-white);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
}

/* Footer bottom */
.footer-bottom {
    padding: 14px 0;
    text-align: center;
    font-size: 12px;
    color: #777;
}

.footer-bottom .footer-links {
    margin-bottom: 6px;
}

.footer-bottom .footer-links a {
    color: #999;
    margin: 0 8px;
}

.footer-bottom .footer-links a:hover {
    color: var(--color-primary);
}

.footer-bottom .icp a {
    color: #777;
}

.footer-bottom .icp a:hover {
    color: var(--color-primary);
}

/* Back to top */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 80px;
    width: 44px;
    height: 44px;
    background: var(--color-dark);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 999;
    border: 2px solid var(--color-primary);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

/* Floating action buttons */
.float-actions {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 999;
}

.float-btn {
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    color: var(--color-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    transition: all 0.2s;
    cursor: pointer;
}

.float-btn:hover {
    transform: translateY(-2px);
    background: var(--color-primary-dark);
}

.float-btn.publish {
    background: var(--color-dark);
    color: var(--color-primary);
}

/* ============================================
   18. 404 Page
   ============================================ */
.error-404 {
    text-align: center;
    padding: 60px 20px;
}

.error-404 .error-code {
    font-size: 100px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 4px 4px 0 var(--color-dark);
}

.error-404 .error-title {
    font-size: 24px;
    color: var(--color-dark);
    margin-bottom: 12px;
}

.error-404 .error-desc {
    color: var(--color-gray);
    margin-bottom: 24px;
    font-size: 14px;
}

.error-404 .error-actions a {
    margin: 0 6px;
}

/* ============================================
   19. Notice / Alert
   ============================================ */
.notice {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notice-info {
    background: #E3F2FD;
    color: #0D47A1;
    border-left: 3px solid var(--color-info);
}

.notice-success {
    background: #E8F5E9;
    color: #1B5E20;
    border-left: 3px solid var(--color-success);
}

.notice-warning {
    background: #FFF8E1;
    color: #E65100;
    border-left: 3px solid var(--color-primary);
}

.notice-danger {
    background: #FFEBEE;
    color: #B71C1C;
    border-left: 3px solid var(--color-danger);
}

/* ============================================
   20. Responsive
   ============================================ */
@media (max-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .listing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-widgets {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    html { font-size: 13px; }
    
    .top-bar .container {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
    
    .header-main .container {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .site-branding {
        flex: 1;
    }
    
    .header-search {
        order: 3;
        max-width: 100%;
        width: 100%;
    }
    
    .header-actions {
        order: 2;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .main-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        box-shadow: var(--shadow-lg);
        padding: 8px 0;
    }
    
    .main-nav.active {
        display: flex;
    }
    
    .main-nav > li > a {
        padding: 12px 20px;
        border-bottom: 1px solid var(--color-gray-light);
    }
    
    .main-nav > li > a:hover::after,
    .main-nav > li.current-menu-item > a::after {
        display: none;
    }
    
    .layout-with-sidebar {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        order: 2;
    }
    
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .info-section {
        grid-template-columns: 1fr;
    }
    
    .listing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-section .container {
        grid-template-columns: 1fr 1fr;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
    
    .form-group {
        flex-direction: column;
        gap: 4px;
    }
    
    .form-label {
        width: 100%;
        padding-top: 0;
    }
    
    .form-hint {
        margin-left: 0;
    }
    
    .list-compact .listing-card {
        flex-direction: column;
    }
    
    .list-compact .listing-thumb {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
    
    .footer-widgets {
        grid-template-columns: 1fr;
    }
    
    .single-title {
        font-size: 18px;
    }
    
    .contact-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .contact-card .contact-btn {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .listing-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-section .container {
        grid-template-columns: 1fr;
    }
    
    .hero-stat {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 12px;
    }
    
    .hero-stat:last-child {
        border-bottom: none;
    }
    
    .float-actions {
        right: 12px;
    }
    
    .back-to-top {
        right: 12px;
    }
}

/* WordPress core classes */
.alignleft { float: left; margin: 0 16px 8px 0; }
.alignright { float: right; margin: 0 0 8px 16px; }
.aligncenter { display: block; margin: 0 auto; }
.alignwide { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--color-gray); text-align: center; margin-top: 4px; }
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute !important; width: 1px; word-wrap: normal !important;
}
.sticky { display: block; }
.bypostauthor { display: block; }
.gallery-caption { font-size: 12px; color: var(--color-gray); }


/* ==================== 个人中心 ==================== */
.uc-wrapper{display:flex;max-width:var(--container);margin:28px auto;gap:24px;padding:0 24px}
.uc-sidebar{width:260px;background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--g200);padding:24px;position:sticky;top:130px;height:fit-content;flex-shrink:0;box-shadow:var(--shadow-sm)}
.uc-user-card{text-align:center;padding-bottom:20px;border-bottom:1px solid var(--g200);margin-bottom:16px}
.uc-avatar-section{position:relative;width:84px;height:84px;margin:0 auto 12px;cursor:pointer}
.uc-avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--g200);transition:var(--trans)}
.uc-avatar-section:hover .uc-avatar-img{border-color:var(--pri)}
.uc-avatar-overlay{position:absolute;bottom:2px;right:2px;width:28px;height:28px;background:var(--pri);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:var(--trans);font-size:.75rem}
.uc-avatar-section:hover .uc-avatar-overlay{opacity:1}
.uc-username{font-size:1.1rem;font-weight:800;color:var(--dark);margin-bottom:3px}
.uc-user-since{font-size:.76rem;color:var(--g500)}
.uc-nav{margin-bottom:12px}
.uc-nav-group{margin-bottom:14px}
.uc-nav-group-title{font-size:.68rem;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;padding-left:6px}
.uc-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;color:var(--g600);text-decoration:none;border-radius:var(--radius-sm);transition:var(--trans);font-size:.85rem;font-weight:500}
.uc-nav-item:hover{background:var(--g100);color:var(--pri)}
.uc-nav-item.active{background:var(--pri3);color:var(--pri);font-weight:600}
.uc-badge{background:var(--red);color:#fff;font-size:.65rem;padding:2px 7px;border-radius:var(--radius-full);margin-left:auto;font-weight:600}
.uc-sidebar-footer{padding-top:14px;border-top:1px solid var(--g200)}
.uc-logout-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;background:var(--g100);color:var(--g600);text-decoration:none;border-radius:var(--radius-sm);transition:var(--trans);font-size:.84rem}
.uc-logout-btn:hover{background:var(--red2);color:var(--red)}
.uc-content{flex:1;min-width:0;min-height:calc(100vh - 200px)}
.uc-tab-panel{display:none;background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--g200);overflow:hidden;box-shadow:var(--shadow-sm)}
.uc-tab-panel.active{display:block}
.uc-panel-header{padding:20px 24px;border-bottom:1px solid var(--g200);display:flex;justify-content:space-between;align-items:center}
.uc-panel-header h2{font-size:1.15rem;font-weight:800;color:var(--dark);margin:0}
.uc-panel-body{padding:24px}
.uc-form{max-width:520px}
.uc-form-group{margin-bottom:16px}
.uc-form-group label{display:block;font-weight:600;color:var(--dark);margin-bottom:5px;font-size:.84rem}
.uc-input,.uc-textarea{width:100%;padding:10px 14px;border:1.5px solid var(--g200);border-radius:var(--radius);font-size:.88rem;outline:none;transition:var(--trans);color:var(--g900);font-family:inherit}
.uc-input:focus,.uc-textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(5,150,105,.08)}
.uc-textarea{resize:vertical;min-height:100px}
.uc-help-text{font-size:.78rem;color:var(--g500);margin-top:4px}
.uc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border:none;border-radius:var(--radius);font-size:.88rem;font-weight:600;cursor:pointer;transition:var(--trans);text-decoration:none;font-family:inherit}
.uc-btn-primary{background:var(--accent2);color:#fff}.uc-btn-primary:hover{box-shadow:0 6px 20px rgba(5,150,105,.3)}
.uc-btn-outline{background:transparent;border:1.5px solid var(--g200);color:var(--g700)}.uc-btn-outline:hover{border-color:var(--pri);color:var(--pri)}
.uc-btn-sm{padding:6px 14px;font-size:.78rem}
.uc-security-section{background:var(--g50);padding:22px;border-radius:var(--radius);margin-bottom:16px}.uc-security-section h3{font-size:.95rem;color:var(--dark);margin-bottom:16px;font-weight:600}
.uc-post-filters{display:flex;gap:6px}
.uc-filter-btn{padding:6px 16px;background:var(--white);border:1px solid var(--g200);border-radius:var(--radius-full);font-size:.78rem;color:var(--g600);cursor:pointer;transition:var(--trans);font-weight:500;font-family:inherit}
.uc-filter-btn.active,.uc-filter-btn:hover{background:var(--pri);border-color:var(--pri);color:#fff}
.uc-post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.uc-post-card{background:var(--g50);border-radius:var(--radius);overflow:hidden;transition:var(--trans);border:1px solid transparent}
.uc-post-card:hover{box-shadow:var(--shadow-md);border-color:var(--g200)}
.uc-post-image{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--g100)}
.uc-post-info{padding:12px}
.uc-post-title{font-size:.86rem;font-weight:600;color:var(--dark);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.uc-post-price{font-size:1.1rem;font-weight:800;color:var(--red);margin-bottom:6px}
.uc-post-meta{font-size:.76rem;color:var(--g500);display:flex;gap:10px;margin-bottom:8px}
.uc-post-status{display:inline-block;padding:2px 8px;border-radius:var(--radius-full);font-size:.7rem;font-weight:600;margin-bottom:8px}
.uc-post-status.selling{background:var(--green2);color:var(--green)}
.uc-post-status.offline{background:rgba(245,158,11,.1);color:var(--gold)}
.uc-post-status.completed{background:var(--pri3);color:var(--pri)}
.uc-post-status.draft{background:var(--g200);color:var(--g600)}
.uc-post-actions{display:flex;gap:4px}
.uc-action-btn{flex:1;padding:6px;border:none;border-radius:var(--radius-sm);font-size:.73rem;cursor:pointer;transition:var(--trans);background:var(--white);color:var(--g600);text-align:center;font-family:inherit}
.uc-action-btn:hover{background:var(--g200)}.uc-action-btn.edit:hover{color:var(--pri)}.uc-action-btn.refresh:hover{color:var(--green)}.uc-action-btn.offline:hover{color:var(--gold)}.uc-action-btn.delete:hover{color:var(--red)}
.uc-empty{text-align:center;padding:60px 20px;color:var(--g500)}.uc-empty i{font-size:3rem;margin-bottom:10px;color:var(--g300)}.uc-empty p{font-size:.9rem;margin-bottom:16px}
.uc-pagination{display:flex;justify-content:center;gap:6px;margin-top:24px;padding-top:16px;border-top:1px solid var(--g200)}
.uc-page-btn{padding:7px 14px;border:1px solid var(--g200);border-radius:var(--radius-sm);background:var(--white);color:var(--g700);cursor:pointer;transition:var(--trans);font-size:.82rem;font-family:inherit}
.uc-page-btn:hover:not(:disabled){border-color:var(--pri);color:var(--pri)}.uc-page-btn.active{background:var(--pri);border-color:var(--pri);color:#fff}.uc-page-btn:disabled{opacity:.4}
.uc-comment-item{display:flex;padding:16px;border-bottom:1px solid var(--g200)}.uc-comment-item:last-child{border-bottom:none}.uc-comment-content{flex:1}.uc-comment-text{font-size:.86rem;color:var(--g800);margin-bottom:6px}.uc-comment-meta{display:flex;gap:12px;font-size:.76rem;color:var(--g500)}.uc-comment-status{padding:2px 8px;border-radius:var(--radius-full);font-size:.68rem;font-weight:600}.uc-comment-status.approved{background:var(--green2);color:var(--green)}.uc-comment-status.pending{background:rgba(245,158,11,.1);color:var(--gold)}
.uc-following-item{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--g200)}.uc-following-item:last-child{border-bottom:none}.uc-following-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}.uc-following-info{flex:1}.uc-following-name{font-weight:600;color:var(--dark);font-size:.86rem}.uc-following-date{font-size:.76rem;color:var(--g500)}.uc-following-action{padding:6px 16px;border:1px solid var(--g200);border-radius:var(--radius-full);background:var(--white);color:var(--g600);cursor:pointer;transition:var(--trans);font-size:.78rem;font-family:inherit}.uc-following-action:hover{border-color:var(--red);color:var(--red)}
.uc-notification-item{display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--g200);cursor:pointer;transition:var(--trans)}.uc-notification-item:hover{background:var(--g50)}.uc-notification-item.unread{background:var(--pri3)}.uc-notification-icon{width:38px;height:38px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}.uc-notification-icon.system{background:var(--pri3);color:var(--pri)}.uc-notification-icon.review{background:var(--green2);color:var(--green)}.uc-notification-icon.warning{background:rgba(245,158,11,.1);color:var(--gold)}.uc-notification-icon.announcement{background:var(--sec3);color:var(--sec)}.uc-notification-content{flex:1}.uc-notification-title{font-weight:600;color:var(--dark);margin-bottom:4px;font-size:.86rem}.uc-notification-desc{font-size:.8rem;color:var(--g600);margin-bottom:4px}.uc-notification-time{font-size:.73rem;color:var(--g500)}
.uc-messages-layout{display:flex;height:520px;border:1px solid var(--g200);border-radius:var(--radius);overflow:hidden}.uc-conversations{width:300px;border-right:1px solid var(--g200);overflow-y:auto}.uc-conversation-item{display:flex;gap:12px;padding:14px;cursor:pointer;border-bottom:1px solid var(--g200);transition:var(--trans)}.uc-conversation-item:hover,.uc-conversation-item.active{background:var(--g50)}.uc-conversation-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.uc-conversation-info{flex:1;overflow:hidden;min-width:0}.uc-conversation-name{font-weight:600;color:var(--dark);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.uc-conversation-preview{font-size:.76rem;color:var(--g500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uc-conversation-time{font-size:.68rem;color:var(--g500);flex-shrink:0}.uc-conversation-badge{background:var(--red);color:#fff;font-size:.62rem;padding:2px 6px;border-radius:var(--radius-full);font-weight:600}
.uc-chat-area{flex:1;display:flex;flex-direction:column;background:var(--g50);min-width:0}.uc-chat-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--g400)}.uc-chat-placeholder i{font-size:3rem;margin-bottom:10px}.uc-chat-header{padding:12px 16px;background:var(--white);border-bottom:1px solid var(--g200);display:flex;align-items:center;gap:10px}.uc-chat-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}.uc-chat-name{font-weight:600;color:var(--dark);font-size:.86rem}.uc-chat-messages{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.uc-message{max-width:70%;padding:9px 13px;border-radius:var(--radius);font-size:.84rem}.uc-message.mine{align-self:flex-end;background:var(--pri);color:#fff}.uc-message.other{align-self:flex-start;background:var(--white);border:1px solid var(--g200);color:var(--g800)}.uc-message-time{font-size:.66rem;opacity:.7;text-align:right}.uc-chat-input-area{padding:12px 16px;background:var(--white);border-top:1px solid var(--g200);display:flex;gap:8px}.uc-chat-input{flex:1;padding:9px 14px;border:1.5px solid var(--g200);border-radius:var(--radius-full);font-size:.84rem;outline:none;transition:var(--trans)}.uc-chat-input:focus{border-color:var(--pri)}.uc-chat-send-btn{width:38px;height:38px;background:var(--pri);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--trans);flex-shrink:0}.uc-chat-send-btn:hover{background:var(--accent2)}
.uc-settings-section{background:var(--g50);padding:22px;border-radius:var(--radius);margin-bottom:16px}.uc-settings-section h3{font-size:.95rem;color:var(--dark);margin-bottom:14px;font-weight:600}.uc-toggle-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--g200)}.uc-toggle-item:last-child{border-bottom:none}.uc-toggle-info strong{display:block;font-weight:600;color:var(--dark);margin-bottom:2px;font-size:.86rem}.uc-toggle-info p{font-size:.78rem;color:var(--g500);margin:0}
.uc-switch{position:relative;display:inline-block;width:44px;height:24px}.uc-switch input{opacity:0;width:0;height:0}.uc-switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--g400);transition:var(--trans);border-radius:24px}.uc-switch-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:var(--white);transition:var(--trans);border-radius:50%}input:checked+.uc-switch-slider{background:var(--pri)}input:checked+.uc-switch-slider:before{transform:translateX(20px)}
.uc-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}.uc-modal.active{display:block}.uc-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.5)}.uc-modal-content{position:relative;background:var(--white);margin:6% auto;width:90%;max-width:540px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xl)}.uc-modal-header{padding:16px 22px;border-bottom:1px solid var(--g200);display:flex;justify-content:space-between;align-items:center}.uc-modal-header h3{font-size:1.05rem;font-weight:700;color:var(--dark);margin:0}.uc-modal-close{background:none;border:none;font-size:1.3rem;color:var(--g500);cursor:pointer;transition:var(--trans)}.uc-modal-close:hover{color:var(--dark)}.uc-modal-body{padding:22px}
.uc-toast{position:fixed;top:20px;right:20px;padding:12px 22px;border-radius:var(--radius);color:#fff;font-weight:500;z-index:2000;opacity:0;transform:translateX(100%);transition:var(--trans);font-size:.85rem;box-shadow:var(--shadow-lg)}.uc-toast.show{opacity:1;transform:translateX(0)}.uc-toast.success{background:var(--green)}.uc-toast.error{background:var(--red)}.uc-toast.info{background:var(--pri)}
@media(max-width:900px){.uc-wrapper{flex-direction:column}.uc-sidebar{width:100%;position:static}.uc-nav{display:flex;flex-wrap:wrap;gap:4px}.uc-post-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
@media(max-width:600px){.uc-panel-header{flex-direction:column;gap:10px;align-items:flex-start}.uc-post-filters{flex-wrap:wrap}.uc-filter-btn{flex:1;text-align:center}.uc-post-list{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}

.listing-fabu{font-size:12px;}