/* =============================================================
 * 网址导航系统 - 扩展样式
 * 在目标站 app.css 基础上补充后端动态渲染所需的组件样式
 * ============================================================= */

/* ---------- 首页公告条（上下翻转） ---------- */
.home-notice-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(74, 108, 247, 0.08);
    border: 1px solid rgba(74, 108, 247, 0.15);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #4a6cf7;
    overflow: hidden;
}

.home-notice-bar i {
    font-size: 16px;
    flex-shrink: 0;
}

/* 可视窗口：只露出一行高度，靠 track 位移做上下翻转 */
.home-notice-viewport {
    flex: 1;
    min-width: 0;
    height: 20px;
    overflow: hidden;
    position: relative;
}

.home-notice-track {
    position: relative;
    height: 20px;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.home-notice-item {
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-notice-item > a,
.home-notice-item > span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
}

.home-notice-item > a:hover { text-decoration: underline; }

/* 翻转动画用类切换，避免和 transition 冲突：
   .is-flipping 加在 track 上，位移由 JS 逐帧设定 */
.home-notice-bar.is-paused .home-notice-track { transition: none; }

/* ---------- 常用工具网格 ---------- */
.ai-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 12px;
    padding: 4px 0;
}

.ai-tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 10px;
    transition: all 0.22s ease;
    text-decoration: none;
}

.ai-tool-item:hover {
    background: rgba(74, 108, 247, 0.07);
    transform: translateY(-2px);
}

.ai-tool-item img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

.ai-tool-item span {
    font-size: 12px;
    color: #555;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #aaa;
    font-size: 13px;
    padding: 24px 0;
}

/* ---------- 收藏弹窗 ---------- */
.ai-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.ai-modal-overlay.show {
    display: flex;
}

.ai-modal-box {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 92%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.ai-modal-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px;
    color: #222;
}

.ai-modal-title .close-btn {
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #999;
}

