/* ==========================================================================
   AIGC 主题美化层  https://www.huoi.cn
   现代化视觉系统：翡翠绿主色 / 柔和阴影 / 圆角 / 深色模式
   本文件为独立覆盖层，不修改旧样式，仅在其后加载
   ========================================================================== */

/* ---------- 设计令牌（亮色） ---------- */
:root {
    --brand:        #16a34a;
    --brand-strong: #15803d;
    --brand-soft:   #22c55e;
    --brand-tint:   rgba(22, 163, 74, .10);
    --brand-tint-2: rgba(22, 163, 74, .18);
    --brand-grad:   linear-gradient(135deg, #22c55e 0%, #16a34a 100%);

    --bg:           #f4f6f5;
    --bg-soft:      #eef2f0;
    --surface:      #ffffff;
    --surface-2:    #f6f8f7;
    --surface-3:    #eef1f0;

    --text:         #1c2321;
    --text-2:       #4b5551;
    --text-muted:   #8a948f;

    --border:       rgba(28, 35, 33, .09);
    --border-strong:rgba(28, 35, 33, .14);

    --radius-sm:    8px;
    --radius:       12px;
    --radius-lg:    16px;
    --radius-pill:  999px;

    --shadow-sm:    0 1px 2px rgba(20, 40, 30, .05);
    --shadow:       0 4px 16px -4px rgba(20, 40, 30, .10);
    --shadow-lg:    0 18px 40px -16px rgba(20, 40, 30, .22);
    --shadow-brand: 0 14px 30px -14px rgba(22, 163, 74, .55);
}

/* ---------- 基础 / 字体 ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    background-color: var(--bg);
    background-image:
        radial-gradient(1200px 480px at 85% -8%, rgba(34, 197, 94, .08), transparent 60%),
        radial-gradient(900px 420px at -10% 12%, rgba(22, 163, 74, .05), transparent 55%);
    background-attachment: fixed;
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a { color: var(--text); transition: color .2s ease; }
a:hover, a:focus { color: var(--brand); text-decoration: none; }
.tab-content p, .mb-5 p { color: var(--text-muted); }

/* 可访问焦点 */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   顶部导航栏 —— 毛玻璃
   ========================================================================== */
.navbar .navbar-content {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--border);
    padding-bottom: 0;
}
.user-info-navbar .user-info-menu > li > a {
    color: var(--text-2);
    font-weight: 500;
    padding: 16px 12px;
}
.user-info-navbar .user-info-menu > li > a:hover {
    color: var(--brand);
    background: transparent;
}
.user-info-navbar .user-info-menu > li:not(.hidden-xs) { color: var(--text-muted); }

/* ==========================================================================
   侧栏
   ========================================================================== */
.sidebar-menu {
    background: var(--surface);
    border-right: 1px solid var(--border);
}
.sidebar-menu .logo-env {
    border-bottom: 1px solid var(--border);
}
.sidebar-menu .main-menu {
    padding: 14px 16px;
    margin-top: 8px;
}
/* 去掉生硬的深色分隔线，改为圆角菜单项 */
.sidebar-menu .main-menu a {
    color: var(--text-2);
    padding: 10px 12px;
    margin: 2px 0;
    border-bottom: 0;
    border-radius: var(--radius-sm);
    font-weight: 500;
    position: relative;
}
.sidebar-menu .main-menu a:hover {
    color: var(--brand-strong);
    background: var(--brand-tint);
}
/* 激活态：绿色文字 + 浅绿底 + 左侧指示条 */
.sidebar-menu .main-menu li.active > a {
    color: var(--brand-strong);
    background: var(--brand-tint);
    font-weight: 600;
}
.sidebar-menu .main-menu li.active > a::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--brand);
}
.sidebar-menu .main-menu li.has-sub > a::before { color: var(--text-muted); }

/* 子菜单 */
.sidebar-menu .main-menu ul li a { padding-left: 34px; }
.sidebar-menu .main-menu ul li a:hover { background: var(--brand-tint); }

/* 折叠态 */
.sidebar-menu.collapsed .main-menu > li.active,
.sidebar-menu.collapsed .main-menu > li li.active { background-color: transparent; }
.sidebar-menu.collapsed .main-menu > li.active > a { background: var(--brand-tint); }

/* ==========================================================================
   搜索首屏
   ========================================================================== */
