/* ==========================================================================
   ICFK · UI 重构层  icfk-refresh.css  v2  (2026-09-01)
   --------------------------------------------------------------------------
   加载顺序必须排在所有内联 <style> 之后。靠加载顺序取胜,
   只在需要压过内联 style="" 属性的地方才用 !important。

   覆盖范围:index.php(门户/首页/论坛/排行/后台)、docs.php、servers.php、
   market.php、panel.php,以及走 app_shell 的全部后台页。

   做三件事:
     A  修三个确诊的 bug
     B  从设计变量层拆掉"一眼 AI 生成"的视觉特征
     C  移动端与无障碍收尾

   B 针对的是 AI 生成 UI 的固定指纹:蓝紫渐变、万物居中、大圆角配大扩散
   阴影、浮动与入场动画、标题塞 emoji、中点罗列功能。逐条对治。
   目标风格:军事模拟社区该有的样子,克制、方正、信息优先。
   ========================================================================== */


/* ==========================================================================
   A1 · 首页发灰
   --------------------------------------------------------------------------
   根因:community-portal.css:122 的 .portal-scene::after 无条件铺了一层
        rgb(8 16 30 / .62~.74) 深色蒙版,而浅色蒙版只在有图时生效。
        浅色首屏被深色蒙版盖住,实测背景 rgb(80,86,98),副标题对比度 1.03:1。
   ========================================================================== */
.splash-bg.portal-scene::after {
    background: linear-gradient(180deg,
                rgb(247 249 252 / .72),
                rgb(233 238 245 / .86)) !important;
}
.splash-bg.portal-scene::before {
    filter: blur(var(--scene-blur, 0px)) brightness(1) !important;
    opacity: .85;
}


/* ==========================================================================
   A2 · 文字对比度
   --------------------------------------------------------------------------
   --c-text3 #64748B 在 #eef2ff 上只有 4.26:1,差一点到 WCAG AA 的 4.5。
   调到 #5B6B82 后 4.85:1 通过,色相不变。
   --ui-text-muted #8a97ab 在白底上 3.0:1,同样不达标,一并调。
   ========================================================================== */
:root {
    --c-text3: #5B6B82;
    --ui-text-muted: #6b7889;
}


/* ==========================================================================
   A3 · 文档中心顶栏错位
   --------------------------------------------------------------------------
   docs.php 写了 .ui-topbar{position:fixed} 却没给 left/right,
   fixed 元素没有左右定位会收缩成内容宽度,顶栏在 1500px 左右断掉。
   附带:ux-overhaul.css:35 的 .ui-nav{overflow-x:auto} 在桌面端会造成
   导航条下方出现横向滚动条、末尾导航项被裁切。
   ========================================================================== */
.ui-topbar { left: 0; right: 0; width: 100%; }
@media (min-width: 981px) {
    .ui-nav { overflow-x: visible; flex-wrap: nowrap; }
    .ui-nav-link { padding: 0 10px; }
}


/* ==========================================================================
   B0 · 设计变量层
   --------------------------------------------------------------------------
   系统是变量驱动的,从这里改能一次带动全站,不用逐个类去追。
   主色由 #2f6bff 蓝换成钢青 #2f4a6d(军事图纸的蓝),
   靛紫辅助色 --ui-primary-2 直接等于主色,渐变就此塌成单色。
   圆角从 12/16/20px 收到 4/6/8px,阴影从三层大扩散收到 1px 边框级别。
   ========================================================================== */
