:root {

/* ── Azure / Fluent 设计令牌：主蓝 #0078D4，蓝→靛→紫签名渐变 ── */
--blue:          #0078D4;
--blue-dark:     #005A9E;
--blue-deeper:   #004578;
--blue-light:    #C7E0F4;
--blue-pale:     #EFF6FC;
--ink: #171717;
--blue-glow:     rgba(0,120,212,0.14);
--blue-gradient: linear-gradient(135deg, #0F83DC 0%, #0078D4 55%, #106EBE 100%);
--blue-gradient-bright: linear-gradient(90deg, #0078D4 0%, #4F6BED 50%, #8661C5 100%);

--accent:        #50E6FF;
--accent-glow:   rgba(80,230,255,0.2);
--gold:          #F59E0B;
--gold-glow:     rgba(245,158,11,0.2);

--bg:            #ffffff;
--bg-warm:       #FAF9F8;
--bg-glass:      rgba(255,255,255,0.72);
--bg-glass-strong: rgba(255,255,255,0.88);
/* 卡片玻璃层：半透明底 + 背板模糊，让全站斜向光带背景从卡片内透上来 */
--card-glass:    rgba(255,255,255,0.32);
--card-glass-blur: blur(14px) saturate(150%);
--card-glass-edge: inset 0 1px 0 rgba(255,255,255,0.65);
--border:        #E1E4E8;
--border-strong: #C8C6C4;

--text:          #171717;
--text-dark:     #000000;
--text-soft:     #484644;
--text-muted:    #605E5C;
--muted:         #A19F9D;

/* Fluent 阴影梯度（depth-4 / 8 / 16 / 64） */
--shadow-sm:     0 1px 2px rgba(0,0,0,0.05), 0 0.3px 0.9px rgba(0,0,0,0.04);
--shadow-md:     0 1.6px 3.6px rgba(0,0,0,0.10), 0 0.3px 0.9px rgba(0,0,0,0.07);
--shadow-lg:     0 6.4px 14.4px rgba(0,0,0,0.11), 0 1.2px 3.6px rgba(0,0,0,0.08);
--shadow-xl:     0 25.6px 57.6px rgba(0,0,0,0.14), 0 4.8px 14.4px rgba(0,0,0,0.10);
--shadow-hover:  0 6.4px 14.4px rgba(0,0,0,0.13), 0 1.2px 3.6px rgba(0,0,0,0.10);
--shadow-glow:   0 8px 28px rgba(0,120,212,0.22), 0 2px 8px rgba(0,120,212,0.10);
--shadow-gold:   0 0 30px rgba(245,158,11,0.18);

--radius:        8px;
--radius-sm:     4px;
--radius-lg:     12px;
--radius-xl:     20px;

--transition:        0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
--transition-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

--max-width:     1240px;
}

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

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', 'Hiragino Sans GB', Arial, sans-serif;
background: var(--bg);
background-image:
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0,120,212,0.07) 0%, transparent 100%),
radial-gradient(ellipse 50% 36% at 88% 6%, rgba(134,97,197,0.05) 0%, transparent 100%),
radial-gradient(ellipse 60% 40% at 8% 88%, rgba(80,230,255,0.04) 0%, transparent 100%);
background-attachment: scroll;
color: var(--text);
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background 0.5s ease, color 0.5s ease;
}

@media (min-width: 769px) {
body {
background-attachment: fixed;
}
}

/* ── 全站背景：斜向光带 bg-diagonal-beams.svg ──
      放在 body::before 固定层而非 body 的 background-image 上，
      这一层能单独做动画，不牵动 body 本身 ──
      动画：bgBeamsDrift 让光带缓慢漂移呼吸（scale ≥1.06 保证平移时不露边） ── */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: url("../../images/bg-diagonal-beams.svg") center / cover no-repeat;
opacity: 1;
filter: none;
transition: filter 0.5s ease;
animation: bgBeamsDrift 36s ease-in-out infinite;
will-change: transform;
}

/* ── 背景动画：极光氛围光层 ──
      第二层固定背景：三团缓慢漂移的径向辉光（蓝/紫/青），
      与 .bg-orb 浮动光球呼应，让背景有"呼吸感"。
      inset 负值外扩防止漂移时露边；纯 transform 动画走 GPU 合成层 ── */
body::after {
content: '';
position: fixed;
inset: -12%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 42% 34% at 22% 26%, rgba(0,120,212,0.22) 0%, transparent 70%),
radial-gradient(ellipse 38% 30% at 78% 22%, rgba(134,97,197,0.18) 0%, transparent 70%),
radial-gradient(ellipse 46% 36% at 55% 84%, rgba(80,230,255,0.16) 0%, transparent 70%);
animation: bgAuroraDrift 24s ease-in-out infinite alternate;
will-change: transform;
}

@keyframes bgBeamsDrift {
0%, 100% { transform: scale(1.08) translate(0, 0); }
33%      { transform: scale(1.14) translate(-3%, 2%); }
66%      { transform: scale(1.10) translate(2.5%, -1.5%); }
}

@keyframes bgAuroraDrift {
0%   { transform: translate3d(-5%, -3.5%, 0) scale(1); }
50%  { transform: translate3d(5%, 4%, 0) scale(1.12); }
100% { transform: translate3d(-3.5%, 5.5%, 0) scale(0.94); }
}

/* ── 窗口不在前台（失焦 / 标签页隐藏 / 客户端收进托盘）：所有 CSS 动画原地暂停，回到前台接着播 ──
      html.is-away 由 main.js 的 pageStage 切换；画布动画在 main.js 里各自停 rAF ── */
html.is-away *,
html.is-away *::before,
html.is-away *::after {
animation-play-state: paused !important;
}

.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
background: var(--blue-gradient-bright);
z-index: 9999;
width: 0%;
transition: width 0.1s linear;
border-radius: 0 2px 2px 0;
}

.bg-orb {
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(120px);
opacity: 0.55;
transition: opacity 0.8s ease;
}
.bg-orb-1 {
width: 600px; height: 600px;
top: -200px; right: -150px;
background: radial-gradient(circle, rgba(0,120,212,0.20) 0%, transparent 70%);
animation: orbFloat1 20s ease-in-out infinite;
}
.bg-orb-2 {
width: 400px; height: 400px;
bottom: 10%; left: -100px;
background: radial-gradient(circle, rgba(80,230,255,0.14) 0%, transparent 70%);
animation: orbFloat2 25s ease-in-out infinite;
}
.bg-orb-3 {
width: 350px; height: 350px;
top: 40%; left: 50%;
background: radial-gradient(circle, rgba(134,97,197,0.12) 0%, transparent 70%);
animation: orbFloat3 30s ease-in-out infinite;
}

@keyframes orbFloat1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-140px, 90px) scale(1.18); }
66% { transform: translate(70px, -60px) scale(0.85); }
}

@keyframes orbFloat2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(110px, -100px) scale(1.25); }
}

@keyframes orbFloat3 {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(-70px, -50px) scale(1.15); }
75% { transform: translate(90px, 70px) scale(0.85); }
}

nav {
position: sticky;
top: 0;
z-index: 500;
background: var(--bg-glass-strong);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
height: 64px;
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
transition: background 0.5s ease, border-color 0.5s ease;
}

.nav-brand {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}

.nav-brand .logo-icon {
height: 36px;
width: auto;
border-radius: var(--radius-sm);
flex-shrink: 0;
transition: transform var(--transition-smooth);
}
.nav-brand:hover .logo-icon { transform: scale(1.05); }

.nav-brand .brand-text { display: flex; flex-direction: column; gap: 0; }

.nav-brand .name {
font-size: 0.88rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.03em;
white-space: nowrap;
}

.nav-brand .dept {
font-size: 0.68rem;
color: var(--text-muted);
letter-spacing: 0.06em;
white-space: nowrap;
font-weight: 500;
}

.nav-right {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: nowrap;
}

.nav-links {
display: flex;
gap: 28px;
list-style: none;
flex-wrap: nowrap;
}

.nav-links a {
font-size: 0.92rem;
color: var(--ink);
text-decoration: none;
letter-spacing: 0.03em;
font-weight: 600;
transition: all var(--transition-smooth);
position: relative;
padding: 6px 14px;
border-radius: 999px;
white-space: nowrap;
}

.nav-links a:hover {
color: var(--blue);
background: var(--blue-pale);
}

body.auth-active .nav-links a { color: var(--ink); }
body.auth-active .nav-links a:hover { color: var(--blue); }

.notice-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #DC2626;
  animation: dotBlink 1.4s ease-in-out infinite;
  flex-shrink: 0;
  margin-left: 4px;
  vertical-align: middle;
}
@keyframes dotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.nav-dropdown { position: relative; }

.nav-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) scale(0.96);
width: max-content;
min-width: 140px;
background: var(--bg-glass-strong);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-radius: 14px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
padding: 8px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease,
            transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
            visibility 0.25s ease;
z-index: 500;
pointer-events: none;
}

.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
pointer-events: auto;
}
/* 触屏点击会模拟 hover，与 click/focus 逻辑叠加导致菜单开-关-开闪烁，
   hover 展开仅限鼠标设备 */
@media (hover: hover) and (pointer: fine) {
.nav-dropdown:hover .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
pointer-events: auto;
}
}

.nav-dropdown-item {
display: block;
position: relative;
padding: 11px 22px;
margin: 2px 0;
font-size: 0.88rem;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
text-align: center;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 999px;
overflow: hidden;
transition: all var(--transition-smooth);
}

.nav-dropdown-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s;
border-radius: 999px;
pointer-events: none;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
color: var(--blue);
background: var(--blue-pale);
outline: none;
}
.nav-dropdown-item:hover::before {
opacity: 0;
}

/* ── 二级弹出菜单（管理制度 → 具体制度文档）── */
.nav-sub-dropdown {
position: relative;
}

