/* ============================================================
   🌐 问答系统 - 完整样式 (重构版)
   版本: 2.1 | 整理优化
   ============================================================ */
/* ============================================================
   2. 侧边栏 - 分类列表 (Sidebar)
   ============================================================ */
#ask_cat_list.widget-area {
    width: 160px !important;
    min-width: 160px !important;
    margin-left: 0 !important;
    margin-right: 16px !important;
}

.jitheme-cat .ask-cat-list .b-wrap {
    padding: 10px 8px;
    background: transparent;
}

.jitheme-cat .ask-cat-list a,
.jitheme-cat .ask-cat-list .select-wrap a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    margin-bottom: 6px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.jitheme-cat .ask-cat-list a:last-child { margin-bottom: 0; }

.jitheme-cat .ask-cat-list a .Jifont {
    flex-shrink: 0;
    width: 20px;
    font-size: 15px;
    text-align: center;
    color: #999;
    transition: color 0.2s ease;
}

.jitheme-cat .ask-cat-list a span {
    flex: 1;
    font-size: 14px;
}

.jitheme-cat .ask-cat-list a:hover {
    color: #333;
    background: var(--b2light);
}
.jitheme-cat .ask-cat-list a:hover .Jifont { color: var(--b2color); }

.jitheme-cat .ask-cat-list a.active {
    font-weight: 500;
    color: var(--b2color);
    background: var(--b2light);
}
.jitheme-cat .ask-cat-list a.active .Jifont { color: var(--b2color); }

.jitheme-cat .ask-cat-list .select-wrap {
    padding-top: 10px;
    margin-top: 10px;
}

/* 暗色模式 */
.dark .jitheme-cat .ask-cat-list a { color: #999; }
.dark .jitheme-cat .ask-cat-list a:hover { color: #ddd; background: #2a2a3a; }
.dark .jitheme-cat .ask-cat-list a.active { color: #fff; background: var(--b2color); }
.dark .jitheme-cat .ask-cat-list .select-wrap { border-top-color: #2a2a3a; }
.dark .jitheme-cat .ask-cat-list .select-wrap a { color: #777; background: #2a2a3a; }
.dark .jitheme-cat .ask-cat-list .select-wrap a:hover { color: #ddd; background: #3a3a5a; }
.dark .jitheme-cat .ask-cat-list .select-wrap a.current { color: #fff; background: #4a6cf7; }

/* 移动端适配 */
@media screen and (max-width: 768px) {
    #ask_cat_list.widget-area {
        width: 100% !important;
        min-width: 100% !important;
        margin-right: 0 !important;
    }
    .jitheme-cat .ask-cat-list a {
        padding: 5px 12px;
        margin-bottom: 4px;
        font-size: 13px;
        line-height: 25px;
    }
    .jitheme-cat .ask-cat-list a .Jifont { font-size: 14px; }
    .jitheme-cat .ask-cat-list a span { font-size: 13px; }
}


/* ============================================================
   3. 问答列表核心 (List)
   ============================================================ */
#jitheme_ask_list.rank-list .item-wrap { padding: 0; }
#jitheme_ask_list .users-list { display: flex; }

/* 列表容器 */
#jitheme_ask_list .ask-item {
    padding: 16px 20px;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 8px;
    transition: box-shadow 0.2s;
}
#jitheme_ask_list .ask-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }

/* 顶部用户区 */
#jitheme_ask_list .ask-item .item-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
#jitheme_ask_list .ask-item .item-avatar img {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
}
#jitheme_ask_list .ask-item .author-name {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
}
#jitheme_ask_list .ask-item .author-name strong a {
    font-weight: 600;
    color: #1f2329;
    text-decoration: none;
}
#jitheme_ask_list .ask-item .author-name strong a:hover { color: #1a73e8; }
#jitheme_ask_list .ask-item .author-name span a.red {
    font-weight: 600;
    color: var(--b2color);
}
#jitheme_ask_list .ask-item .ask-item-top { display: none !important; }

/* 悬赏标签 (右上角) */
#jitheme_ask_list .ask-item .ask-pay {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    padding: 2px 10px 2px 4px;
    margin-left: auto;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 14px;
}
#jitheme_ask_list .ask-item .ask-pay .reward-icon { display: inline-flex; align-items: center; }
#jitheme_ask_list .ask-item .ask-pay .ask-reward,
#jitheme_ask_list .ask-item .ask-pay .ask-pay-type { display: none !important; }
#jitheme_ask_list .ask-item .ask-pay .ask-pay-number { display: flex; align-items: center; }
#jitheme_ask_list .ask-item .ask-pay .ask-pay-number b { font-weight: 700; color: #92400e; }