#search { max-width: 720px; margin: 96px auto 20px; }
#search form { position: relative; }
#search-text {
    height: 56px;
    padding: 0 76px 0 22px;
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: box-shadow .25s ease, border-color .25s ease;
}
#search-text::placeholder { color: var(--text-muted); }
#search-text:focus {
    border-color: var(--brand-soft);
    box-shadow: 0 0 0 4px var(--brand-tint), var(--shadow);
}
#search button {
    top: 6px;
    right: 6px;
    width: 52px;
    height: 44px;
    margin: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brand-grad);
    box-shadow: var(--shadow-brand);
    transition: transform .15s ease, filter .2s ease;
}
#search button:hover { background: var(--brand-grad); filter: brightness(1.05); }
#search button:active { transform: scale(.94); }
#search button i { color: #fff; font-size: 17px; }

/* 搜索引擎切换标签（如启用） */
.search-type li label {
    font-size: 14px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-2);
}
.search-type input:checked + label,
.search-type input:hover + label {
    background: var(--surface);
    color: var(--brand-strong);
}
.s-type-list {
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.s-type-list::before { border-bottom-color: var(--surface); }

/* ==========================================================================
   分区标题 + 标签页
   ========================================================================== */
h4.text-gray {
    color: var(--text) !important;
    font-weight: 700;
    font-size: 17px;
    margin-top: 2.2rem;
}
h4.text-gray > i { color: var(--brand); }

/* 子分类胶囊导航 */
.slider_menu.mini_tab > ul {
    background: var(--surface-3) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill) !important;
    padding: 4px;
    gap: 2px;
}
.slider_menu .nav-item .nav-link {
    border-radius: var(--radius-pill);
    color: var(--text-2);
    padding: 6px 16px;
    font-weight: 500;
    transition: all .2s ease;
}
.slider_menu .nav-item .nav-link:hover {
    color: var(--brand-strong);
    background: var(--brand-tint);
}
.slider_menu .nav-item.active > .nav-link {
    color: #fff;
    background: var(--brand-grad);
    box-shadow: var(--shadow-brand);
}

/* 有子类区块：标签轨道收缩贴合内容 */
.flex-tab .slider_menu.mini_tab {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}
.flex-tab .slider_menu.mini_tab > ul {
    display: inline-flex;
    width: auto;
    max-width: 100%;
}

/* 统一的“查看更多”胶囊（无子类标题行 / 有子类标签行 共用） */
.child-more {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--brand-tint);
    color: var(--brand-strong);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.child-more i { font-size: 15px; transition: transform .2s ease; }
.child-more:hover,
.child-more:focus {
    color: #fff;
    background: var(--brand-grad);
    box-shadow: var(--shadow-brand);
}
.child-more:hover i,
.child-more:focus i { transform: translateX(2px); }

/* 无子类区块：胶囊位于标题行右侧，与 h4 顶部对齐 */
h4.text-gray + .child-more {
    margin-top: 2.2rem;
}

/* 有子类区块：作为 flex 项紧挨标签末尾 */
.flex-tab .child-more {
    float: none;
    flex: 0 0 auto;
    margin: 0 2px 0 12px;
}

@media (max-width: 480px) {
    .child-more { font-size: 12px; padding: 5px 12px; }
    .flex-tab .child-more { margin-left: 10px; }
}

/* ==========================================================================
   网址卡片
   ========================================================================== */
.xe-card { height: 78px; margin-top: 18px; }
.xe-widget.xe-conversations {
    padding: 14px 16px;
    margin: 0 8px;
}
.box2 {
    height: 78px;
    padding: 0 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.box2:hover, .box2:focus {
    transform: translateY(-3px);
    background: var(--surface);
    border-color: var(--brand-tint-2);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--brand-tint);
}
.xe-comment-entry img {
    background: var(--surface-3);
    border-radius: var(--radius-sm);
    padding: 4px;
}
.xe-user-name strong { font-weight: 600; color: var(--text); }
.xe-comment p { color: var(--text-muted); font-size: 13px; }