/* 二级弹出菜单本体 */
.nav-sub-menu {
position: absolute;
left: calc(100% + 6px);
top: -8px;
width: 100%;
min-width: 140px;
background: var(--bg-glass-strong);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateX(-6px);
transition: opacity 0.2s ease,
            transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
            visibility 0.2s ease;
z-index: 510;
pointer-events: none;
}

.nav-sub-dropdown:focus-within > .nav-sub-menu,
.nav-sub-menu.show {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
.nav-sub-dropdown:hover > .nav-sub-menu {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
}

/* 向左弹出的二级菜单（如「每日报表」，位于最右侧一级菜单，避免溢出视口） */
.nav-sub-menu.nav-sub-menu-left {
left: auto;
right: calc(100% + 6px);
transform: translateX(6px);
}
.nav-sub-dropdown:focus-within > .nav-sub-menu.nav-sub-menu-left,
.nav-sub-menu.nav-sub-menu-left.show {
transform: translateX(0);
}
@media (hover: hover) and (pointer: fine) {
.nav-sub-dropdown:hover > .nav-sub-menu.nav-sub-menu-left {
transform: translateX(0);
}
}

/* 二级菜单内的文档链接 */
.nav-sub-menu .nav-dropdown-item {
text-align: center;
white-space: nowrap;
}

.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 28px;
height: 28px;
cursor: pointer;
background: none;
border: none;
padding: 0;
z-index: 501;
}

.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--text);
border-radius: 2px;
transition: var(--transition);
}

.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-overlay {
display: none;
position: fixed;
top: 64px; left: 0; right: 0; bottom: 0;
/* 不用 backdrop-filter 磨砂：手机 GPU 在子菜单动画期间逐帧重算全屏模糊，
   低端机上表现为整层闪烁；改为不透明纯色背景 */
background: var(--bg);
z-index: 499;
flex-direction: column;
padding: 32px 24px 96px;
/* 允许上下滚动：展开项超出屏幕时也能滚动到并点击 */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}

.nav-mobile-overlay.active { display: flex; }

.nav-mobile-overlay a {
display: block;
padding: 14px 20px;
margin: 4px 0;
font-size: 0.95rem;
color: var(--ink);
text-decoration: none;
font-weight: 600;
letter-spacing: 0.03em;
border-radius: 999px;
/* 不能用 transition: all——渐变背景(background-image)无法渐变、只能瞬切，
   color 若渐变会与背景不同步（出现深字压蓝底/白字压白底的闪烁帧） */
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
-webkit-tap-highlight-color: transparent;
}

/* 触屏设备点击会模拟并粘滞 :hover，导致展开菜单时条目闪一下蓝底再复原；
   hover 反馈只给真正有鼠标指针的设备 */
@media (hover: hover) and (pointer: fine) {
.nav-mobile-overlay a:hover {
color: #fff;
background: var(--blue-gradient);
box-shadow: 0 4px 16px rgba(0,120,212,0.35);
transform: translateY(-1px);
}
}

.mob-nav-group { position: relative; }

/* 父级菜单项 — 整行可点击展开，右侧留出箭头空间 */
.mob-nav-group > a {
padding-right: 72px;
}

/* 移动端展开箭头 — 大触控区域（64px 宽，撑满行高），防误触 */
.mob-nav-toggle {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 64px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: pointer;
transition: transform var(--transition-smooth);
user-select: none;
border-radius: 999px;
z-index: 2;
/* button 元素重置（原为 span） */
background: none;
border: none;
padding: 0;
font: inherit;
-webkit-tap-highlight-color: transparent;
}
.mob-nav-toggle::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-right: 2.5px solid currentColor;
border-bottom: 2.5px solid currentColor;
transform: rotate(45deg);
transition: transform var(--transition-smooth);
margin-top: -2px;
}
@media (hover: hover) and (pointer: fine) {
.mob-nav-toggle:hover {
color: #fff;
background: var(--blue-gradient);
}
}
.mob-nav-toggle:active {
transform: scale(0.95);
}
.mob-nav-toggle.open {
background: transparent;
color: #fff;
}
/* 展开后隐藏该主标题的三角标志 */
.mob-nav-toggle.open::after {
display: none;
}

/* 展开时主标题呈蓝底白字（三角标在右侧，由指向下转为指向上） */
.mob-nav-parent.mob-parent-active {
color: #fff;
background: var(--blue-gradient);
box-shadow: 0 4px 16px rgba(0,120,212,0.35);
}

.mob-nav-sub {
max-height: 0;
overflow: hidden;
padding: 0 0 0 20px;
}
.mob-nav-sub.open {
max-height: 640px;
padding: 0 0 8px 20px;
}
/* 展开动画只保留给鼠标设备：max-height 动画每帧都触发布局重绘，
   手机掉帧时观感即为闪烁，触屏一律瞬时展开（原生菜单手感） */
@media (hover: hover) and (pointer: fine) {
.mob-nav-sub {
transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
            padding 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
}

/* 嵌套分组（三级）：主标题右侧同样留出三角标空间 */
.mob-nav-sub .mob-nav-group > a {
padding-right: 72px;
}

.mob-nav-sub a {
display: block;
font-size: 0.9rem;
padding: 12px 20px;
margin: 3px 0;
color: var(--ink);
font-weight: 500;
border-radius: 999px;
}
/* 逐项淡入的联动动画只留给鼠标设备：
   在手机上「依次闪现」+ max-height 逐帧重排叠加掉帧，观感就是闪烁 */
@media (hover: hover) and (pointer: fine) {
.mob-nav-sub a {
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.3s ease,
            transform 0.3s ease;
}
.mob-nav-sub.open a {
opacity: 1;
transform: translateY(0);
}
.mob-nav-sub.open a:nth-child(1) { transition-delay: 0.05s; }
.mob-nav-sub.open a:nth-child(2) { transition-delay: 0.1s; }
.mob-nav-sub.open a:nth-child(3) { transition-delay: 0.15s; }
.mob-nav-sub.open a:nth-child(4) { transition-delay: 0.2s; }
.mob-nav-sub.open a:nth-child(5) { transition-delay: 0.25s; }
.mob-nav-sub.open a:nth-child(6) { transition-delay: 0.3s; }
}

@media (hover: hover) and (pointer: fine) {
.mob-nav-sub a:hover {
color: #fff;
background: var(--blue-gradient);
box-shadow: 0 4px 16px rgba(0,120,212,0.35);
}
}

.nav-login-btn {
padding: 9px 24px;
background: var(--blue);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: all var(--transition-smooth);
font-family: inherit;
white-space: nowrap;
box-shadow: var(--shadow-sm);
position: relative;
overflow: visible;
}

.nav-login-btn::before {
content: '';
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #16A34A;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
z-index: 10;
}
.nav-login-btn:hover {
background: var(--blue-dark);
box-shadow: var(--shadow-md);
}

.nav-login-btn:active { transform: translateY(0); }

.nav-login-btn::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 14px);
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #22C55E, #16A34A);
color: #fff;
font-size: 0.82rem;
font-weight: 600;
padding: 8px 18px;
border-radius: 8px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
letter-spacing: 0.05em;
box-shadow: 0 6px 24px rgba(34,197,94,0.45);
z-index: 10;
}

.nav-login-btn:hover::after,
.nav-login-btn:hover::before {
opacity: 1;
}

.nav-login-btn:hover::after {
animation: tooltipBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nav-login-btn.hidden { display: none; }

.nav-user {
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}

.nav-user.hidden { display: none; }

.nav-user-name-btn {
padding: 9px 24px;
background: var(--blue);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: all var(--transition-smooth);
font-family: inherit;
white-space: nowrap;
box-shadow: var(--shadow-sm);
position: relative;
overflow: visible;
}

.nav-user-name-btn:hover {
background: var(--blue-dark);
box-shadow: var(--shadow-md);
}

.nav-user-name-btn:active { transform: translateY(0); }

.nav-user-name-btn::before {
content: '';
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #EF4444;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
z-index: 10;
}

.nav-user-name-btn::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 14px);
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #F97316, #EF4444);
color: #fff;
font-size: 0.82rem;
font-weight: 600;
padding: 8px 18px;
border-radius: 8px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
letter-spacing: 0.05em;
box-shadow: 0 6px 24px rgba(239,68,68,0.45);
z-index: 10;
}

.nav-user-name-btn:hover::after,
.nav-user-name-btn:hover::before {
opacity: 1;
}

.nav-user-name-btn:hover::after {
animation: tooltipBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tooltipBounce {
0%   { transform: translateX(-50%) translateY(6px); opacity: 0; }
50%  { transform: translateX(-50%) translateY(-3px); opacity: 1; }
70%  { transform: translateX(-50%) translateY(1px); opacity: 1; }
100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.hero {
padding: 104px 48px 64px;
display: flex;
flex-direction: column;
gap: 20px;
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
overflow: hidden;
}

.hero-eyebrow {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue);
font-weight: 600;
position: relative;
z-index: 1;
animation: fadeInUp 0.8s ease both;
}

.hero h1 {
font-size: clamp(2.8rem, 7vw, 5rem);
font-weight: 800;
line-height: 1.08;
color: var(--text-dark);
letter-spacing: -0.03em;
position: relative;
z-index: 1;
text-wrap: balance;
animation: fadeInUp 0.8s 0.1s ease both;
}

.hero h1 strong {
font-weight: 900;
background: var(--blue-gradient-bright);
-webkit-background-clip: text;
background-clip: text;
text-shadow: none;
-webkit-text-fill-color: transparent;
}

.hero-desc {
font-size: 1.05rem;
color: var(--text-soft);
max-width: 620px;
line-height: 1.9;
font-weight: 400;
position: relative;
z-index: 1;
animation: fadeInUp 0.8s 0.2s ease both;
}

.hero-actions {
display: flex;
align-items: center;
gap: 14px;
margin-top: 28px;
position: relative;
z-index: 1;
animation: fadeInUp 0.8s 0.3s ease both;
}

.hero-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 32px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: var(--blue);
color: #fff;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
transition: all var(--transition);
box-shadow: var(--shadow-sm);
}

.hero-cta:hover {
background: var(--blue-dark);
box-shadow: var(--shadow-md);
}

