/* ============================================================
   准上市 - 首页独立样式表（home.css）
   不依赖 vogue.css / layui.css，自成体系
   设计语言：深藏蓝顶栏 + vogue 蓝导航 + 琥珀数字
   ============================================================ */

:root {
    --c-navy: #283149;          /* 顶栏 深蓝（vogue 同款） */
    --c-navy-2: #3a4562;        /* 导航/栏头 深蓝渐变 */
    --c-blue: #1e9fff;         /* 主色：vogue 蓝（导航 active / 按钮 / 强调） */
    --c-blue-dark: #1a87db;
    --c-red: #f73859;          /* 金融红（仅数据涨跌用） */
    --c-red-dark: #d92b4a;
    --c-amber: #f59e0b;         /* 数字强调色 */
    --c-blue-soft: #dbeefc;      /* 浅蓝背景（hover 底 / 标签底） */
    --c-text: #1e293b;         /* 正文 */
    --c-text-2: #475569;       /* 次级文字 */
    --c-text-3: #94a3b8;       /* 辅助文字 */
    --c-bg: #f5f5f5;           /* 页面背景（vogue 同款） */
    --c-card: #ffffff;        /* 卡片背景 */
    --c-line: #e2e8f0;       /* 分割线 */
    --c-chip: #f1f5f9;       /* chip 背景 */
    --radius: 12px;
    --shadow: 0 4px 16px rgba(40, 49, 73, .06);
    --shadow-hover: 0 8px 24px rgba(40, 49, 73, .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 16px;
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ============ ① 顶栏（深藏蓝） ============ */
.topbar {
    background: var(--c-navy);
    padding: 18px 0;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
/* 纯文字 LOGO：不显示图片，只显示"准上市"三个字 */
.brand-logo img { display: none; }
.brand-logo a {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1.1;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    display: inline-block;
}
.brand-sub {
    color: var(--c-text-3);
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 2px;
}
.ad-banner {
    flex: 1;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border-radius: 8px;
    overflow: hidden;
}
.ad-banner ins { width: 100%; }

/* ============ ② 导航条（vogue 同款：深蓝底 + 蓝色 active） ============ */
.navbar {
    background: var(--c-navy);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(40,49,73,.25);
}
.navbar .wrap {
    display: flex;
    align-items: stretch;
}
.nav-list {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    padding: 0 6px;
}
.nav-list::-webkit-scrollbar { display: none; }
.nav-list a {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 22px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .25s;
}
.nav-list a:hover { background: rgba(219,237,243,.18); }
.nav-list a.active {
    background: var(--c-blue);
    font-weight: 700;
}

/* ============ ③ 搜索条 ============ */
.searchbar {
    background: var(--c-card);
    border-bottom: 1px solid var(--c-line);
    padding: 16px 0;
}
.searchbar .wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}
.searchbar label {
    font-size: 15px;
    color: var(--c-text-2);
    font-weight: 600;
    flex-shrink: 0;
}
.search-form {
    display: flex;
    flex: 1;
    max-width: 520px;
}
.search-form input {
    flex: 1;
    height: 44px;
    border: 2px solid var(--c-line);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 0 16px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s;
}
.search-form input:focus { border-color: var(--c-blue); }
.search-form button {
    width: 110px;
    height: 44px;
    background: var(--c-blue);
    color: #fff;
    border: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.search-form button:hover { background: var(--c-blue-dark); }
.hot-keywords {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hot-keywords span {
    font-size: 13px;
    color: var(--c-text-3);
}
.hot-keywords a {
    font-size: 13px;
    color: var(--c-text-2);
    padding: 3px 10px;
    background: var(--c-chip);
    border-radius: 20px;
    transition: all .2s;
}
.hot-keywords a:hover {
    background: var(--c-blue);
    color: #fff;
    transform: translateY(-1px);
}

/* ============ ④ 速览数字卡（深色 hero） ============ */
.hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(245, 158, 11, .12) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(30, 159, 255, .18) 0%, transparent 45%);
    pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.hero-title em {
    font-style: normal;
    color: var(--c-amber);
}
.hero-sub {
    font-size: 14px;
    color: var(--c-text-3);
    margin-bottom: 28px;
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.stat {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
    backdrop-filter: blur(4px);
    transition: transform .25s, background .25s;
}
.stat:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.1);
}
.stat-num {
    font-size: 38px;
    font-weight: 800;
    color: var(--c-amber);
    line-height: 1;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.stat-num small {
    font-size: 16px;
    color: var(--c-text-3);
    font-weight: 400;
    margin-left: 4px;
}
.stat-label {
    font-size: 14px;
    color: var(--c-text-3);
    letter-spacing: 1px;
}
.stat-link {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--c-amber);
    opacity: .8;
}
.stat-link:hover { opacity: 1; }

/* ============ ⑤ 通用区块 ============ */
section.block {
    padding: 36px 0;
}
.block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.block-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    position: relative;
    padding-left: 16px;
}
.block-title::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 5px;
    background: var(--c-blue);
    border-radius: 3px;
}
.block-more {
    font-size: 14px;
    color: var(--c-blue);
    font-weight: 600;
    transition: all .2s;
}
.block-more:hover {
    letter-spacing: 1px;
    text-decoration: underline;
}