/* 核心布局 (上方卡片 + 下方优质回答) */
#jitheme_ask_list .ask-item .item-entry {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

/* 卡片主体 (左文右图) */
#jitheme_ask_list .ask-item .item-entry .entry {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    text-decoration: none;
}
#jitheme_ask_list .ask-item .rank-ask-title-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
}

/* 标题 + 已解决标 */
#jitheme_ask_list .ask-item .talk-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px 0;
    line-height: 1.4;
}
#jitheme_ask_list .ask-item .talk-title .last-answer { display: flex; }
#jitheme_ask_list .ask-item .talk-title .last-answer .answer-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    height: 24px;
    padding: 2px 10px 2px 6px;
    margin-top: 2px;
    font-weight: 500;
    line-height: 1;
    color: #16a34a;
    background: #dcfce7;
    border-radius: 12px;
}
#jitheme_ask_list .ask-item .talk-title .last-answer .answer-ok svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    fill: #00a65a !important;
    color: #00a65a !important;
}

/* 摘要 */
#jitheme_ask_list .ask-item .ask-desc {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 右侧图片 */
#jitheme_ask_list .ask-item .rank-ask-img-box {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    margin-left: 10px;
}
#jitheme_ask_list .ask-item .rank-ask-img-box:empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#jitheme_ask_list .ask-item .rank-ask-img-box:has(img) {
    width: 160px;
    height: 100px;
    min-height: 80px;
}
#jitheme_ask_list .ask-item .rank-ask-img-box > div:not(:first-child) { display: none !important; }
#jitheme_ask_list .ask-item .rank-ask-img-box > div:first-child,
#jitheme_ask_list .ask-item .rank-ask-img-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rank-ask-img-box .images_imagesWrap {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    height: 80px;
    overflow: hidden;
    border-radius: 6px;
}
.rank-ask-img-box .images_imagesWrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#jitheme_ask_list .ask-item .rank-ask-img-box .moreImgeTip {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: auto;
    padding: 2px 8px;
    font-size: 12px;
    color: #fff;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

/* 优质回答 (绿条) */
#jitheme_ask_list .ask-item .ask-answer-user-list {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
    padding: 6px 12px;
    color: #4e5969;
    background: #f6fbf6;
    border-left: 3px solid #16a34a;
    border-radius: 4px;
}
#jitheme_ask_list .ask-item .ask-answer-user-list .common-desc {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    margin-bottom: 0;
    font-size: 14px;
}
#jitheme_ask_list .ask-item .ask-answer-user-list .common-desc .preview-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 1px 10px 1px 6px;
    font-weight: 500;
    color: #16a34a;
    white-space: nowrap;
    background: #dcfce7;
    border-radius: 12px;
}
#jitheme_ask_list .ask-item .ask-answer-user-list .common-desc .preview-badge svg {
    width: 14px;
    height: 14px;
    fill: #16a34a;
    color: #16a34a;
    background: #dcfce7;
}
#jitheme_ask_list .ask-item .ask-answer-user-list .common-desc .answer-name {
    flex-shrink: 0;
    font-weight: 200;
    color: #1f2329;
}
#jitheme_ask_list .ask-item .ask-answer-user-list .common-desc .ask-answer-user-con {
    display: -webkit-box;
    overflow: hidden;
    width: 100%;
    color: #666;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