.hero-cta--ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--border-strong);
box-shadow: none;
}

.hero-cta--ghost:hover {
background: var(--bg-warm);
color: var(--text);
border-color: var(--text-muted);
box-shadow: none;
}

/* 登录状态切换：未登录显示「登录系统」，已登录显示「进入业务系统」 */
.hero-cta--systems { display: none; }
body.auth-active .hero-cta--login { display: none; }
body.auth-active .hero-cta--systems { display: inline-flex; }

@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}

.hero-geo-ring {
position: absolute;
pointer-events: none;
z-index: 0;
border-radius: 50%;
border: 1.5px solid rgba(0,120,212,0.12);
animation: geoSpin 30s linear infinite;
}
.hero-geo-ring-1 {
width: 500px; height: 500px;
top: -180px; right: -120px;
border-color: rgba(0,120,212,0.08);
animation-duration: 35s;
}
.hero-geo-ring-2 {
width: 380px; height: 380px;
top: -120px; right: -60px;
border-color: rgba(80,230,255,0.12);
animation-duration: 25s;
animation-direction: reverse;
}
.hero-geo-ring-3 {
width: 260px; height: 260px;
top: -60px; right: 0px;
border-color: rgba(134,97,197,0.10);
animation-duration: 20s;
}

@keyframes geoSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.hero-geo-dot {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
background: var(--blue);
animation: dotPulse 4s ease-in-out infinite;
}
.hero-geo-dot-1 {
width: 8px; height: 8px;
top: 30px; right: 280px;
opacity: 0.3;
animation-delay: 0s;
}
.hero-geo-dot-2 {
width: 5px; height: 5px;
top: 100px; right: 180px;
opacity: 0.2;
animation-delay: 1.2s;
}
.hero-geo-dot-3 {
width: 12px; height: 12px;
bottom: 40px; right: 350px;
opacity: 0.15;
animation-delay: 2.5s;
background: var(--accent);
}

@keyframes dotPulse {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(2); opacity: 0.5; }
}

.hero-marquee {
position: absolute;
pointer-events: none;
z-index: 0;
display: block;
opacity: 1;
transition: opacity 0.8s ease;
}

/* 横幅背景大图（参考医药企业官网「质量管理」页的通栏高调实验室图）：
   外层 .hero-stage 撑满整屏宽，照片铺在右侧，往左（文字一侧）和往下（数据卡片）渐隐进页面背景；
   浅蓝高调的调色已经做进图里，这里只管遮罩和取景。.hero 仍限宽居中，粒子画布在 .hero 里、压在照片上面。
   照片左缘跟着 h1 右端走：「质量，是每一批次的」宽约 8.73 个字号（字号 7vw、封顶 5rem），
   图框左缘 = h1 右端 − 351px；横幅高约 560px 时照片按高缩放，手里的烧瓶（原图 x 670/1600）正好落在 h1 右边 60~70px。
   换图要按新图主体的位置重算这个 351。 */
.hero-stage { position: relative; }
.hero-banner {
--bn-left: calc(max(0px, (100% - var(--max-width)) / 2) + 48px + min(7vw, 5rem) * 8.73 - 351px);
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
animation: heroBannerIn 1.2s ease both;
}
@keyframes heroBannerIn { from { opacity: 0; } to { opacity: 1; } }
.hero-banner img {
position: absolute;
top: 0;
left: var(--bn-left);
display: block;
width: calc(100% - var(--bn-left));
height: 100%;
object-fit: cover;
object-position: 0% 40%;
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 26%, #000 52%), linear-gradient(to bottom, #000 58%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 26%, #000 52%), linear-gradient(to bottom, #000 58%, transparent 100%);
mask-composite: intersect;
}

.hero-divider {
display: flex;
align-items: center;
gap: 16px;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 48px 40px;
width: 100%;
}
.hero-divider::before, .hero-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.hero-divider svg { flex-shrink: 0; opacity: 0.25; }

.stats {
display: flex;
gap: 16px;
padding: 0 48px;
max-width: var(--max-width);
margin: -28px auto 0;
width: 100%;
position: relative;
z-index: 10;
}

.stat-item {
flex: 1;
padding: 28px 24px;
text-align: center;
background: var(--card-glass);
backdrop-filter: var(--card-glass-blur);
-webkit-backdrop-filter: var(--card-glass-blur);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-smooth);
box-shadow: var(--card-glass-edge), var(--shadow-sm);
position: relative;
overflow: hidden;
}

.stat-item::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--blue-gradient-bright);
opacity: 0;
transition: opacity 0.35s ease;
z-index: 0;
}
.stat-item:hover::before { opacity: 1; }
.stat-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--blue-light);
}
.stat-item:hover .stat-num,
.stat-item:hover .stat-num span { color: var(--blue); }
.stat-item:hover .stat-label { color: var(--text-soft); }
.stat-item:hover .stat-label svg { stroke: var(--blue); }

.stat-item.auth-hint-flash { animation: blueFlash 0.6s ease; }

.stat-num {
font-size: 2.8rem;
font-weight: 800;
color: var(--text-dark);
line-height: 1;
margin-bottom: 10px;
transition: all var(--transition-smooth);
position: relative;
z-index: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}

.stat-label {
font-size: 0.8rem;
color: var(--text-muted);
letter-spacing: 0.05em;
font-weight: 500;
transition: all var(--transition-smooth);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
z-index: 1;
}

.stat-num span { font-size: 1.3rem; color: var(--blue); transition: color var(--transition-smooth); }

/* 触屏设备没有 hover 反馈，用角标提示卡片可点击 */
.stat-tap-hint {
display: none;
position: absolute;
top: 12px;
right: 14px;
align-items: center;
gap: 2px;
font-size: 0.66rem;
letter-spacing: 0.05em;
color: var(--blue);
opacity: 0.75;
pointer-events: none;
transition: color var(--transition-smooth);
z-index: 1;
}
.stat-item:hover .stat-tap-hint { color: var(--blue); }
@media (hover: none), (max-width: 768px) {
.stat-tap-hint { display: inline-flex; }
}

.section {
padding: 56px 48px;
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
}

/* Azure 式章节头：小号蓝色眉题在上，大标题在下 */
.section-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 44px;
}

.section-header h2 {
font-size: 2.1rem;
font-weight: 700;
color: var(--text-dark);
letter-spacing: -0.02em;
line-height: 1.25;
}

.section-header .tag {
order: -1;
font-size: 0.76rem;
color: var(--blue);
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
background: transparent;
padding: 0;
border-radius: 0;
border: none;
}

.section-divider {
display: flex;
align-items: center;
gap: 14px;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 48px;
width: 100%;
}
.section-divider::before, .section-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.section-divider svg { flex-shrink: 0; opacity: 0.25; }

/* 科室概况：左正文 + 右侧化工分子装饰图案（填右侧留白，不增加区块高度） */
.about-wrap {
display: grid;
grid-template-columns: 1fr minmax(240px, 320px);
gap: 40px;
align-items: stretch;
}

.about-text {
font-size: 1.02rem;
color: var(--text-soft);
line-height: 2.1;
font-weight: 400;
align-self: center;
}

/* 右侧面板：全生命周期流程 + 角落分子水印。
   紧凑竖排 + 内容垂直居中，尽量贴合左侧正文高度、不额外增高。 */
.about-flow {
position: relative;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 22px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--card-glass);
backdrop-filter: var(--card-glass-blur);
-webkit-backdrop-filter: var(--card-glass-blur);
box-shadow: var(--card-glass-edge), var(--shadow-sm);
box-shadow: var(--shadow-sm);
}
/* 分子水印：右上角，低透明度 */
.about-flow-deco {
position: absolute;
top: -30px; right: -30px;
width: 150px; height: 150px;
color: var(--blue);
opacity: 0.12;
pointer-events: none;
}

/* 鼠标跟随聚光灯（--mx/--my 由 JS 写入 about-flow） */
.about-flow::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
            var(--blue-glow), transparent 65%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
.about-flow:hover::before { opacity: 1; }
/* 边框描边光：双层遮罩把径向光裁成仅剩 1.5px 边框 */
.about-flow::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
            rgba(0,120,212,0.85), rgba(0,120,212,0.15) 45%, transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
        mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 2;
}
.about-flow:hover::after { opacity: 1; }

/* 紧凑竖向时间线 */
.lifecycle { list-style: none; position: relative; z-index: 1; }
.lc-step {
position: relative;
display: flex;
align-items: center;
gap: 13px;
padding-bottom: 9px;
}
.lc-step:last-child { padding-bottom: 0; }
/* 连接线：贯穿相邻节点圆心 */
.lc-step:not(:last-child)::before {
content: '';
position: absolute;
left: 14px; top: 28px; bottom: -1px;
width: 2px;
background: linear-gradient(var(--blue-light), var(--blue-light) 55%, transparent);
}
.lc-node {
flex-shrink: 0;
width: 29px; height: 29px;
border-radius: 50%;
background: #fff;
color: var(--blue);
border: 1.5px solid var(--blue);
font-size: 0.74rem;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
box-shadow: 0 3px 10px rgba(0,120,212,0.15);
position: relative;
z-index: 1;
transition: transform var(--transition-smooth);
}
.lc-step:hover .lc-node { transform: scale(1.08); }
.lc-name { font-size: 0.88rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.lc-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.02em; }

/* 科室概况下方的实验室宽幅图（分析实验室 + 仪器 + 做记录的分析员，对应上面那段正文）：
   左缘轻轻晕成页面底色，不盖住左侧仪器；粒子画布 #aboutParticles 浮在照片和晕色之上（main.js「ABOUT PARTICLES」） */