/* ============ ⑥ 三栏数据区 ============ */
/* 列 1（近期上市）全宽一行；列 2/3（申购/上会）并排两列；列 4/5（ETF/概念）各全宽一行 */
.data-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.data-row .data-col.full-width { grid-column: 1 / -1; }
.data-col {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow .25s;
}
.data-col:hover { box-shadow: var(--shadow-hover); }
.col-head {
    background: var(--c-navy);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.col-head h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
}
.col-head a {
    color: var(--c-amber);
    font-size: 13px;
    font-weight: 500;
}
.col-head a:hover { text-decoration: underline; }
.col-head .col-sub {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 8px;
}
.col-body { padding: 8px 0; }

/* 6.1 上市表格（全宽列，保留表格形式） */
.list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.list-table th {
    background: var(--c-chip);
    color: var(--c-text-2);
    font-weight: 600;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 2px solid var(--c-line);
    font-size: 13px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.list-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text-2);
    font-variant-numeric: tabular-nums;
}
.list-table tr:last-child td { border-bottom: none; }
.list-table tbody tr { transition: background .15s; }
.list-table tbody tr:hover { background: var(--c-blue-soft); }
.list-table .name {
    color: var(--c-text);
    font-weight: 600;
}
.list-table .name:hover { color: var(--c-blue); text-decoration: underline; }
.list-table .code {
    font-family: Consolas, Monaco, monospace;
    color: var(--c-text-3);
    font-size: 13px;
}
.mkt-badge {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--c-chip);
    color: var(--c-text-2);
}
.mkt-badge.上 { background: #d1fae5; color: #047857; }
.mkt-badge.创 { background: #fef3c7; color: #b45309; }
.mkt-badge.科 { background: #dbeafe; color: #1d4ed8; }
.mkt-badge.北 { background: #d1fae5; color: #047857; }

/* 6.2 紧凑卡片列表（申购 / 上会） */
.compact-list { list-style: none; }
.compact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--c-line);
    transition: background .15s;
}
.compact-list li:last-child { border-bottom: none; }
.compact-list li:hover { background: var(--c-blue-soft); }
.cl-rank {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-chip);
    color: var(--c-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.compact-list li:nth-child(1) .cl-rank { background: var(--c-blue); color: #fff; }
.compact-list li:nth-child(2) .cl-rank { background: var(--c-blue-dark); color: #fff; }
.compact-list li:nth-child(3) .cl-rank { background: var(--c-amber); color: #fff; }
.cl-main { flex: 1; min-width: 0; }
.cl-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-name:hover { color: var(--c-blue); }
.cl-meta {
    font-size: 12px;
    color: var(--c-text-3);
    margin-top: 2px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cl-meta .mkt { color: var(--c-text-2); font-weight: 500; }
.cl-right {
    text-align: right;
    flex-shrink: 0;
}
.cl-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-red);
    font-variant-numeric: tabular-nums;
}
.cl-price-na { color: var(--c-text-3); font-weight: 400; font-size: 13px; }
.cl-date {
    font-size: 12px;
    color: var(--c-text-3);
    margin-top: 2px;
}

/* 概念/行业表专用：涨跌幅涨跌色 + 小代码 */
.list-table .pct-up {
    color: #f73859;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.list-table .pct-down {
    color: #047857;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.list-table .code-sm {
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    color: var(--c-text-3);
    margin-left: 4px;
}
.list-table .name a {
    color: var(--c-text);
    font-weight: 600;
    text-decoration: none;
}
.list-table .name a:hover { color: var(--c-blue); text-decoration: underline; }

/* 状态标签 */
.status-tag {
    display: inline-block;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.status-tag.pass { background: #d1fae5; color: #047857; }
.status-tag.wait { background: #fef3c7; color: #b45309; }
.status-tag.pending { background: var(--c-chip); color: var(--c-text-3); }

/* ============ ⑦ IPO 注册进展（全宽单列卡片） ============ */
.iip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.iip-col {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.iip-col-head {
    padding: 14px 20px;
    background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.iip-col-head h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}
.iip-col-head .cnt {
    font-size: 13px;
    color: var(--c-amber);
    font-weight: 600;
}
.iip-list { list-style: none; padding: 6px 0; }
.iip-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px dashed var(--c-line);
    font-size: 14px;
    transition: background .15s;
}
.iip-list li:last-child { border-bottom: none; }
.iip-list li:hover { background: var(--c-blue-soft); }
.iip-name {
    font-weight: 700;
    color: var(--c-text);
    flex-shrink: 0;
    min-width: 72px;
}
.iip-name:hover { color: var(--c-blue); }
.iip-industry {
    color: var(--c-text-3);
    font-size: 13px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.iip-market {
    flex-shrink: 0;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--c-chip);
    color: var(--c-text-2);
    font-weight: 500;
}
.iip-date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--c-text-3);
    font-variant-numeric: tabular-nums;
    min-width: 72px;
    text-align: right;
}

/* ============ ⑧ 市场动态（左侧资讯 + 右侧热门） ============ */
.news-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}
.news-list {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.news-item {
    padding: 18px 22px;
    border-bottom: 1px solid var(--c-line);
    transition: background .15s;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: #f8fafc; }
.news-item h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-item h4 a:hover { color: var(--c-blue); text-decoration: underline; }
.news-item .excerpt {
    font-size: 13px;
    color: var(--c-text-3);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}
.news-item .time {
    font-size: 12px;
    color: var(--c-text-3);
    font-variant-numeric: tabular-nums;
}
.hot-box {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.hot-box h3 {
    background: var(--c-navy);
    color: #fff;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}
.hot-list { list-style: none; counter-reset: hot; }
.hot-list li {
    counter-increment: hot;
    position: relative;
    padding: 13px 20px 13px 44px;
    border-bottom: 1px solid var(--c-line);
    font-size: 14px;
    color: var(--c-text-2);
    line-height: 1.5;
    transition: background .15s;
}
.hot-list li:last-child { border-bottom: none; }
.hot-list li:hover { background: var(--c-blue-soft); color: var(--c-blue); }
.hot-list li::before {
    content: counter(hot);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c-chip);
    color: var(--c-text-3);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hot-list li:nth-child(1)::before { background: var(--c-blue); color: #fff; }
.hot-list li:nth-child(2)::before { background: var(--c-blue-dark); color: #fff; }
.hot-list li:nth-child(3)::before { background: var(--c-amber); color: #fff; }

/* ============ ⑨ 工具/链接区 ============ */
.tool-section {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
}
.tool-group {
    margin-bottom: 18px;
}
.tool-group:last-child { margin-bottom: 0; }
.tool-group h4 {
    font-size: 14px;
    color: var(--c-text-3);
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-chip);
    color: var(--c-text-2);
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 14px;
    transition: all .2s;
    border: 1px solid transparent;
}
.chip:hover {
    background: var(--c-blue);
    color: #fff;
    border-color: var(--c-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 159, 255, .25);
}
.chip-icon { font-size: 16px; }

/* ============ ⑩ 页脚 ============ */
.footer {
    background: var(--c-navy);
    color: var(--c-text-3);
    padding: 40px 0 24px;
    margin-top: 48px;
}
.footer .wrap { }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 28px;
}
.footer h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 1px;
}
.footer-desc {
    font-size: 13px;
    line-height: 1.8;
    max-width: 420px;
}
.footer-col a {
    display: block;
    font-size: 13px;
    color: var(--c-text-3);
    padding: 4px 0;
    transition: color .2s;
}
.footer-col a:hover { color: var(--c-amber); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 18px;
    font-size: 12px;
    text-align: center;
    line-height: 1.8;
}
.footer-bottom a { color: var(--c-text-3); margin: 0 8px; }
.footer-bottom a:hover { color: var(--c-amber); }
.beian { margin-top: 6px; }

/* ============ ⑪ 工具矩阵页专用组件（tools.html） ============ */

/* 区块副标题 */
.block-sub {
    font-size: 14px;
    color: var(--c-text-3);
    font-weight: 400;
}
.block-head .block-sub { margin-left: auto; margin-right: 24px; }

/* 旗舰工具卡片（全宽） */
.flagship-card {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    gap: 24px;
    padding: 28px;
    transition: box-shadow .25s;
}
.flagship-card:hover { box-shadow: var(--shadow-hover); }
.flagship-icon {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 6px 16px rgba(30, 159, 255, .3);
}
.flagship-body { flex: 1; min-width: 0; }
.flagship-body h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 8px;
}
.flagship-body p {
    font-size: 15px;
    color: var(--c-text-2);
    line-height: 1.7;
    margin-bottom: 14px;
}
.flagship-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.f-tag {
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--c-blue-soft);
    color: var(--c-blue-dark);
    border: 1px solid #bde0fb;
    font-weight: 500;
}
.flagship-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-blue);
    color: #fff;
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 700;
    transition: all .2s;
}
.flagship-btn:hover {
    background: var(--c-blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 159, 255, .35);
}

/* 工具卡片网格 */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.tool-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.tool-card {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    transition: transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
    border-top: 3px solid transparent;
}
.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-top-color: var(--c-blue);
}
.tool-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--c-chip);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
}
.tool-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tool-card .ver {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-blue);
    background: var(--c-blue-soft);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: .5px;
}
.tool-card p {
    font-size: 13px;
    color: var(--c-text-2);
    line-height: 1.7;
    margin-bottom: 12px;
}
.tool-feats {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    flex: 1;
}
.tool-feats li {
    font-size: 12px;
    color: var(--c-text-3);
    padding: 3px 0 3px 16px;
    position: relative;
}
.tool-feats li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-blue);
    font-weight: 700;
}
.tool-card > a {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-blue);
    transition: letter-spacing .2s;
}
.tool-card > a:hover { letter-spacing: 1px; }

