/* ============ 哈夫克集团官网 复刻样式 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue: #2b7de1;
  --blue-dark: #1e63c8;
  --ink: #1c2430;
  --grey: #6b7684;
  --line: #c9d3de;
  --paper: #ece9e2;
}

html, body { height: 100%; }

body {
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
  min-width: 1180px;
  background: linear-gradient(118deg, #eef2f7 0%, #dde5ee 45%, #cfd9e5 100%);
  position: relative;
}

/* 背景斜切装饰 */
.bg-deco { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-deco i { position: absolute; display: block; }
.bg-deco .d1 { width: 90vw; height: 140vh; top: -30vh; left: 30vw;
  background: linear-gradient(200deg, rgba(255,255,255,.55), rgba(190,205,224,.18)); transform: rotate(24deg); }
.bg-deco .d2 { width: 60vw; height: 120vh; top: -10vh; left: -18vw;
  background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(190,205,224,.12)); transform: rotate(-18deg); }
.bg-deco .d3 { width: 40vw; height: 80vh; bottom: -20vh; right: -8vw;
  background: linear-gradient(20deg, rgba(255,255,255,.4), rgba(170,190,215,.15)); transform: rotate(12deg); }

.page { position: relative; z-index: 1; }

/* 登录页（终端接入）不显示网站导航，只保留终端本体 */
body.no-nav header { display: none; }

/* ---------- 导航：首页时绝对定位浮在 Hero 之上（参考图中导航条透明，图片从其下方穿过）；
   其余页面为普通文档流，撑开自身高度，避免压住正文 ---------- */
header { position: relative; z-index: 20; }
body.has-hero header { position: absolute; left: 0; right: 0; top: 0; }
.nav { position: relative; height: 79px; padding: 0 46px 0 36px; }
.logo { position: absolute; left: 36px; top: 71px; display: flex; align-items: center; text-decoration: none; }
body:not(.has-hero) .logo { top: 12px; }
body:not(.has-hero) .nav-menu { top: 27px; }
body:not(.has-hero) .nav-right { top: 19px; }
.logo svg, .logo img { display: block; }
.logo img { width: 240px; height: auto; }
/* 图形标记轻微呼吸（参考图中 logo 有动态） */
.logo svg g { transform-origin: 24px 23px; animation: logoPulse 4.5s ease-in-out infinite; }
@keyframes logoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .82; transform: scale(.94); }
}
.nav-menu { position: absolute; left: 581px; top: 86px; display: flex; align-items: center; gap: 105px; }
.nav-menu a { font-size: 16px; color: #2a3440; text-decoration: none; letter-spacing: 1px; transition: color .2s; white-space: nowrap; }
.nav-menu a:hover { color: var(--blue); }
.nav-menu a.active { color: var(--blue); font-weight: 600; font-size: 17px; }

.nav-right { position: absolute; right: 41px; top: 78px; display: flex; align-items: center; gap: 9px; }
.nav-right .pts-label { font-size: 17px; font-weight: 600; color: #1c2430; letter-spacing: 1px; }
.nav-right .pts-div { width: 1px; height: 24px; background: #1c2430; margin: 0 8px; }
.nav-right .pts-num { font-size: 26px; font-weight: 700; letter-spacing: 1px; min-width: 62px; }
.nav-right .pts-num.flash { animation: flash .6s ease; }
@keyframes flash { 0%,100% { color: inherit; } 40% { color: var(--blue); transform: scale(1.15); } }
.nav-login { margin-left: 14px; display: inline-block; background: var(--blue); color: #fff; text-decoration: none;
  font-size: 13px; letter-spacing: 2px; padding: 8px 16px; transition: background .2s; }
.nav-login:hover { background: var(--blue-dark); }
.nav-user { margin-left: 12px; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-size: 13px; }
.nav-user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }


/* ---------- 首页 Hero（重绘：图片仅作场景，文案/按钮/指示器均为 DOM） ---------- */
.hero { position: relative; width: 100%; height: 604px; overflow: hidden; }
.hero .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
  background-size: cover; background-position: center top; }
.hero .slide.show { opacity: 1; }
/* 左侧斜切遮罩：盖住原图中烘焙的文字，为 HTML 文案腾出版面 */
.hero-mask { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(238,242,247,.97) 0%, rgba(238,242,247,.95) 30%, rgba(238,242,247,.55) 46%, rgba(238,242,247,0) 56%); }
.hero .slide-mask { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; z-index: 2;
  background: linear-gradient(100deg, rgba(236,240,246,1), rgba(236,240,246,.995) 78%, rgba(236,240,246,0));
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); }