.about-scene {
position: relative;
margin: 36px 0 0;
aspect-ratio: 1600 / 533;
min-height: 200px;
width: 100%;   /* 宽度写死：auto 时 min-height 生效会按比例反推加宽，窄屏撑出横向滚动 */
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
border: 1px solid var(--border);
background: var(--blue-pale);
box-shadow: var(--shadow-md);
}
.about-scene img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% 50%;
transform: scale(1.04);
transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about-scene:hover img { transform: scale(1.07); }
.about-scene::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
  linear-gradient(90deg, rgba(239,246,252,0.72) 0%, rgba(239,246,252,0.28) 15%, transparent 32%),
  linear-gradient(0deg, rgba(0,69,120,0.18), transparent 45%);
}
/* 底边签名渐变细线 */
.about-scene::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
z-index: 3;
background: var(--blue-gradient-bright);
opacity: 0.75;
}
.about-scene-fx {
position: absolute;
inset: 0;
z-index: 2;
display: block;
width: 100%;
height: 100%;
}

body:not(.auth-active) .link-item,
body:not(.auth-active) .digital-shot-card-inline {
cursor: pointer;
position: relative;
transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}

body:not(.auth-active) .link-item:hover {
background: var(--blue-pale);
box-shadow: inset 3px 0 0 var(--blue);
}
body:not(.auth-active) .link-item:hover .link-title { color: var(--blue-dark); }

body:not(.auth-active) .digital-shot-card-inline:hover {
background: var(--blue-pale);
box-shadow: inset 3px 0 0 var(--blue);
}
body:not(.auth-active) .digital-shot-card-inline:hover .digital-shot-name { color: var(--blue-dark); }
body:not(.auth-active) .link-item:hover .link-sub { color: var(--blue); }

body.auth-active .link-item:hover {
background: var(--blue-pale);
box-shadow: inset 3px 0 0 var(--blue);
z-index: 1;
}
body.auth-active .link-item:hover .link-title { color: var(--blue-dark); }
body.auth-active .link-item:hover .link-sub { color: var(--blue); }
body.auth-active .link-item:hover .link-arrow { transform: translateX(4px); }

body.auth-active .digital-shot-card-inline:hover {
background: var(--blue-pale);
box-shadow: inset 3px 0 0 var(--blue);
z-index: 1;
}
body.auth-active .digital-shot-card-inline:hover .digital-shot-name { color: var(--blue-dark); }
body.auth-active .digital-shot-card-inline:hover .digital-shot-thumb {
border-color: var(--blue-light);
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

/* 核心职能（Bento 格）：外观由 .bento-cell 提供，此处仅补格内正文与指针 */
.func-cell { cursor: pointer; }
.func-cell.auth-hint-flash { animation: blueFlash 0.6s ease; }

@keyframes dataPulse {
0%, 100% { text-shadow: 0 0 0 rgba(0,120,212,0); }
50% { text-shadow: 0 0 20px rgba(0,120,212,0.25); }
}

@keyframes blueFlash {
0%   { background: var(--card-glass); }
40%  { background: var(--blue-pale); }
100% { background: var(--card-glass); }
}

.func-desc {
font-size: 0.84rem;
color: var(--text-muted);
line-height: 1.8;
position: relative;
z-index: 1;
transition: color var(--transition);
}
.func-cell:hover .func-desc { color: var(--text-soft); }

/* 格子底部配图：贴满左右下三边（负边距抵掉格子内边距），上沿渐隐进玻璃底；悬停微放大 */
.func-cover {
position: relative;
z-index: 1;
margin: auto -22px -16px;
padding-top: 16px;
}
.func-cover img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 800 / 260;
object-fit: cover;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
opacity: 0.92;
transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity var(--transition-smooth);
}
.func-cell:hover .func-cover img { transform: scale(1.04); opacity: 1; }

.digital-lead {
max-width: 760px;
font-size: 0.9rem;
color: var(--text-soft);
line-height: 1.9;
transition: color var(--transition);
}
#digital:hover .digital-lead { color: var(--text); }

.digital-lead + .digital-lead { margin-top: 8px; }
.section > .digital-lead:last-of-type { margin-bottom: 32px; }

/* Bento 格内正文（数字质检 · 数据驱动格） */
.bento-text {
font-size: 0.84rem;
color: var(--text-soft);
line-height: 1.85;
position: relative;
z-index: 1;
}

/* Bento 格内截图卡改单列堆叠（窄格里两列过挤） */
.bento-cell .digital-shot-row-inline {
grid-template-columns: 1fr;
position: relative;
z-index: 1;
margin-top: auto;
}
.bento-cell .digital-feature-pair,
.bento-cell .digital-tools {
position: relative;
z-index: 1;
}
.bento-cell .digital-tools { margin-top: 14px; }

/* 01/02 格底部配图：照片贴满左右下三边、撑满格子剩余高度（两格并排时底边齐、上面不留空），
   上沿渐隐进玻璃底，底部压一层淡蓝和站点色调统一；悬停缓缓推近。--photo-pos 调取景（写在标签上） */
.digital-cover {
position: relative;
z-index: 1;
flex: 1 0 190px;
margin: 18px -22px -16px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.6) 22%, #000 48%);
        mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.6) 22%, #000 48%);
}
.digital-cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--photo-pos, 50% 50%);
opacity: 0.92;
transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), opacity var(--transition-smooth);
}
.digital-cover::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 91, 172, 0.14), rgba(0, 91, 172, 0) 55%);
pointer-events: none;
}
.bento-cell:hover .digital-cover img { transform: scale(1.05); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.digital-cover img { transition: none; }
}

.digital-feature-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}

.digital-feature-pair .feature-block {
padding: 16px 20px;
border-left: 3px solid var(--blue-light);
border-radius: var(--radius);
cursor: default;
transition: all var(--transition-smooth);
background: var(--card-glass);
}

.digital-feature-pair .feature-block h4 {
font-size: 0.88rem;
font-weight: 400;
color: var(--text);
margin-bottom: 8px;
}

.digital-feature-pair .feature-block p {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.7;
transition: color var(--transition);
}
.digital-feature-pair .feature-block:hover {
background: var(--blue-pale);
border-left-color: var(--blue);
box-shadow: var(--shadow-md);
transform: translateX(4px);
}
.digital-feature-pair .feature-block:hover h4 { color: var(--blue-dark); }
.digital-feature-pair .feature-block:hover p { color: var(--text-soft); }

.digital-tools {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}

.digital-tool-chip {
display: inline-flex;
align-items: center;
padding: 7px 16px;
border: 1.5px solid var(--border);
border-radius: 999px;
background: var(--card-glass);
font-size: 0.76rem;
font-weight: 600;
color: var(--text-soft);
text-decoration: none;
cursor: pointer;
transition: all var(--transition-smooth);
}
.digital-tool-chip:hover {
border-color: var(--blue);
color: #fff;
background: var(--blue-gradient);
box-shadow: 0 4px 16px rgba(0,120,212,0.3);
transform: translateY(-2px);
}
.digital-tool-chip:active { transform: translateY(0); }
/* 数据驱动格的标签是按钮（点了弹示例截图），按钮不继承字体 */
button.digital-tool-chip { font-family: inherit; line-height: inherit; }

.digital-shot-row-inline {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}

.digital-shot-card-inline {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
background: var(--card-glass);
transition: all var(--transition-smooth);
}
.digital-shot-card-inline:hover {
background: var(--blue-pale);
border-color: var(--blue);
box-shadow: inset 3px 0 0 var(--blue);
}
.digital-shot-card-inline:hover .digital-shot-name { color: var(--blue-dark); }

.digital-shot-thumb {
flex-shrink: 0;
width: 72px;
height: 52px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--bg-warm);
border: 1px solid var(--border);
transition: all var(--transition);
}
.digital-shot-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
}

.digital-shot-name {
font-size: 0.86rem;
font-weight: 400;
color: var(--text);
line-height: 1.4;
transition: color var(--transition);
}

.shot-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(15,23,42,0.78);
align-items: center;
justify-content: center;
padding: 32px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.shot-modal-overlay.active { display: flex; }

.shot-modal-content {
position: relative;
max-width: 90vw;
max-height: 88vh;
display: flex;
flex-direction: column;
align-items: center;
animation: modalZoomIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.shot-modal-content img {
max-width: 90vw;
max-height: 78vh;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
background: #fff;
}

.shot-modal-caption {
margin-top: 16px;
color: #fff;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.02em;
}

.shot-modal-close {
position: absolute;
top: -20px; right: -20px;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
transition: all var(--transition);
}
.shot-modal-close:hover {
background: var(--blue);
color: #fff;
border-color: var(--blue);
transform: scale(1.1);
}

@keyframes modalZoomIn {
from { opacity: 0; transform: scale(0.92); }
to   { opacity: 1; transform: scale(1); }
}

/* =========================================================================
   REGULATIONS · 制度矩阵 — Bento Grid + 鼠标跟随聚光灯
   六个类目宽窄不一（12 栏制，--span 由标记内联指定）形成布局节奏；
   JS（initRegBento）把光标坐标写入每格的 --mx/--my，::before 的径向光晕
   随鼠标扫过整个网格。色彩克制：白卡 + 品牌蓝 + 幽灵序号水印。
   ========================================================================= */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}

.bento-cell {
grid-column: span var(--span, 4);
position: relative;
display: flex;
flex-direction: column;
padding: 24px 22px 16px;
/* 半透明玻璃底：让全站光带背景从卡片内透上来 */
background: var(--card-glass);
backdrop-filter: var(--card-glass-blur);
-webkit-backdrop-filter: var(--card-glass-blur);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--card-glass-edge), var(--shadow-sm);
overflow: hidden;
scroll-margin-top: 90px;
transition: border-color var(--transition-smooth), transform var(--transition-smooth),
            box-shadow var(--transition-smooth);
}

/* 聚光灯：光晕跟随光标（--mx/--my 由 JS 写入），扫过时流经相邻格子 */
.bento-cell::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
            var(--blue-glow), transparent 65%);
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
z-index: 0;
}
.bento-grid:hover .bento-cell::before { opacity: 1; }

.bento-cell:hover {
transform: translateY(-3px);
border-color: rgba(0, 120, 212, 0.35);
box-shadow: var(--shadow-lg);
}