/* 新 / 热 / 国家 徽标胶囊 */
.site-card-country, .site-card-hot, .site-card-new {
    float: none;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
}
.site-card-country { color: var(--text-muted); background: var(--surface-3); }
.site-card-hot     { color: #ea580c; background: rgba(234, 88, 12, .10); }
.site-card-new     { color: var(--brand-strong); background: var(--brand-tint); }

/* ==========================================================================
   面板 / 评论 / 按钮 / 分页
   ========================================================================== */
.panel, .comments-area {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], textarea, select {
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--brand-soft);
    box-shadow: 0 0 0 3px var(--brand-tint);
    outline: 0;
}
input[type="button"], input[type="submit"],
.but-home, .btn-cat, .panel-tougao button {
    background: var(--brand-grad);
    border-radius: var(--radius-sm);
    font-weight: 600;
}
input[type="button"]:hover, input[type="submit"]:hover,
.but-home:hover, .btn-cat:hover, .panel-tougao button:hover {
    filter: brightness(1.05);
    color: #fff;
}
.posts-nav .page-numbers { border-radius: var(--radius-sm); }
.posts-nav .page-numbers.current,
.posts-nav .page-numbers:not(.dots):hover {
    background: var(--brand-grad);
    box-shadow: var(--shadow-brand);
}
.nothing {
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}
/* 回到顶部 */
footer.main-footer .go-up a { background: var(--brand); box-shadow: var(--shadow-brand); }
footer.main-footer .go-up a:hover { background: var(--brand-strong); }

/* ==========================================================================
   页脚
   ========================================================================== */
footer.main-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* ==========================================================================
   深色模式（body.black）
   ========================================================================== */