/* 底部标签和统计 */
#jitheme_ask_list .ask-item .circle_bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f5;
}
#jitheme_ask_list .ask-item .bottomLeft___2cVLU a {
    display: inline-block;
    padding: 1px 10px;
    margin-right: 6px;
    text-decoration: none;
    border-radius: 4px;
}
#jitheme_ask_list .ask-item .ask-footer {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 0;
    margin: 0;
}
#jitheme_ask_list .ask-item .ask-footer span {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #8f959e;
}
#jitheme_ask_list .ask-item .ask-footer em {
    font-style: normal;
    color: #5f6368;
}


/* ============================================================
   4. 骨架屏 (Gujia)
   ============================================================ */
@keyframes skeleton-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.gujia .ask-item { background: #fff !important; }
.gujia .ask-item .item-wrap { background: transparent !important; }

.gujia .ask-item .item-avatar,
.gujia .ask-item .author-name span,
.gujia .ask-item .ask-pay,
.gujia .ask-item .talk-title,
.gujia .ask-item .ask-desc,
.gujia .ask-item .rank-ask-img-box,
.gujia .ask-item .ask-answer-user-list .common-desc,
.gujia .ask-item .circle_bottom .bottomLeft___2cVLU span,
.gujia .ask-item .ask-footer span {
    color: transparent !important;
    background: #f0f2f5 !important;
    background-image: linear-gradient(90deg, #f0f2f5 0px, #e0e2e5 40px, #f0f2f5 80px) !important;
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border: none !important;
    border-radius: 4px;
    animation: skeleton-shimmer 1.5s infinite ease-in-out;
}

.gujia .ask-item img,
.gujia .ask-item svg,
.gujia .ask-item .last-answer,
.gujia .ask-item .reward-icon,
.gujia .ask-item .images_imagesWrap,
.gujia .ask-item .preview-badge { display: none !important; }

/* 头部区域 */
.gujia .ask-item .item-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.gujia .ask-item .item-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.gujia .ask-item .author-name span {
    display: inline-block;
    width: 100px;
    height: 16px;
}
.gujia .ask-item .ask-pay {
    width: 60px;
    height: 22px;
    margin-left: auto;
    border-radius: 12px;
}

/* 内容区域 */
.gujia .ask-item .item-entry {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.gujia .ask-item .item-entry .entry {
    display: flex;
    flex-direction: row;
    gap: 16px;
    text-decoration: none;
}
.gujia .ask-item .rank-ask-title-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.gujia .ask-item .talk-title { width: 85%; height: 22px; border-radius: 4px; }
.gujia .ask-item .ask-desc { width: 100%; height: 16px; border-radius: 4px; }
.gujia .ask-item .rank-ask-img-box { flex-shrink: 0; width: 120px; height: 80px; border-radius: 6px; }

/* 优质回答区域 */
.gujia .ask-item .ask-answer-user-list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 6px 12px;
    background: #f6fbf6 !important;
    border-left: 3px solid #d0d0d0;
    border-radius: 4px;
}
.gujia .ask-item .ask-answer-user-list .common-desc {
    width: 90%;
    height: 16px;
    border-radius: 4px;
}

/* 底部信息 */
.gujia .ask-item .circle_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f5 !important;
}
.gujia .ask-item .circle_bottom .bottomLeft___2cVLU span {
    display: inline-block;
    width: 60px;
    height: 16px;
}
.gujia .ask-item .ask-footer span {
    display: inline-block;
    width: 40px;
    height: 16px;
    margin-left: 10px;
}


/* ============================================================
   5. 顶部搜索与筛选栏 (Header & Search)
   ============================================================ */
#ask_global_container {
    padding: 30px 20px 10px 20px;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px 0 rgba(22, 23, 47, 0.08);
}