.hero-text { position: absolute; left: 36px; top: 251px; z-index: 3; width: 640px; }
.hero-text .ht-no { font-size: 13px; letter-spacing: 4px; color: #7f8c9b; margin-bottom: 12px; }
.hero-text h1 { font-size: 62px; font-weight: 700; letter-spacing: 6px; line-height: 1.1; color: #16202c; }
.hero-text .ht-sub { display: block; font-size: 19px; color: #48566a; margin-top: 6px; letter-spacing: 2px; line-height: 1.5; }
.hero-text .ht-line { display: none; }
.hero-text .ht-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; vertical-align: top;
  background: var(--blue); color: #fff; border: none; font-size: 14px; letter-spacing: 2px;
  padding: 11px 24px; cursor: pointer; transition: background .2s, transform .2s; }
.hero-text .ht-cta:hover { background: var(--blue-dark); transform: translateX(4px); }
.hero-text .ht-tag { display: inline-block; margin-left: 14px; font-size: 12px; color: #6b7684; border-bottom: 1px solid #9aa7b6; padding-bottom: 2px; cursor: pointer; }
.hero-text .ht-tag:hover { color: var(--blue); border-color: var(--blue); }

.hero-dots { position: absolute; left: 36px; bottom: 180px; display: flex; gap: 9px; z-index: 4; }
.hero-dots i { width: 12px; height: 12px; border: 1px solid #8fa2b8; cursor: pointer; transition: all .3s; }
.hero-dots i.on { background: var(--blue); border-color: var(--blue); }

/* ---------- 首页下半：深色区（重绘卡片） ---------- */
.home-lower {
  margin-top: 0; padding: 0 48px 56px 36px;
  display: grid; grid-template-columns: 816px 1fr; gap: 116px;
  background: transparent;
}
.home-lower > .fade-up { position: relative; }
.home-lower > .fade-up:nth-child(2) {
  min-height: 390px;
  padding-bottom: 56px;
  background: #202124;
}
.sec-title { position: absolute; left: 0; right: 0; top: -48px; display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 700; letter-spacing: 1px; margin: 0; color: #fff; }
.home-lower .sec-title { color: #151a22; }
.sec-title::before { content: ""; width: 4px; height: 28px; background: var(--blue); }
.sec-title small { margin-left: auto; font-size: 11px; font-weight: 400; color: #7d8798; letter-spacing: 1px; }

/* 员工卡：背景图 + DOM 文字层 */
.emp-cards, .voice-cards { display: flex; gap: 16px; }
.card {
  position: relative; overflow: hidden; cursor: pointer; background: #14161c;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .35s, box-shadow .35s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .top-shade { position: absolute; left: 0; right: 0; top: 0; height: 84px;
  background: linear-gradient(180deg, #101218 0%, #101218 60%, rgba(16,18,24,0) 100%); }
.card .bot-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 118px;
  background: linear-gradient(0deg, #101218 0%, #101218 55%, rgba(16,18,24,0) 100%); }
.card .c-name { position: absolute; left: 18px; top: 42px; z-index: 2; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.card .c-dept { position: absolute; left: 18px; top: 74px; z-index: 2; color: #9fb0c4; font-size: 11.5px; letter-spacing: 1px; }
.card .c-quote { position: absolute; left: 18px; right: 14px; bottom: 40px; z-index: 2; color: #dfe6ef;
  font-size: 12.5px; line-height: 1.7; letter-spacing: 1px; }
.card .c-no { position: absolute; right: 14px; top: 16px; z-index: 2; color: #6d7a8c; font-size: 10px; letter-spacing: 1px; }
.emp-cards .card { width: 400px; height: 342px; }
.voice-cards .card { width: 199px; height: 342px; }

/* 优秀员工卡片：人物使用透明抠图，背景和文字按参考卡片重建 */
.feature-card {
  isolation: isolate;
  overflow: visible;
  z-index: 2;
  border: 0;
  background: linear-gradient(108deg, #2f83dc 0%, #7eafe0 55%, #eef2f5 100%);
}
.feature-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(145deg, rgba(16,78,156,.5), rgba(32,115,204,.08) 60%, rgba(12,42,83,.18));
  clip-path: polygon(0 0, 54% 0, 30% 100%, 0 100%);
}
.feature-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -12%;
  top: 39%;
  width: 70%;
  height: 2px;
  background: rgba(255,255,255,.18);
  transform: rotate(-38deg);
  transform-origin: left center;
}
.feature-card .feature-person {
  position: absolute;
  z-index: 2;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}
.feature-card .c-name,
.feature-card .c-dept,
.feature-card .c-quote { z-index: 4; color: #fff; text-shadow: 0 1px 3px rgba(15,45,82,.28); }
.feature-card .c-name { left: 18px; top: 31px; font-size: 28px; letter-spacing: 2px; }
.feature-card .c-dept { left: 18px; top: 76px; font-size: 13px; color: rgba(255,255,255,.78); letter-spacing: 1px; }
.feature-card .c-quote { left: 18px; right: auto; bottom: 27px; width: 224px; font-size: 21px; font-weight: 700; line-height: 1.35; letter-spacing: 1px; }
.feature-card .c-no,
.feature-card .top-shade,
.feature-card .bot-shade { display: none; }
.feature-lina .feature-person {
  height: 390px;
  right: -28px;
  bottom: 0;
  transform: scaleX(-1);
}
.feature-klein .feature-person {
  height: 390px;
  right: -12px;
  bottom: 0;
  transform: scaleX(-1);
}
/* 员工之声卡：图片本身已含版式（顶栏 + 蓝色照片带 + 引语），不再叠加暗角，避免糊掉画面 */
.voice-cards .card .top-shade,
.voice-cards .card .bot-shade { display: none; }

/* ---------- 集团背景 ---------- */
.company-brief { padding: 78px 36px 92px; background: #0f121a; color: #f2f5fa; border-top: 1px solid rgba(255,255,255,.08); }
.brief-head { max-width: 780px; }
.brief-kicker { color: #6ea8f0; font-size: 11px; letter-spacing: 3px; margin-bottom: 14px; }
.brief-head h2 { font-size: 30px; letter-spacing: 4px; font-weight: 700; }
.brief-head p { color: #9eabba; font-size: 15px; letter-spacing: 2px; margin-top: 12px; }
.brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 42px; }
.brief-card { min-height: 180px; padding: 22px 24px 26px; background: linear-gradient(145deg, rgba(38,46,65,.95), rgba(20,24,34,.92)); border: 1px solid rgba(123,161,208,.25); position: relative; }
.brief-card::after { content: ""; position: absolute; left: 24px; bottom: 0; width: 48px; height: 3px; background: var(--blue); }
.brief-index { color: #5d98df; font-size: 12px; letter-spacing: 2px; }
.brief-card h3 { margin-top: 24px; font-size: 18px; letter-spacing: 2px; }
.brief-card p { margin-top: 12px; color: #aeb9c8; font-size: 13px; line-height: 1.9; }

/* ---------- 通用两栏 ---------- */
.layout { display: flex; gap: 34px; padding: 0 56px 40px 53px; align-items: flex-start; }
.side-panel { width: 264px; flex: none; background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,244,249,.85));
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 6px 22px rgba(120,140,165,.25); padding: 22px 20px 24px; }
.side-panel h2 { font-size: 19px; letter-spacing: 2px; padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid #b9c4d1; position: relative; }
.side-panel h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 2px; background: var(--blue); }
.side-panel p { font-size: 12.5px; line-height: 1.9; color: #3c4654; margin-bottom: 12px; text-align: justify; }
.info-block { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.75);
  border: 1px solid #d4dce6; padding: 10px 12px; margin-bottom: 10px; }
.info-block .ic { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--blue); }
.info-block b { font-size: 13px; display: block; margin-bottom: 3px; }
.info-block span { font-size: 11px; color: #5c6875; line-height: 1.6; display: block; }

.sentiment-box { transition: opacity .3s ease; }
.sentiment-box .info-block { animation: fadeUp .5s ease both; }
  color: #fff; border: none; font-size: 14px; letter-spacing: 6px; padding: 10px 0; cursor: pointer; }
.side-btn:hover { background: linear-gradient(180deg, #8a95a2, #6e7986); }

/* ---------- 论坛列表 ---------- */
.forum-main { flex: 1; min-width: 0; }
.forum-table { width: 100%; border-collapse: collapse; }
.forum-table th { font-size: 13.5px; color: #33404e; font-weight: 700; letter-spacing: 2px; text-align: left;
  padding: 10px 12px 12px; border-bottom: 2px solid var(--blue); }
.forum-table th.c, .forum-table td.c { text-align: center; }
.forum-table td { padding: 13px 12px; border-bottom: 1px solid #c2cdd9; font-size: 13.5px; vertical-align: middle; }
.forum-table tbody tr:hover td { background: rgba(255,255,255,.45); }
.forum-table tbody tr.new-topic td { animation: flashRow 1.2s ease; }
@keyframes flashRow { 0% { background: rgba(43,125,225,.25); } 100% { background: transparent; } }

.topic-title { color: #1c2430; text-decoration: none; font-weight: 600; cursor: pointer; }
.topic-title:hover { color: var(--blue); text-decoration: underline; }
.pinned-ico { display: inline-flex; width: 26px; height: 26px; margin-right: 10px; background: var(--blue);
  color: #fff; align-items: center; justify-content: center; font-size: 13px; vertical-align: middle; }
.chk { display: inline-block; width: 15px; height: 15px; margin-right: 10px; border: 1px solid #9aa7b6;
  background: rgba(255,255,255,.7); cursor: pointer; vertical-align: middle; position: relative; }
.chk.on { background: var(--blue); border-color: var(--blue); }
.chk.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.poster-cell { display: flex; align-items: center; gap: 9px; }
.poster-cell img { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; }
.poster-cell .pn { font-size: 13px; font-weight: 600; }
.poster-cell .pd { font-size: 11px; color: #77828f; margin-top: 2px; }
.last-reply { color: #4a5666; font-size: 12.5px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.forum-foot { display: flex; align-items: center; gap: 24px; background: rgba(233,239,246,.92);
  border-top: 1px solid #b9c4d1; padding: 9px 14px; font-size: 12.5px; color: #46525f; }
.forum-foot .fi { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.forum-foot .fi:hover, .forum-foot .fi.on { color: var(--blue); }
.forum-foot .sq { width: 12px; height: 12px; background: var(--blue); }
.forum-foot .sq.o { background: transparent; border: 1px solid #7c8b9c; }
.forum-foot .pages { margin-left: auto; color: #77828f; }

/* ---------- 帖子详情 ---------- */
.post-main { flex: 1; min-width: 0; background: linear-gradient(165deg, rgba(255,255,255,.94), rgba(242,246,251,.88));
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 6px 22px rgba(120,140,165,.25); padding: 24px 28px 0; }
.post-head { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; }
.post-head > img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; }
.post-head .un { font-size: 15px; font-weight: 700; }
.post-head .dept { font-size: 12px; color: #77828f; margin: 3px 0 5px; }
.tag-blue { display: inline-block; background: var(--blue); color: #fff; font-size: 11px; padding: 2px 8px; letter-spacing: 1px; }
.post-head .op { margin-left: auto; text-align: right; }
.op-squares { display: flex; gap: 5px; justify-content: flex-end; margin-bottom: 8px; }
.op-squares i { width: 9px; height: 9px; border: 1px solid #9aa7b6; }
.op-squares i.on { background: #55606e; border-color: #55606e; }
.op-text { font-size: 9px; color: #8b97a5; letter-spacing: 1px; }
.op-text b { color: #4a5666; }

.post-title { font-size: 21px; font-weight: 700; padding: 12px 0 16px; letter-spacing: 1px; }
.post-body p { font-size: 14px; line-height: 2; color: #2c3644; margin-bottom: 16px; }
.post-body .sign { color: #55606e; }
.post-foot { margin: 24px -28px 0; background: linear-gradient(180deg, #e6ecf3, #d8e0ea); border-top: 1px solid #c2cdd9;
  padding: 10px 28px; display: flex; align-items: center; justify-content: flex-end; gap: 22px; font-size: 12.5px; color: #4a5666; }
.post-foot .act { cursor: pointer; display: flex; align-items: center; gap: 5px; user-select: none; }
.post-foot .act:hover { color: var(--blue); }
.post-foot .act.liked { color: var(--blue); font-weight: 700; }

/* 回复区 */
.reply-box { margin: 22px -28px 0; padding: 18px 28px 22px; border-top: 1px dashed #c2cdd9; background: rgba(255,255,255,.55); }
.reply-box h4 { font-size: 13px; letter-spacing: 2px; color: #33404e; margin-bottom: 10px; }
.reply-box textarea { width: 100%; height: 74px; resize: vertical; padding: 10px 12px; font-size: 13px;
  font-family: inherit; border: 1px solid #c2cdd9; background: #fff; outline: none; }
.reply-box textarea:focus { border-color: var(--blue); }
.reply-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.btn-blue { background: var(--blue); color: #fff; border: none; font-size: 13px; letter-spacing: 2px; padding: 8px 20px; cursor: pointer; }
.btn-blue:hover { background: var(--blue-dark); }
.reply-hint { font-size: 11.5px; color: #8b97a5; }
.reply-list { margin-top: 16px; }
.reply-item { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid #dde3ea; }
.reply-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.reply-item .rn { font-size: 13px; font-weight: 700; }
.reply-item .rt { font-size: 11px; color: #8b97a5; margin-left: 8px; font-weight: 400; }
.reply-item .rc { font-size: 13px; color: #3c4654; margin-top: 4px; line-height: 1.7; }

/* 帖子页右侧栏 */
.recent-panel { width: 400px; flex: none; }
.recent-panel h3 { font-size: 17px; letter-spacing: 2px; padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 1px solid #b9c4d1; position: relative; }
.recent-panel h3::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 2px; background: var(--blue); }
.recent-item { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid #c2cdd9; cursor: pointer; }
.recent-item:hover { background: rgba(255,255,255,.5); }
.recent-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; flex: none; }
.recent-item .ri-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recent-item .un { font-size: 13.5px; font-weight: 700; }
.recent-item .dep { font-size: 11px; color: #77828f; }
.recent-item .tag { background: var(--blue); color: #fff; font-size: 10.5px; padding: 1px 7px; }
.recent-item .txt { font-size: 12.5px; color: #3c4654; line-height: 1.7; margin-top: 5px; }
.recent-item .tm { font-size: 11px; color: #8b97a5; margin-top: 6px; display: flex; justify-content: space-between; }
.recent-item .del { cursor: pointer; color: #77828f; font-size: 13px; }
.recent-item .del:hover { color: #c1272d; }

/* ---------- 商城 ---------- */
.market-main { flex: 1; min-width: 0; }
.market-banner { position: relative; box-shadow: 0 8px 24px rgba(20,30,45,.3); overflow: hidden;
  aspect-ratio: 1316 / 245; background: #12161d; }
.market-banner img { width: 100%; display: block; }
/* 横幅轮播：三张图叠放，用 opacity 切换（容器高度由 aspect-ratio 固定） */
.market-banner .mb-slide { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.market-banner .mb-slide.show { opacity: 1; }
.market-banner .mb-dots { position: absolute; left: 22px; bottom: 18px; display: flex; gap: 8px; z-index: 3; }
.market-banner .mb-dots i { width: 11px; height: 11px; border: 1px solid rgba(255,255,255,.7); cursor: pointer; transition: all .3s; }
.market-banner .mb-dots i.on { background: var(--blue); border-color: var(--blue); }
.market-banner .mb-cta { position: absolute; right: 26px; bottom: 22px; z-index: 3; background: rgba(16,20,26,.85);
  color: #fff; border: 1px solid rgba(255,255,255,.35); font-size: 13px; letter-spacing: 2px; padding: 9px 20px; cursor: pointer; }
.market-banner .mb-cta:hover { background: var(--blue); border-color: var(--blue); }

.product-list { margin-top: 22px; }
.product-row { padding: 16px 18px; margin-bottom: 14px; background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(242,246,251,.82));
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 4px 14px rgba(120,140,165,.18); }
.pr-top { display: flex; align-items: center; gap: 20px; }
.product-row .thumb { width: 62px; height: 82px; flex: none; object-fit: contain; object-position: center; padding: 3px; box-sizing: border-box; background: #fff; }
.product-row .p-info { flex: 1; }
.product-row .p-name { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.quality-tag { display: inline-block; margin-left: 10px; padding: 2px 7px; border-radius: 2px; font-size: 11px; letter-spacing: 1px; font-weight: 600; color: #9b6500; background: #fff0b8; border: 1px solid #e0bd53; vertical-align: 2px; }
.quality-red .quality-tag { color: #a72d34; background: #ffe2e5; border-color: #d8878d; }
.buy-tag { color: var(--blue); font-weight: 400; font-size: 14px; margin-left: 12px; }
.buy-tag b { font-weight: 700; }
.product-row .p-desc { font-size: 12.5px; color: #4a5666; margin-top: 6px; }
.product-row .p-link { font-size: 12px; color: var(--blue); margin-top: 6px; cursor: pointer; display: inline-block; }
.product-row .p-link:hover { text-decoration: underline; }
.product-row .p-buy { width: 200px; flex: none; text-align: center; }
.price { font-size: 15px; font-weight: 700; color: var(--blue); display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; }
.price small { font-size: 11px; font-weight: 500; color: #667281; }
.price::before { display: none; }
.points-cost { margin: -4px 0 9px; color: #2263c8; font-size: 11px; }
.soldout { display: block; width: 150px; margin: 0 auto; background: linear-gradient(180deg, #aeb8c3, #939eab);
  color: #eef2f6; border: none; font-size: 14px; letter-spacing: 4px; padding: 8px 0; cursor: pointer; }
.soldout:hover { background: linear-gradient(180deg, #98a3af, #7f8b98); }
.p-detail { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #c2cdd9; font-size: 12.5px; color: #3c4654; line-height: 1.9; }
.p-detail.open { display: block; animation: fadeUp .35s ease both; }
.p-detail dl { display: grid; grid-template-columns: 92px 1fr; row-gap: 6px; }
.p-detail dt { color: #77828f; }
.p-detail .stock { height: 8px; background: #e3e8ef; margin-top: 8px; position: relative; }
.p-detail .stock i { position: absolute; inset: 0 auto 0 0; background: var(--blue); }

/* ---------- 寻人启事海报（重绘为 DOM） ---------- */
/* 悬赏海报：照片在上、文案浮在照片下缘（文案与图片自带底纹一致） */
.wanted-wrap { flex: 1; display: flex; gap: 57px; }
.poster { flex: 1; max-width: 604px; position: relative; overflow: hidden; background: #1a1d22;
  border: 1px solid #b9b3a8; box-shadow: 0 10px 28px rgba(20,30,45,.35); }
.poster-photo { position: relative; height: 744px; overflow: hidden; }
.poster-photo img { width: 100%; height: 100%; object-fit: fill; display: block; }
.poster .pp-shade { display: none; }
.poster .pp-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: #fff; }
/* 海报底图自带完整版面（标题条/编号/姓名/副标题/悬赏金额），
   DOM 文案只用于交互与无障碍，视觉上隐藏以免出现双份文字 */
.poster .pp-top .ph-code,
.poster .pp-top .ph-tag,
.poster .pp-top .ph-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.poster .pp-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0; color: #fff; }
.poster .pp-body .pb-name,
.poster .pp-body .pb-tags,
.poster .pp-body .pb-note,
.poster .pp-body .pf-label,
.poster .pp-body .pf-money,
.poster .pp-body .pf-bonus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.poster-foot { position: absolute; right: 20px; bottom: 18px; margin: 0; display: block; }
.poster-foot > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 海报底图已自带「已提交」按钮外观，DOM 按钮仅保留语义，整张海报可点击 */
.btn-submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.poster { cursor: pointer; }
.poster.searched { outline: 2px solid var(--blue); }

/* ---------- 弹窗 / 提示 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(12,16,22,.62); z-index: 100;
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
.modal-mask.show { opacity: 1; pointer-events: auto; }
.modal { width: 520px; background: #f4f7fa; border: 1px solid #b9c4d1; box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transform: translateY(16px); transition: transform .25s; }
.modal-mask.show .modal { transform: none; }
.modal h3 { font-size: 17px; letter-spacing: 2px; padding: 16px 22px; border-bottom: 1px solid #c9d3de; background: #e8edf4; }
.modal .m-body { padding: 20px 22px; font-size: 13.5px; line-height: 1.9; color: #33404e; }
.modal .m-body input, .modal .m-body textarea, .modal .m-body select { width: 100%; margin-top: 10px; padding: 9px 12px;
  font-size: 13px; font-family: inherit; border: 1px solid #c2cdd9; background: #fff; outline: none; }
.modal .m-body textarea { height: 90px; resize: vertical; }
.modal .m-body label { display: block; margin-top: 14px; font-size: 12px; color: #6b7684; letter-spacing: 1px; }
.modal .m-foot { padding: 14px 22px; border-top: 1px solid #c9d3de; display: flex; justify-content: flex-end; gap: 12px; background: #e8edf4; }
.btn-grey { background: linear-gradient(180deg, #b7c0cb, #98a3b0); color: #fff; border: none; font-size: 13px; letter-spacing: 2px; padding: 8px 20px; cursor: pointer; }
.btn-grey:hover { background: linear-gradient(180deg, #a5afbb, #8792a0); }
.m-close { position: absolute; top: 0; right: 0; width: 40px; height: 42px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: #6b7684; font-size: 18px; }
.m-close:hover { color: #c1272d; }
.modal-wrap { position: relative; }

.toast { position: fixed; left: 50%; top: 92px; transform: translateX(-50%) translateY(-14px); z-index: 200;
  background: rgba(20,24,30,.94); color: #fff; font-size: 13px; letter-spacing: 1px; padding: 11px 24px;
  opacity: 0; transition: all .3s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .6s ease both; }

/* ---------- 员工之声网格（8 人两行） ---------- */
.voice-cards { flex-wrap: wrap; }
.voice-cards .card { width: 196px; height: 336px; }

/* ---------- 论坛工具条 ---------- */
.forum-tools { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.72);
  border: 1px solid #c2cdd9; padding: 10px 12px; margin-bottom: 12px; }
.forum-tools input { flex: none; width: 300px; padding: 7px 11px; font-size: 13px; font-family: inherit;
  border: 1px solid #c2cdd9; background: #fff; outline: none; }
.forum-tools input:focus { border-color: var(--blue); }
.forum-tools .tool-link { font-size: 12px; color: var(--blue); }
.forum-tools .tool-hint { margin-left: auto; font-size: 11.5px; color: #8b97a5; }
.empty-row { text-align: center; color: #77828f; padding: 34px 0; }
.read-cnt { cursor: default; }
.post-time { margin-right: auto; }

/* ---------- 分页 ---------- */
.forum-foot .pages { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.forum-foot .pg { font-size: 12.5px; color: #46525f; text-decoration: none; border: 1px solid #b9c4d1;
  padding: 2px 9px; background: rgba(255,255,255,.6); }
.forum-foot .pg:hover { color: var(--blue); border-color: var(--blue); }
.forum-foot .pg.off { opacity: .45; pointer-events: none; }
.forum-foot .pg-num { font-size: 12.5px; font-weight: 700; color: #33404e; }
.forum-foot .pg-info { font-size: 12px; color: #8b97a5; }

/* ---------- 商城：分类 / 申购 / 库存条 ---------- */
.cat-tabs { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.cat-tab { font-size: 13px; padding: 6px 16px; background: rgba(255,255,255,.72); border: 1px solid #c2cdd9;
  color: #46525f; text-decoration: none; letter-spacing: 1px; }
.cat-tab:hover { color: var(--blue); border-color: var(--blue); }
.cat-tab.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cat-tag { font-size: 11.5px; color: #77828f; margin-left: 10px; border: 1px solid #c2cdd9; padding: 1px 7px; }
.buy-now { display: block; width: 150px; height: 36px; margin: 0 auto; box-sizing: border-box; background: var(--blue); color: #fff;
  border: none; font-size: 14px; line-height: 36px; letter-spacing: 2px; padding: 0; cursor: pointer; }
.buy-now:hover { background: var(--blue-dark); }
.buy-now.done { background: #aeb8c3; cursor: default; }
.stock-mini { height: 6px; background: #e3e8ef; margin: 8px auto 0; width: 150px; position: relative; }
.stock-mini i { position: absolute; inset: 0 auto 0 0; background: var(--blue); }
/* ---------- 导航账号区 ---------- */
.nav-user { display: flex; align-items: center; gap: 7px; margin-left: 14px; text-decoration: none; }
.nav-user img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #b9c4d1; }
.nav-user span { font-size: 13px; color: #2a3440; }
.nav-user:hover span { color: var(--blue); }
.nav-login { margin-left: 14px; font-size: 13px; color: #fff; background: var(--blue);
  padding: 5px 14px; text-decoration: none; letter-spacing: 1px; }
.nav-login:hover { background: var(--blue-dark); }

/* ---------- Hero 签名（SLOGAN 右侧，签署人姓名，逐笔书写） ---------- */
.ht-sign { position: absolute; left: 580px; top: 224px; z-index: 3; cursor: pointer;
  width: 430px; height: 130px; opacity: .92; pointer-events: auto; transform: rotate(-3deg);
  display: block; }
.ht-sign:hover { opacity: .62; }
.ht-sign .sig-name { font-family: 'Segoe Script', 'Brush Script MT', 'Segoe Print', 'Ink Free', cursive;
  display: none; }
.ht-sign .sig-art { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- 终端接入页（左侧超大品牌标记 + 右侧浅色启动序列 / 接入面板，对照参考图） ---------- */
.brand-mark { position: absolute; left: 320px; top: 400px; transform: translate(-50%, -50%); z-index: 1; opacity: .97; }
/* 复用站标 SVG 并等比放大（参考图中该标志约 385px 宽） */
.brand-mark svg { display: block; width: 385px; height: auto; transform: scale(1.9); transform-origin: left center; }
.login-brand { left: 31vw; top: 48%; }
.login-brand svg { width: 520px; height: 650px; transform: none; transform-origin: center center; }
.login-brand { width: 520px; height: 650px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.login-brand .login-logo-mark { width: 410px; height: 410px; object-fit: contain; display: block; }
.login-brand .login-logo-word { width: 360px; height: auto; object-fit: contain; display: block; margin-top: 22px; }
.terminal { position: relative; min-height: 100vh; }
/* 启动序列：浅色终端（参考图为淡蓝字 + 蓝色三角前缀，无深色底） */
.boot { position: absolute; right: 6.5%; top: 205px; width: 560px; }
.boot.done { animation: bootOut .5s ease forwards; }
@keyframes bootOut { to { opacity: 0; transform: translateY(-14px); } }
.boot-head { font-size: 19px; font-weight: 700; letter-spacing: 5px; color: #2f6fc4; text-align: center;
  margin-bottom: 30px; }
.boot-head small { display: none; }
/* 标题两侧的短横线（参考图装饰） */
.boot-head::before, .boot-head::after { content: ""; display: inline-block; width: 70px; height: 1px;
  background: #9fb6d4; vertical-align: middle; margin: 0 14px; }
.boot-lines { height: 250px; overflow: hidden; font-size: 14.5px; line-height: 2.25; }
.boot-line { display: flex; align-items: center; gap: 12px; color: #3c79c8; }
.boot-line::before { content: ""; width: 0; height: 0; flex: none;
  border-left: 7px solid #3c79c8; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.bl-text { white-space: pre; }
.bl-ok { margin-left: auto; font-size: 11.5px; color: #2f8f6d; opacity: 0; transform: translateX(-6px);
  transition: all .25s; }
.bl-ok.show { opacity: 1; transform: none; }
.boot-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 8px;
  font-size: 11.5px; color: #6d7a8c; }
#bootSkip { color: #2b7de1; cursor: pointer; }
#bootSkip:hover { text-decoration: underline; }
/* 右侧进度提示条 */
.boot-tip { position: absolute; right: 6.5%; top: 505px; width: 560px; padding: 15px 26px;
  background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(246,249,253,.9));
  border-left: 4px solid var(--blue); box-shadow: 0 6px 20px rgba(120,140,165,.22);
  font-size: 14px; letter-spacing: 2px; color: #2b3440; }
.boot-tip::before { content: "■"; color: var(--blue); font-size: 11px; margin-right: 12px;
  vertical-align: 2px; }

.auth-wrap { position: absolute; right: 6.5%; top: 150px; width: 560px; }
.auth-wrap.hidden { display: none; }
.auth-card { background: linear-gradient(165deg, rgba(255,255,255,.96), rgba(240,245,251,.9));
  border: 1px solid rgba(255,255,255,.8); box-shadow: 0 14px 34px rgba(120,140,165,.3); padding: 26px 30px 22px; }
.auth-title { font-size: 22px; font-weight: 700; letter-spacing: 3px; }
.auth-sub { font-size: 11px; color: #7d8798; letter-spacing: 2px; margin: 6px 0 20px; }
.auth-form label { display: block; font-size: 12px; color: #6b7684; letter-spacing: 1px; margin-bottom: 6px; }
.auth-form input, .auth-form select { width: 100%; padding: 10px 12px; font-size: 13.5px; font-family: inherit;
  border: 1px solid #c2cdd9; background: #fff; outline: none; margin-bottom: 14px; }
.auth-form input:focus, .auth-form select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43,125,225,.12); }
.auth-btn { width: 100%; padding: 11px 0; font-size: 14px; letter-spacing: 4px; margin-top: 4px; }
.auth-err { min-height: 18px; font-size: 12.5px; color: #c1272d; margin-bottom: 8px; }
.auth-switch { display: block; text-align: center; font-size: 12.5px; color: var(--blue); margin-top: 10px; text-decoration: none; }
.auth-switch:hover { text-decoration: underline; }
.auth-form.hidden { display: none; }
.auth-me { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.auth-me img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.auth-me .m-name { font-size: 17px; font-weight: 700; }
.auth-me .m-dept { font-size: 12px; color: #77828f; margin-top: 4px; }

/* 窄屏：品牌标记退到背景，内容改为文档流单列 */
@media (max-width: 1280px) {
  .brand-mark { left: 50%; top: 40%; transform: translate(-50%, -50%); opacity: .32; }
  .brand-mark svg { transform: scale(1.3); transform-origin: center center; }
  .login-brand { left: 50%; top: 40%; opacity: .97; }
  .login-brand svg { width: 420px; height: 525px; transform: none; }
  .login-brand { width: 420px; height: 525px; }
  .login-brand .login-logo-mark { width: 320px; height: 320px; }
  .login-brand .login-logo-word { width: 285px; margin-top: 16px; }
  .terminal { display: flex; flex-direction: column; align-items: center; padding: 90px 24px 120px; }
  .boot, .boot-tip, .auth-wrap { position: static; width: 560px; max-width: 90vw; }
  .boot { margin-bottom: 22px; }
  .boot-tip { margin-bottom: 22px; }
}

.auth-ok { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,13,18,.92); z-index: 150; opacity: 0; pointer-events: none; transition: opacity .35s; }
.auth-ok.show { opacity: 1; }
.auth-ok span { font-size: 40px; font-weight: 700; letter-spacing: 14px; color: #fff;
  animation: okPop .8s cubic-bezier(.2,.9,.2,1) both; }
@keyframes okPop { from { opacity: 0; letter-spacing: 40px; filter: blur(6px); } to { opacity: 1; letter-spacing: 14px; filter: none; } }

.thumb-svg { display: flex; align-items: center; justify-content: center; background: #2b3340; }
.thumb-svg svg { width: 100%; height: 100%; }