/* 新手入门知识卡片 */
.kb-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.kb-item {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: transform .2s, box-shadow .2s;
    border-left: 3px solid var(--c-chip);
}
.kb-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-left-color: var(--c-blue);
}
.kb-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--c-chip);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    width: 38px;
}
.kb-item:hover .kb-num { color: var(--c-blue); }
.kb-body { flex: 1; min-width: 0; }
.kb-body h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 6px;
}
.kb-body p {
    font-size: 13px;
    color: var(--c-text-2);
    line-height: 1.6;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kb-body a {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-blue);
}
.kb-body a:hover { text-decoration: underline; }

/* 关于本站卡片 */
.about-card {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}
.about-text p {
    font-size: 15px;
    color: var(--c-text-2);
    line-height: 1.8;
    margin-bottom: 18px;
}
.about-text strong { color: var(--c-blue); font-weight: 700; }
.about-feats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.af {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-chip);
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 14px;
    color: var(--c-text-2);
    font-weight: 500;
}
.af span { font-size: 18px; }
.about-src {
    font-size: 13px;
    color: var(--c-text-3);
    line-height: 1.8;
    margin-bottom: 12px;
}
.about-contact {
    font-size: 14px;
    color: var(--c-text-2);
}
.about-contact a {
    color: var(--c-blue);
    font-weight: 600;
}
.about-contact a:hover { text-decoration: underline; }