#ask_stats_header {
    margin-bottom: 25px;
    font-size: 16px;
    color: #666;
    display: flex;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#ask_stats_header .stats-number {
    font-size: 28px;
    font-weight: 800;
    color: #1f2937;
    margin: 0 5px;
    /* 数字稍微带点颜色强调 */
    background: linear-gradient(135deg, #2563eb, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#ask_stats_header .stats-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: #007bff;
}
#ask_action_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}
#ask_search_wrapper {
    flex: 1;
    max-width: 500px;
    min-width: 200px;
}
#ask_search_form_box {
    padding: 0 15px;
    background: #fff;
    border: 1px solid var(--b2color);
    border-radius: 6px;
    transition: border-color 0.3s;
}
#ask_search_form_box:focus-within { border-color: #4a90e2; }
#ask_search_input {
    width: 100%;
    height: 40px;
    color: #333;
    background: transparent;
    border: none;
    outline: none;
}
#ask_search_input::placeholder { color: #b0b0b0; }

.ask-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 42px;
    padding: 0 25px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    gap: 6px;
}
#ask_btn_search {
    color: var(--b2color);
    background: #fff;
    border: 1px solid var(--b2color);
}
#ask_btn_search:hover { background: #f0f7ff; }
#ask_btn_ask {
    color: #fff;
    background: var(--b2color);
    border: 1px solid var(--b2color);
}
#ask_btn_ask:hover { color: #fff; background: var(--b2color); }
#ask_divider { font-size: 14px; color: #ccc; }

#ask_filter_bar { display: flex; justify-content: center; }
#ask_filter_tabs_box {
    display: flex;
    gap: 60px;
    justify-content: center;
    width: 100%;
    padding-bottom: 12px;
}
#ask_filter_tabs_box span {
    position: relative;
    padding: 0 0 4px 0;
    font-size: 15px;
    color: #888;
    cursor: pointer;
    background: #fff;
    transition: color 0.2s;
}
#ask_filter_tabs_box span:hover { color: #555; }
#ask_filter_tabs_box span.picked {
    font-weight: 600;
    color: var(--b2color);
}
#ask_filter_tabs_box span.picked::after {
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 3px;
    content: '';
    background-color: var(--b2color);
    border-radius: 2px;
}


/* ============================================================
   6. 发布表单 (Modern Publish Form)
   ============================================================ */