:root {
    --icfk-steel:      #2f4a6d;
    --icfk-steel-dark: #223751;
    --icfk-olive:      #6b7a4f;
    --icfk-line:       #c9d3e0;
    --icfk-ink:        #16202c;

    --ui-primary:        #2f4a6d;
    --ui-primary-hover:  #35547b;
    --ui-primary-strong: #223751;
    --ui-primary-2:      #2f4a6d;
    --ui-primary-soft:   #eef2f7;
    --ui-primary-softer: #f6f8fa;
    --ui-accent:         #6b7a4f;
    --ui-info:           #2f4a6d;
    --ui-info-soft:      #eef2f7;
    --ui-ring:           rgb(47 74 109 / .20);

    --ui-gradient: var(--icfk-steel);

    --ui-radius-xs: 3px;
    --ui-radius-sm: 4px;
    --ui-radius:    5px;
    --ui-radius-lg: 6px;
    --ui-radius-xl: 8px;

    --ui-shadow-xs: 0 1px 2px rgb(22 32 44 / .05);
    --ui-shadow-sm: 0 1px 2px rgb(22 32 44 / .06);
    --ui-shadow:    0 1px 3px rgb(22 32 44 / .08);
    --ui-shadow-lg: 0 4px 14px rgb(22 32 44 / .10);

    --c-accent:  #2f4a6d;
    --c-accent2: #2f4a6d;
    --c-grad:    #2f4a6d;
}
[data-theme="dark"] {
    --icfk-line: #2b3849;
    --icfk-ink:  #e6edf6;
    --ui-primary:        #7796bd;
    --ui-primary-hover:  #89a6c9;
    --ui-primary-strong: #a3bcd8;
    --ui-primary-2:      #7796bd;
    --ui-text-muted:     #93a1b5;
}

/* 渐变文字:--ui-gradient 现在是实色,背景裁切会让字变透明,关掉裁切 */
.ui-gradient-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--icfk-steel) !important;
    color: var(--icfk-steel) !important;
}
.ui-brand-mark { background: var(--icfk-steel) !important; box-shadow: none !important; border-radius: 5px; }
.ui-hero { border-radius: var(--ui-radius-lg); background: var(--icfk-steel-dark); box-shadow: none; }


/* ==========================================================================
   B1 · 蓝紫渐变
   --------------------------------------------------------------------------
   #3b82f6 到 #a855f7 是 AI 生成 UI 最强的识别特征,也是本站"一眼假"的
   主要来源。全站换成单一钢青,紫色全部移除。
   ========================================================================== */
.splash-title { color: var(--icfk-ink); letter-spacing: -.015em; }
.splash-title span {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--icfk-steel) !important;
    color: var(--icfk-steel);
}
.splash-logo-icon {
    background: var(--icfk-steel) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    animation: none !important;
}

/* 首屏装饰层:水印大字、扫描线、动态网格是"科技感模板"的标准三件套 */
.splash-watermark,
.splash-scan,
.splash-grid { display: none !important; }

/* 首屏底色:去掉两层彩色径向晕染,留干净的浅灰蓝 */
.splash-bg {
    background: linear-gradient(180deg, #f7f9fc 0%, #eef1f6 100%) !important;
}


/* ==========================================================================
   B2 · 首屏改左对齐
   --------------------------------------------------------------------------
   万物居中是模板感最大的来源,真人排版会建立左侧基线。
   ========================================================================== */
.splash-wrapper {
    align-items: stretch;
    justify-content: flex-start;
    padding: 72px 40px 56px;
}
.splash-content {
    text-align: left;
    max-width: 1180px;
    margin: 0 auto;
    animation: none;
}
.splash-logo-icon { margin: 0 0 20px; }

/* 徽章改方角标签,像军事文书的密级戳 */
.splash-badge {
    border-radius: 2px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--icfk-line);
    color: var(--icfk-steel);
    font-size: 10px;
    letter-spacing: .18em;
}
.splash-badge-dot {
    background: var(--icfk-olive);
    box-shadow: none;
    animation: none;
    border-radius: 1px;
    width: 5px; height: 5px;
}
.splash-tagline { max-width: 640px; }


/* ==========================================================================
   B3 · 数据卡改数据条
   --------------------------------------------------------------------------
   4 张等宽圆角卡配巨大居中数字是仪表盘模板的标准长相。
   改成共享一条基线、竖线分隔的数据行。
   ========================================================================== */
