/* ============================================================
123.ru 设计系统 v1.1 2026-10-05
设计方向：俄式清爽风（参考 Ozon / Avito 白底+明亮单色点缀）
- 主色 明亮天蓝 #2B6CF0（去藏蓝压感，更轻更透气）
- 强调 正红 #E5484D（保留中俄贸易红元素，用于价格/紧急）
- 导航/页脚由深色改为白底浅边，整体中性色提亮、阴影减弱
- 药丸按钮、细边框、极轻阴影，紧凑 SaaS 密度
============================================================ */
:root {
/* 中性色：整体提亮，去藏蓝调，贴近 Ozon/Avito 的清爽灰 */
/* v1.2 可读性修正：灰阶整体加深，保证白底上文字对比度 ≥ WCAG AA 4.5:1
旧值 ink-500 #76809A=3.9:1、ink-400 #99A2B4=2.6:1 均不达标 */
--ink-900: #15181F;
--ink-800: #2B303B;
--ink-700: #3C4452;
--ink-600: #4E5766;
--ink-500: #5A6478; /* 6.1:1 on #fff */
--ink-400: #69737F; /* 5.0:1 on #fff；on #F7F9FC 亦 ≥4.6 */
--ink-300: #98A1B2; /* 仅用于装饰线/占位，不承载文字 */
--ink-200: #E6EAF1;
--ink-100: #F0F3F8;
--ink-050: #F7F9FC;
/* 主色：近黑藏蓝 → 明亮天蓝（Ozon #005BFF 风，更轻更透气） */
--brand: #2B6CF0;
--brand-hover: #1E58D6;
--brand-600: #1E58D6;
--brand-700: #1747AC; /* 浅蓝底(--brand-soft)上的文字需 ≥4.5:1，用这档 */
--brand-050: #F2F6FE;
--brand-soft: #EAF1FE;
--brand-ring: rgba(43, 108, 240, 0.16);
/* 点缀红：更明亮的正红，用于价格/紧急（保留中俄贸易的红元素） */
/* v1.2：#E5484D 配白字仅 3.9:1（AA 需 4.5:1）→ 加深为 4.9:1，
保留「中俄红」识别度但白字清晰可读 */
--accent: #C8323C;
--accent-hover: #A8282F;
--accent-soft: #FDECEC;
--ok: #15A06A;
--ok-soft: #E8F7F0;
--warn: #C2810C;
--warn-soft: #FDF4E3;
--info: #2B7DE9;
--info-soft: #EAF1FE;
--bg: #F7F9FC;
--card: #FFFFFF;
--line: #E9EDF3;
--line-soft: #F1F4F8;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-pill: 999px;
--sh-1: 0 1px 2px rgba(20, 30, 50, 0.04), 0 1px 3px rgba(20, 30, 50, 0.05);
--sh-2: 0 2px 8px rgba(20, 30, 50, 0.05), 0 6px 18px rgba(20, 30, 50, 0.05);
--sh-3: 0 8px 24px rgba(20, 30, 50, 0.08), 0 2px 8px rgba(20, 30, 50, 0.05);
--sh-focus: 0 0 0 3px var(--brand-ring);
--nav-h: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--ink-900);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-hover); }
img { max-width: 100%; }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
/* ---------- 布局 ---------- */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
/* 内容型窄页（表单/详情/认证）：主内容 + 侧栏并排的基准宽度 */
.wrap-narrow { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.wrap-tight { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 24px; }
/* 与 Bootstrap 的 .row 同名 —— 必须给 wrap，否则并排的主内容+侧栏会被挤换行 */
.row { display: flex; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; }
.center { display: flex; align-items: center; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; }
.gap12 { gap: 12px; } .gap16 { gap: 16px; } .gap20 { gap: 20px; } .gap24 { gap: 24px; }
/* flex-basis:0 + min-width:0 —— 否则 grow 会按内容撑满，把侧栏挤到下一行 */
.grow { flex: 1 1 0%; min-width: 0; }
.wrapf { flex-wrap: wrap; }
/* ---------- 顶部导航 ---------- */
.nav {
height: var(--nav-h);
background: #FFFFFF;
border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 100;
box-shadow: 0 1px 2px rgba(20, 30, 50, 0.03);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 100%; }
.logo { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.logo-mark {
width: 30px; height: 30px; border-radius: 9px;
background: linear-gradient(140deg, #E8503F 0%, #C8352B 55%, #9E241C 100%);
color: #fff; font-weight: 600; font-size: 15px;
display: flex; align-items: center; justify-content: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
letter-spacing: -0.5px;
}
.logo-txt { color: var(--ink-900); font-size: 16.5px; font-weight: 600; letter-spacing: -0.2px; }
.logo-txt sup { font-size: 9.5px; font-weight: 500; opacity: .55; margin-left: 2px; letter-spacing: .3px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
color: var(--ink-500); font-size: 14px; font-weight: 500;
padding: 7px 12px; border-radius: var(--r-pill);
transition: background .15s, color .15s;
}
.nav-link:hover { color: var(--ink-900); background: var(--ink-050); }
.nav-link.on { color: var(--brand-700); background: var(--brand-soft); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* ---------- v2.12b 头像个人菜单 ---------- */
.umenu-wrap { position: relative; }
.umenu-wrap .avatar { border: none; cursor: pointer; padding: 0; font-family: inherit; }
.umenu-wrap .avatar:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.umenu {
position: absolute; top: calc(100% + 10px); right: 0; min-width: 216px; z-index: 500;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-3); padding: 7px; display: none;
}
.umenu.open { display: block; }
.umenu-hd { padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.umenu-it {
display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
font-size: 13.5px; color: var(--ink-700); text-decoration: none; white-space: nowrap;
}
.umenu-it i { width: 16px; text-align: center; color: var(--ink-400); font-size: 13px; }
.umenu-it:hover { background: var(--ink-050); color: var(--brand); }
.umenu-it:hover i { color: var(--brand); }
.umenu-it.danger:hover { background: var(--accent-soft); color: var(--accent); }
.umenu-it.danger:hover i { color: var(--accent); }
.umenu-sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }
/* 资料完整度进度条 */
.pfbar { height: 6px; background: var(--ink-100); border-radius: 99px; overflow: hidden; }
.pfbar .fill { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .25s ease; }
.pfbar .fill.full { background: var(--ok); }
@media (max-width:520px) {
.umenu { min-width: 190px; }
}
.langsw {
display: flex; align-items: center; gap: 1px;
background: var(--ink-100); border-radius: var(--r-pill); padding: 3px;
}
.langsw a {
font-size: 12.5px; font-weight: 500; color: var(--ink-500);
padding: 4px 11px; border-radius: var(--r-pill); transition: all .15s;
}
.langsw a.on { background: var(--brand); color: #fff; }
.langsw a:hover:not(.on) { color: var(--ink-900); }
.bell { position: relative; width: 34px; height: 34px; border-radius: var(--r-pill);
background: var(--ink-100); color: var(--ink-600); display: flex; align-items: center;
justify-content: center; font-size: 14.5px; }
.bell:hover { background: var(--ink-050); color: var(--ink-900); }
.bell .dot { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px;
border-radius: 50%; background: var(--accent); border: 1.5px solid #fff; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
background: var(--brand-600); color: #fff; font-size: 12.5px; font-weight: 600;
display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.avatar.rus { background: #2B5C8A; }
.avatar.sm { width: 28px; height: 28px; font-size: 11.5px; }
.avatar.lg { width: 46px; height: 46px; font-size: 17px; }
/* ---------- 按钮 ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
flex: 0 0 auto; /* 放在 flex 容器里不要被拉伸 */
width: fit-content; /* 只按内容宽度，不要撑满父容器 */
font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid transparent;
cursor: pointer; transition: all .16s ease; white-space: nowrap;
background: var(--brand); color: #fff;
}
.btn:hover { background: var(--brand-hover); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.btn i { font-size: 13px; }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--card); color: var(--ink-700); border-color: var(--line); }
.btn-ghost:hover { background: var(--ink-050); color: var(--brand); border-color: var(--ink-200); }
.btn-quiet { background: transparent; color: var(--ink-500); }
.btn-quiet:hover { background: var(--ink-100); color: var(--ink-800); }
.btn-white { background: #fff; color: var(--brand); }
.btn-white:hover { background: var(--ink-050); color: var(--brand); }
/* 白底导航里的“登录”按钮：改用浅灰描边，避免和白底融为一体 */
.nav .btn-white { background: var(--ink-050); color: var(--ink-800); border-color: var(--line); }
.nav .btn-white:hover { background: var(--ink-100); color: var(--brand); border-color: var(--ink-200); }
.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-xs { padding: 5px 11px; font-size: 12px; }
.btn-block { display: flex; width: 100%; flex: 1 1 auto; }
.btn[disabled], .btn.is-disabled {
background: var(--ink-100); color: var(--ink-300); cursor: not-allowed;
border-color: transparent; box-shadow: none; transform: none;
}
/* ---------- 卡片 ---------- */
.card {
background: var(--card); border-radius: var(--r-lg);
box-shadow: var(--sh-1); overflow: hidden;
}
.card-pad { padding: 20px; }
.card-hd {
padding: 15px 20px; border-bottom: 1px solid var(--line-soft);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-hd h3 { font-size: 15px; }
.card-bd { padding: 20px; }
.card-ft { padding: 14px 20px; border-top: 1px solid var(--line-soft); background: #FCFDFE; }
.panel { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
/* ---------- 标签 ---------- */
.tag {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 500; line-height: 1;
padding: 5px 10px; border-radius: var(--r-pill);
background: var(--ink-050); color: var(--ink-500);
}
.tag i { font-size: 10.5px; }
.tag-brand { background: var(--brand-soft); color: var(--brand-600); }
.tag-accent { background: var(--accent-soft); color: var(--accent); }
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-info { background: var(--info-soft); color: var(--info); }
.tag-lg { font-size: 13px; padding: 7px 13px; }
/* 国家旗标（不用 emoji，用色块 + 缩写） */
.flag {
width: 20px; height: 15px; border-radius: 3px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
font-size: 8px; font-weight: 600; color: #fff; letter-spacing: -.2px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.flag.ru { background: linear-gradient(#fff 33.3%, #2E5FA3 33.3% 66.6%, #D33E3E 66.6%); color: #1a2a4a; }
.flag.cn { background: #D22A2A; }
.flag.by { background: linear-gradient(#C8313E 40%, #4A9E5C 40%); }
.flag.kz { background: #1BA8D1; }
.flag.tr { background: #E30A17; }
.flag.kr { background: #fff; color: #222; border: 1px solid var(--line); }
.flag.lg { width: 26px; height: 19px; font-size: 9px; border-radius: 4px; }
/* ---------- 统计条 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { background: var(--card); border-radius: var(--r-md); padding: 15px 17px; box-shadow: var(--sh-1); }
.stat .k { font-size: 12.5px; color: var(--ink-400); font-weight: 500; }
.stat .v { font-size: 25px; font-weight: 600; letter-spacing: -0.6px; margin-top: 3px; line-height: 1.15; }
.stat .d { font-size: 12px; color: var(--ink-300); margin-top: 2px; }
.stat .v .u { font-size: 13px; font-weight: 500; color: var(--ink-400); margin-left: 3px; letter-spacing: 0; }
/* ---------- 需求卡片（列表核心） ---------- */
/* 卡片用 div 而非 a：避免 嵌套 的非法 HTML（浏览器会拆散 DOM） */
.dcard {
background: var(--card); border-radius: var(--r-md); padding: 16px 18px;
box-shadow: var(--sh-1); transition: box-shadow .18s, transform .18s;
display: block; position: relative; cursor: pointer;
}
.dcard:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.dcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dcard h4 { font-size: 15.5px; line-height: 1.42; margin-bottom: 7px; }
.dcard-link { color: var(--ink-900); }
.dcard:hover .dcard-link { color: var(--brand-600); }
.dcard-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-400); }
.dcard-meta .it { display: inline-flex; align-items: center; gap: 5px; }
.dcard-meta .it i { font-size: 11.5px; opacity: .8; }
.dcard-specs {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
padding-top: 12px; border-top: 1px dashed var(--line);
}
.spec {
font-size: 12.5px; color: var(--ink-500); background: var(--ink-050);
padding: 4px 10px; border-radius: var(--r-sm); white-space: nowrap;
}
.spec b { color: var(--ink-800); font-weight: 500; }
.dcard-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.qcount {
display: flex; flex-direction: column; align-items: center; min-width: 52px;
padding: 7px 10px; border-radius: var(--r-md); background: var(--brand-soft);
}
.qcount b { font-size: 17px; font-weight: 600; color: var(--brand-600); line-height: 1.1; }
.qcount span { font-size: 10.5px; color: var(--ink-400); margin-top: 1px; }
.qcount.zero { background: var(--ink-050); }
.qcount.zero b { color: var(--ink-300); }
/* 紧急需求左边框 */
.dcard.urgent { box-shadow: var(--sh-1), inset 3px 0 0 var(--accent); }
/* ---------- 筛选栏 ---------- */
.filters {
background: var(--card); border-radius: var(--r-lg); padding: 14px 16px;
box-shadow: var(--sh-1); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.search-box { position: relative; flex: 1 1 260px; min-width: 200px; }
.search-box i {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
font-size: 12.5px; color: var(--ink-300); pointer-events: none;
}
.search-box input {
width: 100%; height: 40px; padding: 0 14px 0 36px;
border-radius: var(--r-pill); border: 1px solid var(--line);
font-family: inherit; font-size: 14px; background: var(--ink-050); color: var(--ink-900);
transition: all .16s;
}
.search-box input::placeholder { color: var(--ink-300); }
/* v2.4 搜索框内的提交按钮：有按钮的表单回车才能隐式提交，同时给移动端一个可点的入口 */
.search-box.has-btn input { padding-right: 46px; }
.search-box .sb-btn {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
width: 34px; height: 32px; padding: 0; border: none; cursor: pointer;
border-radius: var(--r-pill); background: var(--brand); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s; -webkit-appearance: none; appearance: none;
}
.search-box .sb-btn:hover { background: var(--brand-hover); }
.search-box .sb-btn i { position: static; left: auto; top: auto; transform: none; color: inherit; font-size: 12.5px; }
.search-box input:focus { outline: none; background: #fff; border-color: var(--brand); box-shadow: var(--sh-focus); }
select.sel, .inp {
height: 40px; padding: 0 14px; border-radius: var(--r-pill);
border: 1px solid var(--line); font-family: inherit; font-size: 14px;
background: #fff; color: var(--ink-800); transition: all .16s;
}
select.sel { padding-right: 32px; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7F96' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 13px center; cursor: pointer; }
.inp { border-radius: var(--r-sm); width: 100%; }
select.sel:focus, .inp:focus { outline: none; border-color: var(--brand); box-shadow: var(--sh-focus); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: var(--r-pill);
background: #fff; border: 1px solid var(--line); color: var(--ink-500);
cursor: pointer; transition: all .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--ink-200); color: var(--ink-800); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* ---------- 表单 ---------- */
.fld { margin-bottom: 16px; }
.fld label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-700); margin-bottom: 6px; }
.fld label .req { color: var(--accent); margin-left: 2px; }
.fld .hint { font-size: 12px; color: var(--ink-400); margin-top: 5px; }
.fld textarea.inp { height: auto; min-height: 92px; padding: 11px 14px; resize: vertical; line-height: 1.6; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frow-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.input-ic { position: relative; }
.input-ic .unit {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
font-size: 12.5px; color: var(--ink-400); pointer-events: none; font-weight: 500;
}
/* 选项卡组 */
.optrow { display: flex; gap: 8px; flex-wrap: wrap; }
.opt {
flex: 1 1 96px; padding: 11px 10px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: #fff; text-align: center;
cursor: pointer; transition: all .15s; font-size: 13.5px; font-weight: 500;
color: var(--ink-600);
}
/* 币种这类短标签：4 个必须一行平铺，不能 3+1 折行 */
.optrow-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.optrow-4 .opt { flex: none; padding: 11px 4px; }
/* 两项选择（自己发布 / 为公司发布）：强制两列 */
.optrow-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.optrow-2 .opt { flex: none; }
.opt:hover { border-color: var(--ink-200); }
.opt.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-600); }
.opt .sub { font-size: 11.5px; color: var(--ink-400); margin-top: 1px; }
/* ---------- 认证状态提示条 ---------- */
.notice {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.55;
}
.notice i { font-size: 16px; margin-top: 1px; flex: 0 0 auto; }
.notice-warn { background: var(--warn-soft); color: #7A4E06; }
.notice-info { background: var(--info-soft); color: #14448C; }
.notice-ok { background: var(--ok-soft); color: #125C38; }
.notice-accent { background: var(--accent-soft); color: #8C231C; }
.notice b { font-weight: 600; }
/* ---------- 进度步骤 ---------- */
.steps { display: flex; align-items: center; gap: 0; }
.step { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.step .no {
width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600;
background: var(--ink-100); color: var(--ink-400);
}
.step .lb { font-size: 13px; font-weight: 500; color: var(--ink-400); white-space: nowrap; }
.step.done .no { background: var(--ok); color: #fff; }
.step.done .lb { color: var(--ink-700); }
.step.on .no { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-ring); }
.step.on .lb { color: var(--ink-900); font-weight: 600; }
.step-line { flex: 1 1 24px; height: 1.5px; background: var(--line); margin: 0 12px; min-width: 20px; }
.step-line.done { background: var(--ok); }
/* ---------- 时间线 ---------- */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1.5px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
content: ''; position: absolute; left: -20px; top: 4px;
width: 11px; height: 11px; border-radius: 50%;
background: #fff; border: 2.5px solid var(--line);
}
.tl-item.on::before { border-color: var(--brand); background: var(--brand); }
.tl-item.ok::before { border-color: var(--ok); background: var(--ok); }
.tl-item.no::before { border-color: var(--accent); background: var(--accent); }
.tl-t { font-size: 13.5px; font-weight: 500; }
.tl-d { font-size: 12.5px; color: var(--ink-400); margin-top: 1px; }
/* ---- 推送中心：渠道切换标签 + 两列表单 ---- */
.tabnav { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.tabnav-it { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; margin-bottom:-1px;
font-size:14px; font-weight:500; color:var(--ink-600); text-decoration:none;
border:1px solid transparent; border-bottom:none; border-radius:10px 10px 0 0; }
.tabnav-it:hover { color:var(--brand-700); background:var(--brand-soft); }
.tabnav-it.on { color:var(--brand-700); background:#fff; border-color:var(--line); border-bottom:1px solid #fff; }
.tabnav-it i { font-size:15px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 640px) { .row2 { grid-template-columns:1fr; } }
/* ---- 通用模版：事件列表 ---- */
.tpl-list { display:flex; flex-direction:column; gap:4px; max-height:640px; overflow-y:auto; }
.tpl-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
text-decoration:none; color:var(--ink-700); border:1px solid transparent; }
.tpl-item:hover { background:var(--brand-soft); }
.tpl-item.on { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-700); }
.tpl-item .ti-n { flex:1 1 auto; font-size:14px; font-weight:500; }
.tpl-item .ti-k { font-size:11px; color:var(--ink-400); font-family:var(--mono,monospace); }
/* ---- 中俄语言分段控件 ---- */
.seg2 { display:inline-flex; gap:2px; background:var(--ink-050); border:1px solid var(--line);
border-radius:999px; padding:3px; }
.seg2 a { font-size:13px; padding:5px 14px; border-radius:999px; color:var(--ink-500); text-decoration:none; }
.seg2 a:hover:not(.on) { color:var(--brand-600); background:rgba(43,108,240,.07); }
.seg2 a.on { background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(30,88,214,.24); }
/* ---- 角色页：紧凑化 ---- */
.f11 { font-size: 11px; }
.rl-list { border-top: 1px solid var(--line-soft); max-height: 620px; overflow-y: auto; }
.rl-item { display: block; padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
border-left: 2.5px solid transparent; transition: background .12s; }
.rl-item:hover { background: var(--ink-050); }
.rl-item.on { background: var(--brand-soft); border-left-color: var(--brand); }
.rl-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.rl-name { font-size: 13px; font-weight: 600; color: var(--ink-900); flex: 1 1 auto; min-width: 0; }
.rl-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-400); }
.rl-meta b { color: var(--ink-700); font-weight: 600; }
.rl-meta i { opacity: .45; font-style: normal; }
/* 权限矩阵压缩：模块行更扁、操作项更密 */
.perm-mod { padding: 7px 0 !important; }
.perm-mod > label > b { font-size: 13px; }
.perm-code { margin-left: auto; opacity: .75; }
.perm-mod .row { padding: 5px 0 0 22px !important; gap: 6px !important; }
.perm-mod .row label { font-size: 12.5px !important; }
.perm-mod .row input[type=checkbox] { width: 14px !important; height: 14px !important; }
.chip { font-size: 12px !important; padding: 3px 9px !important; }
/* ---------- 报价卡 ---------- */
.qcard { background: var(--card); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
.qcard-hd { padding: 14px 16px; display: flex; align-items: center; gap: 11px; }
.qcard-bd { padding: 0 16px 15px; }
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.qgrid .cell .k { font-size: 11.5px; color: var(--ink-400); }
.qgrid .cell .v { font-size: 14px; font-weight: 600; color: var(--ink-900); margin-top: 1px; }
.qgrid .cell .v.big { font-size: 19px; letter-spacing: -0.3px; }
.qmsg {
font-size: 13.5px; color: var(--ink-600); line-height: 1.6;
background: var(--ink-050); border-radius: var(--r-sm); padding: 11px 13px; margin-bottom: 13px;
}
/* 联系方式解锁态 */
.contact-lock {
display: flex; align-items: center; gap: 11px; padding: 12px 14px;
background: var(--ink-050); border-radius: var(--r-sm); font-size: 13px; color: var(--ink-500);
}
.contact-open { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.contact-open .val {
font-size: 13.5px; font-weight: 500; color: var(--ink-900);
background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
padding: 6px 11px; display: inline-flex; align-items: center; gap: 8px;
}
.contact-open .val i { color: var(--ink-300); font-size: 12px; cursor: pointer; }
.contact-open .val i:hover { color: var(--brand); }
/* 可点击的联系方式（Telegram / WhatsApp / 邮箱）保持同样外观，hover 才强调 */
a.contact-open .val,
.contact-open a.val { text-decoration: none; transition: none; }
.contact-open a.val:hover {
border-color: var(--brand-ring);
background: var(--brand-soft);
color: var(--brand);
}
/* ---------- 审核闸门示意 ---------- */
.gate { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.gate-row {
display: flex; align-items: center; gap: 12px; padding: 11px 14px;
border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.gate-row:last-child { border-bottom: none; }
.gate-row .code {
font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600;
width: 26px; height: 22px; border-radius: var(--r-sm); flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--ink-050); color: var(--ink-500);
}
.gate-row.hit { background: var(--accent-soft); }
.gate-row.hit .code { background: var(--accent); color: #fff; }
.gate-row.pass { background: var(--ok-soft); }
.gate-row.pass .code { background: var(--ok); color: #fff; }
.gate-row .res { margin-left: auto; font-size: 12.5px; font-weight: 500; }
.gate-row .res.bad { color: var(--accent); }
.gate-row .res.good { color: var(--ok); }
/* 标签块：给 min-width:0 + 允许收缩，缺它会被右侧固定宽控件压成竖排单字 */
.gate-row > .grow { min-width: 0; flex: 1 1 auto; }
.gate-row .gt-ctl { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gate-row .gt-ctl input[type=number] { width: 78px; height: 40px; text-align: center; }
.gate-row .gt-ctl select {
width: 92px; height: 40px; border-radius: var(--r-sm);
border: 1px solid var(--line); font-family: inherit; font-size: 13px; background: #fff; padding: 0 6px;
}
/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: 60px 24px; }
.empty .ic {
width: 60px; height: 60px; border-radius: var(--r-lg); margin: 0 auto 16px;
background: var(--ink-050); color: var(--ink-300);
display: flex; align-items: center; justify-content: center; font-size: 25px;
}
.empty h3 { font-size: 16px; margin-bottom: 5px; }
.empty p { font-size: 13.5px; color: var(--ink-400); max-width: 340px; margin: 0 auto; }
/* ---------- 后台 ---------- */
.adm-layout { display: flex; min-height: calc(100vh - var(--nav-h)); }
.adm-side {
width: 232px; flex: 0 0 auto; background: var(--card);
border-right: 1px solid var(--line); padding: 16px 12px; overflow-y: auto;
}
.adm-side .grp { font-size: 11px; font-weight: 600; color: var(--ink-300);
letter-spacing: .5px; padding: 12px 12px 6px; text-transform: uppercase; }
.adm-item {
display: flex; align-items: center; gap: 11px; padding: 9px 12px;
border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500;
color: var(--ink-600); transition: all .14s; margin-bottom: 1px;
}
.adm-item i { font-size: 14px; width: 17px; text-align: center; color: var(--ink-400); }
.adm-item:hover { background: var(--ink-050); color: var(--ink-900); }
/* 选中态：左侧竖条 + 主色底 + 阴影，一眼看出当前在哪一页 */
.adm-item.on {
background: var(--brand-soft); color: var(--brand-700); font-weight: 600;
box-shadow: inset 0 0 0 1px var(--brand-ring, rgba(31,122,224,.18));
position: relative; padding-left: 16px;
}
.adm-item.on::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.adm-item.on i { color: var(--brand-600); }
/* 悬停时若不是选中项，给一点主色调提示（但弱于选中） */
.adm-item:not(.on):hover { background: var(--brand-050, #f2f7fd); color: var(--ink-800); }
.adm-item .bdg {
margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px;
border-radius: var(--r-pill); background: var(--accent); color: #fff;
font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.adm-item .bdg.gray { background: var(--ink-200); color: var(--ink-600); }
.adm-main { flex: 1 1 auto; padding: 24px; background: var(--bg); min-width: 0; }
/* ---------- 后台「待办直达」卡片（v1.3）----------
目标：概览顶部一眼看到待办，点 1 次直接到处理页 */
.todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.todo-card {
display: flex; align-items: center; gap: 11px;
padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--card); transition: all .15s; min-height: 64px;
}
.todo-card:hover { border-color: var(--brand-200, #C2D6FA); background: var(--brand-050); }
.todo-card .ic {
width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--ink-050); color: var(--ink-500); font-size: 15px;
}
.todo-card .tx { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.todo-card .tx .n { font-size: 19px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; }
.todo-card .tx .l { font-size: 12.5px; font-weight: 500; color: var(--ink-600); }
.todo-card .tx .d {
font-size: 11.5px; color: var(--ink-400); margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-card .go { color: var(--ink-300); font-size: 12px; flex: 0 0 auto; }
.todo-card:hover .go { color: var(--brand-600); }
/* 有待办：数字与图标用主色，视觉上把「要处理的事」顶出来 */
.todo-card.hot { border-color: #F3C9C9; background: #FFFBFB; }
.todo-card.hot .ic { background: var(--accent-soft); color: var(--accent); }
.todo-card.hot .tx .n { color: var(--accent); }
.todo-card.hot:hover { border-color: var(--accent); background: #FFF7F7; }
/* 数字为 0 的项淡化（仍可点进去看，只是无需处理） */
.todo-card:not(.hot) .ic { opacity: .75; }
.todo-card:not(.hot) .tx .n { color: var(--ink-400); }
.todo-clear { display: flex; align-items: center; gap: 9px; padding: 14px 4px;
color: var(--ink-500); font-size: 14px; }
.todo-clear i { font-size: 17px; }
/* 后台页面右侧固定栏（v1.3：替代内联 width:320px;flex:0 0 auto）
原写法在 ≤991px 会把主内容压成 ~50px 宽（标题被挤成竖排），
现在桌面才固定宽度，窄屏落到主内容下方占满整宽。 */
.asideside { width: 320px; flex: 0 0 auto; }
@media (max-width: 1199px) { .asideside { width: 280px; } }
@media (max-width: 991px) {
.asideside { width: 100%; flex: 1 1 auto; margin-top: 16px; }
}
.adm-hd { display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.adm-hd h2 { font-size: 20px; letter-spacing: -0.3px; }
.adm-hd .sub { font-size: 13px; color: var(--ink-400); margin-top: 2px; }
/* 表格
v1.4 修复：表格有 20+ 处 | 固定列宽，
在 1024px 下固定列合计 450~700px，会把内容列挤到 ~50px 变成竖排单字
（如「加微信」「私聊出售」被压成一列一字）。
对策：容器加横向滚动 + 表格设 min-width，让固定列保持设计宽度、
内容列获得剩余空间；再给单元格明确换行规则，杜绝单字竖排。 */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap::-webkit-scrollbar { height: 6px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }
/* 桌面端给表格 min-width：固定列（ | ）保持设计宽度，
剩余空间给内容列；容器不足时横向滚动而不是把内容列压塌成竖排单字 */
@media (min-width: 992px) {
.adm-main .tbl { min-width: 720px; }
}
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl thead th {
text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-500);
letter-spacing: .3px; text-transform: uppercase;
padding: 10px 14px; background: var(--ink-050);
border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl thead th:first-child { border-radius: var(--r-md) 0 0 0; }
.tbl thead th:last-child { border-radius: 0 var(--r-md) 0 0; }
.tbl tbody td {
padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle;
/* 内容列允许正常换行；word-break:break-all 只在必要处（如长 URL/哈希）单独指定 */
overflow-wrap: break-word; word-break: normal; line-height: 1.5;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: #FCFDFE; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .act { text-align: right; white-space: nowrap; }
.riskbar { display: flex; align-items: center; gap: 8px; }
.riskbar .track { width: 56px; height: 5px; border-radius: var(--r-pill); background: var(--ink-100); overflow: hidden; }
.riskbar .fill { height: 100%; border-radius: var(--r-pill); background: var(--ok); }
.riskbar .fill.mid { background: var(--warn); }
.riskbar .fill.high { background: var(--accent); }
.riskbar .n { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* ---------- 弹层 ---------- */
.mask {
position: fixed; inset: 0; background: rgba(14, 27, 42, 0.42);
display: flex; align-items: center; justify-content: center; z-index: 900; padding: 20px;
}
.modal {
/* v2.6 关键：Bootstrap 5 的 .modal 是 position:fixed;display:none;height:100%，
且 bootstrap.css 先于 app.css 加载 → 我们的确认框/留言回复/认证驳回弹窗
全部被压成 0×0 不可见（点「删除/清理/重扫」毫无反应）。
项目未使用 Bootstrap 的 JS 弹窗组件，这里显式还原为块级静态定位。 */
display: block; position: static; height: auto; border: 0;
background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-3);
width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
}
.modal-hd { padding: 18px 22px 0; display: flex; align-items: flex-start; gap: 12px; }
.modal-hd h3 { font-size: 16.5px; }
.modal-hd .sub { font-size: 13px; color: var(--ink-400); margin-top: 3px; line-height: 1.5; }
.modal-bd { padding: 16px 22px; }
.modal-ft { padding: 0 22px 20px; display: flex; gap: 9px; }
.modal-x { margin-left: auto; width: 28px; height: 28px; border-radius: var(--r-pill);
background: var(--ink-050); color: var(--ink-400); display: flex; align-items: center;
justify-content: center; flex: 0 0 auto; cursor: pointer; border: none; font-size: 13px; }
.modal-x:hover { background: var(--ink-100); color: var(--ink-700); }
/* ---------- v2.12 标题旁的「?」帮助按钮 + 说明弹层正文 ---------- */
.qm-btn { flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-pill);
background: var(--ink-050); color: var(--ink-400); border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.qm-btn:hover { background: var(--brand-soft); color: var(--brand-700); }
.qm-btn:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.help-step { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.help-step:last-of-type { border-bottom: 0; }
.help-ic { flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--ink-050);
color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.help-t { font-size: 13px; font-weight: 600; color: var(--ink-800); }
.help-d { font-size: 12.5px; color: var(--ink-500); line-height: 1.75; margin-top: 3px; }
/* ---------- 提示气泡 ---------- */
.toast-wrap { position: fixed; top: 78px; right: 24px; z-index: 950; display: flex; flex-direction: column; gap: 8px; }
.toast {
display: flex; align-items: flex-start; gap: 10px; min-width: 260px; max-width: 360px;
background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-3);
padding: 13px 15px; font-size: 13.5px; animation: tin .22s ease;
}
@keyframes tin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.toast .ic { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.toast.ok .ic { background: var(--ok); }
.toast.bad .ic { background: var(--accent); }
.toast.info .ic { background: var(--info); }
.toast .tx { flex: 1 1 auto; line-height: 1.5; }
.toast .tx b { display: block; font-weight: 600; margin-bottom: 1px; }
.toast .tx span { color: var(--ink-400); font-size: 12.5px; }
/* ---------- 悬浮按钮组（Telegram 方形 + 返回顶部，上下排列） ---------- */
.fab-group {
position: fixed; right: 24px; bottom: 24px; z-index: 800;
display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
.fab {
width: 48px; height: 48px;
border-radius: 12px; background: #229ED9; color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 21px;
box-shadow: 0 4px 14px rgba(34, 158, 217, .34);
text-decoration: none; cursor: pointer; border: 0;
transition: transform .15s ease, opacity .2s ease, visibility .2s ease;
}
.fab:hover { color: #fff; transform: translateY(-2px); }
.fab-top { background: #2B6CF0; box-shadow: 0 4px 14px rgba(43, 108, 240, .30); }
.fab-top.hide { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); }
/* ---------- 信任分 ---------- */
.trust { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; }
.trust i { font-size: 11px; }
.trust.t-ok { color: var(--ok); }
.trust.t-mid { color: var(--warn); }
.trust.t-no { color: var(--ink-300); }
/* ---------- 留言 ---------- */
.msg { display: flex; gap: 11px; margin-bottom: 18px; }
.msg .bd { flex: 1 1 auto; min-width: 0; }
.msg .bub {
background: var(--ink-050); border-radius: 4px 14px 14px 14px;
padding: 11px 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-800);
}
.msg.me { flex-direction: row-reverse; }
.msg.me .bub { background: var(--brand); color: #fff; border-radius: 14px 4px 14px 14px; }
.msg .nm { font-size: 12.5px; color: var(--ink-400); margin-bottom: 4px; }
.msg.me .nm { text-align: right; }
/* ---------- 语言切换演示高亮 ---------- */
.demo-note {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000;
background: var(--ink-900); color: #fff; font-size: 12px; padding: 6px 16px;
display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center;
}
.demo-note b { font-weight: 600; }
.demo-note a { color: #7EB8F0; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.tc { text-align: center; } .tr { text-align: right; }
.f12 { font-size: 12px; } .f13 { font-size: 13px; } .f14 { font-size: 14px; }
.f18 { font-size: 18px; } .f22 { font-size: 22px; }
.c400 { color: var(--ink-400); } .c500 { color: var(--ink-500); } .c600 { color: var(--ink-600); }
.cok { color: var(--ok); } .cacc { color: var(--accent); } .cinfo { color: var(--info); }
.fw5 { font-weight: 500; } .fw6 { font-weight: 600; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ---------- 页脚 ---------- */
.ft { background: #FFFFFF; color: var(--ink-500); margin-top: 40px; padding: 36px 0 0; border-top: 1px solid var(--line); }
.ft-top { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 28px; flex-wrap: wrap; }
.ft-brand .logo-txt { color: var(--ink-900); }
.ft-brand p { color: var(--ink-400); }
.ft-cols { display: flex; gap: 48px; flex-wrap: wrap; }
.ft-cols > div { display: flex; flex-direction: column; gap: 9px; min-width: 130px; }
.ft-cols b { color: var(--ink-800); font-weight: 600; margin-bottom: 3px; }
.ft-cols a { color: var(--ink-500); font-size: 13px; }
.ft-cols a:hover { color: var(--brand); }
.ft-bot {
border-top: 1px solid var(--line-soft); padding: 16px 0 20px;
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
font-size: 12.5px; color: var(--ink-400);
}
@media (max-width: 767px) {
.ft { margin-top: 20px; padding-top: 28px; }
.ft-cols { gap: 28px; }
.ft-cols > div { min-width: 110px; }
}
/* ============================================================
响应式 —— 手机版（v1.2 重做）
原则：① 触控目标 ≥ 40px ② 横向内容一律可滑动而非撑破视口
③ 游客与登录用户都有完整主菜单 + 语言切换
============================================================ */
@media (max-width: 991px) {
.wrap { padding: 0 16px; }
.hide-m { display: none !important; }
.nav { height: 56px; }
.nav-inner { gap: 10px; }
.nav-links { display: none; }
.logo-txt { font-size: 15.5px; }
/* 顶部按钮在手机上要能点：放大到 40px 高 */
.nav .btn-sm { padding: 9px 15px; font-size: 13.5px; min-height: 40px;
display: inline-flex; align-items: center; }
.bell { width: 40px; height: 40px; }
.stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { padding: 12px 14px; }
.stat .v { font-size: 21px; }
.frow, .frow-3 { grid-template-columns: 1fr; gap: 0; }
.qgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
/* 两栏布局（.row > .grow）在窄屏必须堆叠。
注意：.grow 是 flex:1 1 0%，basis 为 0 时子元素永远不会换行，
会被硬挤成两条极窄的竖排文字（详情页曾出现「已线下核验」竖排），
所以窄屏要把 .row 显式改成纵向堆叠。 */
.row { flex-direction: column; }
.row > .grow { width: 100%; flex: 1 1 auto; }
.dcard-top { flex-direction: column; gap: 10px; }
.dcard-side { flex-direction: row; align-items: center; width: 100%;
justify-content: space-between; }
.dcard-specs { gap: 6px; }
.spec { font-size: 12px; padding: 4px 9px; }
/* 分类 chip：横向可滑动，且限制在容器内不撑破页面 */
.filters { padding: 12px; gap: 8px; }
.search-box { flex: 1 1 100%; }
/* 所有 chip 行（首页独立 .chips、筛选条内的）都可横向滑动 */
.chips { max-width: 100%; overflow-x: auto; flex-wrap: nowrap;
padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; }
/* 独立 chip 行（非 filters 内）需要自己的滚动容器 */
.chips.mb-20, .chips.mb-16, .chips.mb-24 { flex: 1 1 100%; }
/* 后台侧栏在手机端改为「抽屉」，规则写在 header.php 内联样式中，
这里不再设横向滚动菜单（旧实现会退化成 19 项一字排开，极难用）。 */
.adm-main { padding: 14px 12px 28px; }
/* 后台页面内两栏（主内容 + .asideside）窄屏堆叠 */
.adm-main .row { flex-direction: column; }
.adm-main .row > .grow { width: 100%; flex: 1 1 auto; }
/* 后台表格在手机上的处理：
这 5 张表都是 5~6 列的信息密集型表格（黑名单/用户/核验/术语/日志），
且 | 没有 data-l 属性（转卡片模式会丢失字段名，变成无标签的堆叠）。
所以保持横向滚动 + 给表格 min-width，让用户左右滑动查看完整列。 */
/* 不用负 margin（会让 flex/grid 宽度算错而撑破视口），
靠 min-width:0 让 .tbl-wrap 能在窄屏内收缩，表格超出部分在容器内横向滚动 */
/* 祖先链上每一环都要 min-width:0，否则 flex/grid 子项不会收缩到内容以下，
表格的 min-width 会一路把页面撑出横向滚动条 */
.adm-main .panel, .adm-main .card-bd, .adm-main .tbl-wrap {
min-width: 0; max-width: 100%; }
.adm-main .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 后台表格不走前台那套「卡片模式」（.tbl tbody td { display:flex }），
因为后台表格的 | 没有 data-l 属性，卡片化后每格独占一行、
一行 5 格会撑到 250px 高且丢失列对应关系。
这里显式恢复 table 布局 + min-width，靠容器横向滚动查看完整列。 */
.adm-main .tbl { display: table; }
.adm-main .tbl thead { display: table-header-group; }
.adm-main .tbl tbody { display: table-row-group; }
.adm-main .tbl tr { display: table-row; }
.adm-main .tbl td, .adm-main .tbl th { display: table-cell; width: auto; }
/* 各页列数不同（5~7 列），统一 min-width 会让 7 列的表内容列过窄而逐字换行。
按页面给不同下限：列多/内容长的表更宽，短表保持紧凑。
超出视口时由 .tbl-wrap 横向滚动，不变形。 */
/* 各页列数不同（5~7 列），统一 min-width 会让 7 列的表内容列过窄而逐字换行。
按列数分档：tbl--wide 6~7 列，tbl--xwide 7 列且含长文本。
超出视口时由 .tbl-wrap 横向滚动，页面不变形。 */
.adm-main .tbl { min-width: 660px; table-layout: auto; }
.adm-main .tbl.tbl--wide { min-width: 780px; }
.adm-main .tbl.tbl--xwide { min-width: 900px; }
.adm-main .tbl tbody tr { padding: 0; border-bottom: 1px solid var(--line-soft); }
.adm-main .tbl tbody td { padding: 11px 12px; border: none; display: table-cell; }
.adm-main .tbl tbody td::before { content: none; }
/* 细滚动条提示可横滑（不用 mask-image：那会让表格文字边缘发虚） */
.adm-main .tbl-wrap::-webkit-scrollbar { height: 5px; }
.adm-main .tbl-wrap::-webkit-scrollbar-track { background: var(--ink-050); border-radius: 3px; }
.adm-main .tbl-wrap::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 3px; }
.adm-main .tbl-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
/* 「全部」这类小字链接在手机上要够点击面积 */
.adm-main .card-hd a, .adm-main a.f12, .adm-main a.cinfo {
display:inline-flex; align-items:center; min-height:32px; padding:0 4px; margin-right:-4px;
}
/* 复选框/单选框：原生 16px 在手机上难点，容器放大但视觉不变。
部分页面 checkbox 写了内联 style="width:16px;height:16px"，
内联优先级高于类选择器，故必须 !important 才能覆盖。 */
.adm-main input[type=checkbox], .adm-main input[type=radio] {
width:22px !important; height:22px !important; min-width:22px;
margin:0 2px 0 0; cursor:pointer;
}
/* 标签行加高（:has() 在老浏览器会整条失效，故另给通用规则保底）*/
.adm-main .opt, .adm-main .optrow label, .adm-main form > label {
min-height:38px; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
/* ---- 闸门规则行：窄屏改「标题在上 / 控件在下」两段式 ----
横向排布时 26+78+92+34=230px 固定控件会把标签压到 13px 宽变成竖排单字 */
.gate-row { flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 13px 14px; }
.gate-row > .grow { flex: 1 1 100%; order: 2; }
.gate-row .code { order: 1; }
.gate-row .gt-ctl { order: 3; flex: 1 1 100%; }
.gate-row .res { order: 4; margin-left: auto; align-self: center; }
.gate-row .gt-ctl input[type=number] { flex: 0 0 92px; height: 42px; }
.gate-row .gt-ctl select { flex: 1 1 auto; height: 42px; }
.gate-row .code { align-self: flex-start; margin-top: 2px; }
@supports (selector(:has(*))) {
.adm-main label:has(> input[type=checkbox]), .adm-main label:has(> input[type=radio]) {
min-height:38px; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
}
/* 步骤条：横向滑动，不撑破 */
.steps { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.step { flex: 0 0 auto; }
.step-line { min-width: 16px; margin: 0 8px; flex: 0 0 auto; }
.step .lb { font-size: 12.5px; white-space: nowrap; }
/* 表单控件在手机上加大，避免难点 */
select.sel, .inp { height: 44px; }
.fld textarea.inp { min-height: 110px; }
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.btn-sm { min-height: 36px; }
.btn-lg { min-height: 48px; }
.modal { max-width: none; }
.toast-wrap { left: 16px; right: 16px; top: 68px; }
.toast { max-width: none; min-width: 0; }
.tbl thead { display: none; }
.tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
.tbl tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tbl tbody td { padding: 0; border: none; display: flex;
justify-content: space-between; gap: 14px; align-items: center; }
.tbl tbody td::before {
content: attr(data-l); font-size: 12px; color: var(--ink-500);
font-weight: 500; flex: 0 0 auto;
}
.tbl tbody td:empty { display: none; }
.tbl .num, .tbl .act { text-align: right; }
.tbl tr.tbl-head { display: none; }
.fab-group { right: 16px; bottom: 72px; }
.fab { width: 46px; height: 46px; font-size: 20px; }
/* 页脚链接在手机上也要够大可点 */
.ft-cols a { font-size: 14px; padding: 6px 0; display: inline-block; min-height: 34px; }
.ft-cols > div { gap: 4px; }
/* 密码显隐按钮（登录/注册）放大到可点 */
[data-toggle-pw] { width: 40px !important; height: 40px !important; }
/* 文字型链接（.c400/.c500 等）在手机上给足点击区 */
.fld .hint a, .tc a, p a { display: inline-block; padding: 3px 0; min-height: 30px; }
/* 登录/注册页的辅助链接（忘记密码 / 去登录 等） */
a.c400, a.c500, a.fw5 { display: inline-block; padding: 6px 2px; min-height: 34px; line-height: 1.5; }
}
/* 手机版底部导航（登录 + 游客均可见） */
.mnav { display: none; }
@media (max-width: 991px) {
.mnav {
display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -1px 8px rgba(20,30,50,.04);
}
.mnav a {
flex: 1 1 0; min-width: 0; padding: 7px 2px 8px; text-align: center;
font-size: 10.5px; font-weight: 500; color: var(--ink-500);
display: flex; flex-direction: column; align-items: center; gap: 3px;
min-height: 52px; justify-content: center;
}
.mnav a i { font-size: 18px; }
.mnav a.on { color: var(--brand-600); }
.mnav a.on i { color: var(--brand-600); }
/* 语言切换入口：与其它项同宽，但用主色描边区别 */
.mnav a.mnav-lang { color: var(--brand-600); }
.mnav a.mnav-lang span { font-size: 9.5px; font-weight: 600; }
.has-mnav { padding-bottom: 68px; }
}
/* v2.2 防恶意投标 · 前台风险提示 */
.af-hint {
display: flex; gap: 11px; padding: 13px 15px;
background: var(--warn-soft, #fff8e6); border: 1px solid #f0d9a8;
border-radius: var(--r-md); font-size: 13px; color: var(--ink-700);
}
.af-hint > i { font-size: 16px; color: var(--warn); flex-shrink: 0; margin-top: 1px; }
.af-hint b { display: block; font-size: 13.5px; color: var(--ink-900); margin-bottom: 3px; }
.af-hint p { margin: 0; line-height: 1.65; color: var(--ink-500); }
/* v2.0 可搜索下拉 */
.ssd { position: relative; min-width: 0; }
.ssd-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ssd-btn {
display: flex; align-items: center; gap: 8px; width: 100%;
height: 40px; padding: 0 32px 0 14px; border: 1px solid var(--line);
border-radius: var(--r-pill); background: #fff; color: var(--ink-800);
font-family: inherit; font-size: 14px; cursor: pointer; transition: all .16s;
position: relative; text-align: left;
}
/* 放大镜提示：告诉用户这个下拉可以直接打字搜索 */
.ssd-ic {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
font-size: 11px; color: var(--ink-300); pointer-events: none;
}
.ssd-btn.ssd-has-ic { padding-left: 30px; }
.ssd-btn.ssd-has-ic:hover { border-color: var(--brand); }
.ssd-btn.ssd-has-ic:hover .ssd-ic { color: var(--brand); }
.ssd-btn:focus { outline: none; border-color: var(--brand); box-shadow: var(--sh-focus); }
.ssd-btn::after {
content: ''; position: absolute; right: 13px; top: 50%; width: 10px; height: 6px;
transform: translateY(-70%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7F96' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.ssd-ico { display: none; }
.ssd-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssd-pop {
position: absolute; z-index: 900; left: 0; right: 0; top: calc(100% + 6px);
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
box-shadow: var(--sh-3); overflow: hidden; display: none;
}
.ssd.on .ssd-pop { display: block; }
.ssd-inp { width: 100%; height: 40px; border: 0; border-bottom: 1px solid var(--line); padding: 0 14px; font-family: inherit; font-size: 14px; color: var(--ink-800); }
.ssd-inp:focus { outline: none; }
.ssd-list { max-height: 260px; overflow-y: auto; padding: 5px; }
.ssd-opt { padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-700); cursor: pointer; }
.ssd-opt:hover, .ssd-opt.on { background: var(--brand-soft); color: var(--brand-700); }
.ssd-none { padding: 14px; text-align: center; color: var(--ink-400); font-size: 13px; }
.inp.ssd-hidden ~ .ssd .ssd-btn, .inp.ssd-hidden + .ssd .ssd-btn { height: 46px; }
/* v1.9 俄市场专属：ОЭЗ 经济特区徽章 */
.sez-badge {
display: inline-block; margin-left: 6px; padding: 1px 7px;
font-size: 11px; line-height: 1.6; font-weight: 600;
color: #0a6c4d; background: #e6f7f0; border: 1px solid #b7e6d2;
border-radius: 999px; vertical-align: 1px; white-space: nowrap; cursor: help;
}
/* v1.9 后台市场默认币种下拉 */
.cur-sel { height: 30px; width: 96px; padding: 0 6px; font-size: 12px; margin-left: auto; }
@media (max-width: 575px) { .cur-sel { width: 84px; } }
@media (min-width: 992px) { .only-m { display: none !important; } }
/* ===== 市场开关（后台站点设置）===== */
.mkt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(188px,1fr)); gap:10px 16px; }
.mkt-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line-soft); border-radius:11px; }
.mkt-item .mkt-flag { width:22px; height:15px; border-radius:3px; flex:0 0 auto; background:var(--line-soft,#e2e8f0); box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.mkt-item .mkt-name { flex:1 1 auto; font-size:13.5px; font-weight:500; color:var(--ink-700,#1f2937); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mkt-item .mkt-sw { position:relative; display:inline-block; width:40px; height:22px; flex:0 0 auto; }
.mkt-item .mkt-sw input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2; }
.mkt-item .mkt-sl { position:absolute; inset:0; border-radius:999px; background:var(--line,#cbd5e1); transition:background .2s; }
.mkt-item .mkt-sl::before { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .2s; }
.mkt-item .mkt-sw input:checked + .mkt-sl { background:var(--accent,#6366f1); }
.mkt-item .mkt-sw input:checked + .mkt-sl::before { transform:translateX(18px); }
/* ===== v2.6 前台洽谈页两栏布局：侧栏固定不缩、主栏可收缩（防提交后被挤变形） ===== */
.chat-layout { display:flex; gap:20px; align-items:flex-start; }
.chat-side { width:320px; flex:0 0 320px; min-width:0; }
.chat-main { flex:1 1 0%; min-width:0; }
@media (max-width: 991px) {
.chat-layout { flex-direction:column; }
.chat-side { width:100%; flex:1 1 auto; }
}
/* ===== v2.6 数字输入隐藏上下箭头（保留手动输入/粘贴） ===== */
.inp[type=number] { -moz-appearance:textfield; appearance:textfield; }
.inp[type=number]::-webkit-outer-spin-button,
.inp[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* ===== v2.7 卡片操作条：左「常用动作」右「破坏性动作」，按钮不再竖排 ===== */
.card-acts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card-acts > .ca-main { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.card-acts > .ca-side { display:flex; align-items:center; gap:6px; margin-left:auto; padding-left:10px;
border-left:1px solid var(--line-soft); }
.card-acts .btn-xs { white-space:nowrap; }
@media (max-width: 767px) {
.card-acts > .ca-side { margin-left:0; padding-left:0; border-left:0; }
}
/* ===== v2.7 洽谈页会话项：自适应宽度（不再硬编码 max-width 像素） ===== */
.conv-list { border-top:1px solid var(--line-soft); }
.conv-list.scroll { max-height:420px; overflow-y:auto; }
.conv-item { display:block; padding:11px 14px; border-bottom:1px solid var(--line-soft);
text-decoration:none; color:inherit; position:relative; transition:background .14s; }
.conv-item:hover { background:var(--ink-050); }
.conv-item.on { background:var(--brand-soft); }
.conv-item.on::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background:var(--brand-600); }
.conv-item .cv-t { display:flex; align-items:center; gap:8px; min-width:0; }
.conv-item .cv-title { flex:1 1 auto; min-width:0; font-size:13px; font-weight:600;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-item .cv-sub { display:flex; align-items:center; gap:8px; min-width:0; margin-top:3px; }
.conv-item .cv-last { flex:1 1 auto; min-width:0; font-size:12px; color:var(--ink-400);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-item .cv-time { flex:0 0 auto; font-size:11.5px; color:var(--ink-400); white-space:nowrap; }
.conv-item .cv-dot { flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
background:var(--accent); color:#fff; font-size:11px; font-weight:700;
display:inline-flex; align-items:center; justify-content:center; }
/* ===== v2.7 后台编辑弹层字段网格 ===== */
.ed-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.ed-grid .full { grid-column:1 / -1; }
@media (max-width: 767px) { .ed-grid { grid-template-columns:1fr; } }
/* ===== v2.6 地区管理：新增表单里的 ОЭЗ 开关 ===== */
.reg-sez { display:inline-flex; align-items:center; gap:9px; height:42px; cursor:pointer;
padding:0 4px; border:1px solid var(--line-soft); border-radius:10px; padding:0 11px; }
.reg-sez .mkt-name { flex:0 0 auto; font-size:13px; font-weight:600; color:var(--ink-700,#1f2937); }
/* ===== v2.6 后台统计卡网格（anti_fraud 等页 .adm-grid 此前无定义导致各卡独占一行） ===== */
.adm-grid { display:grid; gap:16px; }
/* ===== v2.5 词库机翻参考徽标 ===== */
.tag-mt { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600;
padding:2px 8px; border-radius:999px; background:#FFF4E0; color:#A86400;
border:1px solid #EFD9AE; vertical-align:middle; white-space:nowrap; }
.tag-mt i { font-size:9.5px; }
/* ===== v2.5 后台用户详情弹层 ===== */
.umodal { position:fixed; inset:0; z-index:990; display:none; }
.umodal.on { display:block; }
.um-mask { position:absolute; inset:0; background:rgba(15,20,32,.45); }
.um-box { position:absolute; top:6vh; left:50%; transform:translateX(-50%);
width:min(560px, calc(100vw - 28px)); max-height:84vh; overflow-y:auto;
background:#fff; border-radius:14px; box-shadow:0 24px 64px rgba(15,20,32,.26); }
.um-hd { display:flex; align-items:center; gap:10px; padding:14px 18px;
border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2;
font-size:14.5px; }
.um-x { margin-left:auto; width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
background:#fff; color:var(--ink-600); cursor:pointer; display:flex; align-items:center;
justify-content:center; }
.um-bd { padding:14px 18px 18px; }
.um-bd .kv { width:100%; border-collapse:collapse; }
.um-bd .kv th { text-align:left; font-size:12px; font-weight:500; color:var(--ink-400);
padding:7px 12px 7px 0; width:96px; vertical-align:top; white-space:nowrap; }
.um-bd .kv td { font-size:13px; color:var(--ink-800); padding:7px 0;
border-bottom:1px dashed var(--line-soft); word-break:break-all; }
.um-bd .kv tr:last-child td { border-bottom:none; }
/* ============================================================
首页品牌区块（v2.8）
============================================================ */
.hero { position:relative; height:380px; overflow:hidden; background:#0b1c3f; }
.hero-track { position:relative; height:100%; }
.hero-slide {
position:absolute; inset:0; opacity:0; visibility:hidden;
transition:opacity .6s ease; background-size:cover; background-position:center;
display:flex; align-items:center;
}
.hero-slide.on { opacity:1; visibility:visible; }
.hero-slide.g1 { background:linear-gradient(120deg,#1e3a8a 0%,#2B6CF0 100%); }
.hero-slide.g2 { background:linear-gradient(120deg,#0f766e 0%,#15A06A 100%); }
.hero-slide.g3 { background:linear-gradient(120deg,#9f1239 0%,#C8323C 100%); }
.hero-mask {
position:absolute; inset:0;
background:linear-gradient(to right, rgba(8,15,35,.80), rgba(8,15,35,.25));
}
.hero-in { position:relative; z-index:2; width:100%; }
.hero-tx { max-width:640px; color:#fff; }
.hero-tx h1 { font-size:34px; font-weight:800; line-height:1.15; margin:0 0 12px; letter-spacing:-.4px; }
.hero-tx p { font-size:16px; line-height:1.7; opacity:.92; margin:0 0 20px; }
.hero-dots { position:absolute; left:0; right:0; bottom:16px; z-index:3; display:flex; gap:8px; justify-content:center; }
.hero-dots .hd {
width:11px; height:11px; border-radius:50%; border:0; cursor:pointer; padding:0;
background:rgba(255,255,255,.45); transition:all .2s;
}
.hero-dots .hd.on { background:#fff; width:26px; border-radius:6px; }
.hero-nav {
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
background:rgba(255,255,255,.18); color:#fff; font-size:16px;
display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.hero-nav:hover { background:rgba(255,255,255,.34); }
.hero-nav.prev { left:14px; } .hero-nav.next { right:14px; }
.hp-sec { padding:30px 0; }
.hp-sec-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.hp-sec-hd h2 { font-size:20px; font-weight:700; margin:0; letter-spacing:-.3px; }
.hp-more { font-size:13px; color:var(--brand); font-weight:600; text-decoration:none; }
.hp-more:hover { text-decoration:underline; }
/* 重点项目：按发布数量自适应列数与卡片高度（列数=数量，避免末项被拉伸错位） */
.hp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.hp-grid.hp-n1 { grid-template-columns:1fr; }
.hp-grid.hp-n2 { grid-template-columns:1fr 1fr; }
.hp-grid.hp-n3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hp-grid.hp-n4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.hp-grid.hp-n5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.hp-grid.hp-nmany { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hp-card {
background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
text-decoration:none; color:inherit; transition:transform .18s, box-shadow .18s;
}
.hp-card:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(15,20,32,.10); }
.hp-card-img { height:150px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--brand); font-size:34px; }
.hp-card-img img { width:100%; height:100%; object-fit:cover; }
.hp-card-img.ph { background:linear-gradient(120deg,#eef3ff,#e8f7f0); color:var(--brand); }
.hp-card-bd { padding:14px; }
.hp-card-bd b { display:block; font-size:15px; margin-bottom:6px; }
.hp-card-bd p { font-size:13px; color:var(--ink-400); line-height:1.6; margin:0 0 10px; }
.hp-card-btn { font-size:13px; font-weight:600; color:var(--brand); }
/* 数量越少占位越大、图更高、字更大，避免空旷 */
.hp-grid.hp-n1 .hp-card-img { height:300px; font-size:46px; }
.hp-grid.hp-n1 .hp-card-bd { padding:22px; }
.hp-grid.hp-n1 .hp-card-bd b { font-size:19px; }
.hp-grid.hp-n1 .hp-card-bd p { font-size:14px; }
.hp-grid.hp-n2 .hp-card-img { height:240px; font-size:40px; }
.hp-grid.hp-n2 .hp-card-bd { padding:18px; }
.hp-grid.hp-n2 .hp-card-bd b { font-size:17px; }
.hp-grid.hp-n3 .hp-card-img { height:190px; }
.hp-grid.hp-n4 .hp-card-img { height:162px; }
.hp-grid.hp-n4 .hp-card-bd b,
.hp-grid.hp-n5 .hp-card-bd b { font-size:14.5px; }
.hp-grid.hp-n5 .hp-card-img { height:150px; }
.hp-policy { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.hp-policy-card { background:linear-gradient(180deg,#f7faff,#f3f8ff); border:1px solid var(--line); border-radius:12px; padding:16px; }
.hp-policy-h { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.hp-policy-h .hp-flag { font-size:18px; }
.hp-policy-h b { font-size:15px; }
.hp-policy-card p { font-size:13px; color:var(--ink-500); line-height:1.65; margin:0; }
.hp-ad { display:block; margin:0; }
.hp-ad img { width:100%; display:block; border-radius:12px; }
.hp-ad .ad-ph {
border-radius:12px; min-height:120px; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:14px; letter-spacing:.5px;
background:linear-gradient(120deg,#2B6CF0,#C8323C);
}
.hp-ad + .hp-ad { margin-top:12px; }
/* 底部友情链接 + 小图广告 */
.ft-extra { border-top:1px solid var(--line-soft); padding:18px 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.ft-links { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.ft-links-t { font-size:13px; font-weight:600; color:var(--ink-600); }
.ft-links a { font-size:13px; color:var(--ink-500); text-decoration:none; }
.ft-links a:hover { color:var(--brand); }
.ft-ads { display:flex; gap:10px; }
.ft-ad { display:block; }
.ft-ad img { height:42px; width:auto; border-radius:6px; border:1px solid var(--line); display:block; }
.ft-ad span {
display:block; background:linear-gradient(120deg,#2B6CF0,#C8323C); color:#fff;
font-size:11px; padding:6px 14px; border-radius:6px;
}
/* 首页两栏布局：需求大厅（主）+ 政策利好（右栏） */
.hp-layout { display:flex; gap:24px; align-items:flex-start; }
.hp-main { flex:1 1 auto; min-width:0; }
.hp-side { flex:0 0 300px; width:300px; position:sticky; top:16px; }
.hp-side .hp-policy--mini { padding:0; }
.hp-policy--mini .hp-policy { grid-template-columns:1fr; gap:10px; }
.hp-policy--mini .hp-policy-card { padding:12px 14px; }
.hp-policy--mini .hp-policy-h { margin-bottom:6px; }
.hp-policy--mini .hp-policy-h b { font-size:14px; }
.hp-policy--mini .hp-policy-card p { font-size:12px; color:var(--ink-400); }
.hp-policy--mini .hp-sec-hd { margin-bottom:10px; }
.hp-policy--mini .hp-sec-hd h2 { font-size:17px; }
/* 需求列表内嵌广告（列表宽，弱边框 + 角标，不突兀） */
.dcard-ad { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg); }
.dcard-ad .dcard-ad-tag {
position:absolute; top:8px; left:8px; z-index:2; font-size:11px; line-height:1;
padding:4px 7px; background:rgba(15,20,32,.55); color:#fff; border-radius:6px; letter-spacing:.5px;
}
.dcard-ad-link { display:block; }
.dcard-ad img { width:100%; max-height:180px; object-fit:cover; display:block; }
.dcard-ad .ad-ph { height:120px; }
/* 政策与利好公告条（hero 下、项目上的滚动标题） */
.hp-ticker { display:flex; align-items:center; justify-content:center; gap:12px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:10px; padding:0 14px; height:46px; overflow:hidden; margin:0 0 18px; }
.hp-ticker-view { flex:0 1 auto; min-width:0; overflow:hidden; height:100%; }
.hp-ticker-track { display:flex; align-items:center; height:100%; white-space:nowrap; }
.hp-ticker--run .hp-ticker-track { width:max-content; animation:hpTick 24s linear infinite; }
.hp-ticker-set { display:flex; align-items:center; gap:40px; padding-right:40px; }
.hp-ticker:hover .hp-ticker-track { animation-play-state:paused; }
.hp-ticker-item { background:none; border:0; cursor:pointer; font-size:13.5px; color:var(--ink-600); padding:0; display:inline-flex; align-items:center; gap:6px; }
.hp-ticker-item:hover { color:var(--brand); }
.hp-ticker-item .fa-circle-info { color:var(--brand); font-size:12px; }
@keyframes hpTick { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.hp-pol-img { width:100%; max-height:260px; object-fit:cover; border-radius:10px; margin-bottom:12px; display:block; }
#hpPolBody p { white-space:pre-wrap; line-height:1.7; color:var(--ink-600); font-size:14px; margin:0; }
/* 后台：区块管理 */
.bl-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.bl-tab { padding:8px 16px; border:1px solid var(--line); border-radius:999px; font-size:13.5px; color:var(--ink-600); text-decoration:none; background:#fff; }
.bl-tab.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.bl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.bl-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.bl-thumb { height:120px; position:relative; background:var(--bg); overflow:hidden; }
.bl-thumb img { width:100%; height:100%; object-fit:cover; }
.bl-thumb.ph { background:linear-gradient(120deg,#2B6CF0,#C8323C); display:flex; align-items:center; justify-content:center; }
.bl-thumb .bl-ph-ic { color:#fff; font-size:30px; opacity:.85; }
.bl-langtag { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.5); color:#fff; font-size:11px; padding:2px 8px; border-radius:6px; }
.bl-offtag { position:absolute; top:8px; right:8px; background:var(--ink-500); color:#fff; font-size:11px; padding:2px 8px; border-radius:6px; }
.bl-info { padding:12px; flex:1; }
.bl-meta { margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; }
.bl-ops { display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--line-soft); }
.bl-imgrow { display:flex; gap:8px; align-items:center; }
.bl-imgrow .inp { flex:1; }
.bl-prev { margin-top:8px; max-width:180px; max-height:100px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.bl-prev img { width:100%; display:block; }
/* 后台：上传与存储（云端凭证占位） */
.up-cloud { margin-top:16px; border-top:1px dashed var(--line-soft); padding-top:14px; }
.up-col { display:flex; flex-direction:column; gap:8px; }
.up-col-h { font-size:13px; font-weight:600; color:var(--ink-600); margin-bottom:2px; }
.up-col .inp { height:38px; font-size:13px; }
@media (max-width:768px) {
.hero { height:320px; }
.hero-tx h1 { font-size:24px; }
.hero-tx p { font-size:14px; }
.hp-sec { padding:22px 0; }
.ft-extra { flex-direction:column; align-items:flex-start; }
/* 重点项目在窄屏收拢为 2 列，单列放大图避免拥挤 */
.hp-grid.hp-n3, .hp-grid.hp-n4, .hp-grid.hp-n5, .hp-grid.hp-nmany { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hp-grid.hp-n4 .hp-card-img, .hp-grid.hp-n5 .hp-card-img { height:170px; }
}
@media (max-width:520px) {
.hp-grid, .hp-grid.hp-n2, .hp-grid.hp-n3, .hp-grid.hp-n4, .hp-grid.hp-n5, .hp-grid.hp-nmany { grid-template-columns:1fr; }
.hp-grid .hp-card-img { height:200px; }
}
@media (max-width:860px) {
.hp-layout { flex-direction:column; }
.hp-side { flex:none; width:100%; position:static; }
}
/* ============================================================
v2.17 报价审核详情抽屉（小眼睛）
============================================================ */
.qdrawer-mask { align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.qdrawer { max-height: 92vh; display: flex; flex-direction: column; }
.qdrawer .modal-hd { flex: 0 0 auto; }
.qdrawer .modal-bd { flex: 1 1 auto; overflow-y: auto; padding: 0; }
.qdr-loading, .qdr-empty { padding: 44px 20px; text-align: center; color: var(--ink-400); font-size: 13.5px; }
.qdr { display: flex; flex-direction: column; }
/* 分区 */
.qdr-sec { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.qdr-first { background: #fffdf7; }
.qdr-hd { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
color: var(--ink-800); margin-bottom: 10px; }
.qdr-hd i { color: var(--brand-600); font-size: 12px; }
.qdr-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-400); line-height: 1.6; }
/* ① 判定标签 */
.qdr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qdr-chips .tag { font-size: 11.5px; }
/* ② 对照表 */
.qdr-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.qdr-tbl th { text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-400);
padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.qdr-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink-700); vertical-align: top; }
.qdr-tbl td.qdr-k { font-weight: 600; color: var(--ink-800); white-space: nowrap; }
/* ③ 供应商信息 */
.qdr-kv { display: grid; grid-template-columns: 84px 1fr; gap: 5px 10px; font-size: 12.5px; }
.qdr-kt { color: var(--ink-400); }
.qdr-kv1 { color: var(--ink-800); word-break: break-word; }
.qdr-intro { margin-top: 9px; padding: 8px 10px; background: var(--ink-050);
border-radius: 7px; font-size: 12px; color: var(--ink-600); line-height: 1.65; }
.qdr-contacts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.qdr-c { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
background: var(--ink-050); border: 1px solid var(--line); border-radius: 999px;
font-size: 12px; color: var(--ink-700); font-family: var(--mono, monospace); }
.qdr-c i { color: var(--ink-400); }
.qdr-eye { border: none; background: transparent; color: var(--ink-400);
cursor: pointer; padding: 0 1px; font-size: 11px; line-height: 1; }
.qdr-eye:hover { color: var(--brand-600); }
.qdr-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
/* ④ 留言 */
.qdr-msg { margin-top: 7px; padding: 10px 12px; background: var(--ink-050);
border-radius: 8px; font-size: 12.5px; line-height: 1.7; color: var(--ink-800); }
.qdr-msg-ori { color: var(--ink-500); font-style: italic; }
/* 底部 */
.qdr-ft { display: flex; align-items: center; justify-content: space-between;
padding: 11px 20px; background: var(--ink-050); font-size: 11.5px; color: var(--ink-400); }
@media (max-width: 640px) {
.qdrawer-mask { padding: 0; }
.qdrawer { max-height: 100vh; height: 100vh; border-radius: 0; }
.qdr-sec { padding: 12px 14px; }
.qdr-tbl { font-size: 12px; }
}
|