.publish-modern-wrapper {
    position: relative;
    max-width: 820px;
    padding: 28px 30px !important;
    margin: 0 auto;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.publish-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #f0f2f5;
}
.header-avatar .avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid #e8ecf1;
    border-radius: 50%;
}
.header-info .header-name { font-size: 16px; font-weight: 600; color: #1f2329; }
.header-info .header-desc { margin-top: 2px; font-size: 13px; color: #8f959e; }

.publish-form-container { display: flex; flex-direction: column; gap: 20px; }
.form-item { width: 100%; }
.form-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    background: #f9fafc;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    outline: none;
    transition: all 0.25s ease;
}
.form-input:focus {
    background: #fff;
    border-color: #ff8c42;
    box-shadow: 0 0 0 4px rgba(255, 140, 66, 0.08);
}
.form-input::placeholder { color: #b0b5bd; }

.reward-toggle .toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2329;
    cursor: pointer;
}
.reward-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #ff8c42;
    cursor: pointer;
}
.reward-box {
    padding: 16px 18px;
    margin-top: 14px;
    background: #f7f9fc;
    border: 1px solid #eef0f4;
    border-radius: 10px;
}
.reward-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}
.reward-row .label { margin-right: 4px; font-size: 13px; color: #8f959e; }
.reward-type-select span {
    display: inline-block;
    padding: 4px 14px;
    margin-right: 6px;
    font-size: 13px;
    color: #5f6368;
    cursor: pointer;
    background: #eef0f4;
    border-radius: 20px;
    transition: all 0.2s;
}
.reward-type-select span.picked { color: #fff; background: #ff8c42; }
.mini-input {
    width: 80px;
    padding: 6px 10px;
    font-size: 14px;
    text-align: center;
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 6px;
    outline: none;
}
.mini-input:focus { border-color: #ff8c42; }
.reward-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin-top: 12px;
    font-size: 13px;
    color: #5f6368;
}
.reward-notice b { color: #1f2329; }
.reward-notice .gray { color: #b0b5bd; }

.tags-cats-row .cats-select-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 13px;
    color: #1f2329;
    background: #f5f6f8;
    border-radius: 20px;
}
.selected-tag b { font-weight: normal; font-size: 14px; color: #999; cursor: pointer; }
.add-cat-btn { position: relative; cursor: pointer; }
.add-cat-btn span {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    color: #5f6368;
    background: #f5f6f8;
    border-radius: 20px;
    transition: background 0.2s;
}
.add-cat-btn span:hover { background: #eef0f4; }
.add-cat-btn select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.editor-box {
    position: relative;
    background: #f9fafc;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    transition: all 0.25s ease;
}
.editor-box:focus-within {
    background: #fff;
    border-color: #ff8c42;
    box-shadow: 0 0 0 4px rgba(255, 140, 66, 0.08);
}
.editor-box #ask-edit-content { display: none; }
.editor-placeholder {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 15px;
    color: #b0b5bd;
    cursor: text;
}
.editor-placeholder svg { fill: #b0b5bd; }
.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #fcfcfd;
    border-top: 1px solid #f0f2f5;
    border-radius: 0 0 8px 8px;
}
.tool-left { display: flex; align-items: center; gap: 6px; }
.tool-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 13px;
    color: #5f6368;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}
.tool-icon svg { fill: #8f959e; }
.tool-icon:hover { color: #1f2329; background: #eef0f4; }
.tool-icon:hover svg { fill: #1f2329; }
.tool-right .tool-status { font-size: 12px; color: #b0b5bd; }

.invited-users-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.invited-label { margin-right: 4px; font-size: 14px; color: #5f6368; }
.invited-label .badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #ff8c42;
    border-radius: 50%;
}
.invited-avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.invited-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 4px;
    font-size: 13px;
    background: #f5f6f8;
    border-radius: 20px;
}
.invited-item .avatar { width: 20px; height: 20px; border-radius: 50%; }
.invited-item b { font-weight: normal; font-size: 14px; color: #999; padding: 0 4px; cursor: pointer; }

.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.invite-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: 14px;
    color: #5f6368;
    cursor: pointer;
    background: #f5f6f8;
    border: none;
    border-radius: 6px;
    transition: all 0.2s;
}
.invite-btn:hover { color: #1f2329; background: #eef0f4; }
.invite-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.publish-btn {
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #ff9a56, #ff7a2f);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(255, 122, 47, 0.25);
    transition: all 0.3s ease;
}
.publish-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 122, 47, 0.35);
}
.publish-btn:active { transform: translateY(0); }


/* ============================================================
   7. 问答 Bar
   ============================================================ */
#ask-archive.ji-ask-archive .ask-bar {
    display: flex;
    padding: 4px;
    margin: 15px 0;
    background: #f5f6fa;
    border: 1px solid #eef0f4;
    border-radius: 8px;
}
#ask-archive.ji-ask-archive .ask-bar .picked {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
#ask-archive.ji-ask-archive .ask-bar span {
    padding: 0 10px;
    margin: 5px;
    margin-right: 0;
    font-size: 15px;
    line-height: 30px;
    border-radius: var(--ji--radius);
}
#ask-archive.ji-ask-archive .ask-bar span:hover {
    font-weight: 600;
    background: #fff;
    border-radius: 6px;
}
#ask-archive.ji-ask-archive .ask-bar .button {
    padding: 5px 10px;
    margin-right: 5px;
    line-height: 25px;
    color: #fff !important;
    background-color: var(--b2color);
}
#ask-archive .button { border-radius: var(--ji--radius); }


/* ============================================================
   8. 问答头部 (旧版)
   ============================================================ */
#jitheme_ask.ask-top {
    background: var(--body-bg-color) !important;
    box-shadow: unset !important;
}
#jitheme_ask.ask-top h1 {
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}
#jitheme_ask.ask-top h2 {
    max-width: 60%;
    margin-top: 10px;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}
