/** * 智能船舶「一张图」资料站：海蓝色海事主题 * 覆盖 styles.css 的 CSS 变量与部分写死色值，行业参考：深蓝主色 + 海蓝强调（航运/海事类站点常见做法） * 使用方式：，且本文件在 styles.css 之后引入 */ /* —— 深色模式：偏「海图底」的深蓝灰，正文与辅文对比度提高 —— */ html.ship-brand { --bg: #0a1624; --bg-soft: #0f1f30; --panel: rgba(18, 44, 64, 0.92); --panel-strong: #152f45; --line: rgba(150, 195, 225, 0.3); --text: #f7fbfe; --muted: #c9dfea; --faint: #9eb8ca; --accent: #4eb0ea; --accent-2: #7cc4f0; --warning: #e0c06a; --danger: #e88896; --shadow: 0 20px 56px rgba(0, 10, 22, 0.45); --header-bg: rgba(8, 22, 36, 0.96); --metric-tile-bg: rgba(22, 50, 72, 0.88); --text-on-accent: #061018; --body-glow-1: rgba(70, 155, 215, 0.2); --body-glow-2: rgba(40, 110, 165, 0.12); --body-base-1: #0c1826; --body-base-2: #0f1e2e; --body-grid-line: rgba(140, 175, 205, 0.06); --dark-band-glow: rgba(70, 155, 215, 0.1); --fill-muted: rgba(22, 48, 68, 0.68); --fill-band: rgba(14, 36, 54, 0.78); --fill-warm: rgba(22, 48, 68, 0.55); --fill-mid: rgba(18, 42, 62, 0.58); --fill-ghost: rgba(16, 38, 56, 0.35); --fill-table-row: rgba(18, 44, 64, 0.45); --nav-drawer-bg: rgba(6, 18, 30, 0.98); --gradient-text-from: #ffffff; } /* 深色模式：深海蓝渐变底 */ html.ship-brand body { background: radial-gradient(ellipse 110% 50% at 50% -5%, rgba(55, 145, 205, 0.11), transparent 52%), radial-gradient(circle at 14% 12%, var(--body-glow-1), transparent 27rem), radial-gradient(circle at 86% 18%, var(--body-glow-2), transparent 25rem), linear-gradient(188deg, var(--body-base-1) 0%, #051d2e 48%, var(--body-base-2) 100%); } /* 浅色模式：纯净白蓝底 */ html.ship-brand[data-theme="light"] body { background: radial-gradient(ellipse 120% 45% at 50% -8%, rgba(15, 109, 181, 0.06), transparent 55%), radial-gradient(circle at 12% 10%, rgba(15, 109, 181, 0.07), transparent 28rem), radial-gradient(circle at 88% 15%, rgba(37, 144, 208, 0.04), transparent 24rem), linear-gradient(185deg, #f4f8fd 0%, #eef5fc 45%, #f2f7fc 100%); } html.ship-brand .brand-mark { box-shadow: 0 4px 26px rgba(45, 135, 195, 0.38); color: var(--text-on-accent); } html.ship-brand .brand-mark svg { display: block; } html.ship-brand .gradient-text { text-shadow: 0 0 40px rgba(58, 159, 217, 0.18); } /* 浅色模式 gradient-text：用富饱和度的深蓝渐变，更有力量感 */ html.ship-brand[data-theme="light"] .gradient-text { background: linear-gradient(95deg, #0a2540 0%, var(--accent) 48%, var(--accent-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; } html.ship-brand .hero-title::before { box-shadow: 0 0 22px rgba(58, 159, 217, 0.38); } html.ship-brand .eyebrow::before { box-shadow: 0 0 16px rgba(58, 159, 217, 0.28); } html.ship-brand .button.primary { box-shadow: 0 16px 42px rgba(38, 125, 185, 0.32); } html.ship-brand .section-heading::before { background: linear-gradient(180deg, var(--accent), rgba(107, 184, 232, 0.22)); } /* —— 浅色模式：明亮通透的海事白蓝 —— */ html.ship-brand[data-theme="light"] { color-scheme: light; --bg: #f4f8fd; --bg-soft: #eaf2fa; --panel: rgba(255, 255, 255, 0.98); --panel-strong: #ddeaf6; --line: rgba(45, 90, 130, 0.14); --text: #0b1822; --muted: #2b4560; --faint: #48657c; --accent: #0f6db5; --accent-2: #2590d0; --warning: #7a5a10; --danger: #a02836; --shadow: 0 8px 32px rgba(15, 40, 70, 0.08); --header-bg: linear-gradient(188deg, #f0f7fd 0%, #e8f1fa 50%, #eff6fc 100%); --metric-tile-bg: rgba(255, 255, 255, 0.96); --text-on-accent: #f0f8ff; --body-glow-1: rgba(15, 109, 181, 0.08); --body-glow-2: rgba(37, 144, 208, 0.05); --body-base-1: #eef4fb; --body-base-2: #e7f0f9; --body-grid-line: rgba(45, 85, 125, 0.06); --dark-band-glow: rgba(15, 109, 181, 0.06); --fill-muted: rgba(255, 255, 255, 0.96); --fill-band: rgba(232, 243, 253, 0.97); --fill-warm: rgba(255, 255, 255, 0.98); --fill-mid: rgba(250, 253, 255, 0.99); --fill-ghost: rgba(255, 255, 255, 0.72); --fill-table-row: rgba(255, 255, 255, 0.92); --nav-drawer-bg: rgba(252, 254, 255, 0.99); --gradient-text-from: #0a2540; --nav-item-hover: rgba(15, 109, 181, 0.09); --nav-item-active: rgba(15, 109, 181, 0.15); --nav-item-border-hover: rgba(45, 100, 150, 0.2); } html.ship-brand[data-theme="light"] .nav-links a:hover small, html.ship-brand[data-theme="light"] .nav-links a.active small { color: var(--accent-2); } html.ship-brand[data-theme="light"] .nav-links a:hover .nav-index, html.ship-brand[data-theme="light"] .nav-links a.active .nav-index { color: var(--accent); } /* —— 首页资料卡片（海事文档风） —— */ html.ship-brand .ship-hero-summary { position: relative; overflow: visible; padding: 26px 24px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(58, 159, 217, 0.08) 0%, transparent 42%), var(--panel); box-shadow: var(--shadow); } html.ship-brand .ship-hero-summary::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #1a6a9a, var(--accent), var(--accent-2)); opacity: 0.95; } html.ship-brand .ship-hero-summary::after { content: ""; position: absolute; right: -40%; bottom: -35%; width: 85%; height: 55%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(58, 159, 217, 0.09), transparent 68%); } html.ship-brand .ship-hero-badge { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(58, 159, 217, 0.1); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent-2); } html.ship-brand .ship-hero-card-title { position: relative; z-index: 1; margin: 0 0 16px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } html.ship-brand .ship-hero-steps { position: relative; z-index: 1; list-style: none; margin: 0 0 20px; padding: 0; } html.ship-brand .ship-hero-steps li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 11px; } html.ship-brand .ship-hero-steps li:last-child { margin-bottom: 0; } html.ship-brand .ship-hero-steps .step-body { flex: 1; min-width: 0; } html.ship-brand .ship-hero-steps .step-num { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-size: 12px; font-weight: 900; color: var(--text-on-accent); background: linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px rgba(38, 125, 185, 0.25); } html.ship-brand .ship-hero-steps .step-text { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--text); } html.ship-brand .ship-hero-steps .step-hint { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--faint); } html.ship-brand .ship-hero-value-list { position: relative; z-index: 1; list-style: none; margin: 0 0 20px; padding: 0; } html.ship-brand .ship-hero-value-list li { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } html.ship-brand .ship-hero-value-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } html.ship-brand .ship-hero-value-list strong { display: block; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin-bottom: 5px; } html.ship-brand .ship-hero-value-list span { display: block; font-size: 12.5px; line-height: 1.55; font-weight: 500; color: var(--muted); } html.ship-brand .ship-kpi-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 900px) { html.ship-brand .ship-kpi-grid { grid-template-columns: repeat(4, 1fr); } } html.ship-brand .ship-kpi-grid > div { padding: 13px 8px; text-align: center; border: 1px solid var(--line); background: var(--metric-tile-bg); border-radius: var(--radius-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease; } html.ship-brand .ship-kpi-grid > div:hover { border-color: rgba(58, 159, 217, 0.35); box-shadow: 0 6px 20px rgba(0, 20, 40, 0.12); } html.ship-brand .ship-kpi-grid strong { display: block; color: var(--accent); font-size: clamp(17px, 1.8vw, 20px); font-weight: 800; line-height: 1.1; } html.ship-brand .ship-kpi-grid span { display: block; margin-top: 6px; color: var(--faint); font-size: 12px; } html.ship-brand .ship-hero-note { position: relative; z-index: 1; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); line-height: 1.6; } html.ship-brand[data-theme="light"] .ship-hero-summary { background: linear-gradient(165deg, rgba(13, 106, 161, 0.06) 0%, transparent 45%), var(--panel); } /* ========================================== Hero 右侧科技拓扑可视化 ========================================== */ html.ship-brand .hero-viz { position: relative; width: 100%; height: 100%; flex: 1 1 auto; min-height: min(420px, 42vh); border-radius: var(--radius-lg); background: linear-gradient(155deg, #071c2e 0%, #0c2540 45%, #071625 100%); border: 1px solid rgba(78, 176, 234, 0.28); box-shadow: inset 0 0 60px rgba(78, 176, 234, 0.04), 0 8px 40px rgba(0, 10, 24, 0.28), 0 0 0 1px rgba(78, 176, 234, 0.08); overflow: hidden; animation: ship-viz-breathe 5.5s ease-in-out infinite; } /* 右侧可视化：微光扫过 + 轻微呼吸（与 SVG 动画叠加） */ @keyframes ship-viz-sweep { 0% { transform: translateX(-35%) skewX(-12deg); opacity: 0; } 12% { opacity: 0.45; } 55% { opacity: 0.18; } 100% { transform: translateX(135%) skewX(-12deg); opacity: 0; } } @keyframes ship-viz-breathe { 0%, 100% { box-shadow: inset 0 0 60px rgba(78, 176, 234, 0.04), 0 8px 40px rgba(0, 10, 24, 0.28), 0 0 0 1px rgba(78, 176, 234, 0.08); } 50% { box-shadow: inset 0 0 80px rgba(78, 176, 234, 0.09), 0 12px 48px rgba(0, 10, 24, 0.35), 0 0 0 1px rgba(124, 196, 240, 0.35); } } @keyframes ship-viz-breathe-light { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 48px rgba(15, 109, 181, 0.05), 0 8px 28px rgba(15, 45, 80, 0.06); } 50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.98), inset 0 0 64px rgba(37, 144, 208, 0.08), 0 12px 36px rgba(15, 45, 80, 0.09); } } html.ship-brand .hero-viz::before { content: ""; position: absolute; inset: -2px; background: linear-gradient( 105deg, transparent 0%, rgba(124, 196, 240, 0.12) 42%, rgba(255, 255, 255, 0.08) 50%, rgba(124, 196, 240, 0.1) 58%, transparent 100% ); width: 55%; pointer-events: none; animation: ship-viz-sweep 7.5s ease-in-out infinite; } html.ship-brand .viz-svg { display: block; width: 100%; height: 100%; position: relative; z-index: 1; transform-origin: center center; animation: ship-viz-float 8s ease-in-out infinite; } @keyframes ship-viz-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.02); } } @media (prefers-reduced-motion: reduce) { html.ship-brand .hero-viz, html.ship-brand .hero-viz::before, html.ship-brand .viz-svg { animation: none !important; } } /* 浅色模式：右侧拓扑区与海蓝白天主题一致（浅底 + 轻阴影） */ html.ship-brand[data-theme="light"] .hero-viz { background: radial-gradient(ellipse 90% 55% at 78% 10%, rgba(37, 144, 208, 0.1), transparent 52%), radial-gradient(ellipse 70% 45% at 12% 86%, rgba(15, 109, 181, 0.06), transparent 50%), linear-gradient(178deg, #fbfdff 0%, #f3f9fd 45%, #e9f3fa 100%); border-color: rgba(15, 109, 181, 0.16); animation-name: ship-viz-breathe-light; } html.ship-brand[data-theme="light"] .hero-viz::before { background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.55) 40%, rgba(37, 144, 208, 0.12) 50%, rgba(255, 255, 255, 0.42) 60%, transparent 100% ); animation-duration: 10s; } html.ship-brand[data-theme="light"] .viz-corner--tl, html.ship-brand[data-theme="light"] .viz-corner--tr, html.ship-brand[data-theme="light"] .viz-corner--bl, html.ship-brand[data-theme="light"] .viz-corner--br { border-color: rgba(15, 109, 181, 0.32); } /* Corner frame decorations */ html.ship-brand .viz-corner { position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 2; } html.ship-brand .viz-corner--tl { top: 10px; left: 10px; border-top: 2px solid rgba(78, 176, 234, 0.6); border-left: 2px solid rgba(78, 176, 234, 0.6); } html.ship-brand .viz-corner--tr { top: 10px; right: 10px; border-top: 2px solid rgba(78, 176, 234, 0.6); border-right: 2px solid rgba(78, 176, 234, 0.6); } html.ship-brand .viz-corner--bl { bottom: 10px; left: 10px; border-bottom: 2px solid rgba(78, 176, 234, 0.6); border-left: 2px solid rgba(78, 176, 234, 0.6); } html.ship-brand .viz-corner--br { bottom: 10px; right: 10px; border-bottom: 2px solid rgba(78, 176, 234, 0.6); border-right: 2px solid rgba(78, 176, 234, 0.6); } /* Systems: shore-side 2-col grid */ html.ship-brand .systems-shore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 780px) { html.ship-brand .systems-shore-grid { grid-template-columns: 1fr; } } html.ship-brand[data-theme="light"] .gradient-text { text-shadow: 0 0 28px rgba(13, 106, 161, 0.14); } html.ship-brand[data-theme="light"] .brand-mark { box-shadow: 0 4px 20px rgba(13, 106, 161, 0.22); } /* ========================================== 首页 Hero：完全覆盖基础 .hero 的双列网格 ========================================== */ /* 1. 首屏 Hero：占满视口高度，内容垂直居中，气势与参考站一致 */ html.ship-brand .hero.ship-hero { display: flex !important; flex-direction: column; justify-content: center; align-items: stretch; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; min-height: 100svh; grid-template-columns: unset !important; padding-top: clamp(40px, 7vh, 96px) !important; padding-bottom: clamp(48px, 8vh, 112px) !important; width: min(var(--content-max, 1180px), calc(100% - 40px)); max-width: none; overflow: visible; } html.ship-brand .ship-hero-inner { display: grid; grid-template-columns: 1fr minmax(300px, 36%); gap: clamp(32px, 4vw, 56px); align-items: stretch; width: 100%; flex: 1 1 auto; min-height: min(720px, calc(100dvh - 200px)); } @media (max-width: 1080px) { html.ship-brand .ship-hero-inner { grid-template-columns: 1fr; gap: 28px; min-height: 0; } html.ship-brand .ship-hero-main { justify-content: flex-start; } html.ship-brand .hero.ship-hero { min-height: auto; padding-top: clamp(32px, 5vh, 56px) !important; padding-bottom: clamp(40px, 6vh, 72px) !important; } html.ship-brand .ship-hero-side { width: 100%; max-width: 520px; } html.ship-brand .hero-viz { min-height: 380px; } } /* Hero 主栏 / 侧栏排版与字号 */ html.ship-brand .ship-hero-main { min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } html.ship-brand .ship-hero-side { min-width: 0; width: 100%; display: flex; flex-direction: column; } html.ship-brand .ship-hero-main h1.hero-title { font-size: clamp(46px, 5.2vw, 80px); max-width: 100%; padding-top: 0; overflow-wrap: break-word; white-space: normal; } html.ship-brand .ship-hero-main .hero-title-line { display: block; white-space: normal; word-break: keep-all; overflow-wrap: break-word; line-height: 1.06; letter-spacing: -0.035em; } html.ship-brand .ship-hero-main .hero-title::before { margin-bottom: clamp(18px, 2.5vh, 26px); } html.ship-brand .ship-hero-main .gradient-text { display: block; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.14; letter-spacing: -0.028em; margin-top: 6px; } html.ship-brand .ship-hero-lead { max-width: 100%; font-size: clamp(16px, 1.05vw, 18px); line-height: 1.78; margin-top: clamp(18px, 2.2vh, 28px); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand .ship-hero-kicker { margin: 0 0 clamp(10px, 1.2vh, 16px); font-size: clamp(11px, 0.85vw, 13px); font-weight: 700; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; } html.ship-brand .ship-hero-main .hero-actions { margin-top: clamp(22px, 3vh, 36px); } /* 9. 浅色模式下内层整体加圆角卡片感 */ html.ship-brand[data-theme="light"] .ship-hero-inner { padding: clamp(18px, 2.5vw, 28px); border-radius: calc(var(--radius-lg) + 4px); background: linear-gradient(165deg, rgba(255, 255, 255, 0.75) 0%, rgba(248, 251, 253, 0.6) 100%); border: 1px solid rgba(45, 100, 140, 0.12); box-shadow: 0 8px 40px rgba(25, 70, 100, 0.06); } html.ship-brand[data-theme="light"] .ship-hero-summary { border-radius: var(--radius-md); box-shadow: 0 4px 24px rgba(25, 70, 100, 0.06); } html.ship-brand[data-theme="light"] .ship-kpi-grid > div { background: rgba(255, 255, 255, 0.92); } html.ship-brand:not([data-theme="light"]) .ship-hero-inner { padding-bottom: 8px; } /* ========================================== 规划概览：全宽对齐，与 section 内其他内容等宽 ========================================== */ html.ship-brand #overview .overview-policy, html.ship-brand #overview .overview-map, html.ship-brand #overview .overview-cross, html.ship-brand #overview .overview-sym-grid { max-width: none; width: 100%; box-sizing: border-box; } /* —— 规划概览：政策统筹 + 对称 2×2 四维 —— */ html.ship-brand .overview-lead { margin-top: 4px; max-width: none; width: 100%; box-sizing: border-box; font-size: clamp(16px, 1.05vw, 18px); line-height: 1.75; color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand .overview-policy, html.ship-brand .overview-map, html.ship-brand .overview-cross { margin-top: clamp(28px, 4vw, 40px); } html.ship-brand .overview-subtitle { margin: 0 0 14px; font-size: clamp(18px, 1.35vw, 22px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); } html.ship-brand .overview-policy p, html.ship-brand .overview-map p, html.ship-brand .overview-cross p { margin: 0 0 14px; font-size: 16px; line-height: 1.78; color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand .overview-policy p:last-child, html.ship-brand .overview-map p:last-child { margin-bottom: 0; } html.ship-brand .overview-policy-list { margin: 0; padding: 0; list-style: none; } html.ship-brand .overview-policy-list > li { position: relative; margin: 0 0 14px; padding-left: 1.15em; font-size: 16px; line-height: 1.78; color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand .overview-policy-list > li::before { content: "·"; position: absolute; left: 0; font-weight: 800; color: var(--accent-2); } html.ship-brand .overview-policy-list > li:last-child { margin-bottom: 0; } html.ship-brand .overview-policy-list > li > p { margin: 0 0 10px; font-size: inherit; line-height: inherit; color: inherit; } html.ship-brand .overview-policy-list > li > p:last-child { margin-bottom: 0; } html.ship-brand .overview-policy { padding: 22px 24px 20px; border-radius: var(--radius-md); border: 1px solid var(--line); border-left: 3px solid var(--accent-2); background: var(--fill-muted); box-shadow: 0 4px 20px rgba(0, 18, 35, 0.06); } html.ship-brand[data-theme="light"] .overview-policy { background: rgba(255, 255, 255, 0.97); border-color: rgba(15, 109, 181, 0.1); border-left-color: var(--accent-2); box-shadow: 0 3px 18px rgba(15, 50, 90, 0.06); } html.ship-brand .overview-sym-grid { margin-top: clamp(28px, 4vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; } @media (max-width: 720px) { html.ship-brand .overview-sym-grid { grid-template-columns: 1fr; } } html.ship-brand .overview-tile { margin: 0; display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: visible; padding: 22px 22px 20px; border-radius: var(--radius-md); border: 1px solid var(--line); border-top: 2px solid var(--accent); background: var(--fill-warm); box-shadow: 0 2px 16px rgba(0, 16, 32, 0.06); transition: box-shadow 0.2s ease, transform 0.2s ease; } html.ship-brand .overview-tile:hover { box-shadow: 0 6px 28px rgba(0, 16, 32, 0.1); transform: translateY(-2px); } html.ship-brand .overview-tile p { flex: 1 1 auto; margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand[data-theme="light"] .overview-tile { background: rgba(255, 255, 255, 0.98); border-color: rgba(15, 109, 181, 0.1); border-top-color: var(--accent); box-shadow: 0 2px 16px rgba(15, 50, 90, 0.06); } html.ship-brand[data-theme="light"] .overview-tile:hover { box-shadow: 0 6px 28px rgba(15, 50, 90, 0.1); } html.ship-brand .overview-tile-label { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; color: var(--accent); background: rgba(78, 176, 234, 0.1); border: 1px solid rgba(78, 176, 234, 0.22); } html.ship-brand[data-theme="light"] .overview-tile-label { background: rgba(15, 109, 181, 0.08); border-color: rgba(15, 109, 181, 0.2); } html.ship-brand .overview-tile h3 { margin: 0 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } html.ship-brand .overview-cross { padding: 18px 20px; border-radius: var(--radius-md); border: 1px dashed rgba(78, 176, 234, 0.35); background: var(--fill-ghost); } html.ship-brand .overview-cross p:last-child { margin-bottom: 0; } /* —— 正文卡片对比度（自主航行等 industry-panel / industry-rank） —— */ html.ship-brand .industry-panel { background: linear-gradient(135deg, rgba(58, 159, 217, 0.14), rgba(20, 55, 85, 0.35)), rgba(6, 24, 42, 0.55); border-color: rgba(120, 185, 230, 0.28); } html.ship-brand .industry-panel h3 { color: var(--text); } html.ship-brand .industry-panel > p { color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand .industry-rank article { border: 1px solid rgba(160, 200, 230, 0.38); background: linear-gradient(145deg, rgba(32, 78, 110, 0.55), rgba(12, 28, 44, 0.92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); } html.ship-brand .industry-rank strong { color: var(--text); } html.ship-brand .industry-rank span { color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand[data-theme="light"] .industry-panel { background: rgba(255, 255, 255, 0.98); border-color: rgba(15, 109, 181, 0.13); box-shadow: 0 2px 14px rgba(15, 50, 90, 0.05); } html.ship-brand[data-theme="light"] .industry-panel > p { color: var(--muted); } html.ship-brand[data-theme="light"] .industry-rank article { border-color: rgba(15, 109, 181, 0.14); background: linear-gradient(145deg, rgba(237, 247, 255, 0.96), rgba(255, 255, 255, 0.99)); box-shadow: 0 1px 8px rgba(15, 50, 90, 0.04); } html.ship-brand[data-theme="light"] .industry-rank span { color: var(--muted); } html.ship-brand:not([data-theme="light"]) .dark-section .industry-grid article p, html.ship-brand:not([data-theme="light"]) .dark-section .business-grid article p { color: var(--muted); } html.ship-brand:not([data-theme="light"]) .dark-section .industry-grid article span { color: var(--accent-2); } html.ship-brand[data-theme="light"] .dark-section .industry-grid article p, html.ship-brand[data-theme="light"] .dark-section .business-grid article p { color: var(--muted); } html.ship-brand .industry-grid article p, html.ship-brand .business-grid article p { word-break: normal; line-break: strict; overflow-wrap: break-word; } /* —— 需求清单：按分类分块 + 类内序号 —— */ html.ship-brand .req-catalog { margin-top: 4px; } html.ship-brand .req-catalog-lead { margin: 0 0 16px; max-width: none; width: 100%; box-sizing: border-box; font-size: 16px; line-height: 1.75; color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand .req-shell { display: flex; flex-direction: column; gap: 0; /* 切换分类时 scrollIntoView(block:start) 与固定顶栏对齐 */ scroll-margin-top: 96px; } /* 横向分类切换：吸顶，避免切分类时再滚回顶部 */ html.ship-brand .req-tab-rail { position: sticky; top: 0; z-index: 12; display: flex; align-items: stretch; gap: 8px; margin: 0 0 16px; padding: 10px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(0, 12, 24, 0.2); } html.ship-brand[data-theme="light"] .req-tab-rail { background: color-mix(in srgb, #ffffff 88%, transparent); box-shadow: 0 6px 22px rgba(20, 45, 70, 0.08); } html.ship-brand .req-tab-arrow { flex-shrink: 0; width: 40px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--metric-tile-bg); color: var(--text); font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } html.ship-brand .req-tab-arrow:hover { border-color: rgba(78, 176, 234, 0.55); background: rgba(78, 176, 234, 0.14); } html.ship-brand .req-tab-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } html.ship-brand .req-tab-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } html.ship-brand .req-tab-list { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 2px 4px; min-height: 44px; } html.ship-brand .req-tab { flex-shrink: 0; max-width: min(320px, 72vw); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } html.ship-brand[data-theme="light"] .req-tab { background: rgba(255, 255, 255, 0.82); } html.ship-brand .req-tab:hover { border-color: rgba(78, 176, 234, 0.45); background: rgba(78, 176, 234, 0.1); } html.ship-brand .req-tab.is-active { border-color: transparent; color: var(--text-on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 16px rgba(38, 125, 185, 0.28); } html.ship-brand .req-tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } /* 大类名末尾常为「需求」「导航」等，与条数角标紧挨易误读成「需求2」「导航1」 */ html.ship-brand .req-tab .req-tab-count { margin-left: 8px; flex-shrink: 0; } html.ship-brand .req-stage { position: relative; } html.ship-brand .req-tabpanel { padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: 0 8px 32px rgba(0, 12, 28, 0.12); } html.ship-brand[data-theme="light"] .req-tabpanel { background: rgba(255, 255, 255, 0.99); border-color: rgba(15, 109, 181, 0.1); box-shadow: 0 4px 24px rgba(15, 50, 90, 0.06); } html.ship-brand .req-cat-head { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } html.ship-brand .req-cat-title { margin: 0 0 6px; font-size: clamp(20px, 1.4vw, 24px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); } html.ship-brand .req-cat-meta { margin: 0; font-size: 14px; color: var(--muted); } html.ship-brand .req-cat-meta strong { color: var(--accent-2); font-weight: 800; } html.ship-brand .req-block-scroll { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.12); } html.ship-brand[data-theme="light"] .req-block-scroll { background: rgba(255, 255, 255, 0.65); } html.ship-brand .req-block-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; line-height: 1.58; } html.ship-brand .req-block-table thead th { padding: 12px 14px; text-align: left; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); background: rgba(10, 30, 48, 0.95); border-bottom: 1px solid var(--line); } html.ship-brand[data-theme="light"] .req-block-table thead th { background: rgba(225, 238, 248, 0.98); color: var(--text); } html.ship-brand .req-block-table tbody td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--muted); } html.ship-brand .req-block-table tbody tr:last-child td { border-bottom: none; } html.ship-brand .req-block-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); } html.ship-brand[data-theme="light"] .req-block-table tbody tr:nth-child(even) td { background: rgba(12, 93, 146, 0.04); } html.ship-brand .req-block-table .col-no { width: 56px; white-space: nowrap; font-weight: 800; color: var(--accent-2); } html.ship-brand .req-block-table .col-theme { width: 200px; font-weight: 700; color: var(--text); } html.ship-brand .req-block-table .col-sub { width: 150px; color: var(--faint); } html.ship-brand[data-theme="light"] .req-block-table .col-sub { color: var(--muted); } html.ship-brand .req-block-table .col-detail { min-width: 280px; color: var(--text); font-weight: 400; } /* 智能系统研发与数据应用类：需求主题列加宽，长主题单行显示 */ html.ship-brand .req-panel-wide-theme .req-block-table { min-width: 960px; } html.ship-brand .req-panel-wide-theme .req-block-table .col-theme { width: auto; min-width: 320px; white-space: nowrap; } html.ship-brand[data-theme="light"] .req-block-table .col-detail { color: var(--text); } @supports not (background: color-mix(in srgb, black 50%, white)) { html.ship-brand .req-tab-rail { background: var(--panel); } } @media (max-width: 720px) { html.ship-brand .req-tab { max-width: 85vw; font-size: 12px; } } /* ========== 全局宽度统一：section-heading 与内容 grid 等宽 ========== */ /* base styles.css 给 .section-heading 设置了 max-width:780px (.wide:980px) 导致标题区比下方 industry-grid/business-grid 窄，产生视觉错位。 统一覆盖为全宽；导语等子段落不再单独限宽，避免 CJK 在窄行内乱断。 */ html.ship-brand .section-heading, html.ship-brand .section-heading.wide { max-width: none; width: 100%; box-sizing: border-box; } /* 章节导语：与标题区同宽，避免窄行宽导致 CJK 在不恰当处断行 */ html.ship-brand .section-heading > p:not(.eyebrow) { max-width: none; width: 100%; box-sizing: border-box; word-break: normal; line-break: strict; overflow-wrap: break-word; } /* ========== 章节标题区对比度（深蓝底上 h2 / 导语可读） ========== */ html.ship-brand .section-heading h2 { color: var(--text); font-weight: 800; } html.ship-brand:not([data-theme="light"]) .section-heading p:not(.eyebrow) { color: #e4f2f9; } html.ship-brand[data-theme="light"] .section-heading p:not(.eyebrow) { color: #2a4258; } html.ship-brand:not([data-theme="light"]) .dark-section .section-heading p:not(.eyebrow) { color: #eaf4fa; } /* 非通栏章节标题区：左侧亮线 + 浅底，干净不笨重 */ html.ship-brand:not([data-theme="light"]) .section:not(.dark-section) > .section-heading { padding: 20px 24px 24px 28px; margin-bottom: clamp(28px, 3.5vw, 40px); border-radius: var(--radius-md); border: 1px solid rgba(78, 176, 234, 0.18); border-left: 3px solid var(--accent); background: linear-gradient(160deg, rgba(20, 50, 74, 0.72) 0%, rgba(10, 26, 42, 0.85) 100%); box-shadow: 0 4px 20px rgba(0, 8, 18, 0.18); } html.ship-brand[data-theme="light"] .section:not(.dark-section) > .section-heading { padding: 18px 22px 22px 26px; margin-bottom: clamp(28px, 3.5vw, 40px); border-radius: var(--radius-md); border: 1px solid rgba(15, 109, 181, 0.12); border-left: 3px solid var(--accent); background: linear-gradient(160deg, rgba(240, 248, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%); box-shadow: 0 3px 16px rgba(15, 40, 75, 0.05); } /* 通栏深色章节标题下分隔线 */ html.ship-brand:not([data-theme="light"]) .dark-section > .section-heading { padding-bottom: 6px; border-bottom: 1px solid rgba(78, 176, 234, 0.2); } html.ship-brand[data-theme="light"] .dark-section > .section-heading { padding-bottom: 6px; border-bottom: 1px solid rgba(15, 109, 181, 0.14); } /* 卡片内小标题：避免与正文糊成一片 */ html.ship-brand:not([data-theme="light"]) .industry-grid article h4, html.ship-brand:not([data-theme="light"]) .industry-group-title h4 { color: var(--text); } html.ship-brand:not([data-theme="light"]) .business-grid article h3 { color: var(--text); } html.ship-brand[data-theme="light"] .industry-panel h3, html.ship-brand[data-theme="light"] .industry-grid article h4, html.ship-brand[data-theme="light"] .industry-group-title h4 { color: var(--text); } /* ========== 工程全维规划表 + 科研全文（内容规划数据） ========== */ html.ship-brand .plan-matrix-root { margin-top: 8px; } html.ship-brand .plan-legend { margin: 0 0 18px; } html.ship-brand .plan-legend-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--fill-muted); font-size: 13px; color: var(--muted); } html.ship-brand .plan-legend-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-weight: 800; font-size: 11px; letter-spacing: 0.04em; } html.ship-brand .plan-legend-req { background: rgba(78, 176, 234, 0.16); color: var(--accent-2); } html.ship-brand .plan-legend-now { background: rgba(120, 190, 140, 0.16); color: #6a9e7a; } html.ship-brand[data-theme="light"] .plan-legend-now { color: #2d6a45; } html.ship-brand .plan-legend-gap { background: rgba(224, 164, 80, 0.2); color: var(--warning); } html.ship-brand .plan-legend-sol { background: rgba(138, 120, 220, 0.16); color: #b8a8e8; } html.ship-brand[data-theme="light"] .plan-legend-sol { color: #5c4ba3; } html.ship-brand .plan-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--fill-table-row); } html.ship-brand .plan-matrix-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 14px; } html.ship-brand .plan-matrix-table thead th { position: sticky; top: 0; z-index: 1; padding: 12px 12px; text-align: left; font-weight: 800; font-size: 12px; letter-spacing: 0.03em; color: var(--muted); background: var(--fill-band); border-bottom: 1px solid var(--line); } html.ship-brand .plan-matrix-table td { padding: 12px 12px; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--text); } html.ship-brand .plan-matrix-table .plan-row-head:hover td { background: rgba(78, 176, 234, 0.06); } html.ship-brand .plan-matrix-table .col-plan-no { width: 52px; font-weight: 800; color: var(--accent-2); } html.ship-brand .plan-matrix-table .col-plan-act { width: 88px; white-space: nowrap; } html.ship-brand .plan-matrix-table .plan-expand-btn { padding: 6px 12px; font-size: 13px; } html.ship-brand .plan-cell-req, html.ship-brand .plan-cell-now, html.ship-brand .plan-cell-path { display: block; line-height: 1.55; } html.ship-brand .plan-row-detail td { padding: 0; border-bottom: 1px solid var(--line); background: var(--fill-ghost); } html.ship-brand .plan-detail-body { padding: 16px 18px 20px; } html.ship-brand .plan-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 22px; } html.ship-brand .plan-dl-grid section { margin: 0; } html.ship-brand .plan-dl-grid h5 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-2); } html.ship-brand .plan-pre { margin: 0; font-size: 14px; line-height: 1.65; white-space: pre-wrap; color: var(--muted); } html.ship-brand .plan-solution .plan-pre { color: var(--text); } html.ship-brand .plan-gap-section { grid-column: 1 / -1; } html.ship-brand .plan-gap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 18px; margin-top: 8px; } html.ship-brand .plan-dt { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--warning); margin-bottom: 6px; } html.ship-brand .plan-dd { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--muted); } html.ship-brand .plan-cat-head .req-cat-title { font-size: clamp(18px, 1.4vw, 22px); } html.ship-brand .plan-tab .req-tab-count { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(78, 176, 234, 0.2); } html.ship-brand .research-plan-root { display: flex; flex-direction: column; gap: 22px; } html.ship-brand .research-plan-intro { margin: -8px 0 8px; max-width: none; width: 100%; box-sizing: border-box; font-size: 16px; line-height: 1.75; color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand .research-fallback { color: var(--danger); font-weight: 600; } html.ship-brand .research-deep-card { border-radius: var(--radius-lg); border: 1px solid var(--line); border-top: 2px solid var(--accent-2); background: var(--fill-muted); padding: 22px 24px 8px; box-shadow: 0 4px 24px rgba(0, 12, 28, 0.1); } html.ship-brand[data-theme="light"] .research-deep-card { background: rgba(255, 255, 255, 0.98); border-color: rgba(15, 109, 181, 0.1); border-top-color: var(--accent-2); box-shadow: 0 3px 18px rgba(15, 50, 90, 0.06); } html.ship-brand .research-deep-head { position: relative; margin: 0 0 16px; padding-left: 56px; min-height: 52px; } html.ship-brand .research-num { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 900; letter-spacing: 0.04em; color: var(--text-on-accent); background: linear-gradient(145deg, var(--accent), var(--accent-2)); } html.ship-brand .research-cat { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); } html.ship-brand .research-deep-head h3 { margin: 0 0 8px; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; color: var(--text); } html.ship-brand .research-sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); } html.ship-brand .research-sys { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--accent); } html.ship-brand .research-body { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); } html.ship-brand .research-sec { padding: 14px 0; border-bottom: 1px solid rgba(150, 195, 225, 0.18); } html.ship-brand[data-theme="light"] .research-sec { border-bottom-color: rgba(55, 95, 130, 0.12); } html.ship-brand .research-sec:last-child { border-bottom: none; } html.ship-brand .research-sec h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--text); } html.ship-brand .research-pre { margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-wrap; color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand .research-sol .research-pre { color: var(--text); } html.ship-brand .research-gap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 4px; } html.ship-brand .research-subhd { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--warning); margin-bottom: 8px; } html.ship-brand[data-theme="light"] main { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.35) 100%); } /* ========================================== 科研 Tab 面板（横向切换，复用 req-tab 样式） ========================================== */ html.ship-brand .research-tab-rail { margin-bottom: 20px; } html.ship-brand .research-tabpanel { padding: 0; border: none; background: none; box-shadow: none; } html.ship-brand .research-tabpanel.is-hidden { display: none; } /* Cards inside a research tab: 2-col grid on wide screen */ html.ship-brand .research-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 20px; } @media (max-width: 720px) { html.ship-brand .research-cards-grid { grid-template-columns: 1fr; } } /* ========================================== 岸基两格：船端三组 + 岸基两列 ========================================== */ html.ship-brand .systems-shore-grid.industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 680px) { html.ship-brand .systems-shore-grid.industry-grid { grid-template-columns: 1fr; } } /* 章节内四要点总结：固定两列（上二下二） */ html.ship-brand .module-summary-2x2.business-grid, html.ship-brand .module-summary-2x2.industry-rank { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 船端集成平台章节（菜单 08） */ html.ship-brand #platform { scroll-margin-top: 96px; } /* 岸基管控章节锚点（与菜单 09 一致） */ html.ship-brand #shore-control { scroll-margin-top: 96px; } @media (max-width: 640px) { html.ship-brand .module-summary-2x2.business-grid, html.ship-brand .module-summary-2x2.industry-rank { grid-template-columns: 1fr; } } /* ========================================== 七大系统卡片：可点击跳转对应章节 ========================================== */ html.ship-brand a.industry-card-link { display: block; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius-sm); outline-offset: 3px; } html.ship-brand a.industry-card-link article { height: 100%; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } html.ship-brand a.industry-card-link:hover article { border-color: rgba(78, 176, 234, 0.45); box-shadow: 0 8px 28px rgba(0, 12, 28, 0.12); transform: translateY(-2px); } html.ship-brand[data-theme="light"] a.industry-card-link:hover article { border-color: rgba(15, 109, 181, 0.28); box-shadow: 0 8px 28px rgba(15, 45, 80, 0.1); } /* ========================================== 工程表摘录：按列展开（module-detail） ========================================== */ html.ship-brand .module-detail-root { margin: clamp(20px, 3vw, 32px) 0 clamp(28px, 3.5vw, 40px); padding: clamp(18px, 2.5vw, 24px) clamp(18px, 2.5vw, 22px); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--fill-muted); box-shadow: 0 2px 16px rgba(0, 12, 24, 0.06); } html.ship-brand[data-theme="light"] .module-detail-root { background: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 14px rgba(15, 45, 80, 0.05); } /* —— 工程表摘录：横向大类 + 横向维度 + 限高面板 —— */ html.ship-brand .md-shell { display: flex; flex-direction: column; gap: 0; } html.ship-brand .md-rail { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 12px; margin: 0 -4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } html.ship-brand .md-rail::-webkit-scrollbar { display: none; width: 0; height: 0; } html.ship-brand .md-rail-maj { border-bottom: 1px solid var(--line); margin-bottom: 4px; } html.ship-brand .md-rail-maj-single { border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: visible; flex-wrap: wrap; } html.ship-brand .md-maj-single-label { font-size: 14px; font-weight: 800; color: var(--text); padding: 6px 2px 10px; letter-spacing: -0.02em; } html.ship-brand .md-rail-dim { padding-top: 4px; padding-bottom: 14px; } html.ship-brand .md-tab { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; margin: 0; border: 1px solid var(--line); background: var(--fill-ghost); color: var(--text); padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } html.ship-brand .md-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* 与科研 .req-tab.is-active 一致：渐变底 + 高对比字色，选中一眼可辨 */ html.ship-brand .md-tab-maj[aria-selected="true"], html.ship-brand .md-tab-dim[aria-selected="true"] { border-color: transparent; color: var(--text-on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 16px rgba(38, 125, 185, 0.32); font-weight: 800; } html.ship-brand[data-theme="light"] .md-tab-maj[aria-selected="true"], html.ship-brand[data-theme="light"] .md-tab-dim[aria-selected="true"] { border-color: transparent; color: var(--text-on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 18px rgba(15, 80, 130, 0.22); } html.ship-brand .md-tab-dim-title { font-weight: inherit; } html.ship-brand .md-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; padding: 0 6px; height: 20px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; background: rgba(78, 176, 234, 0.2); color: var(--accent-2); } html.ship-brand[data-theme="light"] .md-tab-count { background: rgba(15, 109, 181, 0.12); color: var(--accent); } html.ship-brand .md-tab-maj[aria-selected="true"] .md-tab-count, html.ship-brand .md-tab-dim[aria-selected="true"] .md-tab-count { background: rgba(255, 255, 255, 0.28); color: var(--text-on-accent); } html.ship-brand[data-theme="light"] .md-tab-maj[aria-selected="true"] .md-tab-count, html.ship-brand[data-theme="light"] .md-tab-dim[aria-selected="true"] .md-tab-count { background: rgba(255, 255, 255, 0.28); color: var(--text-on-accent); } html.ship-brand .md-panel { max-height: min(52vh, 440px); overflow: hidden; display: flex; flex-direction: column; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--fill-ghost); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } html.ship-brand[data-theme="light"] .md-panel { background: rgba(255, 255, 255, 0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } html.ship-brand .md-panel-meta { flex: 0 0 auto; margin: 0; padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); border-bottom: 1px solid var(--line); background: rgba(0, 12, 24, 0.12); } html.ship-brand[data-theme="light"] .md-panel-meta { background: rgba(15, 109, 181, 0.06); } html.ship-brand .md-panel-list-host { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } html.ship-brand .md-panel-empty { margin: 0; padding: 24px 8px; text-align: center; font-size: 14px; color: var(--muted); } html.ship-brand .md-panel-items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; counter-reset: mditem; } @media (max-width: 760px) { html.ship-brand .md-panel-items { grid-template-columns: 1fr; } } html.ship-brand .md-panel-items li { counter-increment: mditem; margin: 0; padding: 10px 12px 10px 38px; position: relative; border-radius: 10px; border: 1px solid var(--line); background: var(--fill-muted); font-size: 13px; line-height: 1.55; color: var(--muted); word-break: normal; line-break: strict; overflow-wrap: break-word; } html.ship-brand .md-panel-items li::before { content: counter(mditem); position: absolute; left: 10px; top: 11px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 11px; font-weight: 900; color: var(--accent-2); background: rgba(78, 176, 234, 0.16); } html.ship-brand[data-theme="light"] .md-panel-items li::before { color: var(--accent); background: rgba(15, 109, 181, 0.1); } html.ship-brand .md-rail-empty { font-size: 13px; color: var(--muted); padding: 8px 4px; white-space: normal; } @media print { html.ship-brand .md-panel { max-height: none; overflow: visible; } html.ship-brand .md-panel-list-host { overflow: visible; } }