/* 导航锚点跳转落点提示 */
.bento-cell:target {
border-color: var(--blue);
box-shadow: var(--shadow-glow);
}

/* 幽灵序号水印 */
.bento-ghost {
position: absolute;
top: -6px;
right: 12px;
font-size: 4.6rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
color: var(--text);
opacity: 0.045;
pointer-events: none;
user-select: none;
z-index: 0;
font-variant-numeric: tabular-nums;
transition: color var(--transition), opacity var(--transition);
}
.bento-cell:hover .bento-ghost { color: var(--blue); opacity: 0.14; }

.bento-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.bento-icon { display: none; }

.bento-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bento-name {
font-size: 0.95rem;
font-weight: 800;
color: var(--text);
letter-spacing: 0.02em;
transition: color var(--transition);
}
.bento-cell:hover .bento-name { color: var(--blue); }
.bento-en {
font-size: 0.62rem;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.bento-count {
margin-left: auto;
font-size: 0.68rem;
font-weight: 700;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 10px;
white-space: nowrap;
flex-shrink: 0;
transition: all var(--transition);
}
.bento-cell:hover .bento-count { color: var(--blue); border-color: var(--blue-light); }

.bento-docs {
display: flex;
flex-direction: column;
gap: 2px;
position: relative;
z-index: 1;
margin-top: auto;
}

.bento-doc {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: var(--radius);
text-decoration: none;
cursor: pointer;
transition: background var(--transition);
}
.bento-doc:hover { background: var(--blue-pale); }
.bento-doc.auth-hint-flash { animation: blueFlash 0.6s ease; }

.bento-doc-no {
font-size: 0.64rem;
font-weight: 700;
color: var(--muted);
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px 7px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
flex-shrink: 0;
background: var(--card-glass);
transition: all var(--transition);
}
.bento-doc:hover .bento-doc-no {
color: var(--blue);
border-color: var(--blue-light);
}

.bento-doc-name {
font-size: 0.85rem;
font-weight: 400;
color: var(--text);
line-height: 1.45;
flex: 1;
min-width: 0;
transition: color var(--transition);
}
.bento-doc:hover .bento-doc-name { color: var(--blue-dark); }

.bento-doc-arrow {
display: inline-flex;
color: var(--blue);
opacity: 0;
transform: translateX(-6px);
transition: opacity var(--transition-smooth), transform var(--transition-smooth);
flex-shrink: 0;
}
.bento-doc:hover .bento-doc-arrow { opacity: 1; transform: translateX(0); }

/* 格子右侧配图（管理制度 / 业务系统）：照片铺满格子右半边、往左渐隐进玻璃底，
   压在文字和幽灵序号下面；--photo-w 调宽度，--photo-pos 调取景（写在标签上） */
.bento-photo {
position: absolute;
top: 0; right: 0; bottom: 0;
width: var(--photo-w, 50%);
z-index: 0;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.5) 40%, #000 75%);
        mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.5) 40%, #000 75%);
}
.bento-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--photo-pos, 50% 50%);
opacity: 0.85;
transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), opacity var(--transition-smooth);
}
/* 文字铺满整格时：is-corner 只占右下角空位（内务系统 7 项两列，右下空一格），
   is-band 只占标题行右侧（通栏格，链接行不压图） */
.bento-photo.is-corner {
top: auto;
height: 56%;
-webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 35%, transparent 85%);
        mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 35%, transparent 85%);
}
.bento-photo.is-band {
bottom: auto;
height: min(62%, 110px);   /* 窄屏链接改单列、格子变高时不往下压 */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 65%), linear-gradient(to bottom, #000 35%, transparent 100%);
-webkit-mask-composite: source-in;
        mask-image: linear-gradient(to right, transparent 0, #000 65%), linear-gradient(to bottom, #000 35%, transparent 100%);
        mask-composite: intersect;
}
.bento-cell:hover .bento-photo img { opacity: 1; transform: scale(1.05); }

@media (max-width: 1024px) {
.bento-cell { grid-column: span 6; }
}
@media (max-width: 640px) {
.bento-grid { gap: 12px; }
.bento-cell { grid-column: span 12; padding: 20px 18px 12px; }
.bento-ghost { font-size: 3.6rem; }
.func-cover { margin: auto -18px -12px; }
.digital-cover { flex-basis: 160px; margin: 16px -18px -12px; }
.about-scene { margin-top: 24px; min-height: 180px; }
}

/* ── 分析仪器 · 照片带（参考 bluebank.co.jp 首页 Recruit 区的成员照片带） ── */
/* =========================================================================
   INSTRUMENT REEL — 一排竖版影棚卡一直匀速左移、首尾无缝相接；限在内容宽度内，左右两头渐隐 + 模糊
   卡片图 images/inst-studio/：同一张浅蓝影棚底（取全站 --blue-pale → --blue-light），
   产品正片叠底进去，所以卡片和页面是一个色调；逻辑见 main.js initInstReel
   ========================================================================= */

.inst-reel {
  --reel-card-w: clamp(220px, 19vw, 270px);
  --reel-gap: 24px;
  --reel-bleed: 48px;   /* 视口往两边伸进区块留白里，渐隐落在留白上 */
  --reel-fade: 48px;    /* 两头渐隐 + 模糊的宽度 */
  position: relative;
}

/* —— 视口 + 轨道 —— */
.inst-reel-viewport {
  position: relative;
  overflow: hidden;
  margin: 0 calc(-1 * var(--reel-bleed));
  padding: 10px 0 24px;   /* 悬停上浮、卡片阴影的位置 */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--reel-fade), #000 calc(100% - var(--reel-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--reel-fade), #000 calc(100% - var(--reel-fade)), transparent 100%);
}
/* 两头再叠一层越靠边越重的模糊 */
.inst-reel-viewport::before,
.inst-reel-viewport::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  width: calc(var(--reel-fade) * 1.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.inst-reel-viewport::before {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 30%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 30%, transparent 100%);
}
.inst-reel-viewport::after {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000 0, #000 30%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0, #000 30%, transparent 100%);
}
.inst-reel-viewport.is-dragging { cursor: grabbing; }
.inst-reel-viewport.is-dragging .inst-reel-card { cursor: grabbing; }

.inst-reel-track {
  display: flex;
  gap: var(--reel-gap);
  width: max-content;
  padding-left: var(--reel-bleed);   /* 第一张对齐内容区左边 */
  list-style: none;
  margin: 0;
  will-change: transform;
}
.inst-reel-item { flex: none; width: var(--reel-card-w); }

/* —— 卡片：整张是影棚照，左上角写名称 —— */
.inst-reel-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  background: #E3EFFA;
  font: inherit;
  text-align: left;
  color: #0B1F33;
  cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(0,58,110,0.06), 0 18px 34px -22px rgba(0,58,110,0.42);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  -webkit-tap-highlight-color: transparent;
}
.inst-reel-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 2px rgba(0,58,110,0.06), 0 28px 44px -24px rgba(0,58,110,0.5);
}
.inst-reel-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.inst-reel-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 80%;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-user-drag: none;
  user-select: none;
}
.inst-reel-card:hover img { transform: scale(1.045); }

/* 左上：编号 · 类别 / 名称 + 缩写 / 两行说明（字色按浅蓝影棚底定死） */
.inst-reel-meta {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 0;
  pointer-events: none;
}
.inst-reel-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #005A9E;
}
.inst-reel-cat b {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-weight: 700;
  color: var(--blue);
  padding-right: 8px;
  border-right: 1px solid rgba(0,90,158,0.25);
  line-height: 1;
}
.inst-reel-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 9px;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #0B1F33;
}
.inst-reel-desc {
  margin-top: 5px;
  font-size: 0.72rem;
  line-height: 1.55;
  color: #3D5266;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inst-card-abbr {
  display: inline-block;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--blue);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,120,212,0.25);
  padding: 1px 6px;
  border-radius: 4px;
}

/* 左下：多张图的张数；右下：放大图标（悬停浮出） */
.inst-reel-count,
.inst-card-zoom {
  position: absolute;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,58,110,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #0B1F33;
  pointer-events: none;
}
.inst-reel-count {
  left: 12px;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #005A9E;
}
.inst-reel-count svg { width: 11px; height: 11px; }
.inst-card-zoom {
  right: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  box-shadow: 0 4px 12px -4px rgba(0,58,110,0.3);
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.inst-card-zoom svg { width: 13px; height: 13px; }
.inst-reel-card:hover .inst-card-zoom,
.inst-reel-card:focus-visible .inst-card-zoom { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .inst-reel-card, .inst-reel-card img, .inst-card-zoom { transition: none; }
  .inst-reel-card:hover { transform: none; }
  .inst-reel-card:hover img { transform: none; }
}

@media (max-width: 1024px) {
  .inst-reel { --reel-gap: 20px; --reel-bleed: 28px; --reel-fade: 32px; }
}
@media (max-width: 768px) {
  .inst-reel {
    --reel-card-w: clamp(200px, 60vw, 250px);
    --reel-gap: 14px;
    --reel-bleed: 20px;
    --reel-fade: 20px;
  }
  .inst-reel-viewport { padding-bottom: 20px; }
  .inst-reel-meta { padding: 14px 14px 0; }
  .inst-reel-name { font-size: 0.94rem; margin-top: 7px; }
  .inst-reel-desc { font-size: 0.68rem; }
}

/* ── 业务系统（Bento 格内）：链接行自适应列数——
   宽格自动两列、窄格单列、通栏四列 ── */
.sys-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 4px 12px;
position: relative;
z-index: 1;
align-content: start;
flex: 1;
}

.link-item {
display: flex;
flex-direction: column;
justify-content: center;
padding: 11px 12px;
border-radius: var(--radius);
text-decoration: none;
color: var(--text);
transition: all var(--transition-smooth);
cursor: pointer;
}
.link-item.auth-hint-flash { animation: blueFlash 0.6s ease; }

.link-arrow {
display: inline-block;
margin-left: 4px;
color: var(--blue);
opacity: 0;
transform: translateX(-4px);
transition: transform var(--transition), opacity var(--transition);
}
.link-item:hover .link-arrow { opacity: 1; transform: translateX(0); }