.ai-modal-title .close-btn:hover { color: #f56c6c; }

.ai-modal-box .form-group {
    margin-bottom: 14px;
}

.ai-modal-box .form-group label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.ai-modal-box .form-group input {
    width: 100%;
    height: 40px;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.ai-modal-box .form-group input:focus {
    border-color: #4a6cf7;
}

.btn-submit {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: #4a6cf7;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-submit:hover { opacity: 0.9; }

/* ---------- 搜索联想 ---------- */
.suggestions-box {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.suggestion-item:hover { background: #f4f6fb; }

.suggestion-item img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.search-wrapper { position: relative; }

/* ---------- 分类页头部 ---------- */
.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 14px;
}

.category-header h1 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-header h1 i { color: #4a6cf7; }

.category-count {
    font-size: 13px;
    color: #888;
}

.category-main, .main-list { width: 100%; }

/* ---------- 排行榜 ---------- */
.rank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    padding: 10px 14px;
    transition: all 0.2s;
}

.rank-item:hover {
    box-shadow: 0 4px 16px rgba(74, 108, 247, 0.1);
    transform: translateY(-1px);
}

.rank-no {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #f0f2f5;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-no-1 { background: linear-gradient(135deg,#ff9a44,#fc6076); color:#fff; }
.rank-no-2 { background: linear-gradient(135deg,#8fd3f4,#84fab0); color:#fff; }
.rank-no-3 { background: linear-gradient(135deg,#f6d365,#fda085); color:#fff; }

/* 说明：.rank-card 在 app.css 中用于「分类页右侧点击排行榜」卡片（需 block 纵向布局），
   早期此处误加了 display:flex + flex:1（排行榜页横向条目风格），会导致分类页排行榜标题被压成竖排。
   现改为仅对「排行榜页」的卡片条目生效，避免选择器冲突。 */
.rank-page-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
}

.rank-card img,
.rank-page-item img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
    background: #f7f8fa;
}

.rank-info { flex: 1; min-width: 0; }

.rank-info strong {
    display: block;
    font-size: 14px;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-info p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-views {
    font-size: 12px;
    color: #bbb;
    flex-shrink: 0;
}

.rank-go {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f4f6fb;
    color: #4a6cf7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}

.rank-go:hover { background: #4a6cf7; color: #fff; }

/* ---------- 归档 ---------- */
.archive-group { margin-bottom: 22px; }

.archive-month {
    font-size: 15px;
    color: #333;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.archive-month i { color: #4a6cf7; }

/* ---------- 单页（关于/申请/快审/广告） ---------- */
.page-single {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 980px;
    margin: 0 auto;
}

.page-single-head {
    border-bottom: 1px solid #eef2f6;
    padding-bottom: 18px;
    margin-bottom: 22px;
}

.page-single-head h1 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin: 0 0 8px;
}

.page-single-head p {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.page-single-body h2 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 24px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-single-body h2 i { color: #4a6cf7; }
.page-single-body p { font-size: 14px; color: #555; line-height: 1.9; margin: 0 0 10px; }

.page-single-body ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.page-single-body li {
    font-size: 14px;
    color: #555;
    line-height: 2;
}

.contact-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-line i { color: #4a6cf7; }

/* ---------- 表单 ---------- */
.apply-form { max-width: 620px; }

.form-row { margin-bottom: 18px; }

.form-row label {
    display: block;
    font-size: 13px;
    color: #444;
    margin-bottom: 7px;
    font-weight: 500;
}

.form-row label em {
    color: #f56c6c;
    font-style: normal;
    margin-left: 2px;
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e4e8ee;
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 14px;
    color: #333;
    outline: none;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
}

.form-row textarea { resize: vertical; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 26px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #4a6cf7, #6a8cff);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.btn-primary:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-block { width: 100%; }

/* ---------- 价格卡片 ---------- */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.price-card {
    position: relative;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    padding: 22px 20px;
    background: #fff;
    text-align: center;
    transition: all 0.25s;
}

.price-card:hover {
    box-shadow: 0 8px 28px rgba(74, 108, 247, 0.12);
    transform: translateY(-3px);
}

.price-hot {
    border-color: #4a6cf7;
    box-shadow: 0 6px 24px rgba(74, 108, 247, 0.15);
}

.price-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff9a44, #fc6076);
    color: #fff;
    font-size: 11px;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.price-tag { font-size: 14px; color: #666; margin-bottom: 10px; }

.price-num {
    font-size: 30px;
    font-weight: 700;
    color: #4a6cf7;
    margin-bottom: 16px;
}

.price-num span { font-size: 13px; font-weight: 400; color: #999; }

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    text-align: left;
}

.price-card li {
    font-size: 13px;
    color: #666;
    line-height: 2.1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.price-card li i { color: #52c41a; font-size: 15px; }

.pay-tip {
    text-align: center;
    font-size: 13px;
    color: #999;
}

.pay-tip a { color: #4a6cf7; }

/* ---------- 站点详情 ---------- */
.site-detail-wrap { max-width: 1000px; margin: 0 auto; }

.site-detail-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.site-detail-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f3f7;
}

.site-detail-icon img {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: contain;
    background: #f7f8fa;
    padding: 6px;
    box-sizing: border-box;
}

.site-detail-meta { flex: 1; min-width: 0; }

.site-detail-meta h1 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin: 0 0 8px;
}

.site-detail-sub {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #999;
}

.site-detail-sub i { margin-right: 3px; }

.site-detail-cat {
    color: #4a6cf7;
    text-decoration: none;
    background: rgba(74, 108, 247, 0.08);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.site-detail-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4a6cf7, #6a8cff);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.site-detail-go:hover { opacity: 0.9; }

.site-detail-body { padding-top: 20px; }

.site-detail-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.9;
    margin: 0 0 16px;
}

.site-detail-url {
    font-size: 13px;
    color: #999;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    word-break: break-all;
}

.site-detail-url a { color: #4a6cf7; text-decoration: none; }

.site-detail-content {
    font-size: 14px;
    color: #555;
    line-height: 1.9;
    padding: 16px 0;
    border-top: 1px dashed #eef2f6;
}

.site-detail-info {
    display: flex;
    gap: 40px;
    padding: 16px 0 4px;
    border-top: 1px dashed #eef2f6;
    flex-wrap: wrap;
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #999;
}

.info-row b {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

/* ---------- 空状态 / 404 ---------- */
.empty-tip {
    text-align: center;
    color: #aaa;
    font-size: 14px;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 14px;
}

.error-page { text-align: center; padding: 40px 20px; }

.error-code {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #4a6cf7, #8fa8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 16px;
}

.error-page h1 {
    font-size: 20px;
    color: #333;
    margin: 0 0 8px;
}

.error-page p { font-size: 14px; color: #999; margin: 0 0 24px; }

/* ---------- 夜间模式补充 ---------- */
body.dark-mode .home-notice-bar {
    background: rgba(74, 108, 247, 0.15);
    border-color: rgba(74, 108, 247, 0.3);
    color: #8fa8ff;
}

body.dark-mode .ai-tool-item span { color: #bbb; }
body.dark-mode .ai-tool-item:hover { background: rgba(74, 108, 247, 0.15); }
body.dark-mode .ai-tool-item img { background: #2a2a3a; }

body.dark-mode .ai-modal-box {
    background: #1a2332;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

body.dark-mode .ai-modal-title { color: #eee; }

body.dark-mode .ai-modal-box .form-group input {
    background: #0f1621;
    border-color: #2a3a52;
    color: #ddd;
}

body.dark-mode .suggestions-box {
    background: #1a2332;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .suggestion-item { color: #ddd; }
body.dark-mode .suggestion-item:hover { background: #23324a; }

body.dark-mode .category-header {
    background: rgba(22, 33, 62, 0.85);
}

body.dark-mode .category-header h1 { color: #e5e9f0; }

body.dark-mode .rank-item,
body.dark-mode .site-detail-card {
    background: rgba(22, 33, 62, 0.9);
    border-color: #2a3a52;
}

body.dark-mode .rank-info strong,
body.dark-mode .archive-month,
body.dark-mode .site-detail-meta h1,
body.dark-mode .info-row b { color: #e5e9f0; }

body.dark-mode .rank-no { background: #23324a; color: #8899aa; }
body.dark-mode .rank-go { background: #23324a; }

body.dark-mode .page-single {
    background: rgba(22, 33, 62, 0.9);
}

body.dark-mode .page-single-head { border-color: #2a3a52; }
body.dark-mode .page-single-head h1,
body.dark-mode .page-single-body h2 { color: #e5e9f0; }
body.dark-mode .page-single-body p,
body.dark-mode .page-single-body li { color: #aab4c4; }

body.dark-mode .form-row input,
body.dark-mode .form-row select,
body.dark-mode .form-row textarea {
    background: #0f1621;
    border-color: #2a3a52;
    color: #ddd;
}

body.dark-mode .price-card {
    background: #16213e;
    border-color: #2a3a52;
}

body.dark-mode .price-tag { color: #99a5b8; }
body.dark-mode .price-card li { color: #aab4c4; }

body.dark-mode .site-detail-head { border-color: #2a3a52; }
body.dark-mode .site-detail-desc,
body.dark-mode .site-detail-content { color: #aab4c4; }
body.dark-mode .site-detail-info,
body.dark-mode .site-detail-content { border-color: #2a3a52; }
body.dark-mode .empty-tip { background: rgba(22, 33, 62, 0.8); color: #7a8699; }
body.dark-mode .error-page h1 { color: #e5e9f0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .price-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .page-single { padding: 20px 16px; }
    .site-detail-card { padding: 18px 16px; }
    .site-detail-head { flex-wrap: wrap; }
    .site-detail-go { width: 100%; justify-content: center; margin-top: 12px; }
    .site-detail-info { gap: 24px; }
    .ai-tools-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
    .rank-views { display: none; }
    .category-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .home-notice-bar { font-size: 12px; padding: 8px 12px; }
}

/* ===================== API 文档页 ===================== */
.api-docs-page { padding-bottom: 8px; }
.api-docs-body { padding: 4px 4px 8px; }
.api-docs-intro { margin-bottom: 18px; }
.api-docs-intro p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.8; color: #4b5563; }
.api-docs-intro code,
.api-docs-path code { background: #eef2ff; color: #4a6cf7; padding: 2px 7px; border-radius: 5px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.api-docs-base { display: flex; align-items: center; gap: 10px; background: #f7f9ff; border: 1px solid #e6ecff; border-radius: 10px; padding: 10px 14px; }
.api-docs-label { font-size: 12.5px; color: #8a94a6; }
.api-docs-section { margin-bottom: 22px; }
.api-docs-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14.5px; font-weight: 600; color: #1f2937; }
.api-method { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px; }
.api-method-get { background: #e7f7ee; color: #0f9d58; }
.api-docs-path { margin-bottom: 10px; }
.api-docs-desc { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.7; }
.api-docs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.api-docs-table th,
.api-docs-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #eef0f5; }
.api-docs-table th { background: #f7f9ff; color: #6b7280; font-weight: 600; font-size: 12.5px; }
.api-docs-table td { color: #374151; }
.api-docs-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #4a6cf7; }
.api-docs-code { margin: 0; background: #1e2233; border-radius: 10px; padding: 16px 18px; overflow-x: auto; }
.api-docs-code code { color: #c9d4f5; font-size: 12.5px; line-height: 1.75; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }

body.night-mode .api-docs-intro p { color: #a8b1c4; }
body.night-mode .api-docs-base { background: #232838; border-color: #2f3648; }
body.night-mode .api-docs-title { color: #e5e9f2; }
body.night-mode .api-docs-desc { color: #99a3b8; }
body.night-mode .api-docs-table th { background: #232838; color: #99a3b8; }
body.night-mode .api-docs-table td { color: #d3d9e6; border-bottom-color: #2b3142; }

/* ===================== 夜间模式：侧栏 Logo 可读性 ===================== */
/* 站标是深蓝字 + 浅蓝描边的 PNG，在深色侧栏(#16213e)上对比度不足，
   叠加一层浅色圆角底衬，保证夜间模式下品牌清晰可见。
   注意：这里不要再用 brightness 提亮，深蓝字会被冲淡成灰白反而更糊。 */
body.dark-mode .sidebar-logo {
    border-bottom-color: #2a3450 !important;
}
body.dark-mode .sidebar-logo img {
    background: rgba(255, 255, 255, 0.94) !important;
    border-radius: 8px !important;
    padding: 3px 7px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
    /* 覆盖末尾 .dark-mode 的 brightness 提亮规则，避免与白底叠加过曝 */
    filter: none !important;
}
body.dark-mode .main-sidebar.collapsed .sidebar-logo img {
    padding: 2px 4px !important;
    border-radius: 6px !important;
}

/* ===================== 归档页：月份快捷导航 ===================== */
.archive-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e8ecf4;
}
.archive-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 20px;
    background: #f5f7fc;
    border: 1px solid #e8ecf4;
    font-size: 12.5px;
    color: #4b5563;
    text-decoration: none;
    transition: all .18s ease;
    white-space: nowrap;
}
.archive-nav-item i { font-size: 13px; color: #8a94a6; transition: color .18s; }
.archive-nav-item em {
    font-style: normal;
    background: #fff;
    color: #8a94a6;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 9px;
    border: 1px solid #e8ecf4;
    transition: all .18s;
}
.archive-nav-item:hover {
    background: #4a6cf7;
    border-color: #4a6cf7;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 108, 247, .28);
}
.archive-nav-item:hover i { color: #fff; }
.archive-nav-item:hover em { background: rgba(255,255,255,.22); color: #fff; border-color: transparent; }

/* 月份标题增强 */
.archive-month {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 600;
    color: #1f2937;
    padding-left: 10px;
    border-left: 3px solid #4a6cf7;
    margin-bottom: 14px !important;
    scroll-margin-top: 20px;
}
.archive-month i { color: #4a6cf7; font-size: 15px; }
.archive-month-count {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 400;
    color: #8a94a6;
    background: #f2f5fa;
    padding: 2px 9px;
    border-radius: 10px;
    margin-left: 2px;
}
.archive-group { scroll-margin-top: 16px; }

/* 夜间模式 */
body.dark-mode .archive-nav { border-bottom-color: #2b3142; }
body.dark-mode .archive-nav-item {
    background: #232838;
    border-color: #2f3648;
    color: #a8b1c4;
}
body.dark-mode .archive-nav-item em { background: #1b2030; border-color: #2f3648; color: #8a94a6; }
body.dark-mode .archive-nav-item:hover { background: #4a6cf7; border-color: #4a6cf7; color: #fff; }
body.dark-mode .archive-month-count { background: #232838; color: #8892a6; }

/* ===================== 排行榜页 ===================== */
/* 主列表间距 */
.rank-list { display: flex; flex-direction: column; gap: 10px; }

/* 前三甲奖台 */
.rank-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.podium-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 15px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eef2f6;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.podium-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #c7d2fe, #a5b4fc);
}
.podium-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(74,108,247,.16); }

.podium-1 { background: linear-gradient(160deg, #fffbeb 0%, #fff 62%); border-color: #fde8b8; }
.podium-1::before { background: linear-gradient(90deg, #f6c860, #e8a419); }
.podium-2 { background: linear-gradient(160deg, #f6f8fb 0%, #fff 62%); border-color: #e3e9f2; }
.podium-2::before { background: linear-gradient(90deg, #c3cddd, #96a4ba); }
.podium-3 { background: linear-gradient(160deg, #fdf6f0 0%, #fff 62%); border-color: #f2ddc9; }
.podium-3::before { background: linear-gradient(90deg, #e6b184, #cd8c56); }

.podium-medal {
    position: absolute;
    top: 9px;
    right: 11px;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #b9c4d4;
}
.podium-medal i { font-size: 12px; }
.podium-1 .podium-medal { background: linear-gradient(135deg, #f8cd6b, #e39c12); box-shadow: 0 2px 7px rgba(227,156,18,.4); }
.podium-2 .podium-medal { background: linear-gradient(135deg, #cfd8e5, #98a6ba); }
.podium-3 .podium-medal { background: linear-gradient(135deg, #e8bb95, #c9884f); }

.podium-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #eef2f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.podium-icon img { width: 27px; height: 27px; object-fit: contain; }

.podium-body { min-width: 0; flex: 1; }
.podium-body strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.podium-body p {
    margin: 0;
    font-size: 11.5px;
    color: #98a2b3;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    word-break: break-all;
}
.podium-views {
    font-size: 11.5px;
    color: #8a94a6;
    white-space: nowrap;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.podium-1 .podium-views { color: #c9880f; font-weight: 600; }

/* 名次徽标升级 */
.rank-no {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.rank-no-1 { background: linear-gradient(135deg, #f8cd6b, #e39c12) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(227,156,18,.32); }
.rank-no-2 { background: linear-gradient(135deg, #cfd8e5, #98a6ba) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(152,166,186,.32); }
.rank-no-3 { background: linear-gradient(135deg, #e8bb95, #c9884f) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(201,136,79,.32); }

.rank-item { padding: 11px 14px !important; }
.rank-item .rank-info strong { font-size: 13.5px; }
.rank-item .rank-info p { font-size: 11.5px; color: #98a2b3; }
.rank-item .rank-views {
    font-size: 11.5px;
    color: #8a94a6;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}

/* 前往按钮：内置 SVG，不依赖被裁剪的图标字体 */
.rank-go { flex-shrink: 0; transition: all .18s ease; }
.rank-go svg { display: block; }
.rank-go:hover { transform: translateX(2px); }

/* 夜间模式 */
body.dark-mode .podium-card { background: #1e2433; border-color: #2b3142; }
body.dark-mode .podium-1 { background: linear-gradient(160deg, #2a2618 0%, #1e2433 62%); border-color: #4a3f1d; }
body.dark-mode .podium-2 { background: linear-gradient(160deg, #232936 0%, #1e2433 62%); }
body.dark-mode .podium-3 { background: linear-gradient(160deg, #2a231a 0%, #1e2433 62%); border-color: #443524; }
body.dark-mode .podium-icon { background: #262c3d; border-color: #333a4d; }
body.dark-mode .podium-body strong { color: #e5e9f2; }
body.dark-mode .podium-body p,
body.dark-mode .podium-views { color: #8892a6; }
body.dark-mode .podium-1 .podium-views { color: #f0b429; }
body.dark-mode .rank-item .rank-info p { color: #8892a6; }

@media (max-width: 992px) {
    .rank-podium { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .podium-card { padding: 13px 12px; }
    .podium-icon { width: 38px; height: 38px; border-radius: 9px; }
    .podium-icon img { width: 23px; height: 23px; }
    .rank-list { gap: 8px; }
}

/* ===================== 收费快审页 ===================== */
.page-single-head h1 { display: flex; align-items: center; gap: 9px; }
.page-single-head h1 i { color: #f6a623; font-size: .9em; }

/* 价格卡补充 */
.price-desc {
    margin: 0 0 14px;
    font-size: 12px;
    color: #98a2b3;
    text-align: center;
    line-height: 1.5;
}
.price-card {
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
}
.price-card > ul { flex: 1; margin-bottom: 16px; }
.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(74,108,247,.14);
}
.price-hot { box-shadow: 0 8px 26px rgba(74,108,247,.18); }
.price-hot:hover { box-shadow: 0 18px 40px rgba(74,108,247,.26); }
.price-num { font-variant-numeric: tabular-nums; }

/* 分区标题 */
.fast-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15.5px;
    font-weight: 600;
    color: #1f2937;
    margin: 34px 0 16px;
    padding-left: 11px;
    border-left: 3px solid #4a6cf7;
}
.fast-section-title i { color: #4a6cf7; font-size: 16px; }

/* 办理流程 */
.flow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.flow-step {
    display: flex;
    gap: 11px;
    padding: 15px 14px;
    border-radius: 12px;
    background: #f8fafd;
    border: 1px solid #eef2f6;
    transition: all .2s ease;
}
.flow-step:hover {
    background: #fff;
    border-color: #d9e3ff;
    box-shadow: 0 6px 18px rgba(74,108,247,.1);
}
.flow-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6b8cff, #4a6cf7);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 9px rgba(74,108,247,.3);
}
.flow-body { min-width: 0; }
.flow-body strong {
    display: block;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 4px;
}
.flow-body p {
    margin: 0;
    font-size: 11.5px;
    color: #98a2b3;
    line-height: 1.6;
}

/* 套餐对比表 */
.compare-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #eef2f6;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    min-width: 520px;
}
.compare-table th,
.compare-table td {
    padding: 11px 16px;
    text-align: center;
    border-bottom: 1px solid #f2f5fa;
}
.compare-table th:first-child,
.compare-table td:first-child {
    text-align: left;
    color: #6b7280;
    font-weight: 500;
    background: #fafbfe;
    width: 30%;
}
.compare-table thead th {
    background: #f7f9ff;
    color: #374151;
    font-weight: 600;
    font-size: 12.5px;
    padding: 13px 16px;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: #fafbff; }
.compare-table tbody tr:hover td:first-child { background: #f4f7ff; }
.compare-table .col-hot {
    background: #fdfcff;
    color: #4a6cf7;
    font-weight: 600;
    position: relative;
}
.compare-table thead .col-hot { background: #eef2ff; }
.compare-table .yes { color: #10b981; font-size: 15px; }
.compare-table .no { color: #d3d9e6; font-size: 15px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 9px; }
.faq-item {
    border: 1px solid #eef2f6;
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s;
}
.faq-item[open] { border-color: #d9e3ff; background: #fdfdff; }
.faq-item summary {
    cursor: pointer;
    padding: 13px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #1f2937;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    user-select: none;
    transition: color .18s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 400;
    color: #98a2b3;
    line-height: 1;
    transition: transform .22s ease, color .18s;
}
.faq-item[open] summary::after { content: '−'; color: #4a6cf7; }
.faq-item summary:hover { color: #4a6cf7; }
.faq-item p {
    margin: 0;
    padding: 0 16px 14px;
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.8;
}

/* 底部客服提示 */
.pay-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 26px;
    padding: 14px 18px;
    background: #f7f9ff;
    border: 1px solid #e6ecff;
    border-radius: 11px;
    font-size: 12.5px;
    color: #6b7280;
}
.pay-tip i { color: #4a6cf7; font-size: 15px; }
.pay-tip strong { color: #4a6cf7; }

/* 夜间模式 */
body.dark-mode .fast-section-title { color: #e5e9f2; }
body.dark-mode .price-desc,
body.dark-mode .flow-body p { color: #8892a6; }
body.dark-mode .flow-step { background: #232838; border-color: #2f3648; }
body.dark-mode .flow-step:hover { background: #272d3f; border-color: #3a4560; }
body.dark-mode .flow-body strong { color: #e5e9f2; }
body.dark-mode .compare-wrap { border-color: #2f3648; }
body.dark-mode .compare-table { background: #1e2433; }
body.dark-mode .compare-table th,
body.dark-mode .compare-table td { border-bottom-color: #2b3142; color: #c3cad8; }
body.dark-mode .compare-table thead th { background: #232838; color: #d3dae8; }
body.dark-mode .compare-table th:first-child,
body.dark-mode .compare-table td:first-child { background: #1b2030; color: #98a2b3; }
body.dark-mode .compare-table .col-hot { background: #232a3d; color: #8fa5ff; }
body.dark-mode .compare-table thead .col-hot { background: #2a3350; }
body.dark-mode .compare-table .no { color: #4a5262; }
body.dark-mode .faq-item { background: #1e2433; border-color: #2f3648; }
body.dark-mode .faq-item[open] { background: #212839; border-color: #3a4560; }
body.dark-mode .faq-item summary { color: #e5e9f2; }
body.dark-mode .faq-item p { color: #98a2b3; }
body.dark-mode .pay-tip { background: #232838; border-color: #2f3648; color: #98a2b3; }

@media (max-width: 992px) {
    .flow-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .flow-steps { grid-template-columns: 1fr; }
    .fast-section-title { font-size: 14.5px; margin: 26px 0 13px; }
}

/* ===================== 返回顶部按钮（升级版） ===================== */
.back-to-top {
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border: none !important;
    background: linear-gradient(140deg, #6b8cff 0%, #4a6cf7 55%, #3f5ee0 100%) !important;
    box-shadow: 0 6px 20px rgba(74, 108, 247, .38), 0 2px 6px rgba(74, 108, 247, .22) !important;
    position: fixed;
    overflow: visible;
    isolation: isolate;
}
.back-to-top:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(74, 108, 247, .5), 0 3px 10px rgba(74, 108, 247, .3) !important;
}
.back-to-top:active { transform: translateY(-1px) scale(.96) !important; }
.back-to-top:focus-visible {
    outline: 3px solid rgba(74, 108, 247, .45);
    outline-offset: 3px;
}

/* 滚动进度环：绘制在按钮内侧边缘，白色描边保证在蓝色渐变上有足够对比度 */
.btt-ring {
    position: absolute;
    inset: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 0;
}
.btt-ring-track,
.btt-ring-bar {
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
}
.btt-ring-track { stroke: rgba(255, 255, 255, .26); }
.btt-ring-bar {
    stroke: rgba(255, 255, 255, .95);
    stroke-dasharray: 131.95;
    stroke-dashoffset: 131.95;
    transition: stroke-dashoffset .12s linear, stroke .2s;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .55));
}
.back-to-top:hover .btt-ring-bar { stroke: #fff; }

/* 箭头图标 */
.btt-arrow {
    width: 21px;
    height: 21px;
    position: relative;
    z-index: 1;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.back-to-top:hover .btt-arrow { transform: translateY(-2px); }

/* 夜间模式 */
body.dark-mode .back-to-top {
    background: linear-gradient(140deg, #5b7cff 0%, #4a6cf7 55%, #3a56cc 100%) !important;
    box-shadow: 0 6px 22px rgba(74, 108, 247, .3), 0 0 0 1px rgba(122, 148, 255, .18) !important;
}
body.dark-mode .btt-ring-track { stroke: rgba(255, 255, 255, .22); }
body.dark-mode .btt-ring-bar { stroke: rgba(255, 255, 255, .92); }

@media (max-width: 768px) {
    .back-to-top {
        width: 44px !important;
        height: 44px !important;
        bottom: 18px !important;
        right: 16px !important;
    }
    .btt-arrow { width: 18px; height: 18px; }
}

/* ===================== 侧栏折叠按钮（升级版） ===================== */
.sidebar-toggle {
    width: 32px !important;
    height: 32px !important;
    background: #fff !important;
    border: 1px solid #e2e8f5 !important;
    color: #5b6478 !important;
    box-shadow: 0 2px 8px rgba(24, 39, 75, .1) !important;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s !important;
    overflow: hidden;
}
.sidebar-toggle svg {
    width: 15px;
    height: 15px;
    display: block;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.sidebar-toggle:hover {
    background: #4a6cf7 !important;
    border-color: #4a6cf7 !important;
    color: #fff !important;
    box-shadow: 0 5px 16px rgba(74, 108, 247, .4) !important;
    transform: translateX(-50%) scale(1.08) !important;
}
.sidebar-toggle:active {
    transform: translateX(-50%) scale(.94) !important;
}
.sidebar-toggle:focus-visible {
    outline: 3px solid rgba(74, 108, 247, .4);
    outline-offset: 2px;
}
/* 折叠态：箭头翻转 180° */
.main-sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

/* 夜间模式 */
body.dark-mode .sidebar-toggle {
    background: #232a3d !important;
    border-color: #333d55 !important;
    color: #9aa6bf !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important;
}
body.dark-mode .sidebar-toggle:hover {
    background: #4a6cf7 !important;
    border-color: #4a6cf7 !important;
    color: #fff !important;
    box-shadow: 0 5px 18px rgba(74, 108, 247, .45) !important;
}

@media (max-width: 768px) {
    .sidebar-toggle { width: 30px !important; height: 30px !important; }
    .sidebar-toggle svg { width: 14px; height: 14px; }
}

/* ===================== 站点卡片网格（全站统一：固定宽度 + 换行） ===================== */
/* app.css 把所有 .content-item-urls 定成 repeat(7, 1fr)（≥1025px），
   1074px 容器下每列仅 143px，减去 32px 图标 + 间距后文字区只剩 39px，
   站名被截断成「星...」「重...」，推荐资源 / 最新收录 / 分类页 / 归档页全部中招。
   这里统一改成「固定列宽 + auto-fill」：容器变窄时换行，卡片尺寸恒定不缩放。 */
.content-item-urls {
    grid-template-columns: repeat(auto-fill, 168px) !important;
    justify-content: start !important;
    gap: 12px !important;
}

/* 单卡宽度锁定，避免网格拉伸时被匀开 */
.content-item-urls .content-urls-card {
    width: 168px !important;
    min-width: 0 !important;
    max-width: 168px !important;
}

/* 名称放开单行省略，允许两行显示 */
.content-item-urls .content-url-info strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: clip !important;
    word-break: break-word;
}

@media (max-width: 768px) {
    .content-item-urls {
        grid-template-columns: repeat(auto-fill, 160px) !important;
        gap: 8px !important;
    }
    .content-item-urls .content-urls-card {
        width: 160px !important;
        max-width: 160px !important;
    }
}
@media (max-width: 420px) {
    .content-item-urls {
        grid-template-columns: repeat(auto-fill, 150px) !important;
        gap: 6px !important;
    }
    .content-item-urls .content-urls-card {
        width: 150px !important;
        max-width: 150px !important;
    }
}

/* ===================== 归档页网格（独立列数） ===================== */
/* 归档页复用了分类页的 .content-item-urls，历史 7 列在 845px 可用宽度下每列仅约 110px，
   文字区只剩 ~50px，站名被截断成「全球领…」「搜狗搜…」，可读性极差。 */
/* 关键：归档页的列宽必须和卡片宽度同步改，且 min-width 不能大于列宽。
   曾出现 grid 列 200px、卡片 min-width 220px（来自通用 .content-item-urls
   的 220px 规则），卡片溢出 20px 压到相邻卡片上，视觉上「都连起来了」。 */
.archive-group .content-item-urls {
    gap: 10px !important;
    justify-content: start !important;
}
@media (min-width: 1200px) {
    .archive-group .content-item-urls {
        grid-template-columns: repeat(auto-fill, 200px) !important;
    }
    .archive-group .content-item-urls .content-urls-card {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}
@media (min-width: 1025px) and (max-width: 1199px) {
    .archive-group .content-item-urls {
        grid-template-columns: repeat(auto-fill, 190px) !important;
    }
    .archive-group .content-item-urls .content-urls-card {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .archive-group .content-item-urls {
        grid-template-columns: repeat(auto-fill, 180px) !important;
    }
    .archive-group .content-item-urls .content-urls-card {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
}
@media (max-width: 768px) {
    .archive-group .content-item-urls {
        grid-template-columns: repeat(auto-fill, 168px) !important;
        gap: 8px !important;
    }
    .archive-group .content-item-urls .content-urls-card {
        width: 168px !important;
        min-width: 168px !important;
        max-width: 168px !important;
    }
}
@media (max-width: 420px) {
    .archive-group .content-item-urls {
        grid-template-columns: repeat(auto-fill, 156px) !important;
        gap: 7px !important;
    }
    .archive-group .content-item-urls .content-urls-card {
        width: 156px !important;
        min-width: 156px !important;
        max-width: 156px !important;
    }
}

/* 归档卡片：图标缩小一档，把横向空间让给站名 */
.archive-group .content-urls-card {
    padding: 9px 11px !important;
    min-height: 54px !important;
}
.archive-group .content-url-img {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
}
.archive-group .content-url-info {
    min-width: 0 !important;
}
.archive-group .content-url-info strong {
    font-size: 13px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.4 !important;
}
.archive-group .content-url-info p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 2px 0 0 !important;
    color: #98a2b3 !important;
}
@media (max-width: 768px) {
    .archive-group .content-url-info strong { font-size: 12.5px !important; }
    .archive-group .content-url-info p { font-size: 11px !important; }
    /* 全局规则在窄屏隐藏了描述与前往图标，归档页 2 列仍有空间，恢复显示 */
    .archive-group .content-url-info p { display: block !important; }
    .archive-group .content-urls-card { padding: 8px 9px !important; }
    .archive-group .content-url-img { width: 26px !important; height: 26px !important; }
}

/* 月份标题条：与下方网格视觉对齐 */
.archive-month {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 11px !important;
}
.archive-month span {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}
body.dark-mode .archive-month span { color: #e5e9f2 !important; }

/* ===================== 最新收录卡片：固定宽度 + 自动换行 ===================== */
/* 原实现用 grid repeat(N,1fr)，屏幕变窄时卡片被等比压缩（200px → 177px → 156px），
   站名可用宽度随之缩水、em 标签挤在一起。这里改为 auto-fill + 固定最小宽度，
   容器变窄时「换行」而非「缩小卡片」：
   - PC 每张 190px，窄屏降到 164px，手机 2 列均分但仍受 min-width 保护
   - 卡片内部元素尺寸全部锁定，不再随容器变化 */
.latest-grid {
    display: grid !important;
    /* auto-fill + minmax 保证卡片宽度恒为 [min, min+gap]，不会被拉伸/压缩 */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 12px !important;
    padding: 4px 0 !important;
}

/* 桌面端：卡片宽度锁定 190px 档位，容器再宽也不会把单张卡片拉长 */
@media (min-width: 993px) {
    .latest-grid {
        grid-template-columns: repeat(auto-fill, 190px) !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    .latest-card { width: 190px !important; }
}

/* 平板：固定 164px 档位 */
@media (min-width: 769px) and (max-width: 992px) {
    .latest-grid {
        grid-template-columns: repeat(auto-fill, 164px) !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }
    .latest-card { width: 164px !important; }
}

/* 手机：同样锁定卡片宽度，容器不够就换行（而非压缩卡片）
   360px 容器可容 2 张 164px；320px 容器会自动降为 1 列，绝不横向溢出 */
@media (max-width: 768px) {
    .latest-grid {
        grid-template-columns: repeat(auto-fill, 164px) !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    .latest-card {
        width: 164px !important;
        min-height: 58px !important;
        padding: 10px 24px 10px 10px !important;
    }
    /* 原规则会在手机上隐藏第 7 项以后，导致"最近点入"只剩 6 个，这里取消 */
    .latest-card:nth-child(n+7) { display: flex !important; }
    .latest-icon { width: 32px !important; height: 32px !important; }
    .latest-name { font-size: 12.5px !important; }
}
@media (max-width: 420px) {
    .latest-grid {
        grid-template-columns: repeat(auto-fill, 152px) !important;
        gap: 7px !important;
    }
    .latest-card { width: 152px !important; min-height: 54px !important; padding: 9px 20px 9px 9px !important; }
    .latest-icon { width: 28px !important; height: 28px !important; }
    .latest-name { font-size: 12px !important; }
}

/* 卡片内部尺寸锁定：任何断点下都不压缩图标与文字基线 */
.latest-card { flex-shrink: 0 !important; }
.latest-icon { flex: 0 0 auto !important; }
.latest-info { min-width: 0 !important; }

/* ===================== 首页「常用工具」三 tab 卡片（结构化版） ===================== */
/* 原 .ai-tool-card 只有图标 + 单行 span，接入 user 数据后需要「名称 + 描述」两行结构，
   这里补充 .ai-tool-info / .ai-tool-name / .ai-tool-desc，并放宽卡片宽度。
   注意：app.css 里 .ai-tools-grid 是 display:flex !important + flex-wrap:nowrap !important
   （横向滚动条样式），会把卡片压到 78px。这里必须用 !important 反向覆盖成网格，
   并采用「固定列宽 + auto-fill」——容器变窄时换行，卡片尺寸恒定不缩放。 */
.ai-tools-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 190px) !important;
    justify-content: start !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 4px 0 !important;
    scrollbar-width: none;
}
.ai-tools-grid::-webkit-scrollbar { display: none; }

.ai-tool-card {
    width: 190px !important;
    min-width: 0 !important;
    max-width: 190px !important;
    padding: 10px 12px !important;
    gap: 9px !important;
    align-items: center !important;
    white-space: normal !important;
}
.ai-tool-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-tool-icon img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.ai-tool-info { flex: 1; min-width: 0; overflow: hidden; }
.ai-tool-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}
.ai-tool-desc {
    font-size: 10.5px;
    color: #a0aec0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    line-height: 1.35;
}
.ai-tool-card:hover .ai-tool-name { color: #4a6cf7; }

.ai-tools-empty {
    padding: 26px 16px;
    width: 100%;
    text-align: center;
    font-size: 12.5px;
    color: #a0aec0;
    background: #f8fafd;
    border: 1px dashed #e2e9f2;
    border-radius: 10px;
}
.ai-tools-empty a { color: #4a6cf7; font-weight: 600; text-decoration: none; }

body.dark-mode .ai-tool-icon { background: #16213e; border-color: #2a3a5a; }
body.dark-mode .ai-tool-name { color: #e2e8f0; }
body.dark-mode .ai-tool-desc { color: #7b8698; }
body.dark-mode .ai-tools-empty { background: #1e2433; border-color: #2f3648; color: #8892a6; }

@media (max-width: 768px) {
    .ai-tools-grid { grid-template-columns: repeat(auto-fill, 160px) !important; gap: 10px !important; }
    .ai-tool-card { width: 160px !important; max-width: 160px !important; padding: 9px 10px !important; }
    .ai-tool-icon { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; }
    .ai-tool-name { font-size: 12px; }
    .ai-tool-desc { font-size: 10px; }
}
@media (max-width: 400px) {
    .ai-tools-grid { grid-template-columns: repeat(auto-fill, 148px) !important; gap: 8px !important; }
    .ai-tool-card { width: 148px !important; max-width: 148px !important; }
}

/* ===================== 顶部导航：已登录用户菜单 ===================== */
.nav-user-box { position: relative; display: inline-flex; }
.user-nav-login.is-logged {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 昵称本身承担省略号，胶囊容器只做裁剪兜底 */
.user-nav-login.is-logged .nav-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user-drop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 168px;
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .13);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 60;
}
.nav-user-box:hover .nav-user-drop,
.nav-user-box:focus-within .nav-user-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-user-drop a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 12.5px;
    color: #4a5568;
    text-decoration: none;
    transition: background .16s, color .16s;
    white-space: nowrap;
}
.nav-user-drop a:hover { background: #f3f6fc; color: #4a6cf7; }
.nav-user-drop a i { font-size: 14px; color: #98a2b3; }
.nav-user-drop a:hover i { color: #4a6cf7; }
.nav-user-sep { display: block; height: 1px; background: #f1f4f9; margin: 5px 6px; }
.nav-user-drop .nav-user-out { color: #e5484d; }
.nav-user-drop .nav-user-out:hover { background: #fef2f2; color: #e5484d; }
.nav-user-drop .nav-user-out i { color: #e5484d; }

body.dark-mode .nav-user-drop { background: #1e2433; border-color: #2f3648; box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
body.dark-mode .nav-user-drop a { color: #c3cad8; }
body.dark-mode .nav-user-drop a:hover { background: #272d3f; color: #8fa5ff; }
body.dark-mode .nav-user-drop a i { color: #7b8698; }
body.dark-mode .nav-user-drop a:hover i { color: #8fa5ff; }
body.dark-mode .nav-user-sep { background: #2b3142; }
body.dark-mode .nav-user-drop .nav-user-out { color: #ff7b7f; }
body.dark-mode .nav-user-drop .nav-user-out:hover { background: #2e1f26; }

/* ===================== 侧栏：可展开子菜单（网站提交 → 申请收录 / 收费快审） ===================== */
.dh-item-has-sub > .dh-sub-toggle {
    position: relative;
}
.dh-item-has-sub .dh-sub-arrow {
    margin-left: auto;
    font-size: 15px;
    color: #b0b8c6;
    transition: transform 0.25s ease;
    flex: 0 0 auto;
}
.dh-item-has-sub.sub-open .dh-sub-arrow {
    transform: rotate(180deg);
    color: #4a6cf7;
}

/* 子菜单容器：默认收起（height 0），展开时按内容高度过渡 */
.dh-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.26s ease, opacity 0.2s ease;
}
.dh-item-has-sub.sub-open > .dh-submenu {
    max-height: 120px;
    opacity: 1;
}

.dh-submenu li a {
    display: flex !important;
    align-items: center;
    padding: 7px 24px 7px 52px !important;
    font-size: 13px !important;
    color: #6b7280;
    border-left: 3px solid transparent;
    margin: 1px 0;
}
.dh-submenu li a:hover,
.dh-submenu li a.on {
    background: #f0f5ff;
    color: #4a6cf7;
    border-left-color: transparent;
}
.dh-sub-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cbd5e0;
    margin-right: 10px;
    flex: 0 0 5px;
    transition: background 0.15s, transform 0.15s;
}
.dh-submenu li a:hover .dh-sub-dot,
.dh-submenu li a.on .dh-sub-dot {
    background: #4a6cf7;
    transform: scale(1.3);
}

/* 折叠态：子项一并隐藏，父项只留图标 */
.main-sidebar.collapsed .dh-submenu {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}
.main-sidebar.collapsed .dh-item-has-sub .dh-sub-arrow { display: none; }

/* 暗色模式 */
body.dark-mode .dh-item-has-sub .dh-sub-arrow { color: #5a6478; }
body.dark-mode .dh-item-has-sub.sub-open .dh-sub-arrow { color: #8fa5ff; }
body.dark-mode .dh-submenu li a { color: #8892a6; }
body.dark-mode .dh-submenu li a:hover,
body.dark-mode .dh-submenu li a.on { background: #1e2433; color: #8fa5ff; }
body.dark-mode .dh-sub-dot { background: #3d4557; }
body.dark-mode .dh-submenu li a:hover .dh-sub-dot,
body.dark-mode .dh-submenu li a.on .dh-sub-dot { background: #8fa5ff; }

/* ===================== 排行榜页：标题图标与「加载更多」 ===================== */
/* 标题：原用 FontAwesome .fa-line-chart，字形偏细且带 v4 兼容层，宽高不稳。
   改用内联 SVG 柱状图，固定尺寸 + 渐变底衬，视觉更稳。 */
/* app.css 把 .category-header 定成 padding: 0 0 16px !important + 2px 底边线，
   在 body.category-page 下又强制 background: transparent + border-bottom: none。
   结果：图标 38px 直接顶到卡片上边缘（被圆角裁掉）、标题下方 16px 空白，
   底边线还横穿卡片圆角。这里恢复上下左右一致的内边距，去掉多余底边线。 */
body.page-ranking .category-header,
body.category-page.page-ranking .category-header {
    padding: 4px 4px 16px !important;
    border-bottom: none !important;
    margin-bottom: 12px !important;
}
.page-ranking .category-header h1 {
    gap: 12px !important;
}
.rank-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(74,108,247,.14), rgba(124,58,237,.14));
    color: #4a6cf7;
}
.rank-head-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}
.rank-head-text {
    line-height: 1.1;
    white-space: nowrap;
}

/* 分批显示：隐藏项不占位 */
.rank-item[hidden] { display: none !important; }
.rank-more-btn[hidden],
.rank-more-done[hidden] { display: none !important; }
.rank-item-in { animation: rankItemIn .32s ease both; }
@keyframes rankItemIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 「点击加载更多」按钮 */
.rank-more-wrap {
    display: flex;
    justify-content: center;
    padding: 20px 0 8px;
}
.rank-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 26px;
    border-radius: 30px;
    border: 1px solid #dfe6f2;
    background: #fff;
    color: #4a6cf7;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 2px 10px rgba(74,108,247,.08);
}
.rank-more-btn:hover {
    background: #f5f8ff;
    border-color: #b9c9f5;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(74,108,247,.16);
}
.rank-more-btn:active { transform: translateY(0); }
.rank-more-count {
    font-size: 11.5px;
    font-weight: 500;
    color: #98a2b3;
}
.rank-more-icon {
    font-size: 16px;
    transition: transform .2s ease;
}
.rank-more-btn:hover .rank-more-icon { transform: translateY(2px); }

.rank-more-done {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #98a2b3;
    padding: 10px 0;
}
.rank-more-done i { font-size: 15px; color: #34c759; }

/* 暗色模式 */
body.dark-mode .rank-head-icon {
    background: linear-gradient(135deg, rgba(143,165,255,.16), rgba(168,85,247,.16));
    color: #8fa5ff;
}
body.dark-mode .rank-more-btn {
    background: #1e2433;
    border-color: #2f3648;
    color: #8fa5ff;
    box-shadow: none;
}
body.dark-mode .rank-more-btn:hover { background: #242b3d; border-color: #3d4557; }
body.dark-mode .rank-more-count { color: #6b7688; }
body.dark-mode .rank-more-done { color: #6b7688; }

/* ===================== 详情页「同类站点推荐」：卡片尺寸恒定 ===================== */
/* app.css 的移动端规则会压缩站点卡片：≤768px 隐藏描述与「前往」按钮、
   图标 42→24px、字号 14→12px；≤420px 图标再降到 20px、字号 11px，
   导致同一张卡片在 1440 下高 84px、在 390 下只剩 42px，内容被抽掉一半。
   这里把详情页的同类推荐卡片锁成固定尺寸，任何视口下结构一致，仅换行。
   同时把卡片放大一档（190×66 → 224×78）。取 224 而不是更大，
   是因为详情页容器约 950px，224×4 + 14×3 = 938 刚好排下 4 张；
   取 236 只能排 3 张（236×4+42=986 溢出），recommend 数量在 2~11
   之间浮动时就会留下半行空白。 */
.site-detail-wrap .content-item-urls {
    grid-template-columns: repeat(auto-fill, 224px) !important;
    gap: 14px !important;
    justify-content: center !important;
}
.site-detail-wrap .content-item-urls .content-urls-card {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: auto !important;
    min-height: 78px !important;
    padding: 13px 14px !important;
    box-sizing: border-box;
}
/* 图标固定 42px，不再随断点缩小 */
.site-detail-wrap .content-item-urls .content-url-img,
.site-detail-wrap .content-item-urls .content-url-img img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 10px;
}
/* 名称与描述在任何视口都保留，字号不缩 */
.site-detail-wrap .content-item-urls .content-url-info strong {
    font-size: 14.5px !important;
    line-height: 1.35 !important;
}
.site-detail-wrap .content-item-urls .content-url-info p {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 3px 0 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 「前往」按钮恢复显示 */
.site-detail-wrap .content-item-urls .content-url-togo {
    display: flex !important;
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
}
.site-detail-wrap .content-item-urls .content-url-togo svg {
    width: 15px !important;
    height: 15px !important;
}
.site-detail-wrap .content-item-urls .content-urls-body { gap: 8px !important; }
.site-detail-wrap .content-item-urls .content-card-body { gap: 9px !important; }

/* 详情页同类推荐：小屏回退为自适应列宽，避免固定 236px 在窄屏溢出 */
@media (max-width: 1024px) {
    .site-detail-wrap .content-item-urls {
        grid-template-columns: repeat(auto-fill, 208px) !important;
        gap: 12px !important;
    }
    .site-detail-wrap .content-item-urls .content-urls-card {
        width: 208px !important;
        min-width: 208px !important;
        max-width: 208px !important;
        min-height: 72px !important;
        padding: 11px 12px !important;
    }
}
@media (max-width: 768px) {
    .site-detail-wrap .content-item-urls {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .site-detail-wrap .content-item-urls .content-urls-card {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 70px !important;
        padding: 10px 11px !important;
    }
    .site-detail-wrap .content-item-urls .content-url-img,
    .site-detail-wrap .content-item-urls .content-url-img img {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex: 0 0 36px !important;
    }
    .site-detail-wrap .content-item-urls .content-url-info strong { font-size: 13.5px !important; }
    .site-detail-wrap .content-item-urls .content-url-info p { font-size: 11.5px !important; }
}

/* ===================== 首页二级分类 tab + 卡片加宽 ===================== */
/* 1) 面板显隐：app.css 只给了 .home-group-item 深色背景，没有 display 规则，
      不加下面两条会导致所有子分类的站点一次性全部堆出来。 */
.home-group-content .home-group-item { display: none; }
.home-group-content .home-group-item.active { display: block; }
.home-group-item.group-fade { animation: groupFade .28s ease both; }
@keyframes groupFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 2) 卡片加宽：168 → 220（推荐资源 / 分类区块共用 .content-item-urls）。
      用固定列宽 + auto-fill，容器变窄时换行而不压缩卡片。
      justify-content 必须是 start：卡片要贴面板左边缘，与标题左对齐；
      「左右留白对称」由 main.js 收窄 .dh-content 宽度 + margin auto 实现，
      不靠网格内部居中（那会让不同列数的区块左边界互相对不上）。 */
.content-item-urls {
    grid-template-columns: repeat(auto-fill, 220px) !important;
    gap: 12px !important;
    justify-content: start !important;
}
.content-item-urls .content-urls-card {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
}
/* 卡片变宽后，站名可以放宽到单行不省略，描述保持两行内截断 */
.content-item-urls .content-url-info strong {
    -webkit-line-clamp: 1;
    font-size: 14px !important;
}
.content-item-urls .content-url-info p {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* 2.1) 锁死卡片高度体系。
       app.css 在窄屏（≤768 / ≤420）把图标 42→24→20px、togo 改 display:none、
       padding 8px10px→6px8px，卡片高度会从 60px 塌到 42px —— 这正是
       「卡片不能因为屏幕尺寸就缩放」要避免的。这里只让宽度随断点适配，
       高度相关的内边距 / 图标 / 跳转箭头一律锁定。 */
.content-item-urls .content-urls-card {
    min-height: 60px !important;
    padding: 8px 8px !important;
}
.content-item-urls .content-url-img,
.content-item-urls .content-url-img img {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    object-fit: contain;
}
.content-item-urls .content-url-togo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
}
.content-item-urls .content-url-togo svg {
    width: 13px !important;
    height: 13px !important;
}
.content-item-urls .content-card-body { gap: 8px !important; }
.content-item-urls .content-urls-body { gap: 4px !important; }

@media (max-width: 1024px) {
    .content-item-urls { grid-template-columns: repeat(auto-fill, 200px) !important; }
    .content-item-urls .content-urls-card { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }
}
@media (max-width: 768px) {
    /* 手机上用两列等宽铺满，比固定 168px 更能利用空间，高度体系仍锁 60px */
    .content-item-urls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    .content-item-urls .content-urls-card {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 60px !important;
        padding: 8px 9px !important;
    }
    .content-item-urls .content-url-info p { display: block !important; }
    .content-item-urls .content-url-img,
    .content-item-urls .content-url-img img {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }
    .content-item-urls .content-url-togo { flex: 0 0 22px; }
}
@media (max-width: 420px) {
    .content-item-urls { gap: 7px !important; }
    .content-item-urls .content-urls-card { padding: 8px 8px !important; }
    .content-item-urls .content-url-info strong { font-size: 13px !important; }
    .content-item-urls .content-url-info p { font-size: 11px !important; }
}

/* 3) tab 条：与标题同一行，超出可横向滚动（移动端）
      改成分段控件（segment）：按钮连成一段，不再是各自独立的胶囊。
      与首页「常用工具」的 .ai-tabs 保持同一套视觉语言。 */
.content-item-head-left .home-group-tabs {
    max-width: 100%;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 3px !important;
    border: 1px solid #e8edf5 !important;
    border-radius: 10px !important;
    background: #f5f7fb !important;
    flex-wrap: nowrap !important;
}
/* 提高选择器深度压过 app.css 的 .home-group-tab { background:#edf2f7; border-radius:20px } */
.home-group-tabs .home-group-tab {
    position: relative;
    padding: 3px 14px !important;
    border-radius: 7px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color .18s ease, background .18s ease !important;
}
/* 非首个按钮左侧分隔线；激活项及其后一项不画线，避免白块两侧出现断口 */
.home-group-tab:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: #dde4ef;
}
.home-group-tab.active,
.home-group-tabs .home-group-tab.active {
    background: #ffffff !important;
    color: #4a6cf7 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(23, 43, 99, .10), 0 0 0 1px rgba(74, 108, 247, .14) !important;
    transform: none !important;
}
.home-group-tab.active::before,
.home-group-tab.active + .home-group-tab::before { opacity: 0; }
/* 旧的激活下划线（白色小横条）在分段控件里会突兀，去掉 */
.home-group-tab.active::after { display: none !important; }
/* 悬停只是变深文字，不再有位移与背景块，避免破坏「连成一整段」的观感 */
.home-group-tabs .home-group-tab:hover {
    background: rgba(255, 255, 255, .65) !important;
    color: #334155 !important;
    transform: none !important;
}

/* 窄屏：app.css 在 ≤768 把 tab 改回独立胶囊（padding 1px 10px、radius 16px、
   gap 3px 4px）并让容器横向滚动，会破坏分段控件。这里重新压回连体形态。 */
@media (max-width: 768px) {
    .content-item-head-left .home-group-tabs {
        gap: 0 !important;
        padding: 2px !important;
        border-radius: 9px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .content-item-head-left .home-group-tabs::-webkit-scrollbar { display: none !important; }
    .home-group-tabs .home-group-tab {
        padding: 2px 10px !important;
        font-size: 11.5px !important;
        border-radius: 7px !important;
        flex: 0 0 auto !important;
    }
}



/* 暗色模式 tab（分段控件）
   注意：app.css:4887~4895 有一组优先级更高的
   body.dark-mode .home-group-tabs .home-group-tab[...] —— 必须同样深度才能覆盖 */
body.dark-mode .content-item-head-left .home-group-tabs {
    background: #1b2333 !important;
    border-color: #2a3446 !important;
}
body.dark-mode .home-group-tab,
body.dark-mode .home-group-tabs .home-group-tab {
    background: transparent !important;
    color: #98a3b5 !important;
}
body.dark-mode .home-group-tab:not(:first-child)::before {
    background: #333e52;
}
body.dark-mode .home-group-tab:hover,
body.dark-mode .home-group-tabs .home-group-tab:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #e2e8f0 !important;
}
body.dark-mode .home-group-tab.active,
body.dark-mode .home-group-tabs .home-group-tab.active {
    background: #2b3752 !important;
    color: #93b4ff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35), 0 0 0 1px rgba(74, 108, 247, .3) !important;
}

/* ============================================================
   二级分类筛选条（分类页 /sort/:id.html）
   ============================================================ */
.sort-subtabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.sort-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 13px;
    line-height: 1.4;
    color: #5a6578;
    background: #f1f5f9;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .2s ease;
    white-space: nowrap;
}
.sort-subtab:hover {
    background: #e6ecf5;
    color: #4a6cf7;
}
.sort-subtab.active {
    color: #fff;
    background: #4a6cf7;
    border-color: #4a6cf7;
    box-shadow: 0 4px 12px rgba(74, 108, 247, .22);
}
.sort-subtab-num {
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .06);
    color: inherit;
    opacity: .8;
}
.sort-subtab.active .sort-subtab-num {
    background: rgba(255, 255, 255, .25);
    opacity: 1;
}

/* 暗色模式 */
body.dark-mode .sort-subtab {
    background: #232a3b;
    color: #a8b2c4;
}
body.dark-mode .sort-subtab:hover {
    background: #2b3448;
    color: #e2e8f0;
}
body.dark-mode .sort-subtab.active {
    background: #4a6cf7;
    color: #fff;
}
body.dark-mode .sort-subtab-num { background: rgba(255, 255, 255, .1); }

@media (max-width: 768px) {
    .sort-subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 7px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sort-subtabs::-webkit-scrollbar { display: none; }
    .sort-subtab { padding: 5px 12px; font-size: 12.5px; }
}

/* ============================================================
   顶部导航：头像 + 昵称下拉（登录后）
   ============================================================ */
.nav-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 24px;
    background: linear-gradient(135deg, #4a6cf7, #7c8fff);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
.nav-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nav-user-avatar-text {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}
.nav-user-avatar-lg {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}
.nav-user-avatar-lg .nav-user-avatar-text { font-size: 15px; }

.nav-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 76px;
}
.nav-user-arrow {
    font-size: 14px;
    color: #98a2b3;
    transition: transform .2s ease;
    flex: 0 0 auto;
}
.nav-user-box:hover .nav-user-arrow { transform: rotate(180deg); }

/* 下拉头部：大头像 + 昵称 + 账号 */
.nav-user-drop-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 10px;
}
.nav-user-drop-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nav-user-drop-info strong {
    font-size: 13px;
    font-weight: 600;
    color: #1a202c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user-drop-info span {
    font-size: 11.5px;
    color: #98a2b3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user-drop { min-width: 188px; }
.nav-user-drop .nav-user-pwd { color: #4a5568; }

body.dark-mode .nav-user-drop-info strong { color: #e2e8f0; }
body.dark-mode .nav-user-drop-info span { color: #7b8698; }
body.dark-mode .nav-user-arrow { color: #7b8698; }
body.dark-mode .nav-user-drop .nav-user-pwd { color: #c3cad8; }

/* ============================================================
   修改密码弹窗
   ============================================================ */
.nav-pwd-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.nav-pwd-mask.is-open { opacity: 1; visibility: visible; }
.nav-pwd-modal {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
    padding: 22px 22px 18px;
    transform: translateY(10px) scale(.98);
    transition: transform .22s cubic-bezier(.25, .46, .45, .94);
}
.nav-pwd-mask.is-open .nav-pwd-modal { transform: translateY(0) scale(1); }
.nav-pwd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.nav-pwd-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}
.nav-pwd-head h3 i { color: #4a6cf7; font-size: 17px; }
.nav-pwd-close {
    border: none;
    background: transparent;
    color: #98a2b3;
    font-size: 19px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .16s, color .16s;
}
.nav-pwd-close:hover { background: #f1f4f9; color: #4a5568; }

.nav-pwd-field { margin-bottom: 13px; }
.nav-pwd-field label {
    display: block;
    font-size: 12.5px;
    color: #5a6578;
    margin-bottom: 6px;
    font-weight: 500;
}
.nav-pwd-field input {
    width: 100%;
    height: 38px;
    border: 1px solid #e3e9f2;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 13px;
    color: #1a202c;
    background: #fbfcfe;
    outline: none;
    transition: border-color .16s, box-shadow .16s, background .16s;
    box-sizing: border-box;
}
.nav-pwd-field input:focus {
    border-color: #4a6cf7;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .12);
}
.nav-pwd-tip {
    font-size: 12px;
    min-height: 17px;
    margin: -3px 0 10px;
    color: #e5484d;
}
.nav-pwd-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.nav-pwd-actions button {
    flex: 1;
    height: 38px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .16s;
}
.nav-pwd-cancel {
    background: #f4f6fa;
    color: #5a6578;
    border-color: #e8edf5 !important;
}
.nav-pwd-cancel:hover { background: #eaeff7; color: #3d4658; }
.nav-pwd-submit {
    background: #4a6cf7;
    color: #fff;
    box-shadow: 0 4px 14px rgba(74, 108, 247, .26);
}
.nav-pwd-submit:hover { background: #3d5be0; }
.nav-pwd-submit:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; }

body.dark-mode .nav-pwd-modal { background: #1e2433; }
body.dark-mode .nav-pwd-head h3 { color: #e2e8f0; }
body.dark-mode .nav-pwd-close { color: #7b8698; }
body.dark-mode .nav-pwd-close:hover { background: #272d3f; color: #c3cad8; }
body.dark-mode .nav-pwd-field label { color: #a8b2c4; }
body.dark-mode .nav-pwd-field input {
    background: #232a3b;
    border-color: #2f3648;
    color: #e2e8f0;
}
body.dark-mode .nav-pwd-field input:focus {
    background: #262e40;
    border-color: #4a6cf7;
}
body.dark-mode .nav-pwd-cancel { background: #232a3b; color: #a8b2c4; border-color: #2f3648 !important; }
body.dark-mode .nav-pwd-cancel:hover { background: #2b3448; color: #e2e8f0; }

@media (max-width: 480px) {
    .nav-user-name { max-width: 54px; }
    .nav-pwd-modal { padding: 18px 16px 14px; }
}

/* ============================================================
   右下角浮动操作区：夜间模式切换（上）+ 返回顶部（下）
   ------------------------------------------------------------
   说明：原 .back-to-top 自身是 position:fixed（bottom:30px right:30px），
   这里外包一层 flex 容器统一管定位，内部按钮改为 static 参与布局，
   避免两个 fixed 元素各自定位后重叠/错位。
   ============================================================ */
.float-actions {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* 夜间模式浮动按钮：与返回顶部同尺寸同视觉口径 */
.float-actions .theme-toggle.float-theme {
    position: static !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #5a6578 !important;
    font-size: 21px !important;
    border: 1px solid #e8edf5 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .12) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.25, .46, .45, .94), box-shadow .25s, background .25s, color .25s !important;
    flex-shrink: 0;
}
.float-actions .theme-toggle.float-theme:hover {
    background: #4a6cf7 !important;
    color: #fff !important;
    border-color: #4a6cf7 !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(74, 108, 247, .34) !important;
}
.float-actions .theme-toggle.float-theme:active {
    transform: translateY(-1px) scale(.96);
}
/* 图标轻微旋转，和返回顶部的动效语气一致 */
.float-actions .theme-toggle.float-theme i {
    line-height: 1;
    transition: transform .3s ease;
}
.float-actions .theme-toggle.float-theme:hover i { transform: rotate(-18deg); }
body.dark-mode .float-actions .theme-toggle.float-theme:hover i { transform: rotate(18deg); }

body.dark-mode .float-actions .theme-toggle.float-theme {
    background: #232a3b !important;
    color: #a8b2c4 !important;
    border-color: #2f3648 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .34) !important;
}
body.dark-mode .float-actions .theme-toggle.float-theme:hover {
    background: #4a6cf7 !important;
    color: #fff !important;
    border-color: #4a6cf7 !important;
}

/* 容器内的返回顶部：取消自身 fixed，交给父容器定位 */
.float-actions .back-to-top {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .float-actions {
        right: 16px;
        bottom: 16px;
        gap: 10px;
    }
    .float-actions .theme-toggle.float-theme {
        width: 44px !important;
        height: 44px !important;
        font-size: 19px !important;
    }
}
@media (max-width: 420px) {
    .float-actions { right: 12px; bottom: 12px; gap: 9px; }
    .float-actions .theme-toggle.float-theme,
    .float-actions .back-to-top {
        width: 44px !important;
        height: 44px !important;
    }
    .float-actions .theme-toggle.float-theme { font-size: 18px !important; }
}

/* ============================================================
   顶部导航右侧：登录 / 头像下拉 固定到最右端
   ------------------------------------------------------------
   app.css 给 .header-nav-top-inner 设了 justify-content: center，
   菜单居中后右侧项只能跟在菜单后面（实测距右边缘 406px）。
   这里给容器加 relative，右侧区 absolute 贴右，菜单保持原居中不动。
   ============================================================ */
.header-nav-top-inner {
    position: relative;
}
.header-nav-right {
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

/* 窄屏：顶部导航是横向滚动容器，菜单可左右滑，
   头像用 sticky 钉在滚动视口右边缘，始终可见（absolute 会被滚出视口） */
@media (max-width: 768px) {
    .header-nav-top-inner {
        justify-content: flex-start !important;
    }
    .header-nav-right {
        position: sticky !important;
        right: 0 !important;
        transform: none !important;
        margin-left: auto !important;
        padding-left: 8px;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 6;
    }
    body.dark-mode .header-nav-right {
        background: rgba(26, 26, 46, .92);
    }
}

/* ============================================================
   顶部头像下拉 - 移动端收敛
   ------------------------------------------------------------
   768px 以下顶部导航是横向滚动条，头像+昵称+箭头会挤爆胶囊，
   移动端只保留头像（昵称在下方下拉头部里显示）。
   ============================================================ */
@media (max-width: 768px) {
    .user-nav-login.is-logged {
        max-width: none !important;
        padding: 4px !important;
        gap: 0 !important;
    }
    .user-nav-login.is-logged .nav-user-name,
    .user-nav-login.is-logged .nav-user-arrow {
        display: none !important;
    }
    .nav-user-avatar {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }
    .nav-user-avatar-text { font-size: 13px; }
    .nav-user-drop { min-width: 172px; }
}

/* 点击展开态（触屏设备无 hover，靠 JS 切换 .drop-open） */
.nav-user-box.drop-open .nav-user-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-user-box.drop-open .nav-user-arrow { transform: rotate(180deg); }

/* 移动端下拉：顶部导航是 overflow-x:auto 的滚动容器，
   absolute 子元素会被裁切，改用 fixed 定位贴在头像正下方。
   注意：.header-nav-top 的 overflow:auto 会把 fixed 子元素一起裁掉
   （裁切祖先不受子元素定位方式影响），所以展开期间需临时放开，
   由 user.js 同步 .nav-drop-active / .nav-drop-lock 两个类。 */
@media (max-width: 768px) {
    .nav-user-drop {
        position: fixed !important;
        top: 52px !important;
        right: 10px !important;
        left: auto !important;
        min-width: 176px !important;
        z-index: 1002 !important;
    }
    .header-nav-top.nav-drop-active {
        overflow: visible !important;
    }
    body.nav-drop-lock {
        overflow-x: hidden !important;
    }
}

/* ============================================================
   退出登录图标
   ------------------------------------------------------------
   项目 remixicon 为裁剪子集，ri-logout-box-r-line / ri-close-line /
   ri-lock-password-line / ri-dashboard-line 等字形均不存在（渲染
   宽度为 0）。改用存在的 ri-login-box-line 水平翻转 180° 表示登出。
   ============================================================ */
.nav-logout-flip {
    display: inline-block;
    transform: rotate(180deg);
}

/* ============================================================
   常用工具 tab 改「分段控件」（segment）
   ------------------------------------------------------------
   原来是三个独立胶囊按钮（各自 border-radius: 20px + 8px 间隙 +
   浅灰底），视觉上松散、和下方卡片不咬合。
   改成连成一整段：外层容器做圆角和底衬，内部按钮去掉圆角、
   仅保留激活态高亮，中间用 1px 分隔线。
   ============================================================ */
.ai-tools-section .ai-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 3px !important;
    margin-bottom: 14px !important;
    border: 1px solid #e8edf5 !important;
    border-bottom: 1px solid #e8edf5 !important;
    border-radius: 11px !important;
    background: #f5f7fb !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}
.ai-tools-section .ai-tabs .ai-tab {
    flex: 0 0 auto;
    padding: 6px 18px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    transition: background .18s ease, color .18s ease !important;
    position: relative;
}
/* 非首个按钮左侧分隔线；激活项及其前一项不画线，避免视觉断口 */
.ai-tools-section .ai-tabs .ai-tab:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: #dde4ef;
}
.ai-tools-section .ai-tabs .ai-tab.active::before,
.ai-tools-section .ai-tabs .ai-tab.active + .ai-tab::before {
    opacity: 0;
}
.ai-tools-section .ai-tabs .ai-tab:hover {
    color: #334155 !important;
    background: rgba(255, 255, 255, .8) !important;
}
.ai-tools-section .ai-tabs .ai-tab.active {
    background: #ffffff !important;
    color: #4a6cf7 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(23, 43, 99, .10), 0 0 0 1px rgba(74, 108, 247, .14) !important;
}
/* 「＋ 添加」保持在最右，做成描边小按钮 */
.ai-tools-section .ai-tabs .ai-tab-add {
    margin-left: auto !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    background: #ffffff !important;
    border: 1px solid #d9e2f2 !important;
    color: #4a6cf7 !important;
    white-space: nowrap;
}
.ai-tools-section .ai-tabs .ai-tab-add:hover {
    background: #eef3ff !important;
    border-color: #4a6cf7 !important;
}

@media (max-width: 768px) {
    /* 小屏放不下时允许横向滚动，但整体仍是「一整段」外观。
       margin-left: auto 在滚动容器里会把「添加」按钮推出可视区
       （容器溢出后 auto 余量归零，但按钮宽度仍顶住右边界），
       这里改成 0 并收缩内边距，保证一屏能完整看到。 */
    .ai-tools-section .ai-tabs {
        overflow-x: auto !important;
        padding-bottom: 3px !important;
    }
    .ai-tools-section .ai-tabs .ai-tab {
        padding: 5px 12px !important;
        font-size: 12.5px !important;
    }
    .ai-tools-section .ai-tabs .ai-tab-add {
        margin-left: 4px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
}
@media (max-width: 420px) {
    .ai-tools-section .ai-tabs .ai-tab {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
    .ai-tools-section .ai-tabs .ai-tab-add {
        padding: 4px 8px !important;
        font-size: 11.5px !important;
    }
}

/* ============================================================
   内容区左右留白对称
   ------------------------------------------------------------
   .main-content 的 padding 本来就是 0 68px 40px（左右相等），
   页面级留白本身没问题。真正让「右侧留白很多」的是：
   .dh-content 是满宽，而卡片是固定 220px 列宽 ——
   一排放满 N 张后剩下的像素全部落在面板内部，导致
   不同区块（列数不同）的卡片左边界互相对不上，
   标题贴着面板左边缘、与卡片也差出一截。

   现在由 main.js 计算「这一排能放几张」，把 .dh-content
   收窄到 N×220 + (N-1)×12 + 面板左右内边距，再 margin auto 居中，
   多余空间平均成为左右外边距。因此网格必须 justify-content: start，
   让卡片贴左与标题对齐 —— 不能再用 center（那会把余量分在网格内部，
   反而让各区块左边界继续错位）。 */
.content-item-urls {
    justify-content: start !important;
}

/* ============================================================
   反推关键词工具页 /keyword.html
   ============================================================ */
.page-keyword .kw-header {
    padding: 4px 4px 16px !important;
    border-bottom: none !important;
    margin-bottom: 12px !important;
}
.kw-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(74,108,247,.14), rgba(124,58,237,.14));
    color: #4a6cf7;
}
.kw-head-icon svg { width: 20px; height: 20px; display: block; }
.kw-head-text { line-height: 1.1; white-space: nowrap; }
.page-keyword .category-header h1 { gap: 12px !important; }

.kw-panel { padding: 22px 24px !important; }

/* ---- 输入行 ---- */
.kw-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.kw-input-wrap {
    position: relative;
    flex: 1 1 320px;
    min-width: 220px;
    display: flex;
    align-items: center;
}
.kw-input-icon {
    position: absolute;
    left: 14px;
    font-size: 16px;
    color: #9aa5b8;
    pointer-events: none;
}
.kw-input {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 40px;
    font-size: 14px;
    color: #1f2633;
    background: #f7f9fc;
    border: 1.5px solid #e3e9f2;
    border-radius: 11px;
    outline: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
    box-sizing: border-box;
}
.kw-input::placeholder { color: #a8b2c2; }
.kw-input:focus {
    background: #fff;
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .12);
}
.kw-input.is-shake { animation: kwShake .4s ease; border-color: #f56c6c; }
@keyframes kwShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.kw-clear {
    position: absolute;
    right: 10px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #dfe5ee;
    color: #6b7688;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.kw-clear[hidden] { display: none !important; }
.kw-clear:hover { background: #c8d2e0; }
.kw-clear svg { width: 12px; height: 12px; }

.kw-btn {
    height: 44px;
    padding: 0 26px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, #4a6cf7, #6c5ce7);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(74, 108, 247, .28);
    transition: transform .16s, box-shadow .16s, opacity .16s;
}
.kw-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(74, 108, 247, .36); }
.kw-btn:active { transform: translateY(0); opacity: .92; }

/* ---- 模式选择 ---- */
.kw-modes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #e8edf5;
}
.kw-mode-label { font-size: 12.5px; color: #8a94a6; flex: 0 0 auto; }
.kw-mode-group { display: flex; gap: 8px; flex-wrap: wrap; }
.kw-mode {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    color: #64748b;
    background: #f5f7fb;
    border: 1px solid #e6ecf5;
    cursor: pointer;
    user-select: none;
    transition: all .16s;
}
.kw-mode input { display: none; }
.kw-mode:hover { border-color: #c9d6ee; color: #334155; }
.kw-mode.is-on {
    background: #eef3ff;
    border-color: #4a6cf7;
    color: #4a6cf7;
    font-weight: 500;
}

/* ---- 空态 ---- */
.kw-empty {
    padding: 44px 20px 30px;
    text-align: center;
    color: #9aa5b8;
}
.kw-empty[hidden] { display: none !important; }
.kw-empty-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #f2f5fa;
    color: #b9c3d4;
    margin-bottom: 12px;
}
.kw-empty-icon svg { width: 26px; height: 26px; }
.kw-empty p { margin: 0; font-size: 13px; line-height: 1.7; }

/* ---- 结果区 ---- */
.kw-result[hidden] { display: none !important; }
.kw-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 0 14px;
}
.kw-result-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #4b5563;
    flex-wrap: wrap;
}
.kw-result-title strong { color: #4a6cf7; font-size: 16px; font-weight: 700; }
.kw-result-seed {
    font-size: 12px;
    color: #6b7688;
    background: #f2f5fa;
    padding: 2px 10px;
    border-radius: 20px;
}
.kw-result-actions { display: flex; gap: 8px; }
.kw-act {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #4a6cf7;
    background: #4a6cf7;
    color: #fff;
    font-size: 12.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity .15s, background .15s;
}
.kw-act:hover { opacity: .9; }
.kw-act-ghost {
    background: #fff;
    color: #4a6cf7;
}
.kw-act-ghost:hover { background: #eef3ff; }

.kw-group {
    margin-bottom: 16px;
}
.kw-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}
.kw-group-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.kw-group-name i { color: #4a6cf7; }
.kw-group-num {
    font-size: 11px;
    font-weight: 400;
    color: #8a94a6;
    background: #f2f5fa;
    padding: 1px 8px;
    border-radius: 10px;
}
.kw-group-copy {
    margin-left: auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #e6ecf5;
    border-radius: 7px;
    background: #fff;
    color: #9aa5b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.kw-group-copy:hover { border-color: #4a6cf7; color: #4a6cf7; background: #eef3ff; }

.kw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-chip {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid #e6ecf5;
    background: #fbfcfe;
    color: #4b5563;
    font-size: 12.5px;
    line-height: 1.5;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.kw-chip:hover {
    border-color: #4a6cf7;
    color: #4a6cf7;
    background: #eef3ff;
}
.kw-chip.is-copied {
    border-color: #52c41a;
    color: #52c41a;
    background: #f0fbf0;
}

/* ---- 使用说明 ---- */
.kw-tip-list {
    margin: 0;
    padding: 0 0 0 2px;
    list-style: none;
}
.kw-tip-list li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.9;
    color: #4b5563;
}
.kw-tip-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b9c9f0;
}
.kw-tip-list b { color: #334155; font-weight: 600; }

/* ---- 夜间模式 ---- */
body.dark-mode .kw-panel,
body.dark-mode .kw-tips { background: rgba(30, 38, 54, .72) !important; }
body.dark-mode .kw-input {
    background: #1e2636;
    border-color: #333f56;
    color: #e5e9f0;
}
body.dark-mode .kw-input::placeholder { color: #6b7688; }
body.dark-mode .kw-input:focus { background: #222b3d; border-color: #6c8bff; }
body.dark-mode .kw-clear { background: #3a465e; color: #aab4c6; }
body.dark-mode .kw-mode { background: #1e2636; border-color: #333f56; color: #98a3b5; }
body.dark-mode .kw-mode.is-on { background: rgba(74,108,247,.18); border-color: #6c8bff; color: #8fa8ff; }
body.dark-mode .kw-modes { border-top-color: #2b3548; }
body.dark-mode .kw-empty-icon { background: #1e2636; color: #4a566e; }
body.dark-mode .kw-result-seed { background: #232c3e; color: #98a3b5; }
body.dark-mode .kw-group-name { color: #d5dbe6; }
body.dark-mode .kw-group-num { background: #232c3e; color: #7b8698; }
body.dark-mode .kw-group-copy { background: #1e2636; border-color: #333f56; color: #7b8698; }
body.dark-mode .kw-group-copy:hover { background: rgba(74,108,247,.18); border-color: #6c8bff; color: #8fa8ff; }
body.dark-mode .kw-chip { background: #1e2636; border-color: #333f56; color: #b6c0d0; }
body.dark-mode .kw-chip:hover { background: rgba(74,108,247,.18); border-color: #6c8bff; color: #8fa8ff; }
body.dark-mode .kw-tip-list li { color: #98a3b5; }
body.dark-mode .kw-tip-list b { color: #d5dbe6; }
body.dark-mode .kw-empty p { color: #7b8698; }
body.dark-mode .kw-act-ghost { background: transparent; border-color: #6c8bff; color: #8fa8ff; }

@media (max-width: 768px) {
    .kw-panel { padding: 16px 14px !important; }
    .kw-btn { width: 100%; justify-content: center; }
    .kw-result-head { flex-direction: column; align-items: flex-start; }
    .kw-result-actions { width: 100%; }
    .kw-act { flex: 1; justify-content: center; }
    .kw-chips { gap: 6px; }
    .kw-chip { font-size: 12px; padding: 4px 10px; }
}

/* 关键词页夜间模式：补充标题区与说明文字的可读对比度 */
body.dark-mode .kw-header .category-count {
    background: #232c3e !important;
    color: #a8b3c4 !important;
}
body.dark-mode .kw-mode-label { color: #98a3b5; }
body.dark-mode .kw-result-title { color: #a8b3c4; }
body.dark-mode .kw-empty p { color: #8b95a6; }
body.dark-mode .kw-head-text { color: #e5e9f0; }
body.dark-mode .page-keyword .category-header h1 { color: #e5e9f0 !important; }

/* ============================================================
   收费快审页 /fast.html
   参考 nav.by-t.cn/fast.html：单列表单 + 黄色提示块 + 底部收录统计
   ============================================================ */
.page-fast .fast-panel { padding: 20px 24px 26px !important; }

.page-fast .fast-head h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}
.page-fast .fast-head h1 i { color: #f6a623; font-size: 17px; }
.page-fast .fast-price { color: #ef4444; font-size: 14px; font-weight: 600; }

/* 黄色提示块 */
.page-fast .fast-tip {
    background: #fffaf0;
    border: 1px solid #fde8bf;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 auto 18px;
    max-width: 720px;
    font-size: 13px;
    line-height: 1.75;
    color: #8a6d3b;
}
.page-fast .fast-tip p { margin: 0; }
.page-fast .fast-tip p + p { margin-top: 2px; }
.page-fast .fast-tip strong { color: #b7791f; font-weight: 600; }

/* 表单：整体居中限宽，字段左对齐 */
.page-fast .fast-form { max-width: 720px; margin: 0 auto; }

.page-fast .fast-row { margin-bottom: 15px; }
.page-fast .fast-row > label {
    display: block;
    font-size: 13px;
    color: #4a5568;
    font-weight: 500;
    margin-bottom: 6px;
}
.page-fast .fast-row > label em { color: #ef4444; font-style: normal; margin-left: 1px; }

.page-fast .fast-row input[type="text"],
.page-fast .fast-row select,
.page-fast .fast-row textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 13px;
    color: #2d3748;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
    font-family: inherit;
}
.page-fast .fast-row textarea { resize: vertical; min-height: 76px; line-height: 1.65; }
.page-fast .fast-row input[type="text"]:focus,
.page-fast .fast-row select:focus,
.page-fast .fast-row textarea:focus {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .1);
}
.page-fast .fast-row input.is-error,
.page-fast .fast-row select.is-error,
.page-fast .fast-row textarea.is-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}
.page-fast .fast-row input::placeholder,
.page-fast .fast-row textarea::placeholder { color: #b6c0cf; }

/* 域名行：协议下拉 + 域名 + 获取 TDK */
.page-fast .fast-domain { display: flex; gap: 8px; align-items: center; }
.page-fast .fast-domain .fast-scheme {
    width: 104px;
    flex: 0 0 104px;
    padding: 9px 8px;
}
.page-fast .fast-domain input { flex: 1 1 auto; min-width: 0; }
.page-fast .fast-tdk {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    font-size: 12.5px;
    color: #4a6cf7;
    background: #f0f4ff;
    border: 1px solid #d6e0ff;
    border-radius: 7px;
    cursor: pointer;
    transition: background .18s ease;
    white-space: nowrap;
}
.page-fast .fast-tdk:hover { background: #e4ebff; }
.page-fast .fast-tdk:disabled { opacity: .65; cursor: default; }

/* 验证码：输入框 + 图形码 */
.page-fast .fast-captcha { display: flex; gap: 10px; align-items: center; }
.page-fast .fast-captcha input { flex: 1 1 auto; min-width: 0; }
.page-fast .fast-captcha-code {
    flex: 0 0 112px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Courier New", monospace;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 5px;
    color: #2d3748;
    background: #f7f9fc;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    cursor: pointer;
    user-select: none;
    font-style: italic;
}

/* 付款方式：两个可点选块 */
.page-fast .fast-pays { display: flex; gap: 10px; flex-wrap: wrap; }
.page-fast .fast-pay-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
.page-fast .fast-pay-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.page-fast .fast-pay-item > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    color: #4a5568;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    transition: all .18s ease;
}
.page-fast .fast-pay-item > span i { font-size: 16px; }
.page-fast .fast-pay-item input:checked + span {
    color: #4a6cf7;
    border-color: #4a6cf7;
    background: #f0f4ff;
    font-weight: 600;
}

/* 操作区 */
.page-fast .fast-actions { display: flex; gap: 10px; margin-top: 22px; }
.page-fast .fast-submit {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #4a6cf7;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease;
}
.page-fast .fast-submit:hover { background: #3b5ce0; box-shadow: 0 4px 14px rgba(74, 108, 247, .3); }
.page-fast .fast-submit:disabled { opacity: .7; cursor: default; box-shadow: none; }
.page-fast .fast-reset {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 11px 22px;
    font-size: 13px;
    color: #ef4444;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
    transition: background .18s ease;
}
.page-fast .fast-reset:hover { background: #fef2f2; }

/* 收录情况 */
.page-fast .fast-stat { padding: 16px 24px 18px !important; }
.page-fast .fast-stat-body {
    display: flex;
    gap: 26px;
    font-size: 13px;
    color: #718096;
    flex-wrap: wrap;
}
.page-fast .fast-stat-body strong { color: #4a6cf7; font-size: 14px; font-weight: 600; }

/* 夜间模式 */
body.dark-mode.page-fast .fast-head h1 { color: #e5e9f0; border-bottom-color: #2a3446; }
body.dark-mode.page-fast .fast-tip {
    background: #2a2418;
    border-color: #4a3c1e;
    color: #c9ab6b;
}
body.dark-mode.page-fast .fast-tip strong { color: #e0be7a; }
body.dark-mode.page-fast .fast-row > label { color: #a8b3c4; }
body.dark-mode.page-fast .fast-row input[type="text"],
body.dark-mode.page-fast .fast-row select,
body.dark-mode.page-fast .fast-row textarea {
    background: #1e2636;
    border-color: #2f3a4d;
    color: #e2e8f0;
}
body.dark-mode.page-fast .fast-tdk { background: #1e2a44; border-color: #2f4370; color: #8aa8ff; }
body.dark-mode.page-fast .fast-tdk:hover { background: #24324f; }
body.dark-mode.page-fast .fast-captcha-code { background: #1e2636; border-color: #2f3a4d; color: #cbd5e0; }
body.dark-mode.page-fast .fast-pay-item > span { background: #1e2636; border-color: #2f3a4d; color: #a8b3c4; }
body.dark-mode.page-fast .fast-pay-item input:checked + span { background: #1e2a44; border-color: #4a6cf7; color: #8aa8ff; }
body.dark-mode.page-fast .fast-reset { background: #1e2636; border-color: #4b2b2b; color: #f87171; }
body.dark-mode.page-fast .fast-stat-body { color: #8892a6; }

/* 窄屏 */
@media (max-width: 768px) {
    .page-fast .fast-panel { padding: 16px 14px 20px !important; }
    .page-fast .fast-form { max-width: 100%; }
    .page-fast .fast-domain { flex-wrap: wrap; }
    .page-fast .fast-domain .fast-scheme { flex: 0 0 92px; width: 92px; }
    .page-fast .fast-domain input { flex: 1 1 140px; }
    .page-fast .fast-tdk { flex: 1 1 100%; justify-content: center; }
    .page-fast .fast-actions { flex-direction: column; }
    .page-fast .fast-reset { justify-content: center; }
    .page-fast .fast-stat { padding: 14px 14px 16px !important; }
    .page-fast .fast-stat-body { gap: 14px; }
}

/* ============================================================
   排行榜单 /ranking.html —— 三栏（日 / 月 / 总浏览榜）
   参考 nav.by-t.cn/ranking.html
   ============================================================ */
.page-ranking .rank-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.page-ranking .rank-col {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .04);
    padding: 16px 16px 8px;
}
.page-ranking .rank-col-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1a202c;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eef2f7;
}
.page-ranking .rank-col-head i { color: #f6a623; font-size: 16px; }
.page-ranking .rank-col:nth-child(2) .rank-col-head i { color: #4a6cf7; }
.page-ranking .rank-col:nth-child(3) .rank-col-head i { color: #ef4444; }

.page-ranking .rank-col-body { display: flex; flex-direction: column; }

.page-ranking .rank-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-radius: 7px;
    text-decoration: none;
    transition: background .16s ease;
    min-width: 0;
}
.page-ranking .rank-row:hover { background: #f5f8ff; }

/* 名次徽章：前三名金银铜，其余灰底数字 */
.page-ranking .rank-badge {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    background: #eef2f7;
    line-height: 1;
}
.page-ranking .rank-badge-1 { background: #f6a623; color: #fff; }
.page-ranking .rank-badge-2 { background: #94a3b8; color: #fff; }
.page-ranking .rank-badge-3 { background: #d08a4e; color: #fff; }

.page-ranking .rank-row-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: #3d4a5c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-ranking .rank-row:hover .rank-row-name { color: #4a6cf7; }

.page-ranking .rank-row-num {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: #a0aec0;
    white-space: nowrap;
}

.page-ranking .rank-empty {
    padding: 30px 10px;
    text-align: center;
    font-size: 12.5px;
    color: #a0aec0;
}

/* 夜间模式 */
body.dark-mode.page-ranking .rank-col {
    background: rgba(26, 32, 44, .6);
    border-color: rgba(255, 255, 255, .07);
}
body.dark-mode.page-ranking .rank-col-head { color: #e5e9f0; border-bottom-color: #2a3446; }
body.dark-mode.page-ranking .rank-row:hover { background: #232c3e; }
body.dark-mode.page-ranking .rank-row-name { color: #c3ccda; }
body.dark-mode.page-ranking .rank-row:hover .rank-row-name { color: #8aa8ff; }
body.dark-mode.page-ranking .rank-badge { background: #2a3446; color: #8892a6; }
body.dark-mode.page-ranking .rank-badge-1 { background: #f6a623; color: #fff; }
body.dark-mode.page-ranking .rank-badge-2 { background: #94a3b8; color: #fff; }
body.dark-mode.page-ranking .rank-badge-3 { background: #d08a4e; color: #fff; }
body.dark-mode.page-ranking .rank-empty { color: #6b7688; }

/* 窄屏：两列 → 一列 */
@media (max-width: 1024px) {
    .page-ranking .rank-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .page-ranking .rank-cols { grid-template-columns: 1fr; gap: 10px; }
    .page-ranking .rank-col { padding: 14px 13px 6px; border-radius: 12px; }
    .page-ranking .rank-col-head { font-size: 13.5px; padding-bottom: 10px; }
    .page-ranking .rank-row { padding: 6px 3px; }
    .page-ranking .rank-row-name { font-size: 12.5px; }
}

/* ============================================================
   购买广告 /pay.html
   参考 nav.by-t.cn/pay.html：Hero + 4 档价格卡 + 购买表单 + 服务保障
   ============================================================ */
.page-pay .pay-hero {
    text-align: center;
    padding: 36px 24px 30px !important;
    background: linear-gradient(150deg, #f4f7ff 0%, #ffffff 55%, #f7f9ff 100%) !important;
}
.page-pay .pay-hero-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eaefff;
    color: #4a6cf7;
    font-size: 25px;
}
.page-pay .pay-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 10px;
    letter-spacing: .3px;
}
.page-pay .pay-hero-desc {
    max-width: 620px;
    margin: 0 auto 16px;
    font-size: 13px;
    line-height: 1.8;
    color: #718096;
}
.page-pay .pay-hero-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: 12.5px;
    color: #5a6a80;
}
.page-pay .pay-hero-tags span { display: inline-flex; align-items: center; gap: 5px; }
.page-pay .pay-hero-tags i { color: #4a6cf7; font-size: 14px; }

/* 价格卡：两列 */
.page-pay .pay-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.page-pay .pay-plan {
    position: relative;
    padding: 18px 18px 16px;
    border: 1px solid #eaf0f8;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.page-pay .pay-plan:hover {
    border-color: #c9d8ff;
    box-shadow: 0 6px 20px rgba(74, 108, 247, .1);
    transform: translateY(-2px);
}
.page-pay .pay-plan-hot { border-color: #c9d8ff; }
.page-pay .pay-plan-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff7a59, #f6404f);
    border-radius: 0 11px 0 10px;
}

.page-pay .pay-plan-head { display: flex; align-items: flex-start; gap: 10px; }
.page-pay .pay-plan-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f0f4ff;
    color: #4a6cf7;
    font-size: 17px;
}
.page-pay .pay-plan-title h3 {
    font-size: 14.5px;
    font-weight: 600;
    color: #1a202c;
    margin: 2px 0 3px;
}
.page-pay .pay-plan-title p { font-size: 11.5px; color: #9aa8bd; margin: 0; }

.page-pay .pay-plan-price {
    display: flex;
    align-items: baseline;
    gap: 1px;
    margin: 12px 0 4px;
    color: #4a6cf7;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.page-pay .pay-plan-cur { font-size: 15px; font-weight: 600; }
.page-pay .pay-plan-num { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.5px; }
.page-pay .pay-plan-unit { font-size: 12px; color: #9aa8bd; margin-left: 4px; white-space: nowrap; }
.page-pay .pay-plan-tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 11px;
    color: #f6a623;
    background: #fff7e8;
    border-radius: 4px;
    margin-bottom: 10px;
}

.page-pay .pay-plan-feats { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px dashed #eef2f7; }
.page-pay .pay-plan-feats li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #718096;
    line-height: 1.85;
}
.page-pay .pay-plan-feats li i { color: #48bb78; font-size: 13px; margin-top: 2px; flex: 0 0 auto; }

/* 购买表单 */
.page-pay .pay-buy-wrap { max-width: 640px; margin: 0 auto; }
.page-pay .pay-notice {
    background: #fffaf0;
    border: 1px solid #fde8bf;
    border-radius: 8px;
    padding: 11px 14px;
    margin-bottom: 18px;
    font-size: 12.5px;
    line-height: 1.8;
    color: #8a6d3b;
}
.page-pay .pay-notice p { margin: 0; }
.page-pay .pay-notice strong { color: #b7791f; font-weight: 600; }

.page-pay .pay-row { margin-bottom: 15px; }
.page-pay .pay-row > label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 6px;
}
.page-pay .pay-row > label em { color: #ef4444; font-style: normal; }
.page-pay .pay-row input[type="text"],
.page-pay .pay-row select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 13px;
    color: #2d3748;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.page-pay .pay-row input[type="text"]:focus,
.page-pay .pay-row select:focus {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .1);
}

.page-pay .pay-methods { display: flex; gap: 10px; flex-wrap: wrap; }
.page-pay .pay-method { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.page-pay .pay-method input { position: absolute; opacity: 0; width: 0; height: 0; }
.page-pay .pay-method > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    color: #4a5568;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    transition: all .18s ease;
}
.page-pay .pay-method > span i { font-size: 16px; }
.page-pay .pay-method input:checked + span {
    color: #4a6cf7;
    border-color: #4a6cf7;
    background: #f0f4ff;
    font-weight: 600;
}

.page-pay .pay-total {
    margin: 4px 0 16px;
    padding: 11px 14px;
    background: #f5f8ff;
    border-radius: 8px;
    font-size: 13px;
    color: #5a6a80;
}
.page-pay .pay-total strong { color: #ef4444; font-size: 18px; font-weight: 700; }

.page-pay .pay-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    background: #4a6cf7;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease;
}
.page-pay .pay-submit:hover { background: #3b5ce0; box-shadow: 0 4px 16px rgba(74, 108, 247, .32); }
.page-pay .pay-submit:disabled { opacity: .7; cursor: default; box-shadow: none; }

/* 服务保障 */
.page-pay .pay-guard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.page-pay .pay-guard-item {
    padding: 16px 12px;
    text-align: center;
    background: #f8fafd;
    border: 1px solid #eef2f7;
    border-radius: 10px;
}
.page-pay .pay-guard-item i { font-size: 22px; color: #4a6cf7; }
.page-pay .pay-guard-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2d3748;
    margin: 7px 0 4px;
}
.page-pay .pay-guard-item p { font-size: 11.5px; color: #9aa8bd; margin: 0; line-height: 1.6; }

/* 夜间模式 */
body.dark-mode.page-pay .pay-hero {
    background: linear-gradient(150deg, #1c2436 0%, #1a2030 55%, #1b2333 100%) !important;
}
body.dark-mode.page-pay .pay-hero-icon { background: #232f4a; color: #8aa8ff; }
body.dark-mode.page-pay .pay-hero-title { color: #e5e9f0; }
body.dark-mode.page-pay .pay-hero-desc { color: #98a3b5; }
body.dark-mode.page-pay .pay-hero-tags { color: #a8b3c4; }
body.dark-mode.page-pay .pay-plan { background: #1e2636; border-color: #2f3a4d; }
body.dark-mode.page-pay .pay-plan:hover { border-color: #3d5a9e; }
body.dark-mode.page-pay .pay-plan-title h3 { color: #e5e9f0; }
body.dark-mode.page-pay .pay-plan-icon { background: #232f4a; color: #8aa8ff; }
body.dark-mode.page-pay .pay-plan-feats { border-top-color: #2a3446; }
body.dark-mode.page-pay .pay-plan-feats li { color: #98a3b5; }
body.dark-mode.page-pay .pay-notice { background: #2a2418; border-color: #4a3c1e; color: #c9ab6b; }
body.dark-mode.page-pay .pay-row > label { color: #a8b3c4; }
body.dark-mode.page-pay .pay-row input[type="text"],
body.dark-mode.page-pay .pay-row select { background: #1e2636; border-color: #2f3a4d; color: #e2e8f0; }
body.dark-mode.page-pay .pay-method > span { background: #1e2636; border-color: #2f3a4d; color: #a8b3c4; }
body.dark-mode.page-pay .pay-method input:checked + span { background: #1e2a44; border-color: #4a6cf7; color: #8aa8ff; }
body.dark-mode.page-pay .pay-total { background: #232c3e; color: #98a3b5; }
body.dark-mode.page-pay .pay-guard-item { background: #1e2636; border-color: #2a3446; }
body.dark-mode.page-pay .pay-guard-item strong { color: #dbe2ec; }

/* 窄屏 */
@media (max-width: 1024px) {
    .page-pay .pay-guard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .page-pay .pay-hero { padding: 26px 16px 22px !important; }
    .page-pay .pay-hero-title { font-size: 18px; }
    .page-pay .pay-hero-tags { gap: 8px 16px; font-size: 11.5px; }
    .page-pay .pay-plan-grid { grid-template-columns: 1fr; gap: 10px; }
    .page-pay .pay-plan { padding: 15px 15px 13px; }
    .page-pay .pay-plan-num { font-size: 25px; }
    .page-pay .pay-buy-wrap { max-width: 100%; }
    .page-pay .pay-guard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .page-pay .pay-guard-item { padding: 13px 10px; }
}

/* ============================================================
   文章归档 /archives.html
   结构：推荐位大图 → News 最新文章(分页) → 分类文章区块 → 全网热榜
   ============================================================ */
.page-archives .content-item { margin-bottom: 14px; }
.page-archives .content-item:last-child { margin-bottom: 0; }

.page-archives .content-item-head-left h1,
.page-archives .content-item-head-left h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a202c !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
.page-archives .content-item-head-left h1 i,
.page-archives .content-item-head-left h2 i { color: #4a6cf7 !important; font-size: 18px !important; }

.page-archives .head-more {
    margin-left: auto;
    font-size: 12.5px;
    color: #94a3b8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: color .18s;
}
.page-archives .head-more:hover { color: #4a6cf7; }

/* 推荐位大图 */
.page-archives .xk-arch-banner { border-radius: 14px; overflow: hidden; margin-top: 12px; }
.page-archives .xk-arch-banner img { width: 100%; display: block; border-radius: 14px; }

/* 通用白面板 */
.page-archives .xk-panel {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #eef2f6;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .02);
    min-width: 0;
}
.page-archives .xk-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-archives .xk-panel-title > i { color: #4a6cf7; font-size: 16px; }
.page-archives .xk-panel-title .xk-more {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: #a0aec0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.page-archives .xk-panel-title .xk-more:hover { color: #4a6cf7; }

/* 文章列表 */
.page-archives .xk-post-list { list-style: none; margin: 0; padding: 0; }
.page-archives .xk-post-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px dashed #eef2f6;
    font-size: 13.5px;
    min-width: 0;
}
.page-archives .xk-post-list li:last-child { border-bottom: none; }
.page-archives .xk-post-list .xk-post-idx {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 5px;
    background: #f0f5ff;
    color: #4a6cf7;
    font-size: 11.5px;
    font-style: normal;
}
.page-archives .xk-post-list .xk-post-date { flex: 0 0 auto; color: #a0aec0; font-size: 11.5px; }
.page-archives .xk-post-list a {
    flex: 1;
    min-width: 0;
    color: #4a5568;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .16s;
}
.page-archives .xk-post-list a:hover { color: #4a6cf7; }

/* 上一页 / 下一页 */
.page-archives .xk-arch-pager {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.page-archives .xk-arch-pager .btn-ghost,
.page-archives .xk-arch-pager > a.btn-ghost,
.page-archives .xk-arch-pager > span.btn-ghost {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #f7fafc;
    color: #4a6cf7;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
}
.page-archives .xk-arch-pager .btn-ghost:hover { border-color: #4a6cf7; background: #f0f5ff; }
.page-archives .xk-arch-pager .btn-ghost.is-disabled {
    color: #c3cbd8;
    background: #fafbfd;
    cursor: not-allowed;
}
.page-archives .xk-arch-pager .btn-ghost.is-disabled:hover { border-color: #e2e8f0; background: #fafbfd; }

/* 分类区块两列 */
.page-archives .xk-arch-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

/* 全网热榜 */
.page-archives .xk-hot-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.page-archives .xk-hot-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    padding: 14px 16px 6px;
    min-width: 0;
}
.page-archives .xk-hot-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f5f9;
}
.page-archives .xk-hot-title { font-size: 14px; font-weight: 600; color: #1a202c; }
.page-archives .xk-hot-unit { margin-left: auto; font-size: 11.5px; color: #a0aec0; }
.page-archives .xk-hot-body { max-height: 360px; overflow: auto; padding: 6px 2px; }
.page-archives .xk-hot-list {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 5px 0;
}
.page-archives .xk-hot-list a {
    flex: 1;
    min-width: 0;
    color: #4a5568;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .16s;
}
.page-archives .xk-hot-list a:hover { color: #4a6cf7; }
.page-archives .xk-hot-index {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px;
    background: #edf2f7;
    color: #718096;
    font-size: 11.5px;
}
.page-archives .xk-hot-list:nth-child(1) .xk-hot-index { background: #FE2D46; color: #fff; }
.page-archives .xk-hot-list:nth-child(2) .xk-hot-index { background: #F60; color: #fff; }
.page-archives .xk-hot-list:nth-child(3) .xk-hot-index { background: #FAA90E; color: #fff; }
.page-archives .xk-hot-rank { flex: 0 0 auto; color: #a0aec0; font-size: 11.5px; }

/* 暗色模式 */
body.dark-mode.page-archives .content-item-head-left h1,
body.dark-mode.page-archives .content-item-head-left h2 { color: #e2e8f0 !important; }
body.dark-mode.page-archives .xk-panel,
body.dark-mode.page-archives .xk-hot-card { background: #16213e; border-color: #2a3a5a; }
body.dark-mode.page-archives .xk-panel-title,
body.dark-mode.page-archives .xk-hot-title { color: #e2e8f0; }
body.dark-mode.page-archives .xk-post-list li { border-bottom-color: #2a3a5a; }
body.dark-mode.page-archives .xk-post-list .xk-post-idx { background: #1a2a4a; color: #8aa8ff; }
body.dark-mode.page-archives .xk-post-list a,
body.dark-mode.page-archives .xk-hot-list a { color: #cbd5e0; }
body.dark-mode.page-archives .xk-post-list a:hover,
body.dark-mode.page-archives .xk-hot-list a:hover { color: #8aa8ff; }
body.dark-mode.page-archives .xk-hot-head { border-bottom-color: #2a3a5a; }
body.dark-mode.page-archives .xk-hot-index { background: #2a3a5a; color: #a0aec0; }
body.dark-mode.page-archives .xk-arch-pager .btn-ghost {
    background: #1a2a4a; border-color: #2a3a5a; color: #8aa8ff;
}
body.dark-mode.page-archives .xk-arch-pager .btn-ghost.is-disabled { color: #55617a; background: #16213e; }

/* 窄屏 */
@media (max-width: 1024px) {
    .page-archives .xk-hot-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .page-archives .xk-arch-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .page-archives .xk-hot-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .page-archives .xk-panel { padding: 14px 14px; }
    .page-archives .content-item-head-left h1,
    .page-archives .content-item-head-left h2 { font-size: 16px !important; }
    .page-archives .xk-post-list li { font-size: 13px; padding: 8px 0; }
    .page-archives .xk-hot-card { padding: 12px 13px 4px; }
}

/* ============================================================
   文章详情 /article/:id.html
   ============================================================ */
.page-article .art-wrap { max-width: 100%; }
.page-article .art-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 2px 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #eef2f6;
    font-size: 12.5px;
    color: #94a3b8;
}
.page-article .art-meta span { display: inline-flex; align-items: center; gap: 4px; }
.page-article .art-meta i { font-size: 13px; color: #b6c0cf; }
.page-article .art-cover { margin-bottom: 18px; border-radius: 12px; overflow: hidden; }
.page-article .art-cover img { width: 100%; display: block; border-radius: 12px; }
.page-article .art-body {
    font-size: 14.5px;
    line-height: 1.95;
    color: #374151;
    word-break: break-word;
}
.page-article .art-body img { max-width: 100%; height: auto; border-radius: 10px; }
.page-article .art-body h2,
.page-article .art-body h3 { margin: 22px 0 10px; font-size: 17px; font-weight: 600; color: #1a202c; }
.page-article .art-body p { margin: 0 0 14px; }
.page-article .art-body a { color: #4a6cf7; text-decoration: none; }
.page-article .art-body a:hover { text-decoration: underline; }
.page-article .art-body ul,
.page-article .art-body ol { padding-left: 22px; margin: 0 0 14px; }
.page-article .art-body blockquote {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-left: 3px solid #4a6cf7;
    background: #f7f9ff;
    border-radius: 0 8px 8px 0;
    color: #4a5568;
}
.page-article .art-body pre {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.7;
}
.page-article .art-body code {
    background: #f1f5f9;
    color: #e53e3e;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 13px;
}
.page-article .art-body pre code { background: none; color: inherit; padding: 0; }
.page-article .art-related {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed #eef2f6;
}
.page-article .art-related-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.page-article .art-related-title i { color: #4a6cf7; }

body.dark-mode.page-article .art-meta { border-bottom-color: #2a3446; color: #7b8798; }
body.dark-mode.page-article .art-body { color: #c3ccd9; }
body.dark-mode.page-article .art-body h2,
body.dark-mode.page-article .art-body h3,
body.dark-mode.page-article .art-related-title { color: #e5e9f0; }
body.dark-mode.page-article .art-body blockquote { background: #1e2636; color: #98a3b5; }
body.dark-mode.page-article .art-body code { background: #232c3e; color: #fc8181; }
body.dark-mode.page-article .art-related { border-top-color: #2a3446; }

@media (max-width: 768px) {
    .page-article .art-body { font-size: 14px; line-height: 1.9; }
    .page-article .art-meta { gap: 6px 14px; font-size: 11.5px; }
}

/* ============================================================
   AI 提示词反推 /prompt-generator.php
   ============================================================ */
.page-prompt { --pg-primary: #4a6cf7; --pg-primary-2: #6c5ce7; }
.page-prompt .pg-hero {
    background: linear-gradient(135deg, #4a6cf7, #6c5ce7);
    color: #fff;
    border-radius: 14px;
    padding: 30px 26px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.page-prompt .pg-hero-text { flex: 1; min-width: 260px; }
.page-prompt .pg-hero h1 { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: #fff; }
.page-prompt .pg-hero p { margin: 0 0 14px; opacity: .93; font-size: 13.5px; line-height: 1.75; }
.page-prompt .pg-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.page-prompt .pg-cap {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px;
    padding: 4px 13px;
    font-size: 12px;
}
.page-prompt .pg-hero-act { flex-shrink: 0; text-align: center; }
.page-prompt .pg-hero-user { display: block; font-size: 13px; margin-bottom: 10px; opacity: .95; }
.page-prompt .pg-hero-user b { font-size: 16px; }
.page-prompt .pg-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #4a6cf7;
    padding: 10px 24px;
    border: 2px solid #4a6cf7;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(10,20,40,.25);
    transition: all .25s;
}
.page-prompt .pg-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,20,40,.32); color: #4a6cf7; }

/* Tab */
.page-prompt .pg-tabs {
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 14px;
}
.page-prompt .pg-tab {
    flex: 1;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 13.5px;
    color: #86909c;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
}
.page-prompt .pg-tab:hover { color: #1f2329; }
.page-prompt .pg-tab.on { background: #4a6cf7; color: #fff; font-weight: 600; }

.page-prompt .pg-panel { display: none; }
.page-prompt .pg-panel.on { display: block; }

/* 上传区 */
.page-prompt .pg-upload {
    position: relative;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 28px 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    margin-bottom: 14px;
    overflow: hidden;
    background: #fff;
}
.page-prompt .pg-upload:hover,
.page-prompt .pg-upload.on { border-color: #4a6cf7; background: rgba(74,108,247,.04); }
.page-prompt .pg-upload-ico { font-size: 28px; line-height: 1; margin-bottom: 8px; color: #4a6cf7; }
.page-prompt .pg-upload-tip { font-size: 14.5px; font-weight: 600; color: #1f2329; }
.page-prompt .pg-upload-sub { color: #86909c; font-size: 12px; margin-top: 6px; line-height: 1.7; }
.page-prompt .pg-upload-sub b { color: #4a6cf7; }
.page-prompt .pg-upload-file {
    margin-top: 10px;
    font-size: 12.5px;
    color: #4a6cf7;
    background: rgba(74,108,247,.08);
    border-radius: 6px;
    padding: 6px 10px;
    word-break: break-all;
}
.page-prompt .pg-upload img {
    max-width: 220px;
    max-height: 220px;
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    object-fit: cover;
}

/* 选项 */
.page-prompt .pg-opts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.page-prompt .pg-opt { display: flex; align-items: flex-start; gap: 12px; }
.page-prompt .pg-opt-label { flex: 0 0 72px; padding-top: 6px; font-size: 13px; color: #86909c; }
.page-prompt .pg-opt-group { display: flex; flex-wrap: wrap; gap: 8px; }
.page-prompt .pg-opt-btn {
    padding: 6px 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 20px;
    font-size: 12.5px;
    color: #1f2329;
    cursor: pointer;
    transition: all .18s;
}
.page-prompt .pg-opt-btn:hover { border-color: #4a6cf7; color: #4a6cf7; }
.page-prompt .pg-opt-btn.on { background: #4a6cf7; border-color: #4a6cf7; color: #fff; }

/* 按钮 / 进度 */
.page-prompt .pg-btn {
    display: inline-block;
    border: 0;
    border-radius: 8px;
    padding: 11px 30px;
    background: #4a6cf7;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.page-prompt .pg-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(74,108,247,.28); }
.page-prompt .pg-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.page-prompt .pg-btn--sm { padding: 6px 15px; font-size: 12.5px; }
.page-prompt .pg-btn--sm:hover { transform: none; box-shadow: none; }
.page-prompt .pg-progress { margin-top: 14px; }
.page-prompt .pg-progress-bar { height: 8px; background: #eef2f6; border-radius: 6px; overflow: hidden; }
.page-prompt .pg-progress-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #4a6cf7, #6c5ce7);
    border-radius: 6px;
    transition: width .2s;
}
.page-prompt .pg-progress > span { display: block; margin-top: 6px; font-size: 12px; color: #86909c; }

/* 链接 tab */
.page-prompt .pg-link-row { display: flex; gap: 10px; margin-bottom: 10px; }
.page-prompt .pg-link-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13.5px;
    background: #fff;
    color: #1f2329;
    outline: none;
}
.page-prompt .pg-link-input:focus { border-color: #4a6cf7; }
.page-prompt .pg-note { color: #86909c; font-size: 12.5px; margin: 0; }

/* 结果区 */
.page-prompt .pg-result {
    margin-top: 16px;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.page-prompt .pg-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 18px;
    border-bottom: 1px solid #eef2f6;
}
.page-prompt .pg-result-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #1f2329; }
.page-prompt .pg-result-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-prompt .pg-result-meta { font-size: 12px; color: #86909c; }
.page-prompt .pg-result-pre {
    margin: 0;
    padding: 18px;
    font-family: Consolas, Menlo, monospace;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    background: #0f172a;
    color: #e2e8f0;
    max-height: 480px;
    overflow-y: auto;
}

/* 案例演示 */
.page-prompt .pg-demo { margin-top: 26px; }
.page-prompt .pg-demo h2 { font-size: 18px; margin: 0 0 6px; color: #1a202c; font-weight: 600; }
.page-prompt .pg-demo-sub { color: #86909c; font-size: 12.5px; margin: 0 0 12px; }
.page-prompt .pg-demo-card {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
}
.page-prompt .pg-demo-input,
.page-prompt .pg-demo-output { flex: 1; min-width: 240px; font-size: 13px; }
.page-prompt .pg-demo-input { color: #86909c; }
.page-prompt .pg-demo-input b,
.page-prompt .pg-demo-output b {
    display: block;
    margin-bottom: 8px;
    color: #1f2329;
    font-size: 12.5px;
    font-weight: 600;
}
.page-prompt .pg-demo-thumb {
    width: 100%;
    max-width: 260px;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .10);
}
.page-prompt .pg-demo-thumb svg { display: block; width: 100%; height: auto; }
.page-prompt .pg-demo-desc { margin: 10px 0 0; color: #86909c; font-size: 12.5px; }
.page-prompt .pg-demo-arrow { align-self: center; color: #4a6cf7; font-size: 20px; }
.page-prompt .pg-demo-output pre {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0 0 10px;
}

body.dark-mode.page-prompt .pg-tabs,
body.dark-mode.page-prompt .pg-upload,
body.dark-mode.page-prompt .pg-result,
body.dark-mode.page-prompt .pg-demo-card { background: #16213e; border-color: #2a3a5a; }
body.dark-mode.page-prompt .pg-tab { color: #8ea0c0; }
body.dark-mode.page-prompt .pg-tab:hover { color: #e2e8f0; }
body.dark-mode.page-prompt .pg-upload-tip,
body.dark-mode.page-prompt .pg-result-head h3,
body.dark-mode.page-prompt .pg-demo h2,
body.dark-mode.page-prompt .pg-demo-input b,
body.dark-mode.page-prompt .pg-demo-output b { color: #e2e8f0; }
body.dark-mode.page-prompt .pg-demo-desc { color: #8ea0c0; }
body.dark-mode.page-prompt .pg-opt-btn,
body.dark-mode.page-prompt .pg-link-input { background: #1a2747; border-color: #2a3a5a; color: #e2e8f0; }

@media (max-width: 768px) {
    .page-prompt .pg-hero { padding: 22px 16px; }
    .page-prompt .pg-hero h1 { font-size: 19px; }
    .page-prompt .pg-hero-btn { width: 100%; justify-content: center; }
    .page-prompt .pg-tabs { overflow-x: auto; }
    .page-prompt .pg-tab { flex: 0 0 auto; padding: 8px 14px; }
    .page-prompt .pg-opt { flex-direction: column; gap: 6px; }
    .page-prompt .pg-opt-label { padding-top: 0; }
    .page-prompt .pg-result-head { padding: 12px 14px; }
    .page-prompt .pg-result-pre { padding: 14px; font-size: 12px; }
    .page-prompt .pg-link-row { flex-direction: column; }
    .page-prompt .pg-link-row .pg-btn { width: 100%; }
}

/* ============================================================
   全网视频解析 /videoparsing.php
   ============================================================ */
.page-video .vp-box {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    padding: 30px 28px;
    box-shadow: 0 1px 4px rgba(0,0,0,.02);
}
.page-video .vp-header { text-align: center; margin-bottom: 22px; }
.page-video .vp-header h1 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.page-video .vp-header h1 svg { color: #4a6cf7; }
.page-video .vp-header p { margin: 0; font-size: 14px; color: #718096; }

.page-video .vp-input-group {
    display: flex;
    gap: 12px;
    max-width: 680px;
    margin: 0 auto 14px;
}
.page-video .vp-input-group input {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f7fafc;
    font-size: 13.5px;
    color: #1a202c;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}
.page-video .vp-input-group input:focus {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74,108,247,.08);
    background: #fff;
}
.page-video .vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    background: #4a6cf7;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}
.page-video .vp-btn:hover { background: #3a5cd9; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(74,108,247,.25); }
.page-video .vp-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; box-shadow: none; }
.page-video .vp-btn--cover { background: #38a169; }
.page-video .vp-btn--cover:hover { background: #2f9d63; }

.page-video .vp-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 auto 22px;
    max-width: 680px;
    padding: 11px 16px;
    background: linear-gradient(135deg, #f0f7ff, #e8f0fe);
    border-radius: 12px;
    font-size: 12.5px;
    color: #2d3748;
    line-height: 1.7;
}
.page-video .vp-notice-tag {
    flex: 0 0 auto;
    background: #4a6cf7;
    color: #fff;
    font-size: 11.5px;
    padding: 2px 11px;
    border-radius: 20px;
    margin-top: 2px;
}
.page-video .vp-notice-text b { color: #1a202c; }

.page-video .vp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0;
    color: #718096;
    font-size: 13.5px;
}
.page-video .vp-spinner {
    width: 22px; height: 22px;
    border: 3px solid #e2e8f0;
    border-top-color: #4a6cf7;
    border-radius: 50%;
    animation: vp-spin .8s linear infinite;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }
.page-video .vp-error {
    padding: 13px 16px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 10px;
    color: #c53030;
    font-size: 13.5px;
    margin-bottom: 18px;
}

.page-video .vp-result { margin-bottom: 22px; }
.page-video .vp-video { width: 100%; max-height: 480px; border-radius: 10px; background: #000; outline: none; }
.page-video .vp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.page-video .vp-gallery a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #f7fafc;
    border: 1px solid #eef2f6;
}
.page-video .vp-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.page-video .vp-info { margin-top: 14px; }
.page-video .vp-info-title { font-size: 15px; font-weight: 600; color: #1a202c; margin-bottom: 4px; }
.page-video .vp-info-author { font-size: 12.5px; color: #718096; margin-bottom: 10px; }
.page-video .vp-info-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.page-video .vp-info-actions .vp-btn { padding: 9px 20px; font-size: 13px; }
.page-video .vp-watermark-tip {
    margin-top: 10px;
    font-size: 11.5px;
    color: #a0aec0;
    background: #f7fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
}

.page-video .vp-features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.page-video .vp-card {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.page-video .vp-card:hover {
    border-color: #4a6cf7;
    box-shadow: 0 4px 16px rgba(74,108,247,.06);
    transform: translateY(-3px);
}
.page-video .vp-card-icon { font-size: 27px; line-height: 1; margin-bottom: 10px; color: #4a6cf7; }
.page-video .vp-card h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #1a202c; }
.page-video .vp-card p { margin: 0; font-size: 12px; color: #718096; line-height: 1.6; }

.page-video .vp-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.page-video .vp-card--panel { text-align: left; padding: 20px; }
.page-video .vp-card--panel h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #1a202c; }
.page-video .vp-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.page-video .vp-steps li {
    counter-increment: step;
    position: relative;
    padding: 8px 0 8px 42px;
    font-size: 12.5px;
    color: #2d3748;
    border-bottom: 1px dashed #eef2f6;
    line-height: 1.7;
}
.page-video .vp-steps li:last-child { border-bottom: none; }
.page-video .vp-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 7px;
    width: 26px; height: 26px;
    background: #4a6cf7;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-video .vp-types { margin: 0; padding: 0; list-style: none; }
.page-video .vp-types li {
    padding: 9px 0;
    font-size: 12.5px;
    color: #2d3748;
    border-bottom: 1px dashed #eef2f6;
    line-height: 1.7;
}
.page-video .vp-types li:last-child { border-bottom: none; }
.page-video .vp-types li i { color: #4a6cf7; margin-right: 4px; }
.page-video .vp-types li b { color: #1a202c; margin-right: 4px; }

body.dark-mode.page-video .vp-box,
body.dark-mode.page-video .vp-card { background: #16213e; border-color: #2a3a5a; }
body.dark-mode.page-video .vp-header h1,
body.dark-mode.page-video .vp-card h4,
body.dark-mode.page-video .vp-card--panel h3,
body.dark-mode.page-video .vp-notice-text b,
body.dark-mode.page-video .vp-info-title,
body.dark-mode.page-video .vp-types li b { color: #e2e8f0; }
body.dark-mode.page-video .vp-header p,
body.dark-mode.page-video .vp-card p,
body.dark-mode.page-video .vp-info-author { color: #8ea0c0; }
body.dark-mode.page-video .vp-input-group input { background: #1a2747; border-color: #2a3a5a; color: #e2e8f0; }
body.dark-mode.page-video .vp-notice { background: linear-gradient(135deg, #16213e, #1d2b4f); color: #a8b8d8; }
body.dark-mode.page-video .vp-watermark-tip { background: #1a2747; border-color: #2a3a5a; color: #8ea0c0; }
body.dark-mode.page-video .vp-steps li,
body.dark-mode.page-video .vp-types li { color: #cbd5e0; border-color: #2a3a5a; }
body.dark-mode.page-video .vp-gallery a { background: #1a2747; border-color: #2a3a5a; }
body.dark-mode.page-video .vp-error { background: #2d1a1a; border-color: #4c2a2a; color: #feb2b2; }

@media (max-width: 992px) {
    .page-video .vp-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-video .vp-bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .page-video .vp-box { padding: 18px 14px; border-radius: 14px; }
    .page-video .vp-header h1 { font-size: 19px; }
    .page-video .vp-header p { font-size: 13px; }
    .page-video .vp-input-group { flex-direction: column; }
    .page-video .vp-btn { width: 100%; }
    .page-video .vp-gallery { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .page-video .vp-features-grid { gap: 10px; }
    .page-video .vp-card { padding: 14px 12px; }
    .page-video .vp-card-icon { font-size: 23px; }
}

/* ============================================================
   关于本站 /about.html
   ============================================================ */
.page-about { counter-reset: none; }

/* API 推广块 */
.page-about .api-promo {
    background: linear-gradient(135deg, #4a6cf7 0%, #7c3aed 50%, #a855f7 100%);
    border-radius: 16px;
    padding: 30px 32px;
    color: #fff;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(74,108,247,.22);
}
.page-about .api-promo::before,
.page-about .api-promo::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.page-about .api-promo::before {
    top: -50%; right: -8%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
}
.page-about .api-promo::after {
    bottom: -60%; left: -8%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,.1), transparent 70%);
}
.page-about .api-promo-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.page-about .api-promo-text { flex: 1; min-width: 260px; }
.page-about .api-promo h2 {
    font-size: 23px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-about .api-promo p {
    font-size: 13.5px;
    color: rgba(255,255,255,.9);
    margin: 0;
    line-height: 1.75;
    max-width: 560px;
}
.page-about .api-tags { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.page-about .api-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.18);
    color: #fff;
    padding: 4px 13px;
    border-radius: 30px;
    font-size: 11.5px;
    border: 1px solid rgba(255,255,255,.2);
}
.page-about .api-btn-group { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }
.page-about .api-btn {
    padding: 11px 26px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    transition: all .25s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.page-about .api-btn-primary {
    background: #fff;
    color: #4a6cf7;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.page-about .api-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.2); color: #3a5cd9; }
.page-about .api-btn-outline {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
}
.page-about .api-btn-outline:hover { background: rgba(255,255,255,.25); color: #fff; }

.page-about .api-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
    position: relative;
    z-index: 2;
}
.page-about .api-feature {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.page-about .api-feature i { font-size: 21px; color: #fff; opacity: .9; flex-shrink: 0; }
.page-about .api-feature-text { min-width: 0; }
.page-about .api-feature-text strong { display: block; font-size: 12.5px; color: #fff; font-weight: 600; }
.page-about .api-feature-text span { display: block; font-size: 11px; color: rgba(255,255,255,.75); margin-top: 1px; }

/* 区块 */
.page-about .about-section {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef2f6;
    padding: 24px 28px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.02);
}
.page-about .about-section:last-child { margin-bottom: 0; }
.page-about .about-section .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.page-about .about-section .section-title i { color: #4a6cf7; font-size: 18px; }
.page-about .about-section .section-content {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.9;
}
.page-about .about-section .section-content p { margin: 0 0 8px; }
.page-about .about-section .section-content p:last-child { margin-bottom: 0; }
.page-about .about-section .section-content a { color: #4a6cf7; text-decoration: none; }
.page-about .about-section .section-content a:hover { text-decoration: underline; }

/* 网站数据 */
.page-about .stats-grid-about {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.page-about .stat-card-about {
    background: #f7fafc;
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
    border: 1px solid #edf2f7;
    transition: all .25s ease;
}
.page-about .stat-card-about:hover {
    border-color: #4a6cf7;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(74,108,247,.06);
}
.page-about .stat-card-about .stat-icon { font-size: 24px; color: #4a6cf7; display: block; margin-bottom: 6px; }
.page-about .stat-card-about .stat-number {
    font-size: 25px;
    font-weight: 700;
    color: #4a6cf7;
    display: block;
    line-height: 1.2;
}
.page-about .stat-card-about .stat-label { font-size: 12px; color: #718096; margin-top: 4px; display: block; }
.page-about .about-runtime { margin-top: 14px; font-size: 12.5px; color: #718096; }

/* 核心特色 */
.page-about .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.page-about .feature-item {
    background: #f7fafc;
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    border: 1px solid #edf2f7;
    transition: all .25s ease;
}
.page-about .feature-item:hover {
    border-color: #4a6cf7;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(74,108,247,.06);
}
.page-about .feature-item .feature-icon { font-size: 32px; color: #4a6cf7; display: block; margin-bottom: 8px; }
.page-about .feature-item .feature-title { font-size: 14px; font-weight: 600; color: #1a202c; }
.page-about .feature-item .feature-desc { font-size: 12px; color: #718096; margin-top: 4px; line-height: 1.6; }

/* 联系方式 */
.page-about .contact-info { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.page-about .contact-item {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f7fafc;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid #edf2f7;
    transition: all .25s;
    font-size: 13px;
    color: #4a5568;
}
.page-about .contact-item:hover { border-color: #4a6cf7; background: #f0f5ff; }
.page-about .contact-item i { font-size: 18px; color: #4a6cf7; }
.page-about .contact-item a { color: #4a6cf7; text-decoration: none; }
.page-about .contact-item a:hover { text-decoration: underline; }
.page-about .contact-qr {
    width: 110px;
    height: 110px;
    border-radius: 8px;
    vertical-align: middle;
    margin-left: 6px;
}

/* 暗色模式 */
body.dark-mode.page-about .about-section { background: #16213e; border-color: #2a3a5a; }
body.dark-mode.page-about .about-section .section-title { color: #e2e8f0; }
body.dark-mode.page-about .about-section .section-content { color: #cbd5e0; }
body.dark-mode.page-about .stat-card-about { background: #1a2a4a; border-color: #2a3a5a; }
body.dark-mode.page-about .stat-card-about .stat-label { color: #a0aec0; }
body.dark-mode.page-about .about-runtime { color: #a0aec0; }
body.dark-mode.page-about .feature-item { background: #1a2a4a; border-color: #2a3a5a; }
body.dark-mode.page-about .feature-item .feature-title { color: #e2e8f0; }
body.dark-mode.page-about .feature-item .feature-desc { color: #a0aec0; }
body.dark-mode.page-about .contact-item { background: #1a2a4a; border-color: #2a3a5a; color: #cbd5e0; }

/* 响应式 */
@media (max-width: 900px) {
    .page-about .api-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-about .stats-grid-about { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .page-about .api-promo { padding: 22px 18px; border-radius: 14px; }
    .page-about .api-promo h2 { font-size: 17px; }
    .page-about .api-promo p { font-size: 12.5px; }
    .page-about .api-btn { padding: 9px 18px; font-size: 12.5px; }
    .page-about .api-tag { font-size: 11px; padding: 3px 10px; }
    .page-about .about-section { padding: 18px 15px; border-radius: 14px; }
    .page-about .about-section .section-title { font-size: 16px; margin-bottom: 12px; }
    .page-about .about-section .section-content { font-size: 13px; }
    .page-about .stats-grid-about { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .page-about .stat-card-about { padding: 14px 8px; }
    .page-about .stat-card-about .stat-number { font-size: 21px; }
    .page-about .stat-card-about .stat-icon { font-size: 20px; }
    .page-about .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .page-about .feature-item { padding: 14px 10px; }
    .page-about .feature-item .feature-icon { font-size: 26px; }
    .page-about .contact-info { flex-direction: column; gap: 9px; }
    .page-about .contact-item { width: 100%; box-sizing: border-box; }
    .page-about .contact-qr { width: 90px; height: 90px; }
}
@media (max-width: 420px) {
    .page-about .feature-grid { grid-template-columns: 1fr; }
}

/* =============================================================
 * 图标上传 + 分类二级联动（/apply.html、/fast.html 共用）
 * ============================================================= */

/* ---------- 分类二级联动 ---------- */
.cat-cascade {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cat-cascade .cat-parent,
.cat-cascade .cat-child {
    flex: 1 1 200px;
    min-width: 0;
}

.cat-cascade .cat-child:disabled {
    background: #f7f9fc;
    color: #b6c0cd;
    cursor: not-allowed;
}

/* ---------- 图标字段 ---------- */
.icon-field {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.icon-preview {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border: 1px solid #e8eef5;
    border-radius: 12px;
    background: #f7fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .2s, background .2s;
}

.icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.icon-preview i {
    font-size: 24px;
    color: #c3ccda;
}

.icon-preview[data-empty="0"] {
    border-color: #c9d8ff;
    background: #fff;
}

.icon-inputs {
    flex: 1 1 260px;
    min-width: 0;
}

.icon-tabs {
    display: inline-flex;
    padding: 3px;
    border-radius: 9px;
    background: #f5f7fb;
    margin-bottom: 10px;
}

.icon-tab {
    border: 0;
    background: transparent;
    padding: 5px 14px;
    font-size: 12.5px;
    color: #6b7785;
    border-radius: 7px;
    cursor: pointer;
    transition: all .2s;
    line-height: 1.5;
}

.icon-tab.on {
    background: #fff;
    color: #4a6cf7;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
}

.icon-pane[hidden] { display: none !important; }

.icon-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border: 1px dashed #c9d8ff;
    border-radius: 9px;
    background: #f5f8ff;
    color: #4a6cf7;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 0;
    font-weight: 400;
}

.icon-upload-btn:hover {
    border-color: #4a6cf7;
    background: #eef3ff;
}

.icon-upload-btn.is-loading {
    opacity: .65;
    pointer-events: none;
}

.icon-upload-btn i { font-size: 15px; }

.icon-tip {
    margin: 8px 0 0;
    font-size: 12px;
    color: #9aa8bd;
    line-height: 1.6;
}

.icon-tip b { color: #4a6cf7; font-weight: 600; }

.icon-pane input[type="text"] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    box-sizing: border-box;
}

.icon-pane input[type="text"]:focus {
    outline: none;
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .1);
}

/* ---------- 暗色模式 ---------- */
body.dark-mode .icon-preview {
    background: #1a2747;
    border-color: #2a3a5a;
}
body.dark-mode .icon-preview[data-empty="0"] { background: #16213e; }
body.dark-mode .icon-preview i { color: #55688a; }
body.dark-mode .icon-tabs { background: #1a2747; }
body.dark-mode .icon-tab { color: #8ea0c0; }
body.dark-mode .icon-tab.on { background: #24345a; color: #93b0ff; box-shadow: none; }
body.dark-mode .icon-upload-btn {
    background: #1a2747;
    border-color: #35496f;
    color: #93b0ff;
}
body.dark-mode .icon-upload-btn:hover { background: #223357; border-color: #4a6cf7; }
body.dark-mode .icon-tip { color: #7d8ca8; }
body.dark-mode .icon-pane input[type="text"] {
    background: #1a2747;
    border-color: #2a3a5a;
    color: #e2e8f0;
}
body.dark-mode .cat-cascade .cat-child:disabled {
    background: #16213e;
    color: #4d5f80;
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    .cat-cascade { flex-direction: column; gap: 8px; }
    .cat-cascade .cat-parent,
    .cat-cascade .cat-child { flex: 1 1 auto; width: 100%; }
    .icon-field { gap: 10px; }
    .icon-preview { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 10px; }
    .icon-preview i { font-size: 20px; }
    .icon-inputs { flex: 1 1 100%; }
    .icon-upload-btn { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* =========================================================
   站点详情页 · ping 检测 / 五星评分 / 评论
   （原站 .dh-* 系列已在 app.css 里，这里只补新增模块）
   ========================================================= */

/* 详情页容器：避免 .dh-content 自带宽度与 .main-content 打架 */
.site-page { padding-bottom: 8px; }

/* 富文本描述 */
.site-rich-content { margin-top: 12px; }
.site-rich-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---------- ping 访问状态 ---------- */
.site-ping {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f7fafc;
    border: 1px solid #edf2f7;
    transition: background .2s ease, border-color .2s ease;
}
.site-ping:hover { background: #eef2ff; border-color: #c9d8ff; }
.site-ping.is-loading { opacity: .65; cursor: progress; }

.ping-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    align-self: center;
    margin: 0;
    background: #cbd5e0;
}
.ping-dot.ping-ok {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
    animation: pingPulse 2.2s ease-in-out infinite;
}
.ping-dot.ping-fail {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .16);
}
@keyframes pingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

.ping-text { font-size: 13px; font-weight: 500; color: #2d3748; }
.ping-meta { font-size: 12px; color: #a0aec0; }
.site-ping[data-level="fast"] .ping-text { color: #15803d; }
.site-ping[data-level="normal"] .ping-text { color: #b45309; }
.site-ping[data-level="slow"] .ping-text { color: #c2410c; }
.site-ping[data-ok="0"] .ping-text { color: #dc2626; }

.ping-refresh {
    font-size: 13px;
    color: #a0aec0;
    transition: transform .4s ease, color .2s ease;
}
.site-ping:hover .ping-refresh { color: #4a6cf7; }
.site-ping.is-loading .ping-refresh { animation: pingSpin .9s linear infinite; }
@keyframes pingSpin { to { transform: rotate(360deg); } }

/* ---------- 评分概览 ---------- */
.rating-summary {
    display: flex;
    gap: 32px;
    align-items: center;
    padding: 18px 20px;
    background: #fafbfc;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    margin-bottom: 18px;
}
.rating-score { text-align: center; flex: 0 0 130px; }
.rating-avg {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: #f59e0b;
    font-variant-numeric: tabular-nums;
}
.rating-stars-big { margin: 4px 0 6px; font-size: 15px; color: #f59e0b; letter-spacing: 1px; }
.rating-stars-big i { margin: 0 1px; }
.rating-count { font-size: 12px; color: #a0aec0; }

.rating-dist { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.dist-row { display: flex; align-items: center; gap: 10px; }
.dist-label { flex: 0 0 36px; font-size: 12px; color: #718096; }
.dist-bar {
    flex: 1;
    height: 7px;
    background: #edf2f7;
    border-radius: 4px;
    overflow: hidden;
}
.dist-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 4px;
    transition: width .45s ease;
}
.dist-num { flex: 0 0 28px; text-align: right; font-size: 12px; color: #a0aec0; }

/* ---------- 发表评论 ---------- */
.comment-form-wrap {
    padding: 16px 18px;
    background: #fafbfc;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    margin-bottom: 8px;
}
.comment-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.comment-form-title { font-size: 15px; font-weight: 600; color: #1a202c; }

.rate-picker { display: flex; align-items: center; gap: 8px; }
.rate-label { font-size: 13px; color: #718096; }
.rate-stars { display: flex; gap: 3px; }
.rate-star {
    font-size: 20px;
    color: #e2e8f0;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
    line-height: 1;
}
.rate-star.on { color: #f59e0b; }
.rate-star:hover { transform: scale(1.15); }
.rate-tip { font-size: 12px; color: #a0aec0; min-width: 62px; }

.comment-input,
.comment-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #2d3748;
    background: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    font-family: inherit;
}
.comment-input { margin-bottom: 10px; }
.comment-textarea { min-height: 96px; resize: vertical; line-height: 1.7; }
.comment-input:focus,
.comment-textarea:focus {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .1);
}
.comment-input::placeholder,
.comment-textarea::placeholder { color: #b3bccb; }

.comment-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.comment-hint { font-size: 12px; color: #a0aec0; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comment-hint i { margin-right: 2px; }
.comment-submit { padding: 9px 22px !important; font-size: 14px !important; }
.comment-submit:disabled { opacity: .6; cursor: not-allowed; }

.comment-login-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: #f0f5ff;
    border: 1px solid #d6e4ff;
    border-radius: 10px;
    font-size: 13px;
    color: #4a6cf7;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.comment-login-tip a { color: #2f54eb; font-weight: 600; text-decoration: underline; }

/* ---------- 评论列表 ---------- */
.comment-list { margin-top: 6px; }
.comment-total { font-size: 13px; color: #a0aec0; }

.comment-item {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f3f8;
}
.comment-item:last-child { border-bottom: none; }
.comment-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e9ff, #c9d8ff);
    color: #3b5bdb;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.comment-main { flex: 1; min-width: 0; }
.comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.comment-name { font-size: 14px; font-weight: 600; color: #1a202c; }
/* 星星走 remixicon 图标（不用 ★ 字符，避免被当 emoji 渲染成彩色） */
.comment-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 12px;
    color: #f59e0b;
    line-height: 1;
}
.comment-stars i { font-size: 12px; line-height: 1; color: #f59e0b; }
.comment-time { font-size: 12px; color: #b3bccb; }
.comment-body {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.75;
    word-break: break-word;
    overflow-wrap: break-word;
}

.comment-empty {
    padding: 32px 0;
    text-align: center;
    font-size: 14px;
    color: #b3bccb;
}
.comment-empty i { display: block; font-size: 30px; margin-bottom: 8px; color: #d6dde8; }

.comment-more-wrap { text-align: center; padding: 14px 0 4px; }
.comment-more {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 7px 26px;
    font-size: 13px;
    color: #5b667a;
    cursor: pointer;
    transition: all .25s ease;
}
.comment-more:hover { border-color: #4a6cf7; color: #4a6cf7; background: #f7f9ff; }
.comment-more:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- 轻提示 ---------- */
.site-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translate(-50%, 16px);
    z-index: 9999;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 14px;
    color: #fff;
    background: rgba(45, 55, 72, .94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
    max-width: 76vw;
    text-align: center;
}
.site-toast.show { opacity: 1; transform: translate(-50%, 0); }
.site-toast.is-ok { background: rgba(22, 163, 74, .95); }
.site-toast.is-err { background: rgba(220, 38, 38, .95); }

/* ---------- 暗色模式 ---------- */
body.dark-mode .site-ping { background: #1e2a4a; border-color: #2a3a5a; }
body.dark-mode .site-ping:hover { background: #24345c; border-color: #3a4f7a; }
/*
 * 注意优先级：上面的 .site-ping[data-level="fast"] .ping-text（0,2,1）
 * 比 body.dark-mode .ping-text（0,2,1）同分但更靠前，会被后者追平后又被同级覆盖；
 * 实际生效的是带 data-level 的深绿色，在深底上几乎看不见。
 * 这里必须补出 data-level 三个分支的暗色值，光写一条 body.dark-mode .ping-text 不够。
 */
body.dark-mode .ping-text { color: #cbd5e0; }
body.dark-mode .site-ping[data-level="fast"] .ping-text { color: #4ade80; }
body.dark-mode .site-ping[data-level="normal"] .ping-text { color: #fbbf24; }
body.dark-mode .site-ping[data-level="slow"] .ping-text { color: #fb923c; }
body.dark-mode .site-ping[data-ok="0"] .ping-text { color: #f87171; }
body.dark-mode .ping-meta { color: #8892a6; }
body.dark-mode .ping-refresh { color: #8892a6; }
body.dark-mode .site-ping:hover .ping-refresh { color: #8fa8ff; }

body.dark-mode .rating-summary { background: #1a2a4a; border-color: #2a3a5a; }
body.dark-mode .rating-avg,
body.dark-mode .rating-stars-big { color: #fbbf24; }
body.dark-mode .rating-count { color: #8892a6; }
body.dark-mode .dist-label,
body.dark-mode .dist-num { color: #8892a6; }
body.dark-mode .dist-bar { background: #2a3a5a; }

body.dark-mode .comment-form-wrap { background: #1a2a4a; border-color: #2a3a5a; }
body.dark-mode .comment-form-title { color: #e2e8f0; }
body.dark-mode .rate-label,
body.dark-mode .rate-tip { color: #8892a6; }
body.dark-mode .rate-star { color: #3a4f7a; }
body.dark-mode .rate-star.on { color: #fbbf24; }
body.dark-mode .comment-input,
body.dark-mode .comment-textarea {
    background: #16213e;
    border-color: #2a3a5a;
    color: #e2e8f0;
}
body.dark-mode .comment-input::placeholder,
body.dark-mode .comment-textarea::placeholder { color: #6b7a94; }
body.dark-mode .comment-hint,
body.dark-mode .comment-total,
body.dark-mode .comment-time { color: #8892a6; }

body.dark-mode .comment-login-tip { background: #1e2a4a; border-color: #2a3a5a; color: #8ba3ff; }
body.dark-mode .comment-login-tip a { color: #a5b8ff; }

body.dark-mode .comment-item { border-bottom-color: #24345c; }
body.dark-mode .comment-avatar { background: linear-gradient(135deg, #2a3a5a, #365080); color: #a5b8ff; }
body.dark-mode .comment-name { color: #e2e8f0; }
body.dark-mode .comment-body { color: #cbd5e0; }
body.dark-mode .comment-empty { color: #6b7a94; }
body.dark-mode .comment-empty i { color: #3a4f7a; }
body.dark-mode .comment-more { background: #1a2a4a; border-color: #2a3a5a; color: #cbd5e0; }
body.dark-mode .comment-more:hover { background: #24345c; border-color: #4a6cf7; color: #8ba3ff; }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .rating-summary {
        flex-direction: column;
        gap: 16px;
        padding: 14px;
        align-items: stretch;
    }
    .rating-score { flex: none; }
    .rating-avg { font-size: 34px; }

    .comment-form-wrap { padding: 13px; }
    .comment-form-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .comment-form-foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .comment-submit { width: 100%; justify-content: center; }
    .comment-hint { font-size: 11px; }

    .comment-avatar { flex: 0 0 32px; width: 32px; height: 32px; font-size: 13px; }
    .comment-item { padding: 13px 0; gap: 10px; }
    .comment-body { font-size: 13px; }

    .site-toast { bottom: 76px; font-size: 13px; padding: 10px 18px; }
}

/* =========================================================
   站点信息 + 网站缩略图（详情页）
   ========================================================= */

/* 左右两栏：左信息、右缩略图。缩略图固定 300px，不参与压缩 */
.site-info-wrap {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.site-info-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* 缩略图三值联动固定宽度，避免被 flex 缩 */
.site-thumb {
    flex: 0 0 300px;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}

.site-thumb-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f7fb;
    border: 1px solid #e6ecf4;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.site-thumb-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.site-thumb:hover .site-thumb-frame {
    border-color: #c9d8ff;
    box-shadow: 0 6px 18px rgba(74, 108, 247, .13);
}

/* 骨架 / 占位 */
.site-thumb-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #a9b4c6;
    font-size: 12px;
    background: linear-gradient(100deg, #f4f7fb 30%, #eaf0f8 50%, #f4f7fb 70%);
    background-size: 220% 100%;
    animation: thumbShimmer 1.5s ease-in-out infinite;
}
.site-thumb-skeleton i { font-size: 26px; color: #c4cede; }
.site-thumb-skeleton.is-fail {
    animation: none;
    background: #f7f9fc;
    color: #a9b4c6;
}
@keyframes thumbShimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -60% 0; }
}
.site-thumb-skeleton .spin {
    animation: thumbSpin 1s linear infinite;
}
@keyframes thumbSpin { to { transform: rotate(360deg); } }

/* 悬停蒙层 */
.site-thumb-mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 32, 44, .38);
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}
.site-thumb:hover .site-thumb-mask { opacity: 1; }
.site-thumb-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .95);
    color: #2d3748;
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}

/* 底部说明条 */
.site-thumb-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 2px 0;
    font-size: 12px;
    color: #a0aec0;
}
.site-thumb-refresh {
    border: none;
    background: transparent;
    padding: 2px 4px;
    color: #a0aec0;
    font-size: 13px;
    cursor: pointer;
    border-radius: 5px;
    line-height: 1;
    transition: color .2s ease, background .2s ease, transform .4s ease;
}
.site-thumb-refresh:hover { color: #4a6cf7; background: #eef2ff; }
.site-thumb.is-loading .site-thumb-refresh { animation: thumbSpin 1s linear infinite; }

/* ping 待检测态：灰点 + 呼吸，避免首屏出现「失败」红点误导用户 */
.site-ping.is-pending .ping-dot {
    background: #cbd5e0;
    box-shadow: 0 0 0 3px rgba(203, 213, 224, .18);
    animation: pingPulse 1.4s ease-in-out infinite;
}
.site-ping.is-pending .ping-text { color: #a0aec0; }
.site-ping.is-pending .ping-meta:empty { display: none; }

/* ---------- 暗色模式 ---------- */
body.dark-mode .site-thumb-frame {
    background: #16213e;
    border-color: #2a3a5a;
}
body.dark-mode .site-thumb:hover .site-thumb-frame {
    border-color: #4a6cf7;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
body.dark-mode .site-thumb-skeleton {
    background: linear-gradient(100deg, #16213e 30%, #1d2a4d 50%, #16213e 70%);
    background-size: 220% 100%;
    color: #8892a6;
}
body.dark-mode .site-thumb-skeleton i { color: #4a5e85; }
body.dark-mode .site-thumb-skeleton.is-fail { background: #16213e; }
body.dark-mode .site-thumb-open { background: rgba(45, 55, 72, .96); color: #e2e8f0; }
body.dark-mode .site-thumb-cap { color: #8892a6; }
body.dark-mode .site-thumb-refresh { color: #8892a6; }
body.dark-mode .site-thumb-refresh:hover { color: #8fa8ff; background: #24345c; }
body.dark-mode .site-ping.is-pending .ping-dot { background: #4a5e85; box-shadow: 0 0 0 3px rgba(74, 94, 133, .2); }
body.dark-mode .site-ping.is-pending .ping-text { color: #8892a6; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .site-thumb { flex: 0 0 260px; width: 260px; min-width: 260px; max-width: 260px; }
    .site-info-wrap { gap: 16px; }
}
@media (max-width: 768px) {
    /* 小屏改成上下堆叠，缩略图占满宽度并放到信息下方 */
    .site-info-wrap {
        flex-direction: column-reverse;
        gap: 14px;
        align-items: stretch;
    }
    .site-thumb,
    .site-thumb-frame {
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .site-thumb-frame { aspect-ratio: 16 / 9; }
    .site-thumb-cap { padding-top: 6px; }
}

/*
 * 页内锚点跳转到站点信息时，给固定顶栏留出高度。
 * 不加的话 scrollIntoView 会把区块顶部塞到顶栏底下（缩略图上半截看不见）。
 */
.site-info-wrap,
.site-block-block { scroll-margin-top: 84px; }
@media (max-width: 768px) {
    .site-info-wrap,
    .site-block-block { scroll-margin-top: 64px; }
}

/* ============================================================
   友情换链页（/link-exchange.html）
   ============================================================ */
.lx-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #eef4ff;
    border: 1px solid #dbe6ff;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: #3b5bdb;
    line-height: 1.75;
}
.lx-notice i { font-size: 17px; line-height: 1.4; flex: none; }

.lx-block {
    background: #fff;
    border: 1px solid #edf1f7;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 16px;
}

.lx-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.lx-block-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a2436;
}

/* 步骤序号：圆形数字，比纯文字更清晰 */
.lx-step {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #4a6cf7;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lx-step i { font-size: 14px; }

.lx-tip {
    font-size: 13.5px;
    color: #6b7688;
    line-height: 1.85;
    margin: 0 0 12px;
}
.lx-tip b { color: #4a6cf7; }

/* 代码块 */
.lx-code {
    position: relative;
    background: #f7f9fc;
    border: 1px solid #e8eef7;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.lx-code pre {
    margin: 0;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.7;
    color: #2d3a52;
    white-space: pre-wrap;
    word-break: break-all;
    /* 给右上角按钮留位置，避免长代码钻到按钮下面 */
    padding-right: 96px;
}
.lx-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid #dbe3ef;
    background: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: #5b667a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .18s ease;
}
.lx-copy:hover { border-color: #4a6cf7; color: #4a6cf7; }
.lx-copy.is-done { border-color: #22c55e; color: #16a34a; background: #f0fdf4; }

.lx-site-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.lx-site-label { color: #a0aec0; flex: none; }
.lx-site-url { color: #4a6cf7; word-break: break-all; }

/* 表单 */
.lx-form { max-width: 560px; }
.lx-field-tip {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #a0aec0;
    line-height: 1.7;
}

.lx-result {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.75;
}
.lx-result i { font-size: 16px; flex: none; line-height: 1.5; }
.lx-result.is-ok { background: #f0f9f2; border: 1px solid #d3f0d9; color: #15803d; }
.lx-result.is-fail { background: #fff5f5; border: 1px solid #ffdcdc; color: #c53030; }

/* 已交换站点 */
.lx-friends {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.lx-friend {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #f5f7fb;
    border: 1px solid #e8eef7;
    border-radius: 20px;
    font-size: 13px;
    color: #4a5568;
    transition: all .18s ease;
}
.lx-friend:hover { border-color: #4a6cf7; color: #4a6cf7; background: #eef4ff; }

.lx-audit-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #8a94a6;
    padding: 4px 2px;
}
.lx-audit-tip i { font-size: 15px; }

/* 关闭态 */
.lx-closed {
    text-align: center;
    padding: 40px 20px 56px;
}
.lx-closed > i {
    font-size: 46px;
    color: #cbd5e0;
    display: block;
    margin-bottom: 14px;
}
.lx-closed p {
    font-size: 14px;
    color: #6b7688;
    line-height: 2;
    margin: 0 0 20px;
}
.lx-closed a.btn-primary { display: inline-block; }

/* 暗色模式 */
body.dark-mode .lx-block { background: #1a2438; border-color: #2a3a5a; }
body.dark-mode .lx-block-head h3 { color: #e2e8f0; }
body.dark-mode .lx-tip { color: #8892a6; }
body.dark-mode .lx-code { background: #141d30; border-color: #2a3a5a; }
body.dark-mode .lx-code pre { color: #c3cfe2; }
body.dark-mode .lx-copy { background: #1e2b45; border-color: #33456b; color: #a8b5cc; }
body.dark-mode .lx-copy:hover { border-color: #8fa8ff; color: #8fa8ff; }
body.dark-mode .lx-copy.is-done { background: #16301f; border-color: #2f6b45; color: #4ade80; }
body.dark-mode .lx-notice { background: #17233c; border-color: #26385c; color: #8fa8ff; }
body.dark-mode .lx-friend { background: #1e2b45; border-color: #2a3a5a; color: #a8b5cc; }
body.dark-mode .lx-friend:hover { background: #24345c; border-color: #8fa8ff; color: #8fa8ff; }
body.dark-mode .lx-result.is-ok { background: #14281c; border-color: #23543a; color: #6ee7a0; }
body.dark-mode .lx-result.is-fail { background: #2c1919; border-color: #5c2b2b; color: #fca5a5; }
body.dark-mode .lx-field-tip { color: #6b7a94; }
body.dark-mode .lx-audit-tip { color: #8892a6; }

@media (max-width: 768px) {
    .lx-block { padding: 16px 15px; border-radius: 10px; }
    .lx-code { padding: 12px 13px; }
    .lx-code pre { padding-right: 0; font-size: 12px; }
    /* 小屏把复制按钮挪到代码下面，不然会压住代码 */
    .lx-copy {
        position: static;
        margin-top: 10px;
        display: inline-flex;
    }
    .lx-site-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .lx-friends { gap: 8px; }
    .lx-friend { padding: 5px 12px; font-size: 12.5px; }
}

/* ============================================================
   480导航 logo - 横版自适应
   横版原始 371×120（3.09:1），侧栏内宽 160px 时按宽度铺满，
   高度自然落到约 52px，比方形盾标（66px 高但字极小）更易读。
   ============================================================ */
.sidebar-logo {
    padding: 4px 10px 12px;
}
.sidebar-logo img {
    max-height: 58px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* 侧栏收起时只留极窄轨道，横版按宽度缩到 28px 高即可辨认盾形 */
.main-sidebar.collapsed .sidebar-logo img {
    max-height: 28px;
    max-width: 100%;
}

/* 移动顶栏：44px 高上限，横版按高度算 136px 宽，390px 屏放得下 */
@media (max-width: 768px) {
    .mobile-logo img {
        max-height: 38px;
        max-width: 100%;
        width: auto;
        height: auto;
    }
}

/* 暗色模式：横版主色深蓝在白底上正常，暗底需提亮 */
body.dark-mode .sidebar-logo img,
body.dark-mode .mobile-logo img {
    filter: brightness(1.35) saturate(1.05);
}

/* ============================================================
   站点反馈弹窗（/site/:id.html 的「站点反馈」）
   ------------------------------------------------------------
   与 .nav-pwd-* 保持同一套视觉口径：白底圆角 16、遮罩 blur(2px)、
   主色 #4a6cf7。独立命名 fb- 前缀，避免和已有弹窗互相覆盖。
   ============================================================ */
.fb-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.fb-mask.is-open { opacity: 1; visibility: visible; }

/* 弹窗打开时锁背景滚动，防移动端穿透 */
body.fb-lock { overflow: hidden !important; }

.fb-modal {
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
    padding: 22px 22px 18px;
    box-sizing: border-box;
    transform: translateY(10px) scale(.98);
    transition: transform .22s cubic-bezier(.25, .46, .45, .94);
}
.fb-mask.is-open .fb-modal { transform: translateY(0) scale(1); }

.fb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.fb-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}
.fb-head h3 i { color: #f59e0b; font-size: 17px; }
.fb-close {
    border: none;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .16s, color .16s;
    flex: 0 0 28px;
}
.fb-close:hover { background: #f1f4f9; color: #4a5568; }

/* 当前反馈的站点：灰底条，让用户确认没点错地方 */
.fb-site {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f5f7fb;
    border: 1px solid #edf1f7;
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: #5a6578;
    min-width: 0;
}
.fb-site i { color: #4a6cf7; font-size: 14px; flex: 0 0 auto; }
.fb-site-name {
    font-weight: 600;
    color: #1a202c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}
.fb-site-url {
    color: #98a2b3;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.fb-notice {
    font-size: 12.5px;
    color: #7a8496;
    line-height: 1.7;
    margin: 0 0 14px;
}

.fb-field { margin-bottom: 13px; }
.fb-field > label {
    display: block;
    font-size: 12.5px;
    color: #5a6578;
    margin-bottom: 7px;
    font-weight: 500;
}
.fb-req { color: #98a2b3; font-weight: 400; }
.fb-req.is-on { color: #e5484d; }
.fb-optional { color: #b0b8c6; font-weight: 400; }

/* 类型选择：2×2 网格，比单选钮更好点按 */
.fb-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.fb-type {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e3e9f2;
    border-radius: 10px;
    background: #fbfcfe;
    color: #5a6578;
    font-size: 13px;
    cursor: pointer;
    transition: all .16s;
    text-align: left;
    min-width: 0;
}
.fb-type i { font-size: 15px; flex: 0 0 auto; }
.fb-type span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fb-type:hover { border-color: #c8d4ee; background: #f5f8ff; color: #3d4658; }
/* 选中态：主色描边 + 浅底。!important 压 app.css 里 button 的通用背景 */
.fb-type.on {
    border-color: #4a6cf7 !important;
    background: rgba(74, 108, 247, .07) !important;
    color: #4a6cf7 !important;
    font-weight: 500;
}

.fb-textarea {
    width: 100%;
    border: 1px solid #e3e9f2;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.65;
    color: #1a202c;
    background: #fbfcfe;
    outline: none;
    resize: vertical;
    min-height: 88px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.fb-textarea:focus {
    border-color: #4a6cf7;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .12);
}
.fb-counter {
    text-align: right;
    font-size: 11.5px;
    color: #b0b8c6;
    margin-top: 4px;
}

.fb-input {
    width: 100%;
    height: 38px;
    border: 1px solid #e3e9f2;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 13px;
    color: #1a202c;
    background: #fbfcfe;
    outline: none;
    box-sizing: border-box;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.fb-input:focus {
    border-color: #4a6cf7;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .12);
}

/* 提示行固定占位，出错时高度不跳 */
.fb-tip {
    font-size: 12px;
    min-height: 17px;
    margin: -3px 0 10px;
    color: #98a2b3;
}
.fb-tip.is-err { color: #e5484d; }
.fb-tip.is-ok { color: #16a34a; }

.fb-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.fb-actions button {
    flex: 1;
    height: 38px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .16s;
}
.fb-cancel {
    background: #f4f6fa;
    color: #5a6578;
    border-color: #e8edf5 !important;
}
.fb-cancel:hover { background: #eaeff7; color: #3d4658; }
.fb-submit {
    background: #4a6cf7;
    color: #fff;
    box-shadow: 0 4px 14px rgba(74, 108, 247, .26);
}
.fb-submit:hover { background: #3d5be0; }
.fb-submit:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; }

/* ---------- 暗色模式 ---------- */
body.dark-mode .fb-modal { background: #1e2433; }
body.dark-mode .fb-head h3 { color: #e2e8f0; }
body.dark-mode .fb-close { color: #7b8698; }
body.dark-mode .fb-close:hover { background: #272d3f; color: #c3cad8; }
body.dark-mode .fb-site {
    background: #232a3b;
    border-color: #2f3648;
    color: #a8b2c4;
}
body.dark-mode .fb-site-name { color: #e2e8f0; }
body.dark-mode .fb-notice { color: #8e99ab; }
body.dark-mode .fb-field > label { color: #a8b2c4; }
body.dark-mode .fb-type {
    background: #232a3b;
    border-color: #2f3648;
    color: #a8b2c4;
}
body.dark-mode .fb-type:hover { border-color: #3b4560; background: #272e40; color: #d5dbe6; }
body.dark-mode .fb-type.on {
    border-color: #4a6cf7 !important;
    background: rgba(74, 108, 247, .18) !important;
    color: #8fa8ff !important;
}
body.dark-mode .fb-textarea,
body.dark-mode .fb-input {
    background: #232a3b;
    border-color: #2f3648;
    color: #e2e8f0;
}
body.dark-mode .fb-textarea:focus,
body.dark-mode .fb-input:focus { background: #262e40; border-color: #4a6cf7; }
body.dark-mode .fb-cancel { background: #232a3b; color: #a8b2c4; border-color: #2f3648 !important; }
body.dark-mode .fb-cancel:hover { background: #2b3448; color: #e2e8f0; }

/* ---------- 小屏 ---------- */
@media (max-width: 480px) {
    .fb-mask { padding: 12px; align-items: flex-end; }
    .fb-modal {
        padding: 18px 16px 14px;
        max-height: calc(100vh - 24px);
        border-radius: 16px 16px 12px 12px;
    }
    .fb-types { gap: 7px; }
    .fb-type { height: 38px; padding: 0 9px; font-size: 12.5px; }
    .fb-type i { font-size: 14px; }
}