/* ============ 响应式 ============ */
@media (max-width: 992px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .data-row { grid-template-columns: 1fr; }
    .data-row .data-col.full-width { grid-column: auto; }
    .news-layout { grid-template-columns: 1fr; }
    .iip-grid { grid-template-columns: 1fr; }
    .tool-grid { grid-template-columns: 1fr 1fr; }
    .tool-grid-2 { grid-template-columns: 1fr; max-width: none; }
    .kb-section { grid-template-columns: 1fr; }
    .flagship-card { flex-direction: column; padding: 20px; gap: 16px; }
    .flagship-icon { width: 56px; height: 56px; font-size: 28px; }
}

@media (max-width: 640px) {
    .topbar .wrap { flex-direction: column; align-items: stretch; gap: 10px; }
    .brand { gap: 10px; }
    .brand-logo a { font-size: 22px; letter-spacing: 2px; }
    .brand-sub { font-size: 11px; }
    .ad-banner { width: 100%; min-height: 70px; }
    .ad-banner ins { height: 70px !important; }

    .nav-list { padding: 0 2px; }
    .nav-list a { font-size: 14px; padding: 12px 14px; }

    .hero { padding: 24px 0; }
    .hero-title { font-size: 20px; }
    .hero-sub { font-size: 12px; margin-bottom: 18px; }
    .stat-grid { gap: 10px; }
    .stat { padding: 14px 10px; }
    .stat-num { font-size: 28px; }
    .stat-label { font-size: 12px; }

    section.block { padding: 20px 0; }
    .block-title { font-size: 18px; }

    .data-row { grid-template-columns: 1fr; gap: 14px; }
    .data-row .data-col.full-width { grid-column: auto; }

    /* 多列宽表格（近期上市/ETF/概念）：保留表格 + 横向滚动 */
    .col-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .list-table { min-width: 480px; display: table; }
    .list-table thead { display: table-header-group; }
    .list-table th, .list-table td {
        padding: 10px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    .list-table th { font-size: 12px; }
    .list-table td::before { display: none; }
    .list-table .name a { font-size: 14px; }

    /* 若未来某个表确实只有 1-2 列，可以单独给它加 card-mode 类做卡片化
       但当前的上市/ETF/概念表都是多列宽表，一律横向滚动 */

    .iip-grid { grid-template-columns: 1fr; }
    .tool-grid, .tool-grid-2 { grid-template-columns: 1fr; max-width: none; }
    .about-card { padding: 20px; }
    .about-feats { flex-direction: column; }
    .af { width: 100%; justify-content: flex-start; }

    .searchbar .wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hot-keywords { display: none; }

    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 420px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .compact-list li { padding: 10px 14px; }
}

/* ============================================================
   ⑫ 打新日历页（calendar.html）专用样式
   ============================================================ */

/* 筛选栏：复用 col-head 深蓝底，与数据列头一致 */
.filter-bar {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.filter-bar label {
    font-size: 13px;
    color: var(--c-text-2);
    font-weight: 600;
    white-space: nowrap;
}
.filter-bar select {
    padding: 8px 14px;
    border: 2px solid var(--c-line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--c-text);
    background: #fff;
    min-width: 140px;
    outline: none;
    transition: border-color .2s;
    cursor: pointer;
}
.filter-bar select:focus { border-color: var(--c-blue); }
.filter-bar .count {
    margin-left: auto;
    color: var(--c-text-3);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* 统计卡：复用 hero 的 .stat 风格，5 列 */
.cal-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.cal-stat {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 14px;
    text-align: center;
    border: 1px solid transparent;
    transition: border-color .2s, transform .2s;
}
.cal-stat:hover {
    transform: translateY(-3px);
    border-color: var(--c-blue-soft);
}
.cal-stat .num {
    font-size: 32px;
    font-weight: 800;
    color: var(--c-blue);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}
.cal-stat .num.warn { color: var(--c-amber); }
.cal-stat .label {
    font-size: 12px;
    color: var(--c-text-3);
    letter-spacing: 1px;
}
.cal-stat.highlight {
    background: #f0f9eb;
    border-color: #4caf50;
}
.cal-stat.highlight .num { color: #2e7d32; }

/* 数据表格：复用 .list-table 的列样式，放在 .data-col 容器里 */
.cal-table { min-width: 0; }
.cal-table td, .cal-table th { white-space: nowrap; }
.cal-table .code {
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    color: var(--c-blue);
    font-weight: 600;
}
.cal-table .price {
    font-family: Consolas, Monaco, monospace;
    color: var(--c-text);
}
.cal-table .pe {
    font-family: Consolas, Monaco, monospace;
    color: var(--c-text-2);
}
.cal-table .ballot {
    color: var(--c-red);
    font-weight: 700;
}
.cal-table .limit {
    color: var(--c-text-2);
}
.cal-table .date {
    font-variant-numeric: tabular-nums;
    color: var(--c-text-2);
}
.cal-table .detail-link {
    color: var(--c-blue);
    font-size: 13px;
    font-weight: 600;
}
.cal-table .detail-link:hover { text-decoration: underline; }
.cal-table tr.this-week { background: #fff5f5; }
.cal-table tr.this-week:hover { background: #ffe8e8; }

/* 分页：复用 chip 风格 */
.cal-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.cal-pagination button {
    padding: 7px 14px;
    border: 1px solid var(--c-line);
    background: var(--c-card);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--c-text-2);
    transition: all .2s;
}
.cal-pagination button:hover { background: var(--c-blue-soft); color: var(--c-blue); }
.cal-pagination button.active {
    background: var(--c-blue);
    color: #fff;
    border-color: var(--c-blue);
    font-weight: 700;
}
.cal-pagination button:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.cal-pagination .gap {
    color: var(--c-text-3);
    padding: 0 4px;
}

/* 加载状态 */
.cal-loading {
    text-align: center;
    padding: 60px 0;
    color: var(--c-text-3);
    font-size: 15px;
}
.cal-loading::after {
    content: "…";
    animation: cal-dots 1.5s infinite;
}
@keyframes cal-dots {
    0%, 20%   { content: "."; }
    40%        { content: ".."; }
    60%, 100%  { content: "..."; }
}

/* 相关工具：复用 .chip 风格 */
.cal-tools {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 26px;
    margin-bottom: 24px;
}
.cal-tools h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 14px;
    letter-spacing: 1px;
}
.cal-tools .chip-row { gap: 8px; }
.cal-tools .chip {
    font-size: 13px;
    padding: 6px 14px;
}

/* FAQ：与首页 about-card 同款白卡 */
.cal-faq {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
}
.cal-faq h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--c-blue);
    letter-spacing: 1px;
}
.cal-faq .faq-item {
    margin-bottom: 18px;
}
.cal-faq .faq-item:last-child { margin-bottom: 0; }
.cal-faq .faq-item h4 {
    font-size: 15px;
    color: var(--c-text);
    font-weight: 700;
    margin-bottom: 6px;
}
.cal-faq .faq-item p {
    color: var(--c-text-2);
    font-size: 14px;
    line-height: 1.8;
}

/* 响应式 */
@media (max-width: 992px) {
    .cal-stats { grid-template-columns: repeat(3, 1fr); }
    .cal-stat:nth-child(4), .cal-stat:nth-child(5) {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .filter-bar select { width: 100%; }
    .filter-bar .count { margin-left: 0; }
    .cal-stats { grid-template-columns: repeat(2, 1fr); }
    .cal-stat { padding: 14px 10px; }
    .cal-stat .num { font-size: 24px; }
    .cal-stat .label { font-size: 11px; }
    .cal-table th, .cal-table td { padding: 10px 10px; font-size: 13px; }
    .cal-table { min-width: 560px; }
    .cal-table .col-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cal-tools { padding: 16px; }
    .cal-faq { padding: 18px; }
}

@media (max-width: 420px) {
    .cal-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ⑬ 工具计算器页专用样式（bucangpro / yingkuipro / zuotpro
       / lianbanpro / jiage / shouyi 共用）
   ============================================================ */

/* 计算器主体容器 */
.tool-calc {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
}

/* 输入卡片区 */
.calc-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.calc-card {
    background: var(--c-chip);
    border-radius: 10px;
    padding: 20px;
    position: relative;
}
.calc-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 14px;
}
.calc-field {
    margin-bottom: 12px;
}
.calc-field label {
    display: block;
    font-size: 13px;
    color: var(--c-text-2);
    font-weight: 600;
    margin-bottom: 5px;
}
.calc-field input,
.calc-field select {
    width: 100%;
    height: 42px;
    border: 2px solid var(--c-line);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    color: var(--c-text);
    background: #fff;
    outline: none;
    transition: border-color .2s;
}
.calc-field input:focus,
.calc-field select:focus {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(30,159,255,.12);
}
/* 费用行：卡片内多个 fee-inline 自动排成网格 */
.calc-card:has(.calc-field.fee-inline) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
.calc-card:has(.calc-field.fee-inline) h3 {
    grid-column: 1 / -1;
}
.calc-field.fee-inline {
    margin-bottom: 0;
}

/* 按钮组 */
.calc-btns {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}
.btn-calc {
    flex: 1;
    height: 50px;
    background: var(--c-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.btn-calc:hover {
    background: var(--c-blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30,159,255,.3);
}
.btn-reset {
    height: 50px;
    padding: 0 24px;
    background: var(--c-chip);
    color: var(--c-text-2);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s;
}
.btn-reset:hover {
    background: #fff;
    color: var(--c-text);
}

/* 最优方案摘要 */
.calc-summary {
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 24px;
    color: #fff;
}
.calc-summary h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-amber);
    margin-bottom: 16px;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.sum-item {
    background: rgba(255,255,255,.07);
    border-radius: 8px;
    padding: 14px 12px;
    text-align: center;
}
.sum-label {
    font-size: 12px;
    color: var(--c-text-3);
    margin-bottom: 6px;
}
.sum-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-amber);
    font-variant-numeric: tabular-nums;
}

/* 方案对比表 */
.calc-table h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-blue);
}
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}
.table-scroll .list-table {
    min-width: 500px;
}
.table-scroll .list-table th {
    background: var(--c-navy);
    color: #fff;
    font-size: 13px;
    text-align: left;
}
.table-scroll .list-table td {
    font-size: 14px;
}
.num-cell {
    font-family: Consolas, Monaco, monospace;
    color: var(--c-text);
}
.empty-tip {
    text-align: center;
    padding: 32px 0;
    color: var(--c-text-3);
    font-size: 14px;
}