.link-title {
font-size: 0.88rem;
font-weight: 400;
line-height: 1.4;
margin-bottom: 3px;
transition: color var(--transition);
}

.link-sub {
font-size: 0.72rem;
color: var(--text-muted);
transition: color var(--transition);
font-weight: 500;
}

footer {
position: relative;
padding: 40px 48px 28px;
display: flex;
flex-direction: column;
gap: 24px;
border-top: 2px solid var(--blue);
background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
}

.footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 36px;
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
}

.footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 140px; }
.footer-col-title {
font-size: 0.74rem;
font-weight: 700;
color: var(--blue);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
.footer-col span { font-size: 0.8rem; color: var(--text-muted); }
.footer-link { color: var(--muted); text-decoration: none; transition: color var(--transition); }
.footer-link:hover { color: var(--blue); }

.footer-bottom {
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
border-top: 1px solid var(--border);
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
font-size: 0.78rem;
color: var(--text-muted);
letter-spacing: 0.03em;
gap: 16px;
flex-wrap: wrap;
}

.footer-left { font-size: 0.8rem; color: var(--text-muted); }
.footer-right {
font-size: 0.76rem;
color: var(--muted);
letter-spacing: 0.06em;
font-weight: 600;
}

.inst-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(15,23,42,0.82);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.inst-modal-overlay.active { display: flex; }

.inst-modal-content { position: relative; max-width: 90vw; max-height: 88vh; }

.inst-modal-content img {
display: block;
max-width: 90vw;
max-height: 80vh;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
object-fit: contain;
}

.inst-modal-close {
position: absolute;
top: -20px; right: -20px;
width: 42px; height: 42px;
border-radius: 50%;
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
z-index: 1;
}
.inst-modal-close:hover {
background: var(--blue);
color: #fff;
border-color: var(--blue);
transform: scale(1.1);
}

.inst-modal-nav {
display: none;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 16px;
}

.inst-modal-arrow {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
color: var(--text);
border: none;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.inst-modal-arrow:hover {
background: var(--blue);
color: #fff;
transform: scale(1.1);
}

.inst-modal-counter {
color: #fff;
font-size: 0.88rem;
letter-spacing: 0.04em;
font-weight: 500;
}

.qgoal-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(15,23,42,0.65);
align-items: center;
justify-content: center;
padding: 24px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.qgoal-modal-overlay.active { display: flex; }

.qgoal-box {
position: relative;
background: var(--bg-glass-strong);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
width: 100%;
max-width: 540px;
max-height: 88vh;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
animation: modalSlideUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes modalSlideUp {
from { opacity: 0; transform: translateY(32px) scale(0.95); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}

.qgoal-close {
position: absolute;
top: 16px; right: 16px;
width: 34px; height: 34px;
border-radius: 50%;
background: var(--bg-warm);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
z-index: 2;
}
.qgoal-close:hover {
background: var(--blue);
color: #fff;
border-color: var(--blue);
transform: rotate(90deg);
}

.qgoal-header {
padding: 32px 32px 24px;
flex-shrink: 0;
border-bottom: 1px solid var(--border);
}

.qgoal-header .qgoal-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 12px;
}

.qgoal-header .qgoal-badge {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-size: 2.2rem;
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
color: var(--blue);
}

.qgoal-header .qgoal-badge span {
font-size: 1rem;
font-weight: 700;
color: var(--text);
}

.qgoal-header .qgoal-title {
margin-top: 12px;
font-size: 0.86rem;
font-weight: 500;
color: var(--text-soft);
line-height: 1.65;
}

.qgoal-body {
padding: 24px 32px 32px;
overflow-y: auto;
}

.qgoal-intro {
font-size: 0.86rem;
line-height: 1.8;
color: var(--text-soft);
margin-bottom: 22px;
}

.qgoal-subhead {
font-size: 0.72rem;
font-weight: 700;
color: var(--blue);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.qgoal-subhead:not(:first-child) { margin-top: 24px; }

.qgoal-chips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}

.qgoal-chip {
background: var(--bg-warm);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
transition: all var(--transition-smooth);
}
.qgoal-chip:hover {
border-color: var(--blue);
background: var(--blue-pale);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}

.qgoal-chip .chip-title {
font-size: 0.82rem;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}

.qgoal-chip .chip-desc {
font-size: 0.74rem;
color: var(--text-muted);
line-height: 1.5;
}

.qgoal-highlights {
display: flex;
gap: 10px;
margin-bottom: 24px;
}

.qgoal-highlight {
flex: 1;
text-align: center;
background: var(--blue-pale);
border-radius: var(--radius);
padding: 14px 8px;
border: 1px solid var(--blue-light);
transition: all var(--transition);
}
.qgoal-highlight:hover {
border-color: var(--blue);
box-shadow: 0 2px 12px rgba(0,120,212,0.1);
}

.qgoal-highlight .hl-num {
font-size: 1.1rem;
font-weight: 800;
color: var(--blue);
line-height: 1.2;
}

.qgoal-highlight .hl-label {
font-size: 0.68rem;
color: var(--blue-dark);
margin-top: 4px;
letter-spacing: 0.02em;
line-height: 1.4;
font-weight: 500;
}

.qgoal-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
background: var(--bg-warm);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
}

.qgoal-cta-text {
font-size: 0.8rem;
line-height: 1.65;
color: var(--text-soft);
}

.qgoal-cta-btn {
flex-shrink: 0;
padding: 11px 24px;
background: var(--blue-gradient);
color: #fff;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
transition: all var(--transition-smooth);
box-shadow: 0 4px 14px rgba(0,120,212,0.3);
}
.qgoal-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,120,212,0.4);
}

/* ═══ 数字质检 · 桌面应用 ⇄ 网页应用 切换弹窗 ═══════════════
   沉用 .qgoal-modal-overlay / .qgoal-box 那套玻璃壳（连带着进场动画、
   打印隐藏一起继承），这里只补标题、说明块和按钮行。
   四个状态——确认 / 正在启动 / 没装 / 已切过去——共用这一副骨架，
   由 main.js 换里面的字，不再各做一个弹窗。 */
.appsw-box { max-width: 480px; }

.appsw-title {
font-size: 1.35rem;
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text);
}

.appsw-note {
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--bg-warm);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
font-size: 0.78rem;
line-height: 1.7;
color: var(--text-soft);
margin-bottom: 22px;
}
.appsw-note:empty { display: none; }
/* “还有记录没传上去”这类话用警告色，不能和普通说明一个长相 */
.appsw-note.warn {
background: rgba(245,158,11,0.08);
border-color: rgba(245,158,11,0.35);
}
.appsw-note-icon { flex-shrink: 0; line-height: 1.5; }

.appsw-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}

.appsw-btn {
flex-shrink: 0;
padding: 11px 22px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-soft);
border-radius: 999px;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: all var(--transition-smooth);
}
.appsw-btn:hover { background: var(--bg-warm); border-color: var(--border-strong); color: var(--text); }

.appsw-btn.primary {
border-color: transparent;
background: var(--blue-gradient);
color: #fff;
box-shadow: 0 4px 14px rgba(0,120,212,0.3);
}
.appsw-btn.primary:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,120,212,0.4);
}
.appsw-btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

/* 正在启动：给一颗转圈的点，别让人对着不动的弹窗猜 */
.appsw-spin {
display: inline-block;
width: 13px;
height: 13px;
margin-right: 8px;
vertical-align: -2px;
border: 2px solid var(--blue-light);
border-top-color: var(--blue);
border-radius: 50%;
animation: appswSpin 0.7s linear infinite;
}
@keyframes appswSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.appsw-spin { animation-duration: 2.4s; }
.appsw-btn.primary:hover { transform: none; }
}

@media (max-width: 520px) {
.appsw-actions .appsw-btn { flex: 1 1 100%; text-align: center; }
}

/* =========================================================================
   GLASS MODAL — 核心职能六个详情弹窗的苹果式毛玻璃（iOS/macOS 材质）
   半透明面板 + 深度背景模糊 + 高光描边 + 顶部镜面高光；
   仅作用于挂 .glass-modal 的弹窗，统计类弹窗不受影响。
   ========================================================================= */
.glass-modal {
background: rgba(15,23,42,0.42);
backdrop-filter: blur(40px) saturate(160%) brightness(1.02);
-webkit-backdrop-filter: blur(40px) saturate(160%) brightness(1.02);
}

.glass-modal .qgoal-box {
/* 细腻磨砂颗粒（SVG 噪声）叠加在半透明渐变之上 —— 苹果材质的关键质感 */
background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
  linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.44) 100%);
backdrop-filter: blur(60px) saturate(200%) brightness(1.08);
-webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.08);
border: 1px solid rgba(255,255,255,0.55);
border-radius: 28px;
box-shadow:
  0 40px 110px rgba(15,23,42,0.40),
  0 6px 24px rgba(15,23,42,0.12),
  inset 0 1px 0 rgba(255,255,255,0.85),
  inset 0 0 0 0.5px rgba(255,255,255,0.35),
  inset 0 -20px 40px -24px rgba(15,23,42,0.18);
}

/* 顶部镜面高光 —— 玻璃上缘的柔和反光带 */
.glass-modal .qgoal-box::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 120px;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
opacity: 0.6;
pointer-events: none;
z-index: 0;
mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
-webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* 弹窗内容层置于高光/光斑之上，保证文字清晰 */
.glass-modal .qgoal-header,
.glass-modal .qgoal-body {
position: relative;
z-index: 2;
}
/* 左上柔和光斑 —— 玻璃的环境光晕 */
.glass-modal .qgoal-box::after {
content: '';
position: absolute;
top: -100px; left: -80px;
width: 380px; height: 260px;
background: radial-gradient(closest-side, rgba(255,255,255,0.55), transparent);
pointer-events: none;
z-index: 0;
}