#jitheme_ask.ask-top h2 span {
    margin: 0 5px;
    font-size: 34px;
    font-weight: 600;
}
#jitheme_ask i { padding-right: 5px; }


/* ============================================================
   9. 问答搜索框 (旧版)
   ============================================================ */
#jitheme_ask .ask-search-box {
    display: flex;
    position: absolute;
    z-index: 3;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 30px 20px;
}
#jitheme_ask .ask-search-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    margin-bottom: 15px;
}
#jitheme_ask .ask-search-input button {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 20px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: var(--b2color);
    border: none;
    border-radius: 4px;
}
#jitheme_ask input { padding: 10px; font-size: 14px; }
#jitheme_ask .ask-search-or {
    display: inline-block;
    padding: 0 20px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
#jitheme_ask .ask-search-form {
    position: relative;
    z-index: 1;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 4px;
}
#jitheme_ask .ask-search-form input {
    width: 100%;
    height: 40px;
    padding: 10px 95px 10px 10px;
    border-radius: 4px;
}
#jitheme_ask .ask-search-post a {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 40px;
    padding: 0 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: var(--b2color);
    border: none;
    border-radius: 4px;
}
#jitheme_ask .ask-search-post a::before,
#jitheme_ask .ask-search-post a::after {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 7px;
    height: 7px;
    content: '';
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translate(20px, -50%) rotate(45deg);
}
#jitheme_ask .ask-search-post a::after { right: 12px; }
#jitheme_ask .ask-search-post a:hover::before,
#jitheme_ask .ask-search-post a:hover::after { opacity: 1; }
#jitheme_ask .ask-slider {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    overflow: hidden;
}


/* ============================================================
   10. 列表辅助标签
   ============================================================ */
#jitheme_ask_list .jitheme-list-tips {
    position: absolute;
    width: 4rem;
    height: 4rem;
    overflow: hidden;
}
#jitheme_ask_list .jitheme-list-tips .tips__text {
    position: absolute;
    top: 20px;
    left: -60px;
    width: 5.656rem;
    height: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #fff;
    text-align: center;
    background-color: var(--b2color);
    transform: translate(38px, -8px) rotate(314deg);
}
#jitheme_ask_list .jitheme-ask-list .answer-best {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    color: var(--b2color);
    background: var(--b2lightcolor);
    border: 1px solid var(--b2lightcolor);
    border-radius: 6px;
}
#jitheme_ask_list .jitheme-ask-list .answer-best i {
    padding-right: 10px;
    color: var(--b2color);
}

#jitheme_ask_list .users-list-answer {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin: 0 10px 0 0;
    list-style-type: none;
}
#jitheme_ask_list .users-list-answer li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 25px;
    margin-left: -5px;
}
#jitheme_ask_list .users-list-answer li:nth-child(1) { z-index: 5; }
#jitheme_ask_list .users-list-answer li:nth-child(2) { z-index: 4; }
#jitheme_ask_list .users-list-answer li:nth-child(3) { z-index: 3; }
#jitheme_ask_list .users-list-answer li:nth-child(4) { z-index: 2; }
#jitheme_ask_list .users-list-answer li:nth-child(5) { z-index: 1; }
#jitheme_ask_list .users-list-answer li img {
    z-index: 3;
    width: 100%;
    height: auto;
    border: 2px solid #fff;
    border-radius: 100px;
}
#jitheme_ask_list .users-list-answer .best-style img { border: 2px solid #ffbc00 !important; }
#jitheme_ask_list .users-list-answer .best-style::after {
    position: absolute;
    top: -20px;
    z-index: 1;
    display: block;
    width: 30px;
    height: 100%;
    margin-left: 0;
    font-size: 12px;
    line-height: 2.25em;
    color: #fff;
    text-align: center;
    content: '';
    background-image: url(https://image.uisdc.com/wp-content/uploads/2021/06/uisdc_n3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(0.8);
    transform-origin: center bottom;
}


