/* 2026-05-10：删除冗余 @import url("./tokens.css") —— 所有 HTML 入口都显式 link tokens.css， @import 会触发额外的串行 fetch（浪费 ~25ms）且阻塞 base.css 解析。 同时新增 html/body 默认主题背景色，让 CSS 加载完毕后立即应用， 避免"UA 默认色 → 真实主题色"的二次色调切换。 */ html { background-color: #f5f8fd; color-scheme: light dark; } html[data-theme="dark"] { background-color: #08111d; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { background-color: #08111d; } } body { background-color: inherit; } * { box-sizing: border-box; } /* 2026-05-09 v1：全局键盘焦点环（WCAG 2.4.7 Focus Visible） * - 仅 keyboard tab 触发的 focus 才显示，鼠标点击不显示（:focus-visible 语义） * - 用 outline 而非 box-shadow，因为 outline 不参与布局，不会撑开父容器 * - 使用 var(--brand) 自动适配 dark 金色 / light 蓝色 * - 个别已显式设 outline:none 的子元素（如 .auth-shot-tab）仍能覆盖（specificity 同级，后写者赢） */ :where(button, [role="button"], a, [data-action], input, textarea, select):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; transition: outline-offset 120ms ease; } /* 视障用户辅助：屏幕阅读器可见但视觉隐藏 */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ── 滑动流畅度优化 ── */ .mobile-sheet-scroll, .mobile-stats-grid, .mobile-summary-strip { transform: translateZ(0); will-change: scroll-position; backface-visibility: hidden; } .event-card, .week-chip, .stat-card, .month-entry, .command-card, .assistant-message, .quick-chip, .info-chip { contain: layout style paint; } html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.11), transparent 24%), radial-gradient(circle at bottom left, rgba(148, 163, 184, 0.12), transparent 28%), var(--bg-page); color: var(--text-main); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { padding: 24px; } html.login-open, body.login-open { height: 100%; overflow: hidden; overscroll-behavior: none; } .segmented.theme-mode button { min-width: 84px; padding: 0 16px; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; --bg-page: #08111d; --bg-card: #0d1726; --bg-soft: #111c2f; --text-main: #ffffff; --text-sub: #cbd5e1; --text-soft: #94a3b8; --line: rgba(137, 155, 179, 0.16); --line-strong: rgba(137, 155, 179, 0.24); --brand: #d7b27d; --brand-soft: rgba(215, 178, 125, 0.14); --shadow-soft: 0 36px 90px rgba(0, 0, 0, 0.4); --shadow-panel: 0 18px 44px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] body { background: radial-gradient(circle at top right, rgba(78, 101, 138, 0.22), transparent 22%), radial-gradient(circle at 12% 12%, rgba(194, 160, 113, 0.12), transparent 20%), radial-gradient(circle at bottom left, rgba(25, 36, 57, 0.42), transparent 28%), var(--bg-page); } html[data-theme="dark"] .studio-toolbar, html[data-theme="dark"] .prototype-frame, html[data-theme="dark"] .side-nav, html[data-theme="dark"] .page-header, html[data-theme="dark"] .panel, html[data-theme="dark"] .assistant-block, html[data-theme="dark"] .week-column, html[data-theme="dark"] .month-cell, html[data-theme="dark"] .time-tower, html[data-theme="dark"] .event-card, html[data-theme="dark"] .week-chip, html[data-theme="dark"] .month-entry, html[data-theme="dark"] .assistant-list-item, html[data-theme="dark"] .todo-card, html[data-theme="dark"] .focus-card, html[data-theme="dark"] .risk-card, html[data-theme="dark"] .decision-card, html[data-theme="dark"] .mailbox-feed-item, html[data-theme="dark"] .mailbox-preview-card, html[data-theme="dark"] .mailbox-summary-card, html[data-theme="dark"] .command-card, html[data-theme="dark"] .pending-card, html[data-theme="dark"] .boss-edit-notification, html[data-theme="dark"] .pending-recommend, html[data-theme="dark"] .mobile-ai-banner, html[data-theme="dark"] .mobile-nav-item, html[data-theme="dark"] .modal-card, html[data-theme="dark"] .login-card, html[data-theme="dark"] .detail-group { background: linear-gradient(180deg, rgba(12, 21, 35, 0.98), rgba(16, 27, 45, 0.94)) !important; border-color: rgba(137, 155, 179, 0.16) !important; color: var(--text-main); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .app-shell { background: linear-gradient(180deg, rgba(30, 47, 71, 0.36), transparent 24%), linear-gradient(90deg, rgba(12, 21, 35, 0.74), transparent 40%), var(--bg-card); } html[data-theme="dark"] .toolbar-brand small, html[data-theme="dark"] .title-stack small, html[data-theme="dark"] .nav-caption, html[data-theme="dark"] .boss-welcome-copy small { color: #d7b27d !important; } html[data-theme="dark"] .assistant-chat-tip { background: rgba(17, 30, 49, 0.9) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .event-annotation-inline { background: rgba(17, 30, 49, 0.86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .segmented button { color: var(--text-sub); } html[data-theme="dark"] .segmented button.active { background: rgba(255, 255, 255, 0.08); color: var(--text-main); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .nav-item:hover, html[data-theme="dark"] .mobile-nav-item:hover { background: rgba(255, 255, 255, 0.04) !important; } html[data-theme="dark"] .action-button, html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .mobile-nav-item.active, html[data-theme="dark"] .priority-option.active, html[data-theme="dark"] .filter-chip.active { background: linear-gradient(145deg, rgba(44, 66, 100, 0.98), rgba(124, 100, 69, 0.94)) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .inbox-reference-panel, html[data-theme="dark"] .inbox-reference-message-shell, html[data-theme="dark"] .inbox-reference-empty-stage, html[data-theme="dark"] .inbox-reference-result-toolbar, html[data-theme="dark"] .inbox-reference-field input, html[data-theme="dark"] .inbox-reference-field textarea, html[data-theme="dark"] .inbox-reference-field select, html[data-theme="dark"] .inbox-reference-switch { background: rgba(17, 30, 49, 0.92) !important; border-color: rgba(137, 155, 179, 0.16) !important; color: var(--text-main) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .inbox-reference-heading h4, html[data-theme="dark"] .inbox-reference-message-meta strong, html[data-theme="dark"] .inbox-reference-empty-copy h5, html[data-theme="dark"] .inbox-reference-field-label { color: var(--text-main); } html[data-theme="dark"] .inbox-reference-heading p, html[data-theme="dark"] .inbox-reference-note, html[data-theme="dark"] .inbox-reference-message-meta span, html[data-theme="dark"] .inbox-reference-empty-copy p, html[data-theme="dark"] .inbox-reference-status-copy, html[data-theme="dark"] .inbox-reference-message-foot { color: var(--text-sub); } html[data-theme="dark"] .inbox-reference-message-input { color: var(--text-main) !important; caret-color: #d7b27d; } html[data-theme="dark"] .inbox-reference-message-input::placeholder { color: rgba(158, 175, 198, 0.72); } html[data-theme="dark"] .inbox-reference-message-foot strong { color: #dbe7f7; } html[data-theme="dark"] .app-shell:not(.mobile-shell) [data-role="boss-command-input"] { background: rgba(17, 30, 49, 0.96) !important; border-color: rgba(137, 155, 179, 0.16) !important; color: var(--text-main) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); caret-color: #d7b27d; } html[data-theme="dark"] .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input::placeholder, html[data-theme="dark"] .app-shell:not(.mobile-shell) [data-role="boss-command-input"]::placeholder { color: rgba(158, 175, 198, 0.72); } html[data-theme="dark"] .inbox-reference-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2398a2b3' d='M3.25 5.5L7 9.25 10.75 5.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; } html[data-theme="dark"] .status-pill.todo { background: rgba(61, 86, 122, 0.34) !important; border-color: rgba(119, 144, 181, 0.2) !important; color: #dfe8f6 !important; } html[data-theme="dark"] .assistant-message.ai { background: rgba(17, 30, 49, 0.92) !important; border: 1px solid rgba(137, 155, 179, 0.16); color: var(--text-main); } html[data-theme="dark"] .assistant-message.user { background: rgba(53, 77, 109, 0.32) !important; color: #f5f7fb; } html[data-theme="dark"] .dispatch-receipt-card { background: linear-gradient(180deg, rgba(22, 40, 64, 0.96), rgba(17, 30, 49, 0.98)); border-color: rgba(96, 165, 250, 0.22); box-shadow: none; } html[data-theme="dark"] .dispatch-receipt-card.revoked, html[data-theme="dark"] .command-card.revoked { background: rgba(30, 41, 59, 0.98); border-color: rgba(148, 163, 184, 0.24); } html[data-theme="dark"] .mobile-app-role { background: rgba(255, 255, 255, 0.06); color: #f8fafc; } html[data-theme="dark"] .mobile-app-status, html[data-theme="dark"] .mobile-app-meta-pill, html[data-theme="dark"] .mobile-nav-icon { background: rgba(255, 255, 255, 0.05); border-color: rgba(137, 155, 179, 0.18); color: #edf3fb; } html[data-theme="dark"] .mobile-app-hero { background: linear-gradient(180deg, rgba(13, 23, 38, 0.96), rgba(17, 28, 47, 0.92)); border-color: rgba(137, 155, 179, 0.14); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24); } html[data-theme="dark"] .mobile-app-hero p { color: #a8b6c9; } html[data-theme="dark"] .app-shell.mobile-shell .page-header.mobile { background: linear-gradient(180deg, rgba(8, 17, 29, 0.94), rgba(8, 17, 29, 0.72)); } html[data-theme="dark"] .app-shell.mobile-shell .assistant-chat-panel .assistant-compose { background: linear-gradient(180deg, rgba(8, 17, 29, 0), rgba(8, 17, 29, 0.96) 28%); } html[data-theme="dark"] .app-shell.mobile-shell .mobile-bottom-nav, html[data-theme="dark"] body > #app > .mobile-bottom-nav { border-top-color: rgba(137, 155, 179, 0.16); background: linear-gradient(180deg, rgba(8, 17, 29, 0.68), rgba(8, 17, 29, 0.94)); box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .week-column.active, html[data-theme="dark"] .month-cell.is-selected, html[data-theme="dark"] .todo-card.active, html[data-theme="dark"] .pending-card.active { border-color: rgba(215, 178, 125, 0.28) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important; } html[data-theme="dark"] .stat-card { background: linear-gradient(145deg, rgba(13, 21, 35, 0.98), rgba(30, 47, 71, 0.94)) !important; border-color: rgba(78, 101, 138, 0.24) !important; color: #ffffff !important; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } html[data-theme="dark"] .stat-card::before { background: radial-gradient(circle at top right, rgba(141, 175, 229, 0.16), transparent 34%), radial-gradient(circle at bottom left, rgba(201, 166, 117, 0.14), transparent 24%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%) !important; } html[data-theme="dark"] .stat-card small, html[data-theme="dark"] .stat-card-label, html[data-theme="dark"] .stat-card-note, html[data-theme="dark"] .stat-card-subnote, html[data-theme="dark"] .stat-card span { color: rgba(255, 255, 255, 0.72) !important; } html[data-theme="dark"] .stat-card strong, html[data-theme="dark"] .stat-card-value, html[data-theme="dark"] .stat-card-title { color: #ffffff !important; } html[data-theme="dark"] .badge.priority-p1 { background: rgba(249, 115, 22, 0.92) !important; color: #ffffff !important; border-color: transparent !important; } html[data-theme="dark"] .badge.priority-p2 { background: rgba(139, 92, 246, 0.92) !important; color: #ffffff !important; border-color: transparent !important; } html[data-theme="dark"] .badge.priority-p3, html[data-theme="dark"] .badge.priority-p4, html[data-theme="dark"] .badge.priority-p5 { background: rgba(30, 44, 67, 0.96) !important; color: #d7e0ef !important; border-color: rgba(137, 155, 179, 0.16) !important; } html[data-theme="dark"] .stats-row .stat-card:nth-child(3) { background: linear-gradient(180deg, rgba(70, 19, 29, 0.98), rgba(34, 16, 24, 0.96)) !important; border-color: rgba(239, 68, 68, 0.2) !important; } html[data-theme="dark"] .stats-row .stat-card:nth-child(4) { background: linear-gradient(180deg, rgba(74, 47, 14, 0.98), rgba(34, 24, 11, 0.96)) !important; border-color: rgba(245, 158, 11, 0.2) !important; } html[data-theme="dark"] .stats-row .stat-card:nth-child(5) { background: linear-gradient(180deg, rgba(17, 64, 39, 0.98), rgba(11, 31, 21, 0.96)) !important; border-color: rgba(34, 197, 94, 0.2) !important; } html[data-theme="dark"] .mobile-nav-glyph { background: rgba(17, 30, 49, 0.92) !important; border-color: rgba(137, 155, 179, 0.16) !important; color: var(--text-main); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .mobile-quick-dock-inner { background: rgba(12, 21, 35, 0.94) !important; border-color: rgba(137, 155, 179, 0.16) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .mobile-header-icon { background: rgba(17, 30, 49, 0.92) !important; border-color: rgba(137, 155, 179, 0.16) !important; color: var(--text-main); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .detail-drawer { background: linear-gradient(180deg, rgba(12, 21, 35, 0.98), rgba(16, 27, 45, 0.94)) !important; border-color: rgba(137, 155, 179, 0.16) !important; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .detail-header { background: rgba(12, 21, 35, 0.94) !important; border-color: rgba(137, 155, 179, 0.16) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-theme="dark"] .detail-header h4 { color: var(--text-main); } html[data-theme="dark"] .boss-suggestion-block { background: rgba(245, 158, 11, 0.08) !important; border-color: rgba(245, 158, 11, 0.18) !important; } html[data-theme="dark"] .boss-suggestion-title { color: #fbbf24 !important; } html[data-theme="dark"] .risk-pill.high { background: rgba(185, 28, 28, 0.16); color: #fca5a5; } html[data-theme="dark"] .risk-pill.medium { background: rgba(180, 83, 9, 0.16); color: #fcd34d; } html[data-theme="dark"] .risk-pill.low { background: rgba(22, 101, 52, 0.16); color: #86efac; } html[data-theme="dark"] .priority-option.clear { background: rgba(17, 30, 49, 0.92) !important; color: var(--text-sub) !important; } html[data-theme="dark"] .badge.priority-p3, html[data-theme="dark"] .badge.priority-p4, html[data-theme="dark"] .badge.priority-p5 { background: rgba(17, 30, 49, 0.92) !important; color: var(--text-main) !important; } html[data-theme="dark"] .mailbox-theme-panel { background: rgba(12, 21, 35, 0.92) !important; border-color: rgba(137, 155, 179, 0.16) !important; } html[data-theme="dark"] .boss-suggestion-item { background: rgba(17, 30, 49, 0.92) !important; border-color: rgba(245, 158, 11, 0.18) !important; color: #fbbf24; } html[data-theme="dark"] .boss-suggestion-meta { color: #f59e0b !important; } html[data-theme="dark"] .boss-edit-notification-item { background: rgba(17, 30, 49, 0.92) !important; border-color: rgba(96, 165, 250, 0.18) !important; color: #93c5fd; } button, input, textarea, select { font: inherit; } button { border: 0; background: none; cursor: pointer; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.18s var(--ease-out), background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), color 0.22s var(--ease-out), opacity 0.22s var(--ease-out); } button:active { transform: scale(0.98); } a { color: inherit; text-decoration: none; } .hidden { display: none !important; } .native-mobile-body { padding: 0 !important; } .studio-shell { max-width: 1580px; margin: 0 auto; } .studio-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 20px 24px; border: 1px solid rgba(148, 163, 184, 0.16); background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 28px; box-shadow: var(--shadow-soft); margin-bottom: 20px; position: sticky; top: 12px; z-index: 20; } .toolbar-brand { min-width: 280px; } .toolbar-brand small { display: block; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; } .toolbar-brand h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.1; letter-spacing: -0.04em; } .toolbar-brand p { margin: 0; color: var(--text-sub); font-size: 15px; max-width: 640px; } .toolbar-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .studio-toolbar.native-mobile-toolbar { position: static; padding: 10px 12px; border-radius: 22px; gap: 10px; } .studio-toolbar.native-mobile-toolbar .toolbar-brand { min-width: 0; } .studio-toolbar.native-mobile-toolbar .toolbar-brand small, .studio-toolbar.native-mobile-toolbar .toolbar-brand p { display: none; } .studio-toolbar.native-mobile-toolbar .toolbar-brand-lockup { margin-bottom: 0; gap: 10px; } .studio-toolbar.native-mobile-toolbar .toolbar-brand-lockup .brand-mark { width: 52px; height: 46px; } .studio-toolbar.native-mobile-toolbar .toolbar-brand-lockup .app-brand-title { font-size: 18px; line-height: 1; } .studio-toolbar.native-mobile-toolbar .toolbar-brand-lockup .app-brand-tagline { display: none; } .studio-toolbar.native-mobile-toolbar .toolbar-controls { width: 100%; display: grid; gap: 6px; justify-content: stretch; } .studio-toolbar.native-mobile-toolbar .toolbar-controls>* { width: 100%; min-width: 0; } .studio-toolbar.native-mobile-toolbar .segmented { display: grid; width: 100%; gap: 4px; } .studio-toolbar.native-mobile-toolbar .segmented.theme-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); } .studio-toolbar.native-mobile-toolbar .segmented:not(.theme-mode) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-toolbar.native-mobile-toolbar .segmented button, .studio-toolbar.native-mobile-toolbar .toolbar-button { width: 100%; min-width: 0; font-size: 12px; padding-left: 10px; padding-right: 10px; } .segmented { display: inline-flex; background: #eff4fb; padding: 4px; border-radius: 999px; gap: 4px; border: 1px solid rgba(148, 163, 184, 0.18); } .segmented button { min-height: 40px; min-width: 92px; padding: 0 18px; border-radius: 999px; font-size: 14px; color: var(--text-sub); transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease; } .segmented button.active { background: var(--bg-card); color: var(--text-main); box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08); } .toolbar-button { min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.84); color: var(--text-main); transition: transform 0.2s ease, border-color 0.2s ease; } .toolbar-button:hover, .segmented button:hover, .action-button:hover, .nav-item:hover, .event-card:hover, .todo-card:hover, .month-cell:hover, .month-entry:hover, .week-chip:hover, .assistant-chip:hover { transform: translateY(-1px); } .prototype-frame { position: relative; border-radius: 36px; box-shadow: var(--shadow-soft); border: 1px solid rgba(148, 163, 184, 0.16); overflow: hidden; overflow: clip; background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.96)); } .prototype-frame.boss-welcome-standalone-frame { background: transparent; border-color: transparent; box-shadow: none; } .prototype-frame.mobile-preview { max-width: 430px; margin: 0 auto; border-radius: 42px; padding-top: 12px; overflow: hidden; } @media (min-width: 768px) and (max-width: 1080px) { .prototype-frame.mobile-preview:not(.native-mobile-frame) { max-width: min(100%, 720px); } } .studio-shell.native-mobile-studio { max-width: none; margin: 0; } .prototype-frame.mobile-preview::before { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 110px; height: 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.12); z-index: 5; } .app-shell { min-height: 860px; display: grid; grid-template-columns: 230px minmax(0, 1fr); background: linear-gradient(180deg, rgba(219, 234, 254, 0.36), transparent 25%), var(--bg-card); transition: grid-template-columns 0.28s var(--ease-emphasized); } .app-shell.side-collapsed { grid-template-columns: 68px minmax(0, 1fr); } .app-shell.mobile-shell { display: block; min-height: 840px; padding-bottom: calc(var(--mobile-nav-height, 72px) + var(--mobile-safe-bottom, 0px) + 16px); -webkit-overflow-scrolling: touch; } .prototype-frame.mobile-preview.native-mobile-frame { max-width: none; min-height: 100svh; border-radius: 0; padding-top: 0; border: 0; box-shadow: none; background: transparent; } .prototype-frame.mobile-preview.native-mobile-frame::before { display: none; } .prototype-frame.mobile-preview.native-mobile-frame .app-shell.mobile-shell { min-height: 100svh; background: linear-gradient(180deg, rgba(219, 234, 254, 0.24), transparent 26%), var(--bg-card); } .side-nav { padding: 24px 16px; border-right: 1px solid rgba(226, 232, 240, 0.95); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.98)); display: flex; flex-direction: column; gap: 16px; position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100dvh; align-self: start; box-sizing: border-box; z-index: 100; transition: width 0.28s var(--ease-emphasized); overflow: hidden; overflow-y: auto; overscroll-behavior: contain; } .side-nav .nav-group { display: flex; flex-direction: column; gap: 6px; } .side-nav .nav-item { justify-content: flex-start; padding: 0 14px; } .side-nav .nav-item-main { justify-content: flex-start; text-align: left; } /* ── 侧边栏收起态 ── */ .side-nav.collapsed { width: 68px; padding: 24px 10px; } .side-nav.collapsed .nav-brand h2, .side-nav.collapsed .nav-brand p, .side-nav.collapsed .nav-brand-copy, .side-nav.collapsed .nav-brand-tagline, .side-nav.collapsed .nav-label, .side-nav.collapsed .nav-micro-heart, .side-nav.collapsed .nav-footer .mini-label, .side-nav.collapsed .nav-settings-trigger span:not(.nav-settings-trigger-icon), .side-nav.collapsed .nav-settings-menu { display: none; } .side-nav.collapsed .nav-item { justify-content: flex-start; padding: 0 14px; } .side-nav.collapsed .nav-settings-trigger { justify-content: center; } .side-nav.collapsed .nav-brand-top { flex-direction: column; align-items: center; gap: 10px; } /* ── 收起/展开切换按钮 ── */ .nav-brand { padding: 8px 8px 36px; border-bottom: 1px solid rgba(226, 232, 240, 0.85); } .side-nav:not(.collapsed) .nav-brand { padding-inline: 12px; text-align: left; } .nav-brand-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .side-nav:not(.collapsed) .nav-brand-top { position: relative; justify-content: flex-start; min-height: 72px; } .side-nav:not(.collapsed) .nav-item { justify-content: flex-start; } .side-nav:not(.collapsed) .nav-item-main { justify-content: flex-start; text-align: left; } .side-nav:not(.collapsed) .nav-item-main { flex-direction: row; justify-content: flex-start; gap: 10px; } .side-nav .nav-item-main { flex-direction: row; justify-content: flex-start; gap: 10px; } .nav-icon { width: 20px; height: 20px; display: inline-block; flex-shrink: 0; } .nav-wechat-icon { display: inline-flex; align-items: center; justify-content: center; transform: none; } .wechat-action-icon-img { display: block; width: 100%; height: 100%; object-fit: contain; } .nav-wechat-icon .wechat-action-icon-img { width: 100%; height: 100%; display: block; } .nav-wechat-icon .sidebar-wechat-icon-img { width: 100%; height: 100%; display: block; object-fit: contain; transform: scale(1.08); transform-origin: center; opacity: 0.84; filter: drop-shadow(0.28px 0 0 currentColor) drop-shadow(-0.28px 0 0 currentColor) drop-shadow(0 0.28px 0 currentColor) drop-shadow(0 -0.28px 0 currentColor); } .nav-wechat-icon svg { width: 100%; height: 100%; display: block; } .wechat-recognition-icon .wechat-action-icon-img { width: 100%; height: 100%; display: block; } .homepage-panel-icon-svg, .homepage-panel-icon-img { display: block; width: 100%; height: 100%; object-fit: contain; } .brand-mark { box-sizing: border-box; flex: 0 0 auto; width: 65px; height: 65px; border: 0; padding: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; box-shadow: none; transition: transform 0.2s, filter 0.2s; appearance: none; -webkit-appearance: none; } .brand-mark-svg, .brand-mark-image { width: 100%; height: 100%; display: block; } .brand-mark-svg { overflow: visible; filter: drop-shadow(0 14px 28px rgba(37, 99, 235, 0.2)); } .brand-mark-image { object-fit: contain; object-position: center; filter: none; transform: scale(1); transform-origin: center; } .brand-mark:hover { filter: brightness(1.04); } .brand-mark:active { transform: scale(0.96); } .brand-mark-static { cursor: default; } .brand-mark-static:hover { filter: none; } .brand-mark-static:active { transform: none; } .side-nav.collapsed .brand-mark { width: 50px; height: 44px; } .side-nav:not(.collapsed) .brand-mark { margin-inline: 0; } .nav-brand-lockup { display: grid; gap: 14px; min-width: 0; width: 100%; } .nav-brand-row { display: flex; align-items: center; gap: 14px; min-width: 0; width: 100%; } .nav-brand-copy, .app-brand-copy { display: grid; gap: 4px; min-width: 0; } .app-brand-lockup-image { display: block; width: min(100%, 340px); height: auto; object-fit: contain; } .nav-brand-title, .app-brand-title { margin: 0; color: var(--text-main); font-weight: 800; letter-spacing: -0.08em; line-height: 0.94; white-space: nowrap; } .nav-brand-title { font-size: 28px; } .nav-brand-tagline, .app-brand-tagline { margin: 0; color: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; white-space: nowrap; } .nav-brand-tagline { letter-spacing: 0.04em; white-space: normal; line-height: 1.25; text-align: center; justify-self: center; } .toolbar-brand-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; min-width: 0; } .toolbar-brand-lockup .app-brand-lockup-image { width: min(100%, 420px); } .toolbar-brand-lockup .brand-mark { width: 65px; height: 65px; } .toolbar-brand-lockup .app-brand-title { font-size: 38px; } .toolbar-brand-lockup .app-brand-tagline { font-size: 13px; letter-spacing: 0.22em; } .nav-group { display: flex; flex-direction: column; gap: 6px; } .side-nav .nav-group { flex-direction: column; gap: 6px; } .nav-item { min-height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: flex-start; position: relative; padding: 0 14px; font-size: 15px; color: var(--text-sub); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .nav-item-main, .mobile-nav-item-main { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; width: 100%; font-weight: 600; } .nav-item .nav-micro-heart { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); } .nav-micro-heart { min-width: 28px; height: 22px; padding: 0 7px 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(244, 63, 94, 0.24); color: #e11d48; font-size: 11px; line-height: 1; box-shadow: 0 6px 16px rgba(244, 63, 94, 0.12); flex-shrink: 0; } .nav-micro-heart-icon { font-size: 10px; line-height: 1; } .nav-micro-heart-count { font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .nav-item.active { background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 0.9)); color: white; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.2); } .nav-item.active .nav-micro-heart, .mobile-nav-item.active .nav-micro-heart { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: #fff1f2; box-shadow: none; } .nav-footer { margin-top: auto; border-top: 1px solid rgba(226, 232, 240, 0.9); padding: 14px 8px 0; display: grid; gap: 10px; color: var(--text-sub); font-size: 14px; } .nav-footer .mini-label { color: var(--text-soft); font-size: 12px; } .nav-settings-shell { position: relative; display: grid; width: 100%; gap: 10px; justify-items: center; } .nav-settings-trigger { width: fit-content; min-height: 40px; padding: 0; border-radius: 0; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-inline: auto; background: transparent; color: var(--text-main); box-shadow: none; transition: color 160ms ease, opacity 160ms ease, background 160ms ease; } .nav-settings-trigger:hover { background: transparent; opacity: 0.88; } .nav-settings-trigger-main { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; } .nav-settings-trigger-icon, .nav-settings-row-icon, .nav-settings-chevron { flex: 0 0 auto; } .nav-settings-trigger-icon { box-sizing: border-box; width: 36px; height: 36px; padding: 6px; border-radius: 13px; color: #ffffff; background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 0.88)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 22px rgba(37, 99, 235, 0.2); } .nav-settings-row-icon { box-sizing: border-box; width: 36px; height: 36px; padding: 6px; border-radius: 13px; color: #ffffff; background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 0.9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px rgba(37, 99, 235, 0.18); transition: transform 160ms var(--ease-out), background 160ms ease, color 160ms ease, box-shadow 160ms ease; } .nav-settings-logout .nav-settings-row-icon { color: var(--danger); background: linear-gradient(145deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03)); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.10), 0 2px 8px rgba(239, 68, 68, 0.06); } .nav-settings-chevron { width: 14px; height: 14px; color: #7c8ba1; justify-self: center; transition: transform 160ms ease, color 160ms ease; } .nav-settings-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); padding: 10px; border-radius: 20px; border: 1px solid rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.98); box-shadow: 0 28px 56px rgba(15, 23, 42, 0.16); backdrop-filter: blur(16px); z-index: 10; display: grid; gap: 10px; } .nav-settings-head { display: grid; gap: 6px; padding: 2px 2px 0; } .nav-settings-identity { display: grid; gap: 4px; } .nav-settings-id-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); min-height: 50px; align-items: center; gap: 6px; padding: 0; color: var(--text-sub); font-size: 13px; line-height: 1.3; } .nav-settings-id-row>div { display: grid; gap: 0; min-width: 0; align-self: center; } .nav-settings-id-row .mini-label { line-height: 1.18; } .nav-settings-id-row strong { color: var(--text-main); font-size: 14px; font-weight: 700; letter-spacing: -0.02em; } .nav-settings-divider { height: 1px; background: rgba(226, 232, 240, 0.9); } .nav-settings-actions { display: grid; gap: 4px; } .nav-settings-row { width: 100%; min-height: 50px; padding: 0; border-radius: 16px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; align-items: center; gap: 6px; color: var(--text-main); background: transparent; border: 1px solid transparent; text-align: left; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .nav-settings-row:hover { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.12); box-shadow: 0 14px 26px rgba(15, 23, 42, 0.06); transform: translateY(-1px); } .nav-settings-row:hover .nav-settings-row-icon { color: var(--brand); background: linear-gradient(180deg, rgba(239, 246, 255, 1), rgba(219, 234, 254, 0.96)); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.16), 0 12px 22px rgba(37, 99, 235, 0.12); } .nav-settings-row:hover .nav-settings-chevron { color: var(--brand); transform: translateX(2px); } .nav-settings-row-copy { display: grid; gap: 0; min-width: 0; align-self: center; justify-self: stretch; } .nav-settings-row-copy strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-settings-row-copy span { display: -webkit-box; color: var(--text-soft); font-size: 10px; line-height: 1.28; max-height: calc(1.28em * 2); -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nav-settings-theme { display: grid; gap: 6px; padding: 4px 0 0; } .nav-settings-theme-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-main); font-size: 14px; font-weight: 700; } .nav-settings-theme-segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 14px; background: rgba(148, 163, 184, 0.12); } .nav-settings-theme-segmented button { min-height: 34px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--text-sub); transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease; } .nav-settings-theme-segmented button.active { background: #ffffff; color: var(--text-main); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .nav-settings-logout { color: #dc2626; } .nav-settings-logout .nav-settings-row-icon, .nav-settings-logout .nav-settings-chevron { color: #dc2626; } .nav-settings-logout .nav-settings-row-icon { background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.96)); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.14), 0 10px 18px rgba(239, 68, 68, 0.08); } html[data-theme="dark"] .nav-settings-trigger { border: none; background: transparent; color: #e2e8f0; box-shadow: none; } html[data-theme="dark"] .nav-settings-trigger:hover { background: transparent; opacity: 0.9; } html[data-theme="dark"] .nav-settings-menu { border-color: rgba(148, 163, 184, 0.14); background: rgba(15, 23, 42, 0.96); box-shadow: 0 32px 60px rgba(2, 6, 23, 0.44); } html[data-theme="dark"] .nav-settings-id-row, html[data-theme="dark"] .nav-settings-row-copy strong, html[data-theme="dark"] .nav-settings-theme-label { color: #e2e8f0; } html[data-theme="dark"] .nav-settings-row-copy span, html[data-theme="dark"] .nav-settings-chevron { color: #94a3b8; } html[data-theme="dark"] .nav-settings-trigger-icon { color: #ffffff; background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 0.9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 30px rgba(2, 6, 23, 0.34); } html[data-theme="dark"] .nav-settings-row-icon { color: #ffffff; background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 0.9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 16px 32px rgba(2, 6, 23, 0.32); } html[data-theme="dark"] .nav-settings-divider { background: rgba(51, 65, 85, 0.9); } html[data-theme="dark"] .nav-settings-row:hover { background: rgba(59, 130, 246, 0.14); border-color: rgba(96, 165, 250, 0.18); } html[data-theme="dark"] .nav-settings-row:hover .nav-settings-row-icon { color: #f8fafc; background: linear-gradient(180deg, rgba(59, 130, 246, 0.32), rgba(37, 99, 235, 0.22)); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18), 0 14px 26px rgba(2, 6, 23, 0.28); } html[data-theme="dark"] .nav-settings-row:hover .nav-settings-chevron { color: #cbd5e1; } html[data-theme="dark"] .nav-settings-theme-segmented { background: rgba(51, 65, 85, 0.48); } html[data-theme="dark"] .nav-settings-theme-segmented button { color: #94a3b8; } html[data-theme="dark"] .nav-settings-theme-segmented button.active { background: rgba(255, 255, 255, 0.08); color: #f8fafc; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16); } .team-invite-shell { display: grid; gap: 20px; } .team-invite-hero { display: grid; grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr); gap: 18px; align-items: stretch; } .team-lead-card, .team-compose-card, .team-panel-card { position: relative; overflow: hidden; padding: 22px; border-radius: 28px; border: 1px solid rgba(191, 219, 254, 0.34); background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(241, 246, 255, 0.96)); box-shadow: 0 18px 40px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .team-lead-card { background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 34%), linear-gradient(145deg, rgba(219, 234, 254, 0.76), rgba(255, 255, 255, 0.98) 36%, rgba(241, 246, 255, 0.96)); } .team-lead-card::after { content: ""; position: absolute; right: -54px; bottom: -72px; width: 176px; height: 176px; border-radius: 999px; background: radial-gradient(circle, rgba(191, 219, 254, 0.88), transparent 70%); opacity: 0.78; pointer-events: none; } .team-card-eyebrow { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(37, 99, 235, 0.1); color: #1d4ed8; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .team-lead-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-top: 16px; } .team-avatar { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #60a5fa); color: #ffffff; font-size: 22px; font-weight: 800; letter-spacing: -0.04em; box-shadow: 0 14px 28px rgba(37, 99, 235, 0.2); flex: 0 0 auto; } .team-avatar.is-lead { width: 64px; height: 64px; border-radius: 20px; font-size: 26px; } .team-avatar.role-assistant { background: linear-gradient(135deg, #0f766e, #2dd4bf); box-shadow: 0 14px 28px rgba(15, 118, 110, 0.2); } .team-avatar.role-pending { background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 14px 28px rgba(217, 119, 6, 0.2); } .team-lead-copy, .team-member-title { min-width: 0; } .team-lead-copy strong, .team-member-title strong { display: block; margin: 0; color: var(--text-main); letter-spacing: -0.05em; } .team-lead-copy strong { font-size: clamp(28px, 2.2vw, 36px); line-height: 1; } .team-lead-copy span, .team-member-title span { display: block; margin-top: 8px; color: var(--text-sub); font-size: 14px; line-height: 1.6; } .team-metric-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; } .team-metric-chip { padding: 14px 16px; border-radius: 20px; border: 1px solid rgba(191, 219, 254, 0.42); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .team-metric-chip small { display: block; margin-bottom: 6px; color: var(--text-soft); font-size: 12px; line-height: 1.4; } .team-metric-chip strong { display: block; color: var(--text-main); font-size: 24px; line-height: 1; letter-spacing: -0.05em; } .team-compose-card h5, .team-panel-head h5 { margin: 0; color: var(--text-main); font-size: 20px; letter-spacing: -0.04em; } .team-compose-card p, .team-panel-head p { margin: 8px 0 0; color: var(--text-sub); font-size: 14px; line-height: 1.65; } .team-compose-card .form-grid { margin-top: 18px; } .team-compose-note { margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.12); color: var(--text-sub); font-size: 13px; line-height: 1.6; } .team-section-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); gap: 18px; align-items: stretch; } .team-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; } .team-count-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(37, 99, 235, 0.16); background: rgba(37, 99, 235, 0.08); color: #1d4ed8; font-size: 12px; font-weight: 700; white-space: nowrap; } .team-roster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .team-roster-grid.invites { grid-template-columns: 1fr; } .assistant-message.ai { background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(226, 232, 240, 0.92); margin-right: 18px; } .assistant-message.ai.is-boss-notice { position: relative; overflow: hidden; } .assistant-message.ai.is-boss-notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #ef4444; z-index: 1; } .team-member-card { position: relative; padding: 18px; border-radius: 22px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(255, 255, 255, 0.76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94); display: grid; gap: 12px; } .team-member-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(37, 99, 235, 0.92), rgba(96, 165, 250, 0.52)); opacity: 0.92; } .team-member-card.role-assistant::before { background: linear-gradient(90deg, rgba(13, 148, 136, 0.92), rgba(45, 212, 191, 0.56)); } .team-member-card.role-pending::before { background: linear-gradient(90deg, rgba(217, 119, 6, 0.92), rgba(251, 191, 36, 0.58)); } .team-member-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .team-member-copy { display: flex; align-items: center; gap: 12px; min-width: 0; } .team-member-title strong { font-size: 20px; line-height: 1.15; } .team-role-pill, .team-invite-code { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } .team-role-pill { border: 1px solid rgba(37, 99, 235, 0.14); background: rgba(37, 99, 235, 0.08); color: #1d4ed8; } .team-role-pill.assistant { border-color: rgba(13, 148, 136, 0.16); background: rgba(13, 148, 136, 0.08); color: #0f766e; } .team-role-pill.pending { border-color: rgba(217, 119, 6, 0.18); background: rgba(217, 119, 6, 0.08); color: #b45309; } .team-member-meta { display: grid; gap: 6px; } .team-meta-row { display: flex; align-items: center; gap: 6px; color: var(--text-sub); font-size: 13px; line-height: 1.5; } .team-meta-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(37, 99, 235, 0.36); flex: 0 0 auto; } .team-invite-code { width: fit-content; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(15, 23, 42, 0.06); color: var(--text-main); letter-spacing: 0.08em; } .team-empty-card { padding: 20px; border-radius: 22px; border: 1px dashed rgba(148, 163, 184, 0.42); background: rgba(248, 250, 252, 0.56); color: var(--text-sub); font-size: 14px; line-height: 1.7; } html[data-theme="dark"] .team-lead-card, html[data-theme="dark"] .team-compose-card, html[data-theme="dark"] .team-panel-card { border-color: rgba(90, 110, 138, 0.22); background: linear-gradient(180deg, rgba(13, 23, 39, 0.98), rgba(16, 27, 45, 0.96)); box-shadow: 0 24px 46px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .team-lead-card { background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 34%), linear-gradient(145deg, rgba(21, 43, 78, 0.94), rgba(13, 23, 39, 0.98) 58%); } html[data-theme="dark"] .team-lead-card::after { background: radial-gradient(circle, rgba(59, 130, 246, 0.32), transparent 70%); } html[data-theme="dark"] .team-card-eyebrow { background: rgba(96, 165, 250, 0.12); color: #bfdbfe; } html[data-theme="dark"] .team-lead-copy strong, html[data-theme="dark"] .team-member-title strong, html[data-theme="dark"] .team-compose-card h5, html[data-theme="dark"] .team-panel-head h5, html[data-theme="dark"] .team-metric-chip strong { color: #f8fafc; } html[data-theme="dark"] .team-lead-copy span, html[data-theme="dark"] .team-member-title span, html[data-theme="dark"] .team-compose-card p, html[data-theme="dark"] .team-panel-head p, html[data-theme="dark"] .team-meta-row, html[data-theme="dark"] .team-empty-card, html[data-theme="dark"] .team-compose-note, html[data-theme="dark"] .team-metric-chip small { color: #9fb2c9; } html[data-theme="dark"] .team-metric-chip, html[data-theme="dark"] .team-member-card { border-color: rgba(90, 110, 138, 0.24); background: rgba(17, 30, 49, 0.74); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .team-count-badge { border-color: rgba(96, 165, 250, 0.18); background: rgba(96, 165, 250, 0.1); color: #bfdbfe; } html[data-theme="dark"] .team-role-pill { border-color: rgba(96, 165, 250, 0.18); background: rgba(96, 165, 250, 0.1); color: #bfdbfe; } html[data-theme="dark"] .team-role-pill.assistant { border-color: rgba(45, 212, 191, 0.16); background: rgba(45, 212, 191, 0.1); color: #99f6e4; } html[data-theme="dark"] .team-role-pill.pending { border-color: rgba(251, 191, 36, 0.18); background: rgba(251, 191, 36, 0.1); color: #fcd34d; } html[data-theme="dark"] .team-invite-code { border-color: rgba(90, 110, 138, 0.26); background: rgba(255, 255, 255, 0.05); color: #e2e8f0; } html[data-theme="dark"] .team-compose-note, html[data-theme="dark"] .team-empty-card { border-color: rgba(90, 110, 138, 0.3); background: rgba(17, 30, 49, 0.52); } @media (max-width: 1040px) { .team-invite-hero, .team-section-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .team-lead-card, .team-compose-card, .team-panel-card { padding: 18px; border-radius: 24px; } .team-lead-main { align-items: flex-start; } .team-lead-copy strong { font-size: 28px; } .team-metric-row, .team-roster-grid { grid-template-columns: 1fr; } .team-panel-head { flex-direction: column; align-items: stretch; } .team-count-badge { width: fit-content; } } .assistant-workflow-nav { padding: 28px 20px 28px; gap: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)); } .assistant-workflow-nav .nav-brand { padding: 4px 12px 18px; border-bottom: 1px solid rgba(226, 232, 240, 0.92); } .assistant-workflow-nav .brand-mark { width: 56px; height: 56px; border-radius: 20px; font-size: 18px; margin-bottom: 18px; } .assistant-workflow-nav .nav-brand h2 { margin: 0 0 10px; font-size: 28px; font-weight: 800; letter-spacing: -0.06em; color: #0f172a; } .assistant-workflow-nav .nav-brand p { font-size: 15px; line-height: 1.65; color: #64748b; } .assistant-workflow-header { padding: 0 12px; color: #8191a7; font-size: 15px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .assistant-workflow-list { display: flex; flex-direction: column; gap: 14px; padding: 0 6px; } .workflow-nav-item { min-height: 76px; padding: 0 20px; border-radius: 28px; border: 1px solid transparent; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; background: transparent; box-shadow: none; color: #314e73; } .workflow-nav-item:hover { background: rgba(59, 130, 246, 0.06); transform: translateX(3px); } .workflow-nav-copy { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; } .workflow-nav-label { font-size: 18px; font-weight: 700; letter-spacing: -0.04em; white-space: nowrap; color: inherit; } .workflow-nav-hint { font-size: 14px; font-weight: 500; color: #37557a; letter-spacing: -0.02em; flex-shrink: 0; text-align: right; white-space: nowrap; } .workflow-nav-item.active { min-height: 78px; background: linear-gradient(135deg, rgba(61, 118, 243, 1), rgba(77, 123, 241, 0.96)); color: white; box-shadow: 0 18px 36px rgba(61, 118, 243, 0.28); } .workflow-nav-item.active .workflow-nav-hint { color: rgba(255, 255, 255, 0.96); } .workflow-nav-item .nav-micro-heart { margin-left: 6px; min-width: 34px; height: 24px; padding: 0 7px 0 6px; gap: 4px; font-size: 11px; transform: translateY(0); } .workflow-nav-item .nav-micro-heart-count { min-width: 10px; text-align: center; font-size: 11px; } .assistant-today-group { margin-top: auto; display: grid; gap: 12px; padding: 0 6px; } .assistant-today-list { display: grid; gap: 10px; } .assistant-today-item { min-height: 56px; padding: 0 12px; border-radius: 20px; display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); align-items: center; gap: 16px; color: #385274; text-align: left; background: transparent; } .assistant-today-item:hover { background: rgba(59, 130, 246, 0.05); } .assistant-today-date { min-width: 0; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: #24446e; white-space: nowrap; } .assistant-today-note { min-width: 0; display: block; font-size: 16px; color: #4b6380; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="dark"] .assistant-workflow-nav { background: linear-gradient(180deg, rgba(10, 18, 31, 0.98), rgba(13, 23, 39, 0.96)) !important; } html[data-theme="dark"] .assistant-workflow-header { color: rgba(165, 180, 205, 0.82); } html[data-theme="dark"] .assistant-workflow-nav .nav-brand { border-bottom-color: rgba(90, 110, 138, 0.26); } html[data-theme="dark"] .assistant-workflow-nav .nav-brand h2 { color: #e8eefc; } html[data-theme="dark"] .assistant-workflow-nav .nav-brand p { color: #a5b4cb; } html[data-theme="dark"] .workflow-nav-item { color: #d9e5f7; } html[data-theme="dark"] .workflow-nav-item:hover { background: rgba(96, 165, 250, 0.1); } html[data-theme="dark"] .workflow-nav-hint { color: rgba(196, 211, 231, 0.86); } html[data-theme="dark"] .assistant-today-item:hover { background: rgba(96, 165, 250, 0.08); } html[data-theme="dark"] .assistant-today-date, html[data-theme="dark"] .assistant-today-note { color: #c7d5e8; } .main-shell { min-width: 0; display: flex; flex-direction: column; } .page-header { padding: 28px 32px 18px; border-bottom: 1px solid rgba(226, 232, 240, 0.9); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; } .page-header.mobile { padding: 26px 22px 16px; } .header-topline { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .title-stack small { display: block; color: var(--brand); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; } .title-stack h3 { margin: 0; font-size: 34px; letter-spacing: -0.05em; } .title-stack p { margin: 8px 0 0; color: var(--text-sub); font-size: 15px; } .title-stack.mobile h3 { font-size: 26px; } .header-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .header-strip { display: flex; gap: 12px; flex-wrap: wrap; } .header-strip-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; } .info-chip { min-height: 40px; border-radius: 999px; padding: 0 16px; display: inline-flex; align-items: center; gap: 10px; color: var(--text-sub); background: rgba(248, 250, 252, 0.88); border: 1px solid rgba(226, 232, 240, 0.9); font-size: 14px; } .assistant-home-header { padding: 28px 36px 28px; background: rgba(255, 255, 255, 0.86); } .assistant-home-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; } .assistant-home-title-stack small { display: block; color: #356df2; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } .assistant-home-title-stack h3 { margin: 0; color: #0f172a; font-size: 42px; font-weight: 800; letter-spacing: -0.06em; line-height: 1.05; } .assistant-home-title-stack p { margin: 12px 0 0; color: #64748b; font-size: 17px; line-height: 1.55; } .assistant-home-date-nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; } .assistant-home-date-nav .ghost-button, .assistant-home-bottomline .ghost-button, .assistant-home-bottomline .action-button, .assistant-home-view-badge { min-height: 56px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 600; box-shadow: none; } .assistant-home-date-nav .ghost-button, .assistant-home-bottomline .ghost-button { border-color: rgba(226, 232, 240, 0.96); background: rgba(255, 255, 255, 0.88); color: #334155; } .assistant-home-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .assistant-home-toolbar-left, .assistant-home-toolbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .assistant-home-segmented { padding: 6px; gap: 6px; background: #dfe8f7; border-color: rgba(211, 221, 236, 0.96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54); } .assistant-home-segmented button { min-width: 138px; min-height: 62px; padding: 0 26px; font-size: 18px; font-weight: 700; color: #4f6480; } .assistant-home-segmented button.active { background: rgba(255, 255, 255, 0.96); color: #1e293b; box-shadow: 0 10px 24px rgba(148, 163, 184, 0.18); } .assistant-home-view-badge { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(226, 232, 240, 0.96); color: #475569; } .assistant-home-bottomline .action-button.secondary { background: rgba(37, 99, 235, 0.12); color: #356df2; } @media (max-width: 1320px) { .assistant-home-title-stack h3 { font-size: 38px; } .assistant-home-segmented button { min-width: 110px; } } html[data-theme="dark"] .assistant-home-header { background: rgba(11, 19, 32, 0.86) !important; } html[data-theme="dark"] .assistant-home-title-stack small { color: #7aa2ff; } html[data-theme="dark"] .assistant-home-title-stack h3 { color: #e8eefc; } html[data-theme="dark"] .assistant-home-title-stack p, html[data-theme="dark"] .assistant-home-date-nav .ghost-button, html[data-theme="dark"] .assistant-home-bottomline .ghost-button, html[data-theme="dark"] .assistant-home-view-badge { color: #c4d3e7; } html[data-theme="dark"] .assistant-home-date-nav .ghost-button, html[data-theme="dark"] .assistant-home-bottomline .ghost-button, html[data-theme="dark"] .assistant-home-view-badge { background: rgba(18, 29, 47, 0.88); border-color: rgba(94, 114, 141, 0.32); } html[data-theme="dark"] .assistant-home-segmented { background: rgba(28, 41, 63, 0.92); border-color: rgba(90, 110, 138, 0.3); } html[data-theme="dark"] .assistant-home-segmented button { color: #9fb3d1; } html[data-theme="dark"] .assistant-home-segmented button.active { background: rgba(245, 248, 255, 0.94); color: #162033; } .page-body { padding: 26px 32px 32px; display: grid; gap: 22px; animation: fade-slide 0.35s ease; } .page-body.mobile { padding: 20px 18px 26px; transform: translateZ(0); } .page-body.calendar-focus-mode { padding-top: 20px; gap: 0; } .stats-row { display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; } /* ── Stagger index by nth-child ── */ .stats-row .stat-card:nth-child(1) { --stagger: 0; } .stats-row .stat-card:nth-child(2) { --stagger: 1; } .stats-row .stat-card:nth-child(3) { --stagger: 2; } .stats-row .stat-card:nth-child(4) { --stagger: 3; } .stats-row .stat-card:nth-child(5) { --stagger: 4; } .stats-row .stat-card:nth-child(6) { --stagger: 5; } .stat-card { position: relative; min-height: 154px; padding: 18px 18px 16px; border-radius: 24px; border: 1px solid rgba(30, 64, 175, 0.24); background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.92)); color: white; box-shadow: 0 22px 56px rgba(30, 64, 175, 0.16); display: grid; gap: 6px; align-content: start; overflow: hidden; } .stat-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(147, 197, 253, 0.2), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%); pointer-events: none; } .stat-card>* { position: relative; z-index: 1; } .stat-card small, .stat-card-label { display: block; color: rgba(255, 255, 255, 0.72); font-size: 13px; letter-spacing: 0.02em; line-height: 1.25; } .stat-card strong, .stat-card-value { display: block; font-size: clamp(24px, 1.8vw, 38px); letter-spacing: -0.04em; color: white; line-height: 0.98; } .stat-card-note, .stat-card-subnote, .stat-card span { color: rgba(255, 255, 255, 0.84); font-size: 13px; line-height: 1.45; } .stat-card-note { margin-top: auto; } .stat-card-subnote { color: rgba(255, 255, 255, 0.66); font-size: 11px; line-height: 1.45; margin-top: 0; } .stat-card-title-row { display: flex; gap: 6px; align-items: flex-start; } .stat-card-priority { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 32px; padding: 0 10px; border-radius: 12px; background: rgba(220, 38, 38, 0.28); border: 1px solid rgba(248, 113, 113, 0.4); color: #fecaca; font-size: 16px; font-weight: 700; letter-spacing: -0.03em; flex-shrink: 0; } .stat-card-title { margin: 0; font-size: clamp(16px, 1.18vw, 22px); line-height: 1.1; letter-spacing: -0.04em; color: white; word-break: break-word; } .stat-card-title.is-empty { font-size: 18px; color: rgba(255, 255, 255, 0.86); } .stat-card.metric-card { grid-template-rows: auto auto 1fr auto auto; } .stat-card.metric-card .stat-card-value { margin-top: 2px; } .stat-card.metric-card .stat-card-note { max-width: none; } .stat-card.featured-card { grid-column: span 2; grid-template-rows: auto auto 1fr auto auto; padding-right: 22px; } .stat-card.featured-card .stat-card-note { margin-top: auto; } .stat-card.featured-card .stat-card-subnote { max-width: none; } .stat-card-tooltip { position: fixed; left: -9999px; top: -9999px; max-width: min(420px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(96, 165, 250, 0.22); background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.92)); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06); color: #f8fafc; font-size: 13px; line-height: 1.55; white-space: pre-line; pointer-events: none; opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: center bottom; transition: opacity 160ms ease, transform 160ms ease; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1200; } .stat-card-tooltip.visible { opacity: 1; transform: translateY(0) scale(1); } .stat-card-tooltip::after { content: ""; position: absolute; left: var(--stat-tooltip-arrow-left, 50%); width: 12px; height: 12px; background: inherit; border-right: 1px solid rgba(96, 165, 250, 0.22); border-bottom: 1px solid rgba(96, 165, 250, 0.22); transform: translateX(-50%) rotate(45deg); } .stat-card-tooltip[data-placement="top"] { transform-origin: center bottom; } .stat-card-tooltip[data-placement="top"]::after { bottom: -7px; } .stat-card-tooltip[data-placement="bottom"] { transform-origin: center top; } .stat-card-tooltip[data-placement="bottom"]::after { top: -7px; transform: translateX(-50%) rotate(225deg); } html[data-theme="dark"] .stat-card-tooltip { border-color: rgba(148, 163, 184, 0.18); background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.94)); box-shadow: 0 28px 52px rgba(2, 6, 23, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.05); color: #e2e8f0; } html[data-theme="dark"] .stat-card-tooltip::after { border-right-color: rgba(148, 163, 184, 0.18); border-bottom-color: rgba(148, 163, 184, 0.18); } .layout-assistant { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.65fr) 360px; align-items: stretch; } .main-stack { display: grid; gap: 22px; min-width: 0; align-content: start; } .layout-boss { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.72fr) 320px; align-items: stretch; } .calendar-focus-shell { min-width: 0; } .panel { border-radius: 28px; border: 1px solid rgba(226, 232, 240, 0.92); background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.96)); box-shadow: var(--shadow-panel); overflow: hidden; } .mailbox-theme-panel { position: relative; overflow: hidden; isolation: isolate; border-color: rgba(148, 163, 184, 0.28); background: rgba(255, 255, 255, 0.82); } .mailbox-theme-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.8)), var(--mailbox-theme-image, none); background-size: cover; background-position: center center; background-repeat: no-repeat; transform: scale(1.02); } .mailbox-theme-panel>* { position: relative; z-index: 1; } .panel-header { padding: 22px 24px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid rgba(226, 232, 240, 0.9); } .panel-header-meta { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; } .panel-title h4 { margin: 0; font-size: 24px; letter-spacing: -0.04em; } .panel-title p { margin: 8px 0 0; color: var(--text-sub); font-size: 14px; line-height: 1.5; } .panel-body { padding: 24px; } .panel.calendar-focus-panel .panel-header { padding: 24px 28px 18px; } .panel.calendar-focus-panel .panel-body { padding: 26px 28px 30px; } .calendar-panel-meta { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; } .day-timeline-shell { display: grid; gap: 18px; } .day-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .day-section { display: grid; gap: 12px; } .day-section-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .day-section-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .day-section-title strong { font-size: 16px; letter-spacing: -0.02em; } .day-section-title span { color: var(--text-soft); font-size: 13px; } .day-section-toggle { flex-shrink: 0; } .day-section-content { display: grid; gap: 14px; } .day-expand-bar { display: flex; justify-content: flex-end; align-items: center; } .timeline { display: grid; gap: 14px; } .timeline-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: stretch; } .time-tower { border-radius: 22px; border: 1px solid rgba(226, 232, 240, 0.92); background: var(--bg-soft); padding: 18px 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 138px; } .time-tower strong { font-size: 24px; letter-spacing: -0.04em; margin-bottom: 8px; } .time-tower span, .time-tower small { color: var(--text-sub); line-height: 1.55; } .event-card { position: relative; min-width: 0; text-align: left; padding: 14px 16px 14px 20px; border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.94); background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.96)); box-shadow: var(--shadow-panel); overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease; } .event-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--event-color, var(--brand)); } .event-card.linked-highlight, .week-chip.linked-highlight, .month-entry.linked-highlight { border-color: rgba(37, 99, 235, 0.7) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), 0 0 24px rgba(37, 99, 235, 0.25), 0 18px 36px rgba(37, 99, 235, 0.18) !important; transform: translateY(-3px) scale(1.01); scroll-margin-top: 128px; animation: highlight-pulse 0.8s ease-in-out 3; background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0.02)) !important; z-index: 10; position: relative; } @keyframes highlight-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14), 0 18px 36px rgba(37, 99, 235, 0.16); } 50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3), 0 18px 36px rgba(37, 99, 235, 0.24); } } html[data-theme="dark"] .event-card.linked-highlight, html[data-theme="dark"] .week-chip.linked-highlight, html[data-theme="dark"] .month-entry.linked-highlight { border-color: rgba(215, 178, 125, 0.5); box-shadow: 0 0 0 2px rgba(215, 178, 125, 0.18), 0 18px 36px rgba(215, 178, 125, 0.12); animation: highlight-pulse-dark 1s ease-in-out 2; } @keyframes highlight-pulse-dark { 0%, 100% { box-shadow: 0 0 0 2px rgba(215, 178, 125, 0.18), 0 18px 36px rgba(215, 178, 125, 0.12); } 50% { box-shadow: 0 0 0 4px rgba(215, 178, 125, 0.35), 0 18px 36px rgba(215, 178, 125, 0.2); } } .event-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: flex-start; margin-bottom: 10px; } .event-time-slot { display: flex; justify-content: center; } .event-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .badge, .risk-pill, .status-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; } .badge { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(226, 232, 240, 0.92); color: var(--text-sub); } .badge.priority-p1 { background: rgba(249, 115, 22, 0.95); color: white; border-color: transparent; } .badge.priority-p2 { background: rgba(139, 92, 246, 0.95); color: white; border-color: transparent; } .badge.priority-p3, .badge.priority-p4, .badge.priority-p5 { background: #eef2f7; color: var(--text-main); } .risk-pill.high { background: var(--danger-soft); color: #b91c1c; } .risk-pill.medium { background: var(--warning-soft); color: #b45309; } .risk-pill.low { background: var(--success-soft); color: #166534; } .status-pill.todo { background: rgba(37, 99, 235, 0.12); color: var(--brand); } .status-pill.progress { background: rgba(245, 158, 11, 0.14); color: #b45309; } .status-pill.done { background: rgba(22, 163, 74, 0.14); color: #166534; } .status-pill.delayed { background: rgba(239, 68, 68, 0.14); color: #b91c1c; } .event-card h5 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.04em; line-height: 1.14; } .event-card p { margin: 0; color: var(--text-sub); line-height: 1.52; font-size: 14px; } .event-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; } .event-card-copy { min-width: 0; display: grid; gap: 12px; } .event-context-lines { display: grid; gap: 4px; } .event-context-lines span { display: block; } .event-card-side { display: flex; align-items: center; justify-content: center; align-self: stretch; } .event-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 148px; } .event-footer-actions { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .event-footer small { color: var(--text-soft); font-size: 13px; line-height: 1.5; max-width: 42ch; } /* ── Timeline Group (日历日视图分组) ── */ .timeline-group { margin-bottom: 8px; } .timeline-group-header { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: none; border-radius: 14px; background: rgba(241, 245, 249, 0.8); cursor: pointer; transition: background 0.18s ease; font-size: 14px; color: var(--text-main); text-align: left; } .timeline-group-header:hover { background: rgba(226, 232, 240, 0.9); } .timeline-group-label { font-weight: 600; letter-spacing: 0.02em; } .timeline-group-count { color: var(--text-soft); font-size: 13px; } .timeline-group-toggle { margin-left: auto; font-size: 11px; color: var(--text-soft); transition: transform 0.2s ease; } .timeline-group-events { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; } .timeline-expand-bar { text-align: center; padding: 12px 0 4px; } .timeline-expand-bar .ghost-button { font-size: 13px; min-height: 36px; padding: 0 20px; color: var(--brand); border-color: rgba(37, 99, 235, 0.2); } .timeline-expand-bar .ghost-button:hover { background: rgba(37, 99, 235, 0.06); } html[data-theme="dark"] .timeline-group-header { background: rgba(30, 41, 59, 0.7); } html[data-theme="dark"] .timeline-group-header:hover { background: rgba(51, 65, 85, 0.8); } html[data-theme="dark"] .timeline-expand-bar .ghost-button { color: var(--brand); border-color: rgba(215, 178, 125, 0.25); } html[data-theme="dark"] .timeline-expand-bar .ghost-button:hover { background: rgba(215, 178, 125, 0.08); } .ghost-button, .action-button { min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .ghost-button { border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(255, 255, 255, 0.92); color: var(--text-main); } .ghost-button.danger { color: #dc2626; border-color: rgba(220, 38, 38, 0.3); } .ghost-button.danger:hover { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.5); } .event-detail-chip { min-height: 42px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--event-color, var(--brand)); background: rgba(255, 255, 255, 0.96); color: var(--event-color, var(--brand)); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); font-size: 14px; font-weight: 600; } .event-comment-chip { min-height: 34px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--comment-color, rgba(37, 99, 235, 0.28)); background: rgba(255, 255, 255, 0.96); color: var(--comment-color, var(--brand)); font-size: 12px; font-weight: 600; cursor: pointer; } .event-annotation-inline { margin-top: 10px; padding: 8px 10px; border-radius: 12px; border: 1px dashed currentColor; background: rgba(255, 255, 255, 0.88); color: var(--annotation-color, var(--event-color, var(--brand))); display: grid; gap: 3px; text-align: left; } .event-annotation-stack { margin-top: 12px; display: grid; gap: 6px; } .event-annotation-inline strong { font-size: 10px; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: inherit; opacity: 0.9; } .event-annotation-inline span { font-size: 12px; line-height: 1.42; color: inherit; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-clamp: 2; overflow: hidden; } .event-annotation-inline.full-text { margin-top: 0; } .event-annotation-inline.full-text span { display: block; overflow: visible; -webkit-line-clamp: unset; -webkit-box-orient: initial; line-clamp: unset; white-space: normal; } .event-annotation-inline em { font-style: normal; font-size: 10px; line-height: 1.3; color: inherit; opacity: 0.74; } .event-footer .event-annotation-inline { flex: 1 1 100%; margin-top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .action-button { background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 0.9)); color: white; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.2); } .action-button.secondary { background: rgba(37, 99, 235, 0.1); color: var(--brand); box-shadow: none; } .action-button.alert { background: rgba(239, 68, 68, 0.1); color: #b91c1c; box-shadow: none; } .split-actions { display: flex; gap: 10px; flex-wrap: wrap; } .mini-card-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; margin-top: 10px; } .assistant-panel { display: grid; gap: 18px; align-content: start; position: sticky; top: 104px; } .assistant-hero { padding: 22px; border-radius: 30px; background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.92)); color: white; box-shadow: 0 20px 48px rgba(30, 64, 175, 0.18); } .assistant-hero small { display: block; color: rgba(255, 255, 255, 0.72); margin-bottom: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .assistant-hero h4 { margin: 0 0 10px; font-size: 26px; letter-spacing: -0.04em; line-height: 1.12; } .assistant-hero p { margin: 0; line-height: 1.65; color: rgba(255, 255, 255, 0.84); font-size: 14px; } .assistant-block { padding: 20px; border-radius: 26px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-panel); } .assistant-block.mailbox-theme-panel { border-color: rgba(148, 163, 184, 0.28); background: rgba(255, 255, 255, 0.82); } .mailbox-theme-panel .command-card, .mailbox-theme-panel .command-card.pending, .mailbox-theme-panel .command-card.done, .mailbox-theme-panel .risk-card, .mailbox-theme-panel .assistant-list-item, .mailbox-theme-panel .mailbox-feed-item { background: rgba(255, 255, 255, 0.76); border-color: rgba(203, 213, 225, 0.92); backdrop-filter: blur(6px); } .wechat-quick-block { padding: 18px; border-radius: 22px; border: 1px solid rgba(34, 197, 94, 0.22); background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(255, 255, 255, 0.96)); box-shadow: var(--shadow-panel); } html[data-theme="dark"] .wechat-quick-block { background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(12, 21, 35, 0.96)) !important; border-color: rgba(34, 197, 94, 0.18) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .assistant-hero { background: linear-gradient(145deg, rgba(12, 21, 35, 0.98), rgba(16, 27, 45, 0.94)) !important; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .assistant-hero small { color: rgba(215, 178, 125, 0.82) !important; } html[data-theme="dark"] .assistant-hero h4 { color: var(--text-main) !important; } html[data-theme="dark"] .assistant-hero p { color: var(--text-sub) !important; } html[data-theme="dark"] .mailbox-filter-pill { border-color: rgba(137, 155, 179, 0.16) !important; background: rgba(17, 30, 49, 0.92) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .mailbox-filter-pill.active { border-color: rgba(215, 178, 125, 0.5) !important; background: linear-gradient(135deg, rgba(215, 178, 125, 0.92), rgba(194, 160, 113, 0.88)) !important; color: #08111d !important; box-shadow: 0 16px 28px rgba(215, 178, 125, 0.18); } html[data-theme="dark"] .mailbox-filter-pill.active .mailbox-filter-pill-count { background: rgba(8, 17, 29, 0.22) !important; } .wechat-quick-block h5 { margin: 0 0 10px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .wechat-quick-block h5 .wechat-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: #07c160; color: white; font-size: 12px; font-weight: 800; } .wechat-quick-block textarea { width: 100%; min-height: 72px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 13px; font-family: var(--font-sans); resize: vertical; background: var(--bg-card); color: var(--text-main); transition: border-color 0.2s; } .wechat-quick-block textarea:focus { outline: none; border-color: #07c160; } .wechat-quick-block .wechat-quick-actions { display: flex; gap: 6px; margin-top: 10px; } .wechat-quick-block .wechat-quick-actions button { flex: 1; min-height: 36px; border-radius: 12px; border: none; font-size: 13px; font-weight: 600; font-family: var(--font-sans); cursor: pointer; transition: background 0.18s ease, box-shadow 0.18s ease; } .wechat-quick-block .wechat-quick-actions .wechat-btn-primary { background: #07c160; color: white; box-shadow: 0 6px 16px rgba(7, 193, 96, 0.22); } .wechat-quick-block .wechat-quick-actions .wechat-btn-primary:hover { background: #06ad56; } .wechat-quick-block .wechat-quick-actions .wechat-btn-secondary { background: rgba(7, 193, 96, 0.1); color: #07c160; } .wechat-quick-block .wechat-quick-result { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg-soft); font-size: 12px; line-height: 1.6; color: var(--text-sub); } .wechat-quick-result .wechat-result-field { display: flex; gap: 6px; align-items: baseline; } .wechat-quick-result .wechat-result-field strong { color: var(--text-main); font-size: 12px; white-space: nowrap; } .wechat-quick-result .wechat-result-confidence { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 600; } .wechat-quick-result .wechat-result-confidence.high { background: rgba(34, 197, 94, 0.12); color: #16a34a; } .wechat-quick-result .wechat-result-confidence.medium { background: rgba(245, 158, 11, 0.12); color: #d97706; } .wechat-quick-result .wechat-result-confidence.low { background: rgba(239, 68, 68, 0.12); color: #dc2626; } .assistant-block h5 { margin: 0 0 14px; font-size: 18px; letter-spacing: -0.03em; } .assistant-block-header { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; } .assistant-block-header h5 { margin: 0; } .command-block-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .command-block-header p { margin: 8px 0 0; color: var(--text-sub); font-size: 13px; line-height: 1.6; } .command-composer { display: grid; gap: 14px; margin-bottom: 16px; } .command-composer .field textarea { min-height: 120px; } .command-list { display: grid; gap: 12px; max-height: 360px; overflow: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; } .command-card { padding: 16px; border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(248, 250, 252, 0.98); display: grid; gap: 10px; } .command-card.is-done { border-color: rgba(34, 197, 94, 0.22); background: rgba(240, 253, 244, 0.92); } .command-card.is-progress { border-color: rgba(37, 99, 235, 0.18); background: rgba(239, 246, 255, 0.92); } .command-card-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .command-card-header strong { display: block; font-size: 15px; line-height: 1.7; letter-spacing: -0.02em; } .command-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--text-soft); font-size: 12px; line-height: 1.5; } .command-status-actions { display: flex; gap: 6px; flex-wrap: wrap; } .command-panel-mobile { margin-bottom: 22px; } .command-composer { display: grid; gap: 14px; } .command-composer textarea { min-height: 120px; resize: vertical; } .command-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; } .command-list { display: grid; gap: 12px; } .command-list.history { max-height: 360px; overflow: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; } .command-card { padding: 16px; border-radius: 22px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(248, 250, 252, 0.98); display: grid; gap: 10px; } .command-card.pending { border-color: rgba(37, 99, 235, 0.18); background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 250, 252, 0.98)); } .command-card.done { opacity: 0.92; } .command-card.revoked { border-color: rgba(148, 163, 184, 0.2); background: rgba(241, 245, 249, 0.98); } .command-card-header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .command-card-body { color: var(--text-main); font-size: 15px; line-height: 1.7; } .command-card-meta { color: var(--text-sub); font-size: 13px; line-height: 1.6; } .command-card-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .assistant-message-list { display: grid; gap: 12px; margin-bottom: 16px; max-height: 280px; overflow: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; } .assistant-message { border-radius: 20px; padding: 14px 16px; line-height: 1.65; font-size: 14px; } .assistant-message.user { background: rgba(37, 99, 235, 0.1); color: var(--text-main); margin-left: 18px; } .assistant-message.ai { background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(226, 232, 240, 0.92); margin-right: 18px; } .assistant-message.receipt { background: transparent; border: 0; padding: 0; margin-right: 18px; } .dispatch-receipt-card { display: grid; gap: 12px; padding: 16px 18px; border-radius: 22px; border: 1px solid rgba(59, 130, 246, 0.16); background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 250, 252, 0.98)); box-shadow: 0 12px 30px rgba(148, 163, 184, 0.12); } .dispatch-receipt-card.revoked { border-color: rgba(148, 163, 184, 0.2); background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.98)); } .dispatch-receipt-head, .dispatch-receipt-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .dispatch-receipt-title { display: grid; gap: 4px; } .dispatch-receipt-title strong { font-size: 15px; color: var(--text-main); } .dispatch-receipt-title span, .dispatch-receipt-state, .dispatch-receipt-meta time { color: var(--text-sub); font-size: 13px; line-height: 1.6; } .dispatch-receipt-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .dispatch-receipt-body { color: var(--text-main); font-size: 14px; line-height: 1.7; } .assistant-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .assistant-chip { padding: 10px 14px; border-radius: 999px; background: rgba(37, 99, 235, 0.08); color: var(--brand); border: 1px solid rgba(37, 99, 235, 0.12); font-size: 13px; transition: transform 0.2s ease; } .assistant-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .assistant-compose input { min-height: 44px; border: 1px solid rgba(226, 232, 240, 0.96); border-radius: 14px; padding: 0 14px; background: #fbfdff; } .assistant-chat-panel .panel-body { display: grid; gap: 18px; } .assistant-chat-meta { display: grid; gap: 10px; } .assistant-chat-header-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .assistant-chat-tip { margin: 0; color: var(--text-sub); font-size: 13px; line-height: 1.7; } .assistant-chat-panel .assistant-message-list { min-height: 280px; max-height: min(52vh, 480px); padding-right: 8px; margin-bottom: 0; scrollbar-gutter: stable; overscroll-behavior: contain; transform: translateZ(0); } .assistant-chat-panel .assistant-message { font-size: 15px; padding: 18px 22px; border-radius: 24px; } .assistant-chat-panel .assistant-message.user { margin-left: 24px; background: rgba(37, 99, 235, 0.12); } .assistant-chat-panel .assistant-message.ai { margin-right: 24px; background: rgba(248, 250, 252, 0.98); } .assistant-chat-panel .assistant-chip { min-height: 44px; padding: 0 18px; font-size: 14px; } .assistant-chat-panel .assistant-compose { grid-template-columns: minmax(0, 1fr) 120px; align-items: stretch; } .assistant-chat-panel .assistant-compose input { min-height: 60px; border-radius: 22px; padding: 0 20px; font-size: 15px; } .assistant-chat-empty { margin: 0; } .assistant-chat-panel .assistant-compose .action-button { min-height: 60px; border-radius: 22px; font-size: 16px; } .assistant-list { display: grid; gap: 12px; } .assistant-list-item, .todo-card, .focus-card, .risk-card, .decision-card, .mailbox-feed-item { width: 100%; padding: 16px; border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(248, 250, 252, 0.98); text-align: left; appearance: none; cursor: pointer; } .mailbox-preview-card { position: relative; padding: 16px 16px 16px 18px; border-radius: 18px; border: 1px solid rgba(203, 213, 225, 0.92); background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(6px); overflow: hidden; } .mailbox-preview-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #ef4444; border-radius: 18px 0 0 18px; } .mailbox-preview-card strong { display: block; margin-bottom: 8px; font-size: 15px; line-height: 1.45; letter-spacing: -0.02em; } .mailbox-preview-card span { color: var(--text-sub); font-size: 13px; line-height: 1.55; } .mailbox-preview-footer { margin-top: 14px; display: flex; justify-content: flex-end; } .assistant-list-item strong, .todo-card strong, .focus-card strong, .risk-card strong, .decision-card strong, .mailbox-feed-item strong { display: block; font-size: 16px; letter-spacing: -0.03em; margin-bottom: 8px; } .assistant-list-item span, .todo-card span, .focus-card span, .risk-card span, .decision-card span, .mailbox-feed-item span { color: var(--text-sub); font-size: 14px; line-height: 1.6; } .mailbox-feed { display: grid; gap: 12px; } .mailbox-feed-item { position: relative; overflow: hidden; } .mailbox-feed-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: rgba(148, 163, 184, 0.5); } .mailbox-feed-item.pending::before { background: linear-gradient(180deg, rgba(37, 99, 235, 0.96), rgba(59, 130, 246, 0.48)); } .mailbox-feed-item.done { opacity: 0.84; } .mailbox-feed-item.done::before { background: linear-gradient(180deg, rgba(22, 163, 74, 0.92), rgba(74, 222, 128, 0.42)); } .mailbox-feed-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .mailbox-feed-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; } .mailbox-feed-item p { margin: 0; color: var(--text-main); line-height: 1.7; font-size: 14px; } .week-grid { display: grid; gap: 14px; grid-template-columns: repeat(7, minmax(0, 1fr)); } .calendar-focus-panel .week-grid { gap: 18px; } .week-column { border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.92); background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.96)); padding: 18px; min-height: 260px; } .calendar-focus-panel .week-column { min-height: 520px; padding: 22px 20px; border-radius: 26px; } .week-column.active { border-color: rgba(37, 99, 235, 0.32); box-shadow: 0 16px 36px rgba(37, 99, 235, 0.08); } .week-column h5 { margin: 0 0 14px; font-size: 18px; letter-spacing: -0.04em; } .week-column small { color: var(--text-soft); } .week-column-count { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(37, 99, 235, 0.08); color: var(--brand); border: 1px solid rgba(37, 99, 235, 0.12); font-size: 12px; font-weight: 600; margin-bottom: 12px; } .week-column-list { display: grid; gap: 10px; } .week-chip { text-align: left; width: 100%; padding: 12px 12px 12px 14px; border-radius: 18px; background: rgba(248, 250, 252, 0.98); border: 1px solid rgba(226, 232, 240, 0.92); position: relative; overflow: hidden; transition: transform 0.2s ease; cursor: pointer; } .week-chip::before, .month-entry::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--event-color, var(--brand)); } .week-chip strong, .month-entry strong { display: block; margin-bottom: 6px; font-size: 15px; letter-spacing: -0.03em; } .week-chip span, .month-entry span { color: var(--text-sub); font-size: 13px; line-height: 1.5; } .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } .calendar-focus-panel .month-grid { gap: 14px; } .month-cell { min-height: 156px; padding: 14px; border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.92); background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.96)); text-align: left; transition: transform 0.2s ease; } .calendar-focus-panel .month-cell { min-height: 194px; padding: 16px; border-radius: 26px; } .month-cell.is-outside { opacity: 0.52; } .month-cell.is-selected { border-color: rgba(37, 99, 235, 0.34); box-shadow: 0 16px 34px rgba(37, 99, 235, 0.08); } .month-cell-header { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; } .month-cell-header strong { font-size: 18px; letter-spacing: -0.04em; } .month-list { display: grid; gap: 6px; } .month-more { display: block; color: var(--brand); font-size: 12px; line-height: 1.5; margin-top: 2px; font-weight: 600; } .month-entry-shell { position: relative; } .month-entry { text-align: left; position: relative; padding: 10px 10px 10px 14px; border-radius: 14px; background: rgba(248, 250, 252, 0.94); border: 1px solid rgba(226, 232, 240, 0.92); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease; cursor: pointer; } .month-entry-preview { position: absolute; left: -9999px; top: -9999px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; pointer-events: none; } .month-entry-preview-root { position: fixed; inset: 0; z-index: 36; pointer-events: none; } .month-entry-preview-card.event-card { width: 220px; margin: 0; padding: 12px 12px 12px 16px; border-radius: 18px; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); } html[data-theme="dark"] .month-entry-preview-card.event-card { background: linear-gradient(180deg, rgba(12, 21, 35, 0.98), rgba(16, 27, 45, 0.94)); border-color: rgba(137, 155, 179, 0.18); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34); } html[data-theme="dark"] .recognition-trace-card { background: rgba(12, 21, 35, 0.9); border-color: rgba(137, 155, 179, 0.18); } html[data-theme="dark"] .recognition-edited-chip, html[data-theme="dark"] .recognition-edited-badge { background: rgba(215, 178, 125, 0.14); color: #f0d5a5; } .month-entry-preview-card.event-card h5 { margin-bottom: 5px; font-size: 14px; } .month-entry-preview-card.event-card p { font-size: 12px; line-height: 1.45; } .month-entry-preview-card.event-card .event-card-header { margin-bottom: 8px; gap: 6px; } .month-entry-preview-card.event-card .badge { min-height: 22px; padding: 0 7px; font-size: 10px; } @media (hover: none), (pointer: coarse) { .month-entry-preview, .month-entry-preview-root { display: none !important; } } .mobile-timeline { display: grid; gap: 14px; } .mobile-ai-banner { padding: 16px 18px; border-radius: 22px; background: linear-gradient(135deg, rgba(219, 234, 254, 0.94), rgba(239, 246, 255, 0.98)); border: 1px solid rgba(37, 99, 235, 0.12); color: var(--text-main); } .mobile-ai-banner strong { display: block; margin-bottom: 8px; font-size: 16px; letter-spacing: -0.03em; } .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 14px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(226, 232, 240, 0.96); z-index: 800; } .mobile-nav-item { min-height: 54px; border-radius: 18px; display: grid; place-items: center; background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(226, 232, 240, 0.94); color: var(--text-sub); font-size: 13px; line-height: 1.3; } .mobile-nav-item[data-route] { gap: 6px; transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .mobile-nav-item:active { transform: scale(0.98); } .mobile-nav-glyph { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(226, 232, 240, 0.9); color: var(--text-main); font-size: 12px; font-weight: 800; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } .mobile-nav-label { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; } .mobile-nav-item.active { background: rgba(37, 99, 235, 1); color: white; border-color: transparent; box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22); } .mobile-nav-item.active .mobile-nav-glyph { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.2); color: white; box-shadow: none; } .mobile-quick-dock { position: sticky; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 9; padding: 0 12px 6px; margin-top: auto; pointer-events: none; } .mobile-quick-dock-inner { pointer-events: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); } .mobile-quick-dock-label { display: grid; gap: 3px; min-width: 0; } .mobile-quick-dock-label small { color: var(--text-soft); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .mobile-quick-dock-label strong { font-size: 15px; line-height: 1.15; letter-spacing: -0.03em; } .mobile-quick-dock-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; } .mobile-quick-action { min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(248, 250, 252, 0.96); color: var(--text-main); font-size: 13px; font-weight: 700; transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease; } .mobile-quick-action.primary { background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 0.92)); border-color: transparent; color: white; box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22); } .mobile-quick-action:active { transform: scale(0.98); } .form-grid { display: grid; gap: 16px; } .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid.two.note-aligned>.field { align-content: start; grid-template-rows: auto minmax(48px, auto) minmax(18px, auto); } .field { display: grid; gap: 6px; } .field label { color: var(--text-sub); font-size: 14px; font-weight: 600; line-height: 1.4; } .field input, .field textarea, .field select { width: 100%; border: 1px solid rgba(226, 232, 240, 0.96); border-radius: 16px; background: #fbfdff; min-height: 48px; padding: 12px 14px; color: var(--text-main); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .field textarea { resize: vertical; min-height: 140px; } .field.warning input, .field.warning textarea, .field.warning select { border-color: rgba(245, 158, 11, 0.58); background: rgba(254, 243, 199, 0.36); } .field-note { color: var(--text-soft); font-size: 12px; line-height: 1.5; } .recognition-trace-panel { margin-bottom: 18px; } .recognition-trace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .recognition-trace-card { padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(248, 250, 252, 0.92); display: grid; gap: 10px; } .recognition-trace-card small { color: var(--text-soft); font-size: 11px; letter-spacing: 0.04em; } .recognition-trace-card p { margin: 0; color: var(--text-main); line-height: 1.7; font-size: 13px; white-space: pre-wrap; } .recognition-trace-summary, .recognition-edited-chips { display: grid; gap: 6px; } .recognition-trace-row { display: grid; gap: 3px; } .recognition-trace-row strong { font-size: 12px; color: var(--text-main); } .recognition-trace-row span { font-size: 12px; color: var(--text-sub); line-height: 1.5; } .recognition-edited-chip, .recognition-edited-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(37, 99, 235, 0.1); color: #1d4ed8; font-size: 11px; font-weight: 600; width: fit-content; } .recognition-edited-badge { margin-left: 8px; vertical-align: middle; } .switch-field { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.96); background: #fbfdff; } .switch-field input { width: 18px; height: 18px; margin: 0; } .todo-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: stretch; } .todo-list { display: grid; gap: 12px; } .todo-list-scroll { min-height: 0; } .pending-list-scroll { min-height: 0; } .todo-card { text-align: left; transition: transform 0.2s ease, border-color 0.2s ease; } .todo-card.active { border-color: rgba(37, 99, 235, 0.34); box-shadow: 0 14px 32px rgba(37, 99, 235, 0.08); } .todo-card-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .todo-card small { color: var(--text-soft); line-height: 1.5; } .filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .filter-chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(226, 232, 240, 0.94); background: rgba(248, 250, 252, 0.96); color: var(--text-sub); font-size: 14px; } .filter-chip.active { background: rgba(37, 99, 235, 1); color: white; border-color: transparent; } .inbox-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: stretch; } .inbox-reference-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: stretch; } .inbox-reference-panel { overflow: hidden; border-radius: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96)); border: 1px solid rgba(226, 232, 240, 0.92); box-shadow: 0 24px 52px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85); } .inbox-reference-panel-body { display: grid; gap: 18px; padding: 24px; } .inbox-reference-toolbar, .inbox-reference-result-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; } .inbox-reference-heading { display: grid; gap: 6px; min-width: 0; } .inbox-reference-kicker { display: inline-flex; align-items: center; width: fit-content; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(37, 99, 235, 0.08); color: #2563eb; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .inbox-reference-heading h4 { margin: 0; font-size: 28px; line-height: 1.08; letter-spacing: -0.04em; color: #101828; } .inbox-reference-heading p { margin: 0; max-width: 40ch; color: #667085; font-size: 14px; line-height: 1.65; } .inbox-reference-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .inbox-reference-toolbar-actions .ghost-button, .inbox-reference-toolbar-actions .action-button, .inbox-reference-result-header .action-button { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; } .inbox-reference-result-header .action-button { box-shadow: 0 16px 26px rgba(37, 99, 235, 0.2); } .inbox-reference-section-label { color: #344054; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .inbox-reference-message-shell { min-height: 238px; padding: 22px 22px 16px; border-radius: 28px; border: 1px solid rgba(203, 213, 225, 0.88); background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(243, 248, 255, 0.96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 34px rgba(15, 23, 42, 0.04); display: grid; gap: 16px; } .inbox-reference-message-head { display: flex; align-items: center; gap: 14px; } .inbox-reference-message-avatar { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 18px; background: linear-gradient(180deg, rgba(236, 253, 243, 0.98), rgba(220, 252, 231, 0.98)); border: 1px solid rgba(134, 239, 172, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86); flex-shrink: 0; } .inbox-reference-message-avatar img { width: 26px; height: 26px; object-fit: contain; } .inbox-reference-message-meta { display: grid; gap: 4px; min-width: 0; } .inbox-reference-message-meta strong { color: #101828; font-size: 15px; line-height: 1.3; } .inbox-reference-message-meta span { color: #98a2b3; font-size: 12px; line-height: 1.5; } .inbox-reference-message-input { width: 100%; min-height: 128px; border: 0; background: transparent; color: #101828; padding: 0; resize: none; outline: none; box-shadow: none; font-size: 15px; line-height: 1.8; letter-spacing: 0.01em; } .inbox-reference-message-input::placeholder { color: #98a2b3; } .inbox-reference-message-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #98a2b3; font-size: 12px; line-height: 1.5; } .inbox-reference-message-foot strong { color: #475467; font-size: 12px; font-weight: 700; white-space: nowrap; } .inbox-reference-note { color: #667085; font-size: 12px; line-height: 1.6; } .inbox-reference-inline-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 18px; font-size: 13px; line-height: 1.6; border: 1px solid transparent; } .inbox-reference-inline-notice::before { content: ""; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; } .inbox-reference-inline-notice.is-info { color: #2563eb; background: rgba(239, 246, 255, 0.94); border-color: rgba(147, 197, 253, 0.56); } .inbox-reference-inline-notice.is-warn { color: #b54708; background: rgba(255, 247, 237, 0.96); border-color: rgba(253, 186, 116, 0.58); } .inbox-reference-empty-stage { min-height: 328px; padding: 0; display: grid; place-items: center; } /* 2026-05-13 P0-3：识别成功折叠态——左侧从"大插画占位"变为"已完成"细条 */ .inbox-reference-empty-stage.is-success-collapsed { min-height: auto; align-items: stretch; } .inbox-reference-success-state { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.10) 0%, rgba(16, 185, 129, 0.06) 100%); border: 1px solid rgba(34, 197, 94, 0.32); color: #166534; animation: inboxSuccessFade 320ms cubic-bezier(0.16, 1, 0.3, 1); } .inbox-reference-success-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(34, 197, 94, 0.18); color: #15803d; } .inbox-reference-success-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .inbox-reference-success-copy strong { font-size: 14px; font-weight: 600; color: #14532d; } .inbox-reference-success-copy span { font-size: 12.5px; color: #166534; opacity: 0.85; } .inbox-reference-success-action { flex-shrink: 0; font-size: 12.5px !important; padding: 6px 12px !important; } @keyframes inboxSuccessFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } html[data-theme="dark"] .inbox-reference-success-state { background: linear-gradient(135deg, rgba(34, 197, 94, 0.14) 0%, rgba(16, 185, 129, 0.08) 100%); border-color: rgba(34, 197, 94, 0.36); color: #86efac; } html[data-theme="dark"] .inbox-reference-success-icon { background: rgba(34, 197, 94, 0.24); color: #4ade80; } html[data-theme="dark"] .inbox-reference-success-copy strong { color: #bbf7d0; } html[data-theme="dark"] .inbox-reference-success-copy span { color: #86efac; } .inbox-empty-illustration-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 0; } .inbox-reference-empty-preview { display: block; width: min(100%, 420px); height: auto; margin: 0 auto 28px auto; border-radius: 26px; border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12); background: rgba(255, 255, 255, 0.92); object-fit: cover; } /* .inbox-empty-illustration-container .inbox-empty-svg-wrapper { display: none; } */ .inbox-empty-svg-wrapper { position: relative; width: 400px; height: 240px; margin: 0 auto 28px auto; --wechat-bubble-1: #6A85FF; --wechat-bubble-2: #4A6BF7; --doc-bg: #FFFFFF; --doc-thick: #E2E5F8; --doc-line-1: #C8CFF0; --doc-line-2: #D6DAF4; --cal-bg: #FFFFFF; --cal-thick: #C8CFF0; --cal-header: #96ABFF; --cal-header-thick: #7B93F5; --cal-check: #6A85FF; --cal-empty: #E2E5F8; --ghost-bg: #EAECFF; --ghost-bg-2: #F0F2FF; --star-color: #B0BFFF; --bg-glow: radial-gradient(ellipse at center, rgba(106, 133, 255, 0.12) 0%, transparent 60%); --floor-shadow: rgba(106, 133, 255, 0.08); --inbox-shadow: rgba(106, 133, 255, 0.12); } .inbox-empty-bg-glow { position: absolute; top: 50%; left: 50%; width: 320px; height: 320px; transform: translate(-50%, -50%); background: var(--bg-glow); border-radius: 50%; z-index: 0; } .inbox-empty-svg-wrapper svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; overflow: visible; } .inbox-empty-title { font-size: 19px; font-weight: 700; color: #1a1a2e; letter-spacing: -0.02em; margin: 0 0 10px 0; } html[data-theme="dark"] .inbox-empty-title { color: #e0e4f0; } .inbox-empty-desc { font-size: 14px; color: #7c82a0; margin: 0; } html[data-theme="dark"] .inbox-empty-desc { color: #8890b0; } @keyframes inbox-anim-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes inbox-anim-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.85); opacity: 0.5; } } @keyframes inbox-anim-stars { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } .inbox-anim-float { animation: inbox-anim-float 6s ease-in-out infinite; } .inbox-anim-shadow { animation: inbox-anim-shadow 6s ease-in-out infinite; transform-origin: center; } .inbox-anim-stars { animation: inbox-anim-stars 4s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; } .inbox-reference-result-title-row { display: flex; align-items: center; gap: 10px; } .inbox-reference-result-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #7c3aed; flex-shrink: 0; background: transparent; box-shadow: none; border: 0; border-radius: 0; } html[data-theme="dark"] .inbox-reference-result-mark { color: #c4b5fd; background: transparent; box-shadow: none; } .inbox-reference-result-mark svg { width: 22px; height: 22px; } .inbox-reference-result-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(226, 232, 240, 0.94); background: rgba(248, 250, 252, 0.94); } .inbox-reference-status-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } .inbox-reference-status-chip.is-waiting { background: rgba(226, 232, 240, 0.72); color: #475467; } .inbox-reference-status-chip.is-working { background: rgba(219, 234, 254, 0.96); color: #1d4ed8; } .inbox-reference-status-chip.is-ready { background: rgba(220, 252, 231, 0.98); color: #15803d; } .inbox-reference-status-copy { color: #667085; font-size: 12px; line-height: 1.5; text-align: right; } /* 2026-05-10：识别结果整体排版紧凑化（用户反馈） form gap 16→12 / grid gap 14→12 / note-aligned input 行高 54→44 配合下方 input/textarea/select 的 min-height/padding/border-radius 同步收敛 */ .inbox-reference-form { display: grid; gap: 12px; } .inbox-reference-field-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .inbox-reference-field-grid.note-aligned>.inbox-reference-field { align-content: start; grid-template-rows: auto minmax(44px, auto) minmax(16px, auto); } .inbox-reference-field { display: grid; gap: 6px; } .inbox-reference-field-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #344054; font-size: 13px; font-weight: 700; line-height: 1.5; } .inbox-reference-field-label .recognition-edited-badge { margin-left: 0; } .inbox-reference-field input, .inbox-reference-field textarea, .inbox-reference-field select { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.45); background: #f8fbff; color: #101828; appearance: none; -webkit-appearance: none; background-image: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88); font-size: 14px; line-height: 1.5; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .inbox-reference-field textarea { min-height: 88px; resize: none; } .inbox-reference-field select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2398A2B3' d='M3.25 5.5L7 9.25 10.75 5.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .inbox-reference-field input:focus, .inbox-reference-field textarea:focus, .inbox-reference-field select:focus { outline: none; border-color: rgba(59, 130, 246, 0.72); box-shadow: 0 0 0 4px rgba(219, 234, 254, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.9); background: #ffffff; } .inbox-reference-field.is-warning input, .inbox-reference-field.is-warning textarea, .inbox-reference-field.is-warning select { border-color: rgba(245, 158, 11, 0.56); background: rgba(255, 251, 235, 0.96); } .inbox-reference-confidence { display: inline-flex; align-items: center; gap: 6px; color: #15803d; font-size: 12px; line-height: 1.5; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, #16a34a 10%, transparent); border: 1px solid color-mix(in srgb, #16a34a 22%, transparent); letter-spacing: 0.01em; } .inbox-reference-confidence .inbox-reference-confidence-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); } .inbox-reference-confidence.is-warn { color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 32%, transparent); } .inbox-reference-confidence.is-warn::before { content: "\26A0\FE0F"; font-size: 11px; margin-right: -2px; } .inbox-reference-confidence.is-danger { color: #b91c1c; background: color-mix(in srgb, #ef4444 14%, transparent); border-color: color-mix(in srgb, #ef4444 36%, transparent); animation: confidenceDangerPulse 1.6s ease-in-out 2; } .inbox-reference-confidence.is-danger::before { content: "\26A0\FE0F"; font-size: 11px; margin-right: -2px; } @keyframes confidenceDangerPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.32); } 50% { box-shadow: 0 0 0 5px rgba(239,68,68,0.06); } } html[data-theme="dark"] .inbox-reference-confidence { color: #4ade80; background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.30); } html[data-theme="dark"] .inbox-reference-confidence.is-warn { color: #fbbf24; background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.36); } html[data-theme="dark"] .inbox-reference-confidence.is-danger { color: #fca5a5; background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.42); } .inbox-reference-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; border-radius: 18px; border: 1px solid rgba(203, 213, 225, 0.92); background: #f8fbff; color: #344054; font-size: 14px; font-weight: 600; } .inbox-reference-switch input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; } .mailbox-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); align-items: stretch; } .mailbox-layout.mailbox-layout-redesigned { grid-template-columns: 1fr; align-items: start; gap: 18px; } .mailbox-workbench { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 18px; align-items: stretch; height: min(720px, calc(100vh - 150px)); min-height: 520px; } .mailbox-side-stack { display: grid; /* 2026-05-12：原 0.82fr/1.18fr 让上下两张 panel 比例 4:6，导致老板批注卡矮、副文被裁切。 改 1fr/1fr 让「老板批注」和「改动同步通知」整体严格等高。 */ grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; min-height: 100%; } .mailbox-layout-redesigned .mailbox-workbench>.panel, .mailbox-layout-redesigned .mailbox-side-stack>.panel { display: flex; flex-direction: column; min-height: 100%; } .mailbox-layout-redesigned .mailbox-workbench>.panel>.panel-body, .mailbox-layout-redesigned .mailbox-side-stack>.panel>.panel-body { display: flex; flex-direction: column; flex: 1; min-height: 0; } .mailbox-layout-redesigned .mailbox-side-stack .empty-state { min-height: 118px; display: flex; align-items: center; justify-content: center; text-align: center; } .app-shell:not(.mobile-shell) .mailbox-layout-redesigned .mailbox-overview-panel .panel-header { align-items: center; padding: 16px 20px 10px; } .app-shell:not(.mobile-shell) .mailbox-layout-redesigned .mailbox-overview-panel .panel-body { padding: 10px 20px 18px; } .app-shell:not(.mobile-shell) .mailbox-layout-redesigned .mailbox-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .app-shell:not(.mobile-shell) .mailbox-layout-redesigned .mailbox-overview-panel .stat-card { min-height: 112px !important; height: 112px; padding: 14px 16px !important; border-radius: 16px; gap: 6px; } .app-shell:not(.mobile-shell) .mailbox-layout-redesigned .mailbox-overview-panel .stat-card strong { font-size: clamp(38px, 3.4vw, 52px); line-height: 0.9; margin: 0; } .app-shell:not(.mobile-shell) .mailbox-layout-redesigned .mailbox-overview-panel .stat-card small { font-size: 12px; } .app-shell:not(.mobile-shell) .mailbox-layout-redesigned .mailbox-overview-panel .stat-card span { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.35; } .mailbox-layout-redesigned .mailbox-workbench .command-list, .mailbox-layout-redesigned .mailbox-feed { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; padding-right: 6px; scrollbar-gutter: stable; } .mailbox-layout-redesigned .mailbox-workbench .command-list { height: 100%; } .mailbox-column { display: grid; gap: 22px; align-content: start; } .mailbox-summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mailbox-summary-card { padding: 18px; border-radius: 22px; border: 1px solid rgba(203, 213, 225, 0.92); background: rgba(255, 255, 255, 0.82); box-shadow: var(--shadow-panel); backdrop-filter: blur(8px); display: grid; gap: 6px; } .mailbox-summary-card.is-attention { border-color: rgba(37, 99, 235, 0.24); background: linear-gradient(180deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.86)); } .mailbox-summary-card small { color: var(--text-soft); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .mailbox-summary-card strong { font-size: clamp(28px, 2.1vw, 36px); line-height: 1; letter-spacing: -0.05em; color: var(--text-main); } .mailbox-summary-card span { color: var(--text-sub); font-size: 13px; line-height: 1.6; } .pending-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; } .pending-list { display: grid; gap: 14px; } .pending-card { text-align: left; padding: 18px; border-radius: 22px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(248, 250, 252, 0.98); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .pending-card.active { border-color: rgba(37, 99, 235, 0.4); box-shadow: 0 18px 36px rgba(37, 99, 235, 0.1); transform: translateY(-1px); } .pending-card-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .pending-card-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .pending-card strong { display: block; font-size: 18px; letter-spacing: -0.03em; margin-bottom: 8px; } .pending-card p { margin: 0; color: var(--text-sub); line-height: 1.6; font-size: 14px; } .pending-card-caption { margin: 0; color: var(--text-main); font-size: 14px; line-height: 1.55; } .pending-card-inline { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .pending-card-footnote { margin-top: 12px; color: var(--text-soft); font-size: 12px; line-height: 1.55; } .pending-meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .pending-recommend { margin-top: 12px; padding: 14px; border-radius: 18px; background: rgba(219, 234, 254, 0.42); border: 1px solid rgba(37, 99, 235, 0.12); color: var(--text-main); font-size: 14px; line-height: 1.65; } .pending-detail-toolbar { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .pill-muted { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); color: var(--text-sub); font-size: 12px; } .notice { border-radius: 22px; padding: 16px 18px; font-size: 14px; line-height: 1.6; border: 1px solid transparent; } .notice.info { background: rgba(37, 99, 235, 0.1); color: var(--brand); border-color: rgba(37, 99, 235, 0.12); } .notice.warn { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.16); } .notice.error { background: rgba(239, 68, 68, 0.1); color: #b91c1c; border-color: rgba(239, 68, 68, 0.16); } .focus-grid { display: grid; gap: 14px; } .app-shell:not(.mobile-shell) .page-body { padding: 24px 28px 30px; gap: 20px; } .app-shell:not(.mobile-shell) .assistant-home-header { padding: 24px 30px; } .app-shell:not(.mobile-shell) .assistant-home-topline { gap: 18px; margin-bottom: 22px; } .app-shell:not(.mobile-shell) .assistant-home-title-stack small { margin-bottom: 10px; } .app-shell:not(.mobile-shell) .assistant-home-title-stack h3 { font-size: clamp(34px, 2.9vw, 40px); } .app-shell:not(.mobile-shell) .assistant-home-title-stack p { margin-top: 10px; font-size: 15px; } .app-shell:not(.mobile-shell) .assistant-home-date-nav, .app-shell:not(.mobile-shell) .assistant-home-toolbar-left, .app-shell:not(.mobile-shell) .assistant-home-toolbar-right { gap: 12px; } .app-shell:not(.mobile-shell) .assistant-home-date-nav .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .action-button, .app-shell:not(.mobile-shell) .assistant-home-view-badge { min-height: 52px; padding: 0 20px; font-size: 15px; } .app-shell:not(.mobile-shell) .assistant-home-bottomline { gap: 14px; } .app-shell:not(.mobile-shell) .assistant-home-segmented { padding: 5px; gap: 5px; } .app-shell:not(.mobile-shell) .assistant-home-segmented button { min-width: 124px; min-height: 58px; padding: 0 22px; font-size: 17px; } .app-shell:not(.mobile-shell) .stats-row, .app-shell:not(.mobile-shell) .layout-assistant, .app-shell:not(.mobile-shell) .layout-boss, .app-shell:not(.mobile-shell) .main-stack { gap: 20px; } .app-shell:not(.mobile-shell) .stat-card { min-height: 148px; gap: 7px; } .app-shell:not(.mobile-shell) .stat-card-label { font-size: 12.5px; } .app-shell:not(.mobile-shell) .stat-card-value { font-size: clamp(24px, 1.7vw, 34px); } .app-shell:not(.mobile-shell) .stat-card-title-row { gap: 10px; align-items: center; } .app-shell:not(.mobile-shell) .stat-card-priority { min-width: 44px; min-height: 30px; padding: 0 9px; font-size: 15px; } .app-shell:not(.mobile-shell) .stat-card-title { font-size: clamp(17px, 1.14vw, 21px); line-height: 1.14; } .app-shell:not(.mobile-shell) .stat-card-note { line-height: 1.5; } .app-shell:not(.mobile-shell) .stat-card.metric-card .stat-card-note { max-width: none; } .app-shell:not(.mobile-shell) .stat-card-subnote { font-size: 11.5px; line-height: 1.5; } .app-shell:not(.mobile-shell) .assistant-workflow-nav { padding: 30px 18px 28px; gap: 24px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand { padding: 6px 14px 22px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .brand-mark { width: 58px; height: 58px; border-radius: 20px; margin-bottom: 20px; font-size: 19px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand h2 { margin-bottom: 10px; font-size: 30px; line-height: 1.08; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand p { max-width: 220px; font-size: 15px; line-height: 1.72; } .app-shell:not(.mobile-shell) .assistant-workflow-header { padding: 0 16px; font-size: 15px; letter-spacing: 0.12em; } .app-shell:not(.mobile-shell) .assistant-workflow-list { gap: 18px; padding: 0; } .app-shell:not(.mobile-shell) .workflow-nav-item { min-height: 74px; padding: 0 18px 0 20px; border-radius: 29px; gap: 14px; } .app-shell:not(.mobile-shell) .workflow-nav-copy { gap: 10px; } .app-shell:not(.mobile-shell) .workflow-nav-label { font-size: 17px; line-height: 1.18; } .app-shell:not(.mobile-shell) .workflow-nav-hint { font-size: 15px; line-height: 1.2; } .app-shell:not(.mobile-shell) .workflow-nav-item .nav-micro-heart { margin-left: 8px; min-width: 40px; height: 26px; padding: 0 9px 0 8px; gap: 5px; background: rgba(255, 246, 249, 0.98); border-color: rgba(244, 63, 94, 0.14); color: #f43f5e; box-shadow: 0 10px 22px rgba(244, 63, 94, 0.14); } .app-shell:not(.mobile-shell) .workflow-nav-item .nav-micro-heart-count { font-size: 12px; } .app-shell:not(.mobile-shell) .assistant-today-group { gap: 12px; padding: 2px 4px 0; } .app-shell:not(.mobile-shell) .assistant-today-list { gap: 18px; } .app-shell:not(.mobile-shell) .assistant-today-item { min-height: 56px; padding: 0 12px 0 8px; grid-template-columns: 108px minmax(0, 1fr); gap: 18px; } .app-shell:not(.mobile-shell) .assistant-today-date { font-size: 17px; } .app-shell:not(.mobile-shell) .assistant-today-note { font-size: 16px; } .app-shell:not(.mobile-shell) .panel-header { padding: 20px 22px 14px; gap: 10px; } .app-shell:not(.mobile-shell) .panel-title h4 { font-size: 22px; } .app-shell:not(.mobile-shell) .panel-title p { margin-top: 6px; font-size: 13px; line-height: 1.55; } .app-shell:not(.mobile-shell) .panel-body { padding: 22px; } .app-shell:not(.mobile-shell) .panel.calendar-focus-panel .panel-header { padding: 22px 24px 16px; } .app-shell:not(.mobile-shell) .panel.calendar-focus-panel .panel-body { padding: 22px 24px 26px; } .app-shell:not(.mobile-shell) .panel-header-meta, .app-shell:not(.mobile-shell) .calendar-panel-meta { gap: 6px; } .app-shell:not(.mobile-shell) .info-chip { min-height: 38px; padding: 0 14px; font-size: 13px; } .app-shell:not(.mobile-shell) .assistant-panel { gap: 16px; top: 112px; } .app-shell:not(.mobile-shell) .assistant-block { padding: 18px; border-radius: 24px; } .app-shell:not(.mobile-shell) .assistant-block h5 { margin-bottom: 12px; font-size: 17px; } .app-shell:not(.mobile-shell) .assistant-block-header, .app-shell:not(.mobile-shell) .command-block-header { margin-bottom: 12px; gap: 10px; } .app-shell:not(.mobile-shell) .assistant-list, .app-shell:not(.mobile-shell) .focus-grid, .app-shell:not(.mobile-shell) .command-list, .app-shell:not(.mobile-shell) .mailbox-feed { gap: 10px; } .app-shell:not(.mobile-shell) .assistant-list-item, .app-shell:not(.mobile-shell) .todo-card, .app-shell:not(.mobile-shell) .focus-card, .app-shell:not(.mobile-shell) .risk-card, .app-shell:not(.mobile-shell) .decision-card, .app-shell:not(.mobile-shell) .mailbox-feed-item { padding: 15px 16px; border-radius: 18px; } .app-shell:not(.mobile-shell) .mailbox-preview-card { padding: 15px 15px 15px 17px; } .app-shell:not(.mobile-shell) .assistant-list-item strong, .app-shell:not(.mobile-shell) .todo-card strong, .app-shell:not(.mobile-shell) .focus-card strong, .app-shell:not(.mobile-shell) .risk-card strong, .app-shell:not(.mobile-shell) .decision-card strong, .app-shell:not(.mobile-shell) .mailbox-feed-item strong { margin-bottom: 6px; font-size: 15px; line-height: 1.42; } .app-shell:not(.mobile-shell) .assistant-list-item span, .app-shell:not(.mobile-shell) .todo-card span, .app-shell:not(.mobile-shell) .focus-card span, .app-shell:not(.mobile-shell) .risk-card span, .app-shell:not(.mobile-shell) .decision-card span, .app-shell:not(.mobile-shell) .mailbox-feed-item span, .app-shell:not(.mobile-shell) .mailbox-preview-card span { line-height: 1.55; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-body { gap: 16px; } .app-shell:not(.mobile-shell) .assistant-chat-meta, .app-shell:not(.mobile-shell) .assistant-chat-header-actions { gap: 6px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message-list { min-height: 264px; max-height: min(50vh, 450px); padding-right: 6px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message { padding: 16px 20px; border-radius: 22px; font-size: 14px; line-height: 1.65; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message.user { margin-left: 18px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message.ai { margin-right: 18px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chip { min-height: 42px; padding: 0 16px; font-size: 14px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose { grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose .action-button { min-height: 56px; border-radius: 20px; } .app-shell:not(.mobile-shell) .day-timeline-shell { gap: 16px; } .app-shell:not(.mobile-shell) .day-section { gap: 10px; } .app-shell:not(.mobile-shell) .timeline-row { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; } .app-shell:not(.mobile-shell) .time-tower { min-height: 132px; padding: 16px 14px; border-radius: 20px; } .app-shell:not(.mobile-shell) .time-tower strong { margin-bottom: 6px; font-size: 22px; } .app-shell:not(.mobile-shell) .event-card { padding: 16px 16px 16px 20px; border-radius: 22px; } .app-shell:not(.mobile-shell) .event-card-header { margin-bottom: 12px; gap: 10px; } .app-shell:not(.mobile-shell) .event-time-slot { min-width: 160px; } .app-shell:not(.mobile-shell) .event-meta { gap: 6px; margin-bottom: 8px; } .app-shell:not(.mobile-shell) .event-card h5 { margin-bottom: 6px; font-size: 21px; } .app-shell:not(.mobile-shell) .event-card p { font-size: 14px; line-height: 1.6; } .app-shell:not(.mobile-shell) .event-card-body { gap: 18px; } .app-shell:not(.mobile-shell) .event-card-copy { gap: 14px; } .app-shell:not(.mobile-shell) .event-footer { gap: 10px; min-width: 160px; } .detail-drawer, .modal-backdrop, .login-overlay, .boss-welcome-overlay, .toast { position: fixed; z-index: 40; } .login-overlay { z-index: 47; } .boss-welcome-overlay { inset: 0; z-index: 46; display: grid; place-items: center; padding: 26px; background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 38%), radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.16), transparent 42%), rgba(8, 15, 28, 0.7); backdrop-filter: blur(14px); opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0.45s ease; } .boss-welcome-overlay.fading { opacity: 0; visibility: hidden; } .boss-welcome-card { width: min(1280px, 100%); min-height: min(82vh, 760px); border-radius: 36px; border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; display: grid; grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.44fr); background: #07111f; box-shadow: 0 38px 110px rgba(2, 6, 23, 0.46); } .boss-welcome-copy { position: relative; padding: 42px 40px; display: grid; align-content: center; gap: 18px; border-right: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(145deg, rgba(7, 17, 31, 0.92), rgba(10, 26, 52, 0.82)); } .boss-welcome-copy::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(147, 197, 253, 0.16), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%); pointer-events: none; } .boss-welcome-copy small { position: relative; z-index: 1; display: block; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(191, 219, 254, 0.9); font-weight: 600; } .boss-welcome-copy h3 { position: relative; z-index: 1; margin: 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.05em; color: white; } .boss-welcome-copy p { position: relative; z-index: 1; margin: 0; color: rgba(226, 232, 240, 0.8); font-size: 16px; line-height: 1.7; max-width: 520px; } .boss-welcome-progress { position: relative; z-index: 1; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.1); margin-top: 10px; } .boss-welcome-progress>span { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(250, 204, 21, 1), rgba(59, 130, 246, 0.92)); transform-origin: left center; animation: boss-welcome-progress 3s linear forwards; } .boss-welcome-visual { position: relative; min-height: 420px; display: grid; place-items: center; padding: 0; overflow: hidden; background: #050b15; } .boss-welcome-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 17, 31, 0.22), transparent 26%), linear-gradient(180deg, transparent, rgba(2, 6, 23, 0.18)); pointer-events: none; } .boss-welcome-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(1.08) contrast(1.05) brightness(0.96); background: transparent; border-radius: 0; } .boss-welcome-fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; background: radial-gradient(circle at top left, rgba(147, 197, 253, 0.16), transparent 32%), linear-gradient(135deg, rgba(7, 17, 31, 0.96), rgba(15, 23, 42, 0.92)); color: white; } .boss-welcome-fallback strong { display: block; font-size: 28px; margin-bottom: 10px; letter-spacing: -0.03em; } .boss-welcome-fallback span { display: block; font-size: 15px; line-height: 1.65; color: rgba(226, 232, 240, 0.82); } .boss-welcome-copy .ghost-button { position: relative; z-index: 1; border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #f8fafc; } html[data-theme="light"] .boss-welcome-overlay { background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 30%), radial-gradient(circle at bottom left, rgba(191, 219, 254, 0.24), transparent 32%), rgba(241, 245, 255, 0.68); } html[data-theme="light"] .boss-welcome-card.light-poster-mode { border: 1px solid rgba(191, 219, 254, 0.62); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.96)); box-shadow: 0 34px 88px rgba(37, 99, 235, 0.14), 0 20px 46px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .boss-welcome-card.light-poster-mode .boss-welcome-copy { border-right: 1px solid rgba(226, 232, 240, 0.9); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96)); } html[data-theme="light"] .boss-welcome-card.light-poster-mode .boss-welcome-copy::after { background: radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 34%), linear-gradient(180deg, rgba(37, 99, 235, 0.03), transparent 60%); } html[data-theme="light"] .boss-welcome-card.light-poster-mode .boss-welcome-copy small { color: #2563eb; } html[data-theme="light"] .boss-welcome-card.light-poster-mode .boss-welcome-copy h3 { color: #12213f; } html[data-theme="light"] .boss-welcome-card.light-poster-mode .boss-welcome-copy p { color: #52627d; } html[data-theme="light"] .boss-welcome-card.light-poster-mode .boss-welcome-progress { background: rgba(148, 163, 184, 0.16); border-color: rgba(148, 163, 184, 0.14); } html[data-theme="light"] .boss-welcome-card.light-poster-mode .boss-welcome-progress>span { background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(96, 165, 250, 0.92)); } html[data-theme="light"] .boss-welcome-card.light-poster-mode .boss-welcome-copy .ghost-button { border-color: rgba(37, 99, 235, 0.14); background: rgba(255, 255, 255, 0.96); color: #1e3a8a; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08); } html[data-theme="light"] .boss-welcome-visual.poster-mode { background: radial-gradient(circle at center, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 1) 58%), linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(252, 252, 253, 1)); } html[data-theme="light"] .boss-welcome-visual.poster-mode::after { background: linear-gradient(90deg, rgba(15, 23, 42, 0.05), transparent 12%, transparent 88%, rgba(15, 23, 42, 0.03)), linear-gradient(180deg, rgba(15, 23, 42, 0.02), transparent 22%, transparent 80%, rgba(15, 23, 42, 0.03)); } html[data-theme="dark"] .boss-welcome-overlay { background: radial-gradient(circle at top right, rgba(194, 160, 113, 0.10), transparent 30%), radial-gradient(circle at bottom left, rgba(78, 101, 138, 0.14), transparent 32%), rgba(8, 17, 29, 0.88); } html[data-theme="dark"] .boss-welcome-card.light-poster-mode { border: 1px solid rgba(137, 155, 179, 0.16); background: linear-gradient(180deg, rgba(12, 21, 35, 0.98), rgba(16, 27, 45, 0.94)); box-shadow: 0 34px 88px rgba(0, 0, 0, 0.4), 0 20px 46px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .boss-welcome-card.light-poster-mode .boss-welcome-copy { border-right: 1px solid rgba(137, 155, 179, 0.16); background: linear-gradient(180deg, rgba(12, 21, 35, 0.98), rgba(16, 27, 45, 0.94)); } html[data-theme="dark"] .boss-welcome-card.light-poster-mode .boss-welcome-copy::after { background: radial-gradient(circle at top left, rgba(194, 160, 113, 0.06), transparent 34%), linear-gradient(180deg, rgba(78, 101, 138, 0.04), transparent 60%); } html[data-theme="dark"] .boss-welcome-card.light-poster-mode .boss-welcome-copy small { color: #d7b27d !important; } html[data-theme="dark"] .boss-welcome-card.light-poster-mode .boss-welcome-copy h3 { color: #edf3fb; } html[data-theme="dark"] .boss-welcome-card.light-poster-mode .boss-welcome-copy p { color: #9eafc6; } html[data-theme="dark"] .boss-welcome-card.light-poster-mode .boss-welcome-progress { background: rgba(17, 30, 49, 0.92); border-color: rgba(137, 155, 179, 0.16); } html[data-theme="dark"] .boss-welcome-card.light-poster-mode .boss-welcome-progress>span { background: linear-gradient(135deg, #d7b27d, #c2a071); } html[data-theme="dark"] .boss-welcome-card.light-poster-mode .boss-welcome-copy .ghost-button { border-color: rgba(137, 155, 179, 0.16) !important; background: rgba(17, 30, 49, 0.92) !important; color: #edf3fb !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .boss-welcome-visual.poster-mode { background: radial-gradient(circle at center, rgba(13, 23, 38, 0.96), #0d1726 58%), linear-gradient(180deg, #08111d, #0d1726); } html[data-theme="dark"] .boss-welcome-visual.poster-mode::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)), linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent 22%, transparent 80%, rgba(0, 0, 0, 0.04)); } /* ── Dark-mode poster ── */ html[data-theme="dark"] .boss-welcome-poster { background: radial-gradient(circle at 30% 20%, rgba(194, 160, 113, 0.04), transparent 40%), linear-gradient(180deg, #08111d 0%, #0d1726 50%, #08111d 100%); } html[data-theme="dark"] .boss-welcome-poster::before { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 16px 30px rgba(220, 38, 38, 0.32); } html[data-theme="dark"] .boss-welcome-poster::after { border-color: rgba(137, 155, 179, 0.1); background: linear-gradient(180deg, rgba(137, 155, 179, 0.02), transparent 18%, transparent 82%, rgba(137, 155, 179, 0.025)), repeating-linear-gradient(0deg, transparent 0, transparent 13px, rgba(137, 155, 179, 0.035) 14px, transparent 15px); } html[data-theme="dark"] .boss-welcome-poster-pill { border-color: rgba(137, 155, 179, 0.18); background: rgba(17, 30, 49, 0.92); color: #edf3fb; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .boss-welcome-poster-line { color: #edf3fb; text-shadow: 0 2px 24px rgba(194, 160, 113, 0.1); } html[data-theme="dark"] .boss-welcome-emoji { filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.4)); } html[data-theme="dark"] .boss-welcome-figure-flare { color: rgba(215, 178, 125, 0.5); } html[data-theme="dark"] .boss-welcome-poster-caption { background: rgba(215, 178, 125, 0.1); color: #d7b27d; } .boss-welcome-poster { position: relative; width: 100%; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 20px 14px 16px; gap: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(255, 255, 255, 0.995)); } .boss-welcome-poster::before { content: "全脂牛马上钟"; position: absolute; right: 18px; top: 18px; min-height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ef4444, #dc2626); color: #ffffff; font-size: clamp(13px, 1vw, 18px); font-weight: 900; letter-spacing: 0.08em; box-shadow: 0 16px 30px rgba(220, 38, 38, 0.24); transform: rotate(8deg); pointer-events: none; z-index: 2; } .boss-welcome-poster::after { content: ""; position: absolute; inset: 12px; border-radius: 24px; border: 1px solid rgba(15, 23, 42, 0.06); background: linear-gradient(180deg, rgba(15, 23, 42, 0.012), transparent 18%, transparent 82%, rgba(15, 23, 42, 0.02)), repeating-linear-gradient(0deg, transparent 0, transparent 13px, rgba(15, 23, 42, 0.02) 14px, transparent 15px); pointer-events: none; z-index: 0; } .boss-welcome-poster-top, .boss-welcome-poster-bottom { position: relative; z-index: 1; display: grid; gap: 6px; width: 100%; justify-items: center; text-align: center; } .boss-welcome-poster-pill { width: fit-content; min-height: 36px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; border: 2px solid rgba(15, 23, 42, 0.1); background: rgba(255, 255, 255, 0.96); color: #0f172a; font-size: 12px; letter-spacing: 0.12em; font-weight: 900; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06); } .boss-welcome-poster-line { margin: 0; display: block; width: 100%; max-width: calc(100% - 44px); margin-inline: auto; font-size: clamp(48px, 5.2vw, 82px); line-height: 0.94; letter-spacing: -0.05em; color: #020617; font-weight: 900; text-align: center; white-space: nowrap; text-wrap: balance; } .boss-welcome-poster-figures { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 318px; margin-top: -2px; } .boss-welcome-emoji-stack { position: relative; flex: 1 1 0; min-width: 0; min-height: 302px; } .boss-welcome-emoji-stack.cow-stack { max-width: 300px; } .boss-welcome-emoji-stack.horse-stack { max-width: 344px; } .boss-welcome-emoji { position: absolute; display: block; line-height: 1; filter: drop-shadow(0 24px 32px rgba(15, 23, 42, 0.14)); user-select: none; } .boss-welcome-emoji.cow { left: 4%; bottom: 4%; font-size: clamp(148px, 14vw, 226px); transform: rotate(-6deg); } .boss-welcome-emoji.siren { left: 16%; top: -2%; font-size: clamp(78px, 6vw, 112px); transform: rotate(-8deg); } .boss-welcome-emoji.glasses { left: 24%; bottom: 30%; font-size: clamp(54px, 4vw, 78px); transform: rotate(-6deg); } .boss-welcome-emoji.horse { left: 4%; bottom: 0; font-size: clamp(162px, 15vw, 242px); transform: rotate(2deg); } .boss-welcome-emoji.bottle { right: -2%; bottom: 10%; font-size: clamp(102px, 9vw, 154px); transform: rotate(16deg); } .boss-welcome-figure-flare { position: absolute; top: 13%; left: 44%; font-size: clamp(24px, 2vw, 34px); color: rgba(239, 68, 68, 0.62); transform: rotate(8deg); font-weight: 900; } .boss-welcome-poster-caption { display: inline-flex; align-items: center; justify-content: center; margin: 4px auto 0; min-height: 34px; padding: 0 16px; border-radius: 999px; background: rgba(239, 68, 68, 0.08); color: #991b1b; font-size: 13px; line-height: 1.4; font-weight: 800; letter-spacing: 0.02em; } /* Boss poster overrides */ .boss-welcome-poster { padding: 18px 16px 18px; gap: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 255, 0.995)); } .boss-welcome-poster::before { content: "全脂牛马上钟"; top: 14px; min-height: 42px; padding: 0 18px; letter-spacing: 0.04em; transform: rotate(7deg); } .boss-welcome-poster-pill { letter-spacing: 0.08em; } .boss-welcome-poster-line { max-width: calc(100% - 56px); font-size: clamp(54px, 5.6vw, 88px); line-height: 0.96; letter-spacing: -0.05em; } .boss-welcome-poster-figures { gap: 6px; min-height: 332px; margin-top: 2px; } .boss-welcome-emoji-stack { min-height: 316px; } .boss-welcome-emoji-stack.cow-stack { max-width: 310px; } .boss-welcome-emoji-stack.horse-stack { max-width: 360px; } .boss-welcome-emoji.cow { left: 0; bottom: 6%; font-size: clamp(154px, 14vw, 232px); transform: rotate(-4deg); } /* 🚨 警报灯：按原图居中戴在牛头正上方（像帽子 / 警车灯顶），几乎不旋转 */ .boss-welcome-emoji.siren { left: 16%; top: 6%; bottom: auto; font-size: clamp(84px, 7vw, 124px); transform: rotate(-2deg); } .boss-welcome-emoji.glasses { left: 24%; bottom: 31%; transform: rotate(-8deg); } .boss-welcome-emoji.horse { left: 3%; bottom: 1%; font-size: clamp(166px, 15vw, 248px); transform: rotate(1deg); } /* 🍾 香槟瓶：按原图贴在马头右侧，瓶身从右下朝右上斜 +22°（像正在开瓶喷气） */ .boss-welcome-emoji.bottle { left: auto; right: 0; top: auto; bottom: 8%; font-size: clamp(120px, 11vw, 170px); transform: rotate(22deg); transform-origin: bottom center; } /* !! 感叹号：跟随警报灯放它右上角（声音效果） */ .boss-welcome-figure-flare { top: 6%; left: 34%; transform: rotate(14deg); } .boss-welcome-poster-caption { display: none; } html[data-theme="dark"] .boss-welcome-poster { background: radial-gradient(circle at 50% 22%, rgba(80, 132, 255, 0.12), transparent 36%), linear-gradient(180deg, #07111d 0%, #0c1525 56%, #08111b 100%); } html[data-theme="dark"] .boss-welcome-poster::after { border-color: rgba(141, 164, 196, 0.14); background: linear-gradient(180deg, rgba(137, 155, 179, 0.03), transparent 18%, transparent 82%, rgba(137, 155, 179, 0.04)), repeating-linear-gradient(0deg, transparent 0, transparent 13px, rgba(137, 155, 179, 0.045) 14px, transparent 15px); } html[data-theme="dark"] .boss-welcome-poster-pill { border-color: rgba(140, 160, 190, 0.22); background: rgba(13, 26, 45, 0.92); color: #eef4ff; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .boss-welcome-poster-line { color: #eef4ff; text-shadow: 0 8px 26px rgba(9, 15, 27, 0.28); } /* Overlay 打开时锁定背景滚动（v26 UX fix） 使用 :has() 选择器在任意 overlay 出现时冻结 html/body 的滚动。 这样点按抽屉/弹窗外不会意外带动主页面滚动。*/ html:has(> body .modal-backdrop), html:has(> body .login-overlay), html:has(> body .boss-welcome-overlay), body:has(.modal-backdrop), body:has(.login-overlay), body:has(.boss-welcome-overlay) { overflow: hidden !important; } html:has(> body .detail-drawer.mobile), body:has(.detail-drawer.mobile) { overflow: hidden !important; } .detail-drawer { position: fixed !important; inset: 24px 24px 24px auto; width: min(460px, calc(100vw - 48px)); height: auto; /* 防御性限高：即使祖先产生新的 containing block，也不会超过视口 */ max-height: calc(100vh - 48px); border-radius: 30px; border: 1px solid rgba(226, 232, 240, 0.92); background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.96)); box-shadow: 0 26px 64px rgba(15, 23, 42, 0.18); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateZ(0); } .detail-drawer.mobile { inset: 90px 12px 12px; width: auto; border-radius: 28px; } .app-shell:not(.mobile-shell) .detail-drawer:not(.mobile) { top: 24px !important; right: 24px !important; bottom: 24px !important; left: auto !important; height: calc(100vh - 48px); max-height: calc(100vh - 48px); contain: layout paint; } .detail-header { padding: 22px 22px 18px; border-bottom: 1px solid rgba(226, 232, 240, 0.92); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; position: sticky; top: 0; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1; } .detail-header h4 { margin: 0 0 10px; font-size: 28px; letter-spacing: -0.05em; line-height: 1.14; } .detail-header-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; } .detail-content { padding: 22px; display: grid; gap: 18px; } .detail-group { padding: 18px; border-radius: 22px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(248, 250, 252, 0.98); } .detail-group h5 { margin: 0 0 12px; font-size: 18px; letter-spacing: -0.03em; } .detail-subnote { margin: 0 0 14px; color: var(--text-sub); font-size: 14px; line-height: 1.6; } .boss-suggestion-block { border-radius: 20px; border: 1px solid rgba(245, 158, 11, 0.32); background: rgba(254, 243, 199, 0.34); padding: 14px 16px; display: grid; gap: 10px; } .boss-suggestion-title { font-size: 14px; color: #b45309; font-weight: 700; letter-spacing: 0.02em; } .boss-suggestion-list { display: grid; gap: 6px; } .boss-suggestion-item { border-radius: 14px; border: 1px solid rgba(245, 158, 11, 0.24); background: rgba(255, 255, 255, 0.76); padding: 10px 12px; color: #92400e; font-size: 13px; line-height: 1.6; } .boss-suggestion-meta { display: block; color: #b45309; font-size: 12px; margin-top: 4px; } /* 2026-05-16：批注删除按钮 — 老板可撤回自己写的批注 - 默认 0.55 透明度低调，hover 时变红高亮 - 绝对定位 + transform 让按钮在批注卡内**垂直居中**于右侧（不再贴顶） - 移动端/触屏：长按或点击都可触发，touch 友好 */ .boss-suggestion-item { position: relative; } .boss-suggestion-delete { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 0; background: transparent; color: rgba(180, 83, 9, 0.55); cursor: pointer; padding: 0; transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .boss-suggestion-delete:hover, .boss-suggestion-delete:focus-visible { background: rgba(239, 68, 68, 0.12); color: #dc2626; outline: none; } .boss-suggestion-delete:active { transform: translateY(-50%) scale(0.92); } /* 给批注内容右侧腾出 36px 给删除按钮，避免文字盖到 */ .boss-suggestion-item .boss-suggestion-content, .boss-suggestion-item > strong { display: block; padding-right: 36px; } /* comment-history-item 也复用同样位置定位（垂直居中）*/ .comment-history-item { position: relative; } .comment-history-item .comment-history-content { display: block; padding-right: 36px; } .comment-history-item .boss-suggestion-delete { /* override 默认 top: 50% 在 timeline item 中可能因 line-height 偏移 保留同样居中算法 */ top: 50%; right: 8px; } /* detail-meta-item 内的删除按钮调整：用 inline 而非绝对定位（因为该容器已是 flex row）， 让它跟时间戳并排显示，flex-shrink:0 防止被压扁 */ .detail-meta-item .boss-suggestion-delete { position: relative; top: auto; right: auto; transform: none; flex-shrink: 0; align-self: center; } .detail-meta-item .boss-suggestion-delete:active { transform: scale(0.92); } /* ============================================================ 2026-05-16：自定义 confirm 弹窗（替换浏览器原生 confirm） - 居中卡片（通过 .modal-backdrop 已是 flex center） - tone=danger 时确认按钮渲染为红色 - 与 commentModal/eventModal 视觉一致 ============================================================ */ .confirm-modal-card { max-width: 420px !important; width: calc(100vw - 32px); padding: 0 !important; overflow: hidden; animation: confirm-modal-pop-in 0.24s cubic-bezier(0.32, 0.72, 0, 1) both; } @keyframes confirm-modal-pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .confirm-modal-body { padding: 28px 28px 8px; text-align: center; } .confirm-modal-icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .confirm-modal-icon.is-danger { background: rgba(239, 68, 68, 0.12); color: #dc2626; } .confirm-modal-icon.is-primary { background: rgba(99, 102, 241, 0.12); color: #6366f1; } .confirm-modal-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text-main, #0f172a); line-height: 1.4; } .confirm-modal-message { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-sub, #64748b); } .confirm-modal-footer { display: flex; gap: 10px; padding: 18px 24px 22px; justify-content: center; border-top: 1px solid rgba(15, 23, 42, 0.06); margin-top: 14px; } .confirm-modal-footer > button { min-width: 96px; padding: 10px 22px !important; min-height: 40px !important; } /* danger tone 确认按钮：红色背景，hover 加深 */ .confirm-modal-footer .action-button.is-danger { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important; border-color: #dc2626 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.32) !important; } .confirm-modal-footer .action-button.is-danger:hover { background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important; box-shadow: 0 6px 18px rgba(220, 38, 38, 0.42) !important; } html[data-theme="dark"] .confirm-modal-title { color: var(--v4-ink-1, #e2e8f0) !important; } html[data-theme="dark"] .confirm-modal-message { color: var(--v4-ink-2, #94a3b8) !important; } html[data-theme="dark"] .confirm-modal-footer { border-top-color: rgba(255, 255, 255, 0.08) !important; } /* 移动端窄屏：按钮充满宽度，更易点 */ @media (max-width: 540px) { .confirm-modal-footer { flex-direction: column-reverse; gap: 8px; } .confirm-modal-footer > button { width: 100%; } } .boss-edit-notification { border-radius: 20px; border: 1px solid rgba(37, 99, 235, 0.24); background: rgba(219, 234, 254, 0.42); padding: 14px 16px; display: grid; gap: 6px; } .boss-edit-notification h6 { margin: 0; font-size: 14px; color: var(--brand); } .boss-edit-notification-item { border-radius: 14px; border: 1px solid rgba(37, 99, 235, 0.18); background: rgba(255, 255, 255, 0.78); padding: 9px 11px; color: #1e3a8a; font-size: 13px; line-height: 1.55; } .comment-modal-card { width: min(620px, 100%); } .detail-meta { display: grid; gap: 10px; } .detail-meta-item { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; color: var(--text-sub); font-size: 14px; line-height: 1.6; } .detail-meta-item strong { color: var(--text-main); min-width: 80px; font-size: 14px; font-weight: 700; } .priority-selector { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .priority-option { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(255, 255, 255, 0.92); color: var(--text-main); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .priority-option.active { background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 0.9)); border-color: transparent; color: white; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.2); } .priority-option.clear { background: rgba(248, 250, 252, 0.96); color: var(--text-sub); } .modal-backdrop, .login-overlay { position: fixed; inset: 0; z-index: 2400; background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(14px); display: grid; place-items: center; padding: 24px; } .modal-card, .login-card { width: min(860px, 100%); border-radius: 32px; border: 1px solid rgba(226, 232, 240, 0.92); background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.96)); box-shadow: 0 28px 72px rgba(15, 23, 42, 0.2); overflow: hidden; } .modal-header, .login-header { padding: 24px 26px 18px; border-bottom: 1px solid rgba(226, 232, 240, 0.92); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .modal-header h4, .login-header h4 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.05em; } .modal-header p, .login-header p { margin: 0; color: var(--text-sub); line-height: 1.6; font-size: 14px; } .modal-body, .login-body { padding: 24px 26px 28px; } .event-modal-card { max-height: min(calc(100vh - 48px), 960px); max-height: min(calc(100dvh - 48px), 960px); display: flex; flex-direction: column; } .event-modal-card .modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable both-edges; overscroll-behavior: contain; scroll-padding-top: 18px; scroll-padding-bottom: 120px; padding: 22px 26px 0; transform: translateZ(0); } .event-modal-card .event-modal-form { min-height: min-content; display: grid; align-content: start; gap: 18px; padding-bottom: 28px; } .event-modal-card .event-modal-form::after { content: ""; display: block; min-height: 8px; } .event-modal-card .event-form-footer { flex: 0 0 auto; padding: 20px 26px 22px; border-top: 1px solid rgba(226, 232, 240, 0.92); position: relative; z-index: 2; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)); box-shadow: 0 -10px 28px rgba(148, 163, 184, 0.08); } .event-modal-card .event-form-actions { margin-top: 0; padding-top: 0; position: static; background: transparent; } .auth-register-success-card { width: min(560px, 100%); max-height: min(calc(100vh - 48px), 760px); max-height: min(calc(100dvh - 48px), 760px); display: flex; flex-direction: column; } .auth-register-success-card .modal-body { overflow: auto; padding: 28px 32px 32px; } .auth-register-success-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .auth-register-success-icon { width: 112px; height: 112px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #eef4ff, #dfeafe); color: #1e40af; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); flex: 0 0 auto; } .auth-register-success-icon svg { width: 64px; height: 64px; display: block; } .auth-register-success-title, .auth-register-success-desc, .auth-register-success-note { margin: 0; } .auth-register-success-title { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: var(--text-main); } .auth-register-success-desc { max-width: 420px; color: var(--text-sub); line-height: 1.7; font-size: 15px; } .auth-register-success-note { color: var(--text-main); font-size: 15px; line-height: 1.6; } .auth-register-success-actions { display: flex; justify-content: center; margin-top: 28px; } .auth-register-success-actions .action-button { min-width: 168px; min-height: 52px; border-radius: 999px; } .auth-register-success-close { width: 40px; height: 40px; border: none; border-radius: 999px; background: rgba(148, 163, 184, 0.12); color: var(--text-sub); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; } .auth-register-success-close svg { width: 18px; height: 18px; display: block; } .auth-sso-preview-layer { position: fixed; inset: 0; z-index: 2450; background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; place-items: center; padding: 24px; } .auth-sso-preview-card { width: min(520px, 100%); max-height: min(calc(100vh - 48px), 680px); max-height: min(calc(100dvh - 48px), 680px); display: flex; flex-direction: column; } .auth-sso-preview-card .modal-body { overflow: auto; padding: 28px 32px 32px; } .auth-sso-preview-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .auth-sso-preview-icon { width: 112px; height: 112px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fff7ed, #ffedd5); color: #c2410c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); flex: 0 0 auto; } .auth-sso-preview-icon svg { width: 64px; height: 64px; display: block; } .auth-sso-preview-title, .auth-sso-preview-desc { margin: 0; } .auth-sso-preview-title { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: var(--text-main); } .auth-sso-preview-desc { max-width: 400px; color: var(--text-sub); line-height: 1.7; font-size: 15px; } .auth-sso-preview-actions { display: flex; justify-content: center; margin-top: 28px; } .auth-sso-preview-actions .action-button { min-width: 140px; min-height: 52px; border-radius: 999px; } html[data-theme="dark"] .event-modal-card .event-form-footer { border-top-color: rgba(71, 85, 105, 0.58); background: linear-gradient(180deg, rgba(9, 15, 26, 0.98), rgba(9, 15, 26, 0.99)); box-shadow: 0 -12px 32px rgba(2, 6, 23, 0.36); } /* ══════════════════════════════════════════════ 新首次引导 — 工作台浮窗 (New Onboarding Overlay) ══════════════════════════════════════════════ */ body:has(.onboarding-overlay) { overflow: hidden; } .onboarding-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(2, 8, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: onb-fade-in 0.32s ease-out; overscroll-behavior: contain; } @keyframes onb-fade-in { from { opacity: 0; } to { opacity: 1; } } .onboarding-window { display: flex; width: min(980px, calc(100vw - 40px)); height: min(calc(100vh - 24px), 820px); height: min(calc(100dvh - 24px), 820px); border-radius: 24px; overflow: hidden; background: rgba(14, 22, 38, 0.97); border: 1px solid rgba(120, 150, 220, 0.12); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(100, 130, 200, 0.06); animation: onb-scale-in 0.35s var(--ease-out); overscroll-behavior: contain; } @keyframes onb-scale-in { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── 左侧步骤列表 ── */ .onb-sidebar { width: 280px; min-width: 280px; display: flex; flex-direction: column; border-right: 1px solid rgba(120, 150, 220, 0.1); background: rgba(10, 16, 30, 0.6); } .onb-sidebar-head { padding: 24px 24px 18px; border-bottom: 1px solid rgba(120, 150, 220, 0.08); } .onb-sidebar-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7c93ff; margin-bottom: 8px; } .onb-sidebar-kicker svg { width: 14px; height: 14px; } .onb-sidebar-title { font-size: 17px; font-weight: 700; color: #e8ecf4; margin: 0 0 4px; } .onb-sidebar-subtitle { font-size: 12px; color: #7c8baa; margin: 0; } .onb-progress-row { display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-bottom: 1px solid rgba(120, 150, 220, 0.08); } .onb-progress-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(120, 150, 220, 0.12); overflow: hidden; } .onb-progress-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #4a6cf7, #7c93ff); transition: width 0.4s ease; } .onb-progress-text { font-size: 11px; color: #7c8baa; white-space: nowrap; } /* ── 步骤按钮 ── */ .onb-step-list { flex: 1; display: grid; align-content: start; gap: 4px; overflow: hidden; padding: 8px 12px; } .onb-step-btn { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; transition: background 0.18s; color: inherit; font-family: inherit; } .onb-step-btn:hover { background: rgba(120, 150, 220, 0.08); } .onb-step-btn.active { background: rgba(74, 108, 247, 0.12); } .onb-step-index { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px; background: rgba(120, 150, 220, 0.1); color: #7c8baa; border: 2px solid rgba(120, 150, 220, 0.15); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; } .onb-step-btn.active .onb-step-index { background: linear-gradient(135deg, #4a6cf7, #6e8cff); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(74, 108, 247, 0.35); } .onb-step-btn.done .onb-step-index { background: rgba(22, 163, 74, 0.15); color: #16a34a; border-color: rgba(22, 163, 74, 0.3); } .onb-step-copy { flex: 1; min-width: 0; } .onb-step-copy strong { display: block; font-size: 13px; font-weight: 600; color: #c1cbe0; margin-bottom: 2px; transition: color 0.2s; } .onb-step-btn.active .onb-step-copy strong { color: #e8ecf4; } .onb-step-copy span { display: block; font-size: 11px; color: #5e6c89; line-height: 1.4; } /* ── 右侧内容区 ── */ .onb-content { flex: 1; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; overflow-y: hidden; } .onb-content-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid rgba(120, 150, 220, 0.08); } .onb-content-head-left { display: flex; align-items: center; gap: 10px; } .onb-step-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: rgba(74, 108, 247, 0.12); color: #7c93ff; } .onb-role-tag { display: inline-flex; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: rgba(236, 124, 66, 0.12); color: #ec7c42; } .onb-close-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(120, 150, 220, 0.08); color: #7c8baa; cursor: pointer; display: grid; place-items: center; transition: background 0.18s, color 0.18s, transform 0.18s; } .onb-close-btn:hover { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .onb-close-btn svg { width: 16px; height: 16px; } /* ── 当前步骤卡片 ── */ .onb-card { min-height: 0; padding: 20px 24px 16px; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; } .onb-card::-webkit-scrollbar { width: 6px; } .onb-card::-webkit-scrollbar-thumb { background: rgba(120, 150, 220, 0.2); border-radius: 3px; } .onb-card-header { margin-bottom: 14px; } .onb-card-header h3 { font-size: 20px; font-weight: 700; color: #e8ecf4; margin: 0 0 6px; } .onb-card-header p { font-size: 13px; color: #8896b3; margin: 0; line-height: 1.55; } /* ── 图示区 ── */ .onb-illust { background: rgba(120, 150, 220, 0.05); border: 1px solid rgba(120, 150, 220, 0.08); border-radius: 16px; padding: 18px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; min-height: 112px; color: #7c93ff; } .onb-illust svg { width: 200px; height: 120px; } /* ── 详细说明 ── */ .onb-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .onb-detail-item { background: rgba(120, 150, 220, 0.05); border: 1px solid rgba(120, 150, 220, 0.08); border-radius: 12px; padding: 12px 14px; } .onb-detail-item strong { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #c1cbe0; margin-bottom: 4px; } .onb-detail-item strong .onb-di-icon { width: 16px; height: 16px; color: #7c93ff; } .onb-detail-item p { font-size: 11px; color: #7c8baa; margin: 0; line-height: 1.45; } /* ── 步骤切换动画 ── */ @keyframes onb-step-enter { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } .onb-card { animation: onb-step-enter 0.38s var(--ease-out); } /* ── 详细项交错入场 ── */ .onb-detail-item { animation: onb-detail-pop 0.4s var(--ease-out) both; } .onb-detail-item:nth-child(1) { animation-delay: 0.08s; } .onb-detail-item:nth-child(2) { animation-delay: 0.16s; } .onb-detail-item:nth-child(3) { animation-delay: 0.24s; } .onb-detail-item:nth-child(4) { animation-delay: 0.32s; } @keyframes onb-detail-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── 动画示例场景卡片 ── */ .onb-demo-scene { background: rgba(74, 108, 247, 0.04); border: 1px solid rgba(74, 108, 247, 0.10); border-radius: 16px; padding: 18px 20px 14px; margin-bottom: 14px; overflow: hidden; flex-shrink: 0; } .onb-demo-scene-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #7c93ff; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .onb-demo-scene-title svg { width: 14px; height: 14px; } .onb-demo-flow { display: flex; align-items: center; justify-content: center; gap: 0; padding: 8px 0; flex-wrap: nowrap; overflow-x: auto; } .onb-demo-node { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(120, 150, 220, 0.07); border: 1px solid rgba(120, 150, 220, 0.12); border-radius: 12px; min-width: 80px; max-width: 110px; text-align: center; animation: onb-node-pop 0.45s var(--ease-out) both; flex-shrink: 0; } .onb-demo-node:nth-child(1) { animation-delay: 0.15s; } .onb-demo-node:nth-child(3) { animation-delay: 0.35s; } .onb-demo-node:nth-child(5) { animation-delay: 0.55s; } .onb-demo-node:nth-child(7) { animation-delay: 0.75s; } @keyframes onb-node-pop { from { opacity: 0; transform: scale(0.7) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .onb-demo-node-icon { font-size: 22px; line-height: 1; } .onb-demo-node-label { font-size: 11px; font-weight: 600; color: #c1cbe0; line-height: 1.3; } .onb-demo-node-sub { font-size: 9px; color: #7c8baa; line-height: 1.3; } .onb-demo-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 6px; flex-shrink: 0; animation: onb-arrow-slide 0.35s var(--ease-out) both; } .onb-demo-arrow:nth-child(2) { animation-delay: 0.25s; } .onb-demo-arrow:nth-child(4) { animation-delay: 0.45s; } .onb-demo-arrow:nth-child(6) { animation-delay: 0.65s; } @keyframes onb-arrow-slide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .onb-demo-arrow svg { width: 20px; height: 14px; color: #7c93ff; } .onb-demo-arrow-label { font-size: 8px; color: #5e6c89; white-space: nowrap; } .onb-demo-scenario { margin-top: 12px; padding: 10px 14px; background: rgba(74, 108, 247, 0.06); border-radius: 10px; font-size: 11px; color: #8896b3; line-height: 1.6; animation: onb-scenario-fade 0.5s 0.8s both; } @keyframes onb-scenario-fade { from { opacity: 0; } to { opacity: 1; } } .onb-demo-scenario strong { color: #c1cbe0; } /* ── 示例提示 (fallback) ── */ .onb-example { display: flex; align-items: flex-start; gap: 10px; background: rgba(74, 108, 247, 0.06); border: 1px solid rgba(74, 108, 247, 0.12); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; } .onb-example-icon { width: 18px; height: 18px; flex-shrink: 0; color: #7c93ff; margin-top: 1px; } .onb-example-text { font-size: 11px; color: #8896b3; line-height: 1.5; } .onb-example-text strong { color: #c1cbe0; } /* ── 跳转按钮特殊样式 ── */ .onb-btn-jump { background: linear-gradient(135deg, rgba(74, 108, 247, 0.12), rgba(110, 140, 255, 0.08)); color: #7c93ff; border: 1px solid rgba(74, 108, 247, 0.18); transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), color 0.22s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out); } .onb-btn-jump:hover { background: linear-gradient(135deg, rgba(74, 108, 247, 0.2), rgba(110, 140, 255, 0.14)); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(74, 108, 247, 0.25); } .onb-btn-jump svg { transition: transform 0.22s; } .onb-btn-jump:hover svg { transform: translateX(3px); } /* ── 演示 GIF 折叠区 ── */ .onb-gif-wrap { margin-top: 14px; background: rgba(139, 92, 246, 0.06); border: 1px solid rgba(139, 92, 246, 0.18); border-radius: 12px; overflow: hidden; flex-shrink: 0; transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out); } .onb-gif-summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: #a5b4fc; user-select: none; list-style: none; } .onb-gif-summary::-webkit-details-marker { display: none; } .onb-gif-summary > svg:first-child { width: 14px; height: 14px; flex-shrink: 0; color: #8b5cf6; } .onb-gif-summary > span { flex: 1; } .onb-gif-chev { width: 14px; height: 14px; flex-shrink: 0; color: rgba(165, 180, 252, 0.6); transition: transform 0.22s var(--ease-out); } .onb-gif-wrap[open] .onb-gif-chev { transform: rotate(180deg); } .onb-gif-wrap:hover { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.28); } .onb-gif-body { padding: 0 16px 16px; animation: onbGifFade 0.28s var(--ease-out); } @keyframes onbGifFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .onb-gif-img { display: block; width: 100%; max-width: 720px; margin: 0 auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.35); } .onb-gif-fallback { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 8px; background: rgba(15, 23, 42, 0.35); border: 1px dashed rgba(165, 180, 252, 0.3); color: rgba(226, 232, 240, 0.78); } .onb-gif-fallback > svg { width: 40px; height: 40px; flex-shrink: 0; color: rgba(139, 92, 246, 0.6); } .onb-gif-fallback-text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; } .onb-gif-fallback-text strong { color: #e2e8f0; font-size: 13.5px; } .onb-gif-fallback-text span { color: rgba(203, 213, 225, 0.65); font-size: 12.5px; } html[data-theme="light"] .onb-gif-wrap { background: rgba(139, 92, 246, 0.06); border-color: rgba(139, 92, 246, 0.2); } html[data-theme="light"] .onb-gif-summary { color: #6d28d9; } html[data-theme="light"] .onb-gif-chev { color: rgba(124, 58, 237, 0.5); } html[data-theme="light"] .onb-gif-fallback { background: rgba(241, 245, 249, 0.8); border-color: rgba(139, 92, 246, 0.35); color: #475569; } html[data-theme="light"] .onb-gif-fallback-text strong { color: #1e293b; } html[data-theme="light"] .onb-gif-fallback-text span { color: #64748b; } /* ── 沙盘步 CTA 按钮组 ── */ .onb-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; flex-shrink: 0; } .onb-btn-cta { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.32); padding: 10px 16px; font-weight: 600; transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .onb-btn-cta:hover { background: rgba(99, 102, 241, 0.22); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28); } .onb-btn-cta-danger { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.32); padding: 10px 16px; font-weight: 600; transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .onb-btn-cta-danger:hover { background: rgba(239, 68, 68, 0.2); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28); } html[data-theme="light"] .onb-btn-cta { background: rgba(99, 102, 241, 0.08); color: #4338ca; border-color: rgba(99, 102, 241, 0.28); } html[data-theme="light"] .onb-btn-cta:hover { background: rgba(99, 102, 241, 0.15); } html[data-theme="light"] .onb-btn-cta-danger { background: rgba(239, 68, 68, 0.06); color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); } html[data-theme="light"] .onb-btn-cta-danger:hover { background: rgba(239, 68, 68, 0.14); } /* ── 最小化悬浮恢复按钮 ── */ .onb-resume-fab { position: fixed; left: 50%; right: auto; bottom: 28px; z-index: 9998; display: flex; align-items: center; gap: 6px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(74, 108, 247, 0.25); background: linear-gradient(135deg, rgba(14, 22, 38, 0.95), rgba(20, 30, 52, 0.97)); color: #7c93ff; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(74, 108, 247, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: onb-fab-enter 0.4s var(--ease-out); transition: background 0.22s, box-shadow 0.22s, transform 0.22s; transform: translateX(-50%); } .onb-resume-attention-layer { position: fixed; inset: 0; z-index: 9997; pointer-events: auto; background: radial-gradient(circle at 50% calc(100% - 54px), rgba(124, 147, 255, 0.14) 0, rgba(124, 147, 255, 0.14) 86px, rgba(124, 147, 255, 0) 124px), radial-gradient(circle at 50% calc(100% - 54px), rgba(255, 255, 255, 0.98) 0, rgba(255, 255, 255, 0.98) 104px, rgba(7, 11, 21, 0.88) 176px, rgba(7, 11, 21, 0.92) 100%); animation: onb-attention-fade-in 0.22s ease-out; } .onb-resume-attention-layer::before { content: ""; position: fixed; left: 50%; right: auto; bottom: 88px; width: 18px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, 0.96); transform: translateX(-50%) rotate(45deg); box-shadow: 8px 10px 24px rgba(15, 23, 42, 0.08); } .onb-resume-attention-layer::after { content: "继续引导，请点击这里"; position: fixed; left: 50%; right: auto; bottom: 104px; width: 232px; min-height: 48px; padding: 12px 16px; border-radius: 18px; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, 0.96); color: #1d4ed8; font-size: 15px; font-weight: 800; letter-spacing: 0.01em; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18); transform: translateX(-50%); } .onb-resume-fab.is-attention { animation: onb-resume-attention 2s var(--ease-out); } .onb-resume-fab:hover { transform: translateX(-50%) translateY(-2px) scale(1.03); box-shadow: 0 12px 40px rgba(74, 108, 247, 0.3), 0 0 0 1px rgba(74, 108, 247, 0.2); background: linear-gradient(135deg, rgba(20, 30, 52, 0.97), rgba(30, 42, 68, 0.98)); } .onb-resume-fab svg { width: 16px; height: 16px; } .onb-resume-fab .onb-fab-pulse { width: 8px; height: 8px; border-radius: 50%; background: #7c93ff; animation: onb-fab-pulse 2s infinite; } @keyframes onb-fab-enter { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.8); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes onb-fab-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } @keyframes onb-attention-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes onb-resume-attention { 0% { transform: translateX(-50%) translateY(0) scale(1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(74, 108, 247, 0.1); } 22% { transform: translateX(-50%) translateY(-4px) scale(1.1); box-shadow: 0 22px 64px rgba(74, 108, 247, 0.4), 0 0 0 10px rgba(124, 147, 255, 0.22); } 44% { transform: translateX(-50%) translateY(0) scale(1.03); box-shadow: 0 18px 54px rgba(74, 108, 247, 0.32), 0 0 0 14px rgba(124, 147, 255, 0.12); } 68% { transform: translateX(-50%) translateY(-2px) scale(1.07); box-shadow: 0 20px 58px rgba(74, 108, 247, 0.36), 0 0 0 8px rgba(124, 147, 255, 0.18); } 100% { transform: translateX(-50%) translateY(0) scale(1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(74, 108, 247, 0.1); } } /* ── 底部操作栏 ── */ .onb-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-top: 1px solid rgba(120, 150, 220, 0.08); } .onb-footer-left { display: flex; align-items: center; gap: 10px; } .onb-footer-right { display: flex; align-items: center; gap: 10px; } .onb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s; font-family: inherit; } .onb-btn-primary { background: linear-gradient(135deg, #4a6cf7, #6e8cff); color: #fff; box-shadow: 0 2px 12px rgba(74, 108, 247, 0.3); } .onb-btn-primary:hover { box-shadow: 0 4px 18px rgba(74, 108, 247, 0.45); transform: translateY(-1px); } .onb-btn-secondary { background: rgba(120, 150, 220, 0.1); color: #c1cbe0; } .onb-btn-secondary:hover { background: rgba(120, 150, 220, 0.18); } .onb-btn-ghost { background: transparent; color: #7c8baa; } .onb-btn-ghost:hover { color: #c1cbe0; } .onb-btn-skip { background: transparent; color: #7c8baa; font-size: 12px; padding: 6px 12px; } .onb-btn-skip:hover { color: #ef4444; } .onb-btn svg { width: 14px; height: 14px; } /* ── Light theme ── */ html[data-theme="light"] .onboarding-overlay { background: rgba(200, 210, 230, 0.55); } html[data-theme="light"] .onboarding-window { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); } html[data-theme="light"] .onb-sidebar { background: #f7f9fc; border-right-color: #e8ecf2; } html[data-theme="light"] .onb-sidebar-head { border-bottom-color: #e8ecf2; } html[data-theme="light"] .onb-sidebar-kicker { color: #4a6cf7; } html[data-theme="light"] .onb-sidebar-title { color: #1a2138; } html[data-theme="light"] .onb-sidebar-subtitle { color: #6b7a96; } html[data-theme="light"] .onb-progress-row { border-bottom-color: #e8ecf2; } html[data-theme="light"] .onb-progress-bar { background: #e8ecf2; } html[data-theme="light"] .onb-progress-text { color: #6b7a96; } html[data-theme="light"] .onb-step-btn:hover { background: rgba(0, 0, 0, 0.04); } html[data-theme="light"] .onb-step-btn.active { background: rgba(74, 108, 247, 0.08); } html[data-theme="light"] .onb-step-index { background: #eef1f6; color: #6b7a96; border-color: #dce2ee; } html[data-theme="light"] .onb-step-copy strong { color: #3a4560; } html[data-theme="light"] .onb-step-btn.active .onb-step-copy strong { color: #1a2138; } html[data-theme="light"] .onb-step-copy span { color: #8896b3; } html[data-theme="light"] .onb-content-head { border-bottom-color: #e8ecf2; } html[data-theme="light"] .onb-close-btn { background: #f0f2f6; color: #6b7a96; } html[data-theme="light"] .onb-close-btn:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } html[data-theme="light"] .onb-card-header h3 { color: #1a2138; } html[data-theme="light"] .onb-card-header p { color: #6b7a96; } html[data-theme="light"] .onb-illust { background: #f7f9fc; border-color: #e8ecf2; color: #4a6cf7; } html[data-theme="light"] .onb-detail-item { background: #f7f9fc; border-color: #e8ecf2; } html[data-theme="light"] .onb-detail-item strong { color: #1a2138; } html[data-theme="light"] .onb-detail-item p { color: #6b7a96; } html[data-theme="light"] .onb-example { background: rgba(74, 108, 247, 0.04); border-color: rgba(74, 108, 247, 0.1); } html[data-theme="light"] .onb-example-text { color: #6b7a96; } html[data-theme="light"] .onb-example-text strong { color: #1a2138; } html[data-theme="light"] .onb-footer { border-top-color: #e8ecf2; } html[data-theme="light"] .onb-btn-secondary { background: #f0f2f6; color: #3a4560; } html[data-theme="light"] .onb-btn-secondary:hover { background: #e4e8ee; } html[data-theme="light"] .onb-btn-ghost { color: #6b7a96; } html[data-theme="light"] .onb-btn-ghost:hover { color: #1a2138; } html[data-theme="light"] .onb-demo-scene { background: rgba(74, 108, 247, 0.03); border-color: rgba(74, 108, 247, 0.08); } html[data-theme="light"] .onb-demo-scene-title { color: #4a6cf7; } html[data-theme="light"] .onb-demo-node { background: #f0f4ff; border-color: #dce4f8; } html[data-theme="light"] .onb-demo-node-label { color: #1a2138; } html[data-theme="light"] .onb-demo-node-sub { color: #6b7a96; } html[data-theme="light"] .onb-demo-arrow-label { color: #8896b3; } html[data-theme="light"] .onb-demo-scenario { background: rgba(74, 108, 247, 0.04); color: #6b7a96; } html[data-theme="light"] .onb-demo-scenario strong { color: #1a2138; } html[data-theme="light"] .onb-btn-jump { background: linear-gradient(135deg, rgba(74, 108, 247, 0.08), rgba(110, 140, 255, 0.05)); color: #4a6cf7; border-color: rgba(74, 108, 247, 0.15); } html[data-theme="light"] .onb-btn-jump:hover { background: linear-gradient(135deg, rgba(74, 108, 247, 0.14), rgba(110, 140, 255, 0.1)); } html[data-theme="light"] .onb-resume-fab { background: linear-gradient(135deg, #ffffff, #f7f9fc); border-color: rgba(74, 108, 247, 0.2); color: #4a6cf7; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(74, 108, 247, 0.08); } html[data-theme="light"] .onb-resume-fab:hover { box-shadow: 0 12px 40px rgba(74, 108, 247, 0.15), 0 0 0 1px rgba(74, 108, 247, 0.15); } html[data-theme="light"] .onb-resume-attention-layer { background: radial-gradient(circle at 50% calc(100% - 54px), rgba(74, 108, 247, 0.14) 0, rgba(74, 108, 247, 0.14) 86px, rgba(74, 108, 247, 0) 124px), radial-gradient(circle at 50% calc(100% - 54px), rgba(255, 255, 255, 0.98) 0, rgba(255, 255, 255, 0.98) 104px, rgba(182, 194, 216, 0.8) 176px, rgba(182, 194, 216, 0.88) 100%); } /* ── 移动端适配 ── */ @media (max-width: 768px) { .onboarding-window { flex-direction: column; width: calc(100vw - 24px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); } /* 移动端关键修复：flex column 里 .onb-content 没有 min-height: 0， 导致 grid auto-1fr-auto 的 1fr (.onb-card) 不能真正收缩， 整个 .onb-content 被 children 撑爆，超出 .onboarding-window 的 max-height + overflow: hidden 后，底部 .onb-footer (含"下一步"按钮) 被裁掉看不见 → 用户感知"点击下一步无反应"。 加上 min-height: 0 让它能在 flex column 中正确收缩。*/ .onb-content { min-height: 0; } .onb-sidebar { width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid rgba(120, 150, 220, 0.1); } .onb-step-list { display: flex; overflow-x: auto; overflow-y: hidden; padding: 8px; gap: 4px; } .onb-step-btn { flex-direction: column; align-items: center; min-width: 80px; padding: 8px; text-align: center; } .onb-step-copy span { display: none; } .onb-detail-grid { grid-template-columns: 1fr; } .onb-demo-flow { gap: 0; padding: 4px 0; } .onb-demo-node { min-width: 64px; padding: 8px 10px; } .onb-demo-node-icon { font-size: 18px; } .onb-demo-node-label { font-size: 10px; } .onb-demo-arrow { padding: 0 3px; } .onb-demo-arrow svg { width: 14px; } .onb-demo-arrow-label { display: none; } .onb-resume-fab { bottom: 16px; left: 50%; right: auto; padding: 10px 16px; font-size: 12px; } .onb-resume-attention-layer { background: radial-gradient(circle at 50% calc(100% - 46px), rgba(124, 147, 255, 0.12) 0, rgba(124, 147, 255, 0.12) 74px, rgba(124, 147, 255, 0) 112px), radial-gradient(circle at 50% calc(100% - 46px), rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0.96) 92px, rgba(8, 14, 26, 0.82) 150px, rgba(8, 14, 26, 0.9) 100%); } .onb-resume-attention-layer::before { left: 50%; right: auto; bottom: 74px; transform: translateX(-50%) rotate(45deg); } .onb-resume-attention-layer::after { left: 50%; right: auto; bottom: 90px; width: min(260px, calc(100vw - 32px)); min-height: 44px; padding: 10px 14px; font-size: 14px; transform: translateX(-50%); } } .guide-hero { padding: 24px; border-radius: 28px; border: 1px solid rgba(226, 232, 240, 0.94); background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.96)); box-shadow: var(--shadow-panel); display: grid; gap: 16px; } .guide-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .guide-hero-copy { display: grid; gap: 10px; max-width: 760px; } .guide-hero-copy h3 { margin: 0; font-size: 34px; line-height: 1.14; letter-spacing: -0.05em; } .guide-hero-copy p { margin: 0; color: var(--text-sub); font-size: 15px; line-height: 1.7; } .guide-role-pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px; background: rgba(37, 99, 235, 0.1); color: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .guide-nav { display: flex; flex-wrap: wrap; gap: 10px; } .guide-nav a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(226, 232, 240, 0.94); color: var(--text-sub); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out); } .guide-nav a:hover { border-color: rgba(37, 99, 235, 0.3); color: var(--brand); transform: translateY(-1px); } .guide-section-card { padding: 22px; border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.94); background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-panel); display: grid; gap: 16px; scroll-margin-top: 24px; } .guide-section-head { display: grid; gap: 6px; } .guide-section-head small { color: var(--text-soft); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; } .guide-section-head h4 { margin: 0; font-size: 26px; letter-spacing: -0.04em; line-height: 1.18; } .guide-section-head p { margin: 0; color: var(--text-sub); font-size: 14px; line-height: 1.65; } .guide-point-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .guide-point { padding: 16px; border-radius: 18px; border: 1px solid rgba(226, 232, 240, 0.9); background: rgba(248, 250, 252, 0.9); display: grid; gap: 6px; } .guide-point strong { font-size: 15px; line-height: 1.4; letter-spacing: -0.02em; } .guide-point p, .guide-step-copy p, .guide-faq-item p { margin: 0; color: var(--text-sub); font-size: 13px; line-height: 1.6; } .guide-step-list, .guide-faq-list { display: grid; gap: 12px; } .guide-step-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(226, 232, 240, 0.72); } .guide-step-item:first-child { border-top: 0; padding-top: 0; } .guide-step-index { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.1); color: var(--brand); font-size: 14px; font-weight: 700; } .guide-step-copy { display: grid; gap: 6px; } .guide-step-copy strong, .guide-faq-item strong { font-size: 16px; line-height: 1.35; letter-spacing: -0.02em; } .guide-faq-item { padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(226, 232, 240, 0.9); background: rgba(248, 250, 252, 0.9); display: grid; gap: 6px; } html[data-theme="dark"] .guide-hero, html[data-theme="dark"] .guide-section-card, html[data-theme="dark"] .guide-point, html[data-theme="dark"] .guide-faq-item { border-color: rgba(71, 85, 105, 0.54); background: rgba(15, 23, 42, 0.78); } html[data-theme="dark"] .guide-hero { background: radial-gradient(circle at top left, rgba(215, 178, 125, 0.16), transparent 36%), linear-gradient(180deg, rgba(9, 15, 26, 0.98), rgba(8, 17, 29, 0.95)); } html[data-theme="dark"] .guide-role-pill, html[data-theme="dark"] .guide-step-index { background: rgba(215, 178, 125, 0.14); color: var(--brand); } html[data-theme="dark"] .guide-nav a { border-color: rgba(71, 85, 105, 0.54); background: rgba(15, 23, 42, 0.74); color: var(--text-sub); } html[data-theme="dark"] .guide-nav a:hover { border-color: rgba(215, 178, 125, 0.38); color: var(--brand); } html[data-theme="dark"] .guide-step-item { border-top-color: rgba(71, 85, 105, 0.4); } html[data-theme="dark"] .onboarding-resume-button { background: linear-gradient(135deg, rgba(9, 15, 26, 0.98), rgba(215, 178, 125, 0.82)); box-shadow: 0 24px 42px rgba(2, 6, 23, 0.38); } @media (max-width: 900px) { .onboarding-wizard-layout { grid-template-columns: 1fr; } .onboarding-sidebar { border-right: 0; border-bottom: 1px solid rgba(226, 232, 240, 0.92); } html[data-theme="dark"] .onboarding-sidebar { border-bottom-color: rgba(71, 85, 105, 0.54); } .onboarding-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .onboarding-modal-card { width: min(100%, 100%); max-height: min(calc(100vh - 16px), 100vh); max-height: min(calc(100dvh - 16px), 100dvh); border-radius: 28px; } .onboarding-modal-card .modal-header { padding: 20px 18px 16px; align-items: flex-start; } .onboarding-sidebar, .onboarding-main { padding: 20px 18px 22px; } .onboarding-current-card { padding: 20px 18px; } .onboarding-current-card h4 { font-size: 28px; } .onboarding-detail-grid { grid-template-columns: 1fr; } .onboarding-footer { flex-direction: column; align-items: stretch; } .onboarding-footer-note { max-width: none; } .onboarding-footer-actions { width: 100%; } .onboarding-footer-actions button { flex: 1 1 100%; } .onboarding-resume-button { left: 16px; right: 16px; bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 14px); min-width: 0; } } .login-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: stretch; } .login-hero { padding: 24px; border-radius: 28px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(37, 99, 235, 0.92)); color: white; min-height: 100%; } .login-hero small { display: block; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); font-size: 12px; margin-bottom: 8px; } .login-hero h5 { margin: 0 0 10px; font-size: 30px; letter-spacing: -0.05em; line-height: 1.12; } .login-hero p { margin: 0; color: rgba(255, 255, 255, 0.84); line-height: 1.7; font-size: 14px; } .login-presets { display: grid; gap: 12px; margin-top: 18px; } .login-form-panel { display: grid; gap: 18px; align-content: start; } .login-preset { text-align: left; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); color: white; } html[data-theme="dark"] .login-overlay { background: radial-gradient(circle at top right, rgba(215, 178, 125, 0.16), transparent 24%), radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.16), transparent 28%), rgba(4, 10, 19, 0.78); } html[data-theme="dark"] .login-card { border: 1px solid rgba(137, 155, 179, 0.18) !important; background: linear-gradient(180deg, rgba(7, 14, 24, 0.98), rgba(11, 19, 33, 0.96)) !important; box-shadow: 0 36px 90px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } html[data-theme="dark"] .login-header { border-bottom: 1px solid rgba(137, 155, 179, 0.14); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent); } html[data-theme="dark"] .login-header h4 { color: #f4f7fb; } html[data-theme="dark"] .login-header p { color: #a3b4ca; } html[data-theme="dark"] .login-header .ghost-button { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(137, 155, 179, 0.16) !important; color: #eef4fb !important; } html[data-theme="dark"] .login-hero { border: 1px solid rgba(137, 155, 179, 0.16); background: radial-gradient(circle at top left, rgba(215, 178, 125, 0.2), transparent 32%), linear-gradient(145deg, rgba(15, 24, 40, 0.98), rgba(26, 41, 64, 0.94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 54px rgba(0, 0, 0, 0.24); } html[data-theme="dark"] .login-hero small { color: rgba(215, 178, 125, 0.9); } html[data-theme="dark"] .login-hero h5 { color: #f8fbff; } html[data-theme="dark"] .login-hero p { color: rgba(226, 232, 240, 0.82); } html[data-theme="dark"] .login-preset { background: rgba(255, 255, 255, 0.06); border-color: rgba(137, 155, 179, 0.16); color: #edf3fb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .login-preset strong { color: #ffffff; } html[data-theme="dark"] .login-form-panel .field label { color: #b7c4d7; } html[data-theme="dark"] .login-form-panel .field input, html[data-theme="dark"] .login-form-panel .field select { background: rgba(10, 18, 30, 0.96) !important; border-color: rgba(137, 155, 179, 0.18) !important; color: #eef4fb !important; } html[data-theme="dark"] .login-form-panel .action-button { background: linear-gradient(135deg, rgba(215, 178, 125, 1), rgba(184, 138, 84, 0.96)); color: #182131; box-shadow: 0 14px 32px rgba(215, 178, 125, 0.24); } .toast { z-index: 48; right: 24px; bottom: 24px; padding: 14px 16px; border-radius: 18px; background: rgba(15, 23, 42, 0.94); color: white; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2); max-width: 320px; line-height: 1.6; font-size: 14px; animation: fade-slide 0.25s ease; } .empty-state { border-radius: 26px; padding: 26px; background: rgba(248, 250, 252, 0.96); border: 1px dashed rgba(148, 163, 184, 0.42); color: var(--text-sub); text-align: center; line-height: 1.7; } .prototype-frame.mobile-preview .detail-drawer, .prototype-frame.mobile-preview .modal-backdrop, .prototype-frame.mobile-preview .login-overlay, .prototype-frame.mobile-preview .boss-welcome-overlay, .prototype-frame.mobile-preview .toast { position: absolute; } .prototype-frame.mobile-preview .boss-welcome-overlay, .prototype-frame.mobile-preview .modal-backdrop, .prototype-frame.mobile-preview .login-overlay { inset: 0; padding: 0; } .prototype-frame.mobile-preview .boss-welcome-card, .prototype-frame.mobile-preview .modal-card, .prototype-frame.mobile-preview .login-card { width: 100%; max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } .prototype-frame.mobile-preview .boss-welcome-card { min-height: calc(100% - 4px); grid-template-columns: 1fr; border-radius: 30px; } .prototype-frame.mobile-preview .boss-welcome-copy { padding: 28px 24px 22px; border-right: 0; border-bottom: 1px solid rgba(226, 232, 240, 0.9); gap: 14px; } .prototype-frame.mobile-preview .boss-welcome-copy h3 { font-size: clamp(28px, 8vw, 38px); } .prototype-frame.mobile-preview .boss-welcome-copy p { font-size: 14px; line-height: 1.6; } .prototype-frame.mobile-preview .boss-welcome-visual { min-height: 260px; padding: 0; } .prototype-frame.mobile-preview .boss-welcome-visual img { border-radius: 0; object-fit: cover; } .prototype-frame.mobile-preview .boss-welcome-poster { padding: 16px 10px 12px; gap: 6px; } .prototype-frame.mobile-preview .boss-welcome-poster-line { max-width: calc(100% - 20px); font-size: clamp(28px, 7.8vw, 44px); line-height: 0.98; letter-spacing: -0.03em; white-space: nowrap; } .prototype-frame.mobile-preview .boss-welcome-poster-pill { min-height: 32px; padding: 0 12px; font-size: 11px; letter-spacing: 0.08em; } .prototype-frame.mobile-preview .boss-welcome-poster-figures { min-height: 208px; gap: 2px; } .prototype-frame.mobile-preview .boss-welcome-emoji-stack { min-height: 188px; } .prototype-frame.mobile-preview .boss-welcome-emoji.cow { left: 0; bottom: 4%; font-size: clamp(104px, 26vw, 148px); } .prototype-frame.mobile-preview .boss-welcome-emoji.siren { left: 14%; top: -2%; font-size: clamp(48px, 12vw, 70px); } .prototype-frame.mobile-preview .boss-welcome-emoji.glasses { left: 18%; bottom: 28%; font-size: clamp(34px, 9vw, 50px); } .prototype-frame.mobile-preview .boss-welcome-emoji.horse { left: 2%; bottom: 2%; font-size: clamp(114px, 28vw, 160px); } .prototype-frame.mobile-preview .boss-welcome-emoji.bottle { right: -2%; bottom: 10%; font-size: clamp(68px, 17vw, 96px); } .prototype-frame.mobile-preview .boss-welcome-figure-flare { top: 13%; left: 40%; font-size: clamp(18px, 5vw, 28px); } .prototype-frame.mobile-preview .boss-welcome-poster-caption { min-height: 30px; padding: 0 12px; font-size: 11px; line-height: 1.35; } .prototype-frame.mobile-preview .modal-card, .prototype-frame.mobile-preview .login-card, .prototype-frame.mobile-preview .comment-modal-card { border-radius: 28px 28px 0 0; } .prototype-frame.mobile-preview .modal-header, .prototype-frame.mobile-preview .login-header { padding: 20px 18px 14px; flex-direction: column; align-items: stretch; } .prototype-frame.mobile-preview .modal-header h4, .prototype-frame.mobile-preview .login-header h4 { font-size: 24px; } .prototype-frame.mobile-preview .modal-body, .prototype-frame.mobile-preview .login-body { padding: 18px; } .prototype-frame.mobile-preview .login-body { grid-template-columns: 1fr; gap: 16px; } .prototype-frame.mobile-preview .login-hero { padding: 18px; border-radius: 22px; min-height: auto; } .prototype-frame.mobile-preview .login-hero h5 { font-size: 22px; line-height: 1.16; } .prototype-frame.mobile-preview .login-hero p { font-size: 13px; line-height: 1.58; } .prototype-frame.mobile-preview .login-presets { gap: 10px; margin-top: 14px; } .prototype-frame.mobile-preview .login-preset { padding: 12px; border-radius: 16px; font-size: 13px; line-height: 1.45; } .prototype-frame.mobile-preview .login-form-panel { gap: 14px; } .prototype-frame.mobile-preview .login-form-panel .form-grid { gap: 12px; } .prototype-frame.mobile-preview .login-form-panel .field label { font-size: 13px; } .prototype-frame.mobile-preview .login-form-panel .field input, .prototype-frame.mobile-preview .login-form-panel .field select { min-height: 44px; border-radius: 14px; padding: 10px 12px; font-size: 14px; } .prototype-frame.mobile-preview .login-header .ghost-button, .prototype-frame.mobile-preview .login-form-panel .split-actions>* { width: 100%; } .prototype-frame.mobile-preview .login-form-panel .split-actions { margin-top: 0 !important; } .prototype-frame.mobile-preview .modal-backdrop { place-items: end stretch; background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.48)); } .prototype-frame.mobile-preview .modal-card, .prototype-frame.mobile-preview .comment-modal-card { align-self: end; max-height: min(86%, 720px); animation: mobile-sheet-up 0.3s var(--ease-out); box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.18); } .prototype-frame.mobile-preview .modal-card::before, .prototype-frame.mobile-preview .comment-modal-card::before, .prototype-frame.mobile-preview .detail-drawer.mobile::before { content: ""; display: block; width: 54px; height: 5px; border-radius: 999px; background: rgba(148, 163, 184, 0.65); margin: 10px auto 0; } .prototype-frame.mobile-preview .login-overlay { place-items: stretch; padding: 0; background: radial-gradient(circle at top right, rgba(191, 219, 254, 0.26), transparent 24%), linear-gradient(180deg, rgba(244, 247, 251, 0.98), rgba(233, 239, 247, 0.98)); } .prototype-frame.mobile-preview .login-card { min-height: 100%; max-height: none; border-radius: 0; box-shadow: none; } .prototype-frame.mobile-preview .detail-drawer.mobile { inset: auto 8px 8px 8px; min-height: min(74%, 700px); max-height: calc(100% - 88px); border-radius: 28px; animation: mobile-sheet-up 0.3s var(--ease-out); box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.18); } .prototype-frame.mobile-preview .toast { left: 12px; right: 12px; bottom: 96px; max-width: none; } .app-shell.mobile-shell { padding-bottom: 0; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; transform: translateZ(0); touch-action: pan-y; } .app-shell.mobile-shell .main-shell { min-height: 100%; } .app-shell.mobile-shell .main-stack { gap: 16px; } .app-shell.mobile-shell .page-header { padding: 18px 14px 12px; position: sticky; top: 0; border-radius: 0 0 24px 24px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05); will-change: transform; transform: translateZ(0); } .app-shell.mobile-shell .header-topline { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 14px; } .app-shell.mobile-shell .title-stack h3 { font-size: 24px; line-height: 1.08; letter-spacing: -0.05em; } .app-shell.mobile-shell .title-stack p { font-size: 12px; line-height: 1.55; max-width: 30ch; } .app-shell.mobile-shell .header-controls, .app-shell.mobile-shell .header-strip { width: 100%; } .app-shell.mobile-shell .header-controls { justify-content: flex-start; gap: 6px; } .app-shell.mobile-shell .header-controls>* { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center; text-align: center; } .app-shell.mobile-shell .header-strip { display: grid; gap: 6px; } .app-shell.mobile-shell .header-strip .segmented { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .app-shell.mobile-shell .header-strip .info-chip { width: 100%; justify-content: center; text-align: center; } .app-shell.mobile-shell .header-strip-actions { margin-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .app-shell.mobile-shell .header-strip-actions .ghost-button, .app-shell.mobile-shell .header-strip-actions .action-button { width: 100%; justify-content: center; } .app-shell.mobile-shell .info-chip, .app-shell.mobile-shell .ghost-button, .app-shell.mobile-shell .action-button, .app-shell.mobile-shell .event-detail-chip, .app-shell.mobile-shell .priority-option { /* 2026-05-09 a11y：从 40px 提到 44px，满足 Apple HIG 最小触摸命中区 44pt */ min-height: 44px; padding: 0 14px; font-size: 13px; } .app-shell.mobile-shell .page-body.mobile { padding: 14px 14px 22px; gap: 16px; transform: translateZ(0); } .app-shell.mobile-shell .page-body.mobile.calendar-focus-mode { padding-top: 16px; gap: 0; } .app-shell.mobile-shell .stats-row { display: none; } .app-shell.mobile-shell .mobile-stats-layout { display: grid; gap: 12px; } .app-shell.mobile-shell .mobile-stats-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 78%); gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; transform: translateZ(0); } .app-shell.mobile-shell .mobile-stats-grid::-webkit-scrollbar { display: none; } .app-shell.mobile-shell .mobile-stats-grid .stat-card { min-height: 106px; padding: 11px 11px 10px; border-radius: 18px; gap: 5px; scroll-snap-align: start; } .app-shell.mobile-shell .mobile-stats-layout .stat-card { min-height: 128px; padding: 16px 16px 14px; border-radius: 22px; gap: 6px; align-content: start; } .app-shell.mobile-shell .mobile-stats-featured .stat-card { min-height: 120px; padding: 14px 14px 12px; gap: 6px; } .app-shell.mobile-shell .stat-card { min-height: 136px; padding: 16px 16px 14px; border-radius: 22px; gap: 6px; align-content: start; } .app-shell.mobile-shell .stat-card.featured-card { grid-column: auto; min-height: 124px; } .app-shell.mobile-shell .mobile-stats-featured .stat-card-label { font-size: 12px; line-height: 1.25; } .app-shell.mobile-shell .stat-card small, .app-shell.mobile-shell .stat-card-label { font-size: 13px; line-height: 1.35; } .app-shell.mobile-shell .mobile-stats-grid .stat-card-label { font-size: 11px; line-height: 1.2; } .app-shell.mobile-shell .stat-card strong, .app-shell.mobile-shell .stat-card-value { font-size: clamp(24px, 7vw, 34px); } .app-shell.mobile-shell .mobile-stats-grid .stat-card-value { font-size: clamp(18px, 5.4vw, 25px); line-height: 0.94; } .app-shell.mobile-shell .stat-card-note, .app-shell.mobile-shell .stat-card span { font-size: 13px; line-height: 1.48; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; } .app-shell.mobile-shell .mobile-stats-grid .stat-card-note { font-size: 10px; line-height: 1.32; -webkit-line-clamp: 2; line-clamp: 2; line-clamp: 2; } .app-shell.mobile-shell .stat-card-subnote { margin-top: 0; font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; } .app-shell.mobile-shell .mobile-stats-grid .stat-card-subnote { font-size: 9px; line-height: 1.28; -webkit-line-clamp: 2; line-clamp: 2; line-clamp: 2; } .app-shell.mobile-shell .stat-card-title-row { flex-direction: column; gap: 10px; } .app-shell.mobile-shell .mobile-stats-featured .stat-card.featured-card { min-height: 120px; } .app-shell.mobile-shell .mobile-stats-featured .stat-card-title-row { flex-direction: column; align-items: flex-start; gap: 7px; } .app-shell.mobile-shell .stat-card-priority { min-width: 48px; min-height: 32px; padding: 0 11px; font-size: 17px; } .app-shell.mobile-shell .mobile-stats-featured .stat-card-priority { min-width: 40px; min-height: 26px; padding: 0 8px; font-size: 14px; } .app-shell.mobile-shell .stat-card-title { font-size: clamp(16px, 4.6vw, 21px); line-height: 1.12; } .app-shell.mobile-shell .mobile-stats-featured .stat-card-title { flex: 1 1 auto; font-size: clamp(14px, 4vw, 18px); line-height: 1.14; letter-spacing: -0.03em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; } .app-shell.mobile-shell .mobile-stats-featured .stat-card-note { margin-top: 2px; font-size: 11px; line-height: 1.35; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-shell.mobile-shell .mobile-stats-featured .stat-card-subnote { font-size: 10px; line-height: 1.35; max-width: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-shell.mobile-shell .layout-assistant, .app-shell.mobile-shell .layout-boss, .app-shell.mobile-shell .todo-layout, .app-shell.mobile-shell .mailbox-layout, .app-shell.mobile-shell .inbox-layout, .app-shell.mobile-shell .pending-layout { grid-template-columns: 1fr; gap: 18px; } .app-shell.mobile-shell .assistant-block, .app-shell.mobile-shell .panel { border-radius: 24px; } .app-shell.mobile-shell .assistant-block { padding: 18px; } .app-shell.mobile-shell .panel-header { padding: 18px 18px 14px; flex-direction: column; align-items: stretch; gap: 12px; } .app-shell.mobile-shell .panel-title h4 { font-size: 22px; } .app-shell.mobile-shell .panel-title p { margin-top: 6px; font-size: 13px; line-height: 1.55; } .app-shell.mobile-shell .panel-body, .app-shell.mobile-shell .panel.calendar-focus-panel .panel-body { padding: 18px; } .app-shell.mobile-shell .panel-header-meta, .app-shell.mobile-shell .calendar-panel-meta, .app-shell.mobile-shell .assistant-chat-header-actions, .app-shell.mobile-shell .pending-detail-toolbar { width: 100%; margin-left: 0; justify-content: stretch; } .app-shell.mobile-shell .panel-header-meta>*, .app-shell.mobile-shell .calendar-panel-meta>*, .app-shell.mobile-shell .assistant-chat-header-actions>*, .app-shell.mobile-shell .pending-detail-toolbar>* { width: 100%; justify-content: center; text-align: center; } .app-shell.mobile-shell .panel.calendar-focus-panel .panel-header { padding: 18px 18px 14px; } .app-shell.mobile-shell .split-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .app-shell.mobile-shell .split-actions>* { width: 100%; justify-content: center; } .app-shell.mobile-shell .form-grid.two, .app-shell.mobile-shell .mailbox-summary-grid { grid-template-columns: 1fr; } .app-shell.mobile-shell .detail-meta-item, .app-shell.mobile-shell .pending-card-header, .app-shell.mobile-shell .pending-card-actions, .app-shell.mobile-shell .todo-card-row, .app-shell.mobile-shell .mailbox-feed-header, .app-shell.mobile-shell .detail-header, .app-shell.mobile-shell .detail-header-actions { flex-direction: column; align-items: stretch; justify-content: flex-start; } .app-shell.mobile-shell .detail-meta-item { gap: 4px; } .app-shell.mobile-shell .detail-meta-item strong { min-width: 0; } .app-shell.mobile-shell .pending-card, .app-shell.mobile-shell .todo-card, .app-shell.mobile-shell .mailbox-feed-item, .app-shell.mobile-shell .command-card, .app-shell.mobile-shell .detail-group { border-radius: 20px; } .app-shell.mobile-shell .mailbox-summary-card { padding: 16px; border-radius: 20px; } .app-shell.mobile-shell .detail-drawer.mobile { inset: 74px 10px 10px; border-radius: 24px; } .app-shell.mobile-shell .detail-header { padding: 18px 18px 14px; } .app-shell.mobile-shell .detail-header h4 { font-size: 24px; line-height: 1.12; } .app-shell.mobile-shell .detail-content { padding: 18px; gap: 14px; } .app-shell.mobile-shell .page-header.mobile { padding-top: calc(16px + var(--mobile-header-safe-top)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .app-shell.mobile-shell .page-body.mobile { padding-bottom: calc(var(--mobile-nav-height) + 20px + var(--mobile-safe-bottom)); animation: mobile-screen-rise 0.34s var(--ease-out); } .mobile-app-bar { display: grid; gap: 14px; } .mobile-app-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mobile-app-role { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); color: var(--text-main); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .mobile-app-role::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.12); flex: 0 0 auto; } .mobile-app-status { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(226, 232, 240, 0.92); color: var(--text-sub); font-size: 12px; font-weight: 600; white-space: nowrap; } .mobile-app-hero { display: grid; gap: 10px; padding: 18px 18px 16px; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.84)); border: 1px solid rgba(226, 232, 240, 0.96); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07); } .mobile-app-eyebrow { display: inline-flex; width: fit-content; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(37, 99, 235, 0.08); color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .mobile-app-hero h3 { margin: 0; font-size: clamp(28px, 8vw, 34px); line-height: 1.02; letter-spacing: -0.06em; } .mobile-app-hero p { margin: 0; color: var(--text-sub); font-size: 13px; line-height: 1.62; max-width: 32ch; } .mobile-app-meta-row, .mobile-app-actions, .mobile-app-utility-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .mobile-app-meta-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(248, 250, 252, 0.94); border: 1px solid rgba(226, 232, 240, 0.92); color: var(--text-sub); font-size: 12px; font-weight: 600; } .mobile-app-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mobile-app-actions>* { width: 100%; justify-content: center; } .mobile-app-utility-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; transform: translateZ(0); } .mobile-app-utility-row::-webkit-scrollbar, .assistant-chips::-webkit-scrollbar { display: none; } .mobile-app-utility-row .info-chip { flex: 0 0 auto; } .app-shell.mobile-shell .mobile-ai-banner { padding: 14px 16px; border-radius: 20px; } .app-shell.mobile-shell .mobile-bottom-nav { gap: 6px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); } .app-shell.mobile-shell .mobile-bottom-nav { min-height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)); padding-bottom: calc(12px + var(--mobile-safe-bottom)); border-top: 1px solid rgba(226, 232, 240, 0.88); background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.94)); box-shadow: 0 -16px 36px rgba(15, 23, 42, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); will-change: transform; transform: translateZ(0); } body > #app > .mobile-bottom-nav { position: fixed; left: 50%; right: auto; bottom: 0; display: grid; gap: 6px; width: min(428px, 100vw); min-height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)); padding: 10px 10px calc(12px + var(--mobile-safe-bottom)); border-top: 1px solid rgba(226, 232, 240, 0.88); background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.94)); box-shadow: 0 -16px 36px rgba(15, 23, 42, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1100; transform: translateX(-50%); will-change: auto; } body.native-mobile-body > #app > .mobile-bottom-nav { left: 0; right: 0; width: 100%; transform: none; } body > #app > .mobile-bottom-nav.assistant-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } body > #app > .mobile-bottom-nav.boss-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* * mobile-bottom-nav CSS cascade (consolidated): * 1. Base: .mobile-bottom-nav → position:fixed, z-index:800 (line ~4642) * 2. Shell: .mobile-shell .mobile-bottom-nav → safe-area padding, blur bg (here, ~9882) * 3. @520px: column counts per role (line ~10720) * 4. @520px: column counts (override guard) (line ~11107) * 5. @390px: compact spacing only (line ~13078) * Do NOT duplicate grid-template-columns across multiple breakpoints. */ .app-shell.mobile-shell .mobile-nav-item, body > #app > .mobile-bottom-nav .mobile-nav-item { min-height: 58px; padding: 8px 4px; border-radius: 18px; font-size: 11px; background: transparent; border-color: transparent; } .app-shell.mobile-shell .mobile-nav-item-main, body > #app > .mobile-bottom-nav .mobile-nav-item-main { display: grid; justify-items: center; gap: 5px; font-size: 11px; line-height: 1.1; } .mobile-nav-icon { width: 28px; height: 28px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.06); color: var(--text-main); font-size: 12px; font-weight: 700; letter-spacing: -0.02em; transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out); } .mobile-nav-icon svg { width: 18px; height: 18px; display: block; } .app-shell.mobile-shell .mobile-nav-item[data-route="settings"] .mobile-nav-icon, body > #app > .mobile-bottom-nav .mobile-nav-item[data-route="settings"] .mobile-nav-icon { box-sizing: border-box; width: 36px !important; height: 36px !important; border-radius: 13px !important; padding: 6px; color: #ffffff; background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 0.9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px rgba(37, 99, 235, 0.18); } .app-shell.mobile-shell .mobile-nav-item[data-route="settings"] .mobile-nav-icon svg, body > #app > .mobile-bottom-nav .mobile-nav-item[data-route="settings"] .mobile-nav-icon svg { width: 24px !important; height: 24px !important; } .app-shell.mobile-shell .mobile-nav-item.active[data-route="settings"] .mobile-nav-icon, body > #app > .mobile-bottom-nav .mobile-nav-item.active[data-route="settings"] .mobile-nav-icon { background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 0.9)); color: #ffffff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 24px rgba(37, 99, 235, 0.24); } .mobile-nav-label { display: inline-flex; align-items: center; gap: 4px; color: inherit; } .app-shell.mobile-shell .mobile-nav-item.active, body > #app > .mobile-bottom-nav .mobile-nav-item.active { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14); } .app-shell.mobile-shell .mobile-nav-item.active .mobile-nav-icon, body > #app > .mobile-bottom-nav .mobile-nav-item.active .mobile-nav-icon { background: var(--brand); color: white; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24); } /* v243：底部 nav 收信箱徽章 — 绝对定位到 icon 右上角 ─────────────────────────────────────────────────────────── 原本 .nav-micro-heart 是 inline 元素，作为 .mobile-nav-label 的子， 直接拼接在"收信箱"文字旁边，徽章宽 31px（❤+数字），但 nav-item 整体 宽只有 ~70px，文字 "收信箱" 自身就占 56px → 徽章被挤到文字后面 与"收信箱"的"信箱"两字重叠，看起来像"女信箱"。 修法：nav-item 升 position:relative，徽章 absolute 到右上角， 脱离文字流，文字 "收信箱" 完整显示，徽章浮在 icon 右上 1/4 区域， 常见角标设计。pointer-events:none 防止徽章拦截 nav-item 点击。 */ .app-shell.mobile-shell .mobile-nav-item, body > #app > .mobile-bottom-nav .mobile-nav-item { position: relative; } .app-shell.mobile-shell .mobile-nav-item .nav-micro-heart, body > #app > .mobile-bottom-nav .mobile-nav-item .nav-micro-heart { position: absolute; top: 4px; right: 6px; min-width: 22px; height: 18px; padding: 0 5px; pointer-events: none; z-index: 2; } .app-shell.mobile-shell .header-strip .segmented button { min-width: 0; padding: 0 10px; font-size: 12px; } .app-shell.mobile-shell .day-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; transform: translateZ(0); } .app-shell.mobile-shell .day-filter-row::-webkit-scrollbar { display: none; } .app-shell.mobile-shell .day-section-header { align-items: flex-start; } .app-shell.mobile-shell .day-section-title { display: grid; gap: 4px; } .app-shell.mobile-shell .day-expand-bar { justify-content: stretch; } .app-shell.mobile-shell .day-expand-bar .ghost-button { width: 100%; } .app-shell.mobile-shell .assistant-chat-panel .assistant-compose { grid-template-columns: 1fr; } .app-shell.mobile-shell .assistant-chat-panel .assistant-compose input, .app-shell.mobile-shell .assistant-chat-panel .assistant-compose .action-button { min-height: 54px; width: 100%; } .app-shell.mobile-shell .assistant-chat-panel .assistant-message-list { min-height: 260px; max-height: min(46vh, 420px); padding-bottom: 10px; -webkit-overflow-scrolling: touch; transform: translateZ(0); } .app-shell.mobile-shell .assistant-chat-panel .assistant-message { padding: 14px 16px; border-radius: 20px; font-size: 14px; line-height: 1.6; } .app-shell.mobile-shell .assistant-chat-panel .assistant-message.user { margin-left: 16px; } .app-shell.mobile-shell .assistant-chat-panel .assistant-message.ai { margin-right: 16px; } .app-shell.mobile-shell .assistant-chat-panel .panel-body { gap: 14px; } .app-shell.mobile-shell .assistant-chat-panel .assistant-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; margin-right: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; transform: translateZ(0); } .app-shell.mobile-shell .assistant-chat-panel .assistant-chip { flex: 0 0 auto; } .app-shell.mobile-shell .assistant-chat-panel .assistant-compose { position: sticky; bottom: 0; z-index: 2; padding-top: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96) 28%); } .app-shell.mobile-shell .event-card { padding: 16px; border-radius: 22px; } .app-shell.mobile-shell .event-card-header { flex-direction: column; align-items: stretch; gap: 10px; } .app-shell.mobile-shell .event-card-header>.badge { align-self: flex-start; } .sheet-handle { width: 46px; height: 5px; border-radius: 999px; background: rgba(148, 163, 184, 0.48); margin: 10px auto 0; } .mobile-fab { position: fixed; right: 18px; bottom: calc(var(--mobile-nav-height) + 14px + var(--mobile-safe-bottom)); min-width: 132px; min-height: 52px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 0.92)); color: white; box-shadow: 0 18px 38px rgba(37, 99, 235, 0.28); z-index: 9; animation: mobile-fab-in 0.34s var(--ease-spring); } .mobile-fab span { font-size: 14px; font-weight: 700; line-height: 1; } .mobile-fab strong { font-size: 13px; letter-spacing: -0.02em; } .prototype-frame.mobile-preview.native-mobile-frame .detail-drawer.mobile, .prototype-frame.mobile-preview.native-mobile-frame .modal-card, .prototype-frame.mobile-preview.native-mobile-frame .comment-modal-card, .prototype-frame.mobile-preview.native-mobile-frame .login-card { width: 100%; max-width: none; border-radius: 28px 28px 0 0; margin-top: auto; animation: mobile-sheet-rise 0.32s var(--ease-out); } /* * v26 UX fix: native-mobile-frame 是真实手机浏览器访问 /mobile/ 的模式， * 此时 prototype-frame 高度随内容延展（≈2000px），会让继承自 * `.prototype-frame.mobile-preview .detail-drawer { position: absolute }` * 的 drawer / modal 贴在内容底部而不是视口底部（感官上"卡到页面最下"）。 * 因此在 native-mobile-frame 下把它们改回 position: fixed，以视口为参照。 * studio 预览模式（桌面里模拟手机）保持 absolute 不受影响。 */ .prototype-frame.mobile-preview.native-mobile-frame .detail-drawer, .prototype-frame.mobile-preview.native-mobile-frame .modal-backdrop, .prototype-frame.mobile-preview.native-mobile-frame .login-overlay, .prototype-frame.mobile-preview.native-mobile-frame .boss-welcome-overlay, .prototype-frame.mobile-preview.native-mobile-frame .toast { position: fixed; } .prototype-frame.mobile-preview.native-mobile-frame .detail-drawer.mobile { inset: auto 0 0; min-height: min(86svh, 760px); border-radius: 28px 28px 0 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -26px 48px rgba(15, 23, 42, 0.2); } .prototype-frame.mobile-preview.native-mobile-frame .modal-backdrop, .prototype-frame.mobile-preview.native-mobile-frame .login-overlay, .prototype-frame.mobile-preview.native-mobile-frame .boss-welcome-overlay { align-items: end; padding: 0; } .prototype-frame.mobile-preview.native-mobile-frame .modal-header, .prototype-frame.mobile-preview.native-mobile-frame .login-header, .prototype-frame.mobile-preview.native-mobile-frame .detail-header { padding-top: 12px; } @keyframes mobile-screen-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes mobile-sheet-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes mobile-fab-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } .app-shell.mobile-shell .event-card h5 { font-size: 19px; } .app-shell.mobile-shell .event-meta { gap: 6px; margin-bottom: 8px; } .app-shell.mobile-shell .badge, .app-shell.mobile-shell .risk-pill, .app-shell.mobile-shell .status-pill { min-height: 26px; padding: 0 9px; font-size: 11px; } .app-shell.mobile-shell .event-footer { flex-direction: column; align-items: stretch; gap: 10px; } .app-shell.mobile-shell .event-detail-chip, .app-shell.mobile-shell .event-comment-chip { width: 100%; justify-content: center; } .app-shell.mobile-shell .time-tower { min-height: auto; padding: 14px; border-radius: 20px; } .app-shell.mobile-shell .time-tower strong { font-size: 22px; } .app-shell.mobile-shell .mobile-ai-banner { position: relative; overflow: hidden; padding: 16px 18px; border-radius: 22px; border: 1px solid rgba(37, 99, 235, 0.1); background: radial-gradient(circle at top right, rgba(191, 219, 254, 0.34), transparent 28%), linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 255, 0.98)); box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08); } .app-shell.mobile-shell .mobile-ai-banner::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 0.72)); } .app-shell.mobile-shell .mobile-ai-banner strong { font-size: 15px; letter-spacing: -0.03em; } .app-shell.mobile-shell .week-grid, .app-shell.mobile-shell .month-grid { overflow-x: auto; align-items: stretch; padding-bottom: 6px; scrollbar-width: thin; } .app-shell.mobile-shell .week-grid { grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 12px; } .app-shell.mobile-shell .month-grid { grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 10px; } .app-shell.mobile-shell .calendar-focus-panel .week-column, .app-shell.mobile-shell .week-column { min-height: 240px; padding: 16px; border-radius: 22px; } .app-shell.mobile-shell .calendar-focus-panel .month-cell, .app-shell.mobile-shell .month-cell { min-height: 132px; padding: 12px; border-radius: 20px; } .app-shell.mobile-shell .month-cell-header strong { font-size: 16px; } .app-shell.mobile-shell .recognition-trace-grid { grid-template-columns: 1fr; } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(37, 99, 235, 0.18); border-top-color: var(--brand); animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle; margin-right: 8px; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fade-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes boss-welcome-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes mobile-sheet-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1320px) { .layout-assistant, .layout-boss, .todo-layout, .mailbox-layout, .inbox-layout, .inbox-reference-layout, .pending-layout, .login-body { grid-template-columns: 1fr; } .assistant-panel { position: static; } } @media (max-width: 720px) { .inbox-reference-toolbar, .inbox-reference-result-header, .inbox-reference-result-toolbar { flex-direction: column; align-items: stretch; } .inbox-reference-toolbar-actions { justify-content: flex-start; } .inbox-reference-toolbar-actions .ghost-button, .inbox-reference-toolbar-actions .action-button, .inbox-reference-result-header .action-button { width: 100%; } .inbox-reference-field-grid { grid-template-columns: 1fr; } .inbox-reference-status-copy { text-align: left; } .login-overlay { place-items: stretch; padding: 12px; overflow: auto; -webkit-overflow-scrolling: touch; } .login-card { width: 100%; max-width: none; max-height: calc(100svh - 24px); margin: auto 0; border-radius: 24px; overflow: auto; -webkit-overflow-scrolling: touch; } .login-header { padding: 18px 18px 14px; flex-direction: column; align-items: stretch; } .login-header h4 { font-size: 22px; line-height: 1.12; } .login-header p { font-size: 13px; line-height: 1.55; } .login-header .ghost-button { width: 100%; } .login-body { padding: 16px; gap: 14px; grid-template-columns: 1fr; } .login-hero { min-height: auto; padding: 18px; border-radius: 22px; } .login-hero h5 { font-size: 24px; line-height: 1.16; } .login-hero p { font-size: 13px; line-height: 1.58; } .login-presets { gap: 10px; margin-top: 14px; } .login-preset { padding: 12px; border-radius: 16px; font-size: 13px; line-height: 1.45; } .login-form-panel { gap: 14px; } .login-form-panel .form-grid { gap: 12px; } .login-form-panel .field label { font-size: 13px; } .login-form-panel .field input, .login-form-panel .field select { min-height: 44px; border-radius: 14px; padding: 10px 12px; font-size: 14px; } .login-form-panel .split-actions { margin-top: 0 !important; } .login-form-panel .split-actions>* { width: 100%; } } @media (max-width: 1080px) { .stats-row, .week-grid, .month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mailbox-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-card.featured-card { grid-column: 1 / -1; } } @media (max-width: 860px) { body { padding: 14px; } .studio-toolbar { padding: 16px; border-radius: 24px; position: static; flex-direction: column; align-items: stretch; gap: 14px; } .toolbar-brand, .toolbar-controls { width: 100%; min-width: 0; } .toolbar-brand h1 { font-size: 24px; line-height: 1.08; } .toolbar-brand p { font-size: 13px; line-height: 1.6; } .toolbar-controls { justify-content: flex-start; display: grid; grid-template-columns: 1fr; gap: 10px; } .toolbar-controls>* { width: 100%; min-width: 0; } .toolbar-controls .segmented { width: 100%; display: grid; gap: 4px; } .toolbar-controls .segmented:not(.theme-mode) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toolbar-controls .segmented.theme-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); } .toolbar-controls .segmented button, .toolbar-button { width: 100%; min-width: 0; padding-left: 10px; padding-right: 10px; font-size: 13px; } .prototype-frame.mobile-preview { max-width: min(100%, 640px); border-radius: 34px; padding-top: 10px; } .prototype-frame.mobile-preview::before { top: 12px; width: 88px; height: 6px; } .stats-row, .week-grid, .month-grid, .form-grid.two { grid-template-columns: 1fr; } .mailbox-summary-grid { grid-template-columns: 1fr; } .timeline-row { grid-template-columns: 1fr; } .time-tower { min-height: 100px; } .boss-welcome-overlay { padding: 14px; } .boss-welcome-card { grid-template-columns: 1fr; min-height: auto; } .boss-welcome-copy { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 24px 22px; } .boss-welcome-visual { min-height: 300px; padding: 0; } } @media (max-width: 520px) { body { padding: 10px; } body.native-mobile-body { padding: 0; } .studio-toolbar { padding: 14px; border-radius: 20px; } .toolbar-brand h1 { font-size: 22px; } .toolbar-brand p { font-size: 12px; } .toolbar-controls .segmented button, .toolbar-button { font-size: 12px; } .prototype-frame.mobile-preview { border-radius: 28px; } .prototype-frame.mobile-preview.native-mobile-frame { border-radius: 0; } .app-shell.mobile-shell .page-header { padding: 18px 12px 12px; } .app-shell.mobile-shell .page-body.mobile { padding: 14px 10px calc(var(--mobile-nav-height) + 20px + var(--mobile-safe-bottom)); } .app-shell.mobile-shell .stats-row { grid-template-columns: 1fr; } .app-shell.mobile-shell .mobile-stats-grid { grid-auto-columns: minmax(158px, 84%); } .app-shell.mobile-shell .mobile-stats-grid .stat-card { min-height: 96px; padding: 10px 10px 9px; } .app-shell.mobile-shell .stat-card { min-height: 126px; } .app-shell.mobile-shell .stat-card.featured-card { min-height: 118px; } .app-shell.mobile-shell .mobile-stats-featured .stat-card.featured-card { min-height: 114px; } .app-shell.mobile-shell .mobile-bottom-nav.assistant-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } .app-shell.mobile-shell .mobile-bottom-nav.boss-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } .app-shell.mobile-shell .mobile-nav-item { min-height: 48px; padding: 8px 2px; } .app-shell.mobile-shell .mobile-nav-item-main { font-size: 10px; } } .app-shell.mobile-shell .page-header.mobile.app-mobile-header { padding: calc(14px + var(--mobile-header-safe-top)) 16px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86)); border-bottom: 1px solid rgba(226, 232, 240, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .app-shell.mobile-shell .page-body.mobile { padding: 14px 14px calc(var(--mobile-nav-height) + 88px + var(--mobile-safe-bottom)); } .mobile-compact-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .mobile-compact-copy { min-width: 0; display: grid; gap: 6px; } .mobile-compact-copy small { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(37, 99, 235, 0.08); color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .mobile-compact-copy h3 { margin: 0; font-size: 24px; line-height: 1.08; letter-spacing: -0.05em; } .mobile-compact-copy p { margin: 0; color: var(--text-sub); font-size: 12px; line-height: 1.55; } .mobile-header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .mobile-header-icon { position: relative; width: 42px; height: 42px; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(255, 255, 255, 0.9); color: var(--text-main); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } .mobile-header-icon .nav-micro-heart { position: absolute; top: -5px; right: -4px; min-width: 24px; height: 18px; padding: 0 4px; } .mobile-calendar-toolbar { display: grid; gap: 10px; margin-top: 12px; } .mobile-date-compact { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .mobile-date-chip { min-height: 40px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(255, 255, 255, 0.92); display: inline-flex; align-items: center; justify-content: center; color: var(--text-main); font-size: 12px; font-weight: 700; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05); } .mobile-date-chip.primary { min-width: 0; flex: 1 1 auto; } .mobile-home-stack, .mobile-full-panel { display: grid; gap: 14px; } .mobile-stat-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(156px, 74%); gap: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mobile-stat-rail::-webkit-scrollbar { display: none; } .mobile-stat-compact { display: grid; gap: 6px; padding: 14px 14px 13px; border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06); } .mobile-stat-compact.is-primary { background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 0.92)); color: white; border-color: transparent; box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24); } .mobile-stat-compact small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); } .mobile-stat-compact.is-primary small, .mobile-stat-compact.is-primary span { color: rgba(255, 255, 255, 0.8); } .mobile-stat-compact strong { font-size: 22px; line-height: 1.05; letter-spacing: -0.04em; } .mobile-stat-compact span { color: var(--text-sub); font-size: 12px; line-height: 1.45; } .mobile-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mobile-feature-card { display: grid; gap: 12px; min-height: 100%; padding: 16px; } .mobile-feature-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .mobile-feature-head h4, .mobile-feature-head h5 { margin: 0; font-size: 16px; line-height: 1.15; letter-spacing: -0.03em; } .mobile-feature-head p { margin: 4px 0 0; color: var(--text-sub); font-size: 12px; line-height: 1.55; } .mobile-preview-list { display: grid; gap: 6px; } .mobile-preview-item { padding: 11px 12px; border-radius: 16px; background: rgba(248, 250, 252, 0.94); border: 1px solid rgba(226, 232, 240, 0.9); display: grid; gap: 4px; } .mobile-preview-item strong { font-size: 13px; line-height: 1.25; } .mobile-preview-item span { color: var(--text-sub); font-size: 12px; line-height: 1.45; } .mobile-assistant-entry .assistant-message-list { min-height: 156px; max-height: 220px; } .mobile-command-quick { display: grid; gap: 12px; } .mobile-command-quick textarea { width: 100%; min-height: 94px; resize: none; border-radius: 18px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(248, 250, 252, 0.96); padding: 14px 15px; font: inherit; color: var(--text-main); } .mobile-command-quick .split-actions { justify-content: stretch; } .mobile-command-quick .split-actions>* { flex: 1 1 0; } .mobile-primary-sheet { position: fixed; inset: 0; z-index: 24; display: grid; align-items: end; } .mobile-primary-sheet-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15, 23, 42, 0.34); backdrop-filter: blur(8px); } .mobile-primary-sheet-card { position: relative; z-index: 1; /* 2026-05-07: 必须避开底部 mobile-bottom-nav (90px)，否则 sheet 第二个按钮被 nav 遮挡。 */ padding: 0 16px calc(var(--mobile-nav-height, 90px) + 16px + var(--mobile-safe-bottom)); display: grid; gap: 10px; } .mobile-primary-sheet-body { display: grid; gap: 10px; padding: 12px 12px 14px; border-radius: 28px 28px 20px 20px; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(226, 232, 240, 0.96); box-shadow: 0 -20px 44px rgba(15, 23, 42, 0.18); } .mobile-primary-sheet-title { display: grid; gap: 4px; padding: 4px 6px; } .mobile-primary-sheet-title h4 { margin: 0; font-size: 18px; line-height: 1.15; letter-spacing: -0.03em; } .mobile-primary-sheet-title p { margin: 0; color: var(--text-sub); font-size: 12px; line-height: 1.5; } .mobile-primary-sheet-actions { display: grid; gap: 6px; } .mobile-primary-sheet-button { width: 100%; min-height: 54px; padding: 0 16px; border-radius: 18px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(248, 250, 252, 0.96); display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-main); font-size: 14px; font-weight: 700; text-align: left; } /* 2026-05-07: 防止"微信识别 / 新增待安排"等 4 字标题被 description 挤换行 */ .mobile-primary-sheet-button strong { flex-shrink: 0; white-space: nowrap; font-size: 14px; line-height: 1.15; } .mobile-primary-sheet-button span { color: var(--text-sub); font-size: 12px; font-weight: 600; } .mobile-primary-sheet-button.primary { background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 0.92)); color: white; border-color: transparent; box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24); } .mobile-primary-sheet-button.primary span { color: rgba(255, 255, 255, 0.78); } /* 2026-05-06: mobile-shell 嵌套版 nav 缺 display:grid 导致 boss-nav 三 tab 不平均分布。 显式补全 display:grid + 居中对齐，让 3/5 列布局在嵌套渲染时也能生效。 */ .app-shell.mobile-shell .mobile-bottom-nav { display: grid; align-items: center; justify-items: stretch; } .app-shell.mobile-shell .mobile-bottom-nav.assistant-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } .app-shell.mobile-shell .mobile-bottom-nav.boss-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ─── 主操作 bottom sheet：深色主题适配 (修复 dark mode 下白底浅字看不见) ─── */ html[data-theme="dark"] .mobile-primary-sheet-body { background: rgba(13, 23, 38, 0.98); border-color: rgba(137, 155, 179, 0.18); box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .mobile-primary-sheet-title h4 { color: rgba(241, 245, 249, 0.96); } html[data-theme="dark"] .mobile-primary-sheet-title p { color: rgba(148, 163, 184, 0.88); } html[data-theme="dark"] .mobile-primary-sheet-button { background: rgba(30, 41, 59, 0.78); border-color: rgba(137, 155, 179, 0.18); color: rgba(241, 245, 249, 0.96); } html[data-theme="dark"] .mobile-primary-sheet-button span { color: rgba(148, 163, 184, 0.85); } html[data-theme="dark"] .mobile-primary-sheet-button.primary { background: linear-gradient(135deg, rgba(99, 102, 241, 1), rgba(129, 140, 248, 0.92)); color: #ffffff; box-shadow: 0 18px 34px rgba(99, 102, 241, 0.32); } html[data-theme="dark"] .mobile-primary-sheet-button.primary span { color: rgba(255, 255, 255, 0.82); } .mobile-fab.app-primary-fab { min-width: 118px; bottom: calc(var(--mobile-nav-height) + 16px + var(--mobile-safe-bottom)); } .detail-mobile-footer { position: sticky; bottom: 0; margin: 18px -18px -18px; padding: 14px 18px calc(18px + var(--mobile-safe-bottom)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.98)); border-top: 1px solid rgba(226, 232, 240, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .comment-history-timeline { display: grid; gap: 10px; } .comment-history-item { padding: 12px 14px; border-radius: 16px; background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(226, 232, 240, 0.9); display: grid; gap: 4px; } .comment-history-item .comment-history-content { color: #0f172a; font-weight: 600; } .comment-history-item span { color: #475569; font-size: 12px; } html[data-theme="dark"] .comment-history-item { background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(148, 163, 184, 0.16); } html[data-theme="dark"] .comment-history-item .comment-history-content { color: #f8fafc; } html[data-theme="dark"] .comment-history-item span { color: #cbd5e1; } .boss-welcome-mobile-screen { position: relative; width: 100%; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; } .boss-welcome-mobile-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.18) 38%, rgba(15, 23, 42, 0.72)); } .boss-welcome-mobile-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .boss-welcome-mobile-copy { position: relative; z-index: 1; width: 100%; display: grid; gap: 12px; padding: 28px 22px calc(30px + var(--mobile-safe-bottom)); color: white; } .boss-welcome-mobile-copy small { display: inline-flex; width: fit-content; min-height: 28px; padding: 0 10px; border-radius: 999px; align-items: center; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .boss-welcome-mobile-copy h3 { margin: 0; font-size: clamp(36px, 10vw, 56px); line-height: 0.96; letter-spacing: -0.06em; } .boss-welcome-mobile-copy p { margin: 0; max-width: 22ch; color: rgba(255, 255, 255, 0.82); font-size: 14px; line-height: 1.6; } .boss-welcome-mobile-copy .split-actions { justify-content: flex-start; } .boss-welcome-mobile-copy .ghost-button { color: white; border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.08); /* 2026-05-09 a11y：满足 Apple HIG 触摸命中区 44pt（之前 42px 差 2px） */ min-height: 44px; } /* 桌面端 boss welcome dismiss 按钮也保证 44px 命中区（盲键盘可达性） */ .boss-welcome-copy .ghost-button[data-action="dismiss-boss-welcome"] { min-height: 44px; } .mobile-page-stack { display: grid; gap: 14px; } .mobile-summary-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, min(68%, 240px)); gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mobile-summary-strip::-webkit-scrollbar { display: none; } /* 2026-05-10：统计条 + 筛选 chip 直接相邻时的垂直间距 原本 .mobile-summary-strip 和 .mobile-chip-row 都没有 margin/gap， panel-body 也未启用 flex column gap，导致 "全部/未完成/已完成" 三个 chip 紧贴在统计卡片下沿，无呼吸感。 */ .mobile-summary-strip + .mobile-chip-row, .mobile-summary-strip + .mobile-action-row, .mobile-stats-grid + .mobile-chip-row, .mobile-stats-grid + .mobile-action-row { margin-top: 14px; } .mobile-section-head + .mobile-summary-strip, .mobile-section-head + .mobile-chip-row { margin-top: 12px; } /* 2026-05-10：mobile-chip-row 内的 filter-chip 等分占满一行 原本三个 chip（全部 / 未完成 / 已完成）靠 flex 自然宽度， 挤在最左侧约 200px 内，右侧大片留白，视觉极不平衡。 这里只针对 .filter-chip 加 flex:1，badge/pill-muted 等 标签子元素仍保持紧凑左对齐，不会被改成等分。 */ .mobile-chip-row > .filter-chip { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-summary-card { display: grid; gap: 6px; padding: 14px 14px 13px; border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06); overflow: hidden; min-width: 0; } .mobile-summary-card.is-primary { color: white; border-color: transparent; background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(29, 78, 216, 0.92)); box-shadow: 0 20px 36px rgba(37, 99, 235, 0.24); } .mobile-summary-card small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); } .mobile-summary-card.is-primary small, .mobile-summary-card.is-primary span { color: rgba(255, 255, 255, 0.8); } .mobile-summary-card strong { font-size: 22px; line-height: 1.02; letter-spacing: -0.04em; } .mobile-summary-card span { color: var(--text-sub); font-size: 12px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .mobile-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .mobile-section-head h4, .mobile-section-head h5 { margin: 0; font-size: 16px; line-height: 1.15; letter-spacing: -0.03em; } .mobile-section-head p { margin: 4px 0 0; color: var(--text-sub); font-size: 12px; line-height: 1.5; } .mobile-chip-row, .mobile-action-row { display: flex; flex-wrap: wrap; gap: 6px; } .mailbox-toolbar-shell { display: grid; gap: 10px; padding: 14px; border-radius: 24px; border: 1px solid rgba(191, 219, 254, 0.68); background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94)), rgba(255, 255, 255, 0.9); box-shadow: 0 18px 34px rgba(37, 99, 235, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .mailbox-toolbar-shell.is-mobile { padding: 12px; border-radius: 22px; } .mailbox-toolbar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-sub); } .mailbox-toolbar-label::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 0.76)); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.12); } .mailbox-toolbar-tabs, .mailbox-toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; } .mailbox-filter-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(191, 219, 254, 0.76); background: rgba(255, 255, 255, 0.92); color: var(--text-main); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; } .mailbox-filter-pill:hover { transform: translateY(-1px); box-shadow: 0 14px 24px rgba(37, 99, 235, 0.1); } .mailbox-filter-pill.active { color: white; border-color: rgba(37, 99, 235, 0.84); background: linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(29, 78, 216, 0.92)); box-shadow: 0 16px 28px rgba(37, 99, 235, 0.22); } .mailbox-filter-pill-label { font-size: 13px; font-weight: 700; line-height: 1; } .mailbox-filter-pill-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(148, 163, 184, 0.14); color: inherit; font-size: 11px; font-weight: 800; line-height: 1; } .mailbox-filter-pill.active .mailbox-filter-pill-count { background: rgba(255, 255, 255, 0.2); } .mailbox-selection-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .mailbox-selection-summary { display: grid; gap: 5px; } .mailbox-selection-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(37, 99, 235, 0.1); color: rgb(29, 78, 216); font-size: 12px; font-weight: 800; width: fit-content; } .mailbox-selection-breakdown { color: var(--text-sub); font-size: 12px; line-height: 1.45; } .mailbox-toolbar-actions .ghost-button, .mailbox-toolbar-actions .action-button { min-height: 40px; } .mobile-chip-row .info-chip, .mobile-chip-row .badge, .mobile-chip-row .pill-muted, .mobile-action-row .ghost-button, .mobile-action-row .action-button { min-height: 38px; } .mobile-list-stack { display: grid; gap: 10px; } .mobile-list-card { width: 100%; padding: 14px; border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(248, 250, 252, 0.96); display: grid; gap: 10px; text-align: left; color: var(--text-main); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05); } .mobile-list-card.active { border-color: rgba(37, 99, 235, 0.38); background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98)); box-shadow: 0 18px 34px rgba(37, 99, 235, 0.12); } .mobile-list-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .mobile-list-card-head strong { display: block; font-size: 15px; line-height: 1.32; } .mobile-list-card-head span { display: block; margin-top: 4px; color: var(--text-sub); font-size: 12px; line-height: 1.45; } .mobile-meta-wrap { display: flex; flex-wrap: wrap; gap: 6px; } .mobile-meta-wrap.is-secondary { gap: 5px; } .mobile-meta-wrap.is-compact { gap: 4px; } .mobile-list-card>.mobile-meta-wrap+.mobile-meta-wrap, .mobile-detail-card>.mobile-meta-wrap+.mobile-meta-wrap { gap: 5px; } .mobile-meta-wrap.is-secondary .badge, .mobile-meta-wrap.is-secondary .pill-muted, .mobile-list-card>.mobile-meta-wrap+.mobile-meta-wrap .badge, .mobile-list-card>.mobile-meta-wrap+.mobile-meta-wrap .pill-muted, .mobile-detail-card>.mobile-meta-wrap+.mobile-meta-wrap .badge, .mobile-detail-card>.mobile-meta-wrap+.mobile-meta-wrap .pill-muted { min-height: 30px; padding: 0 10px; font-size: 11px; opacity: 0.9; } .mobile-detail-card { display: grid; gap: 14px; padding: 14px; border-radius: 22px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(255, 255, 255, 0.98); box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06); } .mobile-detail-title { display: grid; gap: 6px; } .mobile-detail-title h4, .mobile-detail-title h5 { margin: 0; font-size: 17px; line-height: 1.2; letter-spacing: -0.03em; } .mobile-detail-title p { margin: 0; color: var(--text-sub); font-size: 12px; line-height: 1.55; } .mobile-kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mobile-kv-item { display: grid; gap: 4px; padding: 11px 12px; border-radius: 16px; background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(226, 232, 240, 0.92); } .mobile-kv-item small { color: var(--text-soft); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .mobile-kv-item strong, .mobile-kv-item span { font-size: 13px; line-height: 1.45; color: var(--text-main); } .mobile-note-card { display: grid; gap: 6px; padding: 12px 13px; border-radius: 16px; background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(226, 232, 240, 0.9); } .mobile-note-card strong { font-size: 13px; line-height: 1.3; } .mobile-note-card span, .mobile-note-card p { margin: 0; color: var(--text-sub); font-size: 12px; line-height: 1.55; } .mobile-note-card.is-compact { gap: 4px; padding: 10px 11px; } .mobile-note-card.is-compact strong { font-size: 12px; line-height: 1.25; } .mobile-note-card.is-compact span, .mobile-note-card.is-compact p { font-size: 11.5px; line-height: 1.48; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-clamp: 2; overflow: hidden; } .mobile-action-row.is-priority { gap: 6px; } .mobile-action-row.is-priority .ghost-button, .mobile-action-row.is-priority .action-button { flex: 1 1 0; } .mobile-action-row.is-priority [data-action="open-mailbox-target"] { order: 1; } .mobile-action-row.is-priority [data-action="ack-assistant-notification"], .mobile-action-row.is-priority .status-pill { order: 2; } .mobile-action-row.is-priority [data-action="toggle-mailbox-item"] { order: 3; flex-basis: 100%; } .mobile-action-row.is-priority.is-mailbox { gap: 6px; } .mobile-action-row.is-priority.is-mailbox .ghost-button, .mobile-action-row.is-priority.is-mailbox .action-button, .mobile-action-row.is-priority.is-mailbox .status-pill { min-height: 34px; font-size: 12px; } .mobile-detail-card.mailbox-mobile-card { gap: 11px; padding: 12px; } .mobile-detail-card.mailbox-mobile-card .mobile-list-card-head strong { font-size: 14px; line-height: 1.28; } .mobile-detail-card.mailbox-mobile-card .mobile-list-card-head span { margin-top: 3px; font-size: 11.5px; } .mobile-list-card.pending-mobile-card .mobile-list-card-head strong { font-size: 14px; line-height: 1.28; } .mobile-list-card.pending-mobile-card .mobile-list-card-head span { margin-top: 3px; font-size: 11.5px; line-height: 1.42; } .mobile-action-row.is-utility { gap: 6px; } .mobile-action-row.is-utility .ghost-button, .mobile-action-row.is-utility .action-button { min-height: 34px; padding: 0 12px; font-size: 12px; } .mobile-form-stack { display: grid; gap: 12px; } .mobile-form-stack .form-grid { gap: 12px; } .mobile-form-stack .field { margin: 0; } .mobile-section-caption { color: var(--text-soft); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .mobile-feed-stack { display: grid; gap: 10px; } .mobile-feed-stack .mailbox-feed { gap: 10px; } .mobile-inline-counts { display: flex; flex-wrap: wrap; gap: 6px; } .mobile-pill-button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(226, 232, 240, 0.96); background: rgba(248, 250, 252, 0.96); color: var(--text-main); font-size: 12px; font-weight: 700; } .mobile-login-screen { min-height: 100svh; display: grid; align-content: start; gap: 16px; padding: calc(18px + var(--mobile-header-safe-top)) 16px calc(18px + var(--mobile-safe-bottom)); background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 28%), linear-gradient(180deg, rgba(244, 247, 251, 0.98), rgba(233, 239, 247, 0.98)); } html[data-theme="dark"] .mobile-login-screen { background: radial-gradient(circle at top right, rgba(215, 178, 125, 0.16), transparent 30%), radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.12), transparent 26%), linear-gradient(180deg, rgba(8, 17, 29, 0.98), rgba(10, 19, 32, 0.98)); } .mobile-login-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mobile-login-brand { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(226, 232, 240, 0.9); color: var(--text-main); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } html[data-theme="dark"] .mobile-login-brand { background: rgba(255, 255, 255, 0.06); border-color: rgba(137, 155, 179, 0.18); } .mobile-login-brand::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.12); } .mobile-login-hero-panel { display: grid; gap: 12px; padding: 20px 18px 18px; border-radius: 30px; background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(37, 99, 235, 0.92)); color: white; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18); } html[data-theme="dark"] .mobile-login-hero-panel { border: 1px solid rgba(137, 155, 179, 0.16); background: radial-gradient(circle at top left, rgba(215, 178, 125, 0.18), transparent 32%), linear-gradient(145deg, rgba(11, 19, 33, 0.98), rgba(21, 36, 58, 0.94)); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.26); } .mobile-login-hero-panel h4 { margin: 0; font-size: clamp(28px, 8.4vw, 38px); line-height: 1.02; letter-spacing: -0.06em; } .mobile-login-hero-panel p { margin: 0; color: rgba(255, 255, 255, 0.84); font-size: 13px; line-height: 1.62; max-width: 30ch; } .mobile-login-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mobile-login-role-button { width: 100%; padding: 14px; border-radius: 22px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(255, 255, 255, 0.88); color: var(--text-main); text-align: left; display: grid; gap: 5px; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06); } .mobile-login-role-button.active { border-color: rgba(37, 99, 235, 0.34); background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96)); box-shadow: 0 18px 34px rgba(37, 99, 235, 0.12); } html[data-theme="dark"] .mobile-login-role-button { background: rgba(18, 29, 47, 0.9); border-color: rgba(137, 155, 179, 0.18); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22); } html[data-theme="dark"] .mobile-login-role-button.active { border-color: rgba(215, 178, 125, 0.26); background: linear-gradient(180deg, rgba(30, 43, 62, 0.98), rgba(15, 25, 42, 0.96)); box-shadow: 0 18px 34px rgba(215, 178, 125, 0.1); } .mobile-login-role-button strong { font-size: 15px; line-height: 1.2; } .mobile-login-role-button span { color: var(--text-sub); font-size: 12px; line-height: 1.5; } .mobile-login-card-panel { display: grid; gap: 14px; padding: 16px; border-radius: 28px; border: 1px solid rgba(226, 232, 240, 0.92); background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08); } html[data-theme="dark"] .mobile-login-card-panel { background: rgba(13, 23, 38, 0.96); border-color: rgba(137, 155, 179, 0.18); box-shadow: 0 24px 44px rgba(0, 0, 0, 0.26); } .mobile-login-helper { color: var(--text-sub); font-size: 12px; line-height: 1.55; } .mobile-sheet-app { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; } .mobile-sheet-hero { display: grid; gap: 12px; padding: 12px 18px 16px; border-bottom: 1px solid rgba(226, 232, 240, 0.9); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)); } html[data-theme="dark"] .mobile-sheet-hero { border-bottom-color: rgba(137, 155, 179, 0.14); background: linear-gradient(180deg, rgba(13, 23, 38, 0.98), rgba(10, 18, 30, 0.94)); } .mobile-sheet-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .mobile-sheet-hero h4 { margin: 0; font-size: clamp(24px, 7vw, 30px); line-height: 1.02; letter-spacing: -0.05em; } .mobile-sheet-hero p { margin: 4px 0 0; color: var(--text-sub); font-size: 12px; line-height: 1.55; max-width: 34ch; } .mobile-sheet-scroll { overflow: auto; display: grid; gap: 14px; padding: 16px 18px 18px; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; } .mobile-sheet-footer { padding: 14px 18px calc(18px + var(--mobile-safe-bottom)); border-top: 1px solid rgba(226, 232, 240, 0.9); background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.98)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-theme="dark"] .mobile-sheet-footer { border-top-color: rgba(137, 155, 179, 0.14); background: linear-gradient(180deg, rgba(8, 16, 28, 0.82), rgba(10, 18, 30, 0.98)); } .mobile-sheet-footer .split-actions { margin: 0; } .mobile-detail-drawer-app { overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; } @media (max-width: 720px) { .mobile-home-grid { grid-template-columns: 1fr; } .mobile-stat-rail { grid-auto-columns: minmax(146px, 82%); } .mobile-summary-strip { grid-auto-columns: minmax(138px, 82%); } .mobile-kv-grid { grid-template-columns: 1fr; } .mobile-login-role-grid { grid-template-columns: 1fr; } } /* Layout polish overrides: keep current visual language, only tune spacing and alignment */ body { padding: 20px; } .studio-toolbar { gap: 14px; padding: 16px 20px; border-radius: 26px; margin-bottom: 16px; top: 10px; } .toolbar-brand h1 { margin-bottom: 6px; font-size: 25px; line-height: 1.08; } .toolbar-brand p { max-width: 560px; font-size: 14px; line-height: 1.55; } .toolbar-controls { gap: 10px; } .segmented { padding: 3px; gap: 3px; } .segmented button { min-height: 38px; min-width: 84px; padding: 0 16px; font-size: 13px; } .toolbar-button { min-height: 40px; padding: 0 16px; } .form-grid { gap: 14px; } .field { gap: 7px; } .form-grid.two.note-aligned>.field { grid-template-rows: auto minmax(46px, auto) minmax(17px, auto); } .field label { font-size: 13px; line-height: 1.35; } .field input, .field textarea { min-height: 46px; padding: 11px 13px; border-radius: 15px; } .field select { min-height: 46px; padding: 11px 34px 11px 13px; border-radius: 15px; } .field textarea { min-height: 128px; } .switch-field { min-height: 46px; padding: 0 14px; border-radius: 15px; } .field-note { font-size: 11.5px; line-height: 1.5; } .mailbox-theme-panel::before { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88)), var(--mailbox-theme-image, none); } html[data-theme="dark"] .mailbox-theme-panel::before { background-image: linear-gradient(180deg, rgba(8, 16, 28, 0.9), rgba(8, 16, 28, 0.82)), var(--mailbox-theme-image, none); } html[data-theme="dark"] .mailbox-theme-panel .command-card, html[data-theme="dark"] .mailbox-theme-panel .command-card.pending, html[data-theme="dark"] .mailbox-theme-panel .command-card.done, html[data-theme="dark"] .mailbox-theme-panel .risk-card, html[data-theme="dark"] .mailbox-theme-panel .assistant-list-item, html[data-theme="dark"] .mailbox-theme-panel .mailbox-feed-item, html[data-theme="dark"] .mailbox-theme-panel .mailbox-preview-card, html[data-theme="dark"] .mailbox-theme-panel .mailbox-summary-card { background: rgba(12, 21, 35, 0.9) !important; border-color: rgba(137, 155, 179, 0.18) !important; backdrop-filter: blur(8px); } .app-shell:not(.mobile-shell) .page-body { padding: 20px 22px 24px; gap: 16px; } .app-shell:not(.mobile-shell) .assistant-home-header { padding: 20px 24px 18px; } .app-shell:not(.mobile-shell) .assistant-home-topline { margin-bottom: 20px; gap: 16px; } .app-shell:not(.mobile-shell) .assistant-home-title-stack h3 { font-size: clamp(30px, 2.32vw, 35px); } .app-shell:not(.mobile-shell) .assistant-home-title-stack p { max-width: 40ch; font-size: 14px; line-height: 1.5; } .app-shell:not(.mobile-shell) .assistant-home-date-nav .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .action-button, .app-shell:not(.mobile-shell) .assistant-home-view-badge { min-height: 44px; padding: 0 16px; font-size: 13px; } .app-shell:not(.mobile-shell) .assistant-home-segmented button { min-width: 116px; min-height: 52px; padding: 0 18px; font-size: 16px; } .app-shell:not(.mobile-shell) .stats-row, .app-shell:not(.mobile-shell) .layout-assistant, .app-shell:not(.mobile-shell) .layout-boss, .app-shell:not(.mobile-shell) .main-stack, .app-shell:not(.mobile-shell) .todo-layout, .app-shell:not(.mobile-shell) .inbox-layout, .app-shell:not(.mobile-shell) .inbox-reference-layout, .app-shell:not(.mobile-shell) .mailbox-layout, .app-shell:not(.mobile-shell) .pending-layout, .app-shell:not(.mobile-shell) .mailbox-column { gap: 18px; } .app-shell:not(.mobile-shell) .stat-card { min-height: 142px; padding: 16px 16px 14px; } .app-shell:not(.mobile-shell) .stat-card.metric-card .stat-card-note { max-width: none; } .app-shell:not(.mobile-shell) .assistant-workflow-nav { padding: 28px 18px 24px; gap: 22px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand { padding: 8px 14px 20px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .brand-mark { width: 54px; height: 54px; margin-bottom: 18px; font-size: 18px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand h2 { font-size: 28px; margin-bottom: 10px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand p { font-size: 14px; line-height: 1.65; } .app-shell:not(.mobile-shell) .assistant-workflow-header { padding: 0 14px; font-size: 14px; } .app-shell:not(.mobile-shell) .assistant-workflow-list { gap: 16px; } .app-shell:not(.mobile-shell) .workflow-nav-item { min-height: 72px; padding: 0 18px; border-radius: 28px; } .app-shell:not(.mobile-shell) .workflow-nav-label { font-size: 16px; } .app-shell:not(.mobile-shell) .workflow-nav-hint { font-size: 14px; } .app-shell:not(.mobile-shell) .assistant-today-list { gap: 14px; } .app-shell:not(.mobile-shell) .assistant-today-item { grid-template-columns: 104px minmax(0, 1fr); min-height: 54px; gap: 16px; } .app-shell:not(.mobile-shell) .assistant-today-date, .app-shell:not(.mobile-shell) .assistant-today-note { font-size: 15px; } .app-shell:not(.mobile-shell) .panel-header { padding: 18px 20px 14px; } .app-shell:not(.mobile-shell) .panel-title h4 { font-size: 21px; } .app-shell:not(.mobile-shell) .panel-title p { font-size: 13px; line-height: 1.5; } .app-shell:not(.mobile-shell) .panel-body { padding: 20px; } .app-shell:not(.mobile-shell) .panel.calendar-focus-panel .panel-header { padding: 20px 22px 14px; } .app-shell:not(.mobile-shell) .panel.calendar-focus-panel .panel-body { padding: 20px 22px 24px; } .app-shell:not(.mobile-shell) .assistant-panel { gap: 14px; top: 106px; } .app-shell:not(.mobile-shell) .assistant-block { padding: 16px; border-radius: 22px; } .app-shell:not(.mobile-shell) .assistant-block h5 { font-size: 16px; margin-bottom: 10px; } .app-shell:not(.mobile-shell) .assistant-list-item, .app-shell:not(.mobile-shell) .todo-card, .app-shell:not(.mobile-shell) .focus-card, .app-shell:not(.mobile-shell) .risk-card, .app-shell:not(.mobile-shell) .decision-card, .app-shell:not(.mobile-shell) .mailbox-feed-item, .app-shell:not(.mobile-shell) .pending-card, .app-shell:not(.mobile-shell) .mailbox-summary-card, .app-shell:not(.mobile-shell) .command-card { border-radius: 18px; } .app-shell:not(.mobile-shell) .pending-card, .app-shell:not(.mobile-shell) .mailbox-summary-card, .app-shell:not(.mobile-shell) .command-card { padding: 16px; } .app-shell:not(.mobile-shell) .pending-card strong { font-size: 17px; margin-bottom: 6px; } .app-shell:not(.mobile-shell) .pending-card p, .app-shell:not(.mobile-shell) .pending-card-caption, .app-shell:not(.mobile-shell) .pending-recommend { font-size: 13px; line-height: 1.58; } .app-shell:not(.mobile-shell) .pending-card-footnote { margin-top: 10px; } .app-shell:not(.mobile-shell) .mailbox-summary-grid { gap: 12px; } .app-shell:not(.mobile-shell) .mailbox-summary-card strong { font-size: clamp(24px, 1.9vw, 32px); } .app-shell:not(.mobile-shell) .mailbox-summary-card span, .app-shell:not(.mobile-shell) .mailbox-preview-card span { font-size: 12.5px; line-height: 1.55; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message-list { min-height: 248px; max-height: min(46vh, 420px); } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message { padding: 15px 18px; font-size: 14px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chip { min-height: 40px; padding: 0 15px; font-size: 13px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose { grid-template-columns: minmax(0, 1fr) 108px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose .action-button { min-height: 52px; border-radius: 18px; } .app-shell:not(.mobile-shell) .command-composer .field textarea { min-height: 108px; } .app-shell:not(.mobile-shell) .timeline-row { grid-template-columns: 90px minmax(0, 1fr); gap: 6px; } .app-shell:not(.mobile-shell) .time-tower { min-height: 112px; padding: 12px 10px; border-radius: 18px; } .app-shell:not(.mobile-shell) .event-card { padding: 14px 14px 14px 18px; border-radius: 20px; } .app-shell:not(.mobile-shell) .event-card h5 { font-size: 18px; line-height: 1.14; } .app-shell:not(.mobile-shell) .event-card p { font-size: 13px; line-height: 1.5; } .app-shell:not(.mobile-shell) .event-card-body { gap: 12px; } .app-shell:not(.mobile-shell) .event-card-copy { gap: 10px; } .app-shell:not(.mobile-shell) .event-card .badge { min-height: 26px; padding: 0 9px; font-size: 11px; } .app-shell:not(.mobile-shell) .event-card-header { margin-bottom: 10px; gap: 6px; } .app-shell:not(.mobile-shell) .event-time-slot { min-width: 118px; } .app-shell:not(.mobile-shell) .event-meta { gap: 6px; margin-bottom: 6px; } .app-shell:not(.mobile-shell) .event-footer { gap: 6px; min-width: 118px; } .app-shell:not(.mobile-shell) .event-footer-actions { gap: 6px; } .app-shell:not(.mobile-shell) .event-footer small { font-size: 12px; line-height: 1.42; } .app-shell:not(.mobile-shell) .event-card .event-detail-chip, .app-shell:not(.mobile-shell) .event-card .event-comment-chip { min-height: 36px; padding: 0 12px; font-size: 12px; } .app-shell:not(.mobile-shell) .event-card-side { align-items: center; } .app-shell:not(.mobile-shell) .event-annotation-inline { padding: 7px 10px; border-radius: 12px; gap: 2px; } .app-shell:not(.mobile-shell) .event-annotation-stack { gap: 7px; } .app-shell:not(.mobile-shell) .event-annotation-inline span { font-size: 11px; line-height: 1.38; } .app-shell:not(.mobile-shell) .event-annotation-inline em { font-size: 10px; } .login-card { width: min(900px, 100%); } .login-header { padding: 20px 22px 16px; } .login-header h4 { font-size: 26px; } .login-body { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: 20px; padding: 20px 22px 24px; } .login-hero { padding: 20px; border-radius: 26px; } .login-hero h5 { font-size: 28px; } .login-presets { gap: 10px; margin-top: 16px; } .login-form-panel { gap: 16px; } .app-shell.mobile-shell .page-header.mobile.app-mobile-header { padding: calc(12px + var(--mobile-header-safe-top)) 14px 10px; } .app-shell.mobile-shell .page-body.mobile { padding: 12px 12px calc(var(--mobile-nav-height) + 76px + var(--mobile-safe-bottom)); gap: 14px; } .mobile-compact-bar { gap: 6px; } .mobile-compact-copy { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 84px); } .mobile-compact-copy h3 { font-size: 21px; line-height: 1.06; } .mobile-compact-copy p { font-size: 11px; line-height: 1.5; max-width: 28ch; } .mobile-header-actions { gap: 6px; } .mobile-header-icon { /* 2026-05-14 polish：≥40px 触摸目标，统一移动端各档尺寸 */ width: 40px; height: 40px; border-radius: 14px; font-size: 11px; } .mobile-header-icon .nav-micro-heart { top: -4px; right: -3px; min-width: 22px; height: 17px; } .mobile-calendar-toolbar { gap: 6px; margin-top: 10px; } .mobile-date-chip { min-height: 38px; padding: 0 12px; border-radius: 13px; font-size: 11px; } .app-shell.mobile-shell .panel-header { padding: 16px 16px 12px; gap: 10px; } .app-shell.mobile-shell .panel-title h4 { font-size: 20px; } .app-shell.mobile-shell .panel-title p { font-size: 12px; line-height: 1.5; } .app-shell.mobile-shell .panel-body, .app-shell.mobile-shell .panel.calendar-focus-panel .panel-body { padding: 16px; } .app-shell.mobile-shell .panel-header-meta, .app-shell.mobile-shell .calendar-panel-meta { width: 100%; margin-left: 0; gap: 6px; justify-content: flex-start; flex-wrap: wrap; } .app-shell.mobile-shell .calendar-panel-meta { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .app-shell.mobile-shell .calendar-panel-meta::-webkit-scrollbar { display: none; } .app-shell.mobile-shell .panel-header-meta>*, .app-shell.mobile-shell .calendar-panel-meta>* { width: auto; flex: 0 0 auto; justify-content: center; text-align: center; } .app-shell.mobile-shell .assistant-chat-header-actions { width: 100%; margin-left: 0; gap: 6px; justify-content: space-between; flex-wrap: wrap; } .app-shell.mobile-shell .assistant-chat-header-actions>* { width: auto; } .app-shell.mobile-shell .pending-detail-toolbar { width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; justify-content: stretch; } .app-shell.mobile-shell .pending-detail-toolbar>* { width: 100%; justify-content: center; text-align: center; } .mobile-page-stack { gap: 12px; } .mobile-summary-strip { grid-auto-columns: minmax(132px, 64%); gap: 6px; } .mobile-summary-card { gap: 5px; padding: 12px 12px 11px; border-radius: 18px; } .mobile-summary-card strong { font-size: 20px; } .mobile-summary-card span { font-size: 11px; line-height: 1.42; } .mobile-section-head h4, .mobile-section-head h5 { font-size: 15px; } .mobile-section-head p { font-size: 11px; line-height: 1.48; } .mobile-detail-card { gap: 12px; padding: 12px; border-radius: 20px; } .mobile-detail-title h4, .mobile-detail-title h5 { font-size: 16px; } .mobile-kv-grid { gap: 6px; } .mobile-kv-item { padding: 10px; border-radius: 14px; } .mobile-note-card { padding: 11px 12px; border-radius: 14px; } .mobile-quick-dock { bottom: calc(82px + env(safe-area-inset-bottom)); padding: 0 10px 4px; } .mobile-quick-dock-inner { padding: 10px 12px; border-radius: 22px; } .mobile-quick-action { min-height: 40px; padding: 0 12px; font-size: 12px; } .mobile-fab { right: 14px; bottom: calc(var(--mobile-nav-height) + 12px + var(--mobile-safe-bottom)); min-width: 120px; min-height: 48px; padding: 0 16px; gap: 6px; } .mobile-fab strong { font-size: 12px; } .app-shell.mobile-shell .mobile-bottom-nav { gap: 6px; padding: 8px 8px calc(10px + var(--mobile-safe-bottom)); } .app-shell.mobile-shell .mobile-nav-item { min-height: 54px; padding: 7px 4px; border-radius: 16px; } .app-shell.mobile-shell .mobile-nav-item-main { font-size: 10px; } .mobile-login-screen { gap: 12px; padding: calc(14px + var(--mobile-header-safe-top)) 14px calc(22px + var(--mobile-safe-bottom)); } .mobile-login-hero-panel { gap: 10px; padding: 16px 16px 15px; border-radius: 26px; } .mobile-login-hero-panel h4 { font-size: clamp(24px, 7.6vw, 34px); line-height: 1.04; } .mobile-login-hero-panel p { font-size: 12px; line-height: 1.55; max-width: none; } .mobile-login-role-button { padding: 12px; border-radius: 20px; } .mobile-login-card-panel { gap: 12px; padding: 14px; border-radius: 24px; } .mobile-login-helper { font-size: 11px; } @media (max-width: 420px) { body { padding: 16px; } .mobile-summary-strip { grid-auto-columns: minmax(132px, 78%); } .mobile-compact-copy { max-width: calc(100% - 80px); } .mobile-compact-copy h3 { font-size: 19px; } .mobile-date-chip { padding: 0 10px; } } /* Final layout stabilization: preserve visual language, improve density and mobile fit */ .page-body { animation: none; } .app-shell.mobile-shell .page-header.mobile.app-mobile-header { padding: calc(10px + var(--mobile-header-safe-top)) 12px 8px; } .app-shell.mobile-shell .page-body.mobile { padding: 10px 10px calc(var(--mobile-nav-height) + 74px + var(--mobile-safe-bottom)); gap: 12px; } .mobile-compact-bar { gap: 10px; } .mobile-compact-copy { max-width: calc(100% - 92px); gap: 4px; } .mobile-compact-copy small { min-height: 25px; padding: 0 8px; font-size: 10px; letter-spacing: 0.07em; } .mobile-compact-copy h3 { font-size: 20px; line-height: 1.02; } .mobile-compact-copy p { font-size: 10.5px; line-height: 1.46; max-width: 26ch; } .mobile-header-title-row { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; } .mobile-header-title-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: #475569; flex: 0 0 auto; } .mobile-header-title-icon .nav-icon { width: 28px; height: 28px; } .mobile-header-title-icon .homepage-panel-icon-svg, .mobile-header-title-icon .homepage-panel-icon-img { color: #5b68f8; /* v244：移动端顶部标题图标如果是 PNG（如微信识别 logo）， 没显式宽高会撑成原图 512×512，需要强制适配 28×28 容器 */ width: 28px; height: 28px; object-fit: contain; } /* v245：真实绿色微信 logo PNG (assets/wechat_4423693.png) 通用样式 ─────────────────────────────────────────────────────────────── - sidebar nav-item .nav-icon 内 → 20×20 适配 - mobile-header-title-icon 内 → 28×28（继承上面 homepage-panel-icon-img 规则） - PC page-header mascot 内 → 由各自 mascot 容器决定 - 关键：dark mode 下其他单色图标会被 filter hue-rotate 染成蓝色 （base.css 的 html[data-theme="dark"] .homepage-panel-icon-img 规则）， 但绿色微信 logo 已经是最终颜色，不需要 filter，必须显式 reset。 - 对话框双气泡形态 + 4 个白眼点 + #07C160 官方品牌绿，1:1 复刻 WeChat logo */ .real-wechat-icon-img { width: 100%; height: 100%; object-fit: contain; filter: none !important; } .nav-item .nav-icon .real-wechat-icon-img, .side-nav .nav-item .real-wechat-icon-img { width: 20px; height: 20px; } html[data-theme="dark"] .real-wechat-icon-img, html[data-theme="dark"] body .app-shell .real-wechat-icon-img { filter: none !important; } .mobile-compact-copy.title-centered { align-items: center; text-align: center; margin: 0 auto; max-width: none; } .mobile-compact-copy.title-centered small { margin: 0 auto; } .mobile-compact-copy.title-centered .mobile-header-title-row { justify-content: center; } .mobile-header-actions { gap: 5px; margin-right: 2px; } .mobile-header-icon { /* 2026-05-14 polish：从 34×34 提到 40×40，达成 a11y 触摸目标最低线 */ width: 40px; height: 40px; border-radius: 12px; font-size: 10px; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07); flex: 0 0 40px; } .mobile-header-icon .nav-micro-heart { top: -4px; right: -2px; min-width: 20px; height: 15px; padding: 0 3px; } .mobile-header-icon .nav-micro-heart-count, .mobile-header-icon .nav-micro-heart-icon { font-size: 9px; } .mobile-calendar-toolbar { gap: 6px; margin-top: 8px; } .mobile-date-compact { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; gap: 6px; align-items: center; } .mobile-date-chip { min-height: 34px; padding: 0 8px; border-radius: 12px; font-size: 10px; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05); } .mobile-date-chip.primary { width: 100%; min-width: 0; padding: 0 10px; } .app-shell.mobile-shell .mobile-calendar-toolbar .segmented { padding: 3px; gap: 3px; } .app-shell.mobile-shell .mobile-calendar-toolbar .segmented button { min-height: 36px; min-width: 0; padding: 0 16px; font-size: 13px; } .app-shell.mobile-shell .panel-header { padding: 14px 14px 10px; gap: 6px; } .app-shell.mobile-shell .panel-title h4 { font-size: 18px; line-height: 1.1; } .app-shell.mobile-shell .panel-title p { font-size: 11px; line-height: 1.45; } .app-shell.mobile-shell .panel-body, .app-shell.mobile-shell .panel.calendar-focus-panel .panel-body { padding: 14px; } .mobile-page-stack { gap: 10px; } .mobile-summary-strip { grid-auto-columns: minmax(112px, 56%); gap: 7px; scroll-snap-type: x proximity; } .mobile-summary-card { gap: 4px; padding: 10px 10px 9px; border-radius: 16px; min-height: 92px; align-content: start; scroll-snap-align: start; } .mobile-summary-card small { font-size: 10px; } .mobile-summary-card strong { font-size: 18px; line-height: 1; } .mobile-summary-card span { font-size: 10.5px; line-height: 1.34; } .mobile-section-head h4, .mobile-section-head h5 { font-size: 14px; line-height: 1.2; } .mobile-section-head p { font-size: 10.5px; line-height: 1.42; } .mobile-detail-card { gap: 10px; padding: 11px; border-radius: 18px; } .mobile-kv-item { padding: 9px; border-radius: 13px; } .mobile-note-card { padding: 10px 11px; border-radius: 13px; } .mobile-quick-dock { bottom: calc(76px + env(safe-area-inset-bottom)); padding: 0 8px 2px; } .mobile-quick-dock-inner { padding: 9px 10px; border-radius: 20px; } .mobile-quick-action { min-height: 38px; padding: 0 10px; font-size: 11px; } .mobile-fab, .mobile-fab.app-primary-fab { right: 10px; bottom: calc(var(--mobile-nav-height) + 10px + var(--mobile-safe-bottom)); min-width: 94px; min-height: 42px; padding: 0 13px; border-radius: 18px; gap: 6px; } .mobile-fab span { font-size: 16px; line-height: 1; } .mobile-fab strong { font-size: 11px; line-height: 1; } .app-shell.mobile-shell .mobile-bottom-nav { gap: 5px; padding: 7px 7px calc(9px + var(--mobile-safe-bottom)); } .app-shell.mobile-shell .mobile-nav-item { min-height: 52px; padding: 6px 4px; border-radius: 15px; } .mobile-login-screen { gap: 10px; padding: calc(12px + var(--mobile-header-safe-top)) 12px calc(18px + var(--mobile-safe-bottom)); } .mobile-login-hero-panel { gap: 6px; padding: 14px 14px 13px; border-radius: 22px; } .mobile-login-hero-panel h4 { font-size: clamp(22px, 7vw, 30px); line-height: 1.02; } .mobile-login-hero-panel p { font-size: 11px; line-height: 1.46; } .mobile-login-role-button { padding: 10px; border-radius: 18px; } .mobile-login-card-panel { gap: 10px; padding: 12px; border-radius: 20px; } .mobile-login-helper { font-size: 10.5px; line-height: 1.45; } @media (max-width: 390px) { .mobile-compact-copy { max-width: calc(100% - 84px); } .mobile-compact-copy h3 { font-size: 18px; } .mobile-header-icon { /* 2026-05-14 polish：从 32×32 提到 40×40，达到 a11y 触摸目标最低线（≥40）。 原来是为了在 iPhone 12 (390) / SE2 (375) 上压紧空间，但牺牲了可点性。 已通过 mobile-compact-copy max-width 给左侧文案更紧的预算来腾位。 */ width: 40px; height: 40px; flex-basis: 40px; } .mobile-date-compact { grid-template-columns: 50px minmax(0, 1fr) 50px; } .mobile-date-chip { padding: 0 7px; } .mobile-summary-strip { grid-auto-columns: minmax(108px, 58%); } .mobile-summary-card { min-height: 88px; } .mobile-fab, .mobile-fab.app-primary-fab { min-width: 88px; padding: 0 12px; } } /* Role layout harmonization: assistant and boss desktop use one sizing system */ .app-shell:not(.mobile-shell) .layout-assistant { grid-template-columns: minmax(0, 1.65fr) 360px; gap: 18px; align-items: stretch; } .app-shell:not(.mobile-shell) .layout-boss { grid-template-columns: minmax(0, 1.72fr) 320px; gap: 18px; align-items: stretch; } .app-shell:not(.mobile-shell) .assistant-home-header { padding: 18px 20px 14px; } .app-shell:not(.mobile-shell) .assistant-home-topline { align-items: center; gap: 12px; margin-bottom: 16px; } .app-shell:not(.mobile-shell) .assistant-home-title-stack small { margin-bottom: 8px; font-size: 12px; } .app-shell:not(.mobile-shell) .assistant-home-title-stack h3 { font-size: 34px; line-height: 1.02; letter-spacing: -0.05em; } .app-shell:not(.mobile-shell) .assistant-home-title-stack p { margin-top: 8px; max-width: 34ch; font-size: 15px; line-height: 1.5; } .app-shell:not(.mobile-shell) .assistant-home-date-nav, .app-shell:not(.mobile-shell) .assistant-home-toolbar-left, .app-shell:not(.mobile-shell) .assistant-home-toolbar-right { gap: 10px; } .app-shell:not(.mobile-shell) .assistant-home-bottomline { gap: 12px; } .app-shell:not(.mobile-shell) .assistant-home-date-nav .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .action-button, .app-shell:not(.mobile-shell) .assistant-home-view-badge { min-height: 42px; padding: 0 16px; font-size: 14px; font-weight: 600; } .app-shell:not(.mobile-shell) .assistant-home-segmented { padding: 4px; gap: 4px; } .app-shell:not(.mobile-shell) .assistant-home-segmented button { min-width: 92px; min-height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600; } .app-shell:not(.mobile-shell) .workflow-nav-item { min-height: 68px; padding: 0 14px; gap: 6px; } .app-shell:not(.mobile-shell) .workflow-nav-copy { gap: 6px; } .app-shell:not(.mobile-shell) .workflow-nav-label { font-size: 16px; } .app-shell:not(.mobile-shell) .workflow-nav-hint { min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-shell:not(.mobile-shell) .workflow-nav-item .nav-micro-heart { margin-left: 2px; min-width: 30px; height: 22px; padding: 0 6px 0 5px; gap: 3px; } .app-shell:not(.mobile-shell) .workflow-nav-item .nav-micro-heart-count { font-size: 10px; } /* Desktop panel rhythm harmonization across assistant and boss workspaces */ .app-shell:not(.mobile-shell) .assistant-panel { gap: 18px; } .app-shell:not(.mobile-shell) .assistant-block, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] { padding: 18px 18px 20px; border-radius: 22px; } .app-shell:not(.mobile-shell) .panel-header, .app-shell:not(.mobile-shell) .assistant-block-header, .app-shell:not(.mobile-shell) .command-block-header { margin-bottom: 14px; gap: 10px; } .app-shell:not(.mobile-shell) .panel-title h4, .app-shell:not(.mobile-shell) .assistant-block h5, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] h5 { font-size: 18px; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 0; } .app-shell:not(.mobile-shell) .panel-title p, .app-shell:not(.mobile-shell) .detail-subnote, .app-shell:not(.mobile-shell) .command-block-header p, .app-shell:not(.mobile-shell) .assistant-chat-tip { font-size: 13px; line-height: 1.58; max-width: 38ch; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-body, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-composer { gap: 14px; } .app-shell:not(.mobile-shell) .assistant-chat-meta, .app-shell:not(.mobile-shell) .assistant-chat-header-actions, .app-shell:not(.mobile-shell) .command-toolbar { gap: 6px; } .app-shell:not(.mobile-shell) .assistant-list, .app-shell:not(.mobile-shell) .focus-grid, .app-shell:not(.mobile-shell) .command-list, .app-shell:not(.mobile-shell) .mailbox-feed { gap: 12px; } .app-shell:not(.mobile-shell) .assistant-list-item, .app-shell:not(.mobile-shell) .todo-card, .app-shell:not(.mobile-shell) .focus-card, .app-shell:not(.mobile-shell) .risk-card, .app-shell:not(.mobile-shell) .decision-card, .app-shell:not(.mobile-shell) .mailbox-feed-item, .app-shell:not(.mobile-shell) .command-card { padding: 17px 18px 16px; border-radius: 19px; } .app-shell:not(.mobile-shell) .mailbox-preview-card { padding: 17px 18px 16px 19px; border-radius: 19px; } .app-shell:not(.mobile-shell) .assistant-list-item strong, .app-shell:not(.mobile-shell) .todo-card strong, .app-shell:not(.mobile-shell) .focus-card strong, .app-shell:not(.mobile-shell) .risk-card strong, .app-shell:not(.mobile-shell) .decision-card strong, .app-shell:not(.mobile-shell) .mailbox-feed-item strong, .app-shell:not(.mobile-shell) .mailbox-preview-card strong, .app-shell:not(.mobile-shell) .command-card-header strong { font-size: 15px; line-height: 1.46; margin-bottom: 8px; } .app-shell:not(.mobile-shell) .assistant-list-item span, .app-shell:not(.mobile-shell) .todo-card span, .app-shell:not(.mobile-shell) .focus-card span, .app-shell:not(.mobile-shell) .risk-card span, .app-shell:not(.mobile-shell) .decision-card span, .app-shell:not(.mobile-shell) .mailbox-feed-item span, .app-shell:not(.mobile-shell) .mailbox-preview-card span, .app-shell:not(.mobile-shell) .command-card-meta, .app-shell:not(.mobile-shell) .command-card-body { font-size: 13px; line-height: 1.62; } .app-shell:not(.mobile-shell) .mailbox-feed-header { margin-bottom: 12px; } .app-shell:not(.mobile-shell) .mailbox-feed-actions, .app-shell:not(.mobile-shell) .mailbox-preview-footer { margin-top: 14px; } .app-shell:not(.mobile-shell) .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message-list { min-height: 248px; max-height: min(46vh, 410px); gap: 10px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message { font-size: 14px; line-height: 1.58; padding: 16px 18px; border-radius: 20px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message.user { margin-left: 18px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message.ai { margin-right: 18px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chip { min-height: 38px; padding: 0 14px; font-size: 12px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose, .app-shell:not(.mobile-shell) .command-toolbar, .app-shell:not(.mobile-shell) .command-card-actions { gap: 6px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose .action-button, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .action-button, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .ghost-button { min-height: 42px; border-radius: 16px; font-size: 14px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose { grid-template-columns: minmax(0, 1fr) 104px; } .app-shell:not(.mobile-shell) .command-composer .field textarea, .app-shell:not(.mobile-shell) [data-role="boss-command-input"] { min-height: 108px; } .app-shell:not(.mobile-shell) .empty-state { padding: 22px 18px; border-radius: 20px; font-size: 13px; line-height: 1.65; } /* Desktop stat-card text hierarchy polish */ .app-shell:not(.mobile-shell) .stat-card { gap: 6px; padding: 15px 16px 14px; align-content: start; } .app-shell:not(.mobile-shell) .stat-card small, .app-shell:not(.mobile-shell) .stat-card-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.2; opacity: 0.94; } .app-shell:not(.mobile-shell) .stat-card strong, .app-shell:not(.mobile-shell) .stat-card-value { font-weight: 800; line-height: 0.94; } .app-shell:not(.mobile-shell) .stat-card.metric-card { grid-template-rows: auto auto 1fr auto auto; } .app-shell:not(.mobile-shell) .stat-card.metric-card .stat-card-value { margin-top: 1px; margin-bottom: 2px; } .app-shell:not(.mobile-shell) .stat-card-title-row { align-items: flex-start; gap: 6px; } .app-shell:not(.mobile-shell) .stat-card-title { max-width: none; font-size: clamp(16px, 1.08vw, 20px); line-height: 1.12; white-space: normal; word-break: break-word; } .app-shell:not(.mobile-shell) .stat-card-note { font-size: 12.5px; line-height: 1.46; white-space: normal; word-break: break-word; max-width: none; } .app-shell:not(.mobile-shell) .stat-card-subnote { font-size: 10.5px; line-height: 1.4; white-space: normal; word-break: break-word; opacity: 0.9; } .app-shell:not(.mobile-shell) .stat-card.featured-card .stat-card-note { max-width: none; } .app-shell:not(.mobile-shell) .stat-card.featured-card .stat-card-subnote { max-width: none; } /* Desktop right-sidebar card density polish */ .app-shell:not(.mobile-shell) .assistant-panel .assistant-list, .app-shell:not(.mobile-shell) .assistant-panel .focus-grid { gap: 6px; } .app-shell:not(.mobile-shell) .assistant-panel .assistant-list-item, .app-shell:not(.mobile-shell) .assistant-panel .todo-card, .app-shell:not(.mobile-shell) .assistant-panel .focus-card, .app-shell:not(.mobile-shell) .assistant-panel .risk-card, .app-shell:not(.mobile-shell) .assistant-panel .decision-card, .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-card { min-height: auto; padding: 13px 13px 12px; display: grid; align-content: start; gap: 4px; } .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-card { padding-left: 15px; } .app-shell:not(.mobile-shell) .assistant-panel .assistant-list-item strong, .app-shell:not(.mobile-shell) .assistant-panel .todo-card strong, .app-shell:not(.mobile-shell) .assistant-panel .focus-card strong, .app-shell:not(.mobile-shell) .assistant-panel .risk-card strong, .app-shell:not(.mobile-shell) .assistant-panel .decision-card strong, .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-card strong { margin-bottom: 0; font-size: 14px; line-height: 1.34; white-space: normal; word-break: break-word; } .app-shell:not(.mobile-shell) .assistant-panel .assistant-list-item span, .app-shell:not(.mobile-shell) .assistant-panel .todo-card span, .app-shell:not(.mobile-shell) .assistant-panel .focus-card span, .app-shell:not(.mobile-shell) .assistant-panel .risk-card span, .app-shell:not(.mobile-shell) .assistant-panel .decision-card span, .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-card span { font-size: 12px; line-height: 1.46; white-space: normal; word-break: break-word; } .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-footer { margin-top: 10px; } /* Desktop boss-command list + assistant compose rhythm polish */ .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-composer { gap: 12px; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .field { display: grid; gap: 6px; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .field label { font-size: 13px; line-height: 1.35; margin: 0; } .app-shell:not(.mobile-shell) .command-card-stack { display: grid; gap: 10px; } .app-shell:not(.mobile-shell) .command-list.history { max-height: 350px; gap: 10px; padding-right: 6px; scrollbar-gutter: stable; overscroll-behavior: contain; align-content: start; } .app-shell:not(.mobile-shell) [data-role="boss-command-input"] { min-height: 98px; max-height: 132px; padding: 14px 16px; font-size: 14px; line-height: 1.58; border-radius: 18px; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-toolbar { gap: 10px; align-items: center; justify-content: space-between; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .split-actions { gap: 6px; flex-wrap: wrap; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .split-actions .info-chip { min-height: 36px; padding: 0 13px; font-size: 12px; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-toolbar .action-button { min-width: 104px; padding: 0 16px; } .app-shell:not(.mobile-shell) .command-card { gap: 6px; align-content: start; } .app-shell:not(.mobile-shell) .command-card-header { gap: 6px; align-items: center; } .app-shell:not(.mobile-shell) .command-card .status-pill { min-height: 30px; padding: 0 11px; font-size: 11.5px; } .app-shell:not(.mobile-shell) .command-card-header .command-card-meta { margin-left: auto; font-size: 12px; line-height: 1.25; white-space: nowrap; } .app-shell:not(.mobile-shell) .command-card-body { font-size: 13px; line-height: 1.56; } .app-shell:not(.mobile-shell) .command-card>.command-card-meta:last-of-type { font-size: 12px; line-height: 1.46; margin-top: -1px; } .app-shell:not(.mobile-shell) .command-card-actions { gap: 6px; margin-top: 2px; } .app-shell:not(.mobile-shell) .command-card-actions .action-button, .app-shell:not(.mobile-shell) .command-card-actions .ghost-button { min-height: 38px; padding: 0 14px; border-radius: 15px; font-size: 13px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-body { gap: 12px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chat-meta { gap: 7px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message-list { min-height: 218px; max-height: min(40vh, 346px); gap: 9px; padding-right: 6px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message { padding: 14px 16px; font-size: 13.5px; line-height: 1.56; border-radius: 18px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message.user { margin-left: 14px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message.ai { margin-right: 14px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chips { gap: 6px; margin-bottom: 0; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chip { min-height: 36px; padding: 0 13px; font-size: 12px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose { grid-template-columns: minmax(0, 1fr) 100px; gap: 6px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose .action-button { min-height: 44px; border-radius: 16px; font-size: 13px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input { padding: 0 15px; } /* Final desktop parity pass: unify boss/assistant typography and panel rhythm without changing structure */ .app-shell:not(.mobile-shell) .page-header, .app-shell:not(.mobile-shell) .assistant-home-header { padding: 18px 20px 16px; } .app-shell:not(.mobile-shell) .header-topline, .app-shell:not(.mobile-shell) .assistant-home-topline { align-items: flex-start; gap: 14px; margin-bottom: 16px; } .app-shell:not(.mobile-shell) .title-stack small, .app-shell:not(.mobile-shell) .assistant-home-title-stack small { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; } .app-shell:not(.mobile-shell) .title-stack h3, .app-shell:not(.mobile-shell) .assistant-home-title-stack h3 { font-size: 34px; line-height: 1.04; letter-spacing: -0.055em; font-weight: 800; } .app-shell:not(.mobile-shell) .title-stack p, .app-shell:not(.mobile-shell) .assistant-home-title-stack p { margin-top: 8px; max-width: 35ch; font-size: 14.5px; line-height: 1.56; } .app-shell:not(.mobile-shell) .header-controls, .app-shell:not(.mobile-shell) .assistant-home-date-nav, .app-shell:not(.mobile-shell) .assistant-home-toolbar-left, .app-shell:not(.mobile-shell) .assistant-home-toolbar-right { gap: 10px; } .app-shell:not(.mobile-shell) .header-strip, .app-shell:not(.mobile-shell) .assistant-home-bottomline { align-items: center; gap: 12px; } .app-shell:not(.mobile-shell) .header-strip .segmented, .app-shell:not(.mobile-shell) .assistant-home-segmented { padding: 4px; gap: 4px; } .app-shell:not(.mobile-shell) .header-strip .segmented button, .app-shell:not(.mobile-shell) .assistant-home-segmented button { min-width: 92px; min-height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600; } .app-shell:not(.mobile-shell) .header-strip .info-chip, .app-shell:not(.mobile-shell) .header-strip .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-date-nav .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .action-button, .app-shell:not(.mobile-shell) .assistant-home-view-badge { min-height: 42px; padding: 0 16px; font-size: 14px; border-radius: 999px; } .app-shell:not(.mobile-shell) .stats-row { gap: 16px; } .app-shell:not(.mobile-shell) .stat-card { min-height: 146px; padding: 16px 16px 15px; gap: 6px; } .app-shell:not(.mobile-shell) .stat-card small, .app-shell:not(.mobile-shell) .stat-card-label { font-size: 11.5px; line-height: 1.18; letter-spacing: 0.08em; font-weight: 700; } .app-shell:not(.mobile-shell) .stat-card strong, .app-shell:not(.mobile-shell) .stat-card-value { line-height: 0.96; font-weight: 800; } .app-shell:not(.mobile-shell) .stat-card.metric-card .stat-card-value { font-size: clamp(26px, 1.85vw, 36px); margin: 2px 0 3px; } .app-shell:not(.mobile-shell) .stat-card-title-row { gap: 6px; align-items: flex-start; min-width: 0; } .app-shell:not(.mobile-shell) .stat-card-title { max-width: none; font-size: clamp(16px, 1.06vw, 20px); line-height: 1.14; } .app-shell:not(.mobile-shell) .stat-card-note { max-width: none; font-size: 12.5px; line-height: 1.5; } .app-shell:not(.mobile-shell) .stat-card-subnote { font-size: 11px; line-height: 1.42; } .app-shell:not(.mobile-shell) .stat-card.featured-card .stat-card-note { max-width: none; } .app-shell:not(.mobile-shell) .stat-card.featured-card .stat-card-subnote { max-width: none; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-header, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"]>div:first-child { margin-bottom: 12px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-title h4, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] h5 { font-size: 18px; line-height: 1.14; letter-spacing: -0.03em; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-title p, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .detail-subnote { max-width: 41ch; font-size: 13px; line-height: 1.58; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-body, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-composer { gap: 12px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message-list { min-height: 222px; max-height: min(40vh, 352px); gap: 9px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message { padding: 14px 16px; font-size: 13.5px; line-height: 1.56; border-radius: 18px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chips { gap: 6px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chip { min-height: 36px; padding: 0 13px; font-size: 12px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose { grid-template-columns: minmax(0, 1fr) 100px; gap: 6px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose .action-button, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-toolbar .action-button, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-card-actions .action-button, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-card-actions .ghost-button { min-height: 42px; font-size: 13px; border-radius: 16px; } .app-shell:not(.mobile-shell) [data-role="boss-command-input"] { min-height: 102px; max-height: 134px; padding: 14px 16px; font-size: 14px; line-height: 1.58; border-radius: 18px; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-toolbar { gap: 10px; align-items: center; justify-content: space-between; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .split-actions .info-chip { min-height: 36px; padding: 0 13px; font-size: 12px; } /* Desktop assistant/boss workspace typography + card rhythm unification */ .app-shell:not(.mobile-shell) .page-header, .app-shell:not(.mobile-shell) .assistant-home-header { padding: 22px 24px 18px; border-radius: 28px; } .app-shell:not(.mobile-shell) .header-topline, .app-shell:not(.mobile-shell) .assistant-home-topline { align-items: flex-start; gap: 16px; margin-bottom: 18px; } .app-shell:not(.mobile-shell) .title-stack, .app-shell:not(.mobile-shell) .assistant-home-title-stack { display: grid; gap: 6px; align-content: start; min-width: 0; } .app-shell:not(.mobile-shell) .title-stack small, .app-shell:not(.mobile-shell) .assistant-home-title-stack small { margin: 0; font-size: 12px; line-height: 1.2; letter-spacing: 0.12em; font-weight: 700; } .app-shell:not(.mobile-shell) .title-stack h3, .app-shell:not(.mobile-shell) .assistant-home-title-stack h3 { margin: 0; font-size: clamp(31px, 2.45vw, 36px); line-height: 1.04; letter-spacing: -0.05em; font-weight: 800; } .app-shell:not(.mobile-shell) .title-stack p, .app-shell:not(.mobile-shell) .assistant-home-title-stack p { margin: 0; max-width: 37ch; min-height: calc(1.56em * 2); font-size: 14px; line-height: 1.56; } .app-shell:not(.mobile-shell) .header-controls, .app-shell:not(.mobile-shell) .assistant-home-date-nav, .app-shell:not(.mobile-shell) .assistant-home-toolbar-left, .app-shell:not(.mobile-shell) .assistant-home-toolbar-right { gap: 10px; align-items: center; } .app-shell:not(.mobile-shell) .header-strip, .app-shell:not(.mobile-shell) .assistant-home-bottomline { align-items: center; gap: 10px; min-height: 48px; } .app-shell:not(.mobile-shell) .header-strip .segmented, .app-shell:not(.mobile-shell) .assistant-home-segmented { min-height: 48px; padding: 4px; gap: 4px; border-radius: 999px; } .app-shell:not(.mobile-shell) .header-strip .segmented button, .app-shell:not(.mobile-shell) .assistant-home-segmented button { min-width: 98px; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; border-radius: 999px; } .app-shell:not(.mobile-shell) .header-strip .info-chip, .app-shell:not(.mobile-shell) .header-strip .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-date-nav .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .action-button, .app-shell:not(.mobile-shell) .assistant-home-view-badge { min-height: 40px; padding: 0 14px; font-size: 13px; border-radius: 999px; } .app-shell:not(.mobile-shell) .stats-row { gap: 12px; align-items: stretch; } .app-shell:not(.mobile-shell) .stat-card { min-height: 132px; padding: 14px 14px 13px; gap: 6px; align-content: start; } .app-shell:not(.mobile-shell) .stat-card small, .app-shell:not(.mobile-shell) .stat-card-label { font-size: 11.5px; line-height: 1.18; letter-spacing: 0.08em; font-weight: 700; } .app-shell:not(.mobile-shell) .stat-card strong, .app-shell:not(.mobile-shell) .stat-card-value { line-height: 0.92; font-weight: 800; } .app-shell:not(.mobile-shell) .stat-card.metric-card .stat-card-value { font-size: clamp(40px, 2.6vw, 48px); margin: 0 0 1px; } .app-shell:not(.mobile-shell) .stat-card-title-row { gap: 6px; align-items: flex-start; } .app-shell:not(.mobile-shell) .stat-card-priority { min-width: 52px; min-height: 36px; font-size: 15px; font-weight: 700; } .app-shell:not(.mobile-shell) .stat-card-title { flex: 1 1 auto; min-width: 0; max-width: none; font-size: clamp(16px, 1.02vw, 19px); line-height: 1.12; white-space: normal; overflow: visible; } .app-shell:not(.mobile-shell) .stat-card-note { max-width: none; font-size: 12px; line-height: 1.42; } .app-shell:not(.mobile-shell) .stat-card-subnote { font-size: 10.5px; line-height: 1.38; } .app-shell:not(.mobile-shell) .panel-header, .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-header, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"]>div:first-child { margin-bottom: 0; padding: 18px 20px 14px; gap: 10px; } .app-shell:not(.mobile-shell) .panel-title, .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-title, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .panel-title, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"]>div:first-child>div { display: grid; gap: 6px; align-content: start; } .app-shell:not(.mobile-shell) .panel-title h4, .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-title h4, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] h5 { margin: 0; font-size: 19px; line-height: 1.14; letter-spacing: -0.03em; font-weight: 800; } .app-shell:not(.mobile-shell) .panel-title p, .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-title p, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .detail-subnote { margin: 0; max-width: 42ch; font-size: 13px; line-height: 1.58; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-body, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-composer { gap: 10px; padding: 16px 18px 18px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chips, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-toolbar, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .split-actions { gap: 6px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message-list, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-list.history { min-height: 184px; max-height: min(34vh, 280px); } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message { padding: 11px 13px; font-size: 12.5px; line-height: 1.48; border-radius: 15px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-chip, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .info-chip { min-height: 32px; padding: 0 11px; font-size: 11px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose { grid-template-columns: minmax(0, 1fr) 92px; gap: 7px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose .action-button, .app-shell:not(.mobile-shell) [data-role="boss-command-input"], .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .action-button, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .ghost-button { font-size: 12.5px; border-radius: 15px; } .app-shell:not(.mobile-shell) [data-role="boss-command-input"] { min-height: 92px; max-height: 120px; line-height: 1.52; } .app-shell:not(.mobile-shell) .layout-assistant { grid-template-columns: minmax(0, 1.65fr) 360px; gap: 18px; align-items: stretch; } .app-shell:not(.mobile-shell) .layout-boss { grid-template-columns: minmax(0, 1.74fr) 320px; gap: 18px; align-items: stretch; } .app-shell:not(.mobile-shell) .page-header .header-topline .header-controls { gap: 10px; align-items: center; flex-wrap: wrap; } .app-shell:not(.mobile-shell) .page-header .header-topline .info-chip, .app-shell:not(.mobile-shell) .page-header .header-strip .info-chip, .app-shell:not(.mobile-shell) .assistant-home-view-badge { min-height: 44px; padding: 0 16px; font-size: 13.5px; border-radius: 999px; } .app-shell:not(.mobile-shell) .layout-assistant .assistant-panel, .app-shell:not(.mobile-shell) .layout-boss .assistant-panel { gap: 16px; } .app-shell:not(.mobile-shell) .layout-assistant .assistant-panel .assistant-block, .app-shell:not(.mobile-shell) .layout-boss .assistant-panel .assistant-block { padding: 16px; border-radius: 22px; } .app-shell:not(.mobile-shell) .layout-assistant .assistant-panel .assistant-block h5, .app-shell:not(.mobile-shell) .layout-boss .assistant-panel .assistant-block h5 { margin: 0 0 10px; font-size: 16px; line-height: 1.16; letter-spacing: -0.02em; } /* Final desktop parity touch-up: keep visual direction, tighten boss/assistant consistency */ .app-shell:not(.mobile-shell) .assistant-workflow-nav { padding: 24px 16px; gap: 18px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand { padding: 8px 8px 14px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .brand-mark { width: 42px; height: 42px; border-radius: 16px; margin-bottom: 14px; font-size: 16px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.32; letter-spacing: -0.04em; font-weight: 700; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand p { max-width: none; font-size: 13px; line-height: 1.45; } .app-shell:not(.mobile-shell) .assistant-workflow-header { padding: 0 12px; font-size: 12px; line-height: 1.2; letter-spacing: 0.08em; } .app-shell:not(.mobile-shell) .assistant-workflow-list { gap: 6px; padding: 0; margin-top: 4px; } .app-shell:not(.mobile-shell) .workflow-nav-item { min-height: 50px; padding: 0 14px; border-radius: 16px; gap: 9px; } .app-shell:not(.mobile-shell) .workflow-nav-item.active { min-height: 50px; padding: 0 14px; } .app-shell:not(.mobile-shell) .workflow-nav-copy { gap: 6px; min-height: 20px; } .app-shell:not(.mobile-shell) .workflow-nav-label { font-size: 15px; line-height: normal; font-weight: 600; letter-spacing: 0; } .app-shell:not(.mobile-shell) .workflow-nav-hint { min-width: 0; font-size: 12.5px; line-height: normal; font-weight: 400; } .app-shell:not(.mobile-shell) .workflow-nav-item .nav-micro-heart { margin-left: 2px; min-width: 28px; height: 22px; padding: 0 7px 0 6px; gap: 4px; box-shadow: 0 6px 16px rgba(244, 63, 94, 0.12); transform: translateY(1px); } .app-shell:not(.mobile-shell) .workflow-nav-item .nav-micro-heart-count { font-size: 11px; } .app-shell:not(.mobile-shell) .assistant-today-group { gap: 12px; padding: 16px 0 0; border-top: 1px solid rgba(226, 232, 240, 0.88); } .app-shell:not(.mobile-shell) .assistant-today-list { gap: 12px; } .app-shell:not(.mobile-shell) .header-controls .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-date-nav .ghost-button, .app-shell:not(.mobile-shell) .header-strip .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .ghost-button, .app-shell:not(.mobile-shell) .page-header .header-topline .info-chip, .app-shell:not(.mobile-shell) .page-header .header-strip .info-chip, .app-shell:not(.mobile-shell) .assistant-home-view-badge { font-weight: 600; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] { padding: 0; overflow: hidden; } .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"]>div:first-child, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-composer { width: 100%; margin: 0; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-header, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"]>div:first-child { min-height: 76px; align-items: flex-start; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-title h4, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] h5 { max-width: 32ch; font-size: 17px; } .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-title p, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .detail-subnote { max-width: 42ch; font-size: 12.5px; line-height: 1.5; } .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose .action-button, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .command-toolbar .action-button { min-width: 94px; } .app-shell:not(.mobile-shell) .boss-overview-summary-panel .panel-header { padding-bottom: 12px; } .app-shell:not(.mobile-shell) .boss-overview-summary-panel .panel-body { padding-top: 16px; } .app-shell:not(.mobile-shell) .boss-overview-summary-panel .focus-grid { gap: 12px; } /* Public release polish: readable default zoom, tighter top chrome, and dark-surface consistency */ .studio-toolbar { padding: 14px 18px; border-radius: 24px; margin-bottom: 14px; } .toolbar-brand small { font-size: 11px; margin-bottom: 6px; } .toolbar-brand h1 { margin-bottom: 4px; font-size: 22px; line-height: 1.08; letter-spacing: -0.045em; } .toolbar-brand p { max-width: 54ch; font-size: 13px; line-height: 1.52; } .app-shell:not(.mobile-shell) .page-header, .app-shell:not(.mobile-shell) .assistant-home-header { padding: 18px 20px 14px; border-radius: 24px; } .app-shell:not(.mobile-shell) .header-topline, .app-shell:not(.mobile-shell) .assistant-home-topline { gap: 14px; margin-bottom: 14px; } .app-shell:not(.mobile-shell) .title-stack small, .app-shell:not(.mobile-shell) .assistant-home-title-stack small { font-size: 11px; line-height: 1.18; letter-spacing: 0.11em; opacity: 0.78; } .app-shell:not(.mobile-shell) .title-stack h3, .app-shell:not(.mobile-shell) .assistant-home-title-stack h3 { font-size: clamp(29px, 2.12vw, 33px); line-height: 1.05; letter-spacing: -0.045em; } .app-shell:not(.mobile-shell) .title-stack p, .app-shell:not(.mobile-shell) .assistant-home-title-stack p { max-width: 40ch; min-height: auto; font-size: 14.5px; line-height: 1.56; } .app-shell:not(.mobile-shell) .header-strip, .app-shell:not(.mobile-shell) .assistant-home-bottomline { gap: 6px; min-height: 44px; } .app-shell:not(.mobile-shell) .header-strip .segmented, .app-shell:not(.mobile-shell) .assistant-home-segmented { min-height: 44px; } .app-shell:not(.mobile-shell) .header-strip .segmented button, .app-shell:not(.mobile-shell) .assistant-home-segmented button { min-width: 92px; min-height: 36px; padding: 0 14px; font-size: 13px; } .app-shell:not(.mobile-shell) .header-controls .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-date-nav .ghost-button, .app-shell:not(.mobile-shell) .header-strip .ghost-button, .app-shell:not(.mobile-shell) .assistant-home-bottomline .ghost-button, .app-shell:not(.mobile-shell) .page-header .header-topline .info-chip, .app-shell:not(.mobile-shell) .page-header .header-strip .info-chip, .app-shell:not(.mobile-shell) .assistant-home-view-badge { min-height: 38px; padding: 0 13px; font-size: 12.5px; border-radius: 999px; } .app-shell:not(.mobile-shell) .header-strip-actions .ghost-button, .app-shell:not(.mobile-shell) .header-strip-actions .action-button { min-height: 34px; min-width: 116px; padding: 0 13px; justify-content: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0; } .app-shell:not(.mobile-shell) .page-body { gap: 18px; } .app-shell:not(.mobile-shell) .stats-row { gap: 10px; } .app-shell:not(.mobile-shell) .stat-card { min-height: 124px; padding: 13px 14px 12px; gap: 5px; } .app-shell:not(.mobile-shell) .stat-card.metric-card .stat-card-value { font-size: clamp(34px, 2.2vw, 42px); } .app-shell:not(.mobile-shell) .stat-card-title { flex: 1 1 auto; min-width: 0; max-width: none; font-size: clamp(15px, 1vw, 18px); white-space: normal; } .app-shell:not(.mobile-shell) .stat-card-note { max-width: none; font-size: 12px; line-height: 1.42; } .app-shell:not(.mobile-shell) .stat-card-subnote { font-size: 11px; line-height: 1.4; opacity: 0.88; } .app-shell:not(.mobile-shell) .assistant-workflow-nav { padding: 22px 16px 20px; gap: 18px; } .app-shell:not(.mobile-shell) .assistant-workflow-nav .nav-brand p { font-size: 13px; line-height: 1.52; } .app-shell:not(.mobile-shell) .workflow-nav-label { font-size: 14px; font-weight: 600; } .app-shell:not(.mobile-shell) .workflow-nav-hint { font-size: 12px; line-height: 1.34; opacity: 0.88; } .app-shell:not(.mobile-shell) .panel-header, .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-header, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"]>div:first-child { padding: 16px 18px 12px; gap: 6px; } .app-shell:not(.mobile-shell) .panel-title h4, .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-title h4, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] h5 { font-size: 18px; line-height: 1.14; } .app-shell:not(.mobile-shell) .panel-title p, .app-shell:not(.mobile-shell) .assistant-chat-panel .panel-title p, .app-shell:not(.mobile-shell) [data-role="boss-command-workbench"] .detail-subnote, .app-shell:not(.mobile-shell) .detail-subnote { max-width: 44ch; font-size: 13.5px; line-height: 1.56; } .app-shell:not(.mobile-shell) .assistant-panel .assistant-list-item strong, .app-shell:not(.mobile-shell) .assistant-panel .todo-card strong, .app-shell:not(.mobile-shell) .assistant-panel .focus-card strong, .app-shell:not(.mobile-shell) .assistant-panel .risk-card strong, .app-shell:not(.mobile-shell) .assistant-panel .decision-card strong, .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-card strong { font-size: 14.5px; line-height: 1.36; } .app-shell:not(.mobile-shell) .assistant-panel .assistant-list-item span, .app-shell:not(.mobile-shell) .assistant-panel .todo-card span, .app-shell:not(.mobile-shell) .assistant-panel .focus-card span, .app-shell:not(.mobile-shell) .assistant-panel .risk-card span, .app-shell:not(.mobile-shell) .assistant-panel .decision-card span, .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-card span, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message { font-size: 13px; line-height: 1.54; } .app-shell:not(.mobile-shell) .assistant-panel { max-height: none; overflow-y: visible; overflow-x: visible; padding-right: 0; } .app-shell:not(.mobile-shell) .assistant-panel::-webkit-scrollbar { width: 8px; } .app-shell:not(.mobile-shell) .assistant-panel::-webkit-scrollbar-track { background: transparent; } .app-shell:not(.mobile-shell) .assistant-panel::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.42); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .app-shell:not(.mobile-shell) .assistant-panel:hover::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.34); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .app-shell:not(.mobile-shell) .empty-state { padding: 20px 18px; border-radius: 20px; font-size: 13.5px; line-height: 1.66; } .app-shell:not(.mobile-shell) .todo-layout { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 18px; align-items: stretch; } /* 2026-05-16：左右两栏 panel-header 强制等高，让左侧列表和右侧表单的起始 Y 对齐。 右侧 "新增待办" 副标题更长，自然高度 ~97px；左侧 "待办列表" 仅 ~76px。 把双方都顶到 100px，确保 panel-body 起始线在同一个 Y 上。 */ .app-shell:not(.mobile-shell) .todo-layout > .panel > .panel-header { min-height: 100px; align-items: flex-start; } .app-shell:not(.mobile-shell) .todo-layout > .panel > .panel-header > .panel-title { flex: 1 1 auto; } .app-shell:not(.mobile-shell) .todo-layout > .panel > .panel-header > .panel-title > p { max-width: 100%; line-height: 1.4; } .app-shell:not(.mobile-shell) .pending-layout { grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr); gap: 18px; align-items: stretch; } .app-shell:not(.mobile-shell) .todo-list, .app-shell:not(.mobile-shell) .pending-list { gap: 10px; } .app-shell:not(.mobile-shell) .todo-layout .panel-body, .app-shell:not(.mobile-shell) .pending-layout .panel-body { padding: 16px 18px 18px; gap: 14px; } .app-shell:not(.mobile-shell) .todo-layout>.panel { display: flex; flex-direction: column; min-height: 100%; } .app-shell:not(.mobile-shell) .todo-layout>.panel>.panel-body { display: flex; flex-direction: column; flex: 1; min-height: 0; } .app-shell:not(.mobile-shell) .pending-layout>.panel { display: flex; flex-direction: column; min-height: 100%; } .app-shell:not(.mobile-shell) .pending-layout>.panel>.panel-body { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Right panel form: let the textareas grow so the form fills the stretched panel height instead of leaving a large empty tail below the save buttons. */ .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; } .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>.field, .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>.form-grid, .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>label.switch-field, .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>.notice { flex: 0 0 auto; } /* 2026-05-10：右栏备注 / 推荐原因 / 补充备注 textarea 容器最小高度 140→96 textarea 本身 min-height 96→76（用户反馈：备注栏框可以小一点）。 textarea flex:1 还会拉伸填满剩余空间，所以减小 min-height 不影响多文本时的展开。 */ .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>.field:has(textarea[data-field="rawText"]), .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>.field:has(textarea[data-field="recommendedReason"]), .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>.field:has(textarea[data-field="note"]) { flex: 1 1 0; display: flex; flex-direction: column; min-height: 96px; } .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>.field:has(textarea[data-field="rawText"]) textarea, .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>.field:has(textarea[data-field="recommendedReason"]) textarea, .app-shell:not(.mobile-shell) .pending-layout>.panel:last-child>.panel-body>.form-grid>.field:has(textarea[data-field="note"]) textarea { flex: 1 1 auto; min-height: 76px; resize: vertical; } /* Todo 右侧表单：让备注 textarea 自动拉伸填满剩余空间，避免 保存待办 按钮和备注之间出现大块空白 */ .app-shell:not(.mobile-shell) .todo-layout>.panel:last-child>.panel-body>#todo-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .app-shell:not(.mobile-shell) .todo-layout>.panel:last-child>.panel-body>#todo-form>.form-grid { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; } .app-shell:not(.mobile-shell) .todo-layout>.panel:last-child>.panel-body>#todo-form>.form-grid>.field, .app-shell:not(.mobile-shell) .todo-layout>.panel:last-child>.panel-body>#todo-form>.form-grid>.form-grid { flex: 0 0 auto; } .app-shell:not(.mobile-shell) .todo-layout>.panel:last-child>.panel-body>#todo-form>.form-grid>.field:has(textarea[data-field="note"]) { flex: 1 1 0; display: flex; flex-direction: column; min-height: 120px; } .app-shell:not(.mobile-shell) .todo-layout>.panel:last-child>.panel-body>#todo-form>.form-grid>.field:has(textarea[data-field="note"]) textarea { flex: 1 1 auto; min-height: 96px; resize: vertical; } /* 新增待办分隔线到 form 之间留点空气 */ .app-shell:not(.mobile-shell) .todo-layout>.panel:last-child>.panel-body>.detail-form-divider { flex: 0 0 auto; } /* 左侧 todo 列表让它填满整个左侧面板高度 */ .app-shell:not(.mobile-shell) .todo-layout>.panel:first-child>.panel-body { display: flex; flex-direction: column; } .app-shell:not(.mobile-shell) .todo-layout>.panel:first-child>.panel-body>.todo-list-scroll { flex: 1 1 auto; } .app-shell:not(.mobile-shell) .todo-list-scroll { /* 2026-05-16：默认显示 7 条待办；卡片实际高度约 93px，行间距 10px。 calc(7 * 94px + 6 * 10px) = 718px，刚好 7 张卡片完整露出，第 8 张才被裁。 */ max-height: calc(7 * 94px + 6 * 10px); width: calc(100% + 14px); overflow-y: auto; overflow-x: hidden; padding-right: 14px; margin-right: -14px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.5) transparent; } .app-shell:not(.mobile-shell) .todo-list-scroll::-webkit-scrollbar { width: 8px; } .app-shell:not(.mobile-shell) .todo-list-scroll::-webkit-scrollbar-track { background: transparent; } .app-shell:not(.mobile-shell) .todo-list-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.42); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .app-shell:not(.mobile-shell) .todo-list-scroll:hover::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.34); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .app-shell:not(.mobile-shell) .pending-list-scroll { /* 2026-05-10：左栏列表跟右栏 panel 高度自动等高（用户反馈：默认显示更多条 + 左右底部对齐）。 父链：.pending-layout > .panel > .panel-body 是 flex column，所以这里 flex: 1 1 0 + min-height: 0 → 自动撑满剩余空间，超出滚动。 上限 max-height 兜底：极端情况（右栏特别高）不超过 8 条卡片高度，避免视觉拉太长。 单卡 ~215px + gap 12px → 8 * 215 + 7 * 12 = 1804px */ flex: 1 1 0; min-height: 0; max-height: calc(8 * 215px + 7 * 12px); width: calc(100% + 14px); overflow-y: auto; overflow-x: hidden; padding-right: 14px; margin-right: -14px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.5) transparent; } .app-shell:not(.mobile-shell) .pending-list-scroll::-webkit-scrollbar { width: 8px; } .app-shell:not(.mobile-shell) .pending-list-scroll::-webkit-scrollbar-track { background: transparent; } .app-shell:not(.mobile-shell) .pending-list-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.42); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .app-shell:not(.mobile-shell) .pending-list-scroll:hover::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.34); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .app-shell:not(.mobile-shell)[data-role="assistant"] { --assistant-send-fill: #5b79ff; --assistant-send-gradient: linear-gradient(135deg, #5b79ff 0%, #5b79ff 100%); grid-template-columns: 230px minmax(0, 1fr); } .app-shell:not(.mobile-shell)[data-role="assistant"] .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand { padding: 6px 10px 22px; border-bottom: 1px solid rgba(232, 237, 246, 0.92); } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-top { margin-bottom: 0; min-height: 0; align-items: center; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-lockup { display: grid; gap: 14px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-row { display: flex; align-items: center; gap: 18px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .brand-mark { width: 65px; height: 65px; margin-top: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .brand-mark-image { width: 56px; height: 56px; margin: auto; transform: none; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-copy { gap: 0; padding-top: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-title { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -0.06em; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-tagline { font-size: 13px; letter-spacing: 0; font-weight: 700; color: #6f84ff; line-height: 1.3; white-space: normal; text-align: center; justify-self: center; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-group { gap: 6px; padding-top: 2px; } .side-nav .nav-group { flex-direction: column; gap: 6px; } .side-nav .nav-group { flex-direction: column; gap: 6px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item { min-height: 56px; padding: 0 16px; border-radius: 20px; justify-content: flex-start; font-size: 16px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item-main { justify-content: flex-start; gap: 12px; font-weight: 700; } .side-nav .nav-item-main { flex-direction: row; justify-content: flex-start; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-icon { width: 22px; height: 22px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item.active { background: linear-gradient(135deg, #5f82ff 0%, #5a7cf3 100%); box-shadow: 0 14px 28px rgba(95, 130, 255, 0.2); } .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-home-reference-header { padding: 20px 26px 22px; border-radius: 30px 30px 26px 26px; border-bottom: 1px solid rgba(235, 240, 248, 0.92); background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; position: relative; top: auto; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-topline { display: flex; justify-content: space-between; align-items: center; gap: 18px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack small { margin-bottom: 8px; color: #6f84ff; font-size: 12px; line-height: 1.1; letter-spacing: 0.04em; text-transform: none; opacity: 1; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack h3 { font-size: 34px; line-height: 1.02; letter-spacing: -0.05em; margin: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack p { margin: 10px 0 0; max-width: 34ch; color: #5d6880; font-size: 16px; line-height: 1.52; font-weight: 600; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-controls { display: grid; justify-items: end; gap: 12px; min-width: max-content; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-row, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action-row { display: inline-flex; align-items: center; gap: 10px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-pill, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action { min-height: 52px; padding: 0 22px; border-radius: 24px; font-size: 14px; font-weight: 700; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip { gap: 10px; color: #4a566f; background: #ffffff; border: 1px solid rgba(232, 237, 246, 0.96); box-shadow: 0 10px 24px rgba(194, 205, 228, 0.08); } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip svg { width: 16px; height: 16px; color: #8b97ae; flex: 0 0 auto; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-pill, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action { justify-content: center; border-radius: 22px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action.primary { min-width: 148px; background: linear-gradient(135deg, #5f82ff 0%, #5a7cf3 100%); box-shadow: 0 14px 28px rgba(95, 130, 255, 0.2); } /* ── Boss 待安排会议 富头部（匹配助理首页风格） ── */ .app-shell:not(.mobile-shell)[data-role="boss"] .page-header.boss-pending-reference-header { padding: 20px 26px 22px; border-radius: 30px 30px 26px 26px; border-bottom: 1px solid rgba(235, 240, 248, 0.92); background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; position: relative; top: auto; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; } .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-lead { display: flex; align-items: center; gap: 18px; min-width: 0; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack small { margin-bottom: 8px; color: #6f84ff; font-size: 12px; line-height: 1.1; letter-spacing: 0.04em; text-transform: none; opacity: 1; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack h3 { font-size: 34px; line-height: 1.02; letter-spacing: -0.05em; margin: 0; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack p { margin: 10px 0 0; max-width: 34ch; color: #5d6880; font-size: 16px; line-height: 1.52; font-weight: 600; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-controls { display: grid; justify-items: end; gap: 12px; min-width: max-content; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-row, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action-row { display: inline-flex; align-items: center; gap: 10px; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-chip, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-pill, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-count-chip { min-height: 52px; padding: 0 22px; border-radius: 24px; font-size: 14px; font-weight: 700; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-chip { gap: 10px; color: #4a566f; background: #ffffff; border: 1px solid rgba(232, 237, 246, 0.96); box-shadow: 0 10px 24px rgba(194, 205, 228, 0.08); } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-chip svg { width: 18px; height: 18px; color: #8b97ae; flex: 0 0 auto; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-pill, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action { min-height: 40px; font-size: 14px; justify-content: center; border-radius: 22px; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-count-chip { display: inline-flex; align-items: center; color: #4a566f; background: rgba(241, 245, 249, 0.96); border: 1px solid rgba(226, 232, 240, 0.8); } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action.primary { min-width: 148px; background: linear-gradient(135deg, #5f82ff 0%, #5a7cf3 100%); box-shadow: 0 14px 28px rgba(95, 130, 255, 0.2); } .mobile-compact-copy p, .mobile-section-head p, .mobile-feature-head p { font-size: 11.25px; line-height: 1.48; } .mobile-summary-card { min-height: 96px; } .mobile-summary-card small, .mobile-summary-card span, .mobile-preview-item span { font-size: 11.25px; line-height: 1.42; } .mobile-preview-item strong { font-size: 13.5px; line-height: 1.3; } .mobile-preview-item { padding: 12px; } .mobile-app-status, .mobile-app-meta-pill { font-size: 12.5px; } .mobile-app-hero p { font-size: 13.5px; line-height: 1.58; } .login-overlay { background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-theme="dark"] .login-overlay { background: radial-gradient(circle at top right, rgba(215, 178, 125, 0.16), transparent 24%), radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.16), transparent 28%), rgba(4, 10, 19, 0.84); } .login-overlay.auth-spotlight { align-items: center; align-content: center; justify-items: center; overflow: auto; padding: 24px 18px; background: radial-gradient(circle at 14% 18%, rgba(37, 99, 235, 0.08), transparent 24%), radial-gradient(circle at 85% 84%, rgba(14, 165, 233, 0.1), transparent 28%), linear-gradient(180deg, #f4f8ff, #edf3fc); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="dark"] .login-overlay.auth-spotlight { background: radial-gradient(circle at 14% 18%, rgba(37, 99, 235, 0.12), transparent 24%), radial-gradient(circle at 82% 80%, rgba(124, 58, 237, 0.12), transparent 30%), linear-gradient(180deg, #020617, #070c1a); } .login-ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; filter: blur(78px); opacity: 0.92; } .login-blob { position: absolute; border-radius: 999px; opacity: 0.52; animation: login-blob-drift 18s infinite alternate var(--ease, var(--ease-out)); } .login-blob-a { width: 380px; height: 380px; top: -80px; left: -70px; background: rgba(37, 99, 235, 0.42); } .login-blob-b { width: 420px; height: 420px; right: -120px; bottom: -120px; background: rgba(14, 165, 233, 0.34); animation-delay: -4s; } .login-blob-c { width: 300px; height: 300px; top: 38%; left: 42%; background: rgba(96, 165, 250, 0.22); animation-delay: -9s; } html[data-theme="dark"] .login-blob-a { background: rgba(37, 99, 235, 0.46); } html[data-theme="dark"] .login-blob-b { background: rgba(124, 58, 237, 0.38); } html[data-theme="dark"] .login-blob-c { background: rgba(14, 165, 233, 0.24); } @keyframes login-blob-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(54px, 34px, 0) scale(1.12); } } .login-card.auth-login-card { position: relative; z-index: 2; width: min(520px, calc(100vw - 36px)); border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.7); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.86)); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.86); overflow: hidden; } html[data-theme="dark"] .login-card.auth-login-card { border-color: rgba(148, 163, 184, 0.16); background: linear-gradient(180deg, rgba(9, 16, 28, 0.96), rgba(8, 15, 26, 0.9)) !important; box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } .auth-login-card .login-header { padding: 16px 18px 20px; border-bottom: 1px solid rgba(226, 232, 240, 0.74); background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.14)); } html[data-theme="dark"] .auth-login-card .login-header { border-bottom-color: rgba(148, 163, 184, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } .auth-login-card .login-header-main { display: flex; align-items: center; justify-content: center; } .auth-login-card .login-header-actions { display: flex; align-items: center; justify-content: flex-start; min-height: 38px; } .auth-login-card .login-header-actions.right { justify-content: flex-end; } .auth-login-card .login-header-spacer { display: block; width: 74px; min-height: 38px; } .auth-login-card .login-nav-button { min-height: 38px; min-width: 74px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(255, 255, 255, 0.72); color: #10213b; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84); } html[data-theme="dark"] .auth-login-card .login-nav-button { border-color: rgba(148, 163, 184, 0.16); background: rgba(15, 23, 42, 0.62); color: #e8eef8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .login-brand-badge { display: flex; justify-content: center; width: 100%; margin: 0; } .login-brand-lockup { display: flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; text-align: left; } .login-brand-lockup .brand-mark { width: 92px; height: 82px; } .login-brand-lockup .app-brand-title { font-size: 34px; } .login-brand-lockup .app-brand-tagline { font-size: 14px; letter-spacing: 0.18em; } .toolbar-brand-lockup .app-brand-title, .login-brand-lockup .app-brand-title { color: #0f172a; } html[data-theme="dark"] .toolbar-brand-lockup .app-brand-title, html[data-theme="dark"] .login-brand-lockup .app-brand-title { color: #edf3fb; } .auth-login-card .login-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; align-items: stretch; gap: 12px; padding: 16px; } .auth-login-card .login-flow-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; } .auth-login-card .login-intro-panel { display: grid; gap: 10px; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.12); background: radial-gradient(circle at left top, rgba(255, 255, 255, 0.18), transparent 36%), linear-gradient(135deg, rgba(18, 48, 103, 0.96), rgba(44, 96, 214, 0.9)); color: #f8fbff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 28px rgba(37, 99, 235, 0.12); text-align: left; } html[data-theme="dark"] .auth-login-card .login-intro-panel { background: radial-gradient(circle at left top, rgba(147, 197, 253, 0.12), transparent 38%), linear-gradient(135deg, rgba(12, 23, 40, 0.98), rgba(21, 51, 92, 0.94)); border-color: rgba(148, 163, 184, 0.12); } .auth-login-card .login-intro-panel small { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(226, 232, 240, 0.82); } .auth-login-card .login-intro-panel h4 { margin: 0; font-size: 30px; font-weight: 750; line-height: 1.12; letter-spacing: -0.075em; color: #ffffff; } .auth-login-card .login-intro-panel p { margin: 0; font-size: 16px; font-weight: 430; line-height: 1.68; letter-spacing: -0.01em; color: rgba(226, 232, 240, 0.9); } .auth-login-card .login-intro-panel.is-welcome { gap: 0; padding: 22px 24px; } .auth-login-card .login-intro-panel.is-welcome h4 { max-width: 11ch; font-size: 32px; } .auth-login-card .login-intro-panel.is-welcome p { max-width: 32ch; font-size: 16px; } .auth-login-card .login-form-shell { display: grid; gap: 14px; padding: 18px; border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.8); background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 8px 24px rgba(15, 23, 42, 0.04); } html[data-theme="dark"] .auth-login-card .login-form-shell { border-color: rgba(148, 163, 184, 0.12); background: rgba(15, 23, 42, 0.46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .auth-login-card .login-choice-list, .auth-login-card .login-form-panel, .auth-login-card .login-primary-stack { display: grid; gap: 12px; } .auth-login-card .login-preset { position: relative; display: grid; gap: 6px; padding: 20px 98px 20px 24px; border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.14); background: rgba(255, 255, 255, 0.82); color: #10213b; text-align: left; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .auth-login-card .login-preset::after { content: "进入"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #2563eb; background: rgba(37, 99, 235, 0.08); } .auth-login-card .login-preset strong { font-size: 19px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.28; } .auth-login-card .login-preset span { color: rgba(71, 85, 105, 0.88); font-size: 16px; font-weight: 420; letter-spacing: -0.01em; line-height: 1.7; } .auth-login-card .login-preset:hover { transform: translateY(-1px); border-color: rgba(37, 99, 235, 0.26); background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 28px rgba(37, 99, 235, 0.08); } html[data-theme="dark"] .auth-login-card .login-preset { border-color: rgba(148, 163, 184, 0.12); background: rgba(30, 41, 59, 0.78); color: #e8eef8; } html[data-theme="dark"] .auth-login-card .login-preset span { color: rgba(203, 213, 225, 0.8); } html[data-theme="dark"] .auth-login-card .login-preset::after { background: rgba(147, 197, 253, 0.12); color: rgba(147, 197, 253, 0.88); } html[data-theme="dark"] .auth-login-card .login-preset:hover { border-color: rgba(96, 165, 250, 0.26); background: rgba(36, 50, 72, 0.88); } .auth-login-card .login-form-panel .mobile-detail-title, .auth-login-card .login-form-panel .mobile-note-card { text-align: left; margin: 0; } .auth-login-card .login-form-panel .mobile-detail-title h4 { margin-bottom: 10px; font-size: 22px; font-weight: 750; letter-spacing: -0.05em; line-height: 1.16; } .auth-login-card .login-form-panel .mobile-detail-title p { margin: 0; color: var(--text-sub); font-size: 16px; font-weight: 420; line-height: 1.68; letter-spacing: -0.01em; } .auth-login-card .login-form-panel .field input, .auth-login-card .login-form-panel .field select { min-height: 48px; border-radius: 16px; padding: 11px 15px; font-size: 15px; } .auth-login-card .login-form-panel .action-button, .auth-login-card .login-form-panel .ghost-button, .auth-login-card .login-test-actions .ghost-button, .auth-login-card .login-secondary-actions .ghost-button { min-height: 46px; border-radius: 16px; } .auth-login-card .login-auth-switch { width: 100%; background: rgba(15, 23, 42, 0.06); border: 1px solid rgba(148, 163, 184, 0.14); padding: 4px; border-radius: 16px; } .auth-login-card .login-auth-switch button { flex: 1 1 0; min-width: 0; min-height: 42px; border-radius: 12px; font-weight: 700; color: rgba(71, 85, 105, 0.78); } .auth-login-card .login-auth-switch button.active { background: rgba(255, 255, 255, 0.98); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); color: #10213b; } .auth-login-card .login-inline-link { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 0; border: 0; background: transparent; color: #2563eb; font-weight: 700; } .auth-login-card .login-secondary-actions, .auth-login-card .login-test-actions { display: grid; gap: 10px; } .auth-login-card .login-secondary-actions { grid-template-columns: 1fr; } .auth-login-card .login-test-actions { padding-top: 2px; border-top: 1px dashed rgba(148, 163, 184, 0.22); } .auth-login-card .login-test-actions-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(100, 116, 139, 0.84); } .auth-login-card .login-test-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .login-card.auth-login-card.auth-login-card-simple { width: min(560px, calc(100vw - 40px)); border-radius: 32px; background: rgba(255, 255, 255, 0.84); color: inherit; } html[data-theme="dark"] .login-card.auth-login-card.auth-login-card-simple { background: rgba(9, 16, 28, 0.92) !important; color: #f8fbff; } html[data-theme="dark"] .auth-login-card .login-auth-switch { background: rgba(255, 255, 255, 0.04); border-color: rgba(148, 163, 184, 0.14); } html[data-theme="dark"] .auth-login-card .login-auth-switch button { color: rgba(203, 213, 225, 0.72); } html[data-theme="dark"] .auth-login-card .login-auth-switch button.active { background: rgba(255, 255, 255, 0.08); color: #f8fbff; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22); } html[data-theme="dark"] .auth-login-card .login-inline-link { color: rgba(147, 197, 253, 0.92); } html[data-theme="dark"] .auth-login-card .login-test-actions { border-top-color: rgba(148, 163, 184, 0.18); } html[data-theme="dark"] .auth-login-card .login-test-actions-title { color: rgba(191, 203, 219, 0.8); } @media (max-width: 720px) { .login-overlay.auth-spotlight { padding: 14px; align-items: stretch; } .login-card.auth-login-card { width: 100%; max-width: none; margin: auto 0; border-radius: 28px; } .auth-login-card .login-body { gap: 14px; padding: 16px; } .auth-login-card .login-flow-stack { gap: 14px; } .auth-login-card .login-hero { min-height: auto; border-radius: 20px; } .auth-login-card .login-header { padding: 16px 16px 14px; } .auth-login-card .login-header-main { justify-content: center; } .auth-login-card .login-nav-button, .auth-login-card .login-header-spacer { min-width: 64px; width: 64px; } .auth-login-card .login-intro-panel { padding: 16px 18px; } .auth-login-card .login-intro-panel h4 { font-size: 26px; } .auth-login-card .login-intro-panel.is-welcome h4, .auth-login-card .login-intro-panel.is-welcome p { max-width: none; } .auth-login-card .login-intro-panel.is-welcome h4 { font-size: 28px; } .login-brand-wordmark { font-size: 28px; } .login-brand-note { font-size: 13px; } .auth-login-card .login-form-shell { padding: 16px; } .auth-login-card .login-form-panel .mobile-detail-title h4 { font-size: 20px; } .auth-login-card .login-form-panel .mobile-detail-title p, .auth-login-card .login-preset span { font-size: 15px; } .auth-login-card .login-preset { padding: 18px 84px 18px 18px; } .auth-login-card .login-preset::after { right: 16px; min-width: 46px; height: 30px; font-size: 14px; padding: 0 12px; } .auth-login-card .login-test-grid { grid-template-columns: 1fr; } .login-card.auth-login-card.auth-login-card-simple { width: 100%; border-radius: 28px; } .auth-login-card-simple .login-header { padding: 28px 22px 10px; } .auth-login-card-simple .login-brand-wordmark { font-size: 28px; } .auth-login-card-simple .login-body { padding: 10px 22px 24px; } .auth-login-card-simple .field input, .auth-login-card-simple .field select, .auth-login-card-simple .login-auth-switch button, .auth-login-card-simple .ghost-button, .auth-login-card-simple .action-button { min-height: 52px; } .auth-login-card-simple .split-actions { grid-template-columns: 1fr; } } .login-card.auth-login-card.auth-shot-card { --auth-card-min-height: 548px; --auth-hero-bg-x: 55.8%; --auth-hero-bg-y: calc(100% + 34px); --auth-hero-bg-size: 118% auto; --auth-hero-copy-top: 26px; --auth-logo-size: 92px; --auth-title-size: 58px; --auth-subtitle-size: 16px; --auth-subtitle-line-width: 34px; --auth-slogan-gap: -8px; --auth-slogan-size: 18px; --auth-desc-gap: -10px; --auth-desc-size: 15px; --auth-desc-line-height: 1.68; --auth-panel-top: 22px; --auth-panel-side: 40px; --auth-panel-bottom: 12px; --auth-panel-top-gap: 4px; --auth-panel-body-offset: 16px; --auth-panel-body-gap: 14px; --auth-heading-gap: 6px; --auth-heading-size: 38px; --auth-heading-copy-size: 16px; --auth-tabs-gap: 32px; --auth-tab-size: 16px; --auth-tab-pad: 10px; --auth-form-gap: 14px; --auth-form-secondary-gap: 14px; --auth-field-height: 60px; --auth-field-pad: 20px; --auth-field-radius: 20px; --auth-field-icon: 22px; --auth-field-size: 16px; --auth-inline-size: 15px; --auth-agreement-size: 14px; --auth-submit-height: 64px; --auth-submit-radius: 22px; --auth-submit-size: 20px; --auth-divider-gap: 16px; --auth-divider-size: 14px; --auth-sso-gap: 10px; --auth-sso-height: 56px; --auth-sso-radius: 18px; --auth-sso-size: 14px; --auth-sso-icon: 22px; --auth-footer-gap: 16px; --auth-footer-top: 10px; --auth-footer-size: 16px; width: min(1520px, calc(100vw - 24px)); height: auto; min-height: var(--auth-card-min-height); border-radius: 30px; border: 1px solid rgba(29, 43, 75, 0.92); background: radial-gradient(circle at 50% 0%, rgba(13, 22, 46, 0.99), rgba(6, 12, 28, 0.99)); box-shadow: 0 28px 84px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; } .auth-shot-shell { display: grid; grid-template-columns: 40.8% 59.2%; height: auto; min-height: inherit; align-items: stretch; } .auth-shot-hero { position: relative; display: grid; grid-template-rows: auto auto; align-content: start; row-gap: 30px; padding: 34px 34px 0; background: radial-gradient(circle at 50% 18%, rgba(75, 105, 214, 0.12), transparent 34%), linear-gradient(180deg, #0c1530 0%, #091225 62%, #091120 100%); border-right: 1px solid rgba(24, 37, 66, 0.92); overflow: hidden; } .auth-shot-hero-copy { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 11px; padding-top: 14px; } .auth-shot-logo-mark { position: relative; width: 102px; height: 102px; border-radius: 26px; display: grid; place-items: center; background: transparent; box-shadow: none; overflow: visible; } .auth-shot-logo-image { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: contain; object-position: center; transform: scale(1); transform-origin: center; } .auth-shot-lockup-image { display: block; width: min(100%, 180px); max-height: 240px; height: auto; object-fit: contain; } .auth-shot-brand-lockup { display: grid; justify-items: center; width: min(100%, 260px); gap: 6px; } .auth-shot-logo-mark::before { content: ""; position: absolute; width: 88px; height: 88px; right: -10px; bottom: -44px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.52); opacity: 0.72; transform: rotate(18deg); } .auth-shot-logo-mark span { position: relative; z-index: 1; color: #ffffff; font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.08em; } .auth-shot-brand-title { margin: 0; color: #ffffff; font-size: 54px; line-height: 1; letter-spacing: -0.04em; /* v189：登录页品牌区与设计稿对齐 — 中文衬线/书法感 Noto Serif SC 在 head 已加载（weight 600/700/900），fallback 系统衬线 需用 !important 压过 v5-theme.css 中 `.page-header-title, h1, h2` 的 800/!important */ font-family: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "STSong", "Songti SC", "Songti TC", "SimSun", serif !important; font-weight: 900 !important; } .auth-shot-brand-subtitle { display: inline-flex; align-items: center; gap: 14px; color: rgba(220, 229, 255, 0.78); font-size: 15px; font-weight: 600; letter-spacing: 0.16em; white-space: nowrap; } .auth-shot-brand-subtitle::before, .auth-shot-brand-subtitle::after { content: ""; width: 40px; height: 2px; border-radius: 999px; background: rgba(173, 188, 236, 0.48); } .auth-shot-brand-slogan { margin: 10px 0 0; color: #5d81ff; font-size: 19px; font-weight: 700; letter-spacing: 0.34em; text-indent: 0.34em; } .auth-shot-brand-desc { margin: 2px 0 0; color: rgba(206, 216, 248, 0.72); font-size: 15px; line-height: 1.72; font-weight: 600; } .auth-shot-room { position: relative; display: flex; align-items: flex-end; justify-content: center; align-self: start; min-height: 320px; margin: 0 -34px 0; overflow: hidden; background: radial-gradient(circle at 54% 16%, rgba(92, 115, 188, 0.11), transparent 28%), linear-gradient(180deg, rgba(8, 14, 31, 0) 0%, rgba(11, 18, 39, 0.04) 8%, rgba(8, 16, 35, 0.94) 100%); } .auth-shot-room-poster { position: relative; z-index: 1; display: block; width: 100%; height: auto; object-fit: cover; object-position: center bottom; } .auth-shot-room::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(76, 103, 191, 0.12), transparent 16%), radial-gradient(circle at 50% 72%, rgba(92, 116, 255, 0.15), transparent 24%), linear-gradient(180deg, rgba(7, 11, 25, 0) 0%, rgba(7, 11, 25, 0.82) 100%); pointer-events: none; } .auth-shot-room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.03) 46%, rgba(3, 6, 16, 0.22) 64%, rgba(3, 6, 16, 0.84) 100%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 26px); pointer-events: none; } .auth-shot-window-wall { position: absolute; left: 0; top: 0; bottom: 0; width: 162px; background: linear-gradient(90deg, rgba(109, 133, 210, 0.14), rgba(62, 85, 152, 0.04)), repeating-linear-gradient(90deg, rgba(168, 187, 255, 0.14) 0, rgba(168, 187, 255, 0.14) 2px, rgba(17, 25, 52, 0.06) 2px, rgba(17, 25, 52, 0.06) 24px); box-shadow: inset -34px 0 40px rgba(6, 10, 24, 0.72); transform: perspective(900px) rotateY(13deg); transform-origin: left center; } .auth-shot-window-wall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(133, 152, 231, 0.12), rgba(10, 16, 36, 0.78)); } .auth-shot-plant { position: absolute; left: 78px; bottom: 82px; width: 30px; height: 74px; border-radius: 999px 999px 16px 16px; background: linear-gradient(180deg, rgba(29, 71, 72, 0.22), rgba(18, 39, 42, 0.88)); box-shadow: 0 10px 24px rgba(4, 9, 22, 0.36); opacity: 0.84; } .auth-shot-plant::before, .auth-shot-plant::after { content: ""; position: absolute; bottom: 42px; width: 14px; height: 36px; border-radius: 999px 999px 0 999px; background: linear-gradient(180deg, rgba(78, 121, 101, 0.94), rgba(37, 77, 64, 0.92)); } .auth-shot-plant::before { left: -8px; transform: rotate(-22deg); } .auth-shot-plant::after { right: -10px; transform: scaleX(-1) rotate(-18deg); } .auth-shot-monitor { position: absolute; left: 50%; top: 118px; width: 304px; height: 150px; transform: translateX(-50%); border-radius: 10px; border: 1px solid rgba(110, 126, 189, 0.3); background: linear-gradient(180deg, rgba(17, 28, 67, 0.94), rgba(8, 14, 34, 0.98)); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32), 0 0 72px rgba(96, 118, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .auth-shot-monitor::before { content: ""; position: absolute; inset: 18px 22px auto 22px; height: 70px; border-radius: 12px; background: radial-gradient(circle at center, rgba(124, 146, 255, 0.58) 0, rgba(124, 146, 255, 0.18) 24%, transparent 25%), linear-gradient(180deg, rgba(59, 78, 151, 0.9), rgba(34, 52, 108, 0.54)); opacity: 0.96; } .auth-shot-monitor::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 16px; height: 42px; background: linear-gradient(90deg, rgba(82, 102, 182, 0.44) 0 28%, transparent 28% 32%, rgba(82, 102, 182, 0.34) 32% 68%, transparent 68% 72%, rgba(82, 102, 182, 0.28) 72% 100%); opacity: 0.72; } .auth-shot-table { position: absolute; left: 50%; bottom: -4px; width: 768px; height: 174px; transform: translateX(-50%); background: radial-gradient(circle at 50% -18%, rgba(144, 161, 255, 0.34), rgba(38, 53, 113, 0.04) 34%, transparent 36%), linear-gradient(180deg, rgba(79, 101, 193, 0.12), rgba(18, 28, 64, 0.96)); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); box-shadow: 0 -18px 54px rgba(111, 131, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .auth-shot-chair { position: absolute; bottom: 60px; width: 46px; height: 88px; border-radius: 16px 16px 24px 24px; background: linear-gradient(180deg, rgba(49, 68, 126, 0.8), rgba(15, 24, 55, 0.98)); box-shadow: 0 16px 28px rgba(0, 0, 0, 0.3); opacity: 0.92; } .auth-shot-chair::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -12px; height: 16px; border-radius: 999px; background: rgba(14, 22, 50, 0.86); } .auth-shot-chair.c1 { left: 38px; transform: rotate(-14deg); height: 82px; } .auth-shot-chair.c2 { left: 112px; transform: rotate(-8deg); height: 76px; bottom: 68px; } .auth-shot-chair.c3 { right: 116px; transform: rotate(8deg); height: 76px; bottom: 68px; } .auth-shot-chair.c4 { right: 40px; transform: rotate(14deg); height: 82px; } .auth-shot-panel { display: grid; grid-template-rows: 1fr; padding: 8px 28px 10px; background: linear-gradient(180deg, rgba(10, 16, 37, 0.98), rgba(8, 13, 30, 0.98)); } .auth-shot-language { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(31, 46, 80, 0.84); background: rgba(10, 18, 39, 0.84); color: rgba(204, 214, 247, 0.88); font-size: 15px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .auth-shot-language svg { width: 18px; height: 18px; flex: 0 0 auto; } .auth-shot-panel-body { width: auto; max-width: 760px; margin: 0 16px 0 52px; display: flex; flex-direction: column; justify-self: stretch; gap: 10px; min-height: 100%; justify-content: flex-start; } .auth-shot-heading { display: grid; gap: 6px; } .auth-shot-panel-head { display: grid; gap: 16px; } .auth-shot-panel-primary { display: grid; gap: 16px; } .auth-shot-panel-secondary { display: grid; gap: 14px; padding-top: 6px; } .auth-shot-heading h2 { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: #ffffff; font-size: 29px; line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; } .auth-shot-heading p { margin: 0; color: rgba(190, 201, 233, 0.54); font-size: 13px; line-height: 1.45; font-weight: 600; max-width: 38ch; text-wrap: pretty; } .auth-shot-heading .spark { color: #5e81ff; font-size: 18px; } .auth-shot-tabs { display: inline-flex; gap: 26px; align-items: flex-end; margin-top: 2px; } .auth-shot-tab { position: relative; /* 2026-05-14 polish：tab 触摸目标 ≥36 高，统一桌面 + 移动端高度 */ min-height: 36px; padding: 6px 12px 10px; line-height: 1.3; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: rgba(208, 217, 243, 0.62); font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 8px 8px 0 0; transition: color 0.18s ease, transform 0.18s ease, background-color 0.18s ease; } .auth-shot-tab.active { color: #5f82ff; } .auth-shot-tab:hover { transform: translateY(-1px); } .auth-shot-tab:focus-visible { outline: none; color: #5f82ff; } .auth-shot-tab.active::after { /* 2026-05-23：下划线跟 tab 内文字等宽——左右 inset 对齐水平 padding， 不再用固定 28px（"密码登录"等四字 tab 会明显偏短）。 */ content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; width: auto; height: 2px; border-radius: 999px; background: rgba(95, 130, 255, 0.85); box-shadow: none; } .auth-shot-form { display: block; } .auth-shot-form-main { display: grid; gap: var(--auth-form-gap); } .auth-shot-form-secondary { display: grid; gap: var(--auth-form-secondary-gap); } .auth-shot-feedback-slot { min-height: 56px; display: grid; align-content: start; margin: 0; } .auth-shot-feedback-slot:empty { display: none; } .auth-shot-feedback-slot .mobile-note-card { min-height: 56px; border-radius: 18px; padding: 13px 15px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); } .auth-shot-feedback-slot .mobile-note-card[data-tone="warn"] { background: rgba(255, 244, 231, 0.96); border-color: rgba(245, 158, 11, 0.22); } .auth-shot-feedback-slot .mobile-note-card[data-tone="warn"] span, .auth-shot-feedback-slot .mobile-note-card[data-tone="warn"] p { color: #b45309; } .auth-shot-feedback-slot .mobile-note-card[data-tone="info"] { background: rgba(239, 246, 255, 0.98); border-color: rgba(96, 165, 250, 0.22); } .auth-shot-feedback-slot .mobile-note-card[data-tone="info"] span, .auth-shot-feedback-slot .mobile-note-card[data-tone="info"] p { color: #315ea8; } .auth-shot-field { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 60px; padding: 0 22px; border-radius: 18px; border: 1px solid rgba(29, 43, 75, 0.96); background: #171f34; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .auth-shot-field:hover { transform: translateY(-1px); } .auth-shot-field.is-error { border-color: rgba(248, 113, 113, 0.52); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.02); } .auth-shot-field svg { width: 20px; height: 20px; color: rgba(191, 201, 232, 0.56); flex: 0 0 auto; } .auth-shot-field input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: #ffffff; font-size: 14px; font-weight: 600; font-family: var(--font-sans); } .auth-shot-field input::placeholder { color: rgba(175, 187, 223, 0.36); font-weight: 600; } .auth-shot-field-tail { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; color: rgba(178, 190, 226, 0.64); } .auth-shot-inline-action { border: 0; background: transparent; color: rgba(203, 212, 242, 0.72); font-size: 13px; font-weight: 700; /* 2026-05-14 polish：≥32 高、横向更宽，键盘可点感更明确 */ min-height: 32px; padding: 6px 10px; display: inline-flex; align-items: center; cursor: pointer; border-radius: 6px; transition: color 0.18s ease, opacity 0.18s ease, background-color 0.18s ease; } .auth-shot-inline-action:focus-visible, .auth-shot-agreement button:focus-visible, .auth-shot-footer button:focus-visible { /* 2026-05-14 polish：清晰的 focus ring（之前只有下划线，键盘用户看不清焦点） */ outline: 2px solid currentColor; outline-offset: 2px; text-decoration: underline; text-underline-offset: 0.18em; } .auth-shot-agreement { display: flex; align-items: center; gap: 10px; color: rgba(176, 188, 225, 0.68); font-size: 14px; font-weight: 600; line-height: 1.5; } .auth-shot-agreement-stack { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; } .auth-shot-agreement-note { padding-left: 0; font-size: 12px; line-height: 1.35; font-weight: 700; color: #c87412; white-space: nowrap; } .auth-shot-agreement-side-note { justify-self: end; text-align: right; max-width: 360px; white-space: nowrap; } .auth-shot-agreement-side-note[data-tone="info"] { color: #8ba2ff; } .auth-shot-inline-note { font-size: 12px; line-height: 1.4; font-weight: 700; border-radius: 12px; padding: 8px 12px; } .auth-shot-inline-note[data-tone="warn"] { color: #c87412; background: rgba(255, 176, 32, 0.08); border: 1px solid rgba(245, 158, 11, 0.16); } .auth-shot-inline-note[data-tone="info"] { color: #3562b1; background: rgba(96, 165, 250, 0.08); border: 1px solid rgba(96, 165, 250, 0.16); } .auth-shot-agreement input { appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 2px solid rgba(103, 122, 184, 0.76); background: transparent; position: relative; flex: 0 0 auto; } /* 2026-05-16：协议复选框继承通用 input[type="checkbox"] 的 transition + animation， 这里不再单独定义 animation 避免 specificity 大于全局规则把 bounce 覆盖掉 */ .auth-shot-agreement input:active { transform: scale(0.92); } .auth-shot-agreement input:checked { background: linear-gradient(180deg, #5f82ff, #4d73f0); border-color: #5f82ff; } .auth-shot-agreement input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; transform-origin: center; /* 用全局 input[type="checkbox"]:checked::after 的 checkPopIn 动画 （不在这里覆盖 animation 字段，否则 specificity 高会丢失全局动画） */ } .auth-shot-agreement button { border: 0; background: transparent; color: #5f82ff; font-size: inherit; font-weight: 700; padding: 0; transition: color 0.18s ease, opacity 0.18s ease; } .auth-shot-submit { width: 100%; min-height: 62px; border: 0; border-radius: 24px; background: linear-gradient(90deg, #5f82ff 0%, #6788ee 100%); color: #ffffff; font-size: 18px; font-weight: 800; letter-spacing: 0.08em; box-shadow: 0 20px 34px rgba(84, 118, 255, 0.28), inset 0 -6px 0 rgba(57, 85, 190, 0.24); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .auth-shot-submit:hover { transform: translateY(-1px); } .auth-shot-submit:active { transform: translateY(0); } .auth-shot-submit:focus-visible, .auth-shot-sso-button:focus-visible { outline: none; } .auth-shot-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; color: rgba(176, 188, 223, 0.54); font-size: 15px; font-weight: 700; } .auth-shot-divider::before, .auth-shot-divider::after { content: ""; height: 1px; background: rgba(35, 49, 82, 0.96); } .auth-shot-sso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 6px; } .auth-shot-sso-button { min-height: 68px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 18px; border: 1px solid rgba(29, 43, 75, 0.96); background: #171f34; color: rgba(220, 228, 255, 0.86); font-size: 15px; font-weight: 750; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .auth-shot-sso-button:hover { transform: translateY(-1px); } .auth-shot-sso-button svg { width: 26px; height: 26px; color: #6c89ff; flex: 0 0 auto; } .auth-shot-sso-button[data-value="企业微信"] svg { color: #2f6bff; } .auth-shot-sso-button[data-value="钉钉登录"] svg { color: #1677ff; } .auth-shot-sso-button[data-value="飞书登录"] svg { color: #3370ff; } .auth-shot-sso-button span { white-space: nowrap; letter-spacing: 0.01em; } .auth-shot-footer { display: flex; justify-content: center; align-items: center; gap: 12px; color: rgba(173, 186, 223, 0.52); font-size: 14px; font-weight: 700; padding-top: 0; margin: 10px 0 0; } .auth-shot-footer button { border: 0; background: transparent; color: #5f82ff; font-size: 16px; font-weight: 800; /* 2026-05-14 polish：≥32 触摸目标 + 明确 hover 状态 */ min-height: 32px; padding: 4px 8px; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; transition: color 0.18s ease, opacity 0.18s ease, background-color 0.18s ease; } .auth-shot-form-note { margin-top: -10px; color: rgba(168, 181, 220, 0.42); font-size: 13px; font-weight: 600; } /* ── 创建团队页 ── */ .login-card.auth-login-card.auth-shot-card.auth-shot-card--register { display: flex; flex-direction: column; width: min(860px, calc(100vw - 48px)) !important; max-width: 860px !important; min-height: 560px; } .auth-reg-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 28px 22px; border-bottom: 1px solid rgba(230, 234, 244, 0.14); } .auth-reg-back { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border: 1px solid rgba(200, 210, 232, 0.28); border-radius: 999px; background: transparent; color: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.18s; } .auth-reg-back:hover { background: rgba(200, 210, 232, 0.08); } .auth-reg-header-title { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; } .auth-reg-header-title h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; } .auth-reg-header-title p { margin: 0; font-size: 12px; opacity: 0.5; font-weight: 500; } .auth-reg-header-lang { justify-self: end; } .auth-reg-header-lang .auth-shot-language { min-height: 36px; padding: 0 12px; font-size: 13px; gap: 6px; } .auth-reg-body { display: grid; grid-template-columns: 220px 1fr; flex: 1; min-height: 0; } .auth-reg-sidebar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px 24px; border-right: 1px solid rgba(230, 234, 244, 0.14); } .auth-reg-steps { display: flex; align-items: center; gap: 0; justify-content: center; flex-wrap: wrap; padding: 10px 8px 0; width: 100%; } .auth-reg-step { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .auth-reg-step-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 700; border: 2px solid rgba(180, 192, 220, 0.32); color: rgba(180, 192, 220, 0.52); background: transparent; flex-shrink: 0; } .auth-reg-step.active .auth-reg-step-num { background: #4a6cf7; border-color: #4a6cf7; color: #fff; } .auth-reg-step-label { font-size: 14px; font-weight: 600; color: rgba(180, 192, 220, 0.52); } .auth-reg-step.active .auth-reg-step-label { color: inherit; opacity: 0.88; } .auth-reg-step-line { width: 32px; height: 2px; margin: 0 8px; background: rgba(180, 192, 220, 0.2); border-radius: 999px; flex-shrink: 0; } .auth-reg-info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .auth-reg-icon { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; background: rgba(74, 108, 247, 0.12); color: #4a6cf7; } .auth-reg-icon svg { width: 76px; height: 76px; } .auth-reg-info-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } .auth-reg-info-desc { margin: 0; font-size: 13px; line-height: 1.7; opacity: 0.52; font-weight: 500; } .auth-reg-form { display: flex; flex-direction: column; gap: 16px; padding: 28px 40px; justify-content: center; } .auth-reg-field-group { display: flex; flex-direction: column; gap: 6px; } .auth-reg-contact-row { display: flex; align-items: center; gap: 14px; min-height: 28px; } .auth-reg-form .auth-shot-field:not(:has(svg)) { grid-template-columns: minmax(0, 1fr); } .auth-reg-label { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .auth-reg-method-tabs { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid rgba(200, 210, 232, 0.22); align-self: flex-start; flex: 0 0 auto; } .auth-reg-side-note { flex: 1 1 auto; min-width: 0; min-height: 20px; font-size: 13px; line-height: 1.4; font-weight: 700; text-align: right; word-break: break-word; } .auth-reg-side-note.is-empty { visibility: hidden; } .auth-reg-method-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 24px; border: none; background: transparent; color: inherit; font-size: 13px; font-weight: 600; cursor: pointer; opacity: 0.54; transition: background 0.18s, opacity 0.18s; } .auth-reg-method-tab svg { width: 15px; height: 15px; } .auth-reg-method-tab.active { background: rgba(200, 210, 232, 0.12); opacity: 1; } .auth-reg-method-tab:hover { opacity: 0.8; } .auth-reg-submit { margin-top: 4px; } /* ── Light theme: 创建团队 ── */ html[data-theme="light"] .auth-shot-card--register { border-color: #edf1f7; background: #ffffff; box-shadow: 0 24px 64px rgba(159, 176, 214, 0.18); } html[data-theme="light"] .auth-reg-header { border-bottom-color: #edf1f7; } html[data-theme="light"] .auth-reg-back { border-color: #dce2ee; color: #3a4565; } html[data-theme="light"] .auth-reg-back:hover { background: #f4f6fb; } html[data-theme="light"] .auth-reg-header-title h2 { color: #1a2138; } html[data-theme="light"] .auth-reg-header-title p { color: #7c8baa; } html[data-theme="light"] .auth-reg-sidebar { border-right-color: #edf1f7; } html[data-theme="light"] .auth-reg-step-num { border-color: #d4dae8; color: #a0adc8; } html[data-theme="light"] .auth-reg-step.active .auth-reg-step-num { background: #4a6cf7; border-color: #4a6cf7; color: #fff; } html[data-theme="light"] .auth-reg-step-label { color: #a0adc8; } html[data-theme="light"] .auth-reg-step.active .auth-reg-step-label { color: #1a2138; } html[data-theme="light"] .auth-reg-step-line { background: #dce2ee; } html[data-theme="light"] .auth-reg-icon { background: rgba(74, 108, 247, 0.08); color: #4a6cf7; } html[data-theme="light"] .auth-reg-info-title { color: #1a2138; } html[data-theme="light"] .auth-reg-info-desc { color: #7c8baa; } html[data-theme="light"] .auth-reg-label { color: #1a2138; } html[data-theme="light"] .auth-reg-method-tabs { border-color: #e2e7f0; background: #f6f8fc; } html[data-theme="light"] .auth-reg-side-note { color: #ec7c42; } html[data-theme="light"] .auth-reg-side-note[data-tone="info"] { color: #5f82ff; } html[data-theme="light"] .auth-reg-method-tab { color: #7c8baa; } html[data-theme="light"] .auth-reg-method-tab.active { background: #fff; color: #1a2138; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } html[data-theme="light"] .auth-reg-form .auth-shot-field { border-color: #e2e7f0; background: #f8fafd; } html[data-theme="light"] .auth-reg-form .auth-shot-field input { color: #1a2138; } html[data-theme="light"] .auth-reg-form .auth-shot-field input::placeholder { color: #a0adc8; } html[data-theme="light"] .auth-reg-form .auth-shot-submit { background: #4a6cf7; color: #fff; } /* ── Dark theme: 创建团队 ── */ html[data-theme="dark"] .auth-reg-header { border-bottom-color: rgba(36, 50, 82, 0.7); } html[data-theme="dark"] .auth-reg-back { border-color: rgba(60, 78, 120, 0.5); color: rgba(210, 220, 248, 0.82); } html[data-theme="dark"] .auth-reg-back:hover { background: rgba(60, 78, 120, 0.2); } html[data-theme="dark"] .auth-reg-header-title h2 { color: #fff; } html[data-theme="dark"] .auth-reg-header-title p { color: rgba(190, 201, 233, 0.5); } html[data-theme="dark"] .auth-reg-sidebar { border-right-color: rgba(36, 50, 82, 0.7); } html[data-theme="dark"] .auth-reg-icon { background: rgba(94, 129, 255, 0.12); color: #5e81ff; } html[data-theme="dark"] .auth-reg-info-title { color: #fff; } html[data-theme="dark"] .auth-reg-info-desc { color: rgba(190, 201, 233, 0.52); } html[data-theme="dark"] .auth-reg-label { color: rgba(220, 229, 255, 0.88); } html[data-theme="dark"] .auth-reg-method-tabs { border-color: rgba(60, 78, 120, 0.5); } html[data-theme="dark"] .auth-reg-side-note { color: #ffb06e; } html[data-theme="dark"] .auth-reg-side-note[data-tone="info"] { color: #8db2ff; } html[data-theme="dark"] .auth-reg-method-tab { color: rgba(190, 201, 233, 0.54); } html[data-theme="dark"] .auth-reg-method-tab.active { background: rgba(94, 129, 255, 0.14); color: #fff; } html[data-theme="light"] .login-card.auth-login-card.auth-shot-card { --auth-card-min-height: 610px; --auth-hero-bg-x: 57.2%; --auth-hero-bg-y: calc(100% + 46px); --auth-hero-bg-size: 123.6% auto; --auth-hero-copy-top: 38px; --auth-logo-size: 74px; --auth-title-size: 44px; --auth-subtitle-size: 13px; --auth-subtitle-line-width: 22px; --auth-slogan-gap: 12px; --auth-slogan-size: 14px; --auth-desc-gap: 6px; --auth-desc-size: 13px; --auth-desc-line-height: 1.5; --auth-panel-top: 22px; --auth-panel-side: 40px; --auth-panel-bottom: 18px; --auth-panel-top-gap: 4px; --auth-panel-body-offset: 16px; --auth-panel-body-gap: 18px; --auth-heading-gap: 6px; --auth-heading-size: 38px; --auth-heading-copy-size: 16px; --auth-tabs-gap: 32px; --auth-tab-size: 16px; --auth-tab-pad: 10px; --auth-form-gap: 14px; --auth-field-height: 60px; --auth-field-pad: 20px; --auth-field-radius: 20px; --auth-field-icon: 22px; --auth-field-size: 16px; --auth-inline-size: 15px; --auth-agreement-size: 14px; --auth-submit-height: 64px; --auth-submit-radius: 22px; --auth-submit-size: 20px; --auth-divider-gap: 20px; --auth-divider-size: 14px; --auth-sso-gap: 14px; --auth-sso-height: 56px; --auth-sso-radius: 18px; --auth-sso-size: 14px; --auth-sso-icon: 22px; --auth-footer-gap: 16px; --auth-footer-top: 22px; --auth-footer-size: 16px; border-color: #edf1f7; background: #ffffff; box-shadow: 0 24px 64px rgba(159, 176, 214, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.98); } html[data-theme="light"] .auth-shot-hero { row-gap: 0; padding: 0; align-content: start; justify-items: stretch; background: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(248, 251, 255, 0.96) 22%, rgba(248, 251, 255, 0.62) 34%, rgba(248, 251, 255, 0.18) 48%, rgba(248, 251, 255, 0) 62%), #ffffff url("/assets/auth-poster-light.png") var(--auth-hero-bg-x) var(--auth-hero-bg-y) / var(--auth-hero-bg-size) no-repeat; border-right-color: #eef2f8; } html[data-theme="light"] .auth-shot-hero-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 7px; padding: var(--auth-panel-top) 32px 0; text-align: center; } html[data-theme="light"] .auth-shot-logo-mark { width: var(--auth-logo-size); height: var(--auth-logo-size); border-radius: 24px; background: transparent; box-shadow: none; } html[data-theme="light"] .auth-shot-brand-title { color: #19243c; font-size: var(--auth-title-size); letter-spacing: -0.03em; } html[data-theme="light"] .auth-shot-brand-subtitle { gap: 10px; color: #9099ab; font-size: var(--auth-subtitle-size); letter-spacing: 0.18em; } html[data-theme="light"] .auth-shot-brand-subtitle::before, html[data-theme="light"] .auth-shot-brand-subtitle::after { width: var(--auth-subtitle-line-width); background: #d2d7e2; } html[data-theme="light"] .auth-shot-brand-slogan { margin-top: var(--auth-slogan-gap); color: #6788ff; font-size: var(--auth-slogan-size); letter-spacing: 0.18em; text-indent: 0.18em; } html[data-theme="light"] .auth-shot-brand-desc { margin: var(--auth-desc-gap) 0 0; color: #7d8798; font-size: var(--auth-desc-size); line-height: var(--auth-desc-line-height); font-weight: 600; } html[data-theme="light"] .auth-shot-logo-mark::before, html[data-theme="light"] .auth-shot-logo-mark span, html[data-theme="light"] .auth-shot-room::before, html[data-theme="light"] .auth-shot-room::after { display: none; } html[data-theme="light"] .auth-shot-room { display: none; } html[data-theme="light"] .auth-shot-panel { padding: var(--auth-panel-top) var(--auth-panel-side) var(--auth-panel-bottom); background: #ffffff; } html[data-theme="light"] .auth-shot-language, html[data-theme="light"] .auth-shot-field, html[data-theme="light"] .auth-shot-sso-button { border-color: #e8edf6; background: #ffffff; box-shadow: 0 4px 18px rgba(194, 205, 228, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98); } html[data-theme="light"] .auth-shot-language { min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 13px; } html[data-theme="light"] .auth-shot-panel-body { max-width: none; margin: 0 0 0 var(--auth-panel-body-offset); gap: var(--auth-panel-body-gap); align-content: start; } html[data-theme="light"] .auth-shot-language, html[data-theme="light"] .auth-shot-heading p, html[data-theme="light"] .auth-shot-tab, html[data-theme="light"] .auth-shot-agreement, html[data-theme="light"] .auth-shot-divider, html[data-theme="light"] .auth-shot-form-note, html[data-theme="light"] .auth-shot-footer { color: #7f8aa1; } html[data-theme="light"] .auth-shot-heading { gap: var(--auth-heading-gap); } html[data-theme="light"] .auth-shot-heading h2, html[data-theme="light"] .auth-shot-field input, html[data-theme="light"] .auth-shot-sso-button { color: #1b2743; } html[data-theme="light"] .auth-shot-heading h2 { font-size: var(--auth-heading-size); } html[data-theme="light"] .auth-shot-heading p { font-size: var(--auth-heading-copy-size); line-height: 1.4; } html[data-theme="light"] .auth-shot-tabs { gap: var(--auth-tabs-gap); } html[data-theme="light"] .auth-shot-tab { padding-bottom: var(--auth-tab-pad); font-size: var(--auth-tab-size); } html[data-theme="light"] .auth-shot-tab.active::after { /* 2026-05-12：与基础规则保持一致——2px 跟文字宽 */ height: 2px; box-shadow: none; } html[data-theme="light"] .auth-shot-form { gap: var(--auth-form-gap); } html[data-theme="light"] .auth-shot-field { min-height: var(--auth-field-height); padding: 0 var(--auth-field-pad); border-radius: var(--auth-field-radius); } html[data-theme="light"] .auth-shot-field svg { width: var(--auth-field-icon); height: var(--auth-field-icon); } html[data-theme="light"] .auth-shot-field input::placeholder, html[data-theme="light"] .auth-shot-field svg, html[data-theme="light"] .auth-shot-field-tail, html[data-theme="light"] .auth-shot-inline-action { color: #a7b1c5; } html[data-theme="light"] .auth-shot-field input { font-size: var(--auth-field-size); } html[data-theme="light"] .auth-shot-inline-action { color: #5f82ff; font-size: var(--auth-inline-size); } html[data-theme="light"] .auth-shot-tab:hover { color: #5f82ff; } html[data-theme="light"] .auth-shot-field:hover { border-color: #dbe4f4; box-shadow: 0 12px 26px rgba(194, 205, 228, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.98); } html[data-theme="light"] .auth-shot-field.is-error { border-color: rgba(220, 38, 38, 0.36); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08), 0 12px 26px rgba(194, 205, 228, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98); } html[data-theme="light"] .auth-shot-field.is-error input::placeholder { color: #dc2626; } html[data-theme="light"] .auth-shot-field:focus-within { border-color: rgba(95, 130, 255, 0.42); box-shadow: 0 0 0 4px rgba(95, 130, 255, 0.12), 0 14px 30px rgba(194, 205, 228, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.98); } html[data-theme="light"] .auth-shot-tab:focus-visible { box-shadow: inset 0 -3px 0 rgba(95, 130, 255, 0.24); } html[data-theme="light"] .auth-shot-submit:focus-visible { box-shadow: 0 0 0 4px rgba(95, 130, 255, 0.14), 0 18px 34px rgba(95, 130, 255, 0.24); } html[data-theme="light"] .auth-shot-sso-button:focus-visible { border-color: rgba(95, 130, 255, 0.42); box-shadow: 0 0 0 4px rgba(95, 130, 255, 0.12), 0 14px 24px rgba(194, 205, 228, 0.16); } html[data-theme="light"] .auth-shot-inline-action:hover, html[data-theme="light"] .auth-shot-agreement button:hover, html[data-theme="light"] .auth-shot-footer button:hover { color: #4f75f3; } html[data-theme="light"] .auth-shot-agreement { margin-top: 2px; font-size: var(--auth-agreement-size); } html[data-theme="light"] .auth-shot-agreement-note { color: #c87412; font-size: 11px; } html[data-theme="light"] .auth-shot-agreement input { width: 22px; height: 22px; border-width: 1.5px; border-color: #d9e2f2; border-radius: 6px; } html[data-theme="light"] .auth-shot-agreement input:checked::after { left: 6px; top: 2px; } html[data-theme="light"] .auth-shot-submit { min-height: var(--auth-submit-height); border-radius: var(--auth-submit-radius); font-size: var(--auth-submit-size); box-shadow: 0 14px 30px rgba(95, 130, 255, 0.18); } html[data-theme="light"] .auth-shot-submit:hover { box-shadow: 0 18px 34px rgba(95, 130, 255, 0.24); filter: saturate(1.02); } html[data-theme="light"] .auth-shot-divider { gap: var(--auth-divider-gap); color: #8c97ac; font-size: var(--auth-divider-size); } html[data-theme="light"] .auth-shot-divider::before, html[data-theme="light"] .auth-shot-divider::after { background: #edf1f8; } html[data-theme="light"] .auth-shot-sso { margin-top: 0; gap: var(--auth-sso-gap); } html[data-theme="light"] .auth-shot-sso-button { min-height: var(--auth-sso-height); border-radius: var(--auth-sso-radius); font-size: var(--auth-sso-size); box-shadow: none; background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%); } html[data-theme="light"] .auth-shot-sso-button:hover { border-color: #dbe4f4; box-shadow: 0 14px 24px rgba(194, 205, 228, 0.16); } html[data-theme="light"] .auth-shot-tab.active, html[data-theme="light"] .auth-shot-agreement button, html[data-theme="light"] .auth-shot-footer button, html[data-theme="light"] .auth-shot-heading .spark, html[data-theme="light"] .auth-shot-sso-button svg { color: #4f75f3; } html[data-theme="light"] .auth-shot-sso-button svg { width: var(--auth-sso-icon); height: var(--auth-sso-icon); } html[data-theme="light"] .auth-shot-footer { margin-top: var(--auth-footer-top); color: #818ca2; font-size: var(--auth-footer-size); gap: var(--auth-footer-gap); } html[data-theme="light"] .auth-shot-footer button { font-size: var(--auth-footer-size); } html[data-theme="dark"] .login-card.auth-login-card.auth-shot-card { --auth-card-min-height: 610px; --auth-hero-bg-x: 57.2%; --auth-hero-bg-y: calc(100% + 46px); --auth-hero-bg-size: 123.6% auto; --auth-hero-copy-top: 38px; --auth-logo-size: 74px; --auth-title-size: 44px; --auth-subtitle-size: 13px; --auth-subtitle-line-width: 22px; --auth-slogan-gap: 12px; --auth-slogan-size: 14px; --auth-desc-gap: 6px; --auth-desc-size: 13px; --auth-desc-line-height: 1.5; --auth-panel-top: 22px; --auth-panel-side: 40px; --auth-panel-bottom: 18px; --auth-panel-top-gap: 4px; --auth-panel-body-offset: 16px; --auth-panel-body-gap: 18px; --auth-heading-gap: 6px; --auth-heading-size: 38px; --auth-heading-copy-size: 16px; --auth-tabs-gap: 32px; --auth-tab-size: 16px; --auth-tab-pad: 10px; --auth-form-gap: 14px; --auth-field-height: 60px; --auth-field-pad: 20px; --auth-field-radius: 20px; --auth-field-icon: 22px; --auth-field-size: 16px; --auth-inline-size: 15px; --auth-agreement-size: 14px; --auth-submit-height: 64px; --auth-submit-radius: 22px; --auth-submit-size: 20px; --auth-divider-gap: 20px; --auth-divider-size: 14px; --auth-sso-gap: 14px; --auth-sso-height: 56px; --auth-sso-radius: 18px; --auth-sso-size: 14px; --auth-sso-icon: 22px; --auth-footer-gap: 16px; --auth-footer-top: 22px; --auth-footer-size: 16px; border-color: rgba(52, 68, 106, 0.78); background: linear-gradient(180deg, #0b1324 0%, #0a1120 100%); box-shadow: 0 28px 84px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .auth-shot-hero { row-gap: 0; padding: 0; align-content: start; justify-items: stretch; background: linear-gradient(180deg, rgba(9, 15, 28, 0.96) 0%, rgba(9, 15, 28, 0.96) 22%, rgba(9, 15, 28, 0.62) 34%, rgba(9, 15, 28, 0.18) 48%, rgba(9, 15, 28, 0) 62%), #0b1324 url("/assets/auth-poster-dark.png") var(--auth-hero-bg-x) var(--auth-hero-bg-y) / var(--auth-hero-bg-size) no-repeat; border-right-color: rgba(45, 61, 94, 0.72); } html[data-theme="dark"] .auth-shot-hero-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 7px; padding: var(--auth-panel-top) 32px 0; text-align: center; } html[data-theme="dark"] .auth-shot-logo-mark { width: var(--auth-logo-size); height: var(--auth-logo-size); border-radius: 24px; background: transparent; box-shadow: none; } html[data-theme="dark"] .auth-shot-brand-title { color: #f4f7ff; font-size: var(--auth-title-size); letter-spacing: -0.03em; } html[data-theme="dark"] .auth-shot-brand-subtitle { gap: 10px; color: #93a0bc; font-size: var(--auth-subtitle-size); letter-spacing: 0.18em; } html[data-theme="dark"] .auth-shot-brand-subtitle::before, html[data-theme="dark"] .auth-shot-brand-subtitle::after { width: var(--auth-subtitle-line-width); background: rgba(125, 141, 182, 0.42); } html[data-theme="dark"] .auth-shot-brand-slogan { margin-top: var(--auth-slogan-gap); color: #7291ff; font-size: var(--auth-slogan-size); letter-spacing: 0.18em; text-indent: 0.18em; } html[data-theme="dark"] .auth-shot-brand-desc { margin: var(--auth-desc-gap) 0 0; color: #97a4be; font-size: var(--auth-desc-size); line-height: var(--auth-desc-line-height); font-weight: 600; } html[data-theme="dark"] .auth-shot-logo-mark::before, html[data-theme="dark"] .auth-shot-logo-mark span, html[data-theme="dark"] .auth-shot-room::before, html[data-theme="dark"] .auth-shot-room::after { display: none; } html[data-theme="dark"] .auth-shot-room { display: none; } html[data-theme="dark"] .auth-shot-panel { padding: var(--auth-panel-top) var(--auth-panel-side) var(--auth-panel-bottom); background: linear-gradient(180deg, rgba(14, 24, 42, 0.98), rgba(12, 20, 36, 0.99)); } html[data-theme="dark"] .auth-shot-language, html[data-theme="dark"] .auth-shot-field, html[data-theme="dark"] .auth-shot-sso-button { border-color: rgba(71, 87, 125, 0.56); background: #152035; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .auth-shot-language { min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 13px; } html[data-theme="dark"] .auth-shot-panel-body { max-width: none; margin: 0 0 0 var(--auth-panel-body-offset); gap: var(--auth-panel-body-gap); align-content: start; } html[data-theme="dark"] .auth-shot-language, html[data-theme="dark"] .auth-shot-heading p, html[data-theme="dark"] .auth-shot-tab, html[data-theme="dark"] .auth-shot-agreement, html[data-theme="dark"] .auth-shot-divider, html[data-theme="dark"] .auth-shot-form-note, html[data-theme="dark"] .auth-shot-footer { color: #8f9bb4; } html[data-theme="dark"] .auth-shot-heading { gap: var(--auth-heading-gap); } html[data-theme="dark"] .auth-shot-heading h2, html[data-theme="dark"] .auth-shot-field input, html[data-theme="dark"] .auth-shot-sso-button { color: #f4f7ff; } html[data-theme="dark"] .auth-shot-heading h2 { font-size: var(--auth-heading-size); } html[data-theme="dark"] .auth-shot-heading p { font-size: var(--auth-heading-copy-size); line-height: 1.4; } html[data-theme="dark"] .auth-shot-tabs { gap: var(--auth-tabs-gap); } html[data-theme="dark"] .auth-shot-tab { padding-bottom: var(--auth-tab-pad); font-size: var(--auth-tab-size); } html[data-theme="dark"] .auth-shot-tab.active::after { /* 2026-05-12：与基础规则保持一致——2px 跟文字宽 */ height: 2px; box-shadow: none; } html[data-theme="dark"] .auth-shot-form { gap: var(--auth-form-gap); } html[data-theme="dark"] .auth-shot-field { min-height: var(--auth-field-height); padding: 0 var(--auth-field-pad); border-radius: var(--auth-field-radius); } html[data-theme="dark"] .auth-shot-field svg { width: var(--auth-field-icon); height: var(--auth-field-icon); } html[data-theme="dark"] .auth-shot-field input::placeholder, html[data-theme="dark"] .auth-shot-field svg, html[data-theme="dark"] .auth-shot-field-tail, html[data-theme="dark"] .auth-shot-inline-action { color: #8897b4; } html[data-theme="dark"] .auth-shot-field input { font-size: var(--auth-field-size); } html[data-theme="dark"] .auth-shot-inline-action { color: #7291ff; font-size: var(--auth-inline-size); } html[data-theme="dark"] .auth-shot-tab:hover { color: #8ba2ff; } html[data-theme="dark"] .auth-shot-agreement { margin-top: 2px; font-size: var(--auth-agreement-size); } html[data-theme="dark"] .auth-shot-agreement-note { color: #f0ba72; font-size: 11px; } html[data-theme="dark"] .auth-shot-inline-note[data-tone="warn"] { color: #f0ba72; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.22); } html[data-theme="dark"] .auth-shot-inline-note[data-tone="info"] { color: #c1d8ff; background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.22); } html[data-theme="dark"] .auth-shot-agreement input { width: 22px; height: 22px; border-width: 1.5px; border-color: rgba(108, 126, 171, 0.62); border-radius: 6px; } html[data-theme="dark"] .auth-shot-agreement input:checked::after { left: 6px; top: 2px; } html[data-theme="dark"] .auth-shot-field:hover { border-color: rgba(103, 121, 168, 0.76); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .auth-shot-field.is-error { border-color: rgba(248, 113, 113, 0.42); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12), 0 12px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .auth-shot-field.is-error input::placeholder { color: #f87171; } html[data-theme="dark"] .auth-shot-field:focus-within { border-color: rgba(114, 145, 255, 0.56); box-shadow: 0 0 0 4px rgba(114, 145, 255, 0.14), 0 16px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .auth-shot-tab:focus-visible { box-shadow: inset 0 -3px 0 rgba(114, 145, 255, 0.24); } html[data-theme="dark"] .auth-shot-submit { min-height: var(--auth-submit-height); border-radius: var(--auth-submit-radius); font-size: var(--auth-submit-size); box-shadow: 0 14px 30px rgba(84, 112, 222, 0.32); } html[data-theme="dark"] .auth-shot-submit:hover { box-shadow: 0 18px 36px rgba(84, 112, 222, 0.38); filter: saturate(1.04); } html[data-theme="dark"] .auth-shot-submit:focus-visible { box-shadow: 0 0 0 4px rgba(114, 145, 255, 0.18), 0 18px 36px rgba(84, 112, 222, 0.38); } html[data-theme="dark"] .auth-shot-divider { gap: var(--auth-divider-gap); color: #8794ad; font-size: var(--auth-divider-size); } html[data-theme="dark"] .auth-shot-divider::before, html[data-theme="dark"] .auth-shot-divider::after { background: rgba(56, 71, 106, 0.8); } html[data-theme="dark"] .auth-shot-sso { margin-top: 0; gap: var(--auth-sso-gap); } html[data-theme="dark"] .auth-shot-sso-button { min-height: var(--auth-sso-height); border-radius: var(--auth-sso-radius); font-size: var(--auth-sso-size); box-shadow: none; background: linear-gradient(180deg, #152035 0%, #141f33 100%); } html[data-theme="dark"] .auth-shot-sso-button:hover { border-color: rgba(103, 121, 168, 0.72); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24); background: #17243b; } html[data-theme="dark"] .auth-shot-sso-button:focus-visible { border-color: rgba(114, 145, 255, 0.56); box-shadow: 0 0 0 4px rgba(114, 145, 255, 0.16), 0 14px 26px rgba(0, 0, 0, 0.24); } html[data-theme="dark"] .auth-shot-tab.active, html[data-theme="dark"] .auth-shot-agreement button, html[data-theme="dark"] .auth-shot-footer button, html[data-theme="dark"] .auth-shot-heading .spark, html[data-theme="dark"] .auth-shot-sso-button svg { color: #7291ff; } html[data-theme="dark"] .auth-shot-inline-action:hover, html[data-theme="dark"] .auth-shot-agreement button:hover, html[data-theme="dark"] .auth-shot-footer button:hover { color: #8ba2ff; } html[data-theme="dark"] .auth-shot-sso-button svg { width: var(--auth-sso-icon); height: var(--auth-sso-icon); } html[data-theme="dark"] .auth-shot-footer { margin-top: var(--auth-footer-top); color: #8f9bb4; font-size: var(--auth-footer-size); gap: var(--auth-footer-gap); } html[data-theme="dark"] .auth-shot-footer button { font-size: var(--auth-footer-size); } html[data-theme="dark"] .auth-shot-feedback-slot .mobile-note-card[data-tone="warn"] { background: rgba(84, 52, 19, 0.9) !important; border-color: rgba(245, 158, 11, 0.28) !important; } html[data-theme="dark"] .auth-shot-feedback-slot .mobile-note-card[data-tone="warn"] span, html[data-theme="dark"] .auth-shot-feedback-slot .mobile-note-card[data-tone="warn"] p { color: #f6d29a !important; } html[data-theme="dark"] .auth-shot-feedback-slot .mobile-note-card[data-tone="info"] { background: rgba(26, 50, 89, 0.94) !important; border-color: rgba(96, 165, 250, 0.24) !important; } html[data-theme="dark"] .auth-shot-feedback-slot .mobile-note-card[data-tone="info"] span, html[data-theme="dark"] .auth-shot-feedback-slot .mobile-note-card[data-tone="info"] p { color: #c1d8ff !important; } @media (max-width: 1320px) { .auth-shot-shell { grid-template-columns: minmax(390px, 41%) minmax(0, 59%); } .login-card.auth-login-card.auth-shot-card { --auth-panel-side: 28px; --auth-panel-body-offset: 28px; } .auth-shot-brand-title { font-size: 48px; } } @media (max-width: 1080px) { .login-overlay.auth-spotlight { align-items: start; align-content: start; } .login-card.auth-login-card.auth-shot-card { width: min(100%, calc(100vw - 26px)); height: auto; min-height: auto; } .auth-shot-shell { grid-template-columns: 1fr; min-height: auto; } .login-card.auth-login-card.auth-shot-card { --auth-card-min-height: auto; --auth-panel-top: 24px; --auth-panel-side: 24px; --auth-panel-bottom: 28px; --auth-panel-body-offset: 0px; --auth-panel-body-gap: 20px; --auth-hero-copy-top: 18px; --auth-title-size: 46px; --auth-slogan-size: 20px; } html[data-theme] body .auth-shot-hero { background-position: center top !important; background-size: cover !important; } html[data-theme] body .auth-shot-hero-copy { max-width: min(100%, 560px) !important; margin: 0 auto !important; padding-left: 24px !important; padding-right: 24px !important; } } @media (max-width: 720px) { .login-card.auth-login-card.auth-shot-card { --auth-title-size: 40px; --auth-field-height: 74px; --auth-submit-height: 74px; --auth-submit-size: 20px; } .auth-shot-brand-subtitle, .auth-shot-brand-desc, .auth-shot-heading p, .auth-shot-tab, .auth-shot-sso-button, .auth-shot-footer, .auth-shot-agreement { font-size: 15px; } .auth-shot-sso { grid-template-columns: 1fr; } .auth-reg-contact-row { flex-direction: column; align-items: flex-start; } .auth-reg-side-note { width: 100%; text-align: left; } } /* 2026-05-05: iPhone 等窄屏专项收紧——之前 720px 仅缩字号，hero/卡片 padding 仍按平板尺寸渲染，导致 393px 宽屏 hero 占近半屏、复选框被浏览器 tab bar 遮住。 此处针对 ≤ 480px 做激进瘦身：缩 hero padding、缩 logo/标题、压缩输入控件高度， 让登录核心元素（标题→输入框→提交按钮→协议复选框）能在一屏内看完。 */ @media (max-width: 480px) { /* 注意：必须用 html[data-theme] 限定提升特异性到 (0,4,1)， 才能覆盖 35690 行 / 34930 行 theme 块里写死的 --auth-title-size: 44px、 --auth-logo-size: 74px 等基线值。否则 480px 断点的更小数值会被无情盖掉。 */ html[data-theme="dark"] .login-card.auth-login-card.auth-shot-card, html[data-theme="light"] .login-card.auth-login-card.auth-shot-card { --auth-card-min-height: auto; --auth-logo-size: 60px; --auth-title-size: 32px; --auth-subtitle-size: 12px; --auth-slogan-size: 14px; --auth-desc-size: 12px; --auth-panel-top: 16px; --auth-panel-side: 18px; --auth-panel-bottom: 20px; --auth-panel-body-gap: 12px; --auth-hero-copy-top: 4px; --auth-heading-size: 26px; --auth-heading-copy-size: 13px; --auth-heading-gap: 4px; --auth-tabs-gap: 20px; --auth-tab-size: 14px; --auth-tab-pad: 8px; --auth-form-gap: 10px; --auth-form-secondary-gap: 10px; --auth-field-height: 48px; --auth-field-pad: 14px; --auth-field-radius: 14px; --auth-field-size: 14px; --auth-field-icon: 18px; --auth-inline-size: 12px; --auth-agreement-size: 12px; --auth-submit-height: 48px; --auth-submit-radius: 14px; --auth-submit-size: 15px; --auth-divider-gap: 8px; --auth-divider-size: 12px; --auth-sso-height: 44px; --auth-sso-radius: 12px; --auth-sso-size: 13px; --auth-sso-icon: 18px; --auth-footer-gap: 8px; --auth-footer-top: 4px; --auth-footer-size: 13px; border-radius: 20px !important; } /* hero 区域：限制最大高度，防止背景图自适应撑高占半屏 */ .auth-shot-hero { row-gap: 8px !important; padding: 14px 14px 0 !important; max-height: 280px; } .auth-shot-brand-subtitle, .auth-shot-brand-desc, .auth-shot-heading p, .auth-shot-tab, .auth-shot-sso-button, .auth-shot-footer, .auth-shot-agreement { font-size: 13px; } .login-overlay.auth-spotlight { padding: 12px; } } @media (prefers-reduced-motion: reduce) { .auth-shot-tab, .auth-shot-field, .auth-shot-inline-action, .auth-shot-agreement button, .auth-shot-submit, .auth-shot-sso-button, .auth-shot-footer button { transition: none; } .auth-shot-tab:hover, .auth-shot-field:hover, .auth-shot-submit:hover, .auth-shot-submit:active, .auth-shot-sso-button:hover { transform: none; } } html[data-theme="dark"] .empty-state, html[data-theme="dark"] .mobile-summary-card:not(.is-primary), html[data-theme="dark"] .mobile-preview-item, html[data-theme="dark"] .mobile-kv-item, html[data-theme="dark"] .mobile-note-card, html[data-theme="dark"] .mobile-detail-card, html[data-theme="dark"] .mailbox-summary-card { background: rgba(17, 30, 49, 0.96) !important; border-color: rgba(137, 155, 179, 0.18) !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); color: var(--text-main) !important; } html[data-theme="dark"] .mailbox-summary-card.is-attention { background: linear-gradient(180deg, rgba(26, 40, 61, 0.98), rgba(18, 31, 49, 0.96)) !important; } html[data-theme="dark"] .mobile-summary-card small, html[data-theme="dark"] .mobile-summary-card span, html[data-theme="dark"] .mobile-feature-head p, html[data-theme="dark"] .mobile-preview-item span, html[data-theme="dark"] .mobile-kv-item small, html[data-theme="dark"] .mobile-note-card span, html[data-theme="dark"] .mobile-note-card p, html[data-theme="dark"] .mobile-compact-copy p, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .mailbox-summary-card span, html[data-theme="dark"] .mailbox-summary-card small { color: var(--text-sub) !important; } html[data-theme="dark"] .mobile-preview-item strong, html[data-theme="dark"] .mobile-kv-item strong, html[data-theme="dark"] .mobile-kv-item span, html[data-theme="dark"] .mobile-note-card strong, html[data-theme="dark"] .mailbox-summary-card strong { color: var(--text-main) !important; } /* ===== 助理端右侧面板完整显示修复 ===== */ .app-shell:not(.mobile-shell) .assistant-panel { max-height: none !important; overflow: visible !important; } .app-shell:not(.mobile-shell) .assistant-panel .assistant-block:not(.mailbox-theme-panel) { overflow: visible !important; } .mailbox-theme-panel::before { border-radius: inherit !important; } .app-shell:not(.mobile-shell) .assistant-panel .assistant-list-item, .app-shell:not(.mobile-shell) .assistant-panel .todo-card, .app-shell:not(.mobile-shell) .assistant-panel .focus-card, .app-shell:not(.mobile-shell) .assistant-panel .risk-card, .app-shell:not(.mobile-shell) .assistant-panel .decision-card, .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-card { min-height: auto !important; overflow: visible !important; } .app-shell:not(.mobile-shell) .assistant-panel .assistant-list-item strong, .app-shell:not(.mobile-shell) .assistant-panel .assistant-list-item span, .app-shell:not(.mobile-shell) .assistant-panel .todo-card strong, .app-shell:not(.mobile-shell) .assistant-panel .todo-card span, .app-shell:not(.mobile-shell) .assistant-panel .focus-card strong, .app-shell:not(.mobile-shell) .assistant-panel .focus-card span, .app-shell:not(.mobile-shell) .assistant-panel .risk-card strong, .app-shell:not(.mobile-shell) .assistant-panel .risk-card span, .app-shell:not(.mobile-shell) .assistant-panel .decision-card strong, .app-shell:not(.mobile-shell) .assistant-panel .decision-card span, .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-card strong, .app-shell:not(.mobile-shell) .assistant-panel .mailbox-preview-card span { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; -webkit-box-orient: initial !important; overflow: visible !important; text-overflow: unset !important; white-space: normal !important; word-break: break-word !important; max-width: none !important; max-height: none !important; } .app-shell:not(.mobile-shell) .stat-card-title, .app-shell:not(.mobile-shell) .stat-card-note, .app-shell:not(.mobile-shell) .stat-card-subnote { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; -webkit-box-orient: initial !important; overflow: visible !important; text-overflow: unset !important; white-space: normal !important; word-break: break-word !important; max-width: none !important; max-height: none !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] { grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--white-tinted, #f9fafb); } .app-shell:not(.mobile-shell)[data-role="assistant"] .main-shell { background: radial-gradient(circle at top right, rgba(108, 132, 255, 0.1), transparent 20%), linear-gradient(180deg, #ffffff 0%, #fbfcff 100%); } .app-shell:not(.mobile-shell)[data-role="assistant"] .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand { padding: 6px 10px 36px; border-bottom: 1px solid rgba(231, 236, 246, 0.92); } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand { padding: 6px 10px 36px; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand { padding: 6px 10px 36px; border-bottom: 1px solid rgba(231, 236, 246, 0.92); } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand { padding: 6px 10px 36px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-top { min-height: 0; align-items: center; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand .app-brand-lockup-image { width: auto; height: 24px; max-width: 100%; } .app-shell:not(.mobile-shell)[data-role="assistant"] .brand-mark { width: 65px; height: 65px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .brand-mark-image { width: 56px; height: 56px; margin: auto; transform: none; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-title { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -0.06em; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-tagline { color: #6d86ff; font-size: 13px; letter-spacing: 0; font-weight: 700; line-height: 1.3; white-space: normal; } .app-shell:not(.mobile-shell) .app-shell:not(.mobile-shell) .nav-brand { padding: 2px 10px 40px; } .app-shell:not(.mobile-shell) .nav-brand-top { margin-bottom: 0; min-height: 0; align-items: center; } .app-shell:not(.mobile-shell) .nav-brand-lockup { gap: 12px; } .app-shell:not(.mobile-shell) .nav-brand-row { align-items: center; gap: 18px; } .app-shell:not(.mobile-shell) .brand-mark { width: 56px; height: 56px; margin-top: 0; } .app-shell:not(.mobile-shell) .brand-mark-image { width: 56px; height: 56px; margin: auto; transform: translateY(-2px); } .app-shell:not(.mobile-shell) .nav-brand-copy { display: flex; align-items: center; min-height: 56px; gap: 0; padding-top: 0; } .app-shell:not(.mobile-shell) .nav-brand-title { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -0.06em; } .app-shell:not(.mobile-shell) .nav-brand-tagline { margin-top: 2px; font-size: 13px; letter-spacing: 0; line-height: 1.3; white-space: normal; text-align: center; justify-self: center; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-group { gap: 6px; padding-top: 0; } .side-nav .nav-group { flex-direction: column; gap: 6px; } .side-nav .nav-group { flex-direction: column; gap: 6px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item { min-height: 48px; padding: 0 14px; border-radius: 16px; color: #2f3a53; font-size: 15px; font-weight: 600; box-shadow: none; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item-main { gap: 6px; font-weight: 600; } .side-nav .nav-item-main { flex-direction: row; justify-content: flex-start; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-icon { width: 20px; height: 20px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item:hover { background: rgba(107, 132, 255, 0.08); } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item.active { background: linear-gradient(180deg, #3a458d 0%, #4455c3 100%); box-shadow: 0 18px 30px rgba(95, 126, 239, 0.2); color: #ffffff; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item.active .nav-icon, .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item.active .nav-label { color: #ffffff; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item.active .sidebar-wechat-icon-img { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0.28px 0 0 currentColor) drop-shadow(-0.28px 0 0 currentColor) drop-shadow(0 0.28px 0 currentColor) drop-shadow(0 -0.28px 0 currentColor); } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item .nav-micro-heart { min-width: 28px; height: 22px; padding: 0 7px 0 6px; background: rgba(237, 65, 104, 0.14); border-color: rgba(237, 65, 104, 0.2); color: #db3c69; box-shadow: 0 10px 20px rgba(237, 65, 104, 0.12); } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item.active .nav-micro-heart { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.18); color: #ffffff; box-shadow: none; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-footer { padding: 14px 8px 0; gap: 10px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-settings-trigger { min-height: 40px; padding: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-home-reference-header { padding: 18px 28px 24px; border-radius: 0; border-bottom: 1px solid rgba(233, 238, 246, 0.96); background: rgba(255, 255, 255, 0.96); box-shadow: none; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-topline { width: calc(100% - 48px); margin-inline: auto; justify-content: space-between; align-items: center; gap: 24px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-lead { display: flex; align-items: center; gap: 18px; min-width: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-icon { width: 65px; height: 65px; flex: 0 0 auto; object-fit: contain; object-position: center; } .app-shell:not(.mobile-shell) .assistant-home-reference-icon-symbol { width: 65px; height: 65px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: #4f6fff; } .app-shell:not(.mobile-shell) .assistant-home-reference-icon-symbol svg { width: 100%; height: 100%; display: block; } .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-icon { width: 65px; height: 65px; flex: 0 0 auto; object-fit: contain; object-position: center; } .assistant-homepage-reference-icon { transform: translateY(-2px); } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack small { margin-bottom: 8px; color: #6f84ff; font-size: 12px; letter-spacing: 0; font-weight: 700; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack h3, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack h3 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -0.06em; font-weight: 800; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack p, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack p { margin-top: 10px; max-width: none; color: #4d5b74; font-size: 13px; line-height: 1.5; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-controls { gap: 14px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-row, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action-row { gap: 12px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-pill, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(227, 233, 244, 0.96); box-shadow: 0 12px 26px rgba(194, 205, 228, 0.08); font-size: 15px; font-weight: 700; color: #2f3a53; background: #ffffff; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip { gap: 10px; color: #5e6880; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-pill, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; justify-content: center; gap: 6px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action-icon { width: 16px; height: 16px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: currentColor; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action-icon .wechat-action-icon-img { filter: brightness(0) saturate(100%); } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-icon-symbol:not(.assistant-home-reference-icon-symbol) { width: 48px; height: 48px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: currentColor; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-pill[data-value="-1"]::before { content: "‹"; font-size: 18px; line-height: 1; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-pill[data-value="1"]::after { content: "›"; font-size: 18px; line-height: 1; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action.primary, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-action.primary { min-width: 180px; color: #ffffff; background: var(--assistant-send-gradient); border-color: transparent; box-shadow: 0 18px 32px rgba(95, 126, 239, 0.22); } /* v189：老板端复用了 .assistant-home-reference-action 类（页头搜索按钮）， 原规则只对 [data-role="assistant"] 生效导致老板端按钮塌缩为 74px。 同步加上 [data-role="boss"] 让两端 min-width 一致。 */ .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-action { min-width: 180px; justify-content: center; } .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-route-reference-header:not(.assistant-home-reference-header) { padding: 18px 28px 24px; border-radius: 0; border-bottom: 1px solid rgba(233, 238, 246, 0.96); background: rgba(255, 255, 255, 0.96); box-shadow: none; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-topline:not(.assistant-home-reference-topline) { width: calc(100% - 48px); margin-inline: auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-lead:not(.assistant-home-reference-lead) { display: flex; align-items: center; gap: 18px; min-width: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-icon:not(.assistant-home-reference-icon) { width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain; object-position: center; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) { min-width: 0; display: grid; gap: 6px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) small { color: #6f84ff; font-size: 12px; font-weight: 700; line-height: 1.1; letter-spacing: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) h3 { margin: 0; color: #0f172a; font-size: clamp(34px, 2.8vw, 44px); line-height: 0.98; letter-spacing: -0.06em; font-weight: 800; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) p { margin: 0; color: #4d5b74; font-size: 14px; line-height: 1.5; font-weight: 600; max-width: 36ch; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-date-chip:not(.assistant-home-reference-date-chip) { min-height: 52px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; color: #475569; background: #ffffff; border: 1px solid rgba(227, 233, 244, 0.96); box-shadow: 0 12px 26px rgba(194, 205, 228, 0.08); font-size: 14px; font-weight: 700; white-space: nowrap; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-date-chip:not(.assistant-home-reference-date-chip) svg { width: 18px; height: 18px; color: #8b97ae; flex: 0 0 auto; } .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-inbox-reference-header { padding: 18px 28px 24px; border-radius: 0; border-bottom: 1px solid rgba(233, 238, 246, 0.96); background: rgba(255, 255, 255, 0.96); box-shadow: none; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-topline { width: calc(100% - 48px); margin-inline: auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-lead { display: flex; align-items: center; gap: 18px; min-width: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-icon { width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain; object-position: center; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack { min-width: 0; display: grid; gap: 6px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack small { color: #6f84ff; font-size: 12px; font-weight: 700; line-height: 1.1; letter-spacing: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack h3 { margin: 0; color: #0f172a; font-size: clamp(34px, 2.8vw, 44px); line-height: 0.98; letter-spacing: -0.06em; font-weight: 800; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack p { margin: 0; color: #4d5b74; font-size: 14px; line-height: 1.5; font-weight: 600; max-width: 36ch; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-date-chip { min-height: 52px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; color: #475569; background: #ffffff; border: 1px solid rgba(227, 233, 244, 0.96); box-shadow: 0 12px 26px rgba(194, 205, 228, 0.08); font-size: 14px; font-weight: 700; white-space: nowrap; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-date-chip svg { width: 18px; height: 18px; color: #8b97ae; flex: 0 0 auto; } .app-shell:not(.mobile-shell) .assistant-home-reference-topline, .app-shell:not(.mobile-shell) .assistant-route-reference-topline:not(.assistant-home-reference-topline), .app-shell:not(.mobile-shell) .assistant-inbox-reference-topline, .app-shell:not(.mobile-shell) .boss-pending-reference-topline { width: calc(100% - 48px); margin-inline: auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .app-shell:not(.mobile-shell) .assistant-home-reference-lead, .app-shell:not(.mobile-shell) .assistant-route-reference-lead:not(.assistant-home-reference-lead), .app-shell:not(.mobile-shell) .assistant-inbox-reference-lead, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-lead { display: flex; align-items: center; gap: 18px; min-width: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-icon:not(.assistant-home-reference-icon), .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-icon, .app-shell:not(.mobile-shell) .assistant-route-reference-icon-symbol, .app-shell:not(.mobile-shell) .assistant-home-reference-icon-symbol, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-icon, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-icon { width: 65px; height: 65px; flex: 0 0 auto; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack), .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack { min-width: 0; display: grid; gap: 6px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) small, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack small, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack small, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack small { color: #6f84ff; font-size: 12px; font-weight: 700; line-height: 1.1; letter-spacing: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) h3, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack h3, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack h3, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack h3 { margin: 0; color: #0f172a; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -0.06em; font-weight: 800; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) p, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack p, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack p, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack p { margin: 10px 0 0; max-width: none; color: #4d5b74; font-size: 13px; line-height: 1.5; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-controls, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-controls, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-controls { gap: 14px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-row, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action-row, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-row, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action-row { display: inline-flex; align-items: center; gap: 12px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-date-chip:not(.assistant-home-reference-date-chip), .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-date-chip, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-chip { min-height: 44px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; color: #5e6880; background: #ffffff; border: 1px solid rgba(227, 233, 244, 0.96); box-shadow: 0 12px 26px rgba(194, 205, 228, 0.08); font-size: 15px; font-weight: 700; white-space: nowrap; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip svg, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-date-chip:not(.assistant-home-reference-date-chip) svg, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-date-chip svg, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-chip svg { width: 16px; height: 16px; color: #8b97ae; flex: 0 0 auto; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-count-chip { min-height: 40px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; white-space: nowrap; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-count-chip { color: #2f3a53; background: #ffffff; border: 1px solid rgba(227, 233, 244, 0.96); box-shadow: 0 12px 26px rgba(194, 205, 228, 0.08); } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action.primary, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action.primary { min-width: 180px; color: #ffffff; background: var(--assistant-send-gradient); border-color: transparent; box-shadow: 0 18px 32px rgba(95, 126, 239, 0.22); } html[data-theme="dark"] .inbox-reference-message-input { color: var(--text-main); } html[data-theme="dark"] .inbox-reference-message-input::placeholder { color: rgba(158, 175, 198, 0.72); } html[data-theme="dark"] .inbox-reference-empty-stage { border: 1px solid rgba(137, 155, 179, 0.12); } html[data-theme="dark"] .inbox-reference-empty-preview { border-radius: 26px; border-color: rgba(148, 163, 184, 0.12); box-shadow: 0 26px 52px rgba(4, 12, 24, 0.34); opacity: 0.96; } html[data-theme="dark"] .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input, html[data-theme="dark"] .app-shell:not(.mobile-shell) [data-role="boss-command-input"] { background: rgba(17, 30, 49, 0.96); color: var(--text-main); } html[data-theme="dark"] .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-compose input::placeholder, html[data-theme="dark"] .app-shell:not(.mobile-shell) [data-role="boss-command-input"]::placeholder { color: rgba(158, 175, 198, 0.72); } .app-shell:not(.mobile-shell)[data-role="assistant"] .page-body, .app-shell:not(.mobile-shell)[data-role="boss"] .page-body:has(> .stats-row + .layout-boss) { padding: 18px 26px 32px; gap: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 255, 0.94)); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] { background: #08111d; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .main-shell { background: radial-gradient(circle at top right, rgba(101, 133, 255, 0.12), transparent 22%), linear-gradient(180deg, rgba(8, 13, 24, 0.98) 0%, rgba(10, 16, 29, 0.94) 100%); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .side-nav { background: linear-gradient(180deg, rgba(10, 17, 30, 0.98) 0%, rgba(12, 20, 35, 0.96) 100%); border-right-color: rgba(148, 163, 184, 0.12); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand { border-bottom-color: rgba(148, 163, 184, 0.12); } html[data-theme="dark"] .nav-brand-tagline { color: #d7b27d !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-tagline { color: #d7b27d; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item { color: #d7e2f2; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-item:hover { background: rgba(148, 163, 184, 0.08); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-home-reference-header, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-route-reference-header:not(.assistant-home-reference-header), html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-inbox-reference-header, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-header.boss-pending-reference-header { background: rgba(9, 16, 28, 0.96); border-bottom-color: rgba(148, 163, 184, 0.14); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-icon-symbol, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-icon-symbol:not(.assistant-home-reference-icon-symbol) { color: #9bb7ff; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack small, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) small, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack small, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack small { color: #d7b27d; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack h3, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) h3, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack h3, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack h3 { color: var(--text-main); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack p, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) p, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-stack p, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack p { color: var(--text-sub); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-pill, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-date-chip:not(.assistant-home-reference-date-chip), html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-date-chip, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-chip, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-pill, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-count-chip { background: rgba(15, 23, 42, 0.72); border-color: rgba(148, 163, 184, 0.14); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); color: #d7e2f2; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-date-chip:not(.assistant-home-reference-date-chip), html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-date-chip, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-chip { color: var(--text-sub); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-chip svg, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-date-chip:not(.assistant-home-reference-date-chip) svg, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-inbox-reference-date-chip svg, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-chip svg { color: #8ea2bf; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action.primary, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action.primary { background: var(--assistant-send-gradient); border-color: transparent; color: #ffffff; box-shadow: 0 18px 32px rgba(95, 126, 239, 0.24); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action-icon .wechat-action-icon-img { filter: brightness(0) invert(1) drop-shadow(0.24px 0 0 currentColor) drop-shadow(-0.24px 0 0 currentColor) drop-shadow(0 0.24px 0 currentColor) drop-shadow(0 -0.24px 0 currentColor); } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .page-body, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-body, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-body:has(> .stats-row + .layout-boss) { background: linear-gradient(180deg, rgba(8, 13, 24, 0.96), rgba(12, 19, 34, 0.92)) !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-row { gap: 8px; grid-template-columns: 2.5fr repeat(4, minmax(0, 1fr)); align-items: stretch; width: calc(100% - 24px); margin-inline: auto; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card { min-height: 90px; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(112, 138, 255, 0.18); background: linear-gradient(180deg, #3a458d 0%, #4455c3 100%); box-shadow: 0 12px 24px rgba(86, 116, 235, 0.12); gap: 4px; justify-content: space-between; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card::before { background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-featured { grid-column: auto; background: linear-gradient(180deg, #3a458d 0%, #4455c3 100%); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-conflict::before { background: radial-gradient(circle at top right, rgba(255, 167, 196, 0.28), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-risk::before { background: radial-gradient(circle at top right, rgba(255, 211, 123, 0.28), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-todo::before { background: radial-gradient(circle at top right, rgba(129, 233, 191, 0.24), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-heading { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-head-featured { justify-content: flex-start; gap: 10px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-glyph { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: flex-start; line-height: 0; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.96); flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-glyph svg { width: 18px; height: 18px; display: block; overflow: visible; transform: translateY(0.5px); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-today .stat-card-glyph { color: #4f83ff; background: rgba(255, 255, 255, 0.22); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-conflict .stat-card-glyph { color: #ff5a72; background: rgba(255, 236, 240, 0.22); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-risk .stat-card-glyph { color: #ffb11a; background: rgba(255, 245, 214, 0.22); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-todo .stat-card-glyph { color: #39c97c; background: rgba(225, 255, 238, 0.22); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card small, .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-label { color: rgba(255, 255, 255, 0.84); font-size: 12px; line-height: 1.2; font-weight: 700; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-featured .stat-card-label { color: #111827; font-size: 22px; font-weight: 800; line-height: 1.02; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-prompt { min-height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.88); font-size: 10px; font-weight: 700; white-space: nowrap; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-prompt-danger { min-height: 28px; padding: 0 12px; background: rgba(254, 226, 226, 0.95); border-color: rgba(248, 113, 113, 0.28); color: #dc2626; font-size: 13px; font-weight: 800; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-spark, .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-ring { width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); opacity: 0.85; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-value { font-size: clamp(38px, 2.15vw, 46px); line-height: 0.92; letter-spacing: -0.07em; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-title-row { gap: 6px; align-items: flex-start; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-priority { min-width: 52px; min-height: 34px; padding-inline: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 22px; font-weight: 800; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-priority.priority-p1 { background: rgba(249, 115, 22, 0.95); border-color: transparent; color: #ffffff; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-priority.priority-p2 { background: rgba(139, 92, 246, 0.95); border-color: transparent; color: #ffffff; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-priority.priority-p3, .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-priority.priority-p4, .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-priority.priority-p5 { background: #eef2f7; border-color: transparent; color: #0f172a; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-title { flex: 1 1 auto; min-width: 0; font-size: clamp(20px, 1.34vw, 27px); line-height: 1.06; letter-spacing: -0.05em; max-width: none; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-note { color: rgba(255, 255, 255, 0.92); font-size: 12px; line-height: 1.32; max-width: none; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-featured .stat-card-note { font-size: 12px; line-height: 1.3; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-subnote { color: rgba(240, 244, 255, 0.82); font-size: 12px; line-height: 1.28; opacity: 1; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-featured .stat-card-subnote { margin-top: 6px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-featured-layout { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 4px; align-items: center; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-featured-copy { display: grid; gap: 6px; align-content: start; min-width: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-inline-alert { width: fit-content; min-height: 28px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(254, 240, 138, 0.2); border: 1px solid rgba(250, 204, 21, 0.36); color: #facc15; font-size: 15px; font-weight: 800; white-space: nowrap; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-inline-alert.is-danger { background: rgba(254, 226, 226, 0.2); border-color: rgba(248, 113, 113, 0.36); color: #f87171; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-today .stat-card-note, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-today .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-conflict .stat-card-note, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-conflict .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-risk .stat-card-note, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-risk .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-todo .stat-card-note { -webkit-line-clamp: 3 !important; line-clamp: 3 !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-visual { position: relative; min-height: 70px; display: flex; align-items: center; justify-content: center; padding-inline: 4px; padding-bottom: 0; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-visual-illustration { width: 82px; height: auto; display: block; overflow: visible; object-fit: contain; object-position: center; margin-inline: auto; filter: drop-shadow(0 10px 18px rgba(70, 101, 230, 0.12)); transform: translateX(0) translateY(2px) rotate(6deg); transform-origin: center center; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-visual-calendar { position: relative; width: 64px; height: 74px; border-radius: 14px; padding: 28px 8px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(230, 237, 255, 0.9)); box-shadow: 0 10px 18px rgba(38, 68, 190, 0.14); transform: perspective(540px) rotateY(-16deg) rotateX(7deg); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-visual-calendar::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 10px; border-radius: 999px; background: rgba(98, 127, 241, 0.16); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-visual-calendar::after { content: ""; position: absolute; left: 9px; right: 9px; top: 9px; height: 6px; border-bottom: 2px solid rgba(98, 127, 241, 0.18); border-radius: 10px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-visual-calendar span { border-radius: 9px; background: rgba(98, 127, 241, 0.12); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-visual-check { position: absolute; right: 4px; bottom: 10px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #88a3ff 0%, #6080f5 100%); box-shadow: 0 8px 12px rgba(54, 86, 210, 0.18); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-visual-check::before { content: ""; position: absolute; inset: 0; width: 7px; height: 4px; margin: auto; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: translateY(-1px) rotate(-45deg); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-progress { height: 6px; margin-top: 2px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-today .stat-card-note, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-today .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-conflict .stat-card-note, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-conflict .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-risk .stat-card-note, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-risk .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-todo .stat-card-note { display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-today .stat-card-note, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-today .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-conflict .stat-card-note, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-conflict .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-risk .stat-card-note, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-risk .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-todo .stat-card-note { -webkit-line-clamp: 2 !important; line-clamp: 2 !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stat-card-progress>span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a8f0ca 0%, #5bcb95 100%); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-row { gap: 8px; grid-template-columns: 2.5fr repeat(4, minmax(0, 1fr)); align-items: stretch; width: calc(100% - 24px); margin-inline: auto; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card { min-height: 90px; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(112, 138, 255, 0.18); background: linear-gradient(180deg, #3a458d 0%, #4455c3 100%); box-shadow: 0 12px 24px rgba(86, 116, 235, 0.12); gap: 4px; justify-content: space-between; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card::before { background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-featured { grid-column: auto; background: linear-gradient(180deg, #3a458d 0%, #4455c3 100%); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-conflict::before { background: radial-gradient(circle at top right, rgba(255, 167, 196, 0.28), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-risk::before { background: radial-gradient(circle at top right, rgba(255, 211, 123, 0.28), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-todo::before { background: radial-gradient(circle at top right, rgba(129, 233, 191, 0.24), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%); } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-heading { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-head-featured { justify-content: flex-start; gap: 10px; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-glyph { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.96); flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-glyph svg { width: 18px; height: 18px; display: block; overflow: visible; transform: translateY(0.5px); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-today .stat-card-glyph { color: #4f83ff; background: rgba(255, 255, 255, 0.22); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-conflict .stat-card-glyph { color: #ff5a72; background: rgba(255, 236, 240, 0.22); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-risk .stat-card-glyph { color: #ffb11a; background: rgba(255, 245, 214, 0.22); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-todo .stat-card-glyph { color: #39c97c; background: rgba(225, 255, 238, 0.22); } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card small, .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-label { color: rgba(255, 255, 255, 0.84); font-size: 12px; line-height: 1.2; font-weight: 700; } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-featured .stat-card-label { color: #111827; font-size: 22px; font-weight: 800; line-height: 1.02; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-prompt { min-height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.88); font-size: 10px; font-weight: 700; white-space: nowrap; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-prompt-danger { min-height: 28px; padding: 0 12px; background: rgba(254, 226, 226, 0.95); border-color: rgba(248, 113, 113, 0.28); color: #dc2626; font-size: 13px; font-weight: 800; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-spark, .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-ring { width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); opacity: 0.85; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-value { font-size: clamp(38px, 2.15vw, 46px); line-height: 0.92; letter-spacing: -0.07em; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-title-row { gap: 6px; align-items: flex-start; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-priority { min-width: 52px; min-height: 34px; padding-inline: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 22px; font-weight: 800; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-priority.priority-p1 { background: rgba(249, 115, 22, 0.95); border-color: transparent; color: #ffffff; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-priority.priority-p2 { background: rgba(139, 92, 246, 0.95); border-color: transparent; color: #ffffff; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-priority.priority-p3, .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-priority.priority-p4, .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-priority.priority-p5 { background: #eef2f7; border-color: transparent; color: #0f172a; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-title { flex: 1 1 auto; min-width: 0; font-size: clamp(20px, 1.34vw, 27px); line-height: 1.06; letter-spacing: -0.05em; max-width: none; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-note { color: rgba(255, 255, 255, 0.92); font-size: 12px; line-height: 1.32; max-width: none; } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-featured .stat-card-note { font-size: 12px; line-height: 1.3; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-subnote { color: rgba(240, 244, 255, 0.82); font-size: 12px; line-height: 1.28; opacity: 1; } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-featured .stat-card-subnote { margin-top: 6px; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-featured-layout { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 4px; align-items: center; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-featured-copy { display: grid; gap: 6px; align-content: start; min-width: 0; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-inline-alert { width: fit-content; min-height: 28px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(254, 240, 138, 0.2); border: 1px solid rgba(250, 204, 21, 0.36); color: #facc15; font-size: 15px; font-weight: 800; white-space: nowrap; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-inline-alert.is-danger { background: rgba(254, 226, 226, 0.2); border-color: rgba(248, 113, 113, 0.36); color: #f87171; } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-today .stat-card-note, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-today .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-conflict .stat-card-note, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-conflict .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-risk .stat-card-note, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-risk .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-todo .stat-card-note { -webkit-line-clamp: 3 !important; line-clamp: 3 !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-visual { position: relative; min-height: 70px; display: flex; align-items: center; justify-content: center; padding-inline: 4px; padding-bottom: 0; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-visual-illustration { width: 82px; height: auto; display: block; overflow: visible; object-fit: contain; object-position: center; margin-inline: auto; filter: drop-shadow(0 10px 18px rgba(70, 101, 230, 0.12)); transform: translateX(0) translateY(2px) rotate(6deg); transform-origin: center center; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-visual-calendar { position: relative; width: 64px; height: 74px; border-radius: 14px; padding: 28px 8px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(230, 237, 255, 0.9)); box-shadow: 0 10px 18px rgba(38, 68, 190, 0.14); transform: perspective(540px) rotateY(-16deg) rotateX(7deg); } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-visual-calendar::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 10px; border-radius: 999px; background: rgba(98, 127, 241, 0.16); } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-visual-calendar::after { content: ""; position: absolute; left: 9px; right: 9px; top: 9px; height: 6px; border-bottom: 2px solid rgba(98, 127, 241, 0.18); border-radius: 10px; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-visual-calendar span { border-radius: 9px; background: rgba(98, 127, 241, 0.12); } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-visual-check { position: absolute; right: 4px; bottom: 10px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #88a3ff 0%, #6080f5 100%); box-shadow: 0 8px 12px rgba(54, 86, 210, 0.18); } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-visual-check::before { content: ""; position: absolute; inset: 0; width: 7px; height: 4px; margin: auto; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: translateY(-1px) rotate(-45deg); } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-progress { height: 6px; margin-top: 2px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-today .stat-card-note, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-today .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-conflict .stat-card-note, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-conflict .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-risk .stat-card-note, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-risk .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-todo .stat-card-note { display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-today .stat-card-note, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-today .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-conflict .stat-card-note, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-conflict .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-risk .stat-card-note, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-risk .stat-card-subnote, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-todo .stat-card-note { -webkit-line-clamp: 2 !important; line-clamp: 2 !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .stat-card-progress>span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a8f0ca 0%, #5bcb95 100%); } .app-shell:not(.mobile-shell)[data-role="assistant"] .layout-boss { gap: 18px; grid-template-columns: minmax(0, 1fr) 300px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .main-stack { gap: 18px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .panel, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-block { border-radius: 28px; border: 1px solid rgba(231, 236, 246, 0.92); background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%); box-shadow: 0 18px 34px rgba(31, 52, 104, 0.08); } .app-shell:not(.mobile-shell)[data-role="assistant"] .panel-header, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-block { padding-inline: 20px; } .app-shell:not(.mobile-shell)[data-role="assistant"] .panel-body { padding: 18px 20px 22px; } @media (max-width: 1560px) { .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-featured { grid-column: span 4; } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .app-shell:not(.mobile-shell)[data-role="boss"] .stats-featured { grid-column: span 4; } } .assistant-message-list { gap: 14px; } .assistant-message-row { display: flex; align-items: flex-start; gap: 12px; } .assistant-message-row.user { justify-content: flex-end; } .assistant-message-row.ai.is-typing .assistant-chat-avatar.ai { animation: assistantAvatarBreathe 1.8s var(--ease-in-out) infinite; } .assistant-message-row.ai.is-typing .assistant-chat-avatar.ai img { animation: assistantAvatarGlow 1.8s var(--ease-in-out) infinite; } .assistant-message-row.user .assistant-chat-avatar { order: 2; } .assistant-message-row.user .assistant-message { order: 1; } .assistant-chat-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14); } .assistant-chat-avatar.ai { border: 1px solid rgba(96, 165, 250, 0.2); background: linear-gradient(180deg, #f8fbff 0%, #dbeafe 100%); } .assistant-chat-avatar.ai img { width: 100%; height: 100%; display: block; object-fit: cover; filter: brightness(0) saturate(100%) invert(35%) sepia(99%) saturate(1457%) hue-rotate(203deg) brightness(99%) contrast(93%); } .assistant-chat-avatar.user { color: #ffffff; border: 1px solid rgba(37, 99, 235, 0.08); background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); font-size: 17px; font-weight: 800; letter-spacing: 0.02em; } .assistant-message { width: fit-content; max-width: min(100%, calc(100% - 54px)); margin: 0; padding: 14px 16px; border-radius: 20px; line-height: 1.65; font-size: 14px; border: 1px solid transparent; } .assistant-message.ai { background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%); border-color: rgba(147, 197, 253, 0.26); color: var(--text-main); border-bottom-left-radius: 10px; } .assistant-message.user { background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(96, 165, 250, 0.2) 100%); border-color: rgba(96, 165, 250, 0.24); color: var(--text-main); border-bottom-right-radius: 10px; } .assistant-message.receipt { width: min(100%, calc(100% - 54px)); max-width: min(100%, calc(100% - 54px)); padding: 0; border: 0; background: transparent; } .assistant-chat-panel .assistant-message-row .assistant-message { margin: 0; } .assistant-message.ai.is-typing { border-color: rgba(96, 165, 250, 0.34); box-shadow: 0 10px 24px rgba(96, 165, 250, 0.12); } .assistant-message.ai.is-thinking { border-color: rgba(96, 165, 250, 0.28); box-shadow: 0 10px 24px rgba(96, 165, 250, 0.08); } .assistant-thinking-label { display: inline-flex; align-items: center; gap: 6px; color: #2563eb; font-weight: 700; letter-spacing: 0.01em; } .assistant-thinking-dots { display: inline-flex; align-items: center; gap: 5px; } .assistant-thinking-dots span { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.24; animation: assistantThinkingDot 1.1s ease-in-out infinite; } .assistant-thinking-dots span:nth-child(2) { animation-delay: 0.16s; } .assistant-thinking-dots span:nth-child(3) { animation-delay: 0.32s; } .assistant-message-caret { width: 8px; height: 8px; margin-left: 6px; margin-bottom: 2px; border-radius: 999px; display: inline-block; vertical-align: middle; background: #3b82f6; animation: assistantCaretBlink 0.96s ease-in-out infinite; } .app-shell.mobile-shell .assistant-chat-panel .assistant-message, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message { margin: 0; padding: 14px 16px; } .app-shell.mobile-shell .assistant-chat-panel .assistant-message.user, .app-shell.mobile-shell .assistant-chat-panel .assistant-message.ai, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message.user, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message.ai { margin: 0; } .assistant-message-row.receipt { align-items: stretch; } .assistant-message-row.receipt .assistant-message.receipt, .app-shell.mobile-shell .assistant-chat-panel .assistant-message.receipt, .app-shell:not(.mobile-shell) .assistant-chat-panel .assistant-message.receipt { padding: 0; } .assistant-system-receipt-card { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(191, 219, 254, 0.82); background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.98)); } .assistant-system-receipt-card.success { border-color: rgba(134, 239, 172, 0.9); background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.98)); } .assistant-system-receipt-card.info { border-color: rgba(191, 219, 254, 0.88); } .assistant-system-receipt-card.progress { border-color: rgba(125, 211, 252, 0.86); background: linear-gradient(180deg, rgba(240, 249, 255, 0.98), rgba(224, 242, 254, 0.98)); } .assistant-system-receipt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .assistant-system-receipt-title { display: grid; gap: 4px; } .assistant-system-receipt-title strong { font-size: 14px; color: var(--text-main); } .assistant-system-receipt-title span, .assistant-system-receipt-body, .assistant-system-receipt-meta { color: var(--text-sub); font-size: 12px; line-height: 1.6; } .assistant-conversation-status { display: grid; gap: 10px; } .assistant-conversation-goal { padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(191, 219, 254, 0.9); background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 250, 252, 0.98)); } .assistant-conversation-goal strong { display: block; margin-bottom: 4px; font-size: 13px; color: #1d4ed8; } .assistant-conversation-goal span { color: var(--text-sub); font-size: 13px; line-height: 1.6; } .assistant-conversation-goal small { display: block; margin-top: 8px; color: var(--text-sub); font-size: 12px; line-height: 1.6; } .assistant-conversation-badges { display: flex; gap: 10px; flex-wrap: wrap; } .assistant-context-badge { min-height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; border: 1px solid rgba(191, 219, 254, 0.9); background: rgba(239, 246, 255, 0.92); color: #1d4ed8; font-size: 12px; font-weight: 700; } .assistant-recommend-panel { display: grid; gap: 12px; padding: 14px 16px; border-radius: 22px; border: 1px solid rgba(191, 219, 254, 0.82); background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.98)); } .assistant-recommend-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .assistant-recommend-panel-header strong { font-size: 14px; color: var(--text-main); } .assistant-recommend-panel-header span { color: var(--text-sub); font-size: 12px; line-height: 1.5; } .assistant-recommend-list { display: grid; gap: 10px; } .assistant-recommend-card { display: grid; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid rgba(191, 219, 254, 0.76); background: rgba(255, 255, 255, 0.94); } .assistant-recommend-card.confirm { border-color: rgba(96, 165, 250, 0.7); box-shadow: 0 10px 24px rgba(96, 165, 250, 0.14); } .assistant-recommend-card.executing { border-color: rgba(125, 211, 252, 0.8); background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(224, 242, 254, 0.96)); } .assistant-recommend-card.success { border-color: rgba(134, 239, 172, 0.92); background: linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(220, 252, 231, 0.96)); } .assistant-recommend-card.failed { border-color: rgba(252, 165, 165, 0.92); background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(254, 226, 226, 0.96)); } .assistant-recommend-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .assistant-recommend-head strong { display: block; font-size: 14px; color: var(--text-main); margin-bottom: 4px; } .assistant-recommend-head span, .assistant-recommend-meta, .assistant-recommend-note { color: var(--text-sub); font-size: 12px; line-height: 1.6; } .assistant-recommend-state { min-height: 28px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; background: rgba(219, 234, 254, 0.86); color: #1d4ed8; font-size: 11px; font-weight: 800; white-space: nowrap; } .assistant-recommend-actions { display: flex; gap: 10px; flex-wrap: wrap; } .assistant-recommend-actions .ghost-button, .assistant-recommend-actions .action-button { min-height: 38px; padding-inline: 14px; border-radius: 14px; font-size: 13px; } html[data-theme="dark"] .assistant-chat-avatar.ai { border-color: rgba(96, 165, 250, 0.22); background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.98) 100%); box-shadow: 0 14px 30px rgba(2, 8, 23, 0.34); } html[data-theme="dark"] .assistant-chat-avatar.user { border-color: rgba(96, 165, 250, 0.22); background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); color: #eff6ff; } html[data-theme="dark"] .assistant-message.ai { background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.94) 100%) !important; border-color: rgba(96, 165, 250, 0.16) !important; color: var(--text-main); } html[data-theme="dark"] .assistant-message.user { background: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, rgba(59, 130, 246, 0.42) 100%) !important; border-color: rgba(96, 165, 250, 0.24) !important; color: #f5f7fb; } html[data-theme="dark"] .assistant-message.ai.is-typing { border-color: rgba(96, 165, 250, 0.24) !important; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.34); } html[data-theme="dark"] .assistant-message.ai.is-thinking { border-color: rgba(96, 165, 250, 0.2) !important; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28); } html[data-theme="dark"] .assistant-conversation-goal, html[data-theme="dark"] .assistant-recommend-panel, html[data-theme="dark"] .assistant-recommend-card, html[data-theme="dark"] .assistant-system-receipt-card { border-color: rgba(96, 165, 250, 0.16) !important; background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.92)) !important; box-shadow: none; } html[data-theme="dark"] .assistant-context-badge, html[data-theme="dark"] .assistant-recommend-state { border-color: rgba(96, 165, 250, 0.2) !important; background: rgba(30, 41, 59, 0.9) !important; color: #93c5fd; } html[data-theme="dark"] .assistant-conversation-goal strong { color: #93c5fd; } html[data-theme="dark"] .assistant-conversation-goal span, html[data-theme="dark"] .assistant-recommend-panel-header span, html[data-theme="dark"] .assistant-recommend-head span, html[data-theme="dark"] .assistant-recommend-meta, html[data-theme="dark"] .assistant-recommend-note { color: var(--text-sub); } html[data-theme="dark"] .assistant-thinking-label { color: #93c5fd; } @keyframes assistantAvatarBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.035); } } @keyframes assistantAvatarGlow { 0%, 100% { filter: brightness(0) saturate(100%) invert(35%) sepia(99%) saturate(1457%) hue-rotate(203deg) brightness(99%) contrast(93%); } 50% { filter: brightness(0) saturate(100%) invert(43%) sepia(96%) saturate(1184%) hue-rotate(196deg) brightness(106%) contrast(98%); } } @keyframes assistantCaretBlink { 0%, 100% { opacity: 0.2; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1); } } @keyframes assistantThinkingDot { 0%, 100% { opacity: 0.24; transform: translateY(0) scale(0.9); } 50% { opacity: 1; transform: translateY(-1px) scale(1); } } /* ── 显示字体层次 ── */ .toolbar-brand-lockup .app-brand-title, .login-brand-lockup .app-brand-title, .nav-brand-title, .page-header h2 { font-family: var(--font-display); } /* ── Stagger 入场动画 ── */ @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .stat-card, .event-card, .todo-card, .pending-card, .command-card, .mailbox-feed-item { animation: fadeSlideIn 0.4s var(--ease-out) both; animation-delay: calc(var(--stagger, 0) * 60ms); } /* ── 全局 Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── 纯白色修正：带色调的近白 ── */ .segmented { background: #eef2f8; } .prototype-frame { background: linear-gradient(180deg, rgba(249, 250, 251, 0.86), rgba(248, 250, 252, 0.96)); } /* ── 100vh → 100dvh 全局降级 ── */ @supports (height: 100dvh) { .side-nav { height: 100dvh; } } /* ── 列表卡片 stagger 入场 ── */ .event-card:nth-child(1), .todo-card:nth-child(1), .pending-card:nth-child(1), .command-card:nth-child(1), .mailbox-feed-item:nth-child(1) { --stagger: 0; } .event-card:nth-child(2), .todo-card:nth-child(2), .pending-card:nth-child(2), .command-card:nth-child(2), .mailbox-feed-item:nth-child(2) { --stagger: 1; } .event-card:nth-child(3), .todo-card:nth-child(3), .pending-card:nth-child(3), .command-card:nth-child(3), .mailbox-feed-item:nth-child(3) { --stagger: 2; } .event-card:nth-child(4), .todo-card:nth-child(4), .pending-card:nth-child(4), .command-card:nth-child(4), .mailbox-feed-item:nth-child(4) { --stagger: 3; } .event-card:nth-child(5), .todo-card:nth-child(5), .pending-card:nth-child(5), .command-card:nth-child(5), .mailbox-feed-item:nth-child(5) { --stagger: 4; } .event-card:nth-child(n+6), .todo-card:nth-child(n+6), .pending-card:nth-child(n+6), .command-card:nth-child(n+6), .mailbox-feed-item:nth-child(n+6) { --stagger: 5; } /* ================================================= */ /* PRODUCT AUDIT FIXES — 2026-04-19 */ /* ================================================= */ /* ── 1. 页面切换过渡 ── */ .main-shell>.page-content, .main-content, .route-page { animation: pageEnter 0.28s var(--ease-out) both; } @keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── 2. Modal 入场/退场 ── */ .modal-backdrop, .login-overlay { animation: backdropIn 0.22s ease both; } @keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } } .modal-card, .event-modal-card, .auth-login-card, .auth-register-success-card, .auth-sso-preview-card, .onboarding-modal-card { animation: modalScaleIn 0.3s var(--ease-out) both; } @keyframes modalScaleIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── 3. Hover 效果分化 ── */ .event-card:hover, .todo-card:hover, .pending-card:hover, .command-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12); } .toolbar-button:hover, .action-button:hover, .segmented button:hover { transform: none; filter: brightness(1.06); } .nav-item:hover:not(.active) { transform: none; background: rgba(37, 99, 235, 0.06); } html[data-theme="dark"] .nav-item:hover:not(.active) { background: rgba(255, 255, 255, 0.06); } /* ── 4. 主题切换平滑过渡 ── */ html { transition: background-color 0.4s ease, color 0.3s ease; } body, .app-shell, .side-nav, .main-shell, .page-header, .stat-card, .event-card, .todo-card, .nav-item { transition-property: background, background-color, color, border-color, box-shadow; transition-duration: 0.35s; transition-timing-function: ease; } /* ── 5. Toast 通知系统 ── */ .toast-container { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .toast-item { min-width: 280px; max-width: 480px; padding: 14px 22px; border-radius: 16px; background: rgba(15, 23, 42, 0.92); color: #f1f5f9; font-size: 14px; font-weight: 600; backdrop-filter: blur(20px); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24); pointer-events: auto; animation: toastIn 0.3s var(--ease-out) both; display: flex; align-items: center; gap: 10px; } html[data-theme="dark"] .toast-item { background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(100, 116, 139, 0.2); } .toast-item.toast-success { border-left: 3px solid #22c55e; } .toast-item.toast-error { border-left: 3px solid #ef4444; } .toast-item.toast-info { border-left: 3px solid #3b82f6; } .toast-item.is-leaving { animation: toastOut 0.22s ease-in both; } @keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.96); } } /* ── 5b. 表单验证反馈 ── */ .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important; } .field.has-error label { color: #ef4444; } .field-error-message { color: #ef4444; font-size: 12px; font-weight: 500; margin-top: 4px; line-height: 1.4; animation: fieldErrorIn 0.25s ease-out both; } html[data-theme="dark"] .field.has-error input, html[data-theme="dark"] .field.has-error select, html[data-theme="dark"] .field.has-error textarea { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important; } html[data-theme="dark"] .field-error-message { color: #f87171; } @keyframes fieldErrorIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes formShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .form-shake { animation: formShake 0.35s ease-in-out; } /* ── 6. 骨架屏脉冲 ── */ .skeleton-pulse { background: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 25%, rgba(148, 163, 184, 0.16) 50%, rgba(148, 163, 184, 0.08) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.4s ease-in-out infinite; border-radius: 8px; } @keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── 7. 卡片圆角统一 ── */ .event-card, .todo-card, .pending-card, .command-card, .mailbox-feed-item { border-radius: 20px; } .modal-card, .event-modal-card, .auth-login-card { border-radius: 28px; } /* ── 8–9. (已移除：亮色品牌暖化 & 侧边栏 Active 覆盖，恢复原始样式) ── */ /* ── 10. 数字 countUp 动画 ── */ .stat-card-value[data-countup] { display: inline-block; } /* ── 11. 操作确认反馈动画 ── */ .assistant-action-card.is-confirming { animation: actionConfirm 0.35s var(--ease-out) both; } @keyframes actionConfirm { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.95); } 100% { opacity: 0; transform: scale(0.9) translateY(-8px); } } /* ── 12. 空状态增强 ── */ .empty-state { animation: emptyFadeIn 0.5s var(--ease-out) 0.1s both; } @keyframes emptyFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── 13. 智能对话 AI 思考脉冲 ── */ .assistant-thinking-indicator { display: flex; align-items: center; gap: 10px; padding: 12px 16px; } .assistant-thinking-dots { display: inline-flex; gap: 4px; flex-shrink: 0; } .assistant-thinking-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0.4; animation: thinkPulse 1.2s ease-in-out infinite; } .assistant-thinking-dots .dot:nth-child(2) { animation-delay: 0.2s; } .assistant-thinking-dots .dot:nth-child(3) { animation-delay: 0.4s; } .assistant-thinking-step-text { font-size: 13px; color: var(--brand); font-weight: 500; opacity: 0.85; animation: thinkStepFade 0.3s ease-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } @keyframes thinkPulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.1); } } @keyframes thinkStepFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 0.85; transform: translateY(0); } } /* ── 14. 子页面 stat-row 压缩 ── */ /* 子页面隐藏 featured-card：保留 home/overview/calendar 三个首页路由 */ .app-shell:not([data-route="home"]):not([data-route="overview"]):not([data-route="calendar"]) .featured-card, .app-shell:not([data-route="home"]):not([data-route="overview"]):not([data-route="calendar"]) .stats-featured { display: none; } .app-shell:not([data-route="home"]):not([data-route="overview"]):not([data-route="calendar"]) .stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .app-shell:not([data-route="home"]):not([data-route="overview"]):not([data-route="calendar"]) .stats-row .stat-card { min-height: 100px; padding: 12px 14px; } .app-shell:not([data-route="home"]):not([data-route="overview"]):not([data-route="calendar"]) .stats-row .stat-card-value { font-size: 28px; } /* ── 15. 对话结构化渐现 ── */ .chat-message-content .evidence-block, .chat-message-content .action-card-block { animation: fadeSlideIn 0.35s var(--ease-out) both; } .chat-message-content .evidence-block { animation-delay: 0.15s; } .chat-message-content .action-card-block { animation-delay: 0.3s; } /* ================================================= */ /* AUDIT V2 FIXES — 2026-04-19 BATCH 1+2 */ /* ================================================= */ /* ── V2-1.1 Stat 卡片文字可读性提升 ── */ .stat-card-note { color: rgba(255, 255, 255, 0.92) !important; font-size: 13.5px; } .stat-card-subnote { color: rgba(255, 255, 255, 0.78) !important; } /* ── V2-1.5 紧急程度标签颜色语义分化 ── */ .urgency-high, .urgency-label-high, [class*="urgency"][class*="high"], .pending-card .info-chip.is-danger { background: #dc2626; color: #fff; border-color: #dc2626; } .urgency-medium, .urgency-label-medium, [class*="urgency"][class*="medium"], .pending-card .info-chip.is-warning { background: #f59e0b; color: #fff; border-color: #f59e0b; } .urgency-low, .urgency-label-low, [class*="urgency"][class*="low"], .pending-card .info-chip.is-info { background: transparent; color: var(--text-sub); border: 1.5px solid var(--line-strong); } /* ── V2-2.1 发送按钮禁用态 ── */ .assistant-compose .action-button[data-action="assistant-send"].is-disabled, .assistant-compose .action-button[data-action="assistant-send"]:disabled { opacity: 0.35; pointer-events: none; filter: grayscale(0.4); } /* ── V2-2.2 发送后输入框闪烁反馈 ── */ @keyframes inputSendFlash { 0% { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } 100% { border-color: var(--line); box-shadow: none; } } .assistant-compose input.is-just-sent, [data-role="boss-command-input"].is-just-sent { animation: inputSendFlash 0.5s ease both; } /* ── V2-2.3 快捷 pill 点击反馈 ── */ .assistant-suggestion-pill, .assistant-quick-pill { transition: transform 0.12s ease, background 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .assistant-suggestion-pill:active, .assistant-quick-pill:active { transform: scale(0.93); background: var(--brand) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); } /* ── V2-2.4 待安排会议卡片选中态 ── */ .pending-card.is-selected, .pending-card.is-active { border-left: 3px solid var(--brand); background: rgba(37, 99, 235, 0.06); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1); } html[data-theme="dark"] .pending-card.is-selected, html[data-theme="dark"] .pending-card.is-active { background: rgba(59, 130, 246, 0.1); border-left-color: #60a5fa; } /* ── V2-2.5 页面过渡增强 ── */ @keyframes pageEnterV2 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .page-body > *:first-child { animation: pageEnterV2 0.32s var(--ease-out) both; } .page-body > *:nth-child(2) { animation: pageEnterV2 0.32s var(--ease-out) 0.06s both; } .page-body > *:nth-child(3) { animation: pageEnterV2 0.32s var(--ease-out) 0.12s both; } /* ── V2-2.6 建议动作卡片展开动画 ── */ .assistant-action-card { overflow: hidden; transition: max-height 0.3s var(--ease-out), opacity 0.25s ease; } /* ── V2-2.7 收信箱未读/已读标记 ── */ .mailbox-feed-item.is-unread { position: relative; font-weight: 600; } .mailbox-feed-item.is-unread::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--brand); } .mailbox-feed-item:not(.is-unread) { opacity: 0.72; } /* ── V2-3.4 对话消息时间戳 ── */ .assistant-msg-timestamp { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.45); margin-top: 6px; text-align: right; font-variant-numeric: tabular-nums; } .assistant-message.user .assistant-msg-timestamp { color: var(--text-soft); } html:not([data-theme="dark"]) .assistant-message.ai .assistant-msg-timestamp { color: rgba(100, 116, 139, 0.6); } /* ── V2-5.1 亮色模式表单边框加深（v25：#cbd5e1 → #b8c2d1，对比度再提高一档）── */ html:not([data-theme="dark"]) input[type="text"], html:not([data-theme="dark"]) input[type="tel"], html:not([data-theme="dark"]) input[type="password"], html:not([data-theme="dark"]) input[type="datetime-local"], html:not([data-theme="dark"]) textarea, html:not([data-theme="dark"]) select { border-color: #b8c2d1; } /* ── V2-5.2 暗色模式批注按钮降饱和 ── */ html[data-theme="dark"] .action-button.is-annotate, html[data-theme="dark"] [data-action="add-annotation"] { border-color: rgba(59, 130, 246, 0.5); color: #93c5fd; } /* ── V2-4.3 右侧面板空状态 ── */ .sidebar-empty-state { padding: 24px 16px; text-align: center; color: var(--text-soft); font-size: 13px; line-height: 1.6; } .sidebar-empty-state::before { content: "📋"; display: block; font-size: 28px; margin-bottom: 8px; opacity: 0.5; } /* ── V2-6.6 快捷键提示 tooltip ── */ .kbd-hint { display: inline-block; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.08); font-size: 11px; font-family: monospace; color: var(--text-soft); margin-left: 6px; vertical-align: middle; } html[data-theme="dark"] .kbd-hint { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); } /* ========================================= */ /* PREMIUM DESIGN OVERRIDES (Added via AI) */ /* ========================================= */ :root { --glow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(226, 232, 240, 0.4); } html[data-theme="dark"] { --glow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.4); --bg-page: #050a12 !important; --bg-card: #0a111c !important; --bg-soft: #0d1624 !important; --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.2), 0 12px 28px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.4) !important; --shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.24) !important; } body { font-variant-numeric: tabular-nums; } .nav-brand-tagline, .mini-label, .stat-card-label, .nav-label, small { letter-spacing: 0.08em !important; text-transform: uppercase; } .nav-brand-title, .app-brand-title { font-weight: 800 !important; letter-spacing: -0.04em !important; } .prototype-frame, .stat-card, .event-card, .todo-card, .command-card, .panel, .assistant-message.ai, .modal-card, .login-card { box-shadow: var(--shadow-panel), var(--glow-inset) !important; } .prototype-frame { box-shadow: var(--shadow-soft), var(--glow-inset) !important; } .nav-item, .stat-card, .event-card, .todo-card, .command-card { transition: transform 0.4s var(--ease-back), box-shadow 0.4s var(--ease-back), background 0.3s ease !important; } .nav-item:hover, .stat-card:hover, .event-card:hover, .todo-card:hover, .command-card:hover { transform: translateY(-2px) scale(1.01) !important; box-shadow: var(--shadow-soft), var(--glow-inset) !important; z-index: 2; } .nav-item:active, .stat-card:active, .event-card:active, .todo-card:active, .command-card:active { transform: translateY(0px) scale(0.98) !important; } @keyframes staggerFadeUp { from { opacity: 0; transform: translateY(12px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* ⚠️ 移除：原本 .assistant-message 也带 staggerFadeUp 0.6s 动画 （opacity: 0 → 1 + translateY(12px) → 0 + filter: blur(2px) → blur(0)）。 每次 render() 全量重渲染时 assistant-message-list.innerHTML 被替换， 所有历史消息会一起重新触发这个动画 —— 用户感受到"发啥都闪屏太突兀"。 聊天 UI（微信/Slack/Telegram）的标准做法是消息直接出现，不带入场动画。 */ .nav-item, .stat-card, .event-card { animation: staggerFadeUp 0.6s var(--ease-out) both; } .nav-item:nth-child(1) { animation-delay: 0.05s; } .nav-item:nth-child(2) { animation-delay: 0.08s; } .nav-item:nth-child(3) { animation-delay: 0.11s; } .nav-item:nth-child(4) { animation-delay: 0.14s; } .nav-item:nth-child(5) { animation-delay: 0.17s; } .stat-card:nth-child(1) { animation-delay: 0.1s; } .stat-card:nth-child(2) { animation-delay: 0.14s; } .stat-card:nth-child(3) { animation-delay: 0.18s; } .stat-card:nth-child(4) { animation-delay: 0.22s; } .stat-card:nth-child(5) { animation-delay: 0.26s; } /* ========================================= */ /* ========================================= */ /* REFINED CARD ANATOMY & TYPOGRAPHY */ /* ========================================= */ /* Card Anatomy Overrides */ .stat-card { position: relative; overflow: hidden; padding: 24px !important; border-radius: 24px !important; } /* Decorative Watermark */ .stat-card::after { content: ''; position: absolute; right: -10%; bottom: -20%; width: 140px; height: 140px; background: radial-gradient(circle, var(--brand-soft) 0%, transparent 70%); opacity: 0.6; pointer-events: none; z-index: 0; } html[data-theme="dark"] .stat-card::after { background: radial-gradient(circle, rgba(215, 178, 125, 0.12) 0%, transparent 70%); } .stat-card-head { position: relative; z-index: 1; margin-bottom: 12px !important; } .stat-card-label { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-soft) !important; } .stat-card-value { position: relative; z-index: 1; font-size: 38px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1 !important; margin: 4px 0 8px 0 !important; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--text-main), var(--text-sub)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="dark"] .stat-card-value { background: linear-gradient(135deg, #ffffff, #a8b6c9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-card-featured-copy .stat-card-title { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin-top: 8px !important; display: block !important; } .stat-card-note, .stat-card-subnote { position: relative; z-index: 1; font-size: 13px !important; line-height: 1.5 !important; color: var(--text-sub) !important; } /* Event Card High-Contrast */ .event-card { padding: 16px 20px !important; border-radius: 20px !important; border: 1px solid rgba(148, 163, 184, 0.1) !important; } html[data-theme="dark"] .event-card { border: 1px solid rgba(255, 255, 255, 0.04) !important; } .event-card h5 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; margin-bottom: 6px !important; } /* Jelly Tags */ .priority-option, .filter-chip, .badge, .status-pill, .event-detail-chip { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; border-radius: 99px !important; } html[data-theme="light"] .badge.priority-p1 { background: rgba(239, 68, 68, 0.08) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; } html[data-theme="light"] .badge.priority-p2 { background: rgba(139, 92, 246, 0.08) !important; color: #8b5cf6 !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; } html[data-theme="dark"] .badge.priority-p1 { background: rgba(249, 115, 22, 0.12) !important; color: #fb923c !important; border: 1px solid rgba(249, 115, 22, 0.25) !important; } html[data-theme="dark"] .badge.priority-p2 { background: rgba(139, 92, 246, 0.12) !important; color: #a78bfa !important; border: 1px solid rgba(139, 92, 246, 0.25) !important; } /* ========================================= */ /* CAMPAIGN 1: BUTTONS, ICONS & ANIMATIONS */ /* ========================================= */ /* 1. Global Haptic Feedback (Physical Button Press) */ button, .nav-item, .mobile-nav-item, .action-button, .ghost-button, .tab-button { transition: transform 0.18s var(--ease-spring), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), color 0.2s var(--ease-out) !important; will-change: transform; } button:active:not(:disabled), .nav-item:active, .action-button:active, .ghost-button:active { transform: scale(0.95) !important; } /* 2. Primary Button Glassmorphism */ .action-button { background: linear-gradient(180deg, var(--brand), #1d4ed8) !important; color: #ffffff !important; border: 1px solid #1e40af !important; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1), 0 8px 16px rgba(37, 99, 235, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); font-weight: 600 !important; letter-spacing: 0.02em !important; } .action-button:hover { background: linear-gradient(180deg, #3b82f6, var(--brand)) !important; box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2), 0 12px 24px rgba(37, 99, 235, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important; transform: translateY(-1px) scale(1.02) !important; } html[data-theme="dark"] .action-button:not(.secondary):not(.is-annotate), html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .mobile-nav-item.active, html[data-theme="dark"] .filter-chip.active { background: linear-gradient(180deg, rgba(215, 178, 125, 0.9), rgba(180, 140, 90, 0.9)) !important; color: #1e293b !important; font-weight: 800 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(215, 178, 125, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important; text-shadow: none !important; } html[data-theme="dark"] .action-button:not(.secondary):not(.is-annotate):hover { background: linear-gradient(180deg, rgba(230, 195, 140, 1), rgba(215, 178, 125, 1)) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(215, 178, 125, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important; } /* 3. Ghost Button Restraint */ .ghost-button { background: transparent !important; border: 1px solid transparent !important; color: var(--text-sub) !important; box-shadow: none !important; } .ghost-button:hover { background: rgba(15, 23, 42, 0.04) !important; color: var(--text-main) !important; } html[data-theme="dark"] .ghost-button:hover { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; } /* 4. Duotone Icon Simulation */ svg { transition: fill 0.2s var(--ease-out), stroke 0.2s var(--ease-out), color 0.2s var(--ease-out), opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); } .nav-icon svg path, .stat-card-glyph svg path { opacity: 0.9; } .nav-icon svg path:nth-child(even), .stat-card-glyph svg path:nth-child(even) { opacity: 0.5; } html[data-theme="dark"] .stat-card-glyph svg { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); } /* 5. Smooth Nav Hover */ .nav-item { position: relative; overflow: hidden; z-index: 1; } .nav-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(37, 99, 235, 0.06); opacity: 0; border-radius: inherit; transform: scale(0.9); transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); z-index: -1; } html[data-theme="dark"] .nav-item::before { background: rgba(255, 255, 255, 0.04); } .nav-item:hover::before { opacity: 1; transform: scale(1); } /* ========================================= */ /* CAMPAIGN 2: SETTINGS & MODALS REFACTOR */ /* ========================================= */ .nav-settings-menu { display: flex !important; flex-direction: column !important; padding: 6px !important; border-radius: 20px !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(148, 163, 184, 0.1) !important; } html[data-theme="dark"] .nav-settings-menu { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } .nav-settings-list { display: flex !important; flex-direction: column !important; gap: 4px !important; } .nav-settings-list>* { padding: 10px 12px !important; border-radius: 12px !important; transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important; } .nav-settings-logout { order: 99 !important; margin-top: 12px !important; position: relative; } .nav-settings-logout::before { content: ''; position: absolute; top: -6px; left: 12px; right: 12px; height: 1px; background: var(--line); } .app-shell:not(.mobile-shell) .modal-card { max-width: 640px !important; margin: 5vh auto !important; border-radius: 28px !important; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(148, 163, 184, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell) .modal-card { box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important; } .modal-header { padding: 24px 32px 16px 32px !important; } .modal-body { padding: 0 32px 32px 32px !important; } .field { position: relative; margin-bottom: 24px !important; } .field label { font-size: 13px !important; font-weight: 600 !important; color: var(--text-sub) !important; margin-bottom: 8px !important; display: block; } .field input, .field textarea, .field select { width: 100% !important; padding: 14px 16px !important; border-radius: 18px !important; border: 1px solid var(--line-strong) !important; background: rgba(255, 255, 255, 0.5) !important; box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.02) !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important; font-size: 15px !important; } html[data-theme="dark"] .field input, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .field select { background: rgba(30, 41, 59, 0.85) !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2) !important; } /* 2026-05-05：暗黑模式下 select 下拉箭头需提亮（默认 %2394a3b8 在深底上接近隐形） */ html[data-theme="dark"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cbd5e1' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E") !important; } .field input:focus, .field textarea:focus, .field select:focus { outline: none !important; border-color: var(--brand) !important; background: var(--bg-card) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; } html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field textarea:focus, html[data-theme="dark"] .field select:focus { background: rgba(30, 41, 59, 0.6) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important; } /* ========================================= */ /* CAMPAIGN 3: ONBOARDING & LOGIN EXPERIENCE */ /* ========================================= */ .onboarding-overlay { background: rgba(15, 23, 42, 0.7) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; animation: fadeInSpotlight 0.6s var(--ease-out) forwards; } @keyframes fadeInSpotlight { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(16px); } } .onboarding-window { background: rgba(255, 255, 255, 0.95) !important; border-radius: 32px !important; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 40px rgba(37, 99, 235, 0.15) !important; overflow: hidden; transform-origin: center; animation: popIn 0.5s var(--ease-spring) forwards; } html[data-theme="dark"] .onboarding-window { background: rgba(15, 23, 42, 0.95) !important; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 40px rgba(215, 178, 125, 0.15) !important; } @keyframes popIn { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; border: 1.5px solid var(--line-strong) !important; border-radius: 6px !important; background: var(--bg-card) !important; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; transition: background 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring), transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring) !important; margin: 0 !important; vertical-align: middle; } input[type="checkbox"]:hover { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; } input[type="checkbox"]:checked { background: var(--brand) !important; border-color: var(--brand) !important; animation: checkBounce 0.36s cubic-bezier(0.34, 1.56, 0.64, 1); } input[type="checkbox"]:checked::after { content: ''; position: absolute; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; /* 2026-05-16：勾子用 scale 复合 rotate 弹出来，不再瞬间显形。 backwards 让动画起始帧（透明 + 缩成 0）在动画开始前就生效，避免闪烁 */ animation: checkPopIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } @keyframes checkBounce { 0% { transform: scale(0.86); } 40% { transform: scale(1.08); } 70% { transform: scale(0.97); } 100% { transform: scale(1); } } @keyframes checkPopIn { 0% { opacity: 0; transform: rotate(45deg) scale(0); } 55% { opacity: 1; transform: rotate(45deg) scale(1.18); } 100% { opacity: 1; transform: rotate(45deg) scale(1); } } /* 颜色/边框过渡：未勾选 → 勾选时颜色不再瞬切，配合 bounce 更自然 */ input[type="checkbox"] { transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { input[type="checkbox"]:checked, input[type="checkbox"]:checked::after { animation: none !important; } input[type="checkbox"] { transition: none !important; } } /* 通用 inline checkbox label（如登录页"同意协议"）：4px 内边距让 hover 圆角看起来比文字更宽，反向 -4px margin 抵消视觉位移让排版不偏。 已知陷阱：`.switch-field` / `.inbox-reference-switch` 是表单里宽边框胶囊， 自己定义 padding/margin，被通用规则的 specificity (0,1,2) 覆盖会出现 左边突出 4px、与表单其他字段对不齐。这里显式 :not 排除掉它们。 */ label:has(input[type="checkbox"]):not(.switch-field):not(.inbox-reference-switch) { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px; margin-left: -4px; border-radius: 8px; transition: background 0.2s ease; } label:has(input[type="checkbox"]):not(.switch-field):not(.inbox-reference-switch):hover { background: rgba(37, 99, 235, 0.04); } html[data-theme="dark"] label:has(input[type="checkbox"]):not(.switch-field):not(.inbox-reference-switch):hover { background: rgba(255, 255, 255, 0.04); } .login-card { transition: height 0.4s var(--ease-spring), transform 0.4s ease !important; } /* ========================================= */ /* FINAL POLISH: PREMIUM SCROLLBARS */ /* ========================================= */ ::-webkit-scrollbar { width: 6px !important; height: 6px !important; } ::-webkit-scrollbar-track { background: transparent !important; border-radius: 10px !important; } ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.25) !important; border-radius: 10px !important; transition: background 0.2s ease !important; } ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.6) !important; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4) !important; } * { scrollbar-width: thin !important; scrollbar-color: rgba(100, 116, 139, 0.25) transparent !important; } /* ========================================= */ /* CAMPAIGN 5: RESPONSIVE & DENSITY TUNING */ /* ========================================= */ @media (max-width: 1024px) { .app-shell:not(.mobile-shell) { grid-template-columns: 80px minmax(0, 1fr) !important; } .app-shell:not(.mobile-shell) .app-sidebar { width: 80px !important; padding-left: 8px !important; padding-right: 8px !important; align-items: center !important; } .app-shell:not(.mobile-shell) .nav-label { display: none !important; } .app-shell:not(.mobile-shell) .nav-item { justify-content: center !important; padding: 12px 0 !important; } .app-shell:not(.mobile-shell) .sidebar-logo { flex-direction: column !important; font-size: 14px !important; text-align: center !important; margin-bottom: 24px !important; } .app-shell:not(.mobile-shell) .stats-row { grid-template-columns: 1fr !important; } .app-shell:not(.mobile-shell) .stats-featured, .app-shell:not(.mobile-shell) .stat-card.metric-card { grid-column: span 1 !important; grid-row: span 1 !important; min-height: auto !important; } .app-shell:not(.mobile-shell) .stat-card::after { display: none !important; } } button.action-button.secondary { background: rgba(37, 99, 235, 0.1) !important; color: var(--brand) !important; border: 1px solid rgba(37, 99, 235, 0.2) !important; box-shadow: none !important; } button.action-button.secondary:hover { background: rgba(37, 99, 235, 0.15) !important; transform: translateY(-1px) scale(1.02) !important; } html[data-theme="dark"] button.action-button.secondary { background: rgba(215, 178, 125, 0.15) !important; color: #e6c38c !important; border: 1px solid rgba(215, 178, 125, 0.3) !important; } html[data-theme="dark"] button.action-button.secondary:hover { background: rgba(215, 178, 125, 0.25) !important; } .ghost-button { background: rgba(15, 23, 42, 0.03) !important; border: 1px dashed rgba(15, 23, 42, 0.15) !important; font-weight: 600 !important; } html[data-theme="dark"] .ghost-button { background: rgba(255, 255, 255, 0.04) !important; color: #cbd5e1 !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } .instruction-list, .mailbox-list, .pending-pool-list { max-height: none !important; height: auto !important; overflow: visible !important; } /* ========================================= */ /* BOSS VIEW SPECIFIC CLEANUPS */ /* ========================================= */ /* Hide the stats-row metric cards on non-overview pages for Boss */ .app-shell[data-role="boss"][data-view="pending"] .stats-row, .app-shell[data-role="boss"][data-view="todo"] .stats-row, .app-shell[data-role="boss"][data-view="mailbox"] .stats-row { display: none !important; } /* ========================================= */ /* CALENDAR VIEW TOGGLE STYLES */ /* ========================================= */ .calendar-view-toggle { display: inline-flex; background: var(--bg-body); border-radius: 8px; padding: 3px; margin-right: 12px; box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.05); } html[data-theme="dark"] .calendar-view-toggle { background: rgba(15, 23, 42, 0.6); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3); } .calendar-view-toggle .view-btn { appearance: none; border: none; background: transparent; /* 2026-05-14 polish：从 ~29 高提到 ≥36 触摸目标 */ min-height: 36px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-sub); border-radius: 8px; cursor: pointer; transition: background 0.2s var(--ease-spring), color 0.2s var(--ease-spring), transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring); } .calendar-view-toggle .view-btn.active { background: var(--bg-card); color: var(--brand); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); } html[data-theme="dark"] .calendar-view-toggle .view-btn.active { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } /* --- Edit 3: Restore solid blue theme for ALL stat cards (prevent gradient) --- */ html[data-theme="light"] .mailbox-summary-card, html[data-theme="dark"] .mailbox-summary-card, html[data-theme="light"] .mobile-summary-card, html[data-theme="dark"] .mobile-summary-card, .app-shell .mailbox-summary-card, .app-shell .mobile-summary-card, html[data-theme="dark"] .mailbox-summary-card.is-attention { background: var(--brand) !important; background-image: none !important; } /* --- Edit 4: Larger home icon symbol --- */ .app-shell .assistant-home-reference-icon-symbol { width: 65px !important; height: 65px !important; border-radius: 18px !important; } /* --- Edit 5: Centered Segmented Control for Day/Week/Month --- * 用 position:absolute + left:50% 让"日/周/月"居中显示。 * 注意：absolute 脱离文档流，两侧的 .panel-title / .calendar-panel-meta * 如果不加宽度约束就会延伸到中央位置，视觉上压到切换器上面（实测 1280px 视口下 * meta 会越线约 100+px，导致"月"按钮被"5场/冲突2条"chip 盖住）。 * 所以给两侧各加 max-width，保留 toggle 中央空间；meta 窄时允许 wrap 到第二行。 */ .app-shell section.panel > .panel-header:has(.calendar-view-toggle) { position: relative !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; row-gap: 8px !important; } .app-shell section.panel > .panel-header:has(.calendar-view-toggle) > .panel-title { max-width: calc(50% - 88px); min-width: 0; } .app-shell section.panel > .panel-header:has(.calendar-view-toggle) > .calendar-panel-meta { max-width: calc(50% - 88px); flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; } .app-shell .calendar-view-toggle { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; background: rgba(241, 245, 249, 0.8) !important; backdrop-filter: blur(8px) !important; border-radius: 20px !important; padding: 4px !important; display: flex !important; gap: 2px !important; border: 1px solid rgba(0,0,0,0.05) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; z-index: 10 !important; } /* Ensure ALL stat cards in mailbox theme panel have solid #3B6BFF background */ .app-shell .mailbox-theme-panel .stat-card, .app-shell .mobile-summary-card { background: var(--brand) !important; background-image: none !important; } .app-shell .mobile-summary-card.is-primary { background: var(--brand) !important; } /* Restore the customized SVG wechat icon for empty states */ .app-shell .inbox-reference-empty-preview { display: none !important; } .app-shell .inbox-empty-svg-wrapper { display: block !important; } /* === Style Block Separator === */ /* ================================================= */ /* CAMPAIGN 8: SYNC COLORS WITH PRIMARY BUTTON */ /* ================================================= */ /* 1. Sync sidebar active state for both roles to the button gradient */ .nav-item.active, .app-shell[data-role="boss"] .nav-item.active, .app-shell[data-role="assistant"] .nav-item.active { background: var(--brand) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(74, 108, 247, 0.3) !important; border: none !important; } .nav-item.active svg { color: #ffffff !important; } /* 2. Sync header icons to the button solid color */ .page-header .page-title svg, .page-header .header-brand svg, .page-header .header-icon, .page-header .brand-icon { color: #5c7cfa !important; /* Mid-point of the button gradient */ fill: currentColor; } /* If the header icon uses SVG fill/stroke directly, override them */ .page-header .page-title svg [fill]:not([fill="none"]):not([fill="white"]):not([fill="#fff"]):not([fill="#ffffff"]) { fill: #5c7cfa !important; } .page-header .page-title svg [stroke]:not([stroke="none"]):not([stroke="white"]):not([stroke="#fff"]):not([stroke="#ffffff"]) { stroke: #5c7cfa !important; } /* === Style Block Separator === */ /* For all top bar images: we apply a filter to hue-rotate the color towards #4a6cf7 */ .homepage-panel-icon-img, /* === Style Block Separator === */ /* ================================================= */ /* CAMPAIGN: COMPACT SIDEBAR BRANDING (SIZE MATCHED) */ /* ================================================= */ .app-shell .nav-brand-lockup { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 0 !important; padding: 0 !important; } /* MATCH SIZE EXACTLY WITH RIGHT TOP NAV BAR (56px) */ .app-shell .nav-brand-row .brand-mark { width: 65px !important; height: 65px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } .app-shell .nav-brand-row .brand-mark-image { width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; } /* MATCH TITLE SIZE EXACTLY WITH RIGHT TOP NAV BAR h1 (28px) */ .app-shell .nav-brand-row .nav-brand-title { font-size: 28px !important; letter-spacing: -0.04em !important; line-height: 1.1 !important; margin: 0 !important; font-weight: 800 !important; /* Bold to match header */ } /* Adjust the slogan/tagline to fit visually */ .app-shell .nav-brand-tagline { font-size: 14px !important; line-height: 1.3 !important; margin-top: 4px !important; margin-bottom: 0 !important; letter-spacing: 0.02em !important; } /* === Style Block Separator === */ /* ================================================= */ /* CAMPAIGN: STAT CARDS REDESIGN (MATCH PRIMARY BTN) */ /* ================================================= */ /* 1. Force all stat cards to use the vibrant primary button gradient */ .app-shell .stat-card, .app-shell .stat-card:nth-child(n) { background: #364887 !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 8px 24px rgba(54, 72, 135, 0.25) !important; border-radius: 16px !important; padding: 20px !important; transition: transform 0.25s var(--ease-emphasized), box-shadow 0.25s var(--ease-emphasized) !important; position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } /* Soft inner glow and hover effect */ .app-shell .stat-card::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: radial-gradient(circle at top right, rgba(255,255,255,0.2) 0%, transparent 60%) !important; pointer-events: none !important; } .app-shell .stat-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(74, 108, 247, 0.35) !important; } /* 2. Fix text colors to be purely white for readability */ .app-shell .stat-card *, .app-shell .stat-card small, .app-shell .stat-card span, .app-shell .stat-card strong, .app-shell .stat-card .stat-card-label, .app-shell .stat-card .stat-card-value, .app-shell .stat-card .stat-card-note, .app-shell .stat-card .stat-card-subnote { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; position: relative !important; z-index: 1 !important; } /* 3. Typography & Layout Redesign */ .app-shell .stat-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; opacity: 0.95 !important; } .app-shell .stat-card-heading { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } /* Large Numbers */ .app-shell .stat-card .stat-card-value { font-size: 38px !important; font-weight: 800 !important; line-height: 1 !important; margin-bottom: 12px !important; display: block !important; } /* Subtle description text */ .app-shell .stat-card .stat-card-note { font-size: 13px !important; line-height: 1.4 !important; opacity: 0.85 !important; display: block !important; margin-bottom: 4px !important; font-weight: 400 !important; } .app-shell .stat-card .stat-card-subnote { font-size: 12px !important; opacity: 0.65 !important; display: block !important; } /* 4. Beautiful Icon Glyphs */ .app-shell .stat-card-glyph { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; background: rgba(255, 255, 255, 0.25) !important; border-radius: 8px !important; backdrop-filter: blur(4px) !important; } .app-shell .stat-card-glyph svg { width: 16px !important; height: 16px !important; } /* Hide the ugly decorative ring if present */ .app-shell .stat-card-ring { display: none !important; } /* 5. Progress Bar Redesign */ .app-shell .stat-card-progress { background: rgba(255, 255, 255, 0.2) !important; height: 6px !important; border-radius: 3px !important; overflow: hidden !important; margin-top: auto !important; /* Push to bottom */ width: 100% !important; display: block !important; } .app-shell .stat-card-progress span { background: linear-gradient(90deg, #34D399, #10B981) !important; height: 100% !important; border-radius: 3px !important; display: block !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.45) !important; } /* 6. First Card (Hero) Tweak */ .app-shell .stat-card:first-child { /* Keep it in the same gradient family but slightly more premium */ background: linear-gradient(135deg, #4364e8 0%, #5c81fa 100%) !important; } /* === Style Block Separator === */ /* ================================================= */ /* EXACT MATCH: SIZE & COLOR FOR LEFT AND RIGHT */ /* ================================================= */ /* Apply the universal color filter to BOTH left logo and right icons */ /* DO NOT touch the left logo - it is natively the exact right color! */ .app-shell .nav-brand-row .brand-mark { width: 65px !important; height: 65px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } /* Only apply the exact correction matrix to the right-side pastel icons */ .app-shell .assistant-home-reference-icon-symbol img, .app-shell .assistant-route-reference-icon-symbol img, .app-shell img.homepage-panel-icon-img, .app-shell img.sidebar-wechat-icon-img { filter: brightness(0) saturate(100%) invert(35%) sepia(61%) saturate(5412%) hue-rotate(214deg) brightness(101%) contrast(106%) !important; } /* Force physical bounds to be identical to align them perfectly */ /* Left Logo */ .app-shell .nav-brand-row .brand-mark { width: 65px !important; height: 65px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } .app-shell .nav-brand-title { font-size: 32px !important; line-height: 1 !important; margin: 0 !important; } /* Right Icon Container */ .app-shell .assistant-home-reference-icon-symbol, .app-shell .assistant-route-reference-icon-symbol { width: 38px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Right Icon Image */ .app-shell .assistant-home-reference-icon-symbol img, .app-shell .assistant-route-reference-icon-symbol img, .app-shell .nav-brand-row .brand-mark-image { width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important; } /* Right text size */ .app-shell .assistant-home-reference-stack h3 { font-size: 32px !important; line-height: 1 !important; margin: 0 !important; } /* Right Header alignment */ .app-shell .assistant-home-reference-lead { display: flex !important; align-items: center !important; gap: 10px !important; } /* Header padding sync for vertical alignment */ .app-shell:not(.mobile-shell) .nav-brand { padding: 24px 28px 24px !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-home-reference-header, .app-shell:not(.mobile-shell)[data-role="boss"] .page-header.boss-pending-reference-header { padding: 24px 28px 24px !important; } /* Make sure any leftover drop-shadow from earlier is nuked */ .assistant-home-reference-icon-symbol img, .assistant-route-reference-icon-symbol img { transform: scale(1.15) !important; } .app-shell .assistant-home-reference-icon-symbol.assistant-calendar-header-icon img, .app-shell .assistant-home-reference-icon-symbol.boss-calendar-header-icon img { transform: scale(0.97) !important; } .app-shell .assistant-route-reference-icon-symbol.assistant-inbox-header-icon img { transform: scale(1.08) !important; } .app-shell .assistant-route-reference-icon-symbol.assistant-pending-header-icon img, .app-shell .assistant-route-reference-icon-symbol.boss-pending-header-icon img { transform: scale(1.14) !important; } .app-shell .assistant-route-reference-icon-symbol.assistant-mailbox-header-icon img { transform: scale(1.08) !important; } .app-shell .assistant-route-reference-icon-symbol.assistant-todos-header-icon img, .app-shell .assistant-route-reference-icon-symbol.boss-todos-header-icon img { transform: scale(1.1) !important; } .app-shell .assistant-home-reference-icon-symbol.boss-overview-header-icon img { transform: scale(1.12) !important; } .app-shell .assistant-route-reference-icon-symbol.assistant-guide-header-icon img, .app-shell .assistant-route-reference-icon-symbol.boss-guide-header-icon img { transform: scale(1.2) !important; } .app-shell .assistant-route-reference-icon-symbol.assistant-settings-header-icon img, .app-shell .assistant-route-reference-icon-symbol.boss-settings-header-icon img { transform: scale(1.08) !important; } .app-shell .assistant-route-reference-icon-symbol.assistant-assistant-header-icon svg, .app-shell .assistant-route-reference-icon-symbol.boss-assistant-header-icon svg { transform: scale(1.1) !important; transform-origin: center center !important; } /* === Style Block Separator === */ @keyframes highlightPulseView { 0% { box-shadow: inset 0 0 0 6px var(--brand); background: rgba(112, 138, 255, 0.1); } 100% { box-shadow: inset 0 0 0 0 transparent; background: transparent; } } /* === Style Block Separator === */ /* FIX 2: Unified stat card colors */ .app-shell .mailbox-theme-panel .stat-card, .app-shell .mailbox-theme-panel .stat-card:nth-child(n), .app-shell .mailbox-summary-grid .stat-card, .app-shell .mailbox-summary-grid .stat-card:nth-child(n) { background: #364887 !important; border: 1px solid rgba(255,255,255,0.15) !important; } .app-shell .mailbox-theme-panel .stat-card small, .app-shell .mailbox-theme-panel .stat-card span, .app-shell .mailbox-summary-grid .stat-card small, .app-shell .mailbox-summary-grid .stat-card span { color: rgba(255,255,255,0.85) !important; } .app-shell .mailbox-theme-panel .stat-card strong, .app-shell .mailbox-summary-grid .stat-card strong { color: #fff !important; } /* === Style Block Separator === */ /* FIX 4: Date Picker Styles */ .dp-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: dp-fade-in 0.2s ease-out; } @keyframes dp-fade-in { from { opacity: 0; } to { opacity: 1; } } .dp-container { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 25px 60px rgba(0,0,0,0.15); min-width: 340px; animation: dp-scale-in 0.25s var(--ease-spring); } @keyframes dp-scale-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } html[data-theme="dark"] .dp-container { background: #1e293b; color: #e2e8f0; box-shadow: 0 25px 60px rgba(0,0,0,0.4); } .dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 4px; } .dp-title { font-size: 16px; font-weight: 700; flex: 1; text-align: center; } .dp-nav { width: 36px; height: 36px; border: none; background: transparent; border-radius: 10px; cursor: pointer; font-size: 18px; font-weight: 600; color: #64748b; display: flex; align-items: center; justify-content: center; transition: background 0.18s, color 0.18s; } .dp-nav:hover { background: #f1f5f9; color: #0f172a; } html[data-theme="dark"] .dp-nav:hover { background: #334155; color: #e2e8f0; } .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .dp-weekday { text-align: center; font-size: 12px; font-weight: 600; color: #94a3b8; padding: 8px 0; } .dp-empty { padding: 8px; } .dp-day { width: 40px; height: 40px; border: none; background: transparent; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 500; color: #334155; display: flex; align-items: center; justify-content: center; transition: background 0.18s, color 0.18s; position: relative; margin: 0 auto; } .dp-day:hover { background: #f1f5f9; } html[data-theme="dark"] .dp-day { color: #cbd5e1; } html[data-theme="dark"] .dp-day:hover { background: #334155; } .dp-day.dp-today { background: #eff6ff; color: #2563eb; font-weight: 700; box-shadow: inset 0 0 0 2px #bfdbfe; } html[data-theme="dark"] .dp-day.dp-today { background: #1e3a5f; color: #60a5fa; box-shadow: inset 0 0 0 2px #1e40af; } .dp-day.dp-selected { background: #2563eb !important; color: #fff !important; font-weight: 700; box-shadow: 0 4px 12px rgba(37,99,235,0.3); } .dp-day.dp-has-events::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #3b82f6; } .dp-day.dp-selected.dp-has-events::after { background: rgba(255,255,255,0.7); } .dp-footer { margin-top: 12px; text-align: center; border-top: 1px solid #e2e8f0; padding-top: 12px; } html[data-theme="dark"] .dp-footer { border-color: #334155; } .dp-today-btn { border: none; background: transparent; color: #2563eb; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 20px; border-radius: 10px; transition: background 0.18s, color 0.18s; } .dp-today-btn:hover { background: #eff6ff; } html[data-theme="dark"] .dp-today-btn { color: #60a5fa; } html[data-theme="dark"] .dp-today-btn:hover { background: #1e3a5f; } /* === Style Block Separator === */ /* Header icon 65x65 alignment with sidebar logo */ .app-shell:not(.mobile-shell) .assistant-home-reference-icon, .app-shell:not(.mobile-shell) .assistant-home-reference-icon-symbol { width: 65px !important; height: 65px !important; flex: 0 0 65px; } .app-shell:not(.mobile-shell) .assistant-home-reference-icon-symbol svg { width: 100%; height: 100%; } .app-shell:not(.mobile-shell) .assistant-home-reference-lead { align-items: center; } /* === Style Block Separator === */ /* ========================================================= UX Audit Track 1 Improvements ========================================================= */ /* 1. Swift Transitions (Override slow bouncy animations) */ .app-shell .modal, .app-shell .modal-content, .app-shell .panel, .app-shell .card, .app-shell .btn { transition-duration: 0.18s !important; transition-timing-function: ease-out !important; } /* 2. Modal Spacing & Diffuse Shadows */ .app-shell .modal-content { padding: 24px !important; box-shadow: 0 25px 50px -12px rgba(54,72,135,0.25) !important; } /* 3. Button Micro-interactions (Ensure physical feel) */ .app-shell .btn:active, .app-shell .nav-item:active { transform: scale(0.97) !important; } /* 4. AI Input Magical Glow */ .app-shell [data-role="assistant-composer-input"]:focus, .app-shell .assistant-composer-input:focus-within { border-color: #a5b4fc !important; box-shadow: 0 0 0 4px rgba(165, 180, 252, 0.25), 0 0 20px rgba(165, 180, 252, 0.15) !important; } /* === Style Block Separator === */ @keyframes lottieLoading { 0% { width: 0%; opacity:1;} 50% { width: 80%; opacity:0.5;} 100% { width: 0%; opacity:1;} } /* === Style Block Separator === */ /* 2. Sync ALL header icons to the pure brand logo color (#3B6BFF) */ /* For SVG icons (like Boss Overview), we can directly use color/fill/stroke */ .page-header .page-title svg, .page-header .header-brand svg, .page-header .header-icon, .page-header .brand-icon, .assistant-home-reference-icon-symbol svg, .assistant-route-reference-icon-symbol svg, .homepage-panel-icon-img svg { color: var(--brand) !important; /* Brand Logo Blue */ } .page-header .page-title svg [fill]:not([fill="none"]):not([fill="white"]):not([fill="#fff"]):not([fill="#ffffff"]) { fill: var(--brand) !important; } .page-header .page-title svg [stroke]:not([stroke="none"]):not([stroke="white"]):not([stroke="#fff"]):not([stroke="#ffffff"]) { stroke: var(--brand) !important; } /* For Image icons (like Assistant Home .png), we use the CSS filter trick to forcefully recolor every non-transparent pixel to EXACTLY #3B6BFF */ .assistant-home-reference-icon-symbol, .assistant-route-reference-icon-symbol { overflow: visible !important; } .assistant-home-reference-icon-symbol img, .assistant-route-reference-icon-symbol img, img.homepage-panel-icon-img, img.sidebar-wechat-icon-img, .page-header .header-icon img, .page-header .brand-icon img, .mobile-header-title-icon img, .app-shell .nav-brand-row .brand-mark-image { transform: none !important; /* Bulletproof CSS Filter to map to #3B6BFF */ filter: brightness(0) saturate(100%) invert(35%) sepia(61%) saturate(5412%) hue-rotate(214deg) brightness(101%) contrast(106%) !important; } /* === Style Block Separator === */ /* ================================================= */ /* 1. ADVANCED DIFFUSE LIGHT & SHADOW FOR STAT CARDS */ /* ================================================= */ .app-shell .stat-card { /* Base shadow: softer, more diffuse */ box-shadow: 0 4px 12px rgba(74, 108, 247, 0.15), 0 12px 32px rgba(74, 108, 247, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important; overflow: visible !important; /* Allow diffuse glow to bleed out */ } /* Create a true diffuse glow behind the card */ .app-shell .stat-card::after { content: "" !important; position: absolute !important; top: 10% !important; left: 5% !important; right: 5% !important; bottom: 0 !important; background: inherit !important; filter: blur(24px) !important; opacity: 0.4 !important; z-index: -1 !important; transition: opacity 0.3s ease !important; border-radius: inherit !important; } .app-shell .stat-card:hover { transform: translateY(-4px) scale(1.01) !important; box-shadow: 0 8px 24px rgba(74, 108, 247, 0.2), 0 24px 48px rgba(74, 108, 247, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important; } .app-shell .stat-card:hover::after { opacity: 0.7 !important; } /* ================================================= */ /* 2. GLOBAL TEXT OVERFLOW INTERCEPTOR */ /* ================================================= */ .app-shell .stat-card-note, .app-shell .stat-card-subnote, .app-shell .stat-card-heading, .app-shell .page-title, .app-shell .nav-brand-title, .app-shell .nav-brand-tagline, .app-shell .assistant-route-reference-header, .app-shell .boss-pending-reference-header { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* For multi-line constraints like chat messages */ .app-shell .assistant-message-content { word-break: break-word !important; overflow-wrap: break-word !important; } /* ================================================= */ /* 3. MOBILE STICKY HOVER PREVENTION */ /* ================================================= */ @media (hover: none), (pointer: coarse) { .app-shell .stat-card:hover { transform: none !important; box-shadow: 0 4px 12px rgba(74, 108, 247, 0.15), 0 12px 32px rgba(74, 108, 247, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important; } .app-shell .stat-card:hover::after { opacity: 0.4 !important; } /* Disable hover scaling/translating on buttons and nav items for touch */ .app-shell .nav-item:hover, .app-shell .btn:hover, .app-shell .quick-chip:hover { transform: none !important; } } /* ================================================= */ /* 4. BRAND ALIGNMENT & SIZING FIX */ /* ================================================= */ .app-shell .nav-brand-row .brand-mark { width: 65px !important; height: 65px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } .app-shell .nav-brand-title { /* Increase font size to match the massive page-title heading */ font-size: 32px !important; } /* === Style Block Separator === */ /* 1. Global smooth theme transitions */ html, body, .app-shell, .panel, .sidebar, .header, .card, .stat-card, .btn, .nav-item { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* 2. Checkbox Click Target and Cursor */ .auth-shot-agreement, .auth-shot-agreement input { cursor: pointer; } /* 3. Button Active States (Micro-interactions) */ .btn:active:not(:disabled), .action-button:active:not(:disabled), .nav-item:active, .auth-shot-submit:active { transform: scale(0.98); transition: transform 0.1s ease; } /* 4. Login Error Shake Animation */ @keyframes auth-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .auth-shot-field.is-error, .auth-shot-agreement-stack.is-error { animation: auth-shake 0.4s ease-in-out; } .auth-shot-agreement-stack.is-error .auth-shot-agreement { color: #dc2626; } html[data-theme="dark"] .auth-shot-agreement-stack.is-error .auth-shot-agreement { color: #f87171; } /* 5. Tooltip for Stat Cards */ .stat-card { position: relative; } .stat-card-indicator { cursor: help; } .stat-card-indicator::after { content: attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%) scale(0.9); background: rgba(0,0,0,0.8); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 100; } .stat-card-indicator:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } html[data-theme="dark"] .stat-card-indicator::after { background: rgba(255,255,255,0.9); color: #000; } /* 6. Assistant Input Field glow (AI warning state) */ .inbox-reference-field.is-warning input, .inbox-reference-field.is-warning textarea, .inbox-reference-field.is-warning select { border-color: #f59e0b !important; animation: field-warn-pulse 2s infinite !important; } @keyframes field-warn-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); } 50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.3); } } html[data-theme="dark"] .inbox-reference-field.is-warning input, html[data-theme="dark"] .inbox-reference-field.is-warning textarea, html[data-theme="dark"] .inbox-reference-field.is-warning select { border-color: #f59e0b !important; animation: field-warn-pulse-dark 2s infinite !important; } @keyframes field-warn-pulse-dark { 0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); } 50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.4); } } /* Focus styles for the new search bar */ .command-search-bar:focus-within { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(59, 107, 255, 0.15) !important; } /* === Style Block Separator === */ /* ======================================================== 统计卡片 UI 重构 (保持现有排版，更新底色与反白效果) ======================================================== */ /* 1. 统一 5 个统计卡片的底色为图二深蓝色 */ .app-shell .stats-featured, .app-shell .stats-today, .app-shell .stats-conflict, .app-shell .stats-risk, .app-shell .stats-todo { background: #364887 !important; /* 匹配图二的深蓝色 */ border: none !important; box-shadow: 0 12px 24px rgba(54, 72, 135, 0.15) !important; } /* 2. 移除原有的多色渐变类背景 (覆盖 .stats-today 等特定样式) */ .app-shell .stats-featured, .app-shell .stats-today, .app-shell .stats-conflict, .app-shell .stats-risk, .app-shell .stats-todo { background: #364887 !important; } /* 3. 卡片基础文字配色优化：去除纯白的生硬感，加入高级层级色彩 */ .app-shell .stats-featured .stat-card-label, .app-shell .stats-today .stat-card-label, .app-shell .stats-conflict .stat-card-label, .app-shell .stats-risk .stat-card-label, .app-shell .stats-todo .stat-card-label { color: #93C5FD !important; /* 柔和的浅蓝色标题 */ font-weight: 500 !important; } .app-shell .stats-featured .stat-card-value, .app-shell .stats-today .stat-card-value, .app-shell .stats-conflict .stat-card-value, .app-shell .stats-risk .stat-card-value, .app-shell .stats-todo .stat-card-value { font-family: 'DIN Alternate', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.5px !important; /* 回退到绝对安全的纯色高亮方案，避免部分浏览器 text-fill-color 导致文字隐身 */ color: #F8FAFC !important; background: none !important; -webkit-text-fill-color: unset !important; -webkit-background-clip: unset !important; background-clip: unset !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } .app-shell .stats-featured .stat-card-note, .app-shell .stats-today .stat-card-note, .app-shell .stats-conflict .stat-card-note, .app-shell .stats-risk .stat-card-note, .app-shell .stats-todo .stat-card-note, .app-shell .stats-featured .stat-card-subnote, .app-shell .stats-today .stat-card-subnote, .app-shell .stats-conflict .stat-card-subnote, .app-shell .stats-risk .stat-card-subnote, .app-shell .stats-todo .stat-card-subnote, .app-shell .stats-featured .stat-card-title, .app-shell .stats-today .stat-card-title, .app-shell .stats-conflict .stat-card-title, .app-shell .stats-risk .stat-card-title, .app-shell .stats-todo .stat-card-title { background: none !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important; color: rgba(255, 255, 255, 0.85) !important; text-shadow: none !important; } /* 4. 图标专属主题色配色 (强制覆盖 SVG 描边) */ /* 4. 图标专属主题色配色 (强制覆盖 SVG 描边) */ .app-shell .stats-featured .stat-card-glyph, .app-shell .stats-today .stat-card-glyph, .app-shell .stats-conflict .stat-card-glyph, .app-shell .stats-risk .stat-card-glyph, .app-shell .stats-todo .stat-card-glyph { background: none !important; } .app-shell .stats-featured .stat-card-glyph-featured svg { fill: #FBBF24 !important; stroke: #FBBF24 !important; color: #FBBF24 !important; } .app-shell .stats-today .stat-card-glyph-today svg { stroke: #60A5FA !important; color: #60A5FA !important; } .app-shell .stats-conflict .stat-card-glyph-conflict svg { stroke: #F87171 !important; color: #F87171 !important; } .app-shell .stats-risk .stat-card-glyph-risk svg { stroke: #FBBF24 !important; color: #FBBF24 !important; } .app-shell .stats-todo .stat-card-glyph-todo svg { stroke: #34D399 !important; color: #34D399 !important; } /* "最高优先级" 等小标签底色调整为半透明白 */ .app-shell .stats-featured .stat-card-prompt, .app-shell .stats-today .stat-card-prompt, .app-shell .stats-conflict .stat-card-prompt, .app-shell .stats-risk .stat-card-prompt, .app-shell .stats-todo .stat-card-prompt { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* 5. 背景装饰物淡化处理 */ .app-shell .stats-featured .stat-card-spark, .app-shell .stats-today .stat-card-spark, .app-shell .stats-conflict .stat-card-spark, .app-shell .stats-risk .stat-card-spark, .app-shell .stats-todo .stat-card-spark, .app-shell .stats-featured .stat-card-ring, .app-shell .stats-today .stat-card-ring, .app-shell .stats-conflict .stat-card-ring, .app-shell .stats-risk .stat-card-ring, .app-shell .stats-todo .stat-card-ring { display: none !important; } /* 6. 待办进度条反白调整 */ .app-shell .stats-todo progress { background-color: rgba(255, 255, 255, 0.2) !important; border: none !important; } .app-shell .stats-todo progress::-webkit-progress-bar { background-color: rgba(255, 255, 255, 0.2) !important; } .app-shell .stats-todo progress::-webkit-progress-value { background-color: #ffffff !important; } .app-shell .stats-todo progress::-moz-progress-bar { background-color: #ffffff !important; } /* === Style Block Separator === */ .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-featured, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-today, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-conflict, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-risk, .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-todo, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-featured, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-today, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-conflict, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-risk, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-todo { background: linear-gradient(180deg, #3a458d 0%, #4455c3 100%) !important; border: 1px solid rgba(112, 138, 255, 0.18) !important; box-shadow: 0 12px 24px rgba(86, 116, 235, 0.12) !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .stats-featured .stat-card-label, .app-shell:not(.mobile-shell)[data-role="boss"] .stats-featured .stat-card-label { color: #111827 !important; font-weight: 800 !important; } /* === Style Block Separator === */ /* ========================================================= UX Audit Track 1 Improvements ========================================================= */ /* 1. Swift Transitions (Override slow bouncy animations) */ .app-shell .modal, .app-shell .modal-content, .app-shell .panel, .app-shell .card, .app-shell .btn { transition-duration: 0.18s !important; transition-timing-function: ease-out !important; } /* 2. Modal Spacing & Diffuse Shadows */ .app-shell .modal-content { padding: 24px !important; box-shadow: 0 25px 50px -12px rgba(54,72,135,0.25) !important; } /* 3. Button Micro-interactions (Ensure physical feel) */ .app-shell .btn:active, .app-shell .nav-item:active { transform: scale(0.97) !important; } /* 4. AI Input Magical Glow */ .app-shell [data-role="assistant-composer-input"]:focus, .app-shell .assistant-composer-input:focus-within { border-color: #a5b4fc !important; box-shadow: 0 0 0 4px rgba(165, 180, 252, 0.25), 0 0 20px rgba(165, 180, 252, 0.15) !important; } /* 5. Empty State Illustrations (缓解焦虑感的插画) */ .app-shell .empty-state, .app-shell .is-empty { position: relative; padding: 32px 20px !important; text-align: center; color: #9CA3AF !important; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; } /* Removed coffee cup illustration */ /* 6. Settings/Logout Icon Polish (增强侧边栏图标质感) */ .app-shell .nav-settings-row-icon { /* color: #6B7280 !important; removed to fix contrast */ transform: scale(1.15); /* 让图标看起来更饱满饱满 */ } .app-shell .nav-settings-logout .nav-settings-row-icon { color: #EF4444 !important; /* 退出图标给予红色警示 */ } .app-shell .nav-settings-logout .nav-settings-row-copy strong { color: #EF4444 !important; } /* === Style Block Separator === */ /* 1. 扩大复选框热区与协议点击范围 */ .login-agreement { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 -16px; /* 补偿 padding */ border-radius: 12px; cursor: pointer; transition: background 0.2s ease; } .login-agreement:hover { background: rgba(37, 99, 235, 0.04); } .login-agreement input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; transform: scale(1.2); } /* P3-3: Sweet Mode CSS removed */ /* P2-3: Image fallback - gracefully handle broken images */ img[src$=".png"]:not([alt=""]) { min-height: 20px; } img.stat-card-visual-illustration, img.brand-mark-image, img.auth-shot-logo-image { object-fit: contain; } /* 3. 悬浮弹窗的丝滑过渡 */ .modal-overlay { transition: opacity 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out); backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .modal-card { transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); animation: modal-pop 0.4s var(--ease-spring) forwards; } @keyframes modal-pop { 0% { opacity: 0; transform: scale(0.9) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* 4. 底栏操作区图标强化 */ .login-footer-links a::before { display: inline-block; margin-right: 6px; vertical-align: middle; } .login-footer-links a:first-child::before { content: "🏢"; font-size: 1.1em; } .login-footer-links a:last-child::before { content: "🤝"; font-size: 1.1em; } /* 5. 获取验证码按钮点击微交互 */ .btn-get-code { transition: transform 0.1s ease, color 0.2s ease; } .btn-get-code:active { transform: scale(0.95); color: var(--brand); } /* 6. 登录大卡片的空间悬浮感 */ .login-card { box-shadow: 0 25px 50px -12px rgba(54, 72, 135, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important; } /* 7. SSO 按钮毛玻璃拟态 */ .sso-btn { background: rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; } .sso-btn:hover { background: rgba(255, 255, 255, 0.8) !important; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important; } /* Theme Overrides */ html[data-theme="dark"] .app-shell, html[data-theme="dark"] .main-shell { background: var(--bg-page) !important; } html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card { background: var(--bg-card) !important; } html[data-theme="dark"] img { filter: brightness(0.8) contrast(1.2); } /* Premium Datetime Picker */ input[type="datetime-local"] { appearance: none; -webkit-appearance: none; background-color: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; padding: 12px 16px; color: var(--text-main); font-family: inherit; font-size: 14px; width: 100%; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } input[type="datetime-local"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59, 107, 255, 0.1); } html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; opacity: 0.6; } input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Drawer footer button alignment */ .detail-drawer [class*="footer"], .detail-drawer [class*="actions"] { display: flex !important; gap: 12px; } .detail-drawer [class*="footer"] button, .detail-drawer [class*="actions"] button { flex: 1; justify-content: center; } /* Hover effects */ .side-nav .nav-item { transition: background 0.2s var(--ease-emphasized), color 0.2s var(--ease-emphasized), transform 0.2s var(--ease-emphasized), box-shadow 0.2s var(--ease-emphasized); } .side-nav .nav-item:not(.active):hover { background: var(--bg-hover); border-radius: 8px; transform: translateX(4px); } .search-container input, .search-bar input { transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .search-container:focus-within, .search-bar:focus-within { box-shadow: 0 0 0 3px rgba(59, 107, 255, 0.15) !important; border-color: var(--brand) !important; } /* Empty state animations */ .empty-state { animation: fadeIn 0.4s ease forwards; } \r\n /* P1-4 修复: 页面标题防Logo遮挡 */ .page-header { overflow: visible !important; } .page-header .page-title-area { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .page-header .page-header-icon { flex-shrink: 0; } /* 确保移动端标题不被截断 */ @media (max-width: 768px) { .page-header .page-title { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 160px); } } /* Boss desktop final alignment overrides */ .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand { padding: 0 10px 0 !important; height: 96px !important; min-height: 96px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-top { margin-bottom: 0 !important; min-height: 0 !important; height: 100% !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-lockup { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; width: 100% !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-row { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; width: 100% !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-row .brand-mark { width: 60px !important; height: 60px !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-copy { display: grid !important; justify-items: center !important; gap: 0 !important; width: 100% !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-tagline { display: none !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-title { font-size: 24px !important; line-height: 1.02 !important; letter-spacing: -0.04em !important; margin: 0 !important; transform: translateY(-4px) !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-home-reference-header, .app-shell:not(.mobile-shell)[data-role="boss"] .page-header.boss-pending-reference-header { min-height: 120px !important; padding: 0 28px !important; display: flex !important; align-items: center !important; border-radius: 0 !important; box-shadow: none !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-topline, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-topline { width: 100% !important; min-height: 74px !important; margin-inline: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 28px !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-lead { flex: 1 1 auto !important; align-items: center !important; gap: 14px !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack { display: grid !important; align-content: center !important; gap: 6px !important; min-width: 0 !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack h3 { margin: 0 !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack p { margin: 0 !important; max-width: 44ch !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-homepage-reference-icon.boss-overview-header-icon { transform: none !important; transform-origin: center center !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-controls { display: flex !important; align-items: center !important; justify-content: flex-end !important; align-self: center !important; gap: 0 !important; min-width: max-content !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action-row, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-row { display: inline-flex !important; align-items: center !important; gap: 14px !important; } /* Desktop brand/header icon sync for assistant + boss */ .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand, .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand { padding: 6px 10px 22px !important; height: auto !important; min-height: 0 !important; display: block !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-top, .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-top { margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important; display: block !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-lockup, .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-lockup { display: grid !important; gap: 14px !important; width: 100% !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-row, .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-row { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 18px !important; width: 100% !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-row .brand-mark, .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-row .brand-mark { width: 65px !important; height: 65px !important; flex: 0 0 65px !important; margin: 0 !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-row .brand-mark-image, .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-row .brand-mark-image { width: 65px !important; height: 65px !important; margin: 0 !important; object-fit: contain !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-copy, .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-copy { display: grid !important; justify-items: start !important; align-content: center !important; gap: 0 !important; width: auto !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-title, .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-title { font-size: 28px !important; line-height: 1.1 !important; letter-spacing: -0.04em !important; margin: 0 !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-home-reference-header, .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-route-reference-header:not(.assistant-home-reference-header), .app-shell:not(.mobile-shell)[data-role="boss"] .page-header.boss-pending-reference-header { min-height: 120px !important; padding: 0 28px !important; display: flex !important; align-items: center !important; border-radius: 0 !important; box-shadow: none !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-topline, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-topline:not(.assistant-home-reference-topline), .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-topline { width: 100% !important; min-height: 74px !important; margin-inline: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 28px !important; } .app-shell:not(.mobile-shell) .assistant-home-reference-icon-symbol, .app-shell:not(.mobile-shell) .assistant-route-reference-icon-symbol, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-icon, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-icon { width: 65px !important; height: 65px !important; flex: 0 0 65px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .app-shell:not(.mobile-shell) .assistant-home-reference-icon-symbol img, .app-shell:not(.mobile-shell) .assistant-route-reference-icon-symbol img, .app-shell:not(.mobile-shell) img.homepage-panel-icon-img, .app-shell:not(.mobile-shell) .assistant-home-reference-icon-symbol svg, .app-shell:not(.mobile-shell) .assistant-route-reference-icon-symbol svg { width: 65px !important; height: 65px !important; object-fit: contain !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-homepage-reference-icon.boss-overview-header-icon img { transform: scale(1.14) !important; transform-origin: center center !important; } /* ── 虚拟滚动优化 (原生 CSS content-visibility) ── */ .event-card, .todo-card, .command-card, .assistant-message { content-visibility: auto; contain-intrinsic-size: auto 120px; } .vs-hidden { /* For older browsers without content-visibility, we can use IntersectionObserver class fallback */ /* opacity: 0; pointer-events: none; */ } /* Boss desktop header lead final polish */ .app-shell:not(.mobile-shell)[data-role="boss"] .page-header.boss-pending-reference-header { min-height: 118px !important; padding: 0 28px !important; display: flex !important; align-items: center !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-topline { width: 100% !important; min-height: 76px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-lead { flex: 1 1 auto !important; min-width: 0 !important; display: grid !important; grid-template-columns: 65px minmax(0, 1fr) !important; align-items: center !important; column-gap: 18px !important; row-gap: 0 !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-lead > .assistant-homepage-reference-icon, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-lead > .assistant-home-reference-icon-symbol, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-home-reference-lead > .assistant-route-reference-icon-symbol { width: 65px !important; height: 65px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack { min-width: 0 !important; display: grid !important; align-content: center !important; gap: 5px !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack h3 { margin: 0 !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-stack p { margin: 0 !important; max-width: 46ch !important; line-height: 1.34 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-controls { min-width: max-content !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; align-self: center !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-date-row, .app-shell:not(.mobile-shell)[data-role="boss"] .boss-pending-reference-action-row { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; } /* Boss desktop brand block final vertical lockup */ .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand { padding: 0 10px 2px !important; min-height: 96px !important; height: 96px !important; border-bottom: 1px solid rgba(232, 237, 246, 0.92) !important; display: flex !important; align-items: stretch !important; justify-content: center !important; box-sizing: border-box !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-top { width: 100% !important; height: 100% !important; min-height: 0 !important; margin-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-lockup { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-row { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; transform: translateY(-4px) !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-row .brand-mark { width: 65px !important; height: 65px !important; flex: 0 0 65px !important; margin: 0 !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-row .brand-mark-image { width: 65px !important; height: 65px !important; margin: 0 !important; object-fit: contain !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-copy { width: 100% !important; display: grid !important; justify-items: center !important; align-content: center !important; margin: -8px 0 0 !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-title { display: block !important; margin: 0 !important; font-size: 24px !important; line-height: 1 !important; letter-spacing: -0.04em !important; text-align: center !important; transform: translateY(-1px) !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand-tagline { display: none !important; } /* Assistant desktop sync with current boss header + brand block */ .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-home-reference-header, .app-shell:not(.mobile-shell)[data-role="assistant"] .page-header.assistant-route-reference-header:not(.assistant-home-reference-header) { min-height: 118px !important; padding: 0 28px !important; display: flex !important; align-items: center !important; border-radius: 0 !important; box-shadow: none !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-topline, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-topline:not(.assistant-home-reference-topline) { width: 100% !important; min-height: 76px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-lead, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-lead:not(.assistant-home-reference-lead) { flex: 1 1 auto !important; min-width: 0 !important; display: grid !important; grid-template-columns: 65px minmax(0, 1fr) !important; align-items: center !important; column-gap: 18px !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-lead > .assistant-homepage-reference-icon, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-lead > .assistant-home-reference-icon-symbol, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-lead > .assistant-route-reference-icon-symbol, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-lead > .assistant-home-reference-icon-symbol { width: 65px !important; height: 65px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) { min-width: 0 !important; display: grid !important; align-content: center !important; gap: 5px !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack h3, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) h3 { margin: 0 !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-stack p, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-stack:not(.assistant-home-reference-stack) p { margin: 0 !important; max-width: 46ch !important; line-height: 1.34 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-controls { min-width: max-content !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; align-self: center !important; gap: 0 !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-date-row, .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-home-reference-action-row { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand { padding: 0 10px 2px !important; min-height: 96px !important; height: 96px !important; display: flex !important; align-items: stretch !important; justify-content: center !important; box-sizing: border-box !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-top { width: 100% !important; height: 100% !important; min-height: 0 !important; margin-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-lockup { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-row { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; transform: translateY(-4px) !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-row .brand-mark { width: 65px !important; height: 65px !important; flex: 0 0 65px !important; margin: 0 !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-row .brand-mark-image { width: 65px !important; height: 65px !important; margin: 0 !important; object-fit: contain !important; transform: none !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-copy { width: 100% !important; display: grid !important; justify-items: center !important; align-content: center !important; margin: -8px 0 0 !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-title { display: block !important; margin: 0 !important; font-size: 24px !important; line-height: 1 !important; letter-spacing: -0.04em !important; text-align: center !important; transform: translateY(-1px) !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand-tagline { display: none !important; } /* ========================================= */ /* FIX: Dark Mode Contrast for Chips/Pills */ /* ========================================= */ html[data-theme="dark"] .info-chip { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: var(--text-main) !important; } html[data-theme="dark"] .event-detail-chip, html[data-theme="dark"] .event-comment-chip { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; /* We don't override color so the inline --comment-color or --event-color stays, which will look great on this dark translucent background */ } html[data-theme="dark"] .event-annotation-inline { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* ========================================= */ /* FIX: Dark Mode Contrast for Normal Badges */ /* ========================================= */ html[data-theme="dark"] .badge:not([class*="priority-"]) { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: var(--text-sub) !important; } /* Also ensure segmented buttons, pill toggles, and generic info-chips are truly darkened */ html[data-theme="dark"] .info-chip, html[data-theme="dark"] .quick-chip, html[data-theme="dark"] .tab-button, html[data-theme="dark"] .segmented button, html[data-theme="dark"] .filter-chip:not(.active) { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--text-main) !important; } html[data-theme="dark"] .event-card .info-chip.is-time { background: rgba(255, 255, 255, 0.1) !important; color: var(--text-main) !important; } /* ========================================= */ /* FIX: Dark Mode AI Avatar Styling */ /* ========================================= */ html[data-theme="dark"] .assistant-chat-avatar.ai { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } html[data-theme="dark"] .assistant-chat-avatar.ai img { /* Soft slate/silver filter for the robot circle, highly premium in dark mode */ filter: brightness(0) saturate(100%) invert(80%) sepia(10%) saturate(300%) hue-rotate(180deg) brightness(85%) contrast(90%) !important; opacity: 0.85 !important; animation: none !important; /* Disable the bright blue glow animation in dark mode to prevent flashing */ } /* Add a subtle dark mode friendly breathe animation instead */ html[data-theme="dark"] .assistant-message-row.ai.is-typing .assistant-chat-avatar.ai img { animation: assistantAvatarDarkGlow 1.8s var(--ease-in-out) infinite !important; } @keyframes assistantAvatarDarkGlow { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.4; } } /* Also ensure user avatar in dark mode doesn't have glaring bright gradients */ html[data-theme="dark"] .assistant-chat-avatar.user { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: var(--text-main) !important; box-shadow: none !important; } /* ========================================= */ /* FIX: Dark Mode Remaining Avatars */ /* ========================================= */ html[data-theme="dark"] .team-avatar { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--text-main) !important; box-shadow: none !important; } html[data-theme="dark"] .inbox-reference-message-avatar { background: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.2) !important; box-shadow: inset 0 1px 0 rgba(16, 185, 129, 0.1) !important; } html[data-theme="dark"] .inbox-reference-message-avatar svg path { fill: #34d399 !important; } html[data-theme="dark"] .inbox-reference-message-avatar img { filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(400%) hue-rotate(100deg) brightness(90%) contrast(90%) !important; } /* Desktop icon optical size sync */ .app-shell:not(.mobile-shell) .nav-brand-row .brand-mark-image { width: 65px !important; height: 65px !important; object-fit: contain !important; transform: none !important; } .app-shell:not(.mobile-shell) .assistant-home-reference-icon-symbol img, .app-shell:not(.mobile-shell) .assistant-route-reference-icon-symbol img, .app-shell:not(.mobile-shell) img.homepage-panel-icon-img { width: 65px !important; height: 65px !important; object-fit: contain !important; transform-origin: center center !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-homepage-reference-icon.assistant-calendar-header-icon img { transform: scale(1.16) !important; } .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-homepage-reference-icon.boss-overview-header-icon img { transform: scale(1.14) !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-icon-symbol.assistant-pending-header-icon img, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-route-reference-icon-symbol.boss-pending-header-icon img { transform: scale(1.14) !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-icon-symbol.assistant-todos-header-icon img, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-route-reference-icon-symbol.boss-todos-header-icon img { transform: scale(1.1) !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-icon-symbol.assistant-guide-header-icon img, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-route-reference-icon-symbol.boss-guide-header-icon img { transform: scale(1.2) !important; } .app-shell:not(.mobile-shell)[data-role="assistant"] .assistant-route-reference-icon-symbol.assistant-settings-header-icon img, .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-route-reference-icon-symbol.boss-settings-header-icon img { transform: scale(1.08) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="assistant"] .nav-brand, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .nav-brand { border-bottom-color: rgba(148, 163, 184, 0.12) !important; } /* ========================================= */ /* FIX: Dark Mode P1-P5 Buttons & Wrapping */ /* ========================================= */ html[data-theme="dark"] .priority-option:not(.active):not(.clear) { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #f8fafc !important; } html[data-theme="dark"] .priority-option:not(.active):not(.clear):hover { background: rgba(255, 255, 255, 0.1) !important; } /* Prevent Action/Ghost Buttons from wrapping and squishing text */ .action-button, .ghost-button { white-space: nowrap !important; } /* Fix for button sizes in pending-card-actions / todo cards */ .pending-card-actions .event-comment-chip { min-height: 28px !important; padding: 0 10px !important; } /* ========================================= */ /* FIX: Dark Mode Calendar View Toggle */ /* ========================================= */ html[data-theme="dark"] .app-shell .calendar-view-toggle { background: rgba(15, 23, 42, 0.6) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .app-shell .calendar-view-toggle .view-btn { color: var(--text-sub) !important; } html[data-theme="dark"] .app-shell .calendar-view-toggle .view-btn.active { background: rgba(255, 255, 255, 0.1) !important; color: var(--brand) !important; /* Keep the brand color to pop or use #f8fafc */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; } /* ===================================================== */ /* FIX: 点一下就像整页刷新 —— 抑制重渲染时的入场动画 */ /* 由 core-render.js 在 上切换 data-rerendering。 */ /* 首帧/首次加载依然保留原动画；只有状态切换后的重建会被抑制。 */ /* ===================================================== */ html[data-rerendering] .page-body, html[data-rerendering] .page-body.mobile, html[data-rerendering] .app-shell.mobile-shell .page-body.mobile, html[data-rerendering] .main-shell > .page-content, html[data-rerendering] .main-content, html[data-rerendering] .route-page, html[data-rerendering] .stat-card, html[data-rerendering] .event-card, html[data-rerendering] .todo-card, html[data-rerendering] .pending-card, html[data-rerendering] .command-card, html[data-rerendering] .mailbox-feed-item, /* ⚠️ 新增：pageEnterV2 作用在 .page-body 的子级而不是 .page-body 自己， 原抑制规则覆盖不到。每次发送智能助手消息时 render() 重渲染， .stats-row（:first-child）/ .layout-boss（:nth-child(2)）会重播 pageEnterV2 0.32s， 带着整个聊天面板一起 fade，用户感受到"全屏闪一下太突兀"。 这里把这三层子级也纳入抑制名单。 */ html[data-rerendering] .page-body > *:first-child, html[data-rerendering] .page-body > *:nth-child(2), html[data-rerendering] .page-body > *:nth-child(3), /* ⚠️ 新增：AI 回复里的"建议动作卡 / 证据块"在每次 render 时也会重播 fadeSlideIn 0.35s， 导致历史消息每次都跳一下。重渲染时一并抑制。 */ html[data-rerendering] .chat-message-content .evidence-block, html[data-rerendering] .chat-message-content .action-card-block { animation: none !important; } /* View Transitions：整屏 160ms 轻柔交叉淡入，替代 CSS 入场动画 */ @supports (view-transition-name: none) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); mix-blend-mode: normal; } ::view-transition-old(root) { animation-name: cascade-vt-fade-out; } ::view-transition-new(root) { animation-name: cascade-vt-fade-in; } @keyframes cascade-vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes cascade-vt-fade-in { from { opacity: 0; } to { opacity: 1; } } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* ========================================================= 弱设备 / 用户偏好降级：关闭昂贵的 backdrop-filter - update: slow → 系统自报的低刷新/低性能设备 - prefers-reduced-transparency → 用户主动要求减少透明 - 去掉模糊后以半透明背景替代，保持信息层级 ========================================================= */ @media (update: slow), (prefers-reduced-transparency: reduce) { .modal-overlay, .onboarding-overlay, .mobile-app-bar, .mobile-nav, .mobile-quick-dock, .assistant-chat-panel, .comment-modal-card, .detail-drawer, .onb-resume-fab, .onb-resume-attention-layer, .auth-shot-field, .auth-shot-submit, .sso-btn, .login-card, #fission-holding-area, #moat-sandtable-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ========================================================= 弱设备降级：剥离 box-shadow 过渡（paint 昂贵） - 桌面/高性能设备视觉不变 - 低端设备 hover 时 shadow 直接切换不再平滑过渡，换来 60fps transform ========================================================= */ @media (update: slow) { .nav-item, .stat-card, .event-card, .todo-card, .command-card, .pending-card, .mailbox-feed-item, .month-entry, .week-chip { transition: transform 0.25s var(--ease-out), background 0.25s ease !important; } } /* ========================================================= 触屏/无 hover 设备：彻底取消 hover 时的 box-shadow 动画 - 触屏 hover 常为"粘滞"效果，不需要平滑过渡 ========================================================= */ @media (hover: none), (pointer: coarse) { .event-card, .todo-card, .command-card, .pending-card, .mailbox-feed-item, .stat-card, .nav-item { transition: transform 0.2s var(--ease-out) !important; } } /* ========================================================= 智能对话 V3 视觉升级 —— 对标 ChatGPT / Claude / 飞书 AI 目标：去掉"原型/学生作品"观感，让聊天区像成熟 AI 产品。 不改 HTML，只做 CSS override。 ========================================================= */ /* ── 1. 面板顶部瘦身：标题行更轻，info-chip 降噪 ── */ .assistant-chat-panel .panel-header { padding-bottom: 8px; } .assistant-chat-panel .panel-title h4 { font-weight: 600; letter-spacing: -0.01em; } .assistant-chat-panel .panel-title p { opacity: 0.72; } .assistant-chat-panel .assistant-chat-header-actions .info-chip { background: transparent !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; color: rgba(71, 85, 105, 0.9) !important; font-weight: 500 !important; box-shadow: none !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-chat-header-actions .info-chip { border-color: rgba(255, 255, 255, 0.08) !important; color: rgba(203, 213, 225, 0.75) !important; } .assistant-chat-panel .assistant-chat-header-actions .ghost-button { font-weight: 500; opacity: 0.8; } /* ── 2. 会话状态条视觉降级（不移除，只让它不再抢戏） ── */ .assistant-chat-panel .assistant-conversation-status { gap: 6px !important; padding: 10px 14px; margin-bottom: 8px; border-radius: 14px; background: rgba(15, 23, 42, 0.025); border: 1px solid rgba(15, 23, 42, 0.04); } html[data-theme="dark"] .assistant-chat-panel .assistant-conversation-status { background: rgba(255, 255, 255, 0.02) !important; border-color: rgba(255, 255, 255, 0.04) !important; } .assistant-chat-panel .assistant-conversation-goal strong { font-size: 12px; font-weight: 600; color: rgba(71, 85, 105, 0.8); letter-spacing: 0.02em; text-transform: none; } .assistant-chat-panel .assistant-conversation-goal span { font-size: 13px; color: rgba(51, 65, 85, 0.92); line-height: 1.6; } .assistant-chat-panel .assistant-conversation-goal small { font-size: 12px; opacity: 0.65; } .assistant-chat-panel .assistant-context-badge { min-height: 24px !important; padding: 2px 10px !important; font-size: 11.5px !important; font-weight: 500 !important; background: rgba(255, 255, 255, 0.5) !important; border: 1px solid rgba(15, 23, 42, 0.06) !important; color: rgba(71, 85, 105, 0.8) !important; box-shadow: none !important; border-radius: 8px !important; letter-spacing: 0 !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-context-badge { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.06) !important; color: rgba(203, 213, 225, 0.7) !important; } .assistant-chat-panel .assistant-mode-badge { font-size: 11.5px !important; font-weight: 500; padding: 3px 10px; border-radius: 8px; background: rgba(37, 99, 235, 0.08); color: rgba(37, 99, 235, 0.95); border: none; letter-spacing: 0; } html[data-theme="dark"] .assistant-chat-panel .assistant-mode-badge { background: rgba(96, 165, 250, 0.12) !important; color: rgba(147, 197, 253, 0.95) !important; } /* ── 3. 消息列表：更大呼吸、自定义滚动条 ── */ .assistant-chat-panel .assistant-message-list { gap: 22px !important; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.25) transparent; } .assistant-chat-panel .assistant-message-list::-webkit-scrollbar { width: 6px; } .assistant-chat-panel .assistant-message-list::-webkit-scrollbar-track { background: transparent; } .assistant-chat-panel .assistant-message-list::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.22); border-radius: 999px; } .assistant-chat-panel .assistant-message-list::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.4); } html[data-theme="dark"] .assistant-chat-panel .assistant-message-list { scrollbar-color: rgba(148, 163, 184, 0.2) transparent; } html[data-theme="dark"] .assistant-chat-panel .assistant-message-list::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.18); } /* ── 4. 消息行：间距微调 ── */ .assistant-chat-panel .assistant-message-row { gap: 10px !important; align-items: flex-start; } /* ── 5. 头像：圆角方形（squircle），44px；AI 侧直接承载彩色 SVG 吉祥物 ── */ .assistant-chat-panel .assistant-chat-avatar { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; border-radius: 12px !important; box-shadow: none !important; margin-top: 0; } .assistant-chat-panel .assistant-chat-avatar.ai { /* 极浅色的柔和底托，让多彩 SVG 在任何背景下都有边界感 */ background: linear-gradient(180deg, #f5f7ff 0%, #e8ecff 100%) !important; border: 1px solid rgba(107, 125, 255, 0.18) !important; box-shadow: 0 3px 10px rgba(59, 70, 196, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; padding: 2px !important; } .assistant-chat-panel .assistant-chat-avatar.ai img { width: 100% !important; height: 100% !important; object-fit: contain !important; /* 新 SVG 本身就是彩色玻璃拟态，关掉之前把黑色染白的滤镜 */ filter: none !important; opacity: 1 !important; } .assistant-chat-panel .assistant-chat-avatar.user { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; border: none !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 600 !important; color: #fff !important; letter-spacing: 0 !important; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.24) !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-chat-avatar.ai { /* 深色下换一层冷调半透明玻璃底，让吉祥物不被夜色吞掉 */ background: linear-gradient(180deg, rgba(48, 62, 120, 0.55) 0%, rgba(30, 40, 85, 0.7) 100%) !important; border: 1px solid rgba(148, 163, 255, 0.22) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-chat-avatar.ai img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4)) !important; opacity: 1 !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-chat-avatar.user { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important; color: #fff !important; border: none !important; border-radius: 12px !important; } /* ── 6. AI 消息：白色气泡 + 细边框，和用户气泡冷暖/明暗错开 ── */ .assistant-chat-panel .assistant-message.ai { background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.07) !important; border-radius: 18px !important; padding: 12px 16px !important; margin: 0 !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important; color: var(--text-main) !important; font-size: 15px !important; line-height: 1.72 !important; max-width: 100% !important; letter-spacing: 0; } html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai { background: rgba(255, 255, 255, 0.045) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; color: #f1f5f9 !important; } .assistant-chat-panel .assistant-message.ai.is-typing, .assistant-chat-panel .assistant-message.ai.is-thinking { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.07) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai.is-typing, html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai.is-thinking { background: rgba(255, 255, 255, 0.045) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } /* ── 7. 用户消息：柔和中性气泡，无边框无渐变 ── */ .assistant-chat-panel .assistant-message.user, html[data-theme="dark"] .assistant-chat-panel .assistant-message.user { background: rgba(15, 23, 42, 0.05) !important; border: none !important; border-radius: 18px !important; padding: 12px 16px !important; color: var(--text-main) !important; font-size: 15px !important; line-height: 1.7 !important; box-shadow: none !important; max-width: 100% !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-message.user { background: rgba(255, 255, 255, 0.06) !important; color: #f1f5f9 !important; } /* ── 8. 气泡 + 时间戳级联容器：时间戳外置到气泡下方 ── * 新 DOM 结构： * .assistant-message-row * ├─ .assistant-chat-avatar * └─ .assistant-message-stack ← 新增纵向容器 * ├─ .assistant-message ← 气泡 * └─ .assistant-msg-timestamp ← 时间戳（气泡外） */ .assistant-chat-panel .assistant-message-stack { display: flex; flex-direction: column; min-width: 0; /* 防 flex item 撑破父级 */ max-width: calc(100% - 56px); /* 原来气泡 max-width 搬到 stack */ gap: 4px; } .assistant-chat-panel .assistant-message-row.ai .assistant-message-stack { align-items: flex-start; /* AI 气泡、时间戳都靠左 */ } .assistant-chat-panel .assistant-message-row.user .assistant-message-stack { align-items: flex-end; /* User 气泡、时间戳都靠右 */ margin-left: auto; /* stack 整体推到 row 最右 */ } .assistant-chat-panel .assistant-msg-timestamp { display: block !important; font-size: 11px !important; margin: 0 !important; /* 气泡与时间戳间距由 stack gap 负责 */ padding: 0 4px !important; /* 略离气泡边缘，不紧贴 */ color: rgba(100, 116, 139, 0.65) !important; opacity: 0; /* 默认隐藏，hover 才淡入 */ transition: opacity 180ms ease; letter-spacing: 0; line-height: 1.2; font-variant-numeric: tabular-nums; pointer-events: none; /* 不挡 hover 事件 */ } .assistant-chat-panel .assistant-message-row:hover .assistant-msg-timestamp { opacity: 1; } html[data-theme="dark"] .assistant-chat-panel .assistant-msg-timestamp { color: rgba(148, 163, 184, 0.55) !important; } /* ── 9. 思考中点点：更柔和灰色 ── */ .assistant-chat-panel .assistant-thinking-indicator { display: inline-flex; align-items: center; gap: 10px; } .assistant-chat-panel .assistant-thinking-dots span, .assistant-chat-panel .assistant-thinking-dots .dot { width: 7px !important; height: 7px !important; background: rgba(100, 116, 139, 0.55) !important; opacity: 0.6; } .assistant-chat-panel .assistant-thinking-step-text { font-size: 13.5px !important; color: rgba(100, 116, 139, 0.9) !important; font-weight: 500 !important; letter-spacing: 0; white-space: nowrap; /* 防 flex column 下被挤成一字一行 */ } html[data-theme="dark"] .assistant-chat-panel .assistant-thinking-dots span, html[data-theme="dark"] .assistant-chat-panel .assistant-thinking-dots .dot { background: rgba(148, 163, 184, 0.55) !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-thinking-step-text { color: rgba(148, 163, 184, 0.92) !important; } /* ── 10. 打字光标：从蓝色圆点改为细竖线 ── */ .assistant-chat-panel .assistant-message-caret { width: 2px !important; height: 1.1em !important; margin-left: 3px !important; margin-bottom: -3px !important; vertical-align: text-bottom !important; border-radius: 1px !important; background: currentColor !important; opacity: 0.75; animation: assistantCaretBlink 1.1s ease-in-out infinite !important; } /* ── 11. 快捷 chip 视觉降级：细边框、低饱和 ── */ .assistant-chat-panel .assistant-chips { gap: 8px !important; margin-bottom: 12px !important; } .assistant-chat-panel .assistant-chip { min-height: 32px !important; padding: 0 12px !important; font-size: 12.5px !important; font-weight: 500 !important; border-radius: 10px !important; background: rgba(15, 23, 42, 0.035) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; color: rgba(51, 65, 85, 0.95) !important; box-shadow: none !important; letter-spacing: 0 !important; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .assistant-chat-panel .assistant-chip:hover { background: rgba(15, 23, 42, 0.06) !important; border-color: rgba(15, 23, 42, 0.14) !important; transform: none !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-chip { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: rgba(203, 213, 225, 0.9) !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-chip:hover { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.14) !important; } /* ── 12. 输入区：更精致的尺寸和内阴影 ── */ .assistant-chat-panel .assistant-compose { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; padding-top: 4px; } .assistant-chat-panel .assistant-compose input { min-height: 46px !important; border-radius: 14px !important; padding: 0 16px !important; font-size: 14.5px !important; background: rgba(15, 23, 42, 0.03) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: none !important; transition: border-color 160ms ease, background 160ms ease; } .assistant-chat-panel .assistant-compose input:focus { border-color: rgba(37, 99, 235, 0.45) !important; background: #fff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-compose input { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #f1f5f9 !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-compose input:focus { border-color: rgba(96, 165, 250, 0.5) !important; background: rgba(255, 255, 255, 0.07) !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important; } .assistant-chat-panel .assistant-compose .action-button { min-height: 46px !important; min-width: 72px !important; padding: 0 18px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; } /* ── 13. 空状态：文案更柔和居中 ── */ .assistant-chat-panel .assistant-chat-empty { padding: 48px 16px !important; text-align: center; color: rgba(71, 85, 105, 0.7) !important; } html[data-theme="dark"] .assistant-chat-panel .assistant-chat-empty { color: rgba(148, 163, 184, 0.7) !important; } /* ── 14. AI 打字态不再加 border/shadow（旧规则在暗色模式用 !important 需要压过）── */ .assistant-chat-panel .assistant-message-row.ai.is-typing .assistant-chat-avatar.ai, .assistant-chat-panel .assistant-message-row.ai.is-typing .assistant-chat-avatar.ai img { animation: none !important; } .assistant-chat-panel .assistant-message-row.ai.is-typing .assistant-chat-avatar.ai { animation: assistantAvatarBreathe 1.8s var(--ease-in-out) infinite !important; } /* ========================================================= AI 消息内 Markdown 元素排版 LLM 常返回表格/粗体/列表/代码块；气泡内要看起来专业。 ========================================================= */ /* 顶层段落去掉默认外边距（气泡 padding 已经给了间距） */ .assistant-chat-panel .assistant-message.ai > p:first-child, .assistant-chat-panel .assistant-message.user > p:first-child { margin-top: 0 !important; } .assistant-chat-panel .assistant-message.ai > p:last-child, .assistant-chat-panel .assistant-message.user > p:last-child { margin-bottom: 0 !important; } .assistant-chat-panel .assistant-message.ai p, .assistant-chat-panel .assistant-message.user p { margin: 0.5em 0; } /* 粗体 / 斜体 */ .assistant-chat-panel .assistant-message.ai strong, .assistant-chat-panel .assistant-message.ai b { font-weight: 650; color: var(--text-main); } .assistant-chat-panel .assistant-message.ai em, .assistant-chat-panel .assistant-message.ai i { font-style: italic; color: inherit; } /* 标题层级 */ .assistant-chat-panel .assistant-message.ai h1, .assistant-chat-panel .assistant-message.ai h2, .assistant-chat-panel .assistant-message.ai h3, .assistant-chat-panel .assistant-message.ai h4, .assistant-chat-panel .assistant-message.ai h5, .assistant-chat-panel .assistant-message.ai h6 { margin: 0.8em 0 0.4em; font-weight: 650; line-height: 1.35; color: var(--text-main); letter-spacing: -0.01em; } .assistant-chat-panel .assistant-message.ai h1 { font-size: 1.22em; } .assistant-chat-panel .assistant-message.ai h2 { font-size: 1.14em; } .assistant-chat-panel .assistant-message.ai h3 { font-size: 1.06em; } .assistant-chat-panel .assistant-message.ai h4, .assistant-chat-panel .assistant-message.ai h5, .assistant-chat-panel .assistant-message.ai h6 { font-size: 1em; } .assistant-chat-panel .assistant-message.ai > h1:first-child, .assistant-chat-panel .assistant-message.ai > h2:first-child, .assistant-chat-panel .assistant-message.ai > h3:first-child { margin-top: 0 !important; } /* 列表 */ .assistant-chat-panel .assistant-message.ai ul, .assistant-chat-panel .assistant-message.ai ol { margin: 0.5em 0; padding-left: 1.4em; } .assistant-chat-panel .assistant-message.ai li { margin: 0.25em 0; line-height: 1.7; } .assistant-chat-panel .assistant-message.ai li::marker { color: rgba(100, 116, 139, 0.85); } .assistant-chat-panel .assistant-message.ai ul ul, .assistant-chat-panel .assistant-message.ai ul ol, .assistant-chat-panel .assistant-message.ai ol ul, .assistant-chat-panel .assistant-message.ai ol ol { margin: 0.2em 0; } /* 行内代码 */ .assistant-chat-panel .assistant-message.ai code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.9em; padding: 1px 6px; border-radius: 5px; background: rgba(15, 23, 42, 0.06); border: 1px solid rgba(15, 23, 42, 0.04); color: #0f172a; word-break: break-word; } html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai code { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.06); color: #e2e8f0; } /* 代码块 */ .assistant-chat-panel .assistant-message.ai pre { margin: 0.6em 0; padding: 12px 14px; border-radius: 10px; background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.06); overflow-x: auto; font-size: 13.5px; line-height: 1.6; } .assistant-chat-panel .assistant-message.ai pre code { padding: 0; background: transparent; border: none; border-radius: 0; font-size: inherit; color: inherit; white-space: pre; } html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai pre { background: rgba(0, 0, 0, 0.32); border-color: rgba(255, 255, 255, 0.06); } /* 引用 blockquote */ .assistant-chat-panel .assistant-message.ai blockquote { margin: 0.5em 0; padding: 6px 12px; border-left: 3px solid rgba(37, 99, 235, 0.4); background: rgba(37, 99, 235, 0.05); border-radius: 0 6px 6px 0; color: rgba(51, 65, 85, 0.95); } html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai blockquote { border-left-color: rgba(96, 165, 250, 0.5); background: rgba(96, 165, 250, 0.08); color: rgba(203, 213, 225, 0.95); } /* 分割线 */ .assistant-chat-panel .assistant-message.ai hr { margin: 0.9em 0; border: none; border-top: 1px solid rgba(15, 23, 42, 0.08); } html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai hr { border-top-color: rgba(255, 255, 255, 0.08); } /* 链接 */ .assistant-chat-panel .assistant-message.ai a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(37, 99, 235, 0.4); transition: text-decoration-color 160ms ease; } .assistant-chat-panel .assistant-message.ai a:hover { text-decoration-color: rgba(37, 99, 235, 0.85); } html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai a { color: #93c5fd; text-decoration-color: rgba(147, 197, 253, 0.4); } /* 表格 —— 风格：让它"融进"聊天气泡，而不是像一张嵌进去的独立卡片。 * 思路参考 ChatGPT / Claude 的表格：不加外框、不加列竖线、不套独立背景， * 仅靠极淡的行分隔 + thead 下划线 + 留白来分层。 */ .assistant-chat-panel .assistant-message.ai table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 0.6em 0; border-collapse: collapse; border-spacing: 0; font-size: 13.5px; /* 关键：去掉外框、独立背景和圆角 —— 背景由气泡本身提供 */ border: none; background: transparent; } .assistant-chat-panel .assistant-message.ai table thead { background: transparent; } .assistant-chat-panel .assistant-message.ai table th, .assistant-chat-panel .assistant-message.ai table td { padding: 6px 14px 6px 0; /* 用 padding-right 拉开列间距，取代列竖线 */ border: none; text-align: left; vertical-align: top; line-height: 1.55; } .assistant-chat-panel .assistant-message.ai table th:last-child, .assistant-chat-panel .assistant-message.ai table td:last-child { padding-right: 0; } .assistant-chat-panel .assistant-message.ai table th { font-weight: 600; color: var(--text-main); white-space: nowrap; opacity: 0.78; /* 表头轻一点，避免过抢 */ padding-bottom: 8px; border-bottom: 1px solid rgba(15, 23, 42, 0.12); /* 仅表头下方一条细线 */ } /* 行间极淡分隔；末行去掉 */ .assistant-chat-panel .assistant-message.ai table tbody tr + tr td { border-top: 1px solid rgba(15, 23, 42, 0.05); padding-top: 8px; } .assistant-chat-panel .assistant-message.ai table tbody tr td { padding-bottom: 4px; } /* 暗色模式下调整分隔线色调 */ html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai table th { border-bottom-color: rgba(255, 255, 255, 0.18); opacity: 0.85; } html[data-theme="dark"] .assistant-chat-panel .assistant-message.ai table tbody tr + tr td { border-top-color: rgba(255, 255, 255, 0.08); } /* 用户气泡里也可能有简单 markdown（粗体/行内代码），共用小范围样式 */ .assistant-chat-panel .assistant-message.user code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.9em; padding: 1px 6px; border-radius: 5px; background: rgba(15, 23, 42, 0.08); color: inherit; } html[data-theme="dark"] .assistant-chat-panel .assistant-message.user code { background: rgba(255, 255, 255, 0.1); } /* ========================================================= 第 15 节：精致动画加强（A 新消息入场 + B 气泡状态过渡 + C 暗色切换丝滑） ========================================================= */ /* ── A. 新消息入场（最后一条 row 淡入 + 轻微上推） ── * - 首次渲染：所有 row 淡入（自然） * - 后续 rerender：data-rerendering 抑制整列动画，防止历史消息集体重播 * - 但 rerender 时 :last-child（= 新到的消息）需要例外，继续播入场 */ @keyframes assistantMessageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .assistant-chat-panel .assistant-message-list > .assistant-message-row { animation: assistantMessageIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-rerendering] .assistant-chat-panel .assistant-message-list > .assistant-message-row { animation: none !important; /* rerender 时抑制历史消息重播 */ } html[data-rerendering] .assistant-chat-panel .assistant-message-list > .assistant-message-row:last-child { animation: assistantMessageIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; } /* ── B. AI 气泡状态切换过渡（thinking → typing 时气泡内容淡入） ── * 气泡 class 组合：thinking 状态是 "is-thinking is-typing"，开始打字后变为仅 "is-typing"。 * animation-name 从 none 变为 fade，浏览器会重新 trigger 一次动画。 * 打字完成后气泡 class 变为普通，不再匹配此规则，保持静态。 */ @keyframes assistantBubbleContentEnter { from { opacity: 0.35; transform: translateY(2px); } to { opacity: 1; transform: none; } } .assistant-chat-panel .assistant-message.is-typing:not(.is-thinking) { animation: assistantBubbleContentEnter 220ms ease-out; } /* ── C. 暗色模式切换丝滑（只给大面积容器加 transition，避免泛滥） ── * 只过渡背景色 / 文字色 / 边框色。不给 .panel / 卡片加，避免 hover 反馈被拖慢。 */ html, body, .app-shell, .studio-shell, .prototype-frame, .main-content, .page-body, .route-page { transition: background-color 220ms ease, color 180ms ease, border-color 180ms ease; } /* ── 共同：尊重 prefers-reduced-motion ── */ @media (prefers-reduced-motion: reduce) { .assistant-chat-panel .assistant-message-list > .assistant-message-row, html[data-rerendering] .assistant-chat-panel .assistant-message-list > .assistant-message-row:last-child, .assistant-chat-panel .assistant-message.is-typing:not(.is-thinking) { animation: none !important; } html, body, .app-shell, .studio-shell, .prototype-frame, .main-content, .page-body, .route-page { transition: none !important; } } /* ========================================================= iOS / Linear / Arc 物理感动画层（Polish V3） ----------------------------------------------------------- 设计原则： 1. 所有微交互用 --ease-ios 曲线（Linear 名曲线 0.32,0.72,0,1） 2. 按下立刻反馈（80ms），松开自然回弹（240ms spring） 3. 出场比入场快（exit 160ms / enter 240ms） 4. hover 要像磁力吸附：位移 1px、阴影渐显、不抢戏 5. 视图切换、模态弹入有空间层级感 6. 尊重 reduced-motion（已在上方 @media 统一处理） ========================================================= */ /* ── 1. 统一的按压反馈：所有可点击元素 :active 时 scale(0.97) ── */ /* 用 html body 前缀提升优先级，覆盖原规则 */ html body button:not(:disabled):not([aria-disabled="true"]):active, html body .ghost-button:not(:disabled):active, html body .action-button:not(:disabled):active, html body .onb-btn:not(:disabled):active, html body .quick-chip:active, html body .info-chip[data-action]:active, html body .segmented button:active, html body .tab-button:active, html body .chip:active, html body .pill:active, html body .assistant-suggestion-pill:active, html body .assistant-quick-pill:active, html body .mobile-nav-item[data-route]:active, html body .mobile-quick-action:active, html body .mobile-fab:active, html body [data-action]:active, html body [role="button"]:active { transform: scale(0.97) !important; transition: transform var(--duration-instant) var(--ease-ios) !important; } /* 卡片按下时缩得更保守（视觉上卡片本来就大） */ html body .event-card:active, html body .todo-card:active, html body .command-card:active, html body .pending-card:active, html body .mailbox-feed-item:active, html body .stat-card:active, html body .month-entry:active, html body .week-chip:active { transform: translateY(0) scale(0.985) !important; transition: transform var(--duration-instant) var(--ease-ios) !important; } /* ── 2. 磁吸式 hover：微位移 + 阴影层次（仅桌面指针设备） ── */ @media (hover: hover) and (pointer: fine) { html body .event-card:hover:not(:active), html body .todo-card:hover:not(:active), html body .command-card:hover:not(:active), html body .pending-card:hover:not(:active), html body .mailbox-feed-item:hover:not(:active) { transform: translateY(-1px) !important; transition: transform 260ms var(--ease-ios), box-shadow 260ms var(--ease-ios) !important; } /* stat-card 保留原有扩展效果但换 iOS 曲线 */ html body .stat-card:hover:not(:active) { transition: transform 280ms var(--ease-ios-spring), box-shadow 280ms var(--ease-ios) !important; } /* 按钮 hover：轻微抬起 + 阴影平滑 */ html body .action-button:hover:not(:active), html body .onb-btn-primary:hover:not(:active), html body .mobile-quick-action.primary:hover:not(:active) { transform: translateY(-1px); transition: transform var(--duration-base) var(--ease-ios), box-shadow var(--duration-base) var(--ease-ios), background var(--duration-base) var(--ease-ios); } } /* ── 3. 松开按钮时的回弹（key frame 级微动画） ── */ @keyframes ios-release { 0% { transform: scale(0.97); } 60% { transform: scale(1.006); } 100% { transform: scale(1); } } /* 只在指针设备的按钮上启用 release 回弹，避免触屏双响 */ @media (hover: hover) and (pointer: fine) { html body button:not(:disabled):not([aria-disabled="true"]):focus-visible { animation: ios-release 320ms var(--ease-ios-spring); } } /* ── 4. 输入框 focus：边框顺滑过渡 + 聚焦光环（轻） ── */ html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, html body textarea:focus, html body select:focus, html body [contenteditable="true"]:focus { outline: none; transition: border-color var(--duration-fast) var(--ease-ios), box-shadow var(--duration-fast) var(--ease-ios), background var(--duration-fast) var(--ease-ios) !important; } /* ── 5. SVG 图标微交互：按钮 hover 时图标轻放大 ── */ @media (hover: hover) and (pointer: fine) { html body button:not(:disabled):hover > svg, html body .ghost-button:hover > svg, html body .action-button:hover > svg, html body .nav-item:hover .nav-icon svg, html body .mobile-nav-item:hover .mobile-nav-icon svg { transform: scale(1.08); transition: transform var(--duration-base) var(--ease-ios-spring); } html body button > svg, html body .ghost-button > svg, html body .action-button > svg, html body .nav-item .nav-icon svg, html body .mobile-nav-item .mobile-nav-icon svg { transition: transform var(--duration-base) var(--ease-ios); } } /* ── 6. 模态 / 抽屉：spring 弹入 + 更强的空间感 ── */ @keyframes ios-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.94); filter: blur(4px); } 60% { filter: blur(0); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } html body .modal-card, html body .event-modal-card, html body .comment-modal-card, html body .auth-login-card, html body .auth-register-success-card, html body .auth-sso-preview-card, html body .onboarding-modal-card, html body .onboarding-window { animation: ios-modal-in 320ms var(--ease-ios-spring) both !important; transform-origin: 50% 60%; } /* 遮罩用更快的 fade，避免"模态已经弹出、黑纱还在渐入" */ @keyframes ios-backdrop-in { from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } html body .modal-overlay, html body .onboarding-overlay { animation: ios-backdrop-in var(--duration-fast) var(--ease-ios) both !important; } /* ── 7. 列表 stagger 改 iOS 节奏（每项 30ms 间隔，更紧凑） ── */ @keyframes ios-list-enter { from { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(1px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } html body .event-card, html body .todo-card, html body .pending-card, html body .command-card, html body .mailbox-feed-item { animation: ios-list-enter var(--duration-base) var(--ease-ios) both !important; animation-delay: calc(var(--stagger, 0) * 30ms) !important; } /* ── 8. 数字 / 统计卡片的 pop-in（保持已有的 count-up 行为不变） ── */ @keyframes ios-stat-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } html body .stat-card { animation: ios-stat-pop var(--duration-slow) var(--ease-ios-spring) both !important; animation-delay: calc(var(--stagger, 0) * 30ms) !important; } /* ── 9. checkbox / radio：勾选时 iOS 弹簧回弹（2026-05-16 增强）─ - keyframe 包含 rotate(45deg) 起始帧，避免覆盖勾子的 transform - opacity + scale 组合，让勾子从无到有"弹出来"而非瞬切 - both = backwards (起始帧前置) + forwards (末状态保持) */ @keyframes ios-check-pop { 0% { transform: rotate(45deg) scale(0); opacity: 0; } 55% { transform: rotate(45deg) scale(1.18); opacity: 1; } 100% { transform: rotate(45deg) scale(1); opacity: 1; } } html body input[type="checkbox"]:checked::after, html body input[type="checkbox"]:checked::before { animation: ios-check-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* ── 10. Toast / 消息 flash：iOS 轻量 pulse ── */ @keyframes ios-attention-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.32); } 70% { transform: scale(1.01); box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } html body .flash-input, html body [data-flash="true"] { animation: ios-attention-pulse var(--duration-slow) var(--ease-ios) 1; } /* ── 11. 路由页入场：替代原来的 pageEnter/pageEnterV2 ── */ @keyframes ios-page-enter { from { opacity: 0; transform: translateY(6px) scale(0.995); } to { opacity: 1; transform: translateY(0) scale(1); } } html body .main-shell > .page-content, html body .main-content, html body .route-page, html body main.page-body, html body main.page-body.mobile { animation: ios-page-enter var(--duration-base) var(--ease-ios) both !important; } /* * NOTE(v26 UX fix): 原本这里还包含 `#app > .studio-shell`，但 iOS 动画 `both` 模式会 * 让 `.studio-shell` 的 computed transform 永久保留为 `matrix(1,0,0,1,0,0)` 而非 `none`， * 使所有 position:fixed 的后代（.detail-drawer / .modal-backdrop / .login-overlay） * 都以 .studio-shell 为 containing block，导致： * 1. 抽屉 / 弹窗 跟随页面一起滚动（"可以滑动主页滚动条"） * 2. 抽屉高度被撑到 studio-shell 全高（"查看详情的框直接到底部"） * studio-shell 是应用外壳，不需要每次渲染都重新入场。 */ /* ── 12. 全局统一过渡基线：所有 interactive 元素默认用 iOS 曲线 ── */ html body button, html body .ghost-button, html body .action-button, html body .chip, html body .pill, html body .quick-chip, html body .segmented button, html body .tab-button, html body .nav-item, html body .mobile-nav-item, html body .event-card, html body .todo-card, html body .command-card, html body .pending-card, html body .stat-card, html body .mailbox-feed-item { transition-timing-function: var(--ease-ios) !important; } /* ══════════════════════════════════════════════════════════════ BOSS DARK-MODE COMPREHENSIVE FIX 修复老板端深色模式：聊天面板、快捷chips、输入框、 日历时间轴、指令记录、搜索/日期按钮等 ══════════════════════════════════════════════════════════════ */ /* ── 1. 聊天面板整体：更深背景 + 微妙边框 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-panel { background: rgba(10, 17, 30, 0.98) !important; border-color: rgba(100, 120, 155, 0.18) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } /* ── 2. 聊天面板内嵌卡片（老板工作模式/当前会话目标）── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-panel .assistant-context-badge, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-panel .assistant-mode-badge, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-panel .assistant-conversation-goal, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-panel .assistant-conversation-status { background: rgba(16, 25, 42, 0.96) !important; border-color: rgba(100, 120, 155, 0.22) !important; color: var(--text-main) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-conversation-goal strong, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-conversation-goal h5 { color: #e8b45a !important; } /* ── 3. 聊天面板输入框 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-panel .assistant-compose input { background: rgba(14, 22, 38, 0.96) !important; border-color: rgba(100, 120, 155, 0.22) !important; color: #e2e8f0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-panel .assistant-compose input::placeholder { color: rgba(158, 175, 198, 0.56) !important; } /* ── 4. 聊天面板状态标签（老板视角 / 当前状态 / 待确认动作）── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-panel .assistant-conversation-badges .badge, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-panel .assistant-chat-meta .badge { background: rgba(20, 32, 54, 0.92) !important; border-color: rgba(100, 120, 155, 0.24) !important; color: #94a3b8 !important; } /* ── 5. 快捷操作 chips（优先级排序/今天重点/会前准备/日程概览等）── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chip { background: rgba(18, 28, 48, 0.92) !important; border: 1px solid rgba(100, 120, 155, 0.28) !important; color: #cbd5e1 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chip:hover { background: rgba(24, 38, 62, 0.96) !important; border-color: rgba(129, 140, 248, 0.36) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chips-more > summary.assistant-chip-more { background: rgba(99, 102, 241, 0.14) !important; border-color: rgba(165, 180, 252, 0.32) !important; color: #a5b4fc !important; } /* ── 6. 聊天空状态提示文本 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .assistant-chat-empty { color: rgba(148, 163, 184, 0.72) !important; } /* ── 7. 日历时间轴区域 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .time-tower { background: rgba(10, 17, 30, 0.96) !important; border-color: rgba(100, 120, 155, 0.18) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .timeline-row { border-color: rgba(80, 100, 135, 0.16) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .timeline-group-header { color: #94a3b8 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .timeline-group-label { color: #cbd5e1 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .timeline-group-count { background: rgba(20, 32, 54, 0.92) !important; border-color: rgba(100, 120, 155, 0.22) !important; color: #94a3b8 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .timeline-expand-bar { background: transparent !important; border-color: rgba(100, 120, 155, 0.18) !important; color: #94a3b8 !important; } /* ── 17. 右栏 sidebar 指令记录排版修正：去掉顶部 toolbar 分隔线，居中 chips； 底部 expand-bar 移除背景色以与面板融为一体 ── */ html .app-shell:not(.mobile-shell)[data-role="boss"] aside.assistant-panel [data-role="boss-command-workbench"] .command-toolbar { border-bottom: 0 !important; padding-bottom: 0 !important; justify-content: center !important; } html .app-shell:not(.mobile-shell)[data-role="boss"] aside.assistant-panel [data-role="boss-command-workbench"] .command-composer.history-only { gap: 14px !important; padding-top: 4px !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] aside.assistant-panel .timeline-expand-bar { background: transparent !important; border-top-color: rgba(100, 120, 155, 0.16) !important; } /* ── 8. 事件卡片 in boss timeline ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .event-card { background: rgba(14, 22, 38, 0.96) !important; border-color: rgba(100, 120, 155, 0.2) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .event-card-header strong, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .event-primary { color: #f1f5f9 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .event-card .event-meta, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .event-card .event-time-slot, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .event-card .event-card-copy { color: #94a3b8 !important; } /* ── 9. 右侧指令记录面板 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .layout-boss > .assistant-panel { background: transparent !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .layout-boss > .assistant-panel > .assistant-block { background: rgba(10, 17, 30, 0.96) !important; border-color: rgba(100, 120, 155, 0.18) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; border-radius: 18px !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .layout-boss > .assistant-panel .assistant-block-header { border-color: rgba(100, 120, 155, 0.14) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .command-card { background: rgba(16, 25, 42, 0.94) !important; border-color: rgba(100, 120, 155, 0.2) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .command-card-header strong { color: #e2e8f0 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .command-card-body { color: #94a3b8 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .command-card-meta { color: #64748b !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .command-toolbar .segmented button { color: #94a3b8 !important; border-color: rgba(100, 120, 155, 0.22) !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .command-toolbar .segmented button.active { background: rgba(255, 255, 255, 0.1) !important; color: #f1f5f9 !important; border-color: rgba(129, 140, 248, 0.3) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important; } /* ── 10. 风险卡/决策卡/焦点卡 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .risk-card, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .decision-card, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .focus-card { background: rgba(14, 22, 38, 0.96) !important; border-color: rgba(100, 120, 155, 0.2) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; } /* ── 11. info-chip 深色模式 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .info-chip { background: rgba(20, 32, 54, 0.88) !important; border: 1px solid rgba(100, 120, 155, 0.24) !important; color: #94a3b8 !important; } /* ── 12. 搜索按钮和日期按钮 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-header input[type="search"], html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-header .search-input-wrapper input { background: rgba(14, 22, 38, 0.92) !important; border-color: rgba(100, 120, 155, 0.22) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-header .ghost-button, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-header .calendar-export-btn, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-header [data-action="open-date-picker"] { background: rgba(16, 25, 42, 0.92) !important; border-color: rgba(100, 120, 155, 0.22) !important; color: #cbd5e1 !important; } /* ── 13. 面板标题和描述文字 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .panel-header h4, html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .panel-title { color: #f1f5f9 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .panel-header p { color: #8295af !important; } /* ── 14. ghost-button（撤回、立即进入看板等）── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .ghost-button:not(.action-button) { background: rgba(20, 32, 54, 0.88) !important; border-color: rgba(100, 120, 155, 0.24) !important; color: #cbd5e1 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .ghost-button:not(.action-button):hover { background: rgba(28, 42, 68, 0.94) !important; border-color: rgba(129, 140, 248, 0.32) !important; color: #e2e8f0 !important; } /* ── 15. 命令历史时间线圆点和连线 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .command-composer.history-only .command-list > *::before { background: rgba(20, 32, 54, 0.96) !important; box-shadow: 0 0 0 3px rgba(10, 17, 30, 0.96) !important; } /* ── 16. 主标题 "老板总览" 等 ── */ html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-header h2 { color: #f1f5f9 !important; } html[data-theme="dark"] .app-shell:not(.mobile-shell)[data-role="boss"] .page-header p { color: #8295af !important; } /* ── 18. 登录页 hero 图片铺满底部修正 ── 原图 auth-poster-light.png (715x494, ratio 1.447) 底部 ~20% 是白色地板， bg-size: 123.6% auto 在窄容器下高度 < 容器，底部留白。 方案：切换到 auth-poster-classic-meetingroom.png (713x855, ratio 0.834, 底部为深色桌面)，配合 cover 保证铺满，从上到下都是图片内容无残白。 */ html[data-theme="light"] .auth-shot-hero, html[data-theme="dark"] .auth-shot-hero { background-image: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(248, 251, 255, 0.94) 18%, rgba(248, 251, 255, 0.62) 30%, rgba(248, 251, 255, 0.18) 44%, rgba(248, 251, 255, 0) 58%), url("/assets/auth-poster-classic-meetingroom.png") !important; background-size: auto, cover !important; background-position: 0 0, center bottom !important; background-repeat: no-repeat, no-repeat !important; } html[data-theme="dark"] .auth-shot-hero { background-image: linear-gradient(180deg, rgba(9, 15, 28, 0.96) 0%, rgba(9, 15, 28, 0.94) 18%, rgba(9, 15, 28, 0.62) 30%, rgba(9, 15, 28, 0.18) 44%, rgba(9, 15, 28, 0) 58%), url("/assets/auth-poster-dark-meetingroom.png") !important; } /* ── 13. Reduced Motion：关闭本层所有装饰动画（兜底，与上方全局 @media 协同） ── */ @media (prefers-reduced-motion: reduce) { html body .event-card, html body .todo-card, html body .pending-card, html body .command-card, html body .mailbox-feed-item, html body .stat-card, html body .modal-card, html body .onboarding-window, html body .route-page, html body .main-shell > .page-content, html body .main-content { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════ v202 — 多项 page-header / settings / guide / cloud-indicator 修复合并区 ════════════════════════════════════════════════════════════════════ */ /* === 强制隐藏 page-header 图标容器内的 img/svg === v5-theme.css 中多条规则把 img 强制 display: block， 导致 SVG 文件本身的内容偏移直接显示出来（图标偏左下）。 这里用比 v5-theme.css 更高的 specificity 强制隐藏 img， 让容器只显示 ::before 的 mask 图标，保证图标在容器内居中。 */ html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-calendar-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-calendar-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-pending-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-pending-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-inbox-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-inbox-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-mailbox-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-mailbox-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-todos-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-todos-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-guide-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-guide-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-settings-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .assistant-settings-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-overview-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-overview-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-pending-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-pending-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-todos-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-todos-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-commands-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-commands-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-assistant-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-assistant-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-guide-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-guide-header-icon[class][class] > svg, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-settings-header-icon[class][class] > img, html body .app-shell:not(.mobile-shell):not(._)[data-role] .page-header[class] .boss-settings-header-icon[class][class] > svg { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; transform: none !important; scale: 1 !important; } /* === 隐藏右下角"云端已连接"网络状态指示器 === */ #saas-network-indicator { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* === 让 settings/guide 内容填满主区域宽度 === 原本 .settings-v3-wrapper (max-width: 1080px) 和 .tut-wrapper (max-width: 960px) 会限制内容居中显示，跟 overview/todos/pending 的"内容拉伸到两边"不一致。 */ .app-shell:not(.mobile-shell) main.page-body > .settings-v3-wrapper, .app-shell:not(.mobile-shell) main.page-body > .tut-wrapper { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 8px 4px 32px !important; } /* === Nav-settings 菜单：chevron 紧贴文字（不在最右边）=== v5-theme.css 已有同类规则但 specificity 偶尔不够；这里用更高 specificity 兜底。 原 layout: 38px(icon) | 1fr(copy 撑满) | auto(chevron 在最右) 新 layout: 38px(icon) | auto(copy 自然宽) | auto(chevron 紧贴) | 1fr(剩余空白) */ html body .app-shell .nav-settings-menu .nav-settings-actions .nav-settings-row, html body .app-shell .nav-settings-menu > .nav-settings-row[class*="logout"] { display: grid !important; grid-template-columns: 38px auto auto minmax(0, 1fr) !important; align-items: center !important; gap: 12px !important; } html body .app-shell .nav-settings-menu .nav-settings-row .nav-settings-row-copy { flex: 0 0 auto !important; justify-self: start !important; min-width: 0 !important; } html body .app-shell .nav-settings-menu .nav-settings-row > svg.nav-settings-chevron, html body .app-shell .nav-settings-menu .nav-settings-row > svg:last-of-type { margin-left: 6px !important; margin-right: 0 !important; justify-self: start !important; align-self: center !important; } /* === 设置弹层：隐藏所有 chevron 箭头（v23 用户反馈"不要箭头了"）=== 原设计每个 nav-settings-row 右侧有 > chevron 提示可进入，现在 整体去掉，视觉更简洁；row 本身保持 hover 高亮足以提示可点击。 保留退出登录的兜底规则（更强的 specificity）。 */ html body .app-shell .nav-settings-menu .nav-settings-row > svg.nav-settings-chevron, html body .app-shell .nav-settings-menu .nav-settings-chevron { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; } /* 退出登录兜底（保留原规则，更高优先级） */ html body .app-shell .nav-settings-menu .nav-settings-row.nav-settings-logout > svg.nav-settings-chevron, html body .app-shell .nav-settings-menu .nav-settings-row.nav-settings-logout > svg:last-of-type:not(.nav-settings-row-icon) { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; } /* ════════════════════════════════════════════════════════════════════ v5-hero-art 动态插画恢复 + 漂浮/呼吸动效 ════════════════════════════════════════════════════════════════════ 背景：base.css 早期规则用 `.stat-card.featured-card > svg` 通配把所有 svg 都隐藏了（display:none + visibility:hidden），导致专门为今日重点卡设计的 .v5-hero-art 装饰 SVG 一直看不见。这里用更高 specificity 强制恢复显示， 并叠加 floating + sparkle pulse 动画让卡片右侧空白区有动态呼吸感。 ════════════════════════════════════════════════════════════════════ */ html body .app-shell .stat-card.featured-card > svg.v5-hero-art, html body .app-shell .stat-card.stats-featured > svg.v5-hero-art, html body .app-shell .stat-card.v5-hero-card > svg.v5-hero-art, html body .app-shell .v5-hero-card svg.v5-hero-art { display: block !important; visibility: visible !important; opacity: 0.95 !important; position: absolute !important; right: 22px !important; top: 50% !important; bottom: auto !important; left: auto !important; width: 170px !important; height: 150px !important; max-width: 170px !important; max-height: 150px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; flex: 0 0 auto !important; pointer-events: none !important; z-index: 0 !important; color: rgba(255, 255, 255, 0.92) !important; transform: translateY(-50%) !important; transform-origin: center !important; filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.22)); animation: v5HeroArtFloat 5.5s ease-in-out infinite; } /* 中等屏幕收缩：避免插画与文字重叠 */ @media (max-width: 1180px) { html body .app-shell:not(.mobile-shell) .stat-card.featured-card > svg.v5-hero-art, html body .app-shell:not(.mobile-shell) .stat-card.stats-featured > svg.v5-hero-art, html body .app-shell:not(.mobile-shell) .stat-card.v5-hero-card > svg.v5-hero-art, html body .app-shell:not(.mobile-shell) .v5-hero-card svg.v5-hero-art { width: 140px !important; height: 124px !important; max-width: 140px !important; max-height: 124px !important; right: 16px !important; } } @keyframes v5HeroArtFloat { 0%, 100% { transform: translateY(-50%) translateX(0) rotate(0deg); } 25% { transform: translateY(calc(-50% - 4px)) translateX(-2px) rotate(-1.2deg); } 50% { transform: translateY(calc(-50% - 6px)) translateX(0) rotate(0deg); } 75% { transform: translateY(calc(-50% - 4px)) translateX(2px) rotate(1.2deg); } } /* sticker 元素（彩色圆点/星星/铅笔）单独慢速脉冲，营造"插画在呼吸"的感觉 */ html body .app-shell .v5-hero-card svg.v5-hero-art > circle[fill="#ef4444"], html body .app-shell .v5-hero-card svg.v5-hero-art > circle[fill="#22c55e"] { transform-origin: center; transform-box: fill-box; animation: v5HeroStickerPulse 2.4s ease-in-out infinite; } html body .app-shell .v5-hero-card svg.v5-hero-art > circle[fill="#22c55e"] { animation-delay: 0.8s; } html body .app-shell .v5-hero-card svg.v5-hero-art > path[fill="#fbbf24"], html body .app-shell .v5-hero-card svg.v5-hero-art > path[fill="#f472b6"] { transform-origin: center; transform-box: fill-box; animation: v5HeroStickerSpin 8s linear infinite; } html body .app-shell .v5-hero-card svg.v5-hero-art > path[fill="#f472b6"] { animation-direction: reverse; animation-duration: 12s; } @keyframes v5HeroStickerPulse { 0%, 100% { opacity: 0.92; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } @keyframes v5HeroStickerSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } 100% { transform: rotate(0deg) scale(1); } } /* sparkle 三个小亮点：错峰闪烁 */ html body .app-shell .v5-hero-card svg.v5-hero-art > circle[r="1.6"], html body .app-shell .v5-hero-card svg.v5-hero-art > circle[r="1.2"], html body .app-shell .v5-hero-card svg.v5-hero-art > circle[r="1"] { transform-origin: center; transform-box: fill-box; animation: v5HeroSparkle 1.8s ease-in-out infinite; } html body .app-shell .v5-hero-card svg.v5-hero-art > circle[r="1.2"] { animation-delay: 0.4s; } html body .app-shell .v5-hero-card svg.v5-hero-art > circle[r="1"] { animation-delay: 0.8s; } @keyframes v5HeroSparkle { 0%, 100% { opacity: 0.4; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.6); } } /* 减少动效偏好：尊重用户系统设置 */ @media (prefers-reduced-motion: reduce) { html body .app-shell .v5-hero-card svg.v5-hero-art, html body .app-shell .v5-hero-card svg.v5-hero-art > circle, html body .app-shell .v5-hero-card svg.v5-hero-art > path { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════ 待安排会议列表：折叠/展开 toggle 按钮 ════════════════════════════════════════════════════════════════════ - 默认列表只显示 3 项 - 多于 3 项时，列表底部出现"展开剩余 X 条"按钮 - 展开后变"收起列表"，点击 chevron 翻转 180° 即收起 ════════════════════════════════════════════════════════════════════ */ html body .app-shell:not(.mobile-shell) .pending-list .pending-list-toggle { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; margin: 4px 0 0 !important; padding: 12px 16px !important; background: linear-gradient(180deg, rgba(99, 102, 241, 0.04), rgba(99, 102, 241, 0.08)) !important; border: 1px dashed rgba(99, 102, 241, 0.32) !important; border-radius: 12px !important; color: #4f46e5 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; cursor: pointer !important; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important; -webkit-appearance: none !important; appearance: none !important; } html body .app-shell:not(.mobile-shell) .pending-list .pending-list-toggle:hover { background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.14)) !important; border-color: rgba(99, 102, 241, 0.52) !important; transform: translateY(-1px) !important; } html body .app-shell:not(.mobile-shell) .pending-list .pending-list-toggle:active { transform: translateY(0) !important; } html body .app-shell:not(.mobile-shell) .pending-list .pending-list-toggle .pending-list-toggle-icon { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important; } html body .app-shell:not(.mobile-shell) .pending-list .pending-list-toggle.is-expanded .pending-list-toggle-icon { transform: rotate(180deg) !important; } /* 深色主题 */ html[data-theme="dark"] body .app-shell:not(.mobile-shell) .pending-list .pending-list-toggle { background: linear-gradient(180deg, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0.14)) !important; border-color: rgba(129, 140, 248, 0.38) !important; color: #c7d2fe !important; } html[data-theme="dark"] body .app-shell:not(.mobile-shell) .pending-list .pending-list-toggle:hover { background: linear-gradient(180deg, rgba(129, 140, 248, 0.14), rgba(129, 140, 248, 0.22)) !important; border-color: rgba(165, 180, 252, 0.55) !important; } /* 让 pending-layout 左右两栏底部对齐：用 align-items: stretch (grid 默认) + panel 内 panel-body 用 flex 撑满，避免右栏底部留白 */ html body .app-shell:not(.mobile-shell) .pending-layout > section.panel { display: flex !important; flex-direction: column !important; align-self: stretch !important; } html body .app-shell:not(.mobile-shell) .pending-layout > section.panel > .panel-body { flex: 1 1 auto !important; } /* === v23: 设置弹层的"主题切换"分段按钮整体宽度收紧 === 原来 segmented 容器横向铺满整行（flex: 1 1 auto），视觉上 显得占用很宽。改成 width: fit-content + 子按钮不再拉伸， 让 3 颗按钮按内容宽度自适应，左对齐，紧凑显示。 */ html body .app-shell:not(.mobile-shell) .nav-settings-theme-segmented { display: inline-flex !important; width: fit-content !important; max-width: 100% !important; gap: 4px !important; padding: 3px !important; } html body .app-shell:not(.mobile-shell) .nav-settings-theme-segmented > * { flex: 0 0 auto !important; /* v23: 用户反馈"边框左右小一点" - 把左右 padding 从 12px → 8px，让按钮更紧凑 */ padding: 4px 8px !important; min-height: 26px !important; min-width: 0 !important; } /* 父级包裹容器 align-items 靠左，避免被继承 stretch */ html body .app-shell:not(.mobile-shell) .nav-settings-theme { align-items: flex-start !important; } /* === v23: 设置弹层 nav-settings-row 网格列优化 === 原本给 chevron 预留了一列（16px / auto），chevron 隐藏后 row 右侧出现空白槽位。 现在把 grid 收缩到只剩 [图标 38px] + [文字 1fr]，文字列填满 row 剩余空间； row 自身保持 100% 拉满 actions 容器宽度（260px-padding），这样 hover 背景 随 row 自然延伸到右边缘，不再出现"row 收得很窄、容器右侧大片留白"的视觉割裂。 */ html body .app-shell:not(.mobile-shell) .nav-settings-menu .nav-settings-actions .nav-settings-row, html body .app-shell:not(.mobile-shell) .nav-settings-menu > .nav-settings-actions > .nav-settings-row, html body .app-shell:not(.mobile-shell) .nav-settings-row { grid-template-columns: 38px minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; justify-self: stretch !important; } /* row 内文字 copy 块占满第二列，文字左对齐 */ html body .app-shell:not(.mobile-shell) .nav-settings-row > .nav-settings-row-copy { min-width: 0 !important; flex: 1 1 auto !important; text-align: left !important; } /* === v23: 设置菜单副标题对比度提升 === 原规则 v5-theme.css:6588 用 `var(--v4-ink-3)`： - 浅色 = #94a3b8（slate-400），白底对比度 ~3:1，文字看不清 - 暗色 = #64748b（slate-500），暗底对比度 ~3:1，文字也看不清 用更高 specificity 强制覆盖到 AA+ 级对比度，保留主/副标题层次差。 */ /* 浅色模式：白底 → slate-600 对比度 ~7:1（AA+） */ html:not([data-theme="dark"]) body .app-shell:not(.mobile-shell) .nav-settings-menu .nav-settings-row-copy span, html:not([data-theme="dark"]) body .app-shell:not(.mobile-shell) .nav-settings-menu .nav-settings-row-copy > span { color: #475569 !important; opacity: 1 !important; } /* 暗色模式：暗底 → slate-300 对比度 ~10:1（AA+） */ html[data-theme="dark"] body .app-shell:not(.mobile-shell) .nav-settings-menu .nav-settings-row-copy span, html[data-theme="dark"] body .app-shell:not(.mobile-shell) .nav-settings-menu .nav-settings-row-copy > span { color: #cbd5e1 !important; opacity: 1 !important; } /* ============================================================ 2026-05-10: 移动端底部导航栏固定贴底加固 ============================================================ 背景：用户反馈移动端底部 nav 不固定、跟内容一起滚动。 根因： 1. SW 缓存旧 CSS（让用户跑 window.__nukeServiceWorker() 解决） 2. 防御性覆盖任何祖先 transform / contain / filter / will-change 创建的 containing block，避免未来把 nav 放回 shell 内时失效 3. 顺手收口 z-index，防止 FAB / toast / backdrop 遮挡 DOM 结构：body > #app > .mobile-bottom-nav（与 studio-shell 同级） ============================================================ */ /* 规则 1：强制 position:fixed 贴底 + 足够高 z-index */ html body .mobile-bottom-nav, html body > #app > .mobile-bottom-nav { position: fixed !important; bottom: 0 !important; z-index: 900 !important; } /* 规则 2：PC Studio 预览 — nav 在 viewport 底部居中，宽度约束为手机壳尺寸 */ html body:not(.native-mobile-body) > #app > .mobile-bottom-nav { left: 50% !important; right: auto !important; width: min(430px, 100vw) !important; transform: translateX(-50%) !important; } /* 规则 3：真机 / 手机浏览器 — nav 横跨整个 viewport 全宽 */ html body.native-mobile-body > #app > .mobile-bottom-nav { left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; } /* 规则 4：确保 mobile-shell 的 page-body 底部留足 padding 让 nav 不盖内容 （已有规则在 v5-theme.css:12889 等处定义；此处作最终兜底） */ html body .app-shell.mobile-shell main.page-body.mobile, html body .app-shell.mobile-shell .page-body.mobile { padding-bottom: calc(var(--mobile-nav-height, 88px) + var(--mobile-safe-bottom, 0px) + 24px) !important; } /* ============================================================ 2026-05-10: 移动端底部导航栏左右边距对称（safe-area 适配） ============================================================ 背景：用户反馈底部 nav 5 个图标"左右两边边距不一致"。 根因：原 padding 仅 `padding: 10px 10px ...`，没有处理 iPhone 系列 在横屏 + 圆角屏上的 safe-area-inset-left / safe-area-inset-right。 在某些设备 / 浏览器上即使竖屏，因为 PWA / 全屏模式或 Chrome 调试模式 下的 viewport 与 layout viewport 不一致，也会出现左右像素差。 另外有 box-sizing: content-box 风险时，padding 会被截断。 修法： 1) 显式声明 box-sizing: border-box，padding 不破坏宽度计算 2) 用 max(10px, env(safe-area-inset-left/right)) 兼容刘海屏 3) 强制 padding-inline 对称 ============================================================ */ html body .mobile-bottom-nav, html body > #app > .mobile-bottom-nav, html body .app-shell.mobile-shell .mobile-bottom-nav { box-sizing: border-box !important; padding-left: max(10px, env(safe-area-inset-left)) !important; padding-right: max(10px, env(safe-area-inset-right)) !important; } /* 2026-05-19：移动端右侧两个圆形悬浮入口的图标显得过小。 根因是 v5-theme 里有 button 首个 svg 的 14px 全局兜底，加上描边型图标在高 DPR 手机上视觉重量不足。 这里仅收紧到新手清单 mini FAB，不影响普通按钮。 */ html body button[data-action="toggle-checklist-widget"] > svg { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; stroke-width: 2.1 !important; opacity: 1 !important; } /* 登录页手机海报使用专门的竖版 SVG，保持桌面海报的深蓝/紫色玻璃质感， 同时避免 713x855 会议室图在窄屏 cover 时裁掉主体。 */ @media (max-width: 480px) { html[data-theme="light"] .auth-shot-hero { background-image: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(248, 251, 255, 0.74) 22%, rgba(248, 251, 255, 0.18) 58%, rgba(248, 251, 255, 0) 100%), url("/assets/auth-poster-mobile-light.svg") !important; background-size: auto, cover !important; background-position: 0 0, center top !important; } html[data-theme="dark"] .auth-shot-hero { background-image: linear-gradient(180deg, rgba(9, 15, 28, 0.96) 0%, rgba(9, 15, 28, 0.70) 22%, rgba(9, 15, 28, 0.16) 58%, rgba(9, 15, 28, 0) 100%), url("/assets/auth-poster-mobile-dark.svg") !important; background-size: auto, cover !important; background-position: 0 0, center top !important; } } /* ============================================================ 2026-05-13 P1-2 / P1-1：月视图周表头 + 周视图空态轻量化 ============================================================ */ .month-grid-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; padding: 0 4px; } .calendar-focus-panel .month-grid-weekdays { gap: 14px; } .month-weekday { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-align: center; padding: 6px 0; color: var(--text-sub, #475569); border-radius: 8px; background: color-mix(in srgb, #6366f1 6%, transparent); } .month-weekday.is-weekend { color: #b91c1c; background: color-mix(in srgb, #ef4444 7%, transparent); } html[data-theme="dark"] .month-weekday { color: rgba(226,232,240,0.78); background: rgba(255,255,255,0.04); } html[data-theme="dark"] .month-weekday.is-weekend { color: #fca5a5; background: rgba(239,68,68,0.10); } @media (max-width: 640px) { .month-grid-weekdays { gap: 6px; padding: 0 2px; } .month-weekday { font-size: 11px; padding: 4px 0; } } /* P1-1：周视图单日空档 — 去除 .empty-state 大插画，用低噪音字符占位 */ .week-column-empty { display: inline-flex; align-items: center; justify-content: center; margin: 12px auto 0; width: 24px; height: 24px; border-radius: 50%; color: color-mix(in srgb, var(--text-sub, #94a3b8) 50%, transparent); background: color-mix(in srgb, var(--text-sub, #94a3b8) 8%, transparent); font-size: 16px; line-height: 1; pointer-events: none; user-select: none; } html[data-theme="dark"] .week-column-empty { background: rgba(255,255,255,0.04); color: rgba(226,232,240,0.45); } .week-column.is-empty { background: color-mix(in srgb, var(--text-sub, #94a3b8) 2%, transparent); } .week-overall-empty { margin: 18px auto 0; max-width: 420px; } /* 2026-05-13：表单字段置信度阈值化样式（与 .inbox-reference-confidence 思路一致） */ .field-note-confidence { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; margin-top: 4px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; border: 1px solid transparent; } .field-note-confidence.is-ok { color: #15803d; background: color-mix(in srgb, #16a34a 8%, transparent); border-color: color-mix(in srgb, #16a34a 22%, transparent); } .field-note-confidence.is-warn { color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 30%, transparent); } .field-note-confidence.is-warn::before { content: "⚠ "; margin-right: 1px; } .field-note-confidence.is-danger { color: #b91c1c; background: color-mix(in srgb, #ef4444 14%, transparent); border-color: color-mix(in srgb, #ef4444 36%, transparent); animation: confidenceDangerPulse 1.6s ease-in-out 2; } .field-note-confidence.is-danger::before { content: "⚠ "; margin-right: 1px; } html[data-theme="dark"] .field-note-confidence.is-ok { color: #4ade80; background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.30); } html[data-theme="dark"] .field-note-confidence.is-warn { color: #fbbf24; background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.36); } html[data-theme="dark"] .field-note-confidence.is-danger { color: #fca5a5; background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.42); } /* P1-4：AI 空态新用户提示（替代冗余 CTA 按钮，用箭头小字引导下方 chip） */ .assistant-chat-empty-hint { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-sub, #64748b); letter-spacing: 0.02em; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, #6366f1 7%, transparent); display: inline-block; } html[data-theme="dark"] .assistant-chat-empty-hint { color: rgba(226,232,240,0.78); background: rgba(99,102,241,0.18); } /* 2026-05-19: iOS Safari / mobile browser top chrome integration Keep mobile app header fixed and white so Safari top blends into the page instead of showing a blue band. */ @media (max-width: 720px) { html, body { background-color: #ffffff !important; } body.native-mobile-body, body.native-mobile-body #app, body.native-mobile-body .prototype-frame.mobile-preview.native-mobile-frame, body.native-mobile-body .app-shell.mobile-shell { background: #ffffff !important; } html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header { position: sticky !important; position: -webkit-sticky !important; top: 0 !important; z-index: 1200 !important; background: #ffffff !important; border-bottom: 1px solid rgba(226, 232, 240, 0.78) !important; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: env(safe-area-inset-top, 0px); background: #ffffff; pointer-events: none; z-index: -1; } } /* 2026-05-19: force mobile fixed top header to readable white chrome in Safari. */ @media (max-width: 720px) { html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header, html[data-theme="dark"] body .app-shell.mobile-shell .page-header.mobile.app-mobile-header { background: #ffffff !important; color: #0f172a !important; } html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-compact-copy h3, html[data-theme="dark"] body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-compact-copy h3 { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-compact-copy p, html[data-theme="dark"] body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-compact-copy p { color: #475569 !important; -webkit-text-fill-color: #475569 !important; } html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-title-icon, html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-title-icon svg, html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-title-icon img, html[data-theme="dark"] body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-title-icon, html[data-theme="dark"] body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-title-icon svg, html[data-theme="dark"] body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-title-icon img { color: #475569 !important; stroke: currentColor !important; filter: none !important; opacity: 1 !important; } html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-icon, html[data-theme="dark"] body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-icon { background: #ffffff !important; color: #475569 !important; border: 1px solid rgba(226, 232, 240, 0.96) !important; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important; } html body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-icon svg, html[data-theme="dark"] body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-icon svg { color: #475569 !important; stroke: currentColor !important; } } /* 2026-05-19: native mobile fixed white top chrome final override Safari/status bar area, app header, and page background stay one continuous white surface. */ @media (max-width: 720px) { html body.native-mobile-body { background: #ffffff !important; background-color: #ffffff !important; } html body.native-mobile-body .studio-shell.native-mobile-studio, html body.native-mobile-body .prototype-frame.mobile-preview.native-mobile-frame, html body.native-mobile-body .prototype-frame.mobile-preview.native-mobile-frame .app-shell.mobile-shell, html body.native-mobile-body .app-shell.mobile-shell, html body.native-mobile-body .app-shell.mobile-shell .main-shell { background: #ffffff !important; background-color: #ffffff !important; } html body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header, html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; box-sizing: border-box !important; padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important; background: #ffffff !important; background-color: #ffffff !important; border-bottom: 1px solid rgba(226, 232, 240, 0.84) !important; border-radius: 0 !important; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateZ(0); z-index: 1300 !important; } html body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header::before { display: none !important; } html body.native-mobile-body .app-shell.mobile-shell .page-body.mobile { margin-top: calc(var(--xqj-mobile-fixed-header-offset, 86px) + 8px) !important; padding-top: 10px !important; } } /* 2026-05-19: native mobile adaptive top chrome override Light mode blends into white; dark mode restores the previous deep chrome instead of forcing white. */ @media (max-width: 720px) { html[data-theme="dark"] body.native-mobile-body { background: #08111d !important; background-color: #08111d !important; } html[data-theme="dark"] body.native-mobile-body .studio-shell.native-mobile-studio, html[data-theme="dark"] body.native-mobile-body .prototype-frame.mobile-preview.native-mobile-frame, html[data-theme="dark"] body.native-mobile-body .prototype-frame.mobile-preview.native-mobile-frame .app-shell.mobile-shell, html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell, html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .main-shell { background: #08111d !important; background-color: #08111d !important; } html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header { background: linear-gradient(180deg, rgba(8, 17, 29, 0.98), rgba(11, 19, 32, 0.96)) !important; background-color: #08111d !important; color: #e8eefc !important; border-bottom-color: rgba(94, 114, 141, 0.32) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important; } html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-compact-copy h3 { color: #e8eefc !important; -webkit-text-fill-color: #e8eefc !important; } html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-compact-copy p { color: #a9b8d0 !important; -webkit-text-fill-color: #a9b8d0 !important; } html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-title-icon, html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-title-icon svg, html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-title-icon img { color: #8fb1ff !important; stroke: currentColor !important; opacity: 1 !important; } html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-icon { background: rgba(18, 29, 47, 0.94) !important; color: #c7d2ea !important; border-color: rgba(94, 114, 141, 0.42) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important; } html[data-theme="dark"] body.native-mobile-body .app-shell.mobile-shell .page-header.mobile.app-mobile-header .mobile-header-icon svg { color: #c7d2ea !important; stroke: currentColor !important; } } /* 2026-05-19: dark mobile chrome html root fix Override the previous light-mode Safari fix so the browser/status safe area is dark in dark mode. */ @media (max-width: 720px) { html[data-theme="dark"] { background: #08111d !important; background-color: #08111d !important; } html[data-theme="dark"] body { background: #08111d !important; background-color: #08111d !important; } }