.glass-modal .qgoal-header {
border-bottom: 1px solid rgba(255,255,255,0.55);
box-shadow: 0 1px 0 rgba(15,23,42,0.05);
}

/* iOS 风格圆形关闭钮（systemGray 填充，无描边） */
.glass-modal .qgoal-close {
background: rgba(120,120,128,0.16);
border: none;
color: rgba(60,60,67,0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.glass-modal .qgoal-close:hover {
background: var(--blue);
color: #fff;
}

/* 格内组件换成悬浮玻璃层 */
.glass-modal .qgoal-chip {
background: rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.7);
box-shadow: 0 1px 3px rgba(15,23,42,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.glass-modal .qgoal-chip:hover {
background: rgba(255,255,255,0.75);
border-color: rgba(0,120,212,0.5);
box-shadow: 0 6px 18px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.8);
}

.glass-modal .qgoal-highlight {
background: rgba(0,120,212,0.10);
border: 1px solid rgba(0,120,212,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.glass-modal .qgoal-highlight:hover {
background: rgba(0,120,212,0.16);
border-color: rgba(0,120,212,0.4);
}

/* 不支持 backdrop-filter 的浏览器：退回近实心底，保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-modal .qgoal-box { background: rgba(255,255,255,0.97); }
}

#loginOverlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15,23,42,0.65);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
#loginOverlay.hidden { display: none; }

.login-box {
position: relative;
background: var(--bg-glass-strong);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06);
width: 100%;
max-width: 440px;
border-radius: var(--radius-xl);
overflow: visible;
border: 1px solid var(--border);
animation: modalSlideUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 鼠标跟随聚光灯（Linear/Vercel 签名交互）：--mx/--my 由 JS 写入 loginBox */
.login-spot,
.login-rim {
position: absolute;
inset: 0;
border-radius: 24px;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
/* 内层柔光晕 */
.login-spot {
z-index: 0;
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
            var(--blue-glow), transparent 60%);
}
/* 边框描边光：双层遮罩把径向光裁成仅剩 1.5px 边框，光标扫过点亮弹窗轮廓 */
.login-rim {
z-index: 3;
padding: 1.5px;
background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
            rgba(0,120,212,0.9), rgba(0,120,212,0.18) 45%, transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
        mask-composite: exclude;
}
.login-box:hover .login-spot,
.login-box:hover .login-rim { opacity: 1; }

/* 内容层抬到聚光灯之上 */
.login-header-banner,
.login-body { position: relative; z-index: 1; }

.login-header-banner {
background: transparent;
padding: 40px 36px 0;
text-align: center;
}

.login-header-banner .login-logo-ring {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--blue-gradient);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
box-shadow: 0 8px 24px rgba(0,120,212,0.3);
}
.login-header-banner .login-logo-ring svg {
width: 28px; height: 28px;
color: #fff;
}

.login-header-banner img {
width: 52px; height: 52px;
border-radius: var(--radius);
object-fit: contain;
display: block;
margin: 0 auto 16px;
box-shadow: var(--shadow-sm);
}

.login-header-banner .login-banner-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
margin-bottom: 4px;
}

.login-header-banner .login-banner-sub {
font-size: 0.72rem;
color: var(--text-muted);
letter-spacing: 0.08em;
font-weight: 500;
}

.login-body { padding: 24px 36px 36px; }

.login-field { margin-bottom: 18px; }

.login-field label {
display: block;
font-size: 0.78rem;
color: var(--text-soft);
letter-spacing: 0.03em;
margin-bottom: 8px;
font-weight: 600;
}

.login-field .input-wrapper { position: relative; }

.login-field .input-icon {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 18px; height: 18px;
pointer-events: none;
transition: opacity var(--transition);
opacity: 0.3;
}

.login-field .input-icon svg {
display: block;
width: 18px; height: 18px;
}

.login-field input {
width: 100%;
padding: 12px 14px 12px 44px;
font-size: 0.9rem;
border: 2px solid var(--border);
border-radius: var(--radius);
color: var(--text);
outline: none;
transition: all var(--transition);
font-family: inherit;
background: var(--bg-warm);
}
.login-field input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 4px var(--blue-glow);
background: var(--bg);
}
.login-field input::placeholder {
color: var(--muted);
opacity: 0.7;
}

.login-field input.name-resolved {
border-color: #22C55E;
color: #16A34A;
font-weight: 700;
box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
}

:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.login-field input:focus ~ .input-icon { opacity: 0.7; }

.login-error {
font-size: 0.76rem;
color: #DC2626;
margin: -4px 0 16px;
min-height: 1.2em;
text-align: center;
}

.login-submit {
width: 100%;
padding: 13px 0;
background: var(--blue-gradient);
color: #fff;
border: none;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer;
transition: all var(--transition-smooth);
font-family: inherit;
margin-top: 8px;
box-shadow: 0 4px 16px rgba(0,120,212,0.3);
position: relative;
overflow: hidden;
}
.login-submit::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s;
}
.login-submit:hover::before { opacity: 1; }
.login-submit:hover {
box-shadow: 0 8px 28px rgba(0,120,212,0.4);
transform: translateY(-1px);
}
.login-submit:active { transform: scale(0.98); }