.splash-data-cards {
    max-width: 100%;
    margin: 0 0 28px;
    gap: 0;
    border: 1px solid var(--icfk-line);
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}
.splash-data-card {
    text-align: left;
    padding: 18px 20px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--icfk-line);
    border-radius: 0;
    box-shadow: none;
}
.splash-data-card:last-child { border-right: 0; }
@media (max-width: 719px) {
    .splash-data-card:nth-child(2n) { border-right: 0; }
    .splash-data-card:nth-child(-n+2) { border-bottom: 1px solid var(--icfk-line); }
}
.splash-data-val {
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 30px;
    font-weight: 600;
    color: var(--icfk-ink);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.splash-data-lbl {
    font-size: 11px;
    color: var(--c-text3);
    letter-spacing: .08em;
    margin-top: 5px;
    font-weight: 500;
}
.splash-tier-section {
    border-radius: 3px;
    border: 1px solid var(--icfk-line);
    box-shadow: none;
}
.splash-tier-bar { border-radius: 2px; overflow: hidden; }


/* ==========================================================================
   B4 · 按钮:方正、实色、无渐变无浮起
   ========================================================================== */
.splash-actions { justify-content: flex-start; }
.splash-btn {
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease;
}
.splash-btn--primary {
    background: var(--icfk-steel) !important;
    border: 1px solid var(--icfk-steel) !important;
    color: #fff !important;
}
.splash-btn--primary:hover { background: var(--icfk-steel-dark) !important; }
.splash-btn--secondary {
    background: #fff !important;
    border: 1px solid var(--icfk-line) !important;
    color: var(--icfk-ink) !important;
}
.splash-btn--secondary:hover { border-color: var(--icfk-steel) !important; }
.splash-btn:hover { transform: none !important; }

/* 通用按钮:去掉悬停位移与大阴影 */
.btn, .ui-button, .home-banner-btn, .forum-btn, .sr-quiz-btn {
    border-radius: 4px;
}
.btn:hover, .ui-button:hover, .home-banner-btn:hover,
.forum-btn:hover, .sr-quiz-btn:hover,
.home-card:hover, .portal-fq-card:hover, .ui-card:hover {
    transform: none !important;
}
.home-banner-btn:hover { box-shadow: none !important; }
.ui-button--primary { background: var(--icfk-steel); border-color: var(--icfk-steel); }
.ui-button--primary:hover { background: var(--icfk-steel-dark); border-color: var(--icfk-steel-dark); }


/* ==========================================================================
   B5 · 顶部导航去药丸化
   ========================================================================== */
.portal-nav-cta {
    background: var(--icfk-steel) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font-weight: 600;
}
.portal-nav-cta:hover { background: var(--icfk-steel-dark) !important; transform: none !important; }
.portal-nav-logo-icon { border-radius: 4px !important; box-shadow: none !important; }

/* 顶栏毛玻璃改实色。半透明加模糊在滚动时会让底下的表格文字透出来 */
.ui-topbar, .topbar {
    background: var(--ui-surface, #fff) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .ui-topbar,
[data-theme="dark"] .topbar { background: #131c2e !important; }
.dropdown, .topbar-popover, .ui-account-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--ui-surface, #fff) !important;
    border-radius: 6px;
}
.modal-overlay, .modal-backdrop, .modal-mask {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ==========================================================================
   B6 · 区块标题
   --------------------------------------------------------------------------
   居中大字改左对齐加一道墨线,像文书的章节头。
   emoji 写死在 HTML 里,CSS 删不掉字符,已同步改过 HTML。
   ========================================================================== */
.portal-section-head {
    text-align: left;
    border-top: 2px solid var(--icfk-ink);
    padding-top: 14px;
    margin-bottom: 20px;
}
.portal-section-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--icfk-ink);
}
.portal-section-sub { font-size: 13px; color: var(--c-text3); margin-top: 4px; }


/* ==========================================================================
   B7 · 全局收敛圆角与阴影
   --------------------------------------------------------------------------
   18px 圆角配 0 12px 36px 的大扩散阴影是模板默认值。
   真实产品的卡片通常是 4-8px 圆角 + 1px 边框 + 极轻阴影。
   ========================================================================== */
.home-card,
.portal-fc-card,
.portal-fq-card,
.ui-card,
.home-feed,
.home-mine-card,
.welcome-strip,
.docs-visual-header,
.sr-quiz-panel,
.forum-card,
.market-hero-main,
.market-hero-side,
.config-panel {
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgb(22 32 44 / .06) !important;
}
.lb-hero, .sv-page-hero, .panel-hero, .home-banner, .home-hero {
    border-radius: 6px !important;
    box-shadow: none !important;
}
.modal, .ui-modal, .sqprof-modal { border-radius: 8px !important; }

/* 深色横幅:蓝紫渐变换钢青单色,与首屏统一 */
.lb-hero.has-scene::before {
    background: linear-gradient(90deg,
                rgb(22 32 44 / .88), rgb(34 55 81 / .70), rgb(34 55 81 / .40)) !important;
}
.sv-page-hero::before {
    background: linear-gradient(90deg,
                rgb(22 32 44 / .90), rgb(34 55 81 / .64), rgb(34 55 81 / .32)) !important;
}
.home-banner { background: var(--icfk-steel-dark) !important; }
.home-banner-tag {
    border-radius: 2px;
    background: rgb(255 255 255 / .14);
    letter-spacing: .14em;
    font-size: 11px;
}
.home-banner-btn--primary { color: var(--icfk-steel) !important; }


/* ==========================================================================
   B8 · 图标位
   --------------------------------------------------------------------------
   彩色渐变方块里塞一个 emoji,是模板卡片的标准长相。
   HTML 已换成站内 SVG sprite,这里把容器改成描边式的方块。
   ========================================================================== */
.home-card-icon,
.portal-fq-icon,
.home-quick-icon,
.card-icon {
    background: var(--ui-primary-soft) !important;
    color: var(--icfk-steel) !important;
    border: 1px solid var(--icfk-line);
    border-radius: 4px !important;
    box-shadow: none !important;
}
.home-card-icon svg,
.portal-fq-icon svg,
.home-quick-icon svg,
.card-icon svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
}
.home-card.has-bg .home-card-icon {
    background: rgb(255 255 255 / .16) !important;
    border-color: rgb(255 255 255 / .28);
    color: #fff !important;
}
.forum-side-item-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.related-card .em svg { width: 20px; height: 20px; }
.jump-banner-icon svg { width: 18px; height: 18px; }


/* ==========================================================================
   B9 · 入场与浮动动画
   --------------------------------------------------------------------------
   卡片逐个 stagger 上浮、logo 呼吸、徽章弹跳,这些是模板自带的"精致感",
   真实产品很少这么做,而且每次切换视图都要重播一遍,干扰阅读。
   保留过渡,去掉入场。
   ========================================================================== */
.home-cards .home-card,
.welcome-strip,
.home-mine-card,
.home-feed,
.sidebar-badge,
.view-pane,
.splash-stat,
.portal-fc-card {
    animation: none !important;
}
.sidebar-item:hover { transform: none; }


/* ==========================================================================
   B10 · 数字对齐
   --------------------------------------------------------------------------
   排行榜、战绩、价格这些地方数字要能竖着对齐,用等宽数字。
   ========================================================================== */
.splash-data-val, .lb-row, .rank-badge, .player-points, .home-mine-stats,
.ui-price, .ui-stat-value, .server-stat-value, .home-feed-meta,
.forum-topic-meta, .sqprof-info-row b {
    font-variant-numeric: tabular-nums;
}
.rank-badge {
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}


/* ==========================================================================
   B11 · 表格与列表
   --------------------------------------------------------------------------
   数据密集的地方,行分隔线比卡片阴影更好读。
   ========================================================================== */
.ui-table-wrap { border-radius: 6px; }
.ui-table th {
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ui-text-secondary);
}
.ui-table tbody tr:hover, .lb-row:hover, .home-feed-item:hover {
    background: var(--ui-surface-muted, #f6f8fc);
}
.lb-row.top-1, .lb-row.top-2, .lb-row.top-3 { background: transparent; }
.lb-row.top-1 .rank-badge { background: var(--icfk-steel); color: #fff; }
.lb-row.top-2 .rank-badge,
.lb-row.top-3 .rank-badge { background: var(--ui-primary-soft); color: var(--icfk-steel); }


/* ==========================================================================
   B12 · 文档中心与市场页
   ========================================================================== */
.docs-visual-header { background: var(--icfk-steel-dark); border-radius: 6px; }
.docs-visual-header.ui-scene::after {
    background: linear-gradient(105deg, rgb(22 32 44 / .86), rgb(22 32 44 / var(--scene-overlay, .68)));
}
.market-hero-main.has-image { background-color: var(--icfk-steel-dark); }
.market-hero-main.has-image .ui-button--secondary { backdrop-filter: none; }
.market-hero-side { background: var(--ui-primary-soft); border-color: var(--icfk-line); }
.ui-step-index { border-radius: 4px; }


/* ==========================================================================
   C1 · 移动端
   --------------------------------------------------------------------------
   触摸目标 44px,输入框字号 16px(小于 16px 时 iOS Safari 会自动放大页面)。
   ========================================================================== */
@media (max-width: 768px) {
    .splash-wrapper { padding: 40px 18px 32px; }
    .splash-data-card { padding: 14px 14px; }
    .splash-data-val { font-size: 24px; }
    .portal-section-title { font-size: 19px; }

    .btn, .ui-button, .home-banner-btn, .forum-btn,
    .splash-btn, .portal-nav-cta, .forum-action-btn {
        min-height: 44px;
        padding-top: 0; padding-bottom: 0;
        display: inline-flex; align-items: center; justify-content: center;
    }
    input, textarea, select, .ui-input, .forum-search-input {
        font-size: 16px;
        min-height: 44px;
    }
    /* 批量操作按钮改横向可滚,不挤成两行 */
    .home-banner-actions, .forum-actions, .splash-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 2px;
    }
    .home-banner-actions::-webkit-scrollbar,
    .forum-actions::-webkit-scrollbar,
    .splash-actions::-webkit-scrollbar { display: none; }
    .home-banner-actions > *, .forum-actions > *, .splash-actions > * { flex: 0 0 auto; }
}


/* ==========================================================================
   C2 · 降级与无障碍
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
:focus-visible {
    outline: 2px solid var(--icfk-steel);
    outline-offset: 2px;
}
[data-theme="dark"] .splash-bg.portal-scene::after {
    background: linear-gradient(180deg, rgb(13 20 32 / .78), rgb(13 20 32 / .90)) !important;
}
[data-theme="dark"] .splash-bg {
    background: linear-gradient(180deg, #0d1420 0%, #111a28 100%) !important;
}
[data-theme="dark"] .splash-data-cards { background: transparent; }
[data-theme="dark"] :focus-visible { outline-color: #7796bd; }


/* ==========================================================================
   C3 · 硬核主题豁免
   --------------------------------------------------------------------------
   themes-hardcore.css 的 7 套配色是这个社区自己的东西,不是 AI 味,
   挂了 theme-hardcore 类时不套用上面的钢青主色,让它保持原样。
   ========================================================================== */
body.theme-hardcore {
    --ui-primary:   var(--c-accent, #22d3ee);
    --ui-primary-2: var(--c-accent, #22d3ee);
}
body.theme-hardcore .splash-bg,
body.theme-hardcore .home-banner { background: inherit !important; }
body.theme-hardcore .splash-title span {
    -webkit-text-fill-color: var(--c-accent) !important;
    color: var(--c-accent);
}