/* ============================================================
   11. 问答详情页 (Single Article) - 重构版
   ============================================================ */
.single-article {
    width: 100%;
    padding: 2rem;
    margin: 0 auto 20px;
    font-family: system-ui, -apple-system, sans-serif;
    color: #333;
    background: #fff;
    border: 1px solid #f0f2f5;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

/* 顶部：标签 + 悬赏 */
.ask-single-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ask-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ask-tag-item {
    padding: 0.2rem 0.9rem;
    font-size: 0.75rem;
    color: #5f6b7a;
    text-decoration: none;
    background: #f4f5f7;
    border: 1px solid transparent;
    border-radius: 20px;
}
.ask-tag-item:hover { color: #333; background: #eef0f4; }

.ask-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ask-reward-pay-left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}
.ask-pay-number {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #f56c6c;
    border-radius: 40px;
}
.ask-pay-number svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.ask-pay-number b { font-weight: 600; }
.ask-pay-type {
    margin-top: 0.1rem;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: #8896a6;
}
.ask-passtime b { font-weight: 500; color: #5f7488; }
.ask-reward {
    padding: 0.15rem 0.8rem;
    font-size: 0.75rem;
    color: #5f6b7a;
    white-space: nowrap;
    background: #f5f6f8;
    border-radius: 30px;
}

/* 标题行 */
.entry-header { margin-bottom: 1rem; }
.title-inv-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.title-inv-wrapper h1 {
    flex: 1;
    min-width: 200px;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
}

.ask-inv-box {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 1.2rem;
    font-size: 0.8rem;
    color: #3d5567;
    white-space: nowrap;
    background: #f6f9fc;
    border: 1px solid #e6edf4;
    border-radius: 40px;
}
.ask-inv-box svg { width: 0.9rem; height: 0.9rem; fill: #7f8c9b; }
.ask-inv-box a { font-weight: 500; color: #2c6b9e; text-decoration: none; }
.ask-inv-box a:hover { text-decoration: underline; }
.ask-inv-box b { font-weight: 600; color: #1e2b39; }

/* 用户信息 */
.post-user-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0;
    margin: 0 0 1.2rem 0;
    border: 1px solid #f0f2f5;
}
.post-meta-left {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: 20px;
}
.avatar-parent img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.post-user-name {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
}
.post-user-name b { font-size: 0.95rem; font-weight: 600; color: #1f2329; }
.user-title {
    padding: 0.1rem 0.6rem;
    font-size: 0.6rem;
    font-weight: 450;
    color: #5f6b7a;
    background: #f0f2f5;
    border-radius: 30px;
}

.post-meta-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 20px !important;
}
.post-meta-right button {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    background: #f4f5f7;
    border: 1px solid transparent;
    border-radius: 20px;
    transition: all 0.2s;
}
.post-meta-right button:hover { background: #eceff5; }
.author-follow { color: #409eff; background: #ecf5ff; }
.author-follow:hover { background: #d9ecff !important; }
.author-has-follow { color: #666; background: #f4f5f7; }
.empty { background: #fff !important; border: 1px solid #dce2ea !important; }
.empty:hover { background: #f4f5f7 !important; }
.post-meta-right button svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }

/* 内容区 */
.ask-single-info { margin: 0; }
.entry-content {
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
}
.entry-content p { margin-bottom: 0.8rem; }
.entry-content p:last-child { margin-bottom: 0; }
.entry-content a { color: #165dff; text-decoration: none; }
.entry-content a:hover { text-decoration: underline; }

/* 底部信息栏 */
.ask-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.2rem;
    font-size: 0.85rem;
    color: #8c9aa8;
}
.ask-metas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
}
.ask-metas span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.ask-metas svg { width: 1rem; height: 1rem; fill: currentColor; }
.ask-metas b { font-weight: 500; }
.b2-color { color: #e6a23c; }
.green { font-size: 0.65rem; color: #3b8c6a; }
.red { color: #b05a4a; }

.ask-footer-right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #8c9aa8;
    cursor: pointer;
}
.ask-footer-right:hover { color: #165dff; }

/* 写回答按钮 */
.ask-write-answer {
    display: flex;
    justify-content: stretch;
    margin: 20px 0 !important;
    border-top: 0 solid #f5f6f7 !important;
}
.btn-answer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dce0e6;
    border-radius: 8px;
    box-shadow: none !important;
    transition: all 0.2s ease;
    gap: 0.5rem;
}
.btn-answer:hover {
    color: #000;
    background: #f8f9fa;
    border-color: #c9ced4;
}
.btn-answer svg { width: 1rem; height: 1rem; fill: currentColor; }

.ask-pay:empty,
.ask-pay[style*="display: none"] { display: none !important; }
.ask-inv-box:empty,
.ask-inv-box[style*="display: none"] { display: none !important; }


/* ============================================================
   12. 其他辅助样式
   ============================================================ */
.b2-single-content.ask-people {
    max-width: 100% !important;
    width: unset !important;
}
.ji-ask-answer-box .author-info .b2flex p { height: 16px; }
.ji-ask-answer-box .author-info .answer-name { vertical-align: top; }
.ji-ask-answer-box .answer-name { font-size: 1rem; font-weight: 600; }
.ji-ask-answer-box .answer-item .answer-top-left .avatar {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}
.ji-ask-answer-box .author-info {
    align-items: flex-start;
    justify-content: space-between;
    height: 50px;
}


/* ============================================================
   13. 响应式 (移动端)
   ============================================================ */
@media (max-width: 600px) {
    /* 发布表单 */
    .publish-modern-wrapper {
        padding: 16px !important;
        margin: 0 -12px;
        border-radius: 0 !important;
    }
    .reward-row { flex-direction: column; align-items: flex-start; }
    .mini-input { width: 100%; text-align: left; }
    .form-footer { flex-direction: column-reverse; gap: 12px; }
    .invite-btn { width: 100%; justify-content: center; }
    .publish-btn { display: flex; width: 100%; justify-content: center; }
    .editor-toolbar { flex-wrap: wrap; gap: 8px; }

    /* 搜索筛选 */
    #ask_action_row { flex-direction: column; align-items: stretch; }
    #ask_search_wrapper { min-width: 100%; }
    #ask_filter_tabs_box {
        overflow-x: auto;
        gap: 20px;
        justify-content: flex-start;
        max-width: 100%;
    }
    #ask_filter_tabs_box span { white-space: nowrap; }

    /* 详情页 */
    .single-article { padding: 1.25rem; }
    .ask-single-top { flex-direction: column-reverse; align-items: flex-start; }
    .ask-pay { width: 100%; justify-content: flex-start; }
    .ask-reward-pay-left { align-items: flex-start; }
    .title-inv-wrapper { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .title-inv-wrapper h1 { font-size: 1.3rem; }
    .ask-inv-box { align-self: flex-start; }
    .post-user-info { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .post-meta-right { flex-wrap: wrap; justify-content: flex-start; width: 100%; }
    .ask-footer { flex-direction: column; align-items: flex-start; }
    .ask-metas { flex-wrap: wrap; gap: 0.5rem 1rem; }
    .ask-pay-number { padding: 0.05rem 0.6rem; }
    .btn-answer { width: 100%; padding: 0.4rem 1rem; font-size: 0.85rem; justify-content: center; }
}