.login-toggle-row { text-align: center; margin-top: 16px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.login-forgot-lead { font-size: 0.8rem; color: var(--text-soft, #6b7280); line-height: 1.7; margin: 0 0 18px; text-align: center; }
/* Admin 登录验证码那一步：「这台电脑 30 天内不用再输验证码」 */
.login-check { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 14px; font-size: 0.78rem; color: var(--text-soft, #6b7280); cursor: pointer; user-select: none; }
.login-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); cursor: pointer; }
#mfaCode { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
#mfaCode::placeholder { letter-spacing: normal; }
/* 验证码这一步和账号密码那一步一样高（min-height 由 main.js 的 showMfaForm 照登录表单量好写进来），内容在里面上下居中。
   flex 里上下外边距不合并：错误行的 16px 和按钮的 8px 原本合成 16px，这里按钮的去掉，间距保持原样 */
#mfaForm { display: flex; flex-direction: column; justify-content: center; }
#mfaForm .login-submit { margin-top: 0; }
.login-consent { font-size: 0.72rem; color: var(--text-soft, #9a9a9a); line-height: 1.6; text-align: center; margin: 14px 0 0; }
.login-consent a { color: var(--blue); text-decoration: none; }
.login-consent a:hover { text-decoration: underline; }
.login-toggle {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--blue);
  cursor: pointer;
  letter-spacing: 0.03em;
  font-weight: 500;
  transition: all var(--transition);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  user-select: none;
}
.login-toggle:hover { color: var(--blue-dark); background: var(--blue-pale); }

/* ---- Admin 验证码那一步的「返回」「重新发送」 ----
   不排成一对：「返回」是导航，放到左上角，和右上角的关闭钮成对（同一种浅灰毛玻璃圆钮，悬停变蓝）；
   「重新发送」跟验证码走，做成输入框里右端的一枚玻璃小片，倒计时也在它上面走。 */
.login-back {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(120,120,128,0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: rgba(60,60,67,0.65); cursor: pointer; line-height: 1;
  box-shadow: inset 1px 1.5px 1px -1px rgba(255,255,255,0.9), inset -1px -2px 1px -1.5px rgba(255,255,255,0.6);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.login-back[hidden] { display: none; }
.login-back svg { width: 15px; height: 11px; }
.login-back:hover { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(0,120,212,0.28); }
.login-back:hover svg { animation: login-back-arrow 0.4s ease-in-out; }
.login-back:focus-visible { outline: 2px solid rgba(0,120,212,0.45); outline-offset: 2px; }
@keyframes login-back-arrow {                  /* 箭头往左滑出、从右边滑回 */
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-150%); opacity: 0; }
  51%  { transform: translateX(150%); opacity: 0; }
  52%  { opacity: 1; }
  100% { transform: translateX(0); }
}

.login-field .input-wrapper--action input { padding-right: 112px; }
.code-resend {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  min-width: 90px; height: 30px; padding: 0 12px;
  border: none; border-radius: 999px;
  background: rgba(120,120,128,0.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 1px 1.5px 1px -1px rgba(255,255,255,0.95), inset -1px -2px 1px -1.5px rgba(255,255,255,0.6),
              0 1px 2px rgba(15,23,42,0.06);
  color: var(--text-soft, #6b7280); font-family: inherit; font-size: 0.76rem; font-weight: 400;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.code-resend:hover:not(:disabled) { background: var(--blue); color: #fff; box-shadow: 0 3px 10px rgba(0,120,212,0.28); }
.code-resend:focus-visible { outline: 2px solid rgba(0,120,212,0.45); outline-offset: 2px; }
.code-resend:disabled { cursor: default; color: var(--muted, #9ca3af); background: rgba(120,120,128,0.08); }
@media (prefers-reduced-motion: reduce) {
  .login-back:hover svg { animation: none; }
}

.login-close {
position: absolute;
top: 14px; right: 14px;
background: none;
border: none;
width: 34px; height: 34px;
border-radius: 50%;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
z-index: 2;
line-height: 1;
}
.login-close:hover {
background: var(--bg-warm);
color: var(--text);
}

/* =========================================================================
   LOGIN GLASS — 登录 / 修改密码弹窗的苹果式毛玻璃（与核心职能弹窗同材质）
   ========================================================================= */
#loginOverlay {
background: rgba(15,23,42,0.45);
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
}

.login-box {
background: linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.58) 100%);
backdrop-filter: blur(44px) saturate(190%);
-webkit-backdrop-filter: blur(44px) saturate(190%);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 24px;
box-shadow:
  0 32px 90px rgba(15,23,42,0.35),
  0 2px 8px rgba(15,23,42,0.08),
  inset 0 1px 0 rgba(255,255,255,0.75);
}
/* 顶部镜面高光线 */
.login-box::before {
content: '';
position: absolute;
top: 0; left: 24px; right: 24px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
pointer-events: none;
z-index: 3;
}
/* 左上柔和光斑 */
.login-box::after {
content: '';
position: absolute;
top: -70px; left: -50px;
width: 300px; height: 200px;
background: radial-gradient(closest-side, rgba(255,255,255,0.5), transparent);
pointer-events: none;
border-radius: 50%;
}

/* 输入框换成悬浮玻璃层 */
.login-field input {
background: rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.7);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 3px rgba(15,23,42,0.04);
}
.login-field input:focus {
background: rgba(255,255,255,0.85);
border-color: rgba(0,120,212,0.6);
box-shadow: 0 0 0 4px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* iOS 风格圆形关闭钮 */
.login-close {
background: rgba(120,120,128,0.16);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(60,60,67,0.65);
}
.login-close:hover {
background: var(--blue);
color: #fff;
}

/* 不支持 backdrop-filter：退回近实心底 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.login-box { background: rgba(255,255,255,0.97); }
}

.auth-toast {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%) translateY(20px);
z-index: 9998;
background: var(--blue);
color: #fff;
padding: 14px 32px;
border-radius: 999px;
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0.04em;
box-shadow: 0 8px 28px rgba(0,120,212,0.4);
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
white-space: nowrap;
}
.auth-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}

.back-to-top {
position: fixed;
bottom: 32px; right: 32px;
width: 46px; height: 46px;
border-radius: 50%;
background: var(--blue-gradient);
color: #fff;
border: none;
font-size: 1.3rem;
cursor: pointer;
box-shadow: var(--shadow-lg), 0 0 20px rgba(0,120,212,0.25);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(12px);
transition: all var(--transition-smooth);
pointer-events: none;
z-index: 300;
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl), 0 0 30px rgba(0,120,212,0.35);
}

@keyframes subtlePulse {
0%, 100% { box-shadow: var(--shadow-lg), 0 0 20px rgba(0,120,212,0.25); }
50% { box-shadow: 0 8px 28px rgba(0,120,212,0.4), 0 0 40px rgba(0,120,212,0.2); }
}
.back-to-top.visible { animation: subtlePulse 3s ease-in-out infinite; }

.hero-flash-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 200;
display: none;
overflow: hidden;
}
.hero-flash-overlay.active { display: block; }

.hero-flash-center {
position: absolute;
width: 0;
height: 0;
}

.hero-flash-glow {
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 30px;
margin-left: -15px;
margin-top: -15px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.9) 0%,
rgba(0, 120, 212, 0.6) 40%,
rgba(0, 120, 212, 0.15) 70%,
transparent 100%
);
box-shadow:
0 0 20px 10px rgba(0, 120, 212, 0.5),
0 0 50px 25px rgba(0, 120, 212, 0.2);
transform: scale(0);
opacity: 0;
}
.hero-flash-glow { animation: glowPulse 1.5s ease-out forwards; }

@keyframes glowPulse {
0%   { transform: scale(0);   opacity: 0; }
8%   { transform: scale(0.6); opacity: 1; }
30%  { transform: scale(1.5); opacity: 0.6; }
60%  { transform: scale(3);   opacity: 0.15; }
100% { transform: scale(5);   opacity: 0; }
}

.hero-flash-ripple {
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 30px;
margin-left: -15px;
margin-top: -15px;
border-radius: 50%;
border: 1px solid rgba(0, 120, 212, 0.4);
background: transparent;
transform: scale(0);
opacity: 0;
}
.hero-flash-ripple { animation: rippleFull 5.0s linear forwards; }

@keyframes rippleFull {
0%   { transform: scale(0);    opacity: 0; }
2%   { transform: scale(0.1);  opacity: 0.65; }
15%  { transform: scale(3);    opacity: 0.35; }
40%  { transform: scale(18);   opacity: 0.10; }
100% { transform: scale(160);  opacity: 0; }
}

.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}

.reveal-stagger > * {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-stagger > *.revealed { opacity: 1; transform: translateY(0); }
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.35s; }
.reveal-stagger > *:nth-child(7) { transition-delay: 0.42s; }
.reveal-stagger > *:nth-child(8) { transition-delay: 0.49s; }

@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
.bg-orb, .hero-geo-ring, .hero-geo-dot { display: none; }
body::before, body::after { animation: none; }
}

/* ═══ ACCESSIBILITY — 键盘焦点可见性（role="button" 的可点击卡片） ═══ */
[role="button"]:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
}

/* ═══ 锚点定位 — 吸顶导航遮挡补偿 ═══ */
section[id], .bento-cell[id] {
scroll-margin-top: 72px;
}

@media (max-width: 1024px) {
nav { padding: 0 20px; }
.hero { padding: 70px 28px 44px; }
/* 961~1024：横幅矮到约 446px、描述比 h1 宽（右端约 640px），图框左缘定在 340px，烧瓶落在 672~848px */
.hero-banner { --bn-left: 340px; }
.section { padding: 37px 28px; }
.stats { padding: 0 28px; margin-top: -24px; gap: 12px; }
.stat-item { padding: 22px 18px; }
.stat-num { font-size: 2.2rem; }
footer { padding: 32px 28px 22px; }
.hero-divider { padding: 0 28px 32px; }

/* 仪器卡的 1024 / 768 断点写在仪器区块末尾 */

.nav-brand .logo-icon { height: 30px; }
.nav-brand .name { font-size: 0.72rem; }
.nav-brand .dept { font-size: 0.6rem; }
.nav-links { gap: 8px; }
.nav-links a { font-size: 0.76rem; padding: 5px 10px; }
.nav-right { gap: 10px; }
.nav-login-btn, .nav-user-name-btn { padding: 6px 14px; font-size: 0.72rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
}

@media (max-width: 960px) {
.nav-links { display: none; }
.nav-hamburger { display: flex; }
.about-wrap { grid-template-columns: 1fr; gap: 24px; }
.about-flow { max-width: 460px; }
/* ≤960 文字铺满整行：照片改成整幅淡底，只往下渐隐 */
.hero-banner { --bn-left: 0px; }
.hero-banner img {
opacity: 0.32;
object-position: 70% 30%;
-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
}

@media (max-width: 768px) {
nav { padding: 0 20px; height: 56px; }
.hero { padding: 48px 20px 36px; }
.hero-divider { padding: 0 20px 28px; }
.section { padding: 29px 20px; }
.stats { flex-direction: column; padding: 0 20px; margin-top: -20px; gap: 8px; }
.stat-item { padding: 20px 20px; }
.stat-num { font-size: 2rem; }
footer { padding: 28px 20px 18px; }
.footer-top { flex-direction: column; gap: 22px; }

.reveal { transform: translateY(20px); }
.reveal-stagger > * { transform: translateY(20px); }

.section-header h2 { font-size: 1.45rem; }

.nav-links { display: none; }
.nav-hamburger { display: flex; }
/* 导航栏此断点高 56px，菜单层从同一位置起铺，避免露出 8px 页面缝隙 */
.nav-mobile-overlay { top: 56px; }
.nav-login-btn, .nav-user-name-btn {
padding: 7px 18px;
font-size: 0.76rem;
}

.nav-brand .name { font-size: 0.76rem; }
.nav-brand .dept { font-size: 0.66rem; }
.nav-brand .logo-icon { height: 28px; }


.digital-feature-pair { grid-template-columns: 1fr; gap: 16px; }
.digital-shot-row-inline { grid-template-columns: 1fr; }

.sys-items { grid-template-columns: 1fr; }

.inst-modal-content { max-width: 96vw; }
.inst-modal-content img { max-width: 96vw; max-height: 70vh; }
.inst-modal-close { top: 8px; right: 8px; width: 34px; height: 34px; }

.login-box { max-width: 100%; margin: 0 8px; border-radius: var(--radius-lg); }
.login-header-banner { padding: 30px 24px 0; }
.login-body { padding: 20px 24px 28px; }

.qgoal-box { max-width: 100%; margin: 0 8px; max-height: 92vh; }
.qgoal-header { padding: 26px 22px 20px; }
.qgoal-header .qgoal-badge { font-size: 1.85rem; }
.qgoal-body { padding: 22px 22px 28px; }
.qgoal-chips { grid-template-columns: 1fr; }
.qgoal-highlights { flex-wrap: wrap; }
.qgoal-highlight { min-width: calc(50% - 5px); }
.qgoal-cta { flex-direction: column; align-items: stretch; text-align: center; }
.qgoal-cta-btn { text-align: center; }

.auth-toast { bottom: 30px; font-size: 0.78rem; padding: 12px 24px; }
.back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }

.hero-geo-ring { display: none; }
.hero-geo-dot { display: none; }
}

@media (max-width: 480px) {
.hero h1 { font-size: 1.8rem; }
.hero-desc { font-size: 0.88rem; }
.hero-actions { flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-cta { padding: 10px 22px; font-size: 0.85rem; }
.section-header h2 { font-size: 1.35rem; }
.func-desc { font-size: 0.78rem; }
.stat-num { font-size: 1.8rem; }
.footer-top { gap: 18px; }
}

@media print {
body { background-image: none; }
body::before, body::after { display: none; }
.bg-orb, .scroll-progress,
nav, .back-to-top, #loginOverlay, .inst-modal-overlay,
.qgoal-modal-overlay, .auth-toast,
.hero-divider, .hero-marquee, .hero-flash-overlay,
.hero-geo-ring, .hero-geo-dot, .hero-banner, .func-cover, .digital-cover, .bento-photo, .about-scene { display: none !important; }
.hero, .section, footer { padding: 20px 0; border: none; }
.func-cell, .inst-reel-card, .bento-cell, .link-item { break-inside: avoid; }
.inst-reel-item[aria-hidden] { display: none !important; }
.inst-reel-viewport { padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none; }
.inst-reel-viewport::before, .inst-reel-viewport::after { display: none; }
.inst-reel-track { transform: none !important; flex-wrap: wrap; width: auto; padding-left: 0; }
.bento-grid { display: block; }
.bento-cell { margin-bottom: 12px; }
.bento-cell::before, .bento-ghost, .bento-doc-arrow { display: none; }
.stat-label svg { display: none; }
.stat-tap-hint { display: none !important; }
}