@font-face { font-family: "Space Grotesk"; src: url("vendor/fonts/SpaceGrotesk-Variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; } /* MeetSync · topic.css * ============================================================================ * 视觉真源：design/design-tokens.json（实时参会旅程 · approved v2） * 结构约定： * 1. 所有颜色/圆角/阴影/间距只允许从 var(--ms-*) 读取，页面里禁止硬编码色值。 * 2. 深浅主题通过 切换，变量成对定义。 * 3. 组件类名保持稳定：.ms-* 前缀即组件契约锚点。 * 方向纪律：暖象牙底、近黑信息、日光橙主行动、草绿色成功、深蓝辅助； * 时间与双时区是视觉主轴。形式语言＝票据（approved v3）：场次/预约/凭证同属一个 * 「票」母题，按密度分紧凑票 / 标准票 / 完整票三档；穿孔、撕裂虚线、MRZ 与落章 * 是该母题的固有特征，不是装饰。卡片是特权容器，不是默认容器——见文末容器分级段。 * ============================================================================ */ /* ---------- 主题变量：浅色 ---------- */ :root, [data-theme="light"] { --ms-bg: #f5f7fb; --ms-surface: #ffffff; --ms-card: #ffffff; --ms-surface-2: #f1f3f5; --ms-surface-3: #e9ecef; --ms-console: #20252a; --ms-console-fg: #ffffff; --ms-fg: #20252a; --ms-fg-2: #495057; --ms-muted: #55606a; --ms-faint: #616c76; --ms-border: #dce1e7; --ms-border-strong: #b8c0c8; --ms-navy: #20252a; --ms-navy-on: #ffffff; /* color.navyOn */ --ms-action: #b93808; --ms-action-fg: #ffffff; --ms-accent: #b93808; --ms-accent-fg: #ffffff; --ms-accent-soft: #fff0e6; --ms-ok: #247a36; --ms-ok-soft: #e9f4e8; --ms-warn: #9a5a09; --ms-warn-soft: #fff3d9; --ms-danger: #b92c35; --ms-danger-soft: #fcebed; --ms-info: #2457a6; --ms-info-soft: #eaf0fb; --ms-ai: #b93808; --ms-ai-soft: #fff4e6; --ms-void: #6b6b70; /* color.void · VOID 作废章中性灰（≥4.5:1 于白票面） */ --ms-mrz-bg: #f5f5f7; /* color.mrzBg */ --ms-mrz-ink: #6e6e73; /* color.mrzInk */ --ms-scan-plate: #ffffff; /* color.scanBg · 恒定白底 */ --ms-scan-ink: #1d1d1f; /* color.scanInk · 恒定黑码 */ --ms-guilloche: transparent; --ms-shadow-1: 0 1px 2px rgba(32, 37, 42, .04); --ms-shadow-2: 0 16px 36px rgba(32, 37, 42, .12); --ms-scrim: rgba(0, 0, 0, .40); } /* ---------- 主题变量：深色 ---------- */ [data-theme="dark"] { --ms-bg: #0f0f0d; --ms-surface: #171714; --ms-card: #1e1e1a; --ms-surface-2: #282721; --ms-surface-3: #333128; --ms-console: #090908; --ms-console-fg: #ffffff; --ms-fg: #fffdf8; --ms-fg-2: #d8d2c7; --ms-muted: #aaa397; --ms-faint: #9a9489; --ms-border: #3e3b34; --ms-border-strong: #625d52; --ms-navy: #000000; --ms-navy-on: #ffffff; --ms-action: #c94b16; --ms-action-fg: #ffffff; --ms-accent: #ff7438; --ms-accent-fg: #171714; --ms-accent-soft: #48200f; --ms-ok: #30d158; --ms-ok-soft: #11301a; --ms-warn: #ff9f0a; --ms-warn-soft: #33240a; --ms-danger: #ff453a; --ms-danger-soft: #3a1512; --ms-info: #7fa7ef; --ms-info-soft: #172746; --ms-ai: #d8d2c7; --ms-ai-soft: #282721; --ms-void: #7a7a7f; --ms-mrz-bg: #1d1d1f; --ms-mrz-ink: #a1a1a6; --ms-scan-plate: #ffffff; --ms-scan-ink: #1d1d1f; --ms-guilloche: transparent; --ms-shadow-1: none; --ms-shadow-2: 0 16px 38px rgba(0, 0, 0, .38); --ms-scrim: rgba(0, 0, 0, .6); } /* ---------- 尺度 ---------- */ :root { /* radius：只留四档 + pill，档间不插值 */ --ms-r-sm: 5px; --ms-r: 7px; --ms-r-lg: 9px; --ms-r-pill: 9999px; /* space：8 基数 */ --ms-s1: 4px; --ms-s2: 8px; --ms-s3: 12px; --ms-s4: 16px; --ms-s5: 20px; --ms-s6: 24px; --ms-s7: 32px; --ms-s8: 48px; /* type：1.25 模数梯级 10/11/12/13/15/17/21/24/28/34，字重只用 300/400/600/700 */ --ms-fs-micro: 10px; --ms-fs-xs: 11px; --ms-fs-sm: 13px; --ms-fs-md: 15px; --ms-fs-lg: 17px; --ms-fs-xl: 21px; --ms-fs-2xl: 28px; --ms-ls-display: -0.374px; /* ≥21px 一律负字距；≤12px 不加 */ --ms-ls-caps: 1.2px; --ms-ls-mrz: 2.1px; --ms-ls-seal: 2.4px; --ms-font: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Inter, "Noto Sans SC", sans-serif; --ms-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; --ms-header-h: 52px; --ms-tabbar-h: 58px; --ms-demobar-h: 70px; /* 形态尺度（design-tokens.formScale，mobile 基准；>=1280 段整组放大） */ --ms-fs-stub-title: 17px; --ms-fs-time-hero: 28px; --ms-fs-time-venue: 17px; --ms-fs-checkin-big: 21px; --ms-fs-meter: 28px; --ms-fs-counter: 34px; --ms-stamp-size: 116px; --ms-qr-size: 160px; --ms-qr-stub: 104px; --ms-scan-frame: 132px; /* 票根几何 */ --ms-stub-notch: 14px; --ms-stub-tail: 132px; --ms-stub-band: 6px; /* motion：统一 ease-out，无回弹 */ --ms-ease: cubic-bezier(.2, .8, .2, 1); --ms-ease-scan: cubic-bezier(.4, 0, .6, 1); --ms-dur-press: 120ms; --ms-dur-thump: 180ms; --ms-dur-slide: 340ms; --ms-dur-stamp: 420ms; --ms-dur-void: 520ms; --ms-dur-scan: 2200ms; } /* 把引擎 theme.css 的通用 token 桥接到本题变量，保证 base.css 组件同步换肤 */ :root { --bg: var(--ms-bg); --surface: var(--ms-surface); --surface-2: var(--ms-surface-2); --fg: var(--ms-fg); --muted: var(--ms-muted); --border: var(--ms-border); --brand: var(--ms-accent); --brand-2: var(--ms-info); --accent: var(--ms-ok); --danger: var(--ms-danger); --warn: var(--ms-warn); --radius: var(--ms-r); --radius-lg: var(--ms-r-lg); --radius-sm: var(--ms-r-sm); --shadow: var(--ms-shadow-1); --shadow-lg: var(--ms-shadow-2); --font: var(--ms-font); } html, body { background: var(--ms-bg); color: var(--ms-fg); } body { font-size: var(--ms-fs-md); line-height: 1.47; letter-spacing: -0.2px; } /* 覆盖 base.css 的 480px 手机画布：本题为响应式双形态，桌面走全宽 */ .h5-app { max-width: none; width: 100%; background: var(--ms-bg); } /* ============================================================================ * 布局骨架 · 响应式双形态 * 移动 (<1280px)：单列滚动流 + 顶部 sticky header + 底部 tabbar * 桌面 (>=1280px)：左侧常驻导航 + 主内容区多栏栅格，tabbar 隐藏 * 1280 是唯一形态切换点；768–1279 只居中放宽，不改导航与分栏。 * 断点用 min-width 递进，移动样式即基线，不写 max-width 覆盖回退。 * ========================================================================== */ .ms-shell { display: block; min-height: 100vh; padding-bottom: calc(var(--ms-tabbar-h) + 12px); } /* 移动端控制条允许换行成两行，避免 390px 下横向溢出；桌面端单行 */ .ms-demobar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--ms-s2); min-height: var(--ms-demobar-h); padding: 6px var(--ms-s3); background: var(--ms-surface-3); border-bottom: 1px solid var(--ms-border); font-size: var(--ms-fs-xs); color: var(--ms-fg-2); } .ms-demobar .ms-demobar-brand { display: none; } .ms-demobar .ms-demobar-right { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--ms-s2); min-width: 0; } .ms-demobar > *, .ms-demobar-right > * { flex: none; } .ms-header { position: sticky; top: var(--ms-demobar-h); z-index: 30; display: flex; align-items: center; gap: var(--ms-s2); min-height: var(--ms-header-h); padding: var(--ms-s2) var(--ms-s4); background: var(--ms-surface); border-bottom: 1px solid var(--ms-border); } .ms-header .ms-title { font-size: var(--ms-fs-xl); font-weight: 600; line-height: 1.19; letter-spacing: var(--ms-ls-display); } .ms-header .ms-sub { font-size: var(--ms-fs-xs); color: var(--ms-muted); } .ms-header .ms-actions { margin-left: auto; display: flex; align-items: center; gap: var(--ms-s1); } .ms-page { padding: var(--ms-s4); display: flex; flex-direction: column; gap: var(--ms-s3); } /* 侧边导航：移动端隐藏，桌面端常驻 */ .ms-sidenav { display: none; } .ms-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: var(--ms-tabbar-h); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--ms-surface); border-top: 1px solid var(--ms-border); } .ms-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--ms-fs-xs); color: var(--ms-muted); } .ms-tabbar a[aria-current="page"] { color: var(--ms-accent); font-weight: 700; } /* ---- 响应式栅格原语：移动单列 → 桌面分栏，页面里只用这几个类 ---- */ .ms-grid-2, .ms-grid-3, .ms-split, .ms-split-wide { display: grid; gap: var(--ms-s3); grid-template-columns: minmax(0, 1fr); } .ms-aside { display: contents; } /* ============================ 通用组件 ============================ */ .ms-card { background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); padding: var(--ms-s5) var(--ms-s4); box-shadow: var(--ms-shadow-1); /* level1 = none */ } .ms-card.is-flat { box-shadow: none; } .ms-card-head { display: flex; align-items: flex-start; gap: var(--ms-s2); margin-bottom: var(--ms-s2); } .ms-card-title { font-size: var(--ms-fs-xl); font-weight: 600; line-height: 1.19; letter-spacing: var(--ms-ls-display); } .ms-card-sub { font-size: var(--ms-fs-sm); color: var(--ms-muted); } .ms-section-title { display: flex; align-items: center; gap: var(--ms-s2); font-size: var(--ms-fs-sm); font-weight: 700; color: var(--ms-fg-2); margin: var(--ms-s3) 0 0; } .ms-section-title .ms-more { margin-left: auto; font-size: var(--ms-fs-xs); color: var(--ms-muted); font-weight: 500; } .ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-s1); padding: 10px 18px; min-height: 40px; border-radius: var(--ms-r-sm); border: 1px solid var(--ms-border); background: var(--ms-surface); color: var(--ms-accent); font-size: var(--ms-fs-md); font-weight: 400; cursor: pointer; transition: transform var(--ms-dur-press) ease-out; } .ms-btn:active:not(:disabled) { transform: scale(.95); } /* effect.press · Apple 系统级 */ .ms-btn:disabled { color: var(--ms-faint); cursor: not-allowed; } .ms-btn-primary { background: var(--ms-action); color: var(--ms-action-fg); border-color: var(--ms-action); font-weight: 400; } .ms-btn-ghost { background: transparent; border-color: transparent; color: var(--ms-accent); } .ms-btn-danger { background: var(--ms-danger-soft); color: var(--ms-danger); border-color: transparent; } .ms-btn-block { width: 100%; } .ms-btn-sm { min-height: 30px; padding: 5px 10px; font-size: var(--ms-fs-sm); } .ms-btn-row { display: flex; gap: var(--ms-s2); flex-wrap: wrap; } .ms-btn-row > .ms-btn { flex: 1 1 0; min-width: 0; } .ms-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--ms-r-pill); background: var(--ms-surface-2); color: var(--ms-muted); font-size: var(--ms-fs-xs); font-weight: 600; white-space: nowrap; } .ms-chip[data-tone="ok"] { background: var(--ms-ok-soft); color: var(--ms-ok); } .ms-chip[data-tone="warn"] { background: var(--ms-warn-soft); color: var(--ms-warn); } .ms-chip[data-tone="danger"] { background: var(--ms-danger-soft); color: var(--ms-danger); } .ms-chip[data-tone="info"] { background: var(--ms-info-soft); color: var(--ms-info); } .ms-chip[data-tone="ai"] { background: var(--ms-ai-soft); color: var(--ms-ai); } .ms-chip-row { display: flex; gap: var(--ms-s1); flex-wrap: wrap; } .ms-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--ms-surface-2); border-radius: var(--ms-r-sm); } .ms-seg button { border: 0; background: transparent; color: var(--ms-muted); cursor: pointer; padding: 4px 10px; border-radius: calc(var(--ms-r-sm) - 2px); font-size: var(--ms-fs-xs); font-weight: 600; } .ms-seg button[aria-pressed="true"] { background: var(--ms-surface); color: var(--ms-fg); box-shadow: var(--ms-shadow-1); } .ms-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--ms-border); border-radius: var(--ms-r-sm); background: var(--ms-surface); color: var(--ms-fg-2); cursor: pointer; } .ms-field { display: flex; flex-direction: column; gap: var(--ms-s1); } .ms-field label { font-size: var(--ms-fs-sm); font-weight: 600; color: var(--ms-fg-2); } .ms-field .ms-hint { font-size: var(--ms-fs-xs); color: var(--ms-muted); } .ms-input, .ms-select, .ms-textarea { width: 100%; padding: 11px 14px; border-radius: var(--ms-r-sm); border: 1px solid var(--ms-border); background: var(--ms-surface-2); color: var(--ms-fg); font-size: var(--ms-fs-md); } .ms-input::placeholder, .ms-textarea::placeholder { color: var(--ms-faint); } .ms-textarea { min-height: 76px; resize: vertical; } .ms-list { display: flex; flex-direction: column; gap: var(--ms-s2); } .ms-row { display: flex; align-items: center; gap: var(--ms-s2); } .ms-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-s2); } .ms-stack { display: flex; flex-direction: column; gap: var(--ms-s2); min-width: 0; } .ms-stack > * { min-width: 0; } .ms-grow { flex: 1 1 auto; min-width: 0; } .ms-muted { color: var(--ms-muted); font-size: var(--ms-fs-sm); } .ms-xs { font-size: var(--ms-fs-xs); color: var(--ms-muted); } .ms-strong { font-weight: 700; } .ms-num { font-family: var(--ms-font-mono); font-variant-numeric: tabular-nums; } /* 双时区时间块（REQ-003 / AC-002 的结构锚点） */ .ms-tz { display: flex; flex-direction: column; gap: 2px; } .ms-tz-primary { display: flex; align-items: baseline; gap: 6px; font-size: var(--ms-fs-lg); font-weight: 700; } .ms-tz-primary .ms-tz-abbr { font-size: var(--ms-fs-xs); font-weight: 600; color: var(--ms-muted); } .ms-tz-secondary { display: flex; align-items: baseline; gap: 6px; font-size: var(--ms-fs-sm); color: var(--ms-muted); } .ms-tz-daymark { color: var(--ms-warn); font-size: var(--ms-fs-xs); font-weight: 700; } /* 参会旅程主视觉：双时区并列、时间优先、轨道串联。 */ .ms-journey-hero { position: relative; overflow: hidden; padding: var(--ms-s5); border-radius: var(--ms-r-lg); background: var(--ms-fg); color: var(--ms-surface); } .ms-journey-hero::after { content: ""; position: absolute; width: 180px; height: 180px; right: -72px; top: -88px; border-radius: 50%; background: var(--ms-accent); opacity: .92; } .ms-journey-kicker { display: flex; align-items: center; gap: var(--ms-s2); color: var(--ms-surface-3); font-size: var(--ms-fs-sm); } .ms-journey-clocks { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: end; gap: var(--ms-s2); margin: var(--ms-s5) 0; position: relative; z-index: 1; } .ms-journey-clocks > div { display: flex; flex-direction: column; gap: 2px; } .ms-journey-clocks strong { font-size: clamp(32px, 8vw, 58px); line-height: .95; letter-spacing: -.06em; } .ms-journey-clocks i { width: 100%; height: 2px; margin-bottom: 14px; background: var(--ms-ok); } .ms-journey-next { display: flex; justify-content: space-between; gap: var(--ms-s3); color: var(--ms-surface-3); font-size: var(--ms-fs-xs); position: relative; z-index: 1; } .ms-journey-next span:first-child { color: var(--ms-surface); font-weight: 700; } .ms-session-row, .ms-journey-stop { position: relative; padding-left: calc(var(--ms-s4) + 12px); } .ms-session-row::before, .ms-journey-stop::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ms-accent); border-radius: var(--ms-r-lg) 0 0 var(--ms-r-lg); } .ms-session-row[data-track="trk-data"]::before, .ms-journey-stop[data-track="trk-data"]::before, .ms-session-row[data-track="trk-policy"]::before, .ms-journey-stop[data-track="trk-policy"]::before { background: var(--ms-info); } .ms-session-row[data-track="trk-health"]::before, .ms-journey-stop[data-track="trk-health"]::before, .ms-session-row[data-track="trk-urban"]::before, .ms-journey-stop[data-track="trk-urban"]::before { background: var(--ms-ok); } .ms-journey-stop .ms-tz-primary { font-size: var(--ms-fs-xl); } .ms-journey-list { position: relative; } .ms-journey-list::before { content: ""; position: absolute; left: 2px; top: 42px; bottom: 10px; width: 1px; background: var(--ms-border-strong); } /* AI 区块：所有 AI 产出必须带 .ms-ai-block 以便 QA 检出可感知标识 */ .ms-ai-block { border: 1px solid var(--ms-ai); border-radius: var(--ms-r); background: var(--ms-ai-soft); padding: var(--ms-s3); } .ms-ai-head { display: flex; align-items: center; gap: var(--ms-s1); font-size: var(--ms-fs-xs); font-weight: 700; color: var(--ms-ai); margin-bottom: var(--ms-s2); } .ms-ai-head .ms-more { margin-left: auto; } .ms-ai-reason { font-size: var(--ms-fs-sm); color: var(--ms-fg-2); line-height: 1.55; } .ms-banner { display: flex; gap: var(--ms-s2); padding: var(--ms-s3); border-radius: var(--ms-r-sm); font-size: var(--ms-fs-sm); line-height: 1.5; } .ms-banner[data-tone="warn"] { background: var(--ms-warn-soft); color: var(--ms-warn); } .ms-banner[data-tone="danger"] { background: var(--ms-danger-soft); color: var(--ms-danger); } .ms-banner[data-tone="ok"] { background: var(--ms-ok-soft); color: var(--ms-ok); } .ms-banner[data-tone="info"] { background: var(--ms-info-soft); color: var(--ms-info); } .ms-progress { height: 6px; border-radius: var(--ms-r-pill); background: var(--ms-surface-3); overflow: hidden; } .ms-progress > i { display: block; height: 100%; background: var(--ms-accent); } .ms-skeleton { background: var(--ms-surface-2); border-radius: var(--ms-r-sm); height: 14px; } .ms-skeleton.is-block { height: 78px; } .ms-empty { text-align: center; padding: var(--ms-s6) var(--ms-s4); color: var(--ms-muted); } .ms-empty .ms-empty-title { font-size: var(--ms-fs-lg); font-weight: 700; color: var(--ms-fg); margin: var(--ms-s2) 0 var(--ms-s1); } .ms-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-s2); } .ms-kpi { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-r); padding: var(--ms-s3); } .ms-kpi .ms-kpi-v { font-size: var(--ms-fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .ms-kpi .ms-kpi-l { font-size: var(--ms-fs-xs); color: var(--ms-muted); } .ms-kpi-hero { font-size: var(--ms-fs-meter); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; margin: var(--ms-s2) 0; } /* ==================== 动态参会凭证：无票根/护照隐喻 ==================== */ .ms-stub { position: relative; min-width: 0; overflow: hidden; background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); box-shadow: none; } .ms-stub.is-active { box-shadow: var(--ms-shadow-2); } .ms-stub-band { height: 8px; background: linear-gradient(90deg, var(--ms-accent) 0 58%, var(--ms-ok) 58% 100%); } .ms-stub-head { display: flex; align-items: center; gap: var(--ms-s2); padding: var(--ms-s4) var(--ms-s4) 0; } .ms-stub-body { padding: var(--ms-s4); display: flex; flex-direction: column; gap: var(--ms-s3); } .ms-stub-title { font-size: var(--ms-fs-stub-title); font-weight: 700; line-height: 1.2; letter-spacing: var(--ms-ls-display); } .ms-stub-time { font-family: var(--ms-font-mono); font-size: var(--ms-fs-time-hero); font-weight: 700; line-height: 1.05; letter-spacing: var(--ms-ls-display); font-variant-numeric: tabular-nums; } .ms-stub-time-venue { font-family: var(--ms-font-mono); font-size: var(--ms-fs-time-venue); color: var(--ms-muted); font-variant-numeric: tabular-nums; } .ms-stub-tail { min-height: var(--ms-stub-tail); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--ms-s4); padding: var(--ms-s4); background: var(--ms-surface-2); border-top: 1px solid var(--ms-border); } .ms-stub-tail .ms-qr { width: var(--ms-qr-stub); } .ms-qr-void { width: calc(var(--ms-qr-stub) + var(--ms-s3) * 2); aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--ms-r); background: var(--ms-surface-2); border: 1px dashed var(--ms-border-strong); color: var(--ms-muted); } /* perf / mrz / texture 的实现见文末「票据形式语言」段（approved v3 重新启用） */ /* 作废态：存根与 QR 降透明，母题结构保持可读 */ .ms-stub[data-status="expired"] .ms-stub-tail, .ms-stub[data-status="cancelled"] .ms-stub-tail { color: var(--ms-muted); } .ms-stub[data-status="expired"] .ms-stub-tail .ms-qr-plate, .ms-stub[data-status="cancelled"] .ms-stub-tail .ms-qr-plate { opacity: .22; } .ms-stub[data-status="expired"] .ms-stub-tail .ms-num, .ms-stub[data-status="cancelled"] .ms-stub-tail .ms-num { text-decoration: line-through; } /* 核验反馈是轻量状态签条；420ms 单次落定，不回弹。 */ .ms-stamp { position: absolute; right: var(--ms-s4); top: 54px; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid currentColor; border-radius: var(--ms-r-pill); font-weight: 700; letter-spacing: .02em; font-size: var(--ms-fs-xs); pointer-events: none; z-index: 2; } .ms-stamp[data-stamp="stamped"] { color: var(--ms-ok); animation: ms-stamp-drop var(--ms-dur-stamp) var(--ms-ease) both; } .ms-stamp[data-stamp="void"] { color: var(--ms-danger); animation: ms-stamp-drop var(--ms-dur-stamp) var(--ms-ease) both; } .ms-stamp[data-stamp="pending"] { display: none; } @keyframes ms-stamp-drop { 0% { opacity: 0; transform: translateY(-5px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ---- 扫描线：核销台扫码区的进行中反馈 ---- */ .ms-scanline { position: absolute; left: 8%; right: 8%; top: 0; height: 2px; background: currentColor; opacity: .55; border-radius: var(--ms-r-pill); animation: ms-scan 2.2s var(--ms-ease) infinite; } @keyframes ms-scan { 0%, 100% { transform: translateY(6px); opacity: .15; } 50% { transform: translateY(calc(var(--ms-scan-frame) - 6px)); opacity: .6; } } /* ---- QR 点阵 ---- */ .ms-qr { display: grid; grid-template-columns: repeat(21, 1fr); width: var(--ms-qr-size); aspect-ratio: 1; gap: 0; } .ms-qr i { display: block; aspect-ratio: 1; } .ms-qr i[data-on="1"] { background: var(--ms-fg); } /* 扫码白区：两种主题下恒定白底黑码（design-tokens 规则） */ .ms-qr-plate { padding: var(--ms-s3); border-radius: var(--ms-r); background: var(--ms-scan-plate); } .ms-qr-plate .ms-qr i[data-on="1"] { background: var(--ms-scan-ink); } /* 热力带（求解器） */ .ms-heat-track { min-width: 340px; } .ms-heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; } .ms-heat i { display: block; height: 22px; border-radius: 2px; background: var(--ms-surface-3); } .ms-heat i[data-level="1"] { background: var(--ms-info-soft); } .ms-heat i[data-level="2"] { background: var(--ms-info); } .ms-heat i[data-level="3"] { background: var(--ms-ok); } .ms-heat-axis { display: grid; grid-template-columns: repeat(24, 1fr); font-size: 8px; color: var(--ms-muted); text-align: center; } .ms-candidate { border-left: 5px solid var(--ms-info); border-radius: var(--ms-r); } .ms-candidate .ms-row.ms-xs { padding: 4px 0; border-bottom: 1px solid var(--ms-border); } .ms-table { width: 100%; border-collapse: collapse; font-size: var(--ms-fs-sm); } .ms-table th, .ms-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--ms-border); } .ms-table th { color: var(--ms-muted); font-weight: 600; font-size: var(--ms-fs-xs); } .ms-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ms-timeline { display: flex; flex-direction: column; gap: var(--ms-s3); padding-left: var(--ms-s3); border-left: 2px solid var(--ms-border); } .ms-timeline > div { position: relative; } .ms-timeline > div::before { content: ""; position: absolute; left: calc(var(--ms-s3) * -1 - 5px); top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ms-border-strong); } .ms-switch { display: inline-flex; align-items: center; gap: var(--ms-s2); cursor: pointer; font-size: var(--ms-fs-sm); } .ms-switch input { width: 34px; height: 20px; } .ms-divider { height: 1px; background: var(--ms-border); margin: var(--ms-s2) 0; } .ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ic { flex: none; } /* 核销台：移动端为竖排，桌面端升格为双屏终端（见 >=1024 段） */ .ms-console { display: grid; gap: var(--ms-s3); grid-template-columns: 1fr; } .ms-scanpad { display: grid; place-items: center; gap: var(--ms-s2); text-align: center; min-height: 180px; padding: var(--ms-s5); border: 1px solid var(--ms-border-strong); border-radius: var(--ms-r-lg); background: var(--ms-console); color: var(--ms-console-fg); cursor: pointer; } .ms-scanpad .ms-xs { color: var(--ms-console-fg); } /* 扫码取景框：四角标记 + 扫描线，白底黑码恒定 */ .ms-scanframe { position: relative; width: var(--ms-scan-frame); height: var(--ms-scan-frame); display: grid; place-items: center; color: var(--ms-accent); background: var(--ms-scan-plate); border-radius: var(--ms-r); box-shadow: inset 0 0 0 2px currentColor; } .ms-scanframe > svg { color: var(--ms-scan-ink); } .ms-scanresult { display: grid; place-items: center; gap: var(--ms-s2); text-align: center; min-height: 150px; padding: var(--ms-s4); border-radius: var(--ms-r-lg); } .ms-scanresult[data-result="success"] { background: var(--ms-ok-soft); color: var(--ms-ok); } .ms-scanresult[data-result="duplicate"] { background: var(--ms-warn-soft); color: var(--ms-warn); } .ms-scanresult[data-result="void"] { background: var(--ms-danger-soft); color: var(--ms-danger); } .ms-scanresult[data-result="offline"] { background: var(--ms-info-soft); color: var(--ms-info); } .ms-scanresult .ms-scanverdict { font-size: var(--ms-fs-xl); font-weight: 800; letter-spacing: .02em; } .ms-counter { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } /* ============================================================================ * 平板 768–1279px：非形态切换点。按 design-tokens.breakpoints.tablet「沿用移动 * 单列并居中放宽」，这里只做容器居中与留白放大，不改导航、不开分栏。 * ========================================================================== */ @media (min-width: 768px) { :root { --ms-s4: 18px; --ms-s5: 24px; } .ms-page { padding: var(--ms-s5); max-width: 680px; margin: 0 auto; width: 100%; } .ms-header, .ms-demobar { padding-inline: max(var(--ms-s5), calc((100% - 680px) / 2)); } } /* ============================================================================ * 唯一形态切换点 >=1280px（design-tokens.breakpoints.mediaQuery） * 移动单列 + 底部 tabbar → 多栏应用窗 + 左侧常驻导航。 * 组件内部不再自设断点：所有形态差异集中在本段。 * ========================================================================== */ @media (min-width: 1280px) { :root { --ms-header-h: 60px; --ms-fs-md: 15px; --ms-fs-2xl: 30px; --ms-demobar-h: 46px; --ms-stub-notch: 18px; --ms-stamp-size: 158px; --ms-qr-size: 132px; --ms-scan-frame: 168px; } .ms-demobar { flex-wrap: nowrap; } .ms-demobar .ms-demobar-right { flex-wrap: nowrap; } .ms-header, .ms-demobar { padding-inline: var(--ms-s5); } .ms-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-areas: "demobar demobar" "sidenav main"; grid-template-rows: auto minmax(0, 1fr); padding-bottom: 0; } .ms-demobar { grid-area: demobar; padding: 0 var(--ms-s5); } .ms-demobar .ms-demobar-brand { display: flex; align-items: center; gap: var(--ms-s2); font-weight: 700; font-size: var(--ms-fs-sm); color: var(--ms-fg); } .ms-tabbar { display: none; } .ms-sidenav { grid-area: sidenav; display: flex; flex-direction: column; gap: 2px; padding: var(--ms-s4) var(--ms-s3); border-right: 1px solid var(--ms-border); background: var(--ms-surface); position: sticky; top: var(--ms-demobar-h); height: calc(100vh - var(--ms-demobar-h)); overflow-y: auto; } .ms-sidenav .ms-navgroup { font-size: var(--ms-fs-xs); font-weight: 700; color: var(--ms-muted); padding: var(--ms-s3) var(--ms-s3) var(--ms-s1); } .ms-sidenav a { display: flex; align-items: center; gap: var(--ms-s2); padding: 9px var(--ms-s3); border-radius: var(--ms-r-sm); color: var(--ms-fg-2); font-size: var(--ms-fs-md); font-weight: 600; } .ms-sidenav a[aria-current="page"] { background: var(--ms-accent-soft); color: var(--ms-fg); } .ms-sidenav .ms-navmeta { margin-top: auto; padding: var(--ms-s3); font-size: var(--ms-fs-xs); color: var(--ms-muted); line-height: 1.6; } .ms-main { grid-area: main; min-width: 0; } .ms-header { top: var(--ms-demobar-h); padding: var(--ms-s3) var(--ms-s5); } .ms-header .ms-title { font-size: var(--ms-fs-xl); } .ms-page { padding: var(--ms-s5) var(--ms-s6); max-width: 1320px; margin: 0 auto; } /* 栅格原语在此一次性展开（design-tokens.formLayout.grid） */ .ms-grid-2 { grid-template-columns: 1fr 1fr; } .ms-grid-3 { grid-template-columns: repeat(3, 1fr); } .ms-kpi-grid { grid-template-columns: repeat(4, 1fr); } .ms-split { grid-template-columns: minmax(0, 1fr) 348px; align-items: start; } .ms-split-wide { grid-template-columns: 252px minmax(0, 1fr); align-items: start; } .ms-aside { display: flex; flex-direction: column; gap: var(--ms-s3); position: sticky; top: calc(var(--ms-demobar-h) + var(--ms-header-h) + var(--ms-s4)); } .ms-sticky-col { position: sticky; top: calc(var(--ms-demobar-h) + var(--ms-header-h) + var(--ms-s4)); } /* 核销台终端 / 运营控制台三栏 */ .ms-console { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--ms-s5); } .ms-ops-3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 300px; gap: var(--ms-s4); align-items: start; } .ms-scanpad { min-height: 300px; } .ms-scanresult { min-height: 240px; } .ms-scanresult .ms-scanverdict { font-size: var(--ms-fs-checkin-big); } .ms-counter { font-size: var(--ms-fs-counter); } .ms-kpi .ms-kpi-v { font-size: var(--ms-fs-meter); } .ms-stub-title { font-size: var(--ms-fs-stub-title); } .ms-stub-time { font-size: var(--ms-fs-time-hero); } .ms-stub-time-venue { font-size: var(--ms-fs-time-venue); } } /* 桌面 hover 基线：仅真实指针设备生效，不影响触屏 */ @media (hover: hover) and (pointer: fine) { .ms-card.is-hoverable:hover { border-color: var(--ms-border-strong); } .ms-btn:hover:not(:disabled) { border-color: var(--ms-accent); } .ms-sidenav a:hover { background: var(--ms-surface-2); } .ms-scanpad:hover { border-color: var(--ms-accent); } } /* 无障碍：可见焦点环，键盘可达 */ :focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; border-radius: var(--ms-r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ============================================================================ * Tabler UI integration · 2026-08 redesign * Tabler owns the application-shell and shared component grammar; MeetSync's * business-specific dual-time, AI and credential components keep their APIs. * ========================================================================== */ :root, [data-theme="light"] { --tblr-primary: #b93808; --tblr-primary-rgb: 185, 56, 8; --tblr-body-color: var(--ms-fg); --tblr-body-bg: var(--ms-bg); --tblr-border-color: var(--ms-border); --tblr-card-border-color: var(--ms-border); --tblr-font-sans-serif: var(--ms-font); color-scheme: light; } [data-theme="dark"] { --tblr-primary: #ff7438; --tblr-primary-rgb: 255, 116, 56; --tblr-body-color: var(--ms-fg); --tblr-body-bg: var(--ms-bg); --tblr-border-color: var(--ms-border); --tblr-card-border-color: var(--ms-border); color-scheme: dark; } body { background-color: var(--ms-bg); background-image: linear-gradient(rgba(137, 144, 151, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 144, 151, .055) 1px, transparent 1px); background-size: 72px 72px; } .ms-shell.page { background: transparent; } .ms-demobar.navbar { min-height: 62px; padding: 8px 12px; background: color-mix(in srgb, var(--ms-surface) 94%, transparent); border-color: var(--ms-border); box-shadow: 0 1px 0 rgba(32, 37, 42, .02); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .ms-demobar .ms-demobar-brand.navbar-brand { display: flex; align-items: center; gap: 9px; padding: 0; margin-right: auto; color: var(--ms-fg); text-decoration: none; } .ms-demobar-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; font-weight: 750; } .ms-demobar-brand small { margin-top: 3px; color: var(--ms-muted); font-size: 8px; font-weight: 600; letter-spacing: .04em; } .ms-brand-mark { position: relative; display: inline-block; width: 25px; height: 25px; flex: none; } .ms-brand-mark i { position: absolute; border: 4px solid var(--ms-accent); border-radius: 50%; } .ms-brand-mark i:first-child { inset: 2px 8px 2px 1px; } .ms-brand-mark i:last-child { inset: 2px 1px 2px 8px; } .ms-brand-mark::after { content: ""; position: absolute; left: 10px; top: 2px; width: 5px; height: 21px; background: var(--ms-surface); } .ms-demobar .ms-seg { background: var(--ms-surface-2); border: 1px solid var(--ms-border); } .ms-demobar .ms-seg button[aria-pressed="true"] { background: var(--ms-surface); color: var(--ms-fg); box-shadow: 0 1px 2px rgba(32, 37, 42, .08); } .ms-demobar .ms-chip.badge { border: 1px solid var(--ms-border); background: var(--ms-surface); color: var(--ms-muted); } .ms-iconbtn.btn.btn-icon { width: 32px; height: 32px; min-height: 32px; padding: 0; border-color: var(--ms-border); } .ms-header.page-header { background: transparent; border-bottom: 0; box-shadow: none; } .ms-header { position: relative; top: auto; min-height: 86px; padding-top: var(--ms-s5); padding-bottom: var(--ms-s3); background: transparent; border-bottom: 0; } .ms-header .ms-title { font-size: clamp(24px, 3vw, 32px); font-weight: 750; letter-spacing: -.05em; } .ms-header .ms-sub { margin-top: 5px; font-size: var(--ms-fs-sm); } .ms-page { gap: var(--ms-s4); } .ms-card.card { padding: var(--ms-s4); border-radius: var(--ms-r-lg); border-color: var(--ms-border); background: var(--ms-card); box-shadow: var(--ms-shadow-1); } .ms-card.card.is-hoverable { transition: transform 160ms var(--ms-ease), border-color 160ms var(--ms-ease), box-shadow 160ms var(--ms-ease); } .ms-card-title { font-size: var(--ms-fs-lg); font-weight: 700; letter-spacing: -.025em; } .ms-btn.btn { min-height: 36px; padding: 8px 13px; border-radius: var(--ms-r-sm); font-weight: 650; box-shadow: none; } .ms-btn.btn.ms-btn-primary { color: #fff; background: var(--ms-action); border-color: var(--ms-action); } .ms-btn.btn.ms-btn-primary:hover { background: color-mix(in srgb, var(--ms-action) 86%, black); border-color: color-mix(in srgb, var(--ms-action) 86%, black); } .ms-btn.btn.ms-btn-sm { min-height: 30px; padding: 5px 10px; font-size: var(--ms-fs-sm); } .ms-chip.badge { border: 1px solid transparent; border-radius: var(--ms-r-pill); font-weight: 650; } .ms-chip.badge[data-tone="ok"] { border-color: color-mix(in srgb, var(--ms-ok) 25%, transparent); } .ms-chip.badge[data-tone="warn"] { border-color: color-mix(in srgb, var(--ms-warn) 25%, transparent); } .ms-chip.badge[data-tone="danger"] { border-color: color-mix(in srgb, var(--ms-danger) 25%, transparent); } .ms-chip.badge[data-tone="info"] { border-color: color-mix(in srgb, var(--ms-info) 25%, transparent); } .ms-ai-block.alert { display: block; margin: 0; border-color: color-mix(in srgb, var(--ms-accent) 28%, var(--ms-border)); color: var(--ms-fg-2); } .ms-ai-block.alert .ms-ai-head { color: var(--ms-accent); } .ms-banner.alert { margin: 0; border: 0; } .ms-input,.ms-select,.ms-textarea { background: var(--ms-surface); border-color: var(--ms-border); border-radius: var(--ms-r-sm); } .ms-input:focus,.ms-select:focus,.ms-textarea:focus { border-color: var(--ms-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-accent) 18%, transparent); outline: 0; } .ms-kpi { border-radius: var(--ms-r-lg); background: var(--ms-card); box-shadow: var(--ms-shadow-1); } .ms-kpi .ms-kpi-v { letter-spacing: -.055em; } .ms-table th { background: var(--ms-surface-2); text-transform: uppercase; letter-spacing: .055em; } .ms-table th,.ms-table td { padding: 10px 9px; } .ms-empty.empty { padding-block: var(--ms-s8); } .ms-session-row::before,.ms-journey-stop::before { width: 3px; border-radius: var(--ms-r-sm) 0 0 var(--ms-r-sm); background: var(--ms-accent); } .ms-journey-hero { border-radius: var(--ms-r-lg); background: var(--ms-fg); box-shadow: var(--ms-shadow-2); } .ms-journey-hero::after { background: var(--ms-accent); } .ms-calendar-card { display: none; padding: var(--ms-s4)!important; overflow: hidden; } /* FullCalendar / Grid.js / Tom Select / Flatpickr / Frappe Gantt 的主题重绘 * 统一在 widgets.css（.msw-* 命名空间）。此处只留 FullCalendar 的容器变量。 */ .msw-calendar { --fc-page-bg-color: var(--ms-card); --fc-neutral-bg-color: var(--ms-surface-2); --fc-list-event-hover-bg-color: var(--ms-surface-2); --fc-today-bg-color: var(--ms-accent-soft); } @media (min-width: 1280px) { :root { --ms-demobar-h: 62px; } .ms-shell.page { grid-template-columns: 232px minmax(0,1fr); } .ms-demobar.navbar { padding-inline: 18px; } .ms-sidenav.navbar-vertical { padding: 18px 12px; background: var(--ms-surface); box-shadow: 1px 0 0 var(--ms-border); } .ms-sidenav .ms-navgroup { padding: 10px 10px 7px; color: var(--ms-faint); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } .ms-sidenav a { padding: 10px 11px; border-radius: 6px; color: var(--ms-muted); font-size: 14px; font-weight: 600; } .ms-sidenav a[aria-current="page"] { background: var(--ms-accent-soft); color: var(--ms-accent); } .ms-sidenav .ms-navmeta { margin: auto 4px 4px; padding: 14px; border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); background: var(--ms-surface-2); } .ms-main { min-height: calc(100vh - var(--ms-demobar-h)); } .ms-header { padding: 26px 32px 10px; } .ms-page { max-width: 1440px; padding: 18px 32px 34px; } .ms-split { grid-template-columns: minmax(0,1fr) 360px; gap: var(--ms-s4); } .ms-calendar-card { display: block; } .ms-journey-list::before { left: 1px; } } @media (hover:hover) and (pointer:fine) { .ms-card.card.is-hoverable:hover { transform: translateY(-2px); border-color: var(--ms-border-strong); box-shadow: 0 10px 26px rgba(32,37,42,.08); } .ms-sidenav a:hover { background: var(--ms-surface-2); color: var(--ms-fg); } } @media (max-width:767px) { .ms-demobar.navbar { align-items: center; } .ms-demobar .ms-demobar-brand { width: 100%; } .ms-demobar .ms-demobar-right { width: 100%; margin-left: 0; } .ms-header { min-height: 72px; padding-top: 14px; } .ms-page { background: color-mix(in srgb, var(--ms-bg) 86%, transparent); } .ms-card.card { padding: 14px; } .ms-tabbar { height: 64px; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px rgba(32,37,42,.06); } .ms-tabbar a[aria-current="page"] { color: var(--ms-accent); } } /* ========================================================================== * Role workspace shell · mature SaaS information architecture * ======================================================================== */ .ms-page-context { display: none; align-items: center; gap: 7px; min-width: 0; color: var(--ms-muted); font-size: 13px; } .ms-page-context strong { color: var(--ms-fg); font-weight: 700; white-space: nowrap; } .ms-page-context svg { color: var(--ms-faint); flex: none; } .ms-context-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 9px; border: 1px solid var(--ms-border); border-radius: 6px; background: var(--ms-surface); color: var(--ms-muted); font: inherit; font-weight: 600; } .ms-notification-btn { position: relative; } .ms-mobile-lang { display: none!important; font-size: 10px; font-weight: 750; } .ms-notification-btn i { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border: 1px solid var(--ms-surface); border-radius: 50%; background: var(--ms-action); } .ms-account { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 3px 5px 3px 3px; border: 0; border-radius: 7px; background: transparent; color: var(--ms-fg); font: inherit; text-align: left; } .ms-account:hover { background: var(--ms-surface-2); } .ms-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ms-fg); color: var(--ms-surface); font-size: 12px; font-weight: 750; } .ms-account-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .ms-account-copy strong { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .ms-account-copy small { margin-top: 3px; color: var(--ms-muted); font-size: 10px; } /* Tabler overlays keep the product tokens while retaining the library's behavior. */ .dropdown-menu, .modal-content, .offcanvas { border-color: var(--ms-border); background: var(--ms-surface); color: var(--ms-fg); box-shadow: var(--ms-shadow-3); } .dropdown-item { display: flex; align-items: center; gap: 9px; color: var(--ms-fg-2); } .dropdown-item:hover, .dropdown-item:focus { background: var(--ms-surface-2); color: var(--ms-fg); } .dropdown-item.active { background: var(--ms-accent-soft); color: var(--ms-accent); } .dropdown-header { color: var(--ms-faint); } .dropdown-divider, .modal-header, .modal-footer, .offcanvas-header, .list-group-item { border-color: var(--ms-border); } .modal-title, .offcanvas-title { color: var(--ms-fg); } .modal .form-control, .modal .form-select, .modal .form-check-input, .offcanvas .form-control, .offcanvas .form-select { border-color: var(--ms-border); background-color: var(--ms-surface); color: var(--ms-fg); } .modal .form-control:focus, .modal .form-select:focus, .offcanvas .form-control:focus, .offcanvas .form-select:focus { border-color: var(--ms-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-accent) 18%, transparent); } .modal .form-label { color: var(--ms-fg-2); font-weight: 650; } .offcanvas .list-group-item { background: transparent; color: var(--ms-fg); } .offcanvas .list-group-item-action:hover { background: var(--ms-surface-2); } .btn-close { filter: var(--ms-close-filter, none); } [data-theme="dark"] { --ms-close-filter: invert(1) grayscale(100%) brightness(190%); } .ms-sidebrand { display: none; } .ms-workspace-card { display: none; } .ms-nav-sections { display: contents; } .ms-nav-section { display: contents; } .ms-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 10px; background: var(--ms-accent-soft); color: var(--ms-accent); font-size: 10px; font-weight: 750; } @media (min-width: 1280px) { .ms-shell.page { grid-template-columns: 248px minmax(0,1fr); grid-template-areas: "sidenav demobar" "sidenav main"; grid-template-rows: 64px minmax(0,1fr); } .ms-demobar.navbar { position: sticky; grid-area: demobar; top: 0; min-height: 64px; padding: 10px 20px; border-bottom: 1px solid var(--ms-border); background: color-mix(in srgb, var(--ms-surface) 97%, transparent); } .ms-demobar .ms-demobar-brand { display: none!important; } .ms-page-context { display: flex; } .ms-demobar-right { margin-left: auto; } .ms-sidenav.navbar-vertical { position: sticky; grid-area: sidenav; top: 0; height: 100vh; padding: 0 12px 14px; overflow-y: auto; border-right: 1px solid var(--ms-border); background: var(--ms-surface); } .ms-sidebrand { display: flex; align-items: center; min-height: 64px; margin: 0 -12px; padding: 0 18px; border-bottom: 1px solid var(--ms-border); } .ms-sidebrand .ms-demobar-brand.navbar-brand { display: flex!important; margin: 0; } .ms-workspace-card { display: flex; align-items: center; gap: 10px; margin: 14px 4px 8px; padding: 11px; border: 1px solid var(--ms-border); border-radius: 8px; background: var(--ms-surface-2); } .ms-workspace-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 7px; background: var(--ms-fg); color: var(--ms-surface); } .ms-workspace-card > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .ms-workspace-card small { color: var(--ms-muted); font-size: 9px; font-weight: 650; letter-spacing: .03em; } .ms-workspace-card strong { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ms-fg); font-size: 13px; } .ms-nav-sections { display: block; margin-top: 4px; } .ms-nav-section { display: block; margin-top: 9px; } .ms-sidenav .ms-navgroup { padding: 9px 12px 6px; color: var(--ms-faint); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .ms-sidenav a { position: relative; min-height: 40px; margin: 2px 0; padding: 9px 11px; border-radius: 6px; color: var(--ms-muted); font-size: 13px; font-weight: 620; } .ms-sidenav a::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; } .ms-sidenav a[aria-current="page"] { background: var(--ms-accent-soft); color: var(--ms-accent); } .ms-sidenav a[aria-current="page"]::before { background: var(--ms-action); } .ms-sidenav .ms-navmeta { margin: auto 4px 0; padding: 13px; border: 1px solid var(--ms-border); border-radius: 8px; background: var(--ms-surface-2); color: var(--ms-muted); line-height: 1.45; } .ms-event-label { margin-bottom: 5px; color: var(--ms-muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .ms-navmeta .ms-strong { color: var(--ms-fg); font-size: 12px; } .ms-navmeta svg { margin-right: 4px; vertical-align: -2px; } .ms-org-line { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--ms-border); } .ms-org-line small { display: block; margin-bottom: 3px; color: var(--ms-muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .ms-main { min-height: calc(100vh - 64px); } .ms-header { padding-left: 32px; } } @media (max-width: 1279px) { .ms-demobar.navbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 8px 12px; } .ms-demobar .ms-demobar-brand { display: flex!important; width: auto; min-width: 0; } .ms-demobar-brand small { display: none; } .ms-demobar-right { display: flex; width: auto; margin: 0; flex-wrap: nowrap; } .ms-context-btn, .ms-account-copy, .ms-account > svg, .ms-demobar-right > .ms-seg { display: none; } .ms-mobile-lang { display: inline-flex!important; } .ms-account { padding: 0; } .ms-avatar { width: 32px; height: 32px; } /* Mock 环境层让开底部 tabbar（mock-dock.css 的唯一对外插槽） */ .mockdock { --md-safe-bottom: calc(var(--ms-tabbar-h) + 10px); } } @media (max-width: 420px) { .ms-demobar .ms-demobar-brand { min-width: 36px; } .ms-demobar-brand > span:last-child { display: none; } .ms-demobar-right { gap: 4px; } .ms-demobar-right .ms-iconbtn.btn.btn-icon { width: 30px; height: 30px; min-height: 30px; } .ms-demobar-right .ms-notification-btn { display: none; } } /* ============================================================================ * 票据形式语言 · approved v3 * ---------------------------------------------------------------------------- * 一个母题贯穿全站：场次是「待领的票」，预约结果是「已领的票」，变更是「改签的 * 票」，凭证是「核验的票」。三档密度共用同一套几何（穿孔、撕裂虚线、票根竖排双 * 时区、等宽数字）： * 紧凑票 .ms-ticket ~92px 发现页 / 行程 / 审核列表，成卷排布 * 标准票 .ms-stub ~150px 预约结果 / 变更通知 * 完整票 .ms-stub.is-full 凭证页 signature，带 QR / MRZ / 落章 * 配套容器分级见本段末：卡片降级为特权容器，AI 与告警改用便签形态。 * ========================================================================== */ /* ---- 票据几何基元 ---- */ :root { --ms-tear: 1px dashed color-mix(in srgb, var(--ms-border-strong) 82%, transparent); --ms-notch: 11px; --ms-ticket-stub-w: 66px; } @media (min-width: 1280px) { :root { --ms-notch: 13px; --ms-ticket-stub-w: 76px; } } /* ============ 紧凑票：列表的内容单元（L2），成卷而非成堆 ============ */ .ms-ticketroll { display: flex; flex-direction: column; } .ms-ticket { position: relative; display: grid; grid-template-columns: var(--ms-ticket-stub-w) minmax(0, 1fr) auto; align-items: stretch; background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: var(--ms-r); box-shadow: none; cursor: pointer; transition: background 140ms var(--ms-ease); } /* 成卷：连续票共享边，整段读作一件东西，不是 N 张浮卡 */ .ms-ticketroll > .ms-ticket { border-radius: 0; border-top: var(--ms-tear); } .ms-ticketroll > .ms-ticket:first-child { border-top: 1px solid var(--ms-border); border-radius: var(--ms-r) var(--ms-r) 0 0; } .ms-ticketroll > .ms-ticket:last-child { border-radius: 0 0 var(--ms-r) var(--ms-r); } /* 撕裂口：非首张票的接缝两端各咬一个与页面同色的圆缺 */ .ms-ticketroll > .ms-ticket:not(:first-child)::before, .ms-ticketroll > .ms-ticket:not(:first-child)::after { content: ""; position: absolute; z-index: 2; top: calc(var(--ms-notch) / -2); width: var(--ms-notch); height: var(--ms-notch); border-radius: 50%; background: var(--ms-bg); box-shadow: inset 0 0 0 1px var(--ms-border); pointer-events: none; } .ms-ticketroll > .ms-ticket:not(:first-child)::before { left: calc(var(--ms-notch) / -2 - 1px); } .ms-ticketroll > .ms-ticket:not(:first-child)::after { right: calc(var(--ms-notch) / -2 - 1px); } /* 票根：竖排双时区，等宽数字是全票最重的元素 */ .ms-ticket-stub { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; padding: var(--ms-s3) 0; border-right: var(--ms-tear); background: var(--ms-surface-2); } .ms-ticket-stub b { font-family: var(--ms-font-mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700; line-height: 1.05; letter-spacing: -.04em; color: var(--ms-fg); } .ms-ticket-stub u { text-decoration: none; font-family: var(--ms-font-mono); font-size: 9px; color: var(--ms-faint); } .ms-ticket-stub s { text-decoration: none; margin-top: 5px; padding-top: 4px; border-top: var(--ms-tear); font-family: var(--ms-font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--ms-muted); letter-spacing: -.03em; } .ms-ticket-body { min-width: 0; padding: var(--ms-s3) var(--ms-s3) var(--ms-s3) var(--ms-s4); } .ms-ticket-title { margin: 0 0 4px; font-size: var(--ms-fs-md); font-weight: 700; line-height: 1.32; letter-spacing: -.022em; color: var(--ms-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ms-ticket-meta { margin: 0; font-size: var(--ms-fs-xs); color: var(--ms-muted); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-ticket-foot { display: flex; align-items: center; gap: var(--ms-s1); margin-top: 6px; flex-wrap: wrap; } .ms-ticket-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; padding: var(--ms-s3) var(--ms-s3) var(--ms-s3) var(--ms-s2); text-align: right; } .ms-ticket-cap { font-family: var(--ms-font-mono); font-size: 10px; color: var(--ms-faint); } /* 赛道色收到左缘一条细线，不再是整卡左粗边 */ .ms-ticket > .ms-ticket-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ms-accent); } .ms-ticket[data-track="trk-data"] > .ms-ticket-rail, .ms-ticket[data-track="trk-policy"] > .ms-ticket-rail { background: var(--ms-info); } .ms-ticket[data-track="trk-health"] > .ms-ticket-rail, .ms-ticket[data-track="trk-urban"] > .ms-ticket-rail { background: var(--ms-ok); } .ms-ticket[data-full="1"] { background: var(--ms-surface-2); } .ms-ticket[data-full="1"] .ms-ticket-title { color: var(--ms-muted); } @media (hover: hover) and (pointer: fine) { .ms-ticket:hover { background: var(--ms-accent-soft); } } @media (min-width: 1280px) { .ms-ticketroll { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-s2); align-items: start; } .ms-ticketroll > .ms-ticket, .ms-ticketroll > .ms-ticket:first-child, .ms-ticketroll > .ms-ticket:last-child { border: 1px solid var(--ms-border); border-radius: var(--ms-r); } .ms-ticketroll > .ms-ticket:not(:first-child)::before, .ms-ticketroll > .ms-ticket:not(:first-child)::after { display: none; } .ms-ticket-title { font-size: var(--ms-fs-lg); } } /* ============ 完整票：凭证页 signature ============ */ .ms-stub { overflow: visible; } /* 撕裂线：票身与存根之间的穿孔，两端各咬一个缺口 */ .ms-stub-tail { position: relative; border-top: var(--ms-tear); } .ms-stub-tail::before, .ms-stub-tail::after { content: ""; position: absolute; top: calc(var(--ms-notch) / -2 - 1px); width: var(--ms-notch); height: var(--ms-notch); border-radius: 50%; background: var(--ms-bg); box-shadow: inset 0 0 0 1px var(--ms-border); } .ms-stub-tail::before { left: calc(var(--ms-notch) / -2 - 1px); } .ms-stub-tail::after { right: calc(var(--ms-notch) / -2 - 1px); } /* 底纹：极轻的斜向纹，只在票身出现 */ .ms-stub-body { position: relative; } .ms-stub-body::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--ms-fg) 4%, transparent) 0 1px, transparent 1px 9px); -webkit-mask-image: linear-gradient(to bottom right, #000 0%, transparent 62%); mask-image: linear-gradient(to bottom right, #000 0%, transparent 62%); } .ms-stub-body > * { position: relative; z-index: 1; } /* MRZ：机读区，票据身份的确定性表达 */ .ms-stub-mrz { display: block; padding: 9px var(--ms-s4) 11px; border-top: var(--ms-tear); background: var(--ms-mrz-bg); color: var(--ms-mrz-ink); font-family: var(--ms-font-mono); font-size: 10px; font-weight: 600; letter-spacing: var(--ms-ls-mrz); white-space: nowrap; overflow: hidden; } /* 落章：完整票才落章，回到印章语义而非状态签条 */ .ms-stub.is-full .ms-stamp { right: var(--ms-s5); top: 62px; min-height: 0; padding: 7px 13px; border-width: 2.5px; border-radius: var(--ms-r-sm); font-size: var(--ms-fs-sm); letter-spacing: var(--ms-ls-seal); text-transform: uppercase; transform: rotate(-11deg); opacity: .94; } .ms-stub.is-full .ms-stamp[data-stamp="stamped"], .ms-stub.is-full .ms-stamp[data-stamp="void"] { animation: ms-stamp-seal var(--ms-dur-stamp) var(--ms-ease) both; } .ms-stub.is-full .ms-stamp[data-stamp="void"] { color: var(--ms-void); } @keyframes ms-stamp-seal { 0% { opacity: 0; transform: rotate(-11deg) scale(1.5); } 100% { opacity: .94; transform: rotate(-11deg) scale(1); } } /* ============ 便签：L3 特权容器，形态上必须不是票 ============ */ .ms-memo, .ms-ai-block.alert, .ms-banner.alert { border: 0; border-left: 3px solid currentColor; border-radius: 0 var(--ms-r-sm) var(--ms-r-sm) 0; padding: var(--ms-s3) var(--ms-s4); box-shadow: none; } .ms-ai-block.alert { color: var(--ms-ai); background: var(--ms-ai-soft); } .ms-ai-block.alert .ms-ai-reason, .ms-memo .ms-ai-reason { color: var(--ms-fg-2); } .ms-memo[data-tone="ok"] { color: var(--ms-ok); background: var(--ms-ok-soft); } .ms-memo[data-tone="warn"] { color: var(--ms-warn); background: var(--ms-warn-soft); } .ms-memo[data-tone="danger"] { color: var(--ms-danger); background: var(--ms-danger-soft); } .ms-memo[data-tone="info"] { color: var(--ms-info); background: var(--ms-info-soft); } /* 便签里的推荐行：L2 行，绝不是卡中卡 */ .ms-ai-block .ms-rows > * { border-bottom-color: color-mix(in srgb, var(--ms-ai) 24%, transparent); } .ms-rec { cursor: pointer; } .ms-rec .ms-strong { font-size: var(--ms-fs-sm); font-weight: 700; color: var(--ms-fg); line-height: 1.35; } .ms-rec .ms-xs { margin-top: 3px; } .ms-rec .ms-ai-reason { margin: 5px 0 0; font-size: var(--ms-fs-xs); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ms-ai-block .ms-rows > * { padding: var(--ms-s2) 0; } /* 移动端首屏优先给场次票：AI 推荐只留 Top2，第三条在桌面端出现 */ @media (max-width: 767px) { .ms-ai-block .ms-rows > *:nth-child(n+3) { display: none; } } /* 移动端页头收紧：标题不必占满一屏三分之一 */ @media (max-width: 767px) { .ms-header { min-height: 0; padding: 12px var(--ms-s4) 8px; flex-wrap: wrap; row-gap: 8px; } .ms-header .ms-title { font-size: 23px; } .ms-header .ms-sub { margin-top: 2px; font-size: var(--ms-fs-xs); } .ms-header .ms-actions { margin-left: auto; } .ms-page { padding-top: var(--ms-s3); gap: var(--ms-s3); } } @media (hover: hover) and (pointer: fine) { .ms-rec:hover .ms-strong { color: var(--ms-accent); } } /* ============ 容器分级：卡片从默认容器降级为特权容器 ============ */ /* L1 主体：直接坐在页面底色上，靠字号与留白立住，不加框 */ .ms-subject { padding: 0; background: transparent; border: 0; box-shadow: none; } .ms-subject-label { display: block; margin-bottom: 5px; font-family: var(--ms-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ms-faint); } .ms-subject-value { font-size: clamp(21px, 5.4vw, 30px); font-weight: 750; line-height: 1.16; letter-spacing: -.035em; } /* L2 内容单元：只有分隔线，取消边框与圆角容器 */ .ms-rows { display: flex; flex-direction: column; } .ms-rows > * { padding: var(--ms-s3) 0; border-bottom: 1px solid var(--ms-border); } .ms-rows > *:last-child { border-bottom: 0; } /* L3：卡片收权——默认无投影，只有 is-privileged 才允许抬起 */ .ms-card.card { box-shadow: none; } .ms-card.card.is-privileged { box-shadow: var(--ms-shadow-2); border-color: var(--ms-border-strong); } /* ---- 顶部时区条：双时钟从 hero 降级为一行，把首屏还给主体内容 ---- */ .ms-tzbar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--ms-s2); padding: 9px var(--ms-s4); background: var(--ms-console); color: var(--ms-console-fg); border-radius: var(--ms-r-sm); } .ms-tzbar b { font-family: var(--ms-font-mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700; letter-spacing: -.03em; } .ms-tzbar u, .ms-tzbar em { text-decoration: none; font-style: normal; font-family: var(--ms-font-mono); font-size: 10px; opacity: .66; } .ms-tzbar i { font-style: normal; opacity: .34; } .ms-tzbar .ms-tzbar-next { flex: 1 1 100%; margin-top: 2px; font-size: var(--ms-fs-xs); opacity: .74; } @media (min-width: 1280px) { .ms-tzbar .ms-tzbar-next { flex: 0 1 auto; margin: 0 0 0 auto; text-align: right; } } /* ---- 筛选器折叠：移动端默认收起，桌面端常驻展开 ---- */ .ms-filterbar .ms-filter-body { display: none; } .ms-filterbar.is-open .ms-filter-body { display: flex; flex-direction: column; gap: var(--ms-s3); margin-top: var(--ms-s3); } .ms-filter-toggle { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 11px; border: 1px dashed var(--ms-border-strong); border-radius: var(--ms-r-pill); background: var(--ms-surface); color: var(--ms-fg-2); font: inherit; font-size: var(--ms-fs-xs); font-weight: 650; cursor: pointer; white-space: nowrap; } .ms-filter-toggle[aria-expanded="true"] { border-style: solid; border-color: var(--ms-accent); color: var(--ms-accent); } .ms-filter-quick { display: flex; align-items: center; gap: var(--ms-s1); overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ms-filter-quick::-webkit-scrollbar { display: none; } .ms-filter-quick > * { flex: none; } .ms-filter-pill { min-height: 32px; padding: 4px 11px; border: 1px solid var(--ms-border); border-radius: var(--ms-r-pill); background: var(--ms-surface); color: var(--ms-fg-2); font: inherit; font-size: var(--ms-fs-xs); font-weight: 650; cursor: pointer; white-space: nowrap; } .ms-filter-pill[aria-pressed="true"] { background: var(--ms-fg); border-color: var(--ms-fg); color: var(--ms-surface); } .ms-filter-head { display: flex; align-items: center; gap: var(--ms-s2); min-width: 0; } @media (min-width: 1280px) { .ms-filterbar { padding: var(--ms-s4); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); background: var(--ms-card); } .ms-filterbar .ms-filter-body { display: flex; flex-direction: column; gap: var(--ms-s3); margin-top: var(--ms-s3); } .ms-filter-toggle { display: none; } .ms-filter-quick { flex-wrap: wrap; overflow: visible; } } /* ---- 热力带：真色阶，0–4 五级由冷到热，不再是均匀淡灰 ---- */ .ms-heat i { height: 26px; border-radius: 2px; background: var(--ms-surface-3); } .ms-heat i[data-level="0"] { background: var(--ms-surface-3); } .ms-heat i[data-level="1"] { background: color-mix(in srgb, var(--ms-info) 22%, var(--ms-surface)); } .ms-heat i[data-level="2"] { background: color-mix(in srgb, var(--ms-info) 55%, var(--ms-surface)); } .ms-heat i[data-level="3"] { background: color-mix(in srgb, var(--ms-ok) 74%, var(--ms-surface)); } .ms-heat i[data-level="4"] { background: var(--ms-ok); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ms-fg) 34%, transparent); } .ms-heat-legend { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--ms-muted); font-family: var(--ms-font-mono); } .ms-heat-legend i { display: block; width: 16px; height: 11px; border-radius: 2px; background: var(--ms-surface-3); } .ms-heat-legend i[data-level="1"] { background: color-mix(in srgb, var(--ms-info) 22%, var(--ms-surface)); } .ms-heat-legend i[data-level="2"] { background: color-mix(in srgb, var(--ms-info) 55%, var(--ms-surface)); } .ms-heat-legend i[data-level="3"] { background: color-mix(in srgb, var(--ms-ok) 74%, var(--ms-surface)); } .ms-heat-legend i[data-level="4"] { background: var(--ms-ok); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ms-fg) 34%, transparent); } /* ============================================================================ * 票据生命周期条 —— 全局定位器（app/lifecycle.js） * 形式语言：一整条票根上的五个连续存根格。格与格之间是穿孔虚线而不是箭头—— * 票不是被人「传递」的，是它自己在换档。主责档实底落章，非主责档留白。 * ========================================================================== */ .ms-lifecycle { margin: var(--ms-s3) var(--ms-s4) 0; border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); background: var(--ms-card); overflow: hidden; } .ms-lc-track { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; } .ms-lc-track::-webkit-scrollbar { display: none; } /* 穿孔：格与格之间的竖向虚线，两端各咬一个与底色同色的圆缺 */ .ms-lc-perf { position: relative; flex: none; width: 0; border-left: var(--ms-tear); } .ms-lc-perf::before, .ms-lc-perf::after { content: ""; position: absolute; left: calc(var(--ms-notch) / -2); width: var(--ms-notch); height: var(--ms-notch); border-radius: 50%; background: var(--ms-bg); box-shadow: inset 0 0 0 1px var(--ms-border); } .ms-lc-perf::before { top: calc(var(--ms-notch) / -2); } .ms-lc-perf::after { bottom: calc(var(--ms-notch) / -2); } .ms-lc-cell { flex: 1 1 0; min-width: 96px; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 1px var(--ms-s2); align-items: center; padding: 9px var(--ms-s3) 10px; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: inherit; color: var(--ms-muted); } .ms-lc-no { grid-row: 1 / span 2; align-self: start; margin-top: 1px; font-family: var(--ms-font-mono); font-size: var(--ms-fs-micro); font-weight: 700; letter-spacing: var(--ms-ls-caps); color: var(--ms-muted); } .ms-lc-name { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ms-fs-sm); font-weight: 650; color: var(--ms-fg-2); white-space: nowrap; } .ms-lc-name svg { color: var(--ms-faint); flex: none; } .ms-lc-n { grid-column: 2; font-family: var(--ms-font-mono); font-size: var(--ms-fs-xs); font-weight: 700; color: var(--ms-muted); } .ms-lc-role { grid-column: 2; font-size: var(--ms-fs-micro); color: var(--ms-muted); text-transform: uppercase; letter-spacing: var(--ms-ls-caps); white-space: nowrap; } .ms-lc-n + .ms-lc-role { grid-row: 2; justify-self: end; align-self: center; } /* 主责档：落章——近黑序号、实文字、票面提亮 */ .ms-lc-cell[data-own="1"] { background: var(--ms-surface); } .ms-lc-cell[data-own="1"] .ms-lc-no { color: var(--ms-accent); } .ms-lc-cell[data-own="1"] .ms-lc-name { color: var(--ms-fg); font-weight: 700; } .ms-lc-cell[data-own="1"] .ms-lc-name svg { color: var(--ms-accent); } .ms-lc-cell[data-own="1"] .ms-lc-n { color: var(--ms-fg); } .ms-lc-cell[data-own="1"] .ms-lc-role { color: var(--ms-accent); } /* 当前所在档：底部一道落章色带 */ .ms-lc-cell[data-here="1"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ms-accent); } .ms-lc-cell[data-here="1"] { background: var(--ms-accent-soft); } .ms-lc-cell:focus-visible { outline: 2px solid var(--ms-action); outline-offset: -3px; } /* 职责行：谁 · 负责哪几档 · 计数口径 */ .ms-lc-duty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-s1) var(--ms-s3); margin: 0; padding: 7px var(--ms-s3) 8px; border-top: 1px solid var(--ms-border); background: var(--ms-surface-2); font-size: var(--ms-fs-xs); color: var(--ms-muted); } .ms-lc-duty b { color: var(--ms-fg); font-weight: 700; } .ms-lc-own b { color: var(--ms-accent); } .ms-lc-own i { margin: 0 4px; font-style: normal; color: var(--ms-faint); } .ms-lc-scope { margin-left: auto; font-family: var(--ms-font-mono); color: var(--ms-muted); } /* 侧栏分组前的档号：导航读下来就是「01 申请 / 03 持有」 */ .ms-navgroup-no { display: inline-block; margin-right: 6px; font-style: normal; font-family: var(--ms-font-mono); color: var(--ms-accent); font-weight: 700; } /* 移动端：五档必须一屏全见，否则「一目了然」就无从谈起。 收掉档内图标与横向内距换宽度，档号与主责角色两个语义信号一个都不丢。 */ @media (max-width: 767px) { .ms-lifecycle { margin: var(--ms-s2) var(--ms-s3) 0; border-radius: var(--ms-r); } .ms-lc-track { overflow-x: visible; } .ms-lc-cell { min-width: 0; padding: 7px 6px 8px; gap: 1px 5px; } .ms-lc-cell .ms-lc-name svg { display: none; } .ms-lc-name { font-size: var(--ms-fs-xs); } .ms-lc-role { font-size: 9px; letter-spacing: .04em; } .ms-lc-duty { padding: 7px var(--ms-s3) 8px; } .ms-lc-scope { margin-left: 0; } } @media (min-width: 1280px) { .ms-lifecycle { margin: 18px 32px 0; } .ms-lc-cell { min-width: 0; padding: 11px var(--ms-s4) 12px; } .ms-lc-name { font-size: var(--ms-fs-md); } .ms-lc-duty { padding: 8px var(--ms-s4) 9px; font-size: var(--ms-fs-sm); } }