/* 成本变化徽章 */
.cost-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
}
.cost-badge.cost-dec {
    background: #d1fae5;
    color: #047857;
}
.cost-badge.cost-inc {
    background: #fee2e2;
    color: #c62828;
}

/* 计算说明 */
.calc-info {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    margin-top: 24px;
}
.calc-info h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-blue);
    letter-spacing: 1px;
}
.info-block {
    margin-bottom: 18px;
}
.info-block:last-child { margin-bottom: 0; }
.info-block h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-blue);
    margin-bottom: 8px;
}
.info-block p {
    font-size: 14px;
    color: var(--c-text-2);
    line-height: 1.8;
}
.info-tip {
    color: var(--c-text-3);
    font-size: 13px;
    margin-top: 6px;
}

/* 提示 toast */
.tip-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    transform: translateX(-50%) translateY(10px);
}
.tip-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.tip-toast.ok   { background: #d1fae5; color: #047857; }
.tip-toast.warn { background: #fee2e2; color: #c62828; }
.tip-toast.info { background: var(--c-blue-soft); color: var(--c-blue-dark); }

/* 概念工具集专用 */
.concept-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.concept-card {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
    border-top: 3px solid transparent;
}
.concept-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-top-color: var(--c-blue);
}
.concept-card .cc-icon {
    font-size: 28px;
    margin-bottom: 12px;
}
.concept-card .cc-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    width: fit-content;
}
.cc-tag.hot    { background: #fee2e2; color: #c62828; }
.cc-tag.core   { background: var(--c-blue-soft); color: var(--c-blue-dark); }
.cc-tag.util   { background: #fff7ed; color: #ea580c; }
.cc-tag.adv    { background: #faf5ff; color: #7c3aed; }
.cc-tag.mon    { background: #f0fdf4; color: #16a34a; }
.concept-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 8px;
}
.concept-card p {
    font-size: 13px;
    color: var(--c-text-2);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 12px;
}
.concept-card .cc-arrow {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-blue);
    transition: letter-spacing .2s;
}
.concept-card .cc-arrow:hover { letter-spacing: 1px; }
.concept-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-blue);
    letter-spacing: 1px;
}

/* 响应式 */
@media (max-width: 992px) {
    .calc-inputs { grid-template-columns: 1fr; }
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .concept-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tool-calc { padding: 18px; }
    .calc-summary { padding: 16px; }
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .calc-info { padding: 18px; }
    .concept-hub-grid { grid-template-columns: 1fr; }
    .calc-card:has(.calc-field.fee-inline) { grid-template-columns: 1fr; }
}