body.black {
    --brand:        #4ade80;
    --brand-strong: #86efac;
    --brand-soft:   #4ade80;
    --brand-tint:   rgba(74, 222, 128, .12);
    --brand-tint-2: rgba(74, 222, 128, .22);
    --brand-grad:   linear-gradient(135deg, #4ade80 0%, #22c55e 100%);

    --bg:           #0e1116;
    --bg-soft:      #11151c;
    --surface:      #161b23;
    --surface-2:    #1b212c;
    --surface-3:    #232b38;

    --text:         #e6ebf0;
    --text-2:       #b6c0cc;
    --text-muted:   #8592a3;

    --border:       rgba(255, 255, 255, .08);
    --border-strong:rgba(255, 255, 255, .14);

    background-color: var(--bg);
    background-image:
        radial-gradient(1100px 460px at 85% -8%, rgba(74, 222, 128, .07), transparent 60%),
        radial-gradient(900px 420px at -10% 12%, rgba(34, 197, 94, .05), transparent 55%);
    color: var(--text);
}
body.black, body.black a:not(.btn), body.black .button > a { color: var(--text-2); }
body.black a:hover, body.black a:focus { color: var(--brand); }
body.black p, body.black .tab-content p { color: var(--text-muted); }
body.black .text-gray { color: var(--text) !important; }

body.black .navbar .navbar-content {
    background: rgba(17, 21, 28, .72);
    box-shadow: 0 1px 0 var(--border);
}
body.black .sidebar-menu { background: var(--surface); border-right: 1px solid var(--border); }
body.black .sidebar-menu .logo-env { border-bottom: 1px solid var(--border); }

body.black .xe-widget.xe-conversations,
body.black .panel, body.black .comments-area { background: var(--surface); }
body.black .xe-widget.xe-conversations:hover,
body.black .xe-widget.xe-conversations:focus { background: var(--surface) !important; }
body.black .box2 { background: var(--surface); border: 1px solid var(--border); }
body.black .box2:hover, body.black .box2:focus { background: var(--surface-2); }
body.black .xe-comment-entry img { background: var(--surface-3); }
body.black .xe-user-name strong { color: var(--text); }

body.black #search-text { background: var(--surface); border-color: var(--border); color: var(--text); }
body.black .search-type input:checked + label,
body.black .search-type input:hover + label { background: var(--surface-2); color: var(--brand); }
body.black .s-type-list { background: var(--surface-2); border-color: var(--border); }
body.black .s-type-list::before { border-bottom-color: var(--surface-2); }

body.black select,
body.black input[type="text"], body.black input[type="email"], body.black input[type="url"],
body.black input[type="password"], body.black input[type="search"], body.black input[type="number"],
body.black input[type="tel"], body.black textarea {
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
body.black .slider_menu.mini_tab > ul { background: var(--surface-3) !important; border-color: var(--border); }
body.black footer.main-footer { background: var(--surface); border-top: 1px solid var(--border); }
body.black .site-card-hot { color: #fb923c; background: rgba(251, 146, 60, .12); }

/* 底部深色适配 */
body.black .footer-link-list a { background: var(--surface-3); color: var(--text-2); }
body.black .fav-tip kbd { background: var(--surface-2); border-color: var(--border-strong); }
body.black .qr-item img { background: #fff; }

/* ==========================================================================
   AI 排行榜（.panel-top）
   横向条目：左侧名次徽章 + 右侧图标/标题/分类/简介
   ========================================================================== */
.panel-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.top-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
}

/* 名次徽章（普通名次） */
.rank-no {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/* 前三名：金 / 银 / 铜 */
.top-row.rank-top:nth-child(1) .rank-no {
    color: #fff;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 8px 18px -8px rgba(245, 158, 11, .85);
}
.top-row.rank-top:nth-child(2) .rank-no {
    color: #fff;
    background: linear-gradient(135deg, #d7dee7, #94a3b8);
    box-shadow: 0 8px 18px -8px rgba(148, 163, 184, .85);
}
.top-row.rank-top:nth-child(3) .rank-no {
    color: #fff;
    background: linear-gradient(135deg, #e0aa72, #b4733f);
    box-shadow: 0 8px 18px -8px rgba(180, 115, 63, .85);
}

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

.rank-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.rank-ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.rank-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}
.rank-title:hover { color: var(--brand); }
.rank-region {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--surface-3);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.rank-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.rank-cat {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    color: var(--brand-strong);
    background: var(--brand-tint);
}
.rank-cat:hover { color: #fff; background: var(--brand-grad); }

.rank-desc {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.65;
}

/* ==========================================================================
   底部（footer.main-footer）
   收藏提示条 + 三列栅格 + 版权行
   ========================================================================== */
.main-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 24px 24px;
}

/* 收藏提示条 */
.fav-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--brand-tint);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-size: 13.5px;
}
.fav-tip .fa { color: var(--brand); font-size: 15px; }
.fav-tip kbd {
    display: inline-block;
    min-width: 20px;
    padding: 2px 7px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

/* 三列栅格 */
.footer-grid {
    display: flex;
    gap: 40px;
    margin-top: 32px;
}
.footer-col { min-width: 0; }
.footer-about { flex: 1.5 1 0; }
.footer-links { flex: 0.9 1 0; }
.footer-qr { flex: 1.3 1 0; }

.footer-about-text {
    margin: 0;
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.footer-about-text strong { color: var(--text); }

.footer-col h5 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-col h5::before {
    content: "";
    width: 4px;
    height: 15px;
    border-radius: 2px;
    background: var(--brand-grad);
}

/* 推荐链接 */
.footer-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-link-list a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-size: 13px;
}
.footer-link-list a:hover {
    background: var(--brand-grad);
    color: #fff;
}

/* 二维码 */
.footer-qr {
    display: flex;
    gap: 24px;
}
.qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.qr-item img {
    width: 104px;
    height: 104px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    object-fit: contain;
}
.qr-item span {
    font-size: 13px;
    color: var(--text-2);
}

/* 版权行 */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}
.footer-bottom a { color: var(--text-2); }
.footer-bottom a:hover { color: var(--brand); }
.footer-icp a { color: var(--text-muted); }
.footer-icp a:hover { color: var(--brand); }

/* ==========================================================================
   响应式微调
   ========================================================================== */
@media screen and (max-width: 991px) {
    .footer-grid { flex-wrap: wrap; gap: 32px; }
    .footer-about { flex: 1 1 100%; }
    .footer-links, .footer-qr { flex: 1 1 0; }
}

@media screen and (max-width: 767px) {
    #search { margin: 24px auto 16px; }
    #search-text { height: 52px; }
    .xe-card { height: 74px; }
    .box2 { height: 74px; }
    .slider_menu.mini_tab > ul { border-radius: var(--radius) !important; }

    .top-row { padding: 14px; gap: 12px; }
    .rank-no { width: 36px; height: 36px; font-size: 16px; }
    .rank-ico { width: 34px; height: 34px; }
    .rank-title { font-size: 15px; }
    .rank-region { margin-left: 0; }

    .footer-inner { padding: 28px 16px 20px; }
    .fav-tip { border-radius: var(--radius); font-size: 12.5px; text-align: center; }
    .footer-grid { margin-top: 24px; gap: 28px; }
    .footer-links, .footer-qr { flex: 1 1 100%; }
    .footer-qr { justify-content: center; gap: 32px; }
    .footer-bottom {
        justify-content: center;
        text-align: center;
        margin-top: 28px;
    }
    .footer-icp { width: 100%; text-align: center; }

    /* BS3 兼容：模板中使用了 BS4 风格的裸 .col-12（无 xs/sm/md/lg 后缀），
       在 <768px 下不命中任何列规则，补回宽度与 15px 内边距，
       保证嵌套 .row 的负 margin 有 padding 可抵消，避免横向溢出 */
    .col-12 {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
}