/* source: /theme.css?v=16 */ /* 本来 · 主题 token（深/浅）— 组件样式见 style.css */ :root { color-scheme: dark; /* 墨笺：交互铬仅黑/白（五行色、标签色、危急色除外）；灰阶只用于字重层次透明度 */ --mono-black: #000000; --mono-white: #ffffff; --bg-dark: #050505; --bg-gradient: radial-gradient(90% 55% at 50% -8%, rgba(255, 255, 255, 0.04) 0%, transparent 52%), radial-gradient(120% 80% at 50% -10%, #121212 0%, #050505 58%); --bg-surface: #0a0a0a; --panel-bg: rgba(10, 10, 10, 0.94); --panel-border: rgba(255, 255, 255, 0.14); --glass-blur: blur(12px); --primary: var(--mono-white); --primary-hover: var(--mono-white); --accent: var(--mono-white); --accent-glow: rgba(255, 255, 255, 0.14); --accent-rgb: 255, 255, 255; --accent-muted: rgba(255, 255, 255, 0.78); --text-main: var(--mono-white); --text-muted: rgba(255, 255, 255, 0.88); --text-dim: rgba(255, 255, 255, 0.58); --line: rgba(255, 255, 255, 0.14); --line-heavy: rgba(255, 255, 255, 0.28); --card-bg: #0a0a0a; --card-bg-solid: #0a0a0a; --card-hover: rgba(255, 255, 255, 0.06); --input-bg: #000000; --input-border: rgba(255, 255, 255, 0.22); --overlay-bg: rgba(0, 0, 0, 0.72); --overlay-blur: blur(10px); --popover-bg: #0a0a0a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55); /* 居中设置板（modalSheet / 偏好 portal / AI 设置）共用铬 */ --sheet-radius: var(--surface-radius-lg); --sheet-bg: var(--bg-dark); --sheet-border: var(--surface-border, var(--panel-border)); --sheet-divider: color-mix(in srgb, var(--text-main) 10%, transparent); --sheet-shadow: var(--shadow-lg); --tag-bg: rgba(255, 255, 255, 0.08); --tag-text: var(--mono-white); /* 五行：保持识别度，略降荧光感 */ --wood: #3dba8c; --fire: #e85d6a; --earth: #d4a017; --metal: var(--mono-white); --water: #3b9fd4; /* 命盘导出：浅色纸面/打印友好五行（DOM 快照与 JS 补丁共用） */ --pan-export-wood: #0d6e54; --pan-export-fire: #c81a3a; --pan-export-earth: #b45309; --pan-export-metal: #000000; --pan-export-water: #0369a1; /* 命盘导出：运程列在浅色主题下的屏上高对比色 */ --pan-export-flow-wood: #52f08c; --pan-export-flow-fire: #ff7e92; --pan-export-flow-earth: #fcd34d; --pan-export-flow-metal: #ffffff; --pan-export-flow-water: #0ea5e9; /* 命盘导出：画布/补丁共用铬色 */ --pan-export-surface-light: #ffffff; --pan-export-surface-dark: #020204; --pan-export-canvas-glow: #1a1a30; --pan-export-ink: #111111; --pan-export-aux: #334155; --pan-export-phase-base: #94a3b8; --pan-export-phase-hour: #64748b; --pan-export-god-text: #cbd5e1; --pan-export-cs-text: rgba(226, 232, 240, 0.92); --pan-export-header-liunian: #d4d4d8; --pan-export-header-liuyue: #a1a1aa; --pan-export-header-liuri: #71717a; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --filter-chip-bg: transparent; --filter-chip-hover-bg: transparent; --filter-chip-active-bg: var(--mono-white); --filter-chip-active-border: var(--mono-white); --filter-separator: rgba(255, 255, 255, 0.14); --filter-add-hover-bg: transparent; --group-badge-radius: 3px 14px 14px 10px; --group-badge-radius-lead: 3px 0 0 10px; --group-badge-radius-tail: 0 14px 14px 0; --group-badge-min-h: 30px; --group-badge-max-h: 32px; --tag-badge-radius: 3px 12px 12px 3px; --tag-badge-radius-lead: 3px 0 0 3px; --tag-badge-radius-tail: 0 12px 12px 0; --tag-badge-min-h: 30px; --tag-badge-max-h: 32px; --focus-ring-color: rgba(255, 255, 255, 0.72); --control-accent: var(--mono-white); --space-page: 32px; --space-page-x: 16px; --module-gap: 22px; --module-gap-sm: 10px; --pan-column-max: 640px; --birth-form-inline: 18px; --birth-field-font-size: 12px; --surface-radius: 16px; --surface-radius-lg: 20px; --surface-radius-sm: 11px; --surface-border: rgba(255, 255, 255, 0.14); /* 独立动作弹层（账户菜单 / 命盘卡「更多」）统一最小宽：随内容收缩，不留大空白 */ --menu-min-width: 128px; /* 通用浮层/细边（前事验证等共用）：深主题白调，浅主题黑调 */ --surface-1: rgba(255, 255, 255, 0.05); --surface-2: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.12); --font-ui: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif; --font-display: "Songti SC", "Noto Serif SC", "STSong", "Source Han Serif SC", "PingFang SC", serif; --touch-min: 44px; --danger: #e25b5b; --danger-muted: rgba(226, 91, 91, 0.14); --success: var(--mono-white); --motion-fast: 0.15s; --motion-med: 0.22s; /* 文字按钮：主 CTA=实心反色；ghost=描边；分段与主钮同色语汇 */ --btn-h: var(--touch-min); --btn-h-dense: 36px; --btn-h-auth: 48px; --btn-radius: var(--surface-radius-sm); --btn-pad-y: 11px; --btn-pad-x: 22px; --btn-font: 14px; --btn-weight: 700; --btn-primary-bg: var(--mono-white); --btn-primary-bg-hover: var(--mono-white); --btn-primary-fg: var(--mono-black); --btn-primary-border: var(--mono-white); --btn-ghost-bg: transparent; --btn-ghost-bg-hover: transparent; --btn-ghost-fg: var(--mono-white); --btn-ghost-fg-hover: var(--mono-white); --btn-ghost-border: rgba(255, 255, 255, 0.55); --btn-ghost-border-hover: var(--mono-white); --btn-disabled-opacity: 0.4; --seg-track-bg: transparent; --seg-track-border: rgba(255, 255, 255, 0.28); --seg-btn-fg: rgba(255, 255, 255, 0.55); --seg-btn-fg-hover: var(--mono-white); --seg-btn-hover-bg: transparent; --seg-btn-active-bg: var(--mono-white); --seg-btn-active-fg: var(--mono-black); /* 干支空位空心环：出生直排 / 库房筛选 / 学习盘共用（尺寸由各表面自定） */ --bazi-empty-ring: rgba(148, 163, 184, 0.58); --bazi-empty-ring-hover: rgba(148, 163, 184, 0.72); --bazi-empty-ring-focus: rgba(148, 163, 184, 0.84); } :root[data-theme="light"] { color-scheme: light; /* 浅色：纸白底 + 纯黑交互（五行色、标签色、危急色除外） */ --bg-dark: var(--mono-white); --bg-gradient: none; --bg-surface: var(--mono-white); --panel-bg: var(--mono-white); --panel-border: rgba(0, 0, 0, 0.14); --glass-blur: blur(10px); --primary: var(--mono-black); --primary-hover: var(--mono-black); --accent: var(--mono-black); --accent-glow: rgba(0, 0, 0, 0.1); --accent-rgb: 0, 0, 0; --accent-muted: rgba(0, 0, 0, 0.72); --text-main: var(--mono-black); --text-muted: rgba(0, 0, 0, 0.78); --text-dim: rgba(0, 0, 0, 0.55); --line: rgba(0, 0, 0, 0.12); --line-heavy: rgba(0, 0, 0, 0.28); --card-bg: var(--mono-white); --card-bg-solid: var(--mono-white); --card-hover: transparent; --input-bg: var(--mono-white); --input-border: rgba(0, 0, 0, 0.22); --overlay-bg: rgba(0, 0, 0, 0.4); --overlay-blur: blur(10px); --popover-bg: var(--mono-white); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --sheet-bg: var(--bg-surface); --sheet-border: var(--surface-border, var(--panel-border)); --sheet-divider: var(--line); --sheet-shadow: none; --tag-bg: transparent; --tag-text: var(--mono-black); --metal: var(--mono-black); --filter-chip-bg: transparent; --filter-chip-hover-bg: transparent; --filter-chip-active-bg: var(--mono-black); --filter-chip-active-border: var(--mono-black); --filter-separator: rgba(0, 0, 0, 0.14); --filter-add-hover-bg: transparent; --focus-ring-color: rgba(0, 0, 0, 0.72); --control-accent: var(--mono-black); --surface-border: rgba(0, 0, 0, 0.14); --surface-1: rgba(0, 0, 0, 0.03); --surface-2: rgba(0, 0, 0, 0.05); --border-subtle: rgba(0, 0, 0, 0.1); --danger: #c23b3b; --danger-muted: rgba(194, 59, 59, 0.1); --success: var(--mono-black); --btn-primary-bg: var(--mono-black); --btn-primary-bg-hover: var(--mono-black); --btn-primary-fg: var(--mono-white); --btn-primary-border: var(--mono-black); --btn-ghost-bg: transparent; --btn-ghost-bg-hover: transparent; --btn-ghost-fg: var(--mono-black); --btn-ghost-fg-hover: var(--mono-black); --btn-ghost-border: rgba(0, 0, 0, 0.55); --btn-ghost-border-hover: var(--mono-black); --seg-track-bg: transparent; --seg-track-border: rgba(0, 0, 0, 0.28); --seg-btn-fg: rgba(0, 0, 0, 0.55); --seg-btn-fg-hover: var(--mono-black); --seg-btn-hover-bg: transparent; --seg-btn-active-bg: var(--mono-black); --seg-btn-active-fg: var(--mono-white); --bazi-empty-ring: rgba(100, 116, 139, 0.55); --bazi-empty-ring-hover: rgba(100, 116, 139, 0.7); --bazi-empty-ring-focus: rgba(100, 116, 139, 0.85); } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html { -webkit-text-size-adjust: 100%; } body { position: relative; isolation: isolate; margin: 0; font-family: var(--font-ui); background: var(--bg-dark); background-image: var(--bg-gradient); background-attachment: fixed; color: var(--text-main); min-height: 100vh; min-height: 100dvh; line-height: 1.6; overflow-x: hidden; -webkit-tap-highlight-color: transparent; padding-left: var(--safe-left); padding-right: var(--safe-right); } /* 极淡纸纹：打破数码平板感，不抢内容 */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; } [data-theme="light"] body::before { opacity: 0.028; } /* 品牌字：壳层主信号，宋体标题气质 */ .brand-display, .header .logo, .header .brand, .brandTitle, .login-brand, .auth-title { font-family: var(--font-display); letter-spacing: 0.14em; font-weight: 600; } .brandTitle { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.05rem); line-height: 1.12; color: var(--text-main); margin: 0; text-align: center; padding-right: 0.14em; text-wrap: balance; } .brandSub { font-family: var(--font-ui); font-size: 10px; font-weight: 650; letter-spacing: 0.32em; color: var(--text-dim); margin-top: 8px; opacity: 0.72; } /* 键盘用户：跳到主内容 */ .bazi-skip-link { position: absolute; left: 12px; top: 12px; z-index: 10000; padding: 10px 14px; border-radius: var(--surface-radius-sm); border: 1px solid var(--surface-border); background: var(--popover-bg); color: var(--text-main); font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-160%); transition: transform var(--motion-fast) ease; } .bazi-skip-link:focus, .bazi-skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } @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; } } /* 登录/门禁共用卡片气质 */ .auth-page { background: var(--bg-dark); background-image: var(--bg-gradient); } .auth-card { box-shadow: var(--shadow-md); border-color: var(--surface-border); border-radius: var(--surface-radius-lg); background: var(--panel-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .auth-msg--error, .auth-msg:not(:empty) { color: var(--danger); } /* 主站会话校验加载 */ #index-user-gate-loader { font-family: var(--font-ui); letter-spacing: 0.12em; color: var(--text-dim); background: var(--bg-dark); background-image: var(--bg-gradient); } #index-user-gate-loader::after { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-left: 0.65em; border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--accent); border-radius: 50%; vertical-align: -0.15em; animation: bazi-gate-spin 0.7s linear infinite; } @keyframes bazi-gate-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #index-user-gate-loader::after { animation: none; border-top-color: color-mix(in srgb, var(--accent) 35%, transparent); } } /* 读屏专用 */ .bazi-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; } /* 轻提示：小模块操作反馈，勿用 alert 打断 */ .bazi-toast { position: fixed; left: 50%; bottom: calc(28px + var(--safe-bottom, 0px)); transform: translateX(-50%) translateY(12px); z-index: 2147483600; max-width: min(92vw, 360px); padding: 10px 16px; border-radius: var(--surface-radius-sm, 11px); border: 1px solid var(--surface-border); background: var(--popover-bg); color: var(--text-main); box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.35; letter-spacing: 0.02em; opacity: 0; pointer-events: none; transition: opacity var(--motion-med, 0.22s) ease, transform var(--motion-med, 0.22s) ease; } .bazi-toast.isVisible { opacity: 1; transform: translateX(-50%) translateY(0); } .bazi-toast[data-tone="ok"] { border-color: color-mix(in srgb, var(--success) 45%, var(--surface-border)); } .bazi-toast[data-tone="err"] { border-color: color-mix(in srgb, var(--danger) 50%, var(--surface-border)); color: var(--danger); } .hint[data-tone="err"], .storePanelStatus[data-tone="err"] { color: var(--danger); } .hint[hidden]:not([data-tone]) { display: none; } .birth-wheel-foot { display: flex; justify-content: stretch; padding: 12px 14px calc(12px + var(--safe-bottom, 0px)); border-top: 1px solid var(--line); } .birth-wheel-done-btn { width: 100%; min-height: var(--touch-min, 44px); border-radius: var(--surface-radius-sm); font-size: 15px; font-weight: 650; } /* 确认框须盖过库房溢出层(8300)等；specificity 压过后载入的 .modal */ .modal.bazi-confirm-modal { z-index: 2147483610; visibility: visible; opacity: 1; pointer-events: auto; /* 轻量 alert：始终视口居中；勿继承 style_responsive_mobile 对大表单的左上对齐 */ justify-content: center; align-items: center; overflow-y: visible; } .bazi-confirm-sheet { width: min(92vw, 360px); max-width: 360px; max-height: none; margin: 0; padding: 18px 16px 14px; border-radius: var(--surface-radius, 14px); border: 1px solid var(--surface-border); background: var(--popover-bg, var(--surface)); box-shadow: var(--shadow-md); } .bazi-confirm-title { font-size: 15px; font-weight: 650; letter-spacing: 0.02em; color: var(--text-main); margin: 0 0 8px; } .bazi-confirm-msg { margin: 0 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted, var(--muted)); white-space: pre-wrap; } .bazi-confirm-foot { display: flex; gap: 10px; justify-content: flex-end; } .bazi-confirm-btn { min-height: var(--btn-h, var(--touch-min, 44px)); min-width: 88px; padding: 0 14px; border-radius: var(--btn-radius, var(--surface-radius-sm, 11px)); border: 1px solid var(--btn-ghost-border); background: var(--btn-ghost-bg); color: var(--btn-ghost-fg-hover); font-size: var(--btn-font, 14px); font-weight: 650; cursor: pointer; } .bazi-confirm-btn--ok { border-color: var(--btn-primary-border); background: var(--btn-primary-bg); color: var(--btn-primary-fg); } .bazi-confirm-btn--danger { border-color: color-mix(in srgb, var(--danger) 50%, var(--surface-border)); background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } .bazi-confirm-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .bazi-toast { transition: none; } } /* source: /ui_tooltip.css?v=1 */ /* 全局墨笺悬浮提示（配 ui_tooltip.js）：替代原生 title 灰盒，深浅主题随 token 自适应 */ .ui-tooltip { position: fixed; z-index: 9900; box-sizing: border-box; max-width: min(260px, calc(100vw - 16px)); padding: 6px 10px; border-radius: var(--surface-radius-sm, 11px); border: 1px solid var(--panel-border); background: var(--popover-bg); color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0.02em; text-align: left; white-space: normal; word-break: break-word; box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease; } .ui-tooltip.isVisible { opacity: 1; transform: none; } .ui-tooltip.ui-tooltip--below { transform: translateY(-3px); } .ui-tooltip.ui-tooltip--below.isVisible { transform: none; } @media (prefers-reduced-motion: reduce) { .ui-tooltip, .ui-tooltip.ui-tooltip--below { transition: none; transform: none; } } /* source: /style_touch_targets.css?v=7 */ /* 关键图标/工具钮触控热区；须在 theme.css 之后 */ .ai-result-head-iconBtn, .ai-master-icon-btn, .ghostBtn.ai-master-icon-btn, .storeHitActions .hitDelLink, .storeHitActions .hitEditLink, .studyPanNotesEdit__btn, .groupTabs__more, .pan-card-action, .learnIconBtn, .learnModule__iconBtn { min-width: var(--touch-min, 44px); min-height: var(--touch-min, 44px); } /* 时柱箭头：需定位上下文（勿改已有 absolute 的 .clearBtn） */ :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .bazi-table :is(.hour-nav, .pan-hour-branch-nav), .storePillarFilter__clearBtn, .storeTabAddBtn { position: relative; } /* * 密度控件：视觉小于 44，用伪元素扩热区。 * 时柱左右箭头间距窄，不可用居中 44×44（会互相重叠并盖住地支大字）； * prev 只向左扩、next 只向右扩，靠外侧对齐避免抢点。 */ :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .bazi-table .hour-nav--prev::before, :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .bazi-table .hour-nav--next::before, .clearBtn::before, .storePillarFilter__clearBtn::before, .studyPanToolbarBaziSearch::before, .storeTabAddBtn::before { content: ""; position: absolute; top: 50%; width: var(--touch-min, 44px); height: var(--touch-min, 44px); transform: translateY(-50%); } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .bazi-table .hour-nav--prev::before { right: 0; left: auto; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .bazi-table .hour-nav--next::before { left: 0; right: auto; } .clearBtn::before, .storePillarFilter__clearBtn::before, .studyPanToolbarBaziSearch::before, .storeTabAddBtn::before { left: 50%; transform: translate(-50%, -50%); } /* source: /style_shell.css?v=4 */ #main-content { outline: none; } #main-content:focus-visible { outline: none; } /* Scrollbar Refinement */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-main) 18%, transparent); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-main) 28%, transparent); } .page { max-width: 1000px; margin: 0 auto; padding: var(--space-page) var(--space-page-x); padding-top: calc(var(--space-page) + var(--safe-top, 0px)); padding-bottom: calc(var(--space-page) + var(--safe-bottom)); } @media (max-width: 560px) { .page { --space-page: 22px; --space-page-x: 14px; } } /* source: /style_shell_header.css?v=7 */ /* 壳层页头窄屏前半；宽屏/页面框架见 style_shell_header_wide.css */ /* Header：品牌左、操作右；导航桌面居中 / 手机底栏，见 style_shell_nav.css */ .header { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; text-align: left; margin-bottom: 16px; } .brand { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 0; min-width: 0; flex: 0 1 auto; } /* 品牌下极细墨线：标识感，非装饰堆砌 */ .brandTitle { position: relative; display: inline-block; } .brandTitle::after { content: ""; display: block; width: 1.15em; height: 1px; margin: 6px 0 0; background: color-mix(in srgb, var(--text-main) 42%, transparent); opacity: 0.9; } .headerLogout { position: absolute; right: 0; top: 0; padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--text-dim); background: transparent; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .headerLogout.isHidden { display: none; } .header-actions { position: relative; right: auto; top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 0 0 auto; z-index: 20; } .headerLogout { position: static; } .userAuthArea { font-size: 13px; } .headerUserSheet.userAuthArea { margin: 0; padding: 0; border: none; max-width: 100%; } .headerUserSheet-summary { list-style: none; } .headerUserSheet-summary::-webkit-details-marker { display: none; } .headerUserSheet-che { display: block; flex-shrink: 0; font-size: 10px; line-height: 1; opacity: 0.75; transition: transform var(--motion-fast, 0.15s) ease; } .headerUserSheet[open] .headerUserSheet-che { transform: rotate(180deg); } .headerUserSheet-panel { margin: 0; } /* source: /style_shell_header_wide.css?v=6 */ /* 壳层页头宽屏；帐号菜单统一为下拉，见 style_shell_page_user.css */ @media (min-width: 561px) { .headerUserSheet-summary { max-width: min(240px, 28vw); } } /* source: /style_shell_page.css?v=6 */ /* 壳层窄屏页边距/顶栏；帐号下拉见 style_shell_page_user.css */ @media (max-width: 560px) { /* 窄屏：顶栏单行，吃掉品牌下第二行左侧空档 */ .page { padding-top: 14px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .page > .header { margin-bottom: 12px; } .page > .header .brandTitle { font-size: 1.45rem; letter-spacing: 0.14em; padding-right: 0.14em; } } /* source: /style_shell_page_user.css?v=9 */ /* 壳层用户区：各宽度均点击用户名展开；问候/退出见 style_shell_page_user_auth.css */ .headerUserSheet.userAuthArea { position: relative; } .headerUserSheet-summary { display: inline-flex; align-items: center; justify-content: center; max-width: min(220px, 42vw); min-width: var(--touch-min, 44px); min-height: var(--touch-min, 44px); height: var(--touch-min, 44px); padding: 0 10px; border: 1px solid transparent; border-radius: var(--surface-radius-sm, 11px); background: transparent; color: var(--text-dim); cursor: pointer; transition: color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease; box-sizing: border-box; } .headerUserSheet-summary:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 6%, transparent); border-color: color-mix(in srgb, var(--text-main) 8%, transparent); } .headerUserSheet-summary:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } .headerUserSheet[open] .headerUserSheet-summary { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 6%, transparent); border-color: color-mix(in srgb, var(--text-main) 10%, transparent); } .headerUserSheet-hit { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; } .headerUserSheet-greetEl { display: block; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.2; color: inherit; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } .headerUserSheet-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: none; flex-direction: column; align-items: stretch; gap: 2px; width: max-content; min-width: var(--menu-min-width, 128px); max-width: min(240px, calc(100vw - 24px)); padding: 6px; border-radius: var(--surface-radius, 16px); border: 1px solid var(--panel-border); background: var(--panel-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.55), inset 0 1px 0 color-mix(in srgb, var(--text-main) 6%, transparent); box-sizing: border-box; overflow: hidden; } .headerUserSheet[open] > .headerUserSheet-panel { display: flex; animation: headerUserSheetPanelIn 0.18s ease-out; } .headerUserSheet-actions { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; } .headerUserSheet-sep { height: 1px; margin: 4px 6px; background: color-mix(in srgb, var(--text-main) 12%, transparent); border: 0; flex-shrink: 0; } .headerUserSheet-switchBtn, .headerUserSheet-menuItem { appearance: none; text-decoration: none; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; margin: 0; padding: 10px 12px; border: none; border-radius: calc(var(--surface-radius-sm, 11px) - 2px); background: transparent; box-sizing: border-box; min-height: var(--touch-min, 44px); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--text-dim); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background 0.15s ease, color 0.15s ease; } /* 压过 .userAuthLink 的字重/字号，保证 button/a 一致 */ a.headerUserSheet-menuItem.userAuthLink, button.headerUserSheet-menuItem.userAuthLink { font-size: 13px; font-weight: 600; color: var(--text-dim); text-decoration: none; } .headerUserSheet-switchBtn:hover, .headerUserSheet-switchBtn:focus-visible, .headerUserSheet-menuItem:hover, .headerUserSheet-menuItem:focus-visible { background: var(--card-hover, color-mix(in srgb, var(--text-main) 7%, transparent)); color: var(--text-main); box-shadow: none; } @keyframes headerUserSheetPanelIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .headerUserSheet[open] > .headerUserSheet-panel { animation: none; } } .userAuthArea.isHidden { display: none; } @media (max-width: 560px) { .headerUserSheet-summary { max-width: min(168px, 48vw); padding: 0 8px; } .headerUserSheet-greetEl { font-size: 12px; } /* 窄屏仍保触控行高，勿再压到 28px */ .headerUserSheet-switchBtn, .headerUserSheet-menuItem { font-size: 13px; min-height: var(--touch-min, 44px); padding: 10px 12px; } } /* source: /style_shell_page_user_menu.css?v=5 */ /* 由 style_shell_page_user.css 拆出；须在其之后 */ /* 固定图标槽，避免不同 SVG 视觉宽导致文字起笔不齐 */ .headerUserSheet-menuIcon { flex: 0 0 16px; display: block; width: 16px; height: 16px; margin: 0; opacity: 0.8; overflow: visible; } .headerUserSheet-menuItem > span { flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.25; } .headerUserSheet-menuItem--danger { color: #f87171; } .headerUserSheet-menuItem--danger .headerUserSheet-menuIcon { opacity: 0.9; } .headerUserSheet-menuItem--danger:hover, .headerUserSheet-menuItem--danger:focus-visible { background: rgba(248, 113, 113, 0.12); color: #fca5a5; box-shadow: none; } [data-theme="light"] .headerUserSheet-sep { background: color-mix(in srgb, var(--text-main) 10%, transparent); } [data-theme="light"] .headerUserSheet-panel { box-shadow: 0 14px 32px -10px rgba(26, 28, 30, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); } [data-theme="light"] .headerUserSheet-menuItem--danger { color: #dc2626; } [data-theme="light"] .headerUserSheet-menuItem--danger:hover, [data-theme="light"] .headerUserSheet-menuItem--danger:focus-visible { background: rgba(220, 38, 38, 0.08); color: #b91c1c; box-shadow: none; } /* source: /style_shell_page_user_auth.css?v=5 */ /* 壳层用户问候与主题钮；由 style_shell_page_user.css 拆出；须在其之后、style_shell_nav.css 之前 */ .userAuthGreet { color: var(--text-main); font-weight: 600; white-space: nowrap; } .userAuthSep { color: var(--text-dim); opacity: 0.3; } .userAuthLink { font-size: 13px; color: var(--text-dim); text-decoration: none; font-weight: 500; cursor: pointer; transition: color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease; white-space: nowrap; } .userAuthLink:hover { color: var(--text-main); } .userAuthLink.isHidden { display: none; } #user-auth-login-link.userAuthLink { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min, 44px); padding: 0 12px; border-radius: var(--surface-radius-sm, 11px); letter-spacing: 0.06em; } #user-auth-login-link.userAuthLink.isHidden { display: none; } #user-auth-login-link.userAuthLink:hover, #user-auth-login-link.userAuthLink:focus-visible { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 6%, transparent); } #user-auth-login-link.userAuthLink:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } .userAuthLogoutBtn:not(.headerUserSheet-menuItem) { background: none; border: none; padding: 0; font-family: inherit; } .headerThemeToggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min, 44px); height: var(--touch-min, 44px); min-width: var(--touch-min, 44px); min-height: var(--touch-min, 44px); padding: 0; border: 1px solid transparent; border-radius: var(--surface-radius-sm, 11px); background: transparent; box-shadow: none; color: var(--text-dim); cursor: pointer; transition: color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease; } .headerThemeToggle:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 6%, transparent); border-color: color-mix(in srgb, var(--text-main) 8%, transparent); } .headerThemeToggle:active { transform: scale(0.96); } .headerThemeToggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } .headerThemeToggle .theme-icon--light { display: none; } .headerThemeToggle .theme-icon--dark { display: block; } [data-theme="light"] .headerThemeToggle .theme-icon--light { display: block; } [data-theme="light"] .headerThemeToggle .theme-icon--dark { display: none; } /* 本机多账号直切选择器（app_user_accounts.js） */ .bazi-account-switch-modal.modal { z-index: 9200; } .bazi-account-switch-sheet { width: min(360px, calc(100vw - 32px)); } .bazi-account-switch-title { font-weight: 600; color: var(--text-main); } .bazi-account-switch-hint { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--text-dim); } .bazi-account-switch-list { display: flex; flex-direction: column; gap: 8px; } .bazi-account-switch-item { appearance: none; display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: var(--touch-min, 44px); padding: 10px 14px; border: 1px solid var(--surface-border); border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 3%, transparent); color: var(--text-main); font: inherit; font-weight: 500; text-align: left; cursor: pointer; transition: background var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease; } .bazi-account-switch-item:hover { background: color-mix(in srgb, var(--text-main) 8%, transparent); border-color: color-mix(in srgb, var(--text-main) 18%, var(--surface-border)); } .bazi-account-switch-item:disabled { opacity: 0.55; cursor: wait; } .bazi-account-switch-item:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } /* source: /style_shell_nav.css?v=32 */ /* 全局排盘/工具/学习导航；由 style_shell.css 拆出；须在其之后、style_study_module.css 之前 */ :root { --app-dock-h: 56px; --learn-app-nav-peek-h: 20px; } /* 桌面：收进顶栏，不再单独吸顶挡盘面 */ .globalAppNav { position: relative; z-index: 4; display: flex; justify-content: center; box-sizing: border-box; width: auto; max-width: 100%; margin: 0; padding: 0; background: transparent; overflow-anchor: none; } .globalAppNav__inner { display: inline-flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; width: auto; max-width: 100%; padding: 3px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--text-main) 5%, transparent); box-sizing: border-box; } .globalAppNav__btn { appearance: none; flex: 0 1 auto; min-width: var(--touch-min, 44px); margin: 0; border: none; border-radius: 999px; padding: 6px 12px; min-height: 40px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); background: transparent; cursor: pointer; text-align: center; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease; } .globalAppNav__icon { display: none; flex-shrink: 0; width: 20px; height: 20px; } .globalAppNav__label { line-height: 1.2; } .globalAppNav__btn:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 6%, transparent); } .globalAppNav__btn.isActive { color: var(--seg-btn-active-fg, var(--btn-primary-fg)); background: var(--seg-btn-active-bg, var(--btn-primary-bg)); font-weight: 700; } .globalAppNav__btn.isActive:hover { color: var(--seg-btn-active-fg, var(--btn-primary-fg)); background: var(--seg-btn-active-bg, var(--btn-primary-bg)); } .globalAppNav__btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } #main-content { scroll-margin-top: calc(var(--touch-min, 44px) + 28px + env(safe-area-inset-top, 0px)); } /* 「记录」：紧跟排盘，不参与视图切换 / 拖拽重排 */ .globalAppNav__btn--records[hidden], .globalAppNav__btn--records.isHidden { display: none !important; } .globalAppNav--reordering { touch-action: none; user-select: none; -webkit-user-select: none; } .globalAppNav__btn--dragging { cursor: grabbing; opacity: 0.96; z-index: 2; position: relative; transform: scale(1.02); box-shadow: 0 4px 14px color-mix(in srgb, var(--text-main) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--text-main) 16%, transparent); } .pan-page-results[hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .globalAppNav__btn--dragging { transform: none; } } @media (min-width: 768px) { .page > .header { display: grid; grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) minmax(4.5rem, auto); align-items: center; column-gap: 12px; text-align: left; margin-bottom: 18px; } .page > .header .brand { align-items: flex-start; min-height: 0; } .page > .header .header-actions { position: relative; top: auto; right: auto; justify-self: end; } .globalAppNav { justify-self: center; } /* 记录 / 看盘：收品牌/帐户，分段导航留下以便离开 */ body:has(#pan-library-drawer.isOpen):has(#app-view-pan:not(.isHidden)) .page > .header, body.panResultFocus:has(#app-view-pan:not(.isHidden)):not(:has(#pan-library-drawer.isOpen)) .page > .header { grid-template-columns: minmax(0, 1fr); margin-bottom: 10px; } body:has(#pan-library-drawer.isOpen):has(#app-view-pan:not(.isHidden)) .page > .header .brand, body:has(#pan-library-drawer.isOpen):has(#app-view-pan:not(.isHidden)) .page > .header .header-actions, body.panResultFocus:has(#app-view-pan:not(.isHidden)):not(:has(#pan-library-drawer.isOpen)) .page > .header .brand, body.panResultFocus:has(#app-view-pan:not(.isHidden)):not(:has(#pan-library-drawer.isOpen)) .page > .header .header-actions { display: none; } } /* 手机：底栏，避开盘面顶部，落在拇指热区 */ @media (max-width: 767px) { :root { --app-dock-space: calc(var(--app-dock-h) + env(safe-area-inset-bottom, 0px)); } body.globalAppNav--empty, body.learnAppNavHidden, body.panAppNavHidden { --app-dock-space: 0px; } body:not(.globalAppNav--empty) .page { padding-bottom: calc(var(--space-page, 22px) + var(--app-dock-space)); } body:has(#app-view-notes:not(.isHidden)) .page { padding-bottom: var(--app-dock-space, 0px); } body:has(#pan-library-drawer.isOpen):has(#app-view-pan:not(.isHidden)) .page, body.panAppNavHidden .page { padding-bottom: 0; } body.panAppNavHidden.panResultFocus:not(:has(#pan-library-drawer.isOpen)) #app-view-pan > section.result, body.panAppNavHidden:has(#app-view-study:not(.isHidden)) #app-view-study { padding-bottom: calc(var(--learn-app-nav-peek-h, 20px) + env(safe-area-inset-bottom, 0px)); } .globalAppNav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 28; width: 100%; max-width: none; margin: 0; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--bg-dark); border-top: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent); justify-content: stretch; } .globalAppNav__inner { display: flex; width: 100%; max-width: none; padding: 0; gap: 0; border-radius: 0; background: transparent; } .globalAppNav__btn { flex: 1 1 0; flex-direction: column; gap: 2px; padding: 4px 4px 6px; min-height: var(--app-dock-h); border-radius: 12px; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; } .globalAppNav__icon { display: block; } .globalAppNav__btn.isActive { background: color-mix(in srgb, var(--text-main) 8%, transparent); color: var(--text-main); box-shadow: none; } .globalAppNav__btn.isActive:hover { background: color-mix(in srgb, var(--text-main) 10%, transparent); color: var(--text-main); } body.panResultFocus:has(#app-view-pan:not(.isHidden)):not(:has(#pan-library-drawer.isOpen)) .page > .header { margin: 0; min-height: 0; height: 0; overflow: visible; } body.panResultFocus:has(#app-view-pan:not(.isHidden)):not(:has(#pan-library-drawer.isOpen)) .page > .header .brand, body.panResultFocus:has(#app-view-pan:not(.isHidden)):not(:has(#pan-library-drawer.isOpen)) .page > .header .header-actions { display: none; } body:has(#app-view-notes:not(.isHidden)):not(.learnAppNavHidden) .page > .header { margin: 0; min-height: 0; height: 0; overflow: visible; } body:has(#app-view-notes:not(.isHidden)):not(.learnAppNavHidden) .page > .header .brand, body:has(#app-view-notes:not(.isHidden)):not(.learnAppNavHidden) .page > .header .header-actions { display: none; } /* 记录展开底栏时：顶栏仍收，fixed 底栏靠 overflow 露出 */ body:has(#pan-library-drawer.isOpen):has(#app-view-pan:not(.isHidden)) .page > .header, body:has(#app-view-study:not(.isHidden)):not(.panAppNavHidden) .page > .header { margin: 0; min-height: 0; height: 0; overflow: visible; } body:has(#pan-library-drawer.isOpen):has(#app-view-pan:not(.isHidden)) .page > .header .brand, body:has(#pan-library-drawer.isOpen):has(#app-view-pan:not(.isHidden)) .page > .header .header-actions, body:has(#app-view-study:not(.isHidden)):not(.panAppNavHidden) .page > .header .brand, body:has(#app-view-study:not(.isHidden)):not(.panAppNavHidden) .page > .header .header-actions { display: none; } } body.panAppNavHidden .page > .header { display: none !important; } /* 看盘结果 / 工具学习盘：页顶只留安全区 */ body.panAppNavHidden.panResultFocus:not(:has(#pan-library-drawer.isOpen)) .page, body.panAppNavHidden:has(#app-view-study:not(.isHidden)) .page { padding-top: env(safe-area-inset-top, 0px); } /* 学习页：扁平箭头贴底边，不占整条阅读带；仍用 button 以便键盘与读屏 */ .globalAppNav__peek { position: fixed; z-index: 34; left: 50%; transform: translateX(-50%); display: none; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: var(--learn-app-nav-peek-h); padding: 0; margin: 0; border: none; border-radius: 0; background: transparent; color: var(--text-dim); box-shadow: none; overflow: visible; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .globalAppNav__peek[hidden], body.learnAppNavExpanded .globalAppNav__peek, body.panAppNavExpanded .globalAppNav__peek, body:has(#app-view-notes:not(.isHidden)).learnReaderChromeVisible .globalAppNav__peek { display: none !important; } body:has(#app-view-notes:not(.isHidden)) .globalAppNav__peek:not([hidden]), body.panAppNavHidden .globalAppNav__peek:not([hidden]) { display: inline-flex; } .globalAppNav__peek::after { content: ""; position: absolute; left: -6px; right: -6px; top: 0; bottom: -12px; } .globalAppNav__peek svg { display: block; flex-shrink: 0; pointer-events: none; } .globalAppNav__peek:hover { color: var(--text-main); background: transparent; } .globalAppNav__peek:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } @media (max-width: 767px) { .globalAppNav__peek { top: auto; bottom: 0; } } @media (min-width: 768px) { .globalAppNav__peek { top: 0; bottom: auto; } .globalAppNav__peek::after { top: -8px; bottom: 0; } } /* source: /style_pan_subnav.css?v=31 */ /* 排盘「记录」整页：与 #tab-birth 同槽同卡片，非浮层 */ #app-view-pan { overflow-anchor: none; } #app-view-pan.isLibraryOpen > #tab-birth, #app-view-pan.isLibraryOpen > section.result, #app-view-pan:has(#pan-library-drawer.isOpen) > #tab-birth, #app-view-pan:has(#pan-library-drawer.isOpen) > section.result { display: none !important; } .panLibraryDrawer { display: none; width: 100%; max-width: none; margin: 0; box-sizing: border-box; } .panLibraryDrawer.isOpen, .panLibraryDrawer:not(.isHidden) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .panLibraryDrawer.isHidden, .panLibraryDrawer[hidden] { display: none !important; } .panLibraryDrawer__panel { display: flex; flex-direction: column; width: 100%; margin: 0; box-sizing: border-box; flex: 1 1 auto; min-height: 0; height: auto; max-height: none; padding-bottom: env(safe-area-inset-bottom, 0px); border-radius: var(--surface-radius-lg, 20px); border: 1px solid var(--surface-border, var(--panel-border)); background: var(--panel-bg, var(--card-bg, var(--bg))); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 5%, transparent), var(--shadow-sm); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); overflow: hidden; } /* 打开库房时锁住视口高度，命例列表才有有界滚动区 */ .page:has(#pan-library-drawer.isOpen) { box-sizing: border-box; height: 100dvh; max-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } .page:has(#pan-library-drawer.isOpen) > .header { flex: 0 0 auto; } .page:has(#pan-library-drawer.isOpen) > #main-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #app-view-pan:has(#pan-library-drawer.isOpen) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .panLibraryDrawer__head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 4px; flex-shrink: 0; padding: 4px 10px 0; position: sticky; top: 0; z-index: 6; background: var(--panel-bg, var(--card-bg, var(--bg))); } .panLibraryDrawer__tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; border-bottom: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent); } .panLibraryDrawer__tab { appearance: none; -webkit-appearance: none; position: relative; margin: 0; border: none; border-radius: 0; padding: 8px 12px 10px; min-height: var(--touch-min, 44px); font: inherit; font-size: 13px; font-weight: 650; letter-spacing: 0.08em; color: var(--text-dim); background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .panLibraryDrawer__tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 1px; background: transparent; } .panLibraryDrawer__tab:hover { color: var(--text-main); } .panLibraryDrawer__tab.isActive, .panLibraryDrawer__tab[aria-selected="true"] { color: var(--text-main); font-weight: 750; } .panLibraryDrawer__tab.isActive::after, .panLibraryDrawer__tab[aria-selected="true"]::after { background: var(--text-main); } .panLibraryDrawer__tab[hidden] { display: none !important; } .panLibraryDrawer__tab:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; border-radius: 6px; } .panLibraryDrawer__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; padding: 8px 14px 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* 命例 / AI：筛选条钉在上方，仅列表区滚动，避免内容滑到搜索/芯片下 */ .panLibraryDrawer__body:has(#pan-library-pane-ai.isActive), .panLibraryDrawer__body:has(#pan-library-pane-store.isActive) { overflow: hidden; } .panLibraryDrawer .guest-ai-history-filters { flex: 0 0 auto; position: relative; z-index: 2; background: var(--panel-bg, var(--card-bg, var(--bg))); } .panLibraryDrawer .guest-ai-history-list { position: relative; z-index: 0; } .panLibraryDrawer__pane.isActive { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 0; overflow: visible; } #pan-library-drawer #pan-library-pane-ai.isActive, #pan-library-drawer #pan-library-pane-store.isActive { flex: 1 1 auto; min-height: 0; overflow: hidden; } .panLibraryDrawer__pane.isHidden, .panLibraryDrawer__pane[hidden] { display: none !important; } .panLibraryDrawer #store-query-module > .pan-module__head { display: none; } .panLibraryDrawer #store-query-module.pan-module--store { display: flex; flex-direction: column; flex: 1 1 auto; border: none; border-radius: 0; padding: 0; background: transparent; box-shadow: none; max-height: none; min-height: 0; overflow: hidden; } /* 抽屉内模块间距收紧，筛选与列表纵向分隔 */ .panLibraryDrawer #store-query-module { gap: 8px; } .panLibraryDrawer #store-query-module > .store-query-filters { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex: 0 0 auto; min-height: 0; margin: 0 -14px; padding: 0 14px 8px; position: relative; z-index: 2; background: var(--panel-bg, var(--card-bg, var(--bg))); } .panLibraryDrawer #store-query-module > .store-query-filters .store-query-filters__primary { display: flex; flex-direction: column; flex: 0 0 auto; gap: 6px; min-width: 0; } .panLibraryDrawer #store-query-module > .store-query-filters .store-query-filters__query { min-width: 0; } .panLibraryDrawer #store-query-module > .store-query-filters .store-query-filters__facets { min-width: 0; } .panLibraryDrawer #store-query-module > .store-query-filters .store-filter-stack { min-width: 0; } .panLibraryDrawer #store-query-module > .store-query-filters .storeFilterMore { flex: 0 0 auto; align-self: center; white-space: nowrap; } /* 展开区跟在按钮下、不滚动；只有命例列表滚动 */ .panLibraryDrawer #store-query-module > .store-query-filters .store-filter-more:not(.isHidden) { position: static; z-index: auto; flex: 0 0 auto; min-height: 0; max-height: none; overflow: visible; padding: 4px 0 0; border: none; border-top: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent); border-radius: 0; background: transparent; box-shadow: none; } /* 视口过矮时隐藏命中数一行，把空间让给筛选条与列表 */ @media (max-height: 680px) { .panLibraryDrawer #store-query-module > .storePanelStatus { display: none; } } .panLibraryDrawer #store-query-module > .storePanelStatus { flex: 0 0 auto; margin-bottom: 0; } .panLibraryDrawer #store-panel-result { /* 唯一滚动区：从第一条命例开始，高度=抽屉剩余，滚到底即停 */ flex: 1 1 auto; min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; z-index: 0; } [data-theme="light"] .panLibraryDrawer #store-query-module > .store-query-filters { background: #ffffff; } .panLibraryDrawer #guest-ai-history, .panLibraryDrawer #guest-ai-history.pan-module--ai:not(.isHidden) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 0; border: none; border-radius: 0; padding: 0; background: transparent; box-shadow: none; overflow: hidden; } #app-view-pan > #tab-birth.birth-form-shell { margin-bottom: 0; } #app-view-pan > #tab-birth + section.result { margin-top: 0; } body.panResultFocus #app-view-pan:not(.isHidden):not(.isLibraryOpen) > #tab-birth { display: none !important; } @media (max-width: 767px) { body:not(.globalAppNav--empty) .panLibraryDrawer__panel { /* 底部净空从面板移到滚动区：末卡可滚入该区完整呈现，不再在死区上沿被裁 */ padding-bottom: 0; } body:not(.globalAppNav--empty) .panLibraryDrawer .guest-ai-history-list, body:not(.globalAppNav--empty) .panLibraryDrawer .storePanelResult, body:not(.globalAppNav--empty) .panLibraryDrawer #store-panel-result { padding-bottom: var(--app-dock-space, calc(56px + env(safe-area-inset-bottom, 0px))); } body.panAppNavHidden .panLibraryDrawer .guest-ai-history-list, body.panAppNavHidden .panLibraryDrawer .storePanelResult, body.panAppNavHidden .panLibraryDrawer #store-panel-result { padding-bottom: calc(var(--learn-app-nav-peek-h, 20px) + env(safe-area-inset-bottom, 0px)); } } /* source: /style_study_module.css?v=9 */ /* 学习模块工具条八字输入；说明/性别见 style_study_module_desc.css */ .studyModule__shell { display: flex; flex-direction: column; gap: var(--module-gap, 22px); width: 100%; min-width: 0; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .studyModule__head { margin: 0; padding: 0; } .studyModule__head .studyModule__title { margin: 0; } .studyModule__preview { margin-top: 0; border-top: none; padding-top: 0; min-width: 0; } .studyModule__preview:empty { display: none; } .pan-module--study-library .studyPanCsToolbarShell:not(.isHidden) { margin: 0 0 var(--module-gap-sm, 10px); padding-top: 0; border-top: none; } .pan-module--study-library .study-filter-stack { margin-bottom: 10px; } .pan-module--study-library .studyPanRecordList { margin: 0; max-height: min(42vh, 360px); } #study-pan-preview .card.pan-display-card { position: relative; z-index: 1; padding: 14px; margin-bottom: 0; } .studyPanToolbarBaziInputWrap { display: flex; align-items: center; width: 100%; margin-bottom: 6px; position: relative; } .studyPanToolbarBaziSearch { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0.5; transition: opacity 0.15s, background 0.15s; padding: 0; } .studyPanToolbarBaziSearch:hover { opacity: 1; background: var(--card-hover); } .studyPanToolbarBaziSearch > svg { display: block; width: 14px; height: 14px; } .studyPanToolbarBaziInput { width: 100%; padding: 6px 30px 6px 10px; border: 1px solid var(--input-border); border-radius: var(--surface-radius-sm, 11px); background: var(--input-bg); color: var(--text-main); font-size: 13px; font-family: inherit; line-height: 1.4; outline: none; box-sizing: border-box; transition: border-color 0.15s; } .studyPanToolbarBaziInput::placeholder { color: var(--text-dim); opacity: 0.55; } .studyPanToolbarBaziInput:focus { border-color: var(--primary); } /* source: /style_study_module_desc.css?v=2 */ /* 学习模块说明与性别；由 style_study_module.css 拆出；须在其之后 */ .studyModule__desc { margin: 0 0 10px; color: var(--text-dim); font-size: 12px; } .studyModule__gender { display: inline-flex; gap: 12px; margin-bottom: 8px; } .studyModule__gender label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .study-bazi-inner { margin-top: 4px; margin-bottom: 8px; } .study-bazi-inner .bazi-input-grid { max-width: 420px; margin-left: 0; margin-right: 0; } .study-bazi-inner .bazi-col .studyModule__pillarTitle { margin-bottom: 4px; font-size: 11px; color: rgba(203, 213, 225, 0.86); text-align: center; } .study-bazi-inner input.bazi-piece { height: 38px; min-height: 38px; } .studyPiecePicker { margin-top: 10px; border: 1px solid var(--filter-separator); border-radius: var(--surface-radius-sm, 11px); background: var(--bg-dark); padding: 8px; } .studyPiecePicker__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .studyPiecePicker__opt { min-height: 30px; border: 1px solid var(--line); border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 6%, var(--card-bg)); color: color-mix(in srgb, var(--text-main) 95%, transparent); font-size: 16px; font-weight: 800; } .studyPiecePicker__opt.wood { color: #34d399; } .studyPiecePicker__opt.fire { color: #fb7185; } .studyPiecePicker__opt.earth { color: #fbbf24; } .studyPiecePicker__opt.metal { color: #ffffff; } .studyPiecePicker__opt.water { color: var(--water); } .studyModule__actions { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* source: /style_study_module_preview.css?v=4 */ /* 学习盘预览卡与长生条壳；由 style_study_module.css 拆出；须在其之后、style_study_notes.css 之前 */ /* studyModule__preview 样式见上方 pan-module 分区 */ /* 学习盘批断：#pan-live-note 移入此区，与下方预览卡留出间距 */ .studyPanNoteShell { display: none; } /* 与主命盘 .pan-cs-toolbar-panel 同系样式；置于预览卡上方、学习区内始终可见 */ .studyPanCsToolbarShell { width: 100%; min-width: 0; margin: 10px 0 6px 0; padding-top: 8px; border-top: 1px solid var(--line); } /* 学习盘预览：十二长生已内嵌到克隆卡工具栏时，与主排盘 #pan-cs-toolbar-panel 同排，不再要外置壳边距 */ #study-pan-preview .pan-card-toolbar .studyPanCsToolbarShell { margin: 0; padding-top: 0; border-top: none; flex: 1 1 auto; min-width: 0; align-self: stretch; } .studyPanRecordList { display: flex; flex-direction: column; gap: 8px; margin: 0; max-height: min(42vh, 360px); overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-main) 28%, transparent) transparent; } .studyPanRecordList::-webkit-scrollbar { width: 6px; } .studyPanRecordList::-webkit-scrollbar-track { background: transparent; } .studyPanRecordList::-webkit-scrollbar-thumb { border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 26%, transparent); } .studyPanRecordList__empty { border: 1px dashed color-mix(in srgb, var(--text-main) 28%, transparent); border-radius: var(--surface-radius-sm, 11px); padding: 14px 12px; color: var(--text-dim); font-size: 13px; text-align: center; line-height: 1.45; } .studyPanRecordItem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: center; padding: 2px 2px 2px 0; border: 1px solid var(--surface-border, var(--line)); border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 2.5%, transparent); transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .studyPanRecordItem:hover { background: color-mix(in srgb, var(--text-main) 5%, transparent); border-color: color-mix(in srgb, var(--text-main) 18%, transparent); } .studyPanRecordItem__main, .studyPanRecordItem__iconBtn { color: color-mix(in srgb, var(--text-main) 94%, transparent); transition: color 0.16s ease, background-color 0.16s ease; } .studyPanRecordItem__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; flex: 0 0 auto; padding-right: 2px; } /* source: /style_study_module_preview_item.css?v=6 */ .studyPanRecordItem__main { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; padding: 8px 10px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; cursor: pointer; min-height: 40px; border: 0; outline: 0; background: transparent; border-radius: var(--surface-radius-sm, 11px); box-shadow: none; box-sizing: border-box; } .studyPanRecordItem__main:hover, .studyPanRecordItem__iconBtn:hover { background: transparent; } .studyPanRecordItem.isActive { background: #ffffff; border-color: #ffffff; box-shadow: none; } .studyPanRecordItem.isActive .studyPanRecordItem__main { color: #111111; } .studyPanRecordItem__bazi { display: block; max-width: 100%; font-size: 14px; font-weight: 650; letter-spacing: 0.02em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studyPanRecordItem__bazi--placeholder { font-weight: 550; color: var(--text-dim); } .studyPanRecordItem__tags { display: flex; gap: 4px; flex-wrap: wrap; max-width: 100%; } .studyPanRecordItem__tags em { font-style: normal; font-size: 10px; font-weight: 600; line-height: 1.35; border-radius: var(--tag-badge-radius, 3px 12px 12px 3px); padding: 1px 6px; border: 1px solid var(--line); color: var(--text-muted); background: var(--tag-bg); } /* source: /style_study_notes.css?v=5 */ /* 学习盘笔记列表前半；编辑钮见 style_study_notes_edit.css */ /* 学习盘记录标签：深色白字 / 浅色黑字（选中项由激活态规则接管，避免二次反色） */ html:not([data-theme="light"]) #app-view-study .studyPanRecordItem:not(.isActive) .studyPanRecordItem__tags em { color: #ffffff !important; } [data-theme="light"] #app-view-study .studyPanRecordItem:not(.isActive) .studyPanRecordItem__tags em { color: #0a0a0a !important; } .studyPanRecordItem__note { grid-column: 1 / -1; font-size: 12px; color: rgba(203, 213, 225, 0.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="light"] .studyPanRecordItem__note { color: var(--text-dim); } .studyPanRecordItem__iconBtn { appearance: none; -webkit-appearance: none; width: 38px; min-width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(226, 232, 240, 0.9); border: 0; outline: 0; background: transparent; border-radius: 8px; } .studyPanRecordItem__delBtn { margin: 0; padding: 0; width: 34px; height: 34px; min-width: 34px; min-height: 34px; align-self: center; box-sizing: border-box; border: none; border-radius: 8px; background: transparent; box-shadow: none; flex: 0 0 auto; line-height: 1; font-weight: 600; transition: color 0.15s ease; color: #f87171 !important; display: inline-flex; align-items: center; justify-content: center; } #app-view-study .studyPanRecordItem .hitDelLink .ui-icon-svg--delete, #app-view-study .studyPanRecordItem .hitDelLink svg { width: 16px; height: 16px; } #app-view-study .studyPanRecordItem .hitDelLink.studyPanRecordItem__delBtn:hover, #app-view-study .studyPanRecordItem:hover .hitDelLink.studyPanRecordItem__delBtn { color: #fb7185 !important; background: transparent !important; box-shadow: none !important; filter: none !important; } #app-view-study .studyPanRecordItem .hitDelLink.studyPanRecordItem__delBtn:active { transform: scale(0.96); background: transparent !important; box-shadow: none !important; filter: none !important; } /* 深色主题激活卡为白底：删除钮用深红保持可读 */ html:not([data-theme="light"]) #app-view-study .studyPanRecordItem.isActive .hitDelLink.studyPanRecordItem__delBtn { color: #ef4444 !important; } #app-view-study .studyPanRecordItem .hitDelLink.studyPanRecordItem__delBtn:focus-visible { outline: 2px solid rgba(248, 113, 113, 0.45); outline-offset: 1px; background: transparent !important; box-shadow: none !important; } /* source: /style_study_notes_edit.css?v=6 */ /* 学习盘记录编辑钮等；由 style_study_notes.css 拆出；须在其之后、style_study_notes_editor.css 之前 */ /* 学习盘记录：编辑按钮与库房 ghostBtn ai-master-icon-btn 一致 */ #app-view-study .studyPanRecordItem .ghostBtn.ai-master-icon-btn { margin: 0; padding: 0; width: 34px; height: 34px; min-width: 34px; min-height: 34px; align-self: center; box-sizing: border-box; border: none; border-radius: var(--surface-radius-sm, 11px); background: transparent; box-shadow: none; flex: 0 0 auto; line-height: 1; font-size: 18px; font-weight: 600; transition: color 0.15s ease; } #app-view-study .studyPanRecordItem .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete) { color: var(--text-muted); } #app-view-study .studyPanRecordItem:hover .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete) { color: var(--text-main); } #app-view-study .studyPanRecordItem .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):hover, #app-view-study .studyPanRecordItem .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):active { color: var(--text-main); background: transparent !important; box-shadow: none; transform: none; } .studyTagAddFloating { position: fixed; z-index: 60; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--surface-radius, 16px); border: 1px solid var(--surface-border, var(--line)); background: var(--popover-bg, var(--card-bg)); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: min(320px, calc(100vw - 20px)); row-gap: 6px; } .studyTagAddFloating__input { width: 132px; min-height: 30px; border: 1px solid var(--input-border); border-radius: var(--surface-radius-sm, 11px); background: var(--input-bg); color: var(--text-main); font-size: 12px; padding: 0 10px; flex: 1 1 auto; min-width: 0; } .studyTagAddFloating__input::placeholder { color: var(--text-dim); } .studyTagAddFloating__input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.72); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.22); } .studyTagAddFloating__ok, /* source: /style_study_notes_edit_btns.css?v=3 */ .studyTagAddFloating__cancel { min-height: 30px; border: 1px solid var(--line); border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 8%, transparent); color: var(--text-main); font-size: 12px; font-weight: 700; padding: 0 10px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .studyTagAddFloating__ok { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.28); } .studyTagAddFloating__ok:hover, .studyTagAddFloating__cancel:hover { background: color-mix(in srgb, var(--text-main) 12%, transparent); border-color: color-mix(in srgb, var(--text-main) 28%, transparent); } .studyTagAddFloating__ok:hover { background: rgba(var(--accent-rgb), 0.38); border-color: rgba(var(--accent-rgb), 0.66); } .studyTagAddFloating__ok:active, .studyTagAddFloating__cancel:active { transform: translateY(1px); } .studyPanNoteView { margin: 12px 0 0; padding: 14px 0 0; border: none; border-top: 1px solid var(--surface-border, var(--panel-border)); border-radius: 0; background: transparent; overflow: visible; display: block; width: 100%; box-sizing: border-box; } .studyPanNoteView__editorWrap { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; } #study-pan-preview .studyPanNoteView__editorWrap { gap: 0; } .studyPanNoteView__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* 学习盘笔记：与出生页「分组」同行——图标列 + 字段壳 */ #study-pan-preview .studyPanNoteView .birth-c-row { padding: 8px 0; gap: 10px; border-bottom: none; min-height: 48px; } #study-pan-preview .studyPanNoteView .studyPanNoteView__field.birth-c-row { flex-direction: row; align-items: center; } #study-pan-preview .studyPanNoteView .studyPanNoteView__field--body.birth-c-row, #study-pan-preview .studyPanNoteView .studyPanNoteView__tagsField { align-items: flex-start; } #study-pan-preview .studyPanNoteView .studyPanNoteView__field--body .birth-c-row__icon-lead, #study-pan-preview .studyPanNoteView .studyPanNoteView__tagsField .birth-c-row__icon-lead { align-self: flex-start; margin-top: 2px; } #study-pan-preview .studyPanNoteView .studyPanNoteView__titleShell, #study-pan-preview .studyPanNoteView .studyPanNoteView__bodyShell { flex: 1 1 auto; width: auto; min-width: 0; } #study-pan-preview .studyPanNoteView .studyPanNoteView__saveBar.birth-c-row { justify-content: center; min-height: 0; padding: 10px 0 0; border-bottom: none; } .studyPanNoteView__fieldHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; } .studyPanNoteView__fieldLabel { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-dim); line-height: 1.35; } .studyPanNoteView__editorArea { position: relative; } /* source: /style_study_notes_editor.css?v=5 */ /* 学习盘笔记预览钮与标题行；库房复用见 style_study_notes_editor_extra.css */ /* 学习盘笔记：预览钮在字段标题行；其它场景（库房/AI 内联）仍在 editorArea 内绝对定位 */ .studyPanNoteView__fieldHead .studyPanNoteView__eyeBtn { position: static; top: auto; right: auto; flex: 0 0 auto; } .studyPanNoteView__editorArea .studyPanNoteView__eyeBtn { position: absolute; top: 2px; right: 8px; z-index: 2; } /* 边框/底/圆角/focus 与出生字段壳、标签行统一，见 style_store_fields_shell.css */ .studyPanNoteView__titleShell.birth-c-field-shell, .studyPanNoteView__bodyShell.birth-c-field-shell { min-height: 40px; display: flex; align-items: stretch; width: 100%; flex: none; min-width: 0; overflow: hidden; } .studyPanNoteView__bodyShell.birth-c-field-shell { position: relative; min-height: 0; flex-direction: column; } #study-pan-preview .studyPanNoteView__bodyShell > .studyPanNoteView__eyeBtn { position: absolute; top: 6px; right: 6px; z-index: 2; } .studyPanNoteView__titleInput { display: block; width: 100%; margin: 0; min-height: 38px; border: none !important; border-radius: 0; background: transparent !important; box-shadow: none !important; color: var(--text-main); padding: 0 12px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.45; box-sizing: border-box; outline: none; } .studyPanNoteView__titleInput::placeholder { color: var(--text-dim); font-weight: 500; opacity: 0.72; } /* source: /style_study_notes_editor_eye.css?v=4 */ .studyPanNoteView__eyeBtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border-radius: 8px; border: none; box-shadow: none; outline: none; background: transparent; color: rgba(226, 232, 240, 0.72); cursor: pointer; } .studyPanNoteView__eyeBtn:hover { border: none; box-shadow: none; background: transparent; color: rgba(226, 232, 240, 0.95); } .studyPanNoteView__eyeBtn.isActive { border: none; box-shadow: none; background: transparent; color: #fff; } .studyPanNoteView__eyeBtn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 2px; } .studyPanNoteView__bodyShell .studyPanNoteView__editorArea { flex: 1; min-width: 0; width: 100%; } .studyPanNoteView__editor { display: block; width: 100%; min-height: 96px; resize: vertical; border-radius: 0; border: none !important; background: transparent !important; box-shadow: none !important; color: var(--text-main); padding: 10px 12px; line-height: 1.55; box-sizing: border-box; outline: none; font-family: inherit; font-size: 13px; } .studyPanNoteView__editor::placeholder { color: var(--text-dim); opacity: 0.72; } #study-pan-preview .studyPanNoteView__bodyShell .studyPanNoteView__editor { min-height: 108px; padding-right: 42px; } #study-pan-preview .studyPanNoteView__bodyShell > .studyPanNoteView__body { padding: 10px 42px 10px 12px; min-height: 108px; width: 100%; box-sizing: border-box; } /* source: /style_study_notes_editor_extra.css?v=4 */ /* 学习盘笔记编辑区库房复用与窄屏；由 style_study_notes_editor.css 拆出；须在其之后、style_study_pan.css 之前 */ /* 库房/AI 内联等仍用 editorArea 包裹时，输入框自带边框与预览钮留白 */ .studyPanNoteView__editorArea > .studyPanNoteView__editor, .pan-note-editor-section .studyPanNoteView__editor.pan-store-note-textarea { border: 1px solid var(--input-border); background: var(--input-bg); border-radius: var(--surface-radius-sm, 11px); padding: 34px 46px 8px 10px; min-height: 72px; } .studyPanNoteView__body { font-size: 13px; line-height: 1.55; color: var(--text-main); } .studyPanNoteView__tagsRow { display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: 100%; margin: 12px 0 0; overflow: visible; box-sizing: border-box; } #study-pan-preview .studyPanNoteView .studyPanNoteView__tagsRow { flex: 1 1 auto; min-width: 0; margin: 0; } .studyPanNoteView__tagChips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; margin: 0; padding: 0; } .studyPanNoteView__tagChips:empty { display: none; } .studyPanNoteView__tagsRow > .studyPanNoteView__tagMenuRoot.birth-c-tag-picker-root.pan-store-group-picker { flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; } .studyPanNoteView__saveBar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; width: 100%; margin-top: 12px; padding: 0; box-sizing: border-box; } .studyPanNoteView__tagChip { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; border-radius: var(--tag-badge-radius, 3px 12px 12px 3px); padding: 2px 4px 2px 8px; border: 1px solid var(--line); color: var(--text-muted); background: var(--tag-bg); line-height: 1.4; } .studyPanNoteView__tagChipDel { appearance: none; background: transparent; border: none; color: inherit; font-size: 13px; cursor: pointer; padding: 0 2px; line-height: 1; opacity: 0.55; } .studyPanNoteView__tagChipDel:hover { opacity: 1; } /* source: /style_study_notes_editor_extra_colors.css?v=3 */ /* 学习盘标签彩色 chip 已移除；标签仅按名称区分。基础样式见 style_study_notes_editor_extra.css */ /* source: /style_study_pan.css?v=9 */ /* 学习盘预览壳；运程格见 style_study_pan_drill.css */ /* * 空位环：与出生 .bazi-piece:placeholder-shown / 库房 --empty 同手法（radial + --bazi-empty-ring*）。 * 环画在盘面 .glyph 槽内（1em / 36px），热区仍是 glyph-wrapper，不抄表单行高。 */ #study-pan-preview .study-glyph-wrapper--empty-hint { border: none; background: transparent; border-radius: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer; /* 环线宽：与出生 --birth-bazi-ring-border 同公式（相对槽字号） */ --study-empty-ring-border: max(1.5px, 0.1em); } #study-pan-preview .study-glyph-wrapper--empty-hint .glyph.glyph--empty { border: none; border-radius: 0; background-color: transparent; background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--study-empty-ring-border)), var(--bazi-empty-ring) calc(50% - var(--study-empty-ring-border)), var(--bazi-empty-ring) 50%, transparent 50.5% ); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; box-sizing: border-box; color: transparent; display: flex; align-items: center; justify-content: center; } #study-pan-preview .study-glyph-wrapper--empty-hint:hover .glyph.glyph--empty { background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--study-empty-ring-border)), var(--bazi-empty-ring-hover) calc(50% - var(--study-empty-ring-border)), var(--bazi-empty-ring-hover) 50%, transparent 50.5% ); } #study-pan-preview .study-glyph-wrapper--empty-hint:focus-within .glyph.glyph--empty, #study-pan-preview .study-glyph-wrapper--empty-hint:focus-visible .glyph.glyph--empty { background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--study-empty-ring-border)), var(--bazi-empty-ring-focus) calc(50% - var(--study-empty-ring-border)), var(--bazi-empty-ring-focus) 50%, transparent 50.5% ); } #study-pan-preview .study-glyph-wrapper--empty-hint .glyph.glyph--empty .empty-glyph { display: block; width: 0; height: 0; overflow: hidden; opacity: 0; font-size: 0; line-height: 0; } #study-pan-preview .hiddenList--studyEmpty { min-height: 20px; opacity: 0.5; font-size: 11px; color: color-mix(in srgb, var(--text-main) 45%, transparent); } #study-pan-preview .studyDrillCol { min-width: 0; width: auto; position: relative; } #study-pan-preview th.studyDrillCol-header { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: color-mix(in srgb, var(--text-main) 72%, transparent); white-space: nowrap; } /* * 空位环画在绝对定位的 .glyph 上，wrapper 必须占住字盒。 * 否则 drill 列只剩「流年/大运」表头宽，36px 圆溢到时柱，看起来像甲/酉旁边多出空圈。 */ #study-pan-preview .card .glyph-wrapper { min-width: 36px; min-height: 36px; } /* 大运/流年列与四柱列等宽：铺满容器、fixed 均分，与窄屏 compact drill 一致 */ #study-pan-preview .card.pan-display-card.pan-table--drill .table-container-inner { width: 100%; max-width: 100%; display: block; } #study-pan-preview .card.pan-display-card.pan-table--drill .bazi-table { table-layout: fixed; width: 100%; max-width: 100%; } #study-pan-preview .card.pan-display-card.pan-table--drill .bazi-table th, #study-pan-preview .card.pan-display-card.pan-table--drill .bazi-table td { min-width: 44px; width: auto; box-sizing: border-box; padding: 5px 0; vertical-align: top; overflow: visible; } #study-pan-preview .studyDrillCol__box { border: 1px dashed color-mix(in srgb, var(--text-main) 32%, transparent); border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 6%, transparent); display: flex; align-items: stretch; justify-content: stretch; padding: 0; box-sizing: border-box; } /* source: /style_study_pan_drill.css?v=2 */ /* 学习盘预览运程格；由 style_study_pan.css 拆出；须在其之后 */ #study-pan-preview .studyDrillCol__box.studyDrillCol__box--filled { border-color: transparent; background: transparent; } #study-pan-preview .studyDrillCol__box--rowStem { min-height: 40px; height: 40px; position: relative; } #study-pan-preview .studyDrillCol__box--rowStem.studyDrillCol__box--hasTenGod::after { content: attr(data-ten-god); position: absolute; left: calc(50% + 15px); top: 20px; transform: translateY(-50%); min-width: 44px; text-align: left; font-size: 9px; line-height: 1.08; font-weight: 700; color: #cbd5e1; pointer-events: none; user-select: none; } #study-pan-preview .studyDrillCol__box--rowBranch { min-height: 46px; height: 46px; } #study-pan-preview .studyDrillCol__input { width: 100%; border: 0; border-radius: 8px; background: transparent; color: rgba(226, 232, 240, 0.95); text-align: center; font-size: 20px; font-weight: 700; padding: 0; line-height: 1; box-sizing: border-box; /* 与四柱可点选格一致；聚焦后仍可键盘键入 */ cursor: pointer; } #study-pan-preview .studyDrillCol__input.wood { color: #52f08c; caret-color: #52f08c; } #study-pan-preview .studyDrillCol__input.fire { color: #ff7e92; caret-color: #ff7e92; } #study-pan-preview .studyDrillCol__input.earth { color: #fcd34d; caret-color: #fcd34d; } #study-pan-preview .studyDrillCol__input.metal { color: #ffffff; caret-color: #e2e8f0; } #study-pan-preview .studyDrillCol__input.water { color: var(--water); caret-color: var(--water); } #study-pan-preview .studyDrillCol__input--rowStem { min-height: 40px; height: 40px; } #study-pan-preview .studyDrillCol__input--rowBranch { min-height: 46px; height: 46px; } #study-pan-preview .studyDrillCol__input::placeholder { color: var(--text-dim); font-size: 12px; } #study-pan-preview .studyDrillCol__input:focus { cursor: text; outline: none; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.72); } #study-pan-preview .studyDrillCol__hidden { min-height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--text-main) 8%, transparent); } /* 主排盘、学习盘预览与学习页嵌入命盘：隐藏四柱表头（年/月/日/时）；导出快照与屏上一致，亦隐藏表头 */ #pan .bazi-table thead, #study-pan-preview .bazi-table thead, .learnPanDisplaySlot .bazi-table thead { display: none; } /* 学习盘偏好：关闭地支藏干时整行隐藏 */ #study-pan-preview .studyPanPreviewCard.study-pan-pref--hide-hidden-stems .bazi-table tbody tr:nth-child(3) { display: none; } /* source: /style_study_pan_preview.css?v=3 */ /* 学习盘预览分段钮；正文见 style_study_pan_preview_body.css */ /* 学习盘预览为静态展示：不显示命盘偏好入口；不显示日柱性别旁「互换」箭头，并禁止点击触发行运重排 */ #study-pan-preview .pan-prefs-wrap { display: none !important; } #study-pan-preview .pan-gender-toggle-sym, #study-pan-preview .pan-gender-toggle-svg { display: none !important; } #study-pan-preview .pan-gender-toggle-hit { pointer-events: none; cursor: default; } /* 学习盘预览 / guest AI 弹窗：尽量与主排盘卡保持一致的字阶与紧凑度 */ #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table th, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table th, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table td, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table td { min-width: 0; width: auto; padding: 3px 0; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th { font-size: clamp(8px, 2vw, 11px); letter-spacing: 0.06em; line-height: 1.2; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .hiddenPart__label, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .hiddenPart__label { display: block; font-size: 7px; letter-spacing: 0.07em; line-height: 1.15; padding: 0 0 1px; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .hiddenItemsRow, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .hiddenItemsRow { flex-wrap: wrap; justify-content: center; gap: 2px 4px; } @media (max-width: 700px) { .studyPiecePicker__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .study-bazi-inner .bazi-input-grid { max-width: 100%; } } /* source: /style_study_pan_preview_notes.css?v=2 */ .notesModule { margin-top: 0; } .notesModule__shell { background: var(--panel-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--surface-border, var(--panel-border)); border-radius: var(--surface-radius, 18px); box-shadow: none; padding: 18px 20px 20px; } .notesModule__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; padding-bottom: 0; border-bottom: none; } .notesModule__title { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.03em; line-height: 1.25; color: var(--text-main); } .notesModule__labelRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; margin-bottom: 8px; } .notesModule__mdSegRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .notesModule__mdSegRow .notesModule__mdSeg { flex-shrink: 0; } .notesModule__mdImgBtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; border-radius: 8px; flex-shrink: 0; color: rgba(226, 232, 240, 0.88); } .notesModule__mdImgBtn:hover { color: var(--accent); } .notesModule__mdImgBtnSvg { display: block; pointer-events: none; } .notesModule__mdSeg .segBtn.notesModule__mdSegBtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; flex-shrink: 0; } .notesModule__mdSegIcon { display: block; pointer-events: none; } /* source: /style_study_pan_preview_body.css?v=2 */ /* 学习盘笔记预览正文；由 style_study_pan_preview.css 拆出；须在其之后、style_study_pan_toc.css 之前 */ .notesModule__preview { width: 100%; min-height: 220px; max-height: min(60vh, 520px); overflow: auto; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.28); color: rgba(255, 255, 255, 0.88); font-size: 14px; line-height: 1.65; scrollbar-width: thin; } .notesModule__preview:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.45); } .notesModule__preview h1, .notesModule__preview h2, .notesModule__preview h3 { margin: 1.1em 0 0.45em; font-weight: 800; line-height: 1.25; color: rgba(255, 255, 255, 0.95); } .notesModule__preview h1 { font-size: 1.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.35em; } .notesModule__preview h2 { font-size: 1.15rem; } .notesModule__preview h3 { font-size: 1.05rem; } .notesModule__preview p { margin: 0.55em 0; } .notesModule__preview ul, .notesModule__preview ol { margin: 0.5em 0; padding-left: 1.35em; } .notesModule__preview li { margin: 0.25em 0; } .notesModule__preview blockquote { margin: 0.65em 0; padding: 0.4em 0 0.4em 0.9em; border-left: 3px solid rgba(var(--accent-rgb), 0.45); color: rgba(255, 255, 255, 0.72); } /* source: /style_study_pan_preview_body_code.css?v=1 */ .notesModule__preview code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9em; padding: 0.12em 0.38em; border-radius: 6px; background: rgba(var(--accent-rgb), 0.15); color: rgba(224, 231, 255, 0.95); } .notesModule__preview pre { margin: 0.65em 0; padding: 12px 14px; border-radius: 10px; overflow-x: auto; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); } .notesModule__preview pre code { padding: 0; background: none; color: rgba(226, 232, 240, 0.92); font-size: 13px; line-height: 1.5; } .notesModule__preview a { color: rgba(var(--accent-rgb), 0.98); text-decoration: underline; text-underline-offset: 2px; } .notesModule__preview img, .notesModule__previewMd img { max-width: 100%; height: auto; display: block; margin: 0.65em 0; border-radius: 8px; } .notesModule__preview hr { margin: 1em 0; border: none; border-top: 1px solid rgba(255, 255, 255, 0.12); } .notesModule__preview table { border-collapse: collapse; width: 100%; margin: 0.65em 0; font-size: 13px; } .notesModule__preview th, .notesModule__preview td { border: 1px solid rgba(255, 255, 255, 0.12); padding: 6px 10px; } .notesModule__preview th { background: rgba(255, 255, 255, 0.06); } /* source: /style_study_pan_toc.css?v=5 */ /* 学习盘 TOC 轨道头；列表见 style_study_pan_toc_list.css */ .notesModule__preview--hasToc { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .notesModule__preview--hasToc:focus { border-color: rgba(var(--accent-rgb), 0.45); } .notesModule__previewShelf { display: flex; flex-direction: row; flex: 1; align-items: stretch; min-height: 0; position: relative; } .notesModule__tocPeek { display: none; flex-shrink: 0; width: 34px; margin: 0; padding: 0 4px; align-self: stretch; align-items: center; justify-content: center; border: none; border-right: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: rgba(0, 0, 0, 0.35); color: var(--text-main); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; } .notesModule__tocPeek:hover { background: rgba(var(--accent-rgb), 0.18); } .notesModule__previewShelf--tocCollapsed .notesModule__tocPeek { display: flex; } .notesModule__tocBackdrop { display: none; position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.52); cursor: pointer; } .notesModule__tocRail { display: flex; flex-direction: column; width: min(240px, 34vw); flex-shrink: 0; min-height: 0; border-right: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.22); transition: width 0.2s ease, opacity 0.2s ease, border-color 0.2s ease; } .notesModule__previewShelf--tocCollapsed .notesModule__tocRail { width: 0; opacity: 0; overflow: hidden; border-right-color: transparent; pointer-events: none; } .notesModule__tocRailHead { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 10px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .notesModule__tocRailTitle { flex: 1; min-width: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--accent-rgb), 0.88); } .notesModule__tocRailActions { display: flex; flex-direction: row; align-items: center; gap: 4px; flex-shrink: 0; } .notesModule__tocHeadBtn { width: 32px; height: 32px; padding: 0; border-radius: 8px; font-size: 18px; line-height: 1; color: rgba(226, 232, 240, 0.9); } .notesModule__tocSheetDismiss { display: none; } /* source: /style_study_pan_toc_list.css?v=2 */ /* 学习盘 TOC 列表；由 style_study_pan_toc.css 拆出；须在其之后、toc_sheet 之前 */ .notesModule__toc { flex: 1; min-height: 0; margin: 0; padding: 8px 10px 12px; overflow-y: auto; scrollbar-width: thin; } .notesModule__tocList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .notesModule__tocLi a { display: block; padding: 4px 2px; font-size: 13px; font-weight: 650; color: rgba(226, 232, 240, 0.92); text-decoration: none; border-radius: 6px; } .notesModule__tocLi a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .notesModule__tocLi--d1 { padding-left: 0; } .notesModule__tocLi--d2 { padding-left: 12px; } .notesModule__tocLi--d3 { padding-left: 22px; } .notesModule__tocLi--d4 { padding-left: 32px; } .notesModule__tocLi--d5 { padding-left: 42px; } .notesModule__tocLi--d6 { padding-left: 52px; } .notesModule__previewMain { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 16px; position: relative; scrollbar-width: thin; } .notesModule__tocMobileFab { display: none; position: absolute; bottom: 12px; right: 12px; z-index: 3; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--surface-radius, 14px); border: 1px solid rgba(var(--accent-rgb), 0.35); background: color-mix(in srgb, var(--card-bg, var(--bg)) 92%, transparent); color: var(--text-main); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); } .notesModule__tocMobileFab:hover { border-color: rgba(var(--accent-rgb), 0.55); background: color-mix(in srgb, var(--text-main) 8%, var(--card-bg, var(--bg))); } .notesModule__tocFabSvg { display: block; flex-shrink: 0; opacity: 0.9; } /* source: /style_study_pan_toc_sheet.css?v=2 */ /* 学习盘 TOC 窄屏 sheet；由 style_study_pan_toc.css 拆出；须在其之后、style_study_pan_toc_narrow.css 之前 */ @media (max-width: 700px) { .notesModule__tocPeek, .notesModule__tocRailCollapse { display: none !important; } .notesModule__tocSheetDismiss { display: inline-flex; } .notesModule__tocRail { display: none; } .notesModule__previewShelf--sheetOpen .notesModule__tocBackdrop { display: block; } .notesModule__previewShelf--sheetOpen .notesModule__tocRail { display: flex; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 400px); max-height: min(78vh, 560px); z-index: 90; border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); background: rgba(18, 20, 34, 0.98); opacity: 1; pointer-events: auto; } .notesModule__tocMobileFab { display: inline-flex; } } @media (min-width: 701px) { .notesModule__tocMobileFab { display: none !important; } .notesModule__tocBackdrop { display: none !important; } .notesModule__previewShelf--sheetOpen .notesModule__tocRail { /* 宽屏忽略 sheet 类，避免误触残留 */ position: relative; left: auto; top: auto; transform: none; width: min(240px, 34vw); max-height: none; border-radius: 0; box-shadow: none; } } .notesModule__previewMd h1, .notesModule__previewMd h2, .notesModule__previewMd h3, .notesModule__previewMd h4, .notesModule__previewMd h5, .notesModule__previewMd h6 { scroll-margin-top: 12px; } /* source: /style_study_pan_toc_sheet_toolbar.css?v=1 */ .notesModule__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); } .notesModule__iconBtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease; } .notesModule__iconBtn:not(:disabled):active { transform: scale(0.96); } .notesModule__iconBtnSvg { display: block; pointer-events: none; } .notesModule__iconBtn--danger { color: rgba(248, 113, 113, 0.95); } .notesModule__iconBtn:disabled { opacity: 0.4; cursor: not-allowed; } .notesModule__grid { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 18px; align-items: stretch; } /* source: /style_study_pan_toc_narrow.css?v=2 */ /* 学习盘预览目录窄屏；由 style_study_pan_toc.css 拆出；须在其之后 */ @media (max-width: 720px) { .notesModule__grid { grid-template-columns: 1fr; gap: 14px; } .notesModule__listWrap { max-height: 180px; } } .notesModule__listWrap { min-width: 0; padding: 10px 8px 10px 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.07); } .notesModule__list { display: flex; flex-direction: column; gap: 3px; max-height: min(52vh, 420px); overflow-y: auto; padding: 2px 2px 4px 0; scrollbar-width: thin; } .notesModule__listEmpty { margin: 8px 4px; font-size: 12px; color: var(--text-dim); line-height: 1.45; } .notesModule__listItem { display: block; width: 100%; text-align: left; padding: 8px 10px 8px 9px; border: none; border-radius: 10px; background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 550; line-height: 1.35; letter-spacing: 0.01em; cursor: pointer; transition: background 0.14s ease, color 0.14s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notesModule__listItem:hover { background: var(--card-hover); color: var(--text-main); } .notesModule__listItem.isActive { background: var(--filter-chip-active-bg); color: var(--text-main); font-weight: 650; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.28); } .notesModule__editor { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 2px 0 0; } .notesModule__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } /* source: /style_study_pan_toc_narrow_input.css?v=2 */ .notesModule__inputTitle { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(0, 0, 0, 0.32); color: #fff; font-size: 15px; font-weight: 600; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .notesModule__inputTitle:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); } .notesModule__inputTitle:disabled { opacity: 0.45; } .notesModule__textarea { width: 100%; min-height: 220px; resize: vertical; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(0, 0, 0, 0.32); color: rgba(255, 255, 255, 0.9); font-size: 14px; line-height: 1.55; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .notesModule__textarea:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); } .notesModule__textarea:disabled { opacity: 0.45; } .notesModule__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 22px; margin-top: 2px; } .notesModule__saveStatus { font-size: 12px; color: rgba(var(--accent-rgb), 0.88); font-weight: 600; } .notesModule__footerHint { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.22); user-select: none; } @media (max-width: 520px) { .notesModule__footerHint { width: 100%; order: 1; } } .brandTitle { /* 字阶与字族由 theme.css / style_shell_header.css 统一；此处仅兜底 */ text-align: center; } .brandSub { font-size: 10px; color: var(--text-dim); margin-top: 6px; font-weight: 650; letter-spacing: 0.32em; opacity: 0.72; } /* source: /style.css?v=705 */ /* 通用 panel/form/checkbox；按钮区见 style_forms_actions.css；学习盘/命盘见各自 style_* */ /* Panel：单一边框 + 留白分层，无悬停阴影动效 */ .panel { background: var(--panel-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--surface-border, var(--panel-border)); border-radius: var(--surface-radius-lg, 20px); box-shadow: none; overflow: hidden; } .tabBody { display: none; padding: 18px 20px; animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes slideInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tabBody.isActive { display: block; } /* Forms Refinement */ .formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .field.span2 { grid-column: span 2; } /* 出生页：双列勾选区右侧占位，与左侧 .label 等高对齐 */ .birth-form-labelSpacer { opacity: 0; pointer-events: none; user-select: none; } .label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; } .inputWrapper { position: relative; width: 100%; display: flex; align-items: center; } .inputWrapper:focus-within { transform: none; } input[type="text"], input[type="datetime-local"], textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; padding: 8px 36px 8px 12px; font-size: 13px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: inherit; } /* 排除 .bazi-piece：input[type=text] 特异性高于裸 .wood/.fire…，会盖掉四柱格五行色（浅色见 style_store_note_light.css） */ input[type="text"]:not(.bazi-piece), input[type="datetime-local"], textarea { color: var(--text-main); } textarea { resize: none; line-height: 1.6; min-height: 100px; /* Ensure both textareas have same height */ font-family: "PingFang SC", "Microsoft YaHei", monospace; /* Monospace for better alignment */ writing-mode: horizontal-tb; text-orientation: mixed; word-break: normal; } #bazi-input::placeholder { font-size: var(--birth-paste-font-size, calc(14px * var(--birth-scale, 1))); font-weight: 500; letter-spacing: 0.08em; color: var(--text-dim); opacity: 0.55; line-height: var(--birth-paste-line, 40px); } #bazi-input.bazi-paste--multiline::placeholder { line-height: 1.5; } input:focus, textarea:focus { border-color: var(--focus-ring-color); background: var(--input-bg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 18%, transparent); } /* source: /style_clear_btn.css?v=3 */ .clearBtn { position: absolute; right: 12px; box-sizing: border-box; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-dim); cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; opacity: 0; pointer-events: none; visibility: hidden; } .clearBtn>svg { display: block; flex-shrink: 0; width: 14px; height: 14px; } .clearBtn.isVisible { opacity: 0.85; pointer-events: auto; visibility: visible; } .clearBtn:hover { opacity: 1; color: #fff; background: rgba(var(--accent-rgb), 0.16); border-color: rgba(var(--accent-rgb), 0.35); } /* Custom Checkbox & Radio - Premium Refinement */ /* 文本输入区域允许选中，配合系统 Ctrl/Cmd+C、A、V、X 等快捷键 */ textarea, select, input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]) { user-select: text; -webkit-user-select: text; } .check, .radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; padding: 4px 0; } .check span, .radio span { font-size: 13px; color: var(--text-muted); font-weight: 600; transition: all 0.2s; } .check input:checked+span, .radio input:checked+span { color: #fff; } /* source: /style_forms_actions.css?v=11 */ /* 通用按钮/结果区；由 style.css 拆出；须在其之后、style_pan.css 之前（实际顺序以 index 为准：style.css 后为 style_pan） */ /* Buttons Refinement：操作区居中；提示单独占一行居中（含手机窄屏） */ .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; padding-top: 16px; } .hint { flex: 0 0 100%; width: 100%; box-sizing: border-box; min-height: 16px; text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; } button.primary { appearance: none; border: 1px solid var(--btn-primary-border); background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-radius: var(--btn-radius, var(--surface-radius-sm, 11px)); padding: var(--btn-pad-y, 11px) var(--btn-pad-x, 22px); min-height: var(--btn-h, var(--touch-min, 44px)); font-size: var(--btn-font, 14px); font-weight: var(--btn-weight, 700); font-family: inherit; cursor: pointer; letter-spacing: 0.08em; box-shadow: none; box-sizing: border-box; transition: background var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease, opacity var(--motion-fast, 0.15s) ease; } button.primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border); } button.primary:active:not(:disabled) { transform: scale(0.98); } button.primary:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } button.primary:disabled { opacity: 1; background: transparent; color: var(--seg-btn-fg, var(--text-dim)); border-color: var(--seg-track-border, var(--btn-ghost-border)); cursor: not-allowed; box-shadow: none; } /* Birth actions：底部仅排盘主钮 */ #tab-birth .actions.birth-actions { display: flex; flex-wrap: wrap; flex-direction: row; align-items: stretch; justify-content: stretch; gap: 10px; } #tab-birth .actions.birth-actions button.primary, #app-view-study #study-pan-preview .studyPanNoteView__saveBtn.primary, #ai-job-result-modal .modalFoot button.primary { flex: 1 1 auto; min-width: 0; min-height: var(--btn-h, var(--touch-min, 44px)); padding: var(--btn-pad-y, 11px) var(--btn-pad-x, 22px); font-size: var(--btn-font, 14px); font-weight: var(--btn-weight, 700); letter-spacing: 0.08em; appearance: none; border-radius: var(--btn-radius, var(--surface-radius-sm, 11px)); display: inline-flex; align-items: center; justify-content: center; box-shadow: none; box-sizing: border-box; font-family: inherit; cursor: pointer; border: 1px solid var(--btn-primary-border); background: var(--btn-primary-bg); color: var(--btn-primary-fg); transition: background var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease; } #tab-birth .actions.birth-actions button.primary:hover:not(:disabled), #app-view-study #study-pan-preview .studyPanNoteView__saveBtn.primary:hover:not(:disabled), #ai-job-result-modal .modalFoot button.primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border); box-shadow: none; } #tab-birth .actions.birth-actions button.primary:active:not(:disabled), #app-view-study #study-pan-preview .studyPanNoteView__saveBtn.primary:active:not(:disabled), #ai-job-result-modal .modalFoot button.primary:active:not(:disabled) { transform: scale(0.98); } #tab-birth .actions.birth-actions button.primary:focus-visible, #app-view-study #study-pan-preview .studyPanNoteView__saveBtn.primary:focus-visible, #ai-job-result-modal .modalFoot button.primary:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } #tab-birth .actions.birth-actions .hint { flex: 0 0 100%; order: 3; } /* source: /style_forms_actions_result.css?v=3 */ /* Result Section Header Refinement */ .resultHead { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; margin-bottom: 16px; padding: 0 8px; } .resultTitle { display: flex; align-items: center; gap: 10px; color: var(--text-main); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .resultTitle svg { color: var(--text-muted); opacity: 0.5; } .resultActions { display: flex; align-items: center; gap: 8px; } /* 工具次钮：描边 ghost；工具条可密，操作区另覆写到 --btn-h */ .actionBtn { appearance: none; background: var(--btn-ghost-bg); border: 1px solid var(--btn-ghost-border); color: var(--btn-ghost-fg); padding: 8px 12px; border-radius: var(--btn-radius, var(--surface-radius-sm, 11px)); font-size: 13px; font-weight: 650; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h-dense, 36px); box-sizing: border-box; transition: background var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease; letter-spacing: 0.02em; } .actionBtn:hover:not(:disabled) { background: var(--btn-ghost-bg-hover); border-color: var(--btn-ghost-border-hover); color: var(--btn-ghost-fg-hover); } .actionBtn.isPrimary { background: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-fg); } .actionBtn.isPrimary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border); color: var(--btn-primary-fg); box-shadow: none; transform: none; } button.primary:focus-visible, .actionBtn:focus-visible, .hitDelLink:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } .clearBtn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; } .card { background: var(--card-bg); border-radius: var(--surface-radius, 16px); padding: 16px 18px; margin-bottom: var(--module-gap, 22px); border: 1px solid var(--surface-border, var(--line)); box-shadow: none; } /* source: /style_pan.css?v=9 */ /* 命盘主卡与展示卡；其后：export → layout → cs → prefs → dayun */ /* 命盘结果主卡片：略减内边距，表格区更贴边 */ #pan .card { position: relative; z-index: 1; padding: 14px; margin-bottom: var(--module-gap-sm, 10px); } /* 库房点选回传后 scrollIntoView 时与视口顶缘留一点呼吸空间 */ #pan .card.pan-display-card { scroll-margin-top: 12px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 4%, transparent); } /* 看盘结果：盘面顶对齐，不再为已收的顶栏留 scroll-margin */ body.panResultFocus:not(:has(#pan-library-drawer.isOpen)) #pan .card.pan-display-card { scroll-margin-top: 0; } /* 命盘展示卡：自然列宽 + 容器内等比缩放，禁止横向滚动条 */ #pan .card.pan-display-card .table-container, .learnPanDisplaySlot .card.pan-display-card .table-container, #study-pan-preview .card.pan-display-card .table-container { overflow-x: hidden; overflow-y: visible; width: 100%; max-width: 100%; padding-bottom: 4px; text-align: center; -webkit-overflow-scrolling: auto; } #pan .card.pan-display-card .table-container-inner, .learnPanDisplaySlot .card.pan-display-card .table-container-inner, #study-pan-preview .card.pan-display-card .table-container-inner { display: inline-block; vertical-align: top; min-width: 0; max-width: none; width: max-content; margin-left: auto; margin-right: auto; text-align: left; box-sizing: border-box; } #pan .card.pan-display-card .bazi-table, .learnPanDisplaySlot .card.pan-display-card .bazi-table, #study-pan-preview .card.pan-display-card .bazi-table { width: max-content; min-width: 0; max-width: none; margin-left: auto; margin-right: auto; } /* 命盘主表：去掉行间/列间描边，靠留白与运程列底色分层 */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card .bazi-table :is(th, td) { border-bottom: none; } /* 批断在 #pan 内先于 .card；绝对定位下拉须叠在下方命盘之上 */ #pan-live-note { position: relative; z-index: 4; } /* 库房「铅笔」全量编辑：全屏遮罩 + 居中表单（批断 batch 仍为内嵌卡片） */ /* source: /style_pan_live_note_modal.css?v=1 */ #pan-live-note.pan-live-note--modal { position: fixed; inset: 0; z-index: 8100; margin: 0; border-radius: 0; border: none; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: none; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; max-height: none; box-sizing: border-box; } #pan-live-note.pan-live-note--modal .panNoteHead { width: min(520px, 100%); margin-bottom: 10px; border-bottom: none; padding-bottom: 0; flex-shrink: 0; background: transparent; border: none; box-shadow: none; align-items: flex-start; } #pan-live-note.pan-live-note--modal .panNoteMeta { flex: 1; min-width: 0; } #pan-live-note.pan-live-note--modal .panNoteHeadActions { flex-shrink: 0; margin-top: 1px; } #pan-live-note.pan-live-note--modal .panNoteBody { width: min(520px, 100%); flex: 0 1 auto; background: var(--bg-dark); border: 1px solid var(--filter-separator); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55); } /* 平板 / 大屏手机横屏：表单区略加宽，避免 iPad 上过度窄条 */ @media (min-width: 600px) { #pan-live-note.pan-live-note--modal .panNoteHead, #pan-live-note.pan-live-note--modal .panNoteBody { width: min(560px, 100%); } } @media (min-width: 768px) { #pan-live-note.pan-live-note--modal .panNoteHead, #pan-live-note.pan-live-note--modal .panNoteBody { width: min(640px, 100%); } } /* 横屏且可视高度紧（手机横屏、部分平板）：压缩模态留白，多留给可滚动内容 */ @media (orientation: landscape) and (max-height: 520px) { #pan-live-note.pan-live-note--modal { padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); } #pan-live-note.pan-live-note--modal .panNoteHead { margin-bottom: 6px; } #pan-live-note.pan-live-note--modal .panNoteBody { padding: 12px 14px 12px; } } html.pan-live-note-modal-open { overflow: hidden; } /* 反查出生菜单挂到 body 时须高于模态层 */ html.pan-live-note-modal-open .pan-store-group-menu.pan-store-pan-note-birth-portal { z-index: 8200 !important; } /* source: /style_pan_export.css?v=8 */ /* 命盘 DOM 截图导出（原局）；学习盘导出见 style_pan_export_study.css；须在 style_pan.css 之后、style_pan_layout.css 之前 */ #pan #pan-dom-export-snapshot { /* 导出时 JS 会改成 top:0 + 极低 opacity，保证合冲列宽能量测；勿长期放在 100vh 外 */ position: fixed; left: 0; top: 0; z-index: 2147483000; box-sizing: border-box; width: max-content; max-width: none; padding: 18px 16px 22px; overflow: visible; background-color: var(--bg-dark); background-image: var(--bg-gradient); pointer-events: none; } #pan #pan-dom-export-snapshot.pan-dom-export-snapshot--wysiwyg { /* JS 会再写入 computed body 背景；此处兜底与上一致 */ background-color: var(--bg-dark); background-image: var(--bg-gradient); } #pan #pan-dom-export-snapshot .pan-snapshot-birth-line { text-align: center; font-weight: 700; font-size: 14px; color: var(--text-main); margin: 0 0 14px; letter-spacing: 0.02em; } #pan #pan-dom-export-snapshot .pan-snapshot-card { content-visibility: visible !important; margin-bottom: 18px; width: max-content; max-width: none; box-sizing: border-box; } #pan #pan-dom-export-snapshot-card { content-visibility: visible !important; width: max-content; max-width: none; box-sizing: border-box; } /* 覆盖 @media (max-width: 720px) 里对 .dayun-section 的 overflow-x:auto，避免截图只拍到滚动视口 */ #pan #pan-dom-export-snapshot .dayun-section { overflow-x: visible !important; -webkit-overflow-scrolling: auto; max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* 导出时大运区 max-width 由 JS 钳为四柱表宽；网格随容器收紧 */ #pan #pan-dom-export-snapshot .dayun-section .dayun-grid { width: 100%; max-width: 100%; box-sizing: border-box; } #pan #pan-dom-export-snapshot .dayun-item { min-height: 72px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; overflow: visible; } /* html2canvas 不认 gap：用块级 + margin 保证岁数/年/干支纵向分开 */ #pan #pan-dom-export-snapshot .dayun-item > .drill-desc { display: block !important; gap: 0 !important; margin-bottom: 4px !important; min-height: auto !important; width: 100% !important; max-width: 100% !important; align-self: stretch !important; text-align: center !important; box-sizing: border-box !important; } #pan #pan-dom-export-snapshot .dayun-item > .drill-desc > * { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; text-align: center !important; line-height: 1.2 !important; } #pan #pan-dom-export-snapshot .dayun-item > .drill-desc > * + * { margin-top: 2px !important; } #pan #pan-dom-export-snapshot .dayun-item .pillar-gz-compact, #pan #pan-dom-export-snapshot .dayun-item .liunian-ganzhi-block { display: block !important; gap: 0 !important; } #pan #pan-dom-export-snapshot .dayun-item .pillar-gz-compact > *, #pan #pan-dom-export-snapshot .dayun-item .liunian-ganzhi-block > * { display: block !important; text-align: center; line-height: 1.15 !important; } #pan #pan-dom-export-snapshot .dayun-item .pillar-gz-compact > * + *, #pan #pan-dom-export-snapshot .dayun-item .liunian-ganzhi-block > * + * { margin-top: 2px !important; } #pan #pan-dom-export-snapshot .dayun-section .dayun-grid { gap: 8px 4px !important; row-gap: 10px !important; column-gap: 4px !important; } /* 导出图：与屏上一致，不显示四柱表头 */ #pan #pan-dom-export-snapshot .bazi-table thead, #study-pan-preview #study-pan-dom-export-snapshot .bazi-table thead, #study-pan-dom-export-snapshot .bazi-table thead { display: none !important; } /* 导出图：大运标题不显示折叠箭头与左侧竖条 */ #pan #pan-dom-export-snapshot .drill-title, #study-pan-preview #study-pan-dom-export-snapshot .drill-title, #study-pan-dom-export-snapshot .drill-title { border-left: none !important; padding-left: 0 !important; } #pan #pan-dom-export-snapshot .drill-title.drill-title--collapsible::after, #study-pan-preview #study-pan-dom-export-snapshot .drill-title.drill-title--collapsible::after { display: none !important; content: none !important; } /* 大运柱：岁数/年份行高（块级间距见上方 .dayun-item 规则） */ #pan #pan-dom-export-snapshot .dayun-item > .drill-desc > div:first-child, #pan #pan-dom-export-snapshot .liunian-item > .liunian-year > div:first-child { line-height: 1.2 !important; } #pan #pan-dom-export-snapshot .dayun-item > .drill-desc > .liunian-age-label, #pan #pan-dom-export-snapshot .liunian-item > .liunian-year > .liunian-age-label { line-height: 1.15 !important; } /* * 四柱藏干：勿覆盖 #pan .card 原局样式；导出也不再 patchSnapshotLayout 重排藏干（所见即所得）。 */ #pan #pan-dom-export-snapshot .pan-snapshot-table-wrap.table-container { overflow-x: visible; width: max-content; max-width: none; /* 卡片被大运区撑宽时，四柱表仅 table 宽，须在卡片内水平居中 */ margin-left: auto; margin-right: auto; } /* 合冲层：导出必须可见，勿被列轨道 overflow/假宽度裁没 */ #pan #pan-dom-export-snapshot .pan-relation-hints-layer { display: block !important; visibility: visible !important; overflow: visible !important; } #pan #pan-dom-export-snapshot .table-container-inner.pan-relation-hints--active .pan-relation-hints-layer { display: block !important; } #pan #pan-dom-export-snapshot .pan-relation-cols-track { overflow: visible !important; max-width: 100% !important; } #pan #pan-dom-export-snapshot .pan-hour-branch-nav { display: none !important; } /* 导出只保留内容：右上角操作区、时辰切换及弹层均不进入图片。 */ #pan #pan-dom-export-snapshot :is( .pan-card-toolbar, .pan-card-more-popover, .pan-prefs-popover, .study-pan-prefs-popover, button.hour-nav, .pan-hour-branch-nav ) { display: none !important; } /* 只移除左右按钮，中间地支仍在原容器中居中，不改变盘面字位。 */ #pan #pan-dom-export-snapshot .pan-hour-branch-nav-wrap { justify-content: center !important; gap: 0 !important; } /* source: /style_pan_export_study.css?v=1 */ /* 学习盘 DOM 截图导出；由 style_pan_export.css 拆出；须在其之后、style_pan_layout.css 之前 */ /* 学习盘导出快照：卡片与表格居中，与原局导出保持一致；内边距压缩以消除不必要的留白 */ #study-pan-dom-export-snapshot .pan-snapshot-card { content-visibility: visible !important; margin-bottom: 0; width: max-content; max-width: none; box-sizing: border-box; padding: 6px 8px; border: none; border-radius: 0; box-shadow: none; } #study-pan-dom-export-snapshot .pan-snapshot-table-wrap.table-container { overflow-x: visible; width: max-content; max-width: none; margin-left: auto; margin-right: auto; padding-bottom: 0; } /* 导出快照：空位圆圈占位符替代虚线框 */ #study-pan-dom-export-snapshot .study-glyph-wrapper--empty-hint { border: none !important; background: transparent !important; border-radius: 0 !important; } #study-pan-dom-export-snapshot .studyDrillCol__box:not(.studyDrillCol__box--filled) { border: none !important; background: transparent !important; border-radius: 0 !important; } #study-pan-dom-export-snapshot .studyDrillCol__circle-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; color: rgba(148, 163, 184, 0.45); font-size: 16px; line-height: 1; } /* 导出快照：大运/流年已填充格字体与四柱 .glyph 保持一致（24px / 700） */ #study-pan-dom-export-snapshot .studyDrillCol__input { font-size: 24px; font-weight: 700; } #study-pan-dom-export-snapshot .studyDrillCol__box--rowStem { min-height: 44px; height: 44px; } #study-pan-dom-export-snapshot .studyDrillCol__box--rowBranch { min-height: 52px; height: 52px; } #study-pan-dom-export-snapshot .studyPanExportNoteSection { margin: 4px auto 0; max-width: 100%; width: max-content; } #study-pan-dom-export-snapshot .studyPanExportNoteSection .studyPanExportTopTitle { text-align: center; font-size: 14px; font-weight: 650; color: rgba(238, 242, 255, 0.95); letter-spacing: 0.03em; margin: 0 0 4px; } #study-pan-dom-export-snapshot .studyPanExportNoteSection .drill-title { margin-bottom: 6px; } #study-pan-dom-export-snapshot .studyPanExportNoteSection .drill-desc { margin: 0; line-height: 1.65; font-size: 14px; } /* 导出快照表格列宽与原局一致：fixed layout + 统一 118px 列宽，避免表格撑大卡片 */ #study-pan-dom-export-snapshot .bazi-table { table-layout: fixed; width: max-content; min-width: 0; max-width: none; margin: 0 auto; } #study-pan-dom-export-snapshot .bazi-table th, #study-pan-dom-export-snapshot .bazi-table td { min-width: 118px; width: 118px; max-width: none; box-sizing: border-box; padding: 5px 3px; vertical-align: top; text-align: center; overflow: visible; } #study-pan-dom-export-snapshot .bazi-table th { height: auto; min-height: 32px; padding: 6px 2px 4px; } #study-pan-dom-export-snapshot .bazi-table thead th { vertical-align: middle; text-align: center; } /* source: /style_pan_layout.css?v=5 */ /* 命盘表容器 / 干支关系 / 原局运程分栏；须在 style_pan_export.css 之后、style_pan_cs.css 之前 */ #pan .card:not(.pan-display-card) .table-container { padding-bottom: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 四柱干支关系：表下方文字提示（偏好「显示干支合冲刑害提示」）；学习盘预览同主排盘 */ #pan .card .table-container-inner, #study-pan-preview .card .table-container-inner { position: relative; display: inline-block; vertical-align: top; min-width: 100%; max-width: 100%; box-sizing: border-box; } #pan .card:not(.pan-pref--show-relation-hints) .pan-relation-hints-layer, #study-pan-preview .card:not(.pan-pref--show-relation-hints) .pan-relation-hints-layer { display: none; } #pan .card .pan-relation-hints-layer, #study-pan-preview .card .pan-relation-hints-layer { position: static; width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); box-sizing: border-box; } #pan .card .table-container-inner:not(.pan-relation-hints--active) .pan-relation-hints-layer, #study-pan-preview .card .table-container-inner:not(.pan-relation-hints--active) .pan-relation-hints-layer { display: none; } #pan .card .pan-relation-text, #study-pan-preview .card .pan-relation-text { font-size: 10.5px; line-height: 1.45; color: color-mix(in srgb, var(--text-main) 82%, transparent); } #pan .card .pan-relation-text-block, #study-pan-preview .card .pan-relation-text-block { display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; word-break: break-word; } #pan .card .pan-relation-line--stem, #study-pan-preview .card .pan-relation-line--stem, .learnPanDisplaySlot .card .pan-relation-line--stem { color: color-mix(in srgb, var(--text-main) 90%, transparent); white-space: normal; } #pan .card .pan-relation-line--branch, #study-pan-preview .card .pan-relation-line--branch, .learnPanDisplaySlot .card .pan-relation-line--branch { color: color-mix(in srgb, var(--text-main) 72%, transparent); white-space: normal; } /* 天干 | 地支：默认深底白线；主题/格底色在 style_pan_drill_relation.css 覆盖 */ #pan .card .pan-relation-line--branch-lead, #study-pan-preview .card .pan-relation-line--branch-lead, .learnPanDisplaySlot .card .pan-relation-line--branch-lead { margin-top: 4px; padding-top: 3px; border-top: 1px solid rgba(255, 255, 255, 0.55); } #pan .card .pan-relation-line--muted, #study-pan-preview .card .pan-relation-line--muted { color: var(--text-dim); font-size: 10px; } /* 原局 | 运程：始终左右分栏（窄屏也保持横向，仅略缩字距与分隔边距） */ #pan .card .pan-relation-text--split, #study-pan-preview .card .pan-relation-text--split { display: flex; flex-direction: row; align-items: flex-start; gap: 0; } #pan .card .pan-relation-text-split-half, #study-pan-preview .card .pan-relation-text-split-half { min-width: 0; display: flex; flex-direction: column; gap: 3px; } /* source: /style_pan_layout_natal.css?v=13 */ /* 原局：按内容宽度（不依赖 DOM 次序——运程在左时会把 extra 排到前面） */ #pan .card .pan-relation-text--split > .pan-relation-text-split-half--base, #study-pan-preview .card .pan-relation-text--split > .pan-relation-text-split-half--base, #pan .card .pan-relation-text--split > .pan-relation-text-split-half:has(> .pan-relation-text-col--base), #study-pan-preview .card .pan-relation-text--split > .pan-relation-text-split-half:has(> .pan-relation-text-col--base) { flex: 0 1 auto; max-width: min(44%, 260px); } /* 运程：占满剩余宽度，左侧分隔线代替中间独立竖条 */ #pan .card .pan-relation-text--split > .pan-relation-text-split-half--extra, #study-pan-preview .card .pan-relation-text--split > .pan-relation-text-split-half--extra, #pan .card .pan-relation-text--split > .pan-relation-text-split-half:has(> .pan-relation-text-extra-tiers), #study-pan-preview .card .pan-relation-text--split > .pan-relation-text-split-half:has(> .pan-relation-text-extra-tiers) { flex: 1 1 min(0); padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--line); } /* 运程在左（DOM 上 extra 在前）：按内容宽、分隔线改右侧，勿 flex:1 撑出大块空白 */ #pan .card .pan-relation-text--split > .pan-relation-text-split-half--extra:first-of-type, #study-pan-preview .card .pan-relation-text--split > .pan-relation-text-split-half--extra:first-of-type { flex: 0 1 auto; max-width: min(72%, 420px); padding-left: 0; margin-left: 0; border-left: none; padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--line); } #pan .card .pan-relation-text--split > .pan-relation-text-split-half--base:last-of-type, #study-pan-preview .card .pan-relation-text--split > .pan-relation-text-split-half--base:last-of-type { flex: 0 1 auto; padding-left: 0; margin-left: 0; border-left: none; } #pan .card .pan-relation-text-head, #study-pan-preview .card .pan-relation-text-head { font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: none; color: var(--text-dim); } #pan .card .pan-relation-text-divider, #study-pan-preview .card .pan-relation-text-divider { display: none; } /* * 运程层：一个整体容器，不逐条胶囊。 * 邻近 / 信噪比 — 相关行贴紧；奥卡姆 — 去掉重复描边与圆角。 */ #pan .card .pan-relation-text-extra-tiers, #study-pan-preview .card .pan-relation-text-extra-tiers { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 4px 8px; border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 5%, var(--card-bg)); border: 1px solid var(--line); box-sizing: border-box; } #pan .card .pan-relation-text-tier, #study-pan-preview .card .pan-relation-text-tier { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 4px 0; margin: 0; border-radius: 0; background: transparent; border: none; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); min-width: 0; } #pan .card .pan-relation-text-tier:first-child, #study-pan-preview .card .pan-relation-text-tier:first-child { border-top: none; padding-top: 2px; } #pan .card .pan-relation-text-tier:last-child, #study-pan-preview .card .pan-relation-text-tier:last-child { padding-bottom: 2px; } #pan .card .pan-relation-text-head--tier, #study-pan-preview .card .pan-relation-text-head--tier { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: color-mix(in srgb, var(--text-main) 72%, transparent); white-space: nowrap; padding-top: 1px; } #pan .card .pan-relation-text-tier-body, #study-pan-preview .card .pan-relation-text-tier-body { min-width: 0; } #pan .card .pan-relation-text-tier-body .pan-relation-text-block, #study-pan-preview .card .pan-relation-text-tier-body .pan-relation-text-block { gap: 2px; } /* 列轨道：与表头同宽同列；底色由单元格承担，避免原局外侧露黑边 */ #pan .card .pan-relation-cols-track, #study-pan-preview .card .pan-relation-cols-track, .learnPanDisplaySlot .card .pan-relation-cols-track { display: grid; gap: 0; align-items: stretch; box-sizing: border-box; margin-top: 0; padding: 0; overflow: hidden; border-radius: var(--surface-radius-sm, 11px); background: transparent; border: 1px solid var(--line); min-width: 0; max-width: 100%; } #pan .card .pan-relation-cols-track.isHidden, #study-pan-preview .card .pan-relation-cols-track.isHidden, .learnPanDisplaySlot .card .pan-relation-cols-track.isHidden { display: none !important; } #pan .card .pan-relation-cols-track--focus, #study-pan-preview .card .pan-relation-cols-track--focus, .learnPanDisplaySlot .card .pan-relation-cols-track--focus { display: flex; flex-direction: row; align-items: stretch; gap: 0; /* 默认铺满提示层，避免量测失败时被写成数 px 黑条；成功后再由 sync 覆盖为表头实测宽 */ width: 100%; min-width: 100%; max-width: 100%; padding: 0; } #pan .card .pan-relation-col-cell, #study-pan-preview .card .pan-relation-col-cell, .learnPanDisplaySlot .card .pan-relation-col-cell { min-width: 0; padding: 4px 6px; box-sizing: border-box; border-left: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } #pan .card .pan-relation-col-cell:first-child, #study-pan-preview .card .pan-relation-col-cell:first-child, .learnPanDisplaySlot .card .pan-relation-col-cell:first-child, #pan .card .pan-relation-col-cell--empty + .pan-relation-col-cell--empty, #study-pan-preview .card .pan-relation-col-cell--empty + .pan-relation-col-cell--empty { border-left-color: transparent; } #pan .card .pan-relation-col-cell--empty, #study-pan-preview .card .pan-relation-col-cell--empty, .learnPanDisplaySlot .card .pan-relation-col-cell--empty { border-left-color: transparent; padding-left: 0; padding-right: 0; } #pan .card .pan-relation-cols-track--focus .pan-relation-col-cell--drill, #study-pan-preview .card .pan-relation-cols-track--focus .pan-relation-col-cell--drill, .learnPanDisplaySlot .card .pan-relation-cols-track--focus .pan-relation-col-cell--drill { flex: 0 0 auto; border-left: none; border-radius: var(--surface-radius-sm, 11px) 0 0 var(--surface-radius-sm, 11px); } #pan .card .pan-relation-cols-track--focus .pan-relation-col-cell--natal, #study-pan-preview .card .pan-relation-cols-track--focus .pan-relation-col-cell--natal, .learnPanDisplaySlot .card .pan-relation-cols-track--focus .pan-relation-col-cell--natal { flex: 0 0 auto; border-left: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0 var(--surface-radius-sm, 11px) var(--surface-radius-sm, 11px) 0; align-self: stretch; margin: 0; } #pan .card .pan-relation-col-cell-body, #study-pan-preview .card .pan-relation-col-cell-body, .learnPanDisplaySlot .card .pan-relation-col-cell-body { font-size: 9.5px; line-height: 1.35; min-width: 0; } #pan .card .pan-relation-col-cell .pan-relation-line, #study-pan-preview .card .pan-relation-col-cell .pan-relation-line, .learnPanDisplaySlot .card .pan-relation-col-cell .pan-relation-line { /* 合冲文案须完整可读：多行换行，不截断 */ display: block; overflow: visible; overflow-wrap: anywhere; word-break: break-word; } #pan .card .pan-relation-cols-track--focus .pan-relation-col-cell .pan-relation-line, #study-pan-preview .card .pan-relation-cols-track--focus .pan-relation-col-cell .pan-relation-line, .learnPanDisplaySlot .card .pan-relation-cols-track--focus .pan-relation-col-cell .pan-relation-line { font-size: 9px; } @media (max-width: 900px) { /* * 窄屏：未列对齐时原局|运程纵向堆叠。 * 列轨道（.pan-relation-cols-track）自行处理，不走 split 堆叠。 */ #pan .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align), #study-pan-preview .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) { flex-direction: column; align-items: stretch; gap: 8px; } #pan .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half--base, #study-pan-preview .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half--base, #pan .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half--extra, #study-pan-preview .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half--extra, #pan .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half:has(> .pan-relation-text-col--base), #study-pan-preview .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half:has(> .pan-relation-text-col--base), #pan .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half:has(> .pan-relation-text-extra-tiers), #study-pan-preview .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half:has(> .pan-relation-text-extra-tiers) { flex: 0 0 auto; max-width: none; width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; border-left: none; border-right: none; } /* 原局条：满宽轻分隔，避免横排时的孤立短列 */ #pan .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half--base, #study-pan-preview .card.pan-display-card .pan-relation-text--split:not(.pan-relation-text--cols-align) > .pan-relation-text-split-half--base { padding: 6px 8px; border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 3.5%, var(--card-bg)); border: 1px solid var(--line); box-sizing: border-box; } #pan .card .pan-relation-text, #study-pan-preview .card .pan-relation-text { font-size: 10px; } #pan .card .pan-relation-text-head, #study-pan-preview .card .pan-relation-text-head { font-size: 8.5px; } #pan .card .pan-relation-text-head--tier, #study-pan-preview .card .pan-relation-text-head--tier { font-size: 8.5px; } #pan .card .pan-relation-text-divider, #study-pan-preview .card .pan-relation-text-divider { margin: 0 6px; } } /* source: /style_pan_cs.css?v=4 */ /* 十二长生工具条壳；多行面板见 style_pan_cs_toolbar.css */ .pan-card-toolbar { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; margin: -4px 0 8px; } .pan-cs-toolbar-panel { flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; font-size: 13px; line-height: 1.38; color: color-mix(in srgb, var(--text-main) 92%, transparent); font-weight: 600; letter-spacing: 0.02em; } /* 十二长生工具条：天干多行上组、地支多行下组 */ .pan-cs-toolbar-stacks-wrap { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: 8px; } .pan-cs-toolbar-group { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; } .pan-cs-toolbar-group--branches:has(.pan-cs-toolbar-row) { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line); } .pan-cs-toolbar-row { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; min-width: 0; } .pan-renyuan-division { margin: -2px 0 8px; padding: 6px 10px; border-radius: var(--surface-radius-sm, 11px); border: 1px solid var(--line); background: color-mix(in srgb, var(--text-main) 6%, var(--card-bg)); color: color-mix(in srgb, var(--text-main) 94%, transparent); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.01em; } .pan-renyuan-division.isHidden { display: none !important; } @media (max-width: 520px) { .pan-cs-toolbar-panel { font-size: 10.5px; line-height: 1.34; letter-spacing: 0.01em; } .pan-cs-toolbar-panel:not(:empty) { gap: 2px; --pan-cs-dismiss-size: clamp(22px, 2.1em, 28px); } .pan-renyuan-division { margin-top: -4px; margin-bottom: 7px; padding: 5px 8px; font-size: 10.5px; line-height: 1.34; } /* 非紧凑窄屏仍单行不换行；紧凑卡由下方 max-width:900 规则换行、去横滑 */ #pan .card.pan-display-card:not(.pan-mobile-compact-cells) .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack .pan-cs-toolbar-seq { white-space: nowrap; } } /* source: /style_pan_cs_toolbar.css?v=3 */ /* 十二长生工具条多行滚动面板；由 style_pan_cs.css 拆出；须在其之后 */ /* 有说明时：纵向堆叠多行，每行内 scroll + 关闭钮 */ .pan-cs-toolbar-panel:not(:empty) { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; max-width: 100%; padding-bottom: 2px; /* 与面板 font-size 成比例，窄屏与 .pan-cs-toolbar-scroll 同步缩小 */ --pan-cs-dismiss-size: clamp(24px, 2.2em, 30px); } .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll { flex: 1 1 auto; min-width: 0; width: max-content; max-width: calc(100% - var(--pan-cs-dismiss-size) - 10px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-main) 35%, transparent) transparent; padding-bottom: 2px; } .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll::-webkit-scrollbar { height: 4px; } .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-main) 32%, transparent); border-radius: var(--surface-radius-sm, 11px); } .pan-cs-toolbar-dismiss { box-sizing: border-box; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--pan-cs-dismiss-size, 28px); height: var(--pan-cs-dismiss-size, 28px); margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--text-dim); background: color-mix(in srgb, var(--text-main) 4%, transparent); cursor: pointer; font-size: inherit; line-height: 0; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .pan-cs-toolbar-dismiss svg { display: block; width: 46%; height: 46%; max-width: 12px; max-height: 12px; flex-shrink: 0; } .pan-cs-toolbar-dismiss:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 8%, transparent); border-color: color-mix(in srgb, var(--text-main) 22%, transparent); } .pan-cs-toolbar-dismiss:active { transform: scale(0.94); } .pan-cs-toolbar-dismiss:focus { outline: none; } .pan-cs-toolbar-dismiss:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.45); outline-offset: 1px; } .pan-cs-toolbar-panel:empty { display: none; } .pan-cs-toolbar-head { display: inline-flex; align-items: center; gap: 1px; margin-right: 4px; vertical-align: middle; line-height: 1.05; min-height: 2.15em; white-space: nowrap; flex: 0 0 auto; } /* source: /style_pan_cs_wheel.css?v=3 */ /* 通用单列齿轮选择器；由 style_pan_cs.css 拆出；须在 style_pan_cs.css 之后、style_pan_cs_seq.css 之前 */ /* 通用单列齿轮选择器 */ #wheel-picker-modal .wheel-picker-sheet { width: fit-content; min-width: var(--wheel-picker-sheet-w, 168px); max-width: min(calc(100vw - 24px), var(--wheel-picker-sheet-max-w, 280px)); margin-inline: auto; padding: 10px 12px 14px; box-sizing: border-box; } .wheel-picker-sheet { border-top-left-radius: 18px; border-top-right-radius: 18px; background: var(--sheet-bg, var(--bg-dark)); box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .wheel-picker-head { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; padding: 0 2px; } .wheel-picker-title { min-width: 0; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wheel-picker-manual { padding: 0 2px 10px; margin: 0; min-width: 0; } .wheel-picker-manual.isHidden { display: none; } .wheel-picker-manual-input { display: block; width: 100%; min-width: 0; box-sizing: border-box; height: 36px; margin: 0; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.35); color: var(--text-main); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .wheel-picker-manual-input::placeholder { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); opacity: 0.55; } .wheel-picker-manual-input:focus { border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.22); } .wheel-picker-manual-input::-webkit-outer-spin-button, .wheel-picker-manual-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wheel-picker-manual-input[type="number"] { appearance: textfield; -moz-appearance: textfield; } .wheel-picker-body { position: relative; height: 180px; overflow: hidden; width: var(--wheel-picker-col-w, auto); min-width: 0; max-width: 100%; margin-inline: auto; } .wheel-picker-window { height: 100%; width: 100%; overflow-y: auto; /* 与 .wheel-picker-body 180px、选项 32px、高亮居中一致：(180-32)/2，首尾项才能滚到选中带 */ padding: 74px 12px; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; box-sizing: border-box; } /* source: /style_pan_cs_wheel_options.css?v=1 */ .wheel-picker-option { height: 32px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(226, 232, 240, 0.78); opacity: 0.7; scroll-snap-align: center; pointer-events: none; white-space: nowrap; } .wheel-picker-option.isActive { font-size: 17px; font-weight: 800; color: rgba(226, 232, 240, 0.98); opacity: 1; } .wheel-picker-highlight { position: absolute; left: 10px; right: 10px; top: 50%; height: 32px; transform: translateY(-50%); border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.9); pointer-events: none; } .wheel-picker-window::-webkit-scrollbar { width: 0; height: 0; } @media (max-width: 520px) { #wheel-picker-modal .wheel-picker-sheet { max-width: min(calc(100vw - 24px), var(--wheel-picker-sheet-max-w, 280px)); } } .pan-cs-toolbar-head .pan-cs-elem { font-weight: 800; font-size: 1.18em; line-height: 1; } .pan-cs-toolbar-seq-stack { display: inline-flex; align-items: center; min-width: 0; min-height: 2.15em; vertical-align: middle; } /* source: /style_pan_cs_seq.css?v=3 */ /* 十二长生序列；副字五行见 style_pan_cs_seq_phase.css */ .pan-cs-toolbar-seq-stack.pan-cs-toolbar-seq-stack--multiline { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; max-width: 100%; } .pan-cs-toolbar-seq.pan-cs-toolbar-seq--block-row { width: 100%; max-width: 100%; } /* 非紧凑：单行从左到右；两类间为 DOM 竖线 .pan-cs-toolbar-seq-divider */ #pan .card.pan-display-card:not(.pan-mobile-compact-cells) .pan-cs-toolbar-seq-stack { display: inline-flex; align-items: center; width: 100%; max-width: 100%; } #pan .card.pan-display-card:not(.pan-mobile-compact-cells) .pan-cs-toolbar-panel .pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: 100%; min-height: 2.15em; } #pan .card.pan-display-card:not(.pan-mobile-compact-cells) .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; line-height: 1.05; } .pan-cs-toolbar-seq { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; vertical-align: middle; } .pan-cs-toolbar-seq-divider { flex: 0 0 1px; width: 1px; align-self: stretch; min-height: 2em; margin: 0 3px; background: rgba(148, 163, 184, 0.32); } /* 工具条内各长生块垂直居中对齐，单行内水平线一致 */ .pan-cs-toolbar-panel .changsheng-phase-text { margin: 0 2px; vertical-align: middle; align-items: center; color: rgba(203, 213, 225, 0.92); } /* 与面板基准字号成比例：天干/地支/宫位/角标视觉统一 */ .pan-cs-toolbar-panel .changsheng-phase-text .phase-main { font-size: 1em; font-weight: 900; line-height: 1.05; } .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub { font-size: 0.92em; font-weight: 800; line-height: 1.05; opacity: 0.88; margin-left: 0; transform: none; display: inline-block; } /* * 工具条五行色：须压过 .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub 的灰字， * 且角标布局下支在 .changsheng-phase-sub-col 内；并覆盖全局 .phase-sub { opacity: 0.65 } 冲淡色。 */ .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.wood, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.wood { color: #52f08c; opacity: 1; } /* source: /style_pan_cs_seq_phase.css?v=1 */ /* 十二长生序列副字五行；由 style_pan_cs_seq.css 拆出；须在其之后 */ .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.fire, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.fire { color: #ff7e92; opacity: 1; } .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.earth, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.earth { color: #fcd34d; opacity: 1; } .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.metal, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.metal { color: #ffffff; opacity: 1; } .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.water, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.water { color: var(--water); opacity: 1; } /* 与 appendPanToolbarStemPhasePair 一致：支字 class 为 .pan-cs-phase-sub.phase-sub.{五行} */ .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.wood, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.wood { color: #52f08c; opacity: 1; } .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.fire, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.fire { color: #ff7e92; opacity: 1; } .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.earth, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.earth { color: #fcd34d; opacity: 1; } .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.metal, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.metal { color: #ffffff; opacity: 1; } .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.water, .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.water { color: var(--water); opacity: 1; } /* 工具条标题：所点天干（.pan-cs-elem + 五行 class） */ .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.wood { color: #52f08c; } .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.fire { color: #ff7e92; } .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.earth { color: #fcd34d; } .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.metal { color: #ffffff; } .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.water { color: var(--water); } /* 地支视角工具条：各天干字五行色 */ .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.wood { color: #52f08c; opacity: 1; } .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.fire { color: #ff7e92; opacity: 1; } .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.earth { color: #fcd34d; opacity: 1; } .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.metal { color: #ffffff; opacity: 1; } .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.water { color: var(--water); opacity: 1; } /* source: /style_pan_cs_seq_colors.css?v=2 */ /* 命盘十二长生工具条五行色；有角标布局见 style_pan_cs_seq_colors_marked.css */ #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.wood, #pan .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.wood { color: #52f08c; } #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.fire, #pan .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.fire { color: #ff7e92; } #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.earth, #pan .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.earth { color: #fcd34d; } #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.metal, #pan .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.metal { color: #ffffff; } #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.water, #pan .card .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.water { color: var(--water); } #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.wood, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.wood, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.wood, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.wood, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.wood, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.wood, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.wood, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.wood { color: #52f08c; opacity: 1; } #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.fire, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.fire, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.fire, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.fire, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.fire, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.fire, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.fire, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.fire { color: #ff7e92; opacity: 1; } #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.earth, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.earth, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.earth, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.earth, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.earth, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.earth, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.earth, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.earth { color: #fcd34d; opacity: 1; } #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.metal, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.metal, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.metal, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.metal, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.metal, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.metal, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.metal, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.metal { color: #ffffff; opacity: 1; } #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.water, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.water, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.water, #study-pan-preview .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.water, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub.water, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub.water, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.water, #pan .card .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.water { color: var(--water); opacity: 1; } #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.wood, #pan .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.wood { color: #52f08c; opacity: 1; } #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.fire, #pan .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.fire { color: #ff7e92; opacity: 1; } #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.earth, #pan .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.earth { color: #fcd34d; opacity: 1; } #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.metal, #pan .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.metal { color: #ffffff; opacity: 1; } #study-pan-preview .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.water, #pan .card .pan-cs-toolbar-panel .pan-cs-stem-char.phase-main.water { color: var(--water); opacity: 1; } /* source: /style_pan_cs_seq_colors_marked.css?v=1 */ /* 十二长生工具条有角标布局；由 style_pan_cs_seq_colors.css 拆出；须在其之后 */ /* 有角标时统一右列高度；主字与「角标+支」列略紧于命盘格；inner 居中对齐勿用命盘 stretch */ .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-inner { min-height: 2.15em; gap: 2px 5px; align-items: center; } .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-inner>.phase-main { align-self: center; } .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col { min-height: 1.55em; gap: 1px; justify-content: center; align-self: center; } /* 地支视角：仅天干字用五行色；十二长生简称用中性灰，避免与五行混淆 */ .pan-cs-toolbar-panel .pan-cs-stem-pair.changsheng-phase-text .pan-cs-stem-phase.phase-sub { color: rgba(203, 213, 225, 0.78); } /* * 天干序列：月支 / 时支 / 运程支 宫位徽 — 仅 .changsheng-phase-inner 下划线强调；深色底白细线、浅色底见 [data-theme="light"] */ .pan-cs-toolbar-panel .pan-cs-phase-pair--month.changsheng-phase-text, .pan-cs-toolbar-panel .pan-cs-phase-pair--hour.changsheng-phase-text, .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar.changsheng-phase-text { padding: 0; margin: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; } .pan-cs-toolbar-panel .pan-cs-phase-pair--month.changsheng-phase-text .changsheng-phase-inner, .pan-cs-toolbar-panel .pan-cs-phase-pair--hour.changsheng-phase-text .changsheng-phase-inner, .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar.changsheng-phase-text .changsheng-phase-inner { padding: 0 0 2px; margin: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; border-bottom: 1px solid rgba(248, 250, 252, 0.55); box-sizing: border-box; } .pan-cs-toolbar-panel .pan-cs-phase-pair--month .phase-main, .pan-cs-toolbar-panel .pan-cs-phase-pair--hour .phase-main, .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar .phase-main, .pan-cs-toolbar-panel .pan-cs-phase-pair--month .pan-cs-phase-main.phase-main, .pan-cs-toolbar-panel .pan-cs-phase-pair--hour .pan-cs-phase-main.phase-main, .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar .pan-cs-phase-main.phase-main { color: rgba(248, 250, 252, 0.96); text-shadow: none; font-weight: 800; } .pan-cs-toolbar-panel .pan-cs-phase-pair--month.changsheng-phase-text .changsheng-phase-sub-col .phase-mark-num, .pan-cs-toolbar-panel .pan-cs-phase-pair--hour.changsheng-phase-text .changsheng-phase-sub-col .phase-mark-num, .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar.changsheng-phase-text .changsheng-phase-sub-col .phase-mark-num { color: rgba(203, 213, 225, 0.88); } /* 地支视角：原局四柱 + 运程柱天干 — 下划线在 inner */ .pan-cs-toolbar-panel .pan-cs-stem-pair--in-bazi.changsheng-phase-text { padding: 0; margin: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; } .pan-cs-toolbar-panel .pan-cs-stem-pair--in-bazi.changsheng-phase-text .changsheng-phase-inner { padding: 0 0 2px; margin: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; border-bottom: 1px solid rgba(248, 250, 252, 0.55); box-sizing: border-box; } .pan-cs-stem-pair--in-bazi .pan-cs-stem-char, .pan-cs-stem-pair--in-bazi .phase-main { font-weight: 800; filter: none; } .pan-cs-toolbar-panel .pan-cs-stem-pair--in-bazi.changsheng-phase-text .pan-cs-stem-phase.phase-sub { color: rgba(203, 213, 225, 0.82); opacity: 1; } .pan-card-toolbar-actions { display: flex; flex-shrink: 0; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; width: 100%; box-sizing: border-box; overflow: visible; } /* source: /style_pan_prefs.css?v=4 */ /* 命盘显示偏好按钮与浮层抬升；portal 见 style_pan_prefs_portal.css */ /* 命盘显示偏好（滑块图标 + 浮层） */ .pan-prefs-wrap, .study-pan-prefs-wrap { position: relative; flex-shrink: 0; } /* 浮层 absolute 向下展开时，须整段工具栏抬升，否则下方表格/大运按 DOM 顺序会盖住弹层 */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .pan-card-toolbar:has(.pan-prefs-popover:not(.isHidden)), :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .pan-card-toolbar:has(.study-pan-prefs-popover:not(.isHidden)) { position: relative; z-index: 120; } /* 大运/流年块：isActive 格 z-index:1 会逃逸到 #pan 根层，与命盘卡同级且 DOM 在后时会盖住偏好弹层 */ :is(#pan, #study-pan-preview) > :is(.dayun-section, .drill-section) { position: relative; z-index: 0; isolation: isolate; } /* 偏好浮层打开：整张命盘卡再抬一层（盖过 card 内 guest 大运等） */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card:has(:is(.pan-prefs-popover, .study-pan-prefs-popover):not(.isHidden)) { position: relative; z-index: 200; } .pan-prefs-wrap:has(.pan-prefs-popover:not(.isHidden)), .study-pan-prefs-wrap:has(.pan-prefs-popover:not(.isHidden)), .pan-prefs-wrap:has(.study-pan-prefs-popover:not(.isHidden)), .study-pan-prefs-wrap:has(.study-pan-prefs-popover:not(.isHidden)) { z-index: 121; } /* guest AI 等全屏模态内打开偏好：portal 到 body 后统一用高 z-index */ .pan-prefs-popover.pan-prefs-popover--portal { z-index: 8200; } .pan-prefs-popover { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 122; isolation: isolate; box-sizing: border-box; display: flex; flex-direction: column; width: max-content; min-width: min(300px, calc(100vw - 24px)); max-width: min(360px, calc(100vw - 24px)); max-height: min(78vh, calc(100dvh - 24px), calc(100vh - 24px)); overflow: hidden; padding: 0; border-radius: var(--sheet-radius, var(--surface-radius-lg, 20px)); background-color: var(--sheet-bg, var(--popover-bg)) !important; background-image: none !important; opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--sheet-border, var(--panel-border)); box-shadow: var(--sheet-shadow, var(--shadow-lg)); pointer-events: auto; } /* source: /style_pan_card_more.css?v=3 */ /* 命盘卡工具栏「更多」溢出菜单（#pan / 学习盘 / 嵌入槽共用） */ .pan-card-more-wrap { position: relative; flex-shrink: 0; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .pan-card-toolbar:has(.pan-card-more-popover:not(.isHidden)) { position: relative; z-index: 120; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card:has(.pan-card-more-popover:not(.isHidden)) { position: relative; z-index: 200; } .pan-card-more-wrap:has(.pan-card-more-popover:not(.isHidden)) { z-index: 121; } .pan-card-more-popover { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 122; isolation: isolate; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; min-width: var(--menu-min-width, 128px); max-width: min(240px, calc(100vw - 24px)); padding: 6px; border-radius: var(--surface-radius, 16px); background-color: var(--popover-bg) !important; background-image: none !important; border: 1px solid var(--panel-border); box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.55), inset 0 1px 0 color-mix(in srgb, var(--text-main) 6%, transparent); pointer-events: auto; } .pan-card-more-popover.isHidden { display: none !important; } /* 菜单行：显式重置 .actionBtn ghost，避免学习盘缺 #pan 工具钮覆写时露出描边底 */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card .pan-card-more-item.actionBtn.pan-card-action { flex: none; width: 100%; min-width: 0; height: auto; min-height: 36px; padding: 8px 10px; gap: 10px; display: inline-flex; align-items: center; justify-content: flex-start; font-size: 13px; line-height: 1.3; font-weight: 550; letter-spacing: 0.01em; color: var(--text-main); border-radius: calc(var(--surface-radius-sm, 11px) - 2px); background: transparent !important; border: none !important; box-shadow: none !important; transform: none !important; filter: none !important; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card .pan-card-more-item.actionBtn.pan-card-action svg { width: 16px; height: 16px; opacity: 0.78; display: block; flex-shrink: 0; } .pan-card-more-item__label { flex: 1 1 auto; min-width: 0; text-align: left; white-space: nowrap; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card .pan-card-more-item.actionBtn.pan-card-action:hover, :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card .pan-card-more-item.actionBtn.pan-card-action:focus-visible { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 8%, transparent) !important; border: none !important; box-shadow: none !important; transform: none !important; filter: none !important; } @media (prefers-reduced-motion: reduce) { .pan-card-more-popover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28); } } /* source: /style_pan_prefs_portal.css?v=3 */ /* 命盘偏好 portal/遮罩与字段说明；分段钮见 style_pan_prefs_portal_seg.css */ /* 打开后挂到 body 居中显示（与 .modalSheet / AI 设置同属居中设置板） */ body > .pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden), body > .study-pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden) { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); z-index: 8200; width: min(360px, calc(100vw - 32px)); min-width: min(300px, calc(100vw - 32px)); max-width: min(360px, calc(100vw - 32px)); max-height: min(78vh, calc(100dvh - 48px)); box-shadow: var(--sheet-shadow, var(--shadow-lg)); animation: panPrefsPopoverIn var(--motion-med, 0.22s) ease; } @keyframes panPrefsPopoverIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } } @media (prefers-reduced-motion: reduce) { body > .pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden), body > .study-pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden) { animation: none; } } html:has(body > .pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden)), html:has(body > .study-pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden)) { overflow: hidden; } /* 遮罩必须与 portal 同属 body 层叠，避免盖住弹层；材质对齐 .modalMask */ body:has(> .pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden))::before, body:has(> .study-pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden))::before { content: ""; position: fixed; inset: 0; z-index: 8190; background: var(--overlay-bg); backdrop-filter: var(--overlay-blur, blur(10px)); -webkit-backdrop-filter: var(--overlay-blur, blur(10px)); pointer-events: none; } @media (prefers-reduced-transparency: reduce) { body:has(> .pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden))::before, body:has(> .study-pan-prefs-popover.pan-prefs-popover--portal:not(.isHidden))::before { backdrop-filter: none; -webkit-backdrop-filter: none; } } .pan-prefs-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; padding: 12px 16px 10px; border-bottom: 1px solid var(--sheet-divider, var(--line)); background: var(--sheet-bg, var(--popover-bg)); } .pan-prefs-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-main); letter-spacing: 0.02em; line-height: 1.3; text-align: center; } .pan-prefs-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 14px 14px; background: var(--sheet-bg, var(--popover-bg)); position: relative; z-index: 1; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-main) 28%, transparent) transparent; } .pan-prefs-body::-webkit-scrollbar { width: 6px; } .pan-prefs-body::-webkit-scrollbar-track { background: transparent; } .pan-prefs-body::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--text-main) 22%, transparent); } /* source: /style_pan_prefs_portal_foot.css?v=2 */ .pan-prefs-foot { flex-shrink: 0; padding: 8px 14px 12px; border-top: 1px solid var(--sheet-divider, var(--line)); background: var(--sheet-bg, var(--popover-bg)); } .pan-prefs-foot-hint { margin: 0; font-size: 11px; font-weight: 500; line-height: 1.4; text-align: center; letter-spacing: 0.02em; color: var(--text-dim); } .pan-prefs-popover.isHidden { display: none !important; } .pan-prefs-section { margin-bottom: 16px; } .pan-prefs-section:last-child { margin-bottom: 0; } .pan-prefs-section--drill { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--sheet-divider, var(--line)); } .pan-prefs-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px; } .pan-prefs-section-head .pan-prefs-label { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; color: color-mix(in srgb, var(--text-main) 58%, transparent); } .pan-prefs-section-sub { flex: 0 0 auto; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--text-dim); letter-spacing: 0.01em; } .pan-prefs-section--drill .pan-prefs-drill-seg { width: 100%; } .pan-prefs-inline-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .pan-prefs-inline-row .pan-prefs-label { flex: 0 0 auto; margin: 0; } /* source: /style_pan_prefs_portal_seg.css?v=4 */ /* 命盘偏好学校块；开关见 style_pan_prefs_portal_seg_switch.css */ .pan-prefs-inline-row .pan-prefs-seg { flex: 0 0 auto; width: 128px; } .pan-prefs-field-head { margin-bottom: 8px; } .pan-prefs-label { display: block; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--text-main) 88%, transparent); letter-spacing: 0.02em; text-transform: none; line-height: 1.35; } .pan-prefs-field-desc { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; text-transform: none; line-height: 1.4; } .pan-prefs-hint { margin: 0 0 8px; font-size: 11px; line-height: 1.45; color: var(--text-dim); font-weight: 500; } /* 柔角二分轨：与 birth-pill-tray 同族（浅描边 + 淡底，非硬黑框） */ .pan-prefs-seg { display: flex; align-items: stretch; gap: 2px; padding: 3px; border-radius: var(--surface-radius, 16px); background: color-mix(in srgb, var(--text-main) 3.5%, transparent); border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 5%, transparent); } .pan-prefs-seg-btn { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; margin: 0; min-height: 32px; padding: 6px 10px; border-radius: calc(var(--surface-radius, 16px) - 3px); font-size: 12px; font-weight: 650; line-height: 1.2; color: var(--text-dim); cursor: pointer; transition: background var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease; user-select: none; } .pan-prefs-seg-btn input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .pan-prefs-seg-btn span { pointer-events: none; } /* source: /style_pan_prefs_portal_seg_school.css?v=2 */ .pan-prefs-school-block { padding: 0; border: none; background: none; border-radius: 0; } .pan-prefs-school-tabs { margin: 0; width: 100%; } .pan-prefs-school-panels { margin-top: 8px; } .pan-prefs-school-panel.isHidden, .pan-prefs-school-panel[hidden] { display: none !important; } .pan-prefs-school-panel:not([hidden]):not(.isHidden) { animation: panPrefsPanelIn 0.16s ease; } @keyframes panPrefsPanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .pan-prefs-school-panel:not([hidden]):not(.isHidden) { animation: none; } .pan-prefs-option { transition: none; } } .pan-prefs-check-row { display: flex; flex-direction: column; gap: 4px; } .pan-prefs-toggle-list { gap: 2px; } .pan-prefs-option { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 8px 2px; border-radius: 9px; border: 1px solid transparent; font-size: 13px; font-weight: 600; line-height: 1.35; color: rgba(226, 232, 240, 0.94); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .pan-prefs-option--switch { align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 10px 2px; position: relative; } .pan-prefs-option:hover { background: rgba(255, 255, 255, 0.05); } .pan-prefs-option__text { flex: 1; min-width: 0; } /* source: /style_pan_prefs_portal_seg_switch.css?v=3 */ /* 命盘偏好开关；由 style_pan_prefs_portal_seg.css 拆出；须在其之后、style_pan_prefs_theme.css 之前 */ .pan-prefs-option--switch input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .pan-prefs-switch { position: relative; flex-shrink: 0; width: 40px; height: 24px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text-main) 28%, transparent); background: color-mix(in srgb, var(--text-main) 8%, transparent); transition: background 0.18s ease, border-color 0.18s ease; } .pan-prefs-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-main); box-shadow: 0 1px 3px color-mix(in srgb, var(--bg-dark) 35%, transparent); transition: transform 0.18s ease; } @media (prefers-reduced-motion: reduce) { .pan-prefs-switch, .pan-prefs-switch::after { transition: none; } } .pan-prefs-option--switch:has(input:checked) .pan-prefs-switch { background: var(--primary); border-color: var(--primary); } .pan-prefs-option--switch:has(input:checked) .pan-prefs-switch::after { transform: translateX(16px); background: var(--bg-dark); } .pan-prefs-option--switch:focus-within { outline: none; } .pan-prefs-option--switch:focus-within .pan-prefs-switch { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35); } .pan-prefs-popover input[type="radio"], .pan-prefs-popover input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; accent-color: var(--control-accent); } /* 兼容旧结构（学习盘等未迁移片段） */ .pan-prefs-field { margin-bottom: 12px; } .pan-prefs-field:last-child { margin-bottom: 0; } .pan-prefs-radio-row { display: flex; flex-direction: column; gap: 6px; } .pan-prefs-radio-row label, .pan-prefs-check-row > label:not(.pan-prefs-option) { display: flex; align-items: center; gap: 8px; font-size: 13px; color: color-mix(in srgb, var(--text-main) 92%, transparent); cursor: pointer; font-weight: 600; line-height: 1.35; } /* source: /style_pan_prefs_theme.css?v=5 */ /* 偏好弹层浅色；分段钮见 style_pan_prefs_theme_seg.css */ [data-theme="light"] .pan-prefs-popover, [data-theme="light"] .study-pan-prefs-popover { background-color: var(--sheet-bg, var(--popover-bg)) !important; background-image: none !important; border: 1px solid var(--sheet-border, var(--surface-border)) !important; box-shadow: none !important; color: var(--text-main) !important; } [data-theme="light"] .pan-prefs-popover :is( h4, .pan-prefs-title, .pan-prefs-label, .pan-prefs-field-desc, .pan-prefs-hint, .pan-prefs-seg-btn, .pan-prefs-option, .pan-prefs-radio-row label, .pan-prefs-check-row label ) { color: #111111 !important; } [data-theme="light"] .study-pan-prefs-popover :is( h4, .pan-prefs-title, .pan-prefs-label, .pan-prefs-field-desc, .pan-prefs-hint, .pan-prefs-seg-btn, .pan-prefs-option, .pan-prefs-radio-row label, .pan-prefs-check-row label ) { color: #111111 !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-field-desc, [data-theme="light"] .pan-prefs-popover .pan-prefs-hint, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-field-desc, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-hint { color: #111111 !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-head, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-head, [data-theme="light"] .pan-prefs-popover .pan-prefs-foot, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-foot { border-color: var(--sheet-divider, var(--line)); background: var(--sheet-bg, var(--popover-bg)); } [data-theme="light"] .pan-prefs-section--drill { border-bottom-color: var(--sheet-divider, var(--line)); } [data-theme="light"] .pan-prefs-inline-row .pan-prefs-label, [data-theme="light"] .pan-prefs-label { color: #111111; } [data-theme="light"] .pan-prefs-section-head .pan-prefs-label { color: color-mix(in srgb, #000 58%, transparent) !important; } [data-theme="light"] .pan-prefs-section-sub, [data-theme="light"] .pan-prefs-foot-hint { color: #111111 !important; opacity: 0.55; } [data-theme="light"] .pan-prefs-school-block { background: none; border: none; } [data-theme="light"] .pan-prefs-switch { background: transparent; border-color: #111111; } [data-theme="light"] .pan-prefs-switch::after { background: #111111; box-shadow: none; } [data-theme="light"] .pan-prefs-option--switch:has(input:checked) .pan-prefs-switch { background: #111111 !important; border-color: #111111 !important; } [data-theme="light"] .pan-prefs-option--switch:has(input:checked) .pan-prefs-switch::after { background: #ffffff !important; } [data-theme="light"] .pan-prefs-option--switch:focus-within .pan-prefs-switch { box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.25); } /* source: /style_pan_prefs_theme_seg.css?v=3 */ /* 偏好弹层浅色分段钮；由 style_pan_prefs_theme.css 拆出；须在其之后 */ /* 描边对齐 birth-pill-tray：约 10% 墨色，忌纯黑硬框 */ [data-theme="light"] .pan-prefs-popover .pan-prefs-seg, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-seg { background: color-mix(in srgb, var(--text-main) 2.5%, #ffffff); border: 1px solid rgba(17, 17, 17, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } [data-theme="light"] .pan-prefs-popover .pan-prefs-seg-btn, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-seg-btn { box-shadow: none !important; color: rgba(17, 17, 17, 0.52) !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-seg-btn:has(input:not(:checked)), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-seg-btn:has(input:not(:checked)) { background: transparent !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-seg-btn:has(input:not(:checked)):is(:hover, :active, :focus-visible), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-seg-btn:has(input:not(:checked)):is(:hover, :active, :focus-visible) { background: color-mix(in srgb, var(--text-main) 5%, transparent) !important; color: #111111 !important; box-shadow: none !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-seg-btn:has(input:checked), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-seg-btn:has(input:checked) { background: var(--mono-black, #000000) !important; color: var(--mono-white, #ffffff) !important; box-shadow: none !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-seg-btn:has(input:checked):is(:hover, :active, :focus-visible), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-seg-btn:has(input:checked):is(:hover, :active, :focus-visible) { background: var(--mono-black, #000000) !important; color: var(--mono-white, #ffffff) !important; box-shadow: none !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-seg-btn:has(input:checked) span, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-seg-btn:has(input:checked) span { color: var(--mono-white, #ffffff) !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-option, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-option { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-option:is(:hover, :active, :focus, :focus-visible), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-option:is(:hover, :active, :focus, :focus-visible) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-option:has(input:checked), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-option:has(input:checked) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; font-weight: 700; } [data-theme="light"] .pan-prefs-popover .pan-prefs-option:has(input:checked):is(:hover, :active, :focus-visible), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-option:has(input:checked):is(:hover, :active, :focus-visible) { background: transparent !important; box-shadow: none !important; } /* 开关样式勿被上方透明规则抹掉 */ [data-theme="light"] .pan-prefs-popover .pan-prefs-option--switch .pan-prefs-switch, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-option--switch .pan-prefs-switch { background: transparent !important; border-color: var(--mono-black, #000000) !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-option--switch:has(input:checked) .pan-prefs-switch, [data-theme="light"] .study-pan-prefs-popover .pan-prefs-option--switch:has(input:checked) .pan-prefs-switch { background: var(--mono-black, #000000) !important; border-color: var(--mono-black, #000000) !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-radio-row label:is(:hover, :active, :focus-visible), [data-theme="light"] .pan-prefs-popover .pan-prefs-check-row > label:not(.pan-prefs-option):is(:hover, :active, :focus-visible), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-radio-row label:is(:hover, :active, :focus-visible), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-check-row > label:not(.pan-prefs-option):is(:hover, :active, :focus-visible) { box-shadow: none !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-radio-row label:has(input:not(:checked)):is(:hover, :active), [data-theme="light"] .pan-prefs-popover .pan-prefs-check-row > label:not(.pan-prefs-option):has(input:not(:checked)):is(:hover, :active), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-radio-row label:has(input:not(:checked)):is(:hover, :active), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-check-row > label:not(.pan-prefs-option):has(input:not(:checked)):is(:hover, :active) { background: transparent !important; } [data-theme="light"] .pan-prefs-popover .pan-prefs-radio-row label:has(input:checked), [data-theme="light"] .pan-prefs-popover .pan-prefs-check-row > label:not(.pan-prefs-option):has(input:checked), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-radio-row label:has(input:checked), [data-theme="light"] .study-pan-prefs-popover .pan-prefs-check-row > label:not(.pan-prefs-option):has(input:checked) { background: var(--mono-black, #000000) !important; color: var(--mono-white, #ffffff) !important; border-radius: 6px; margin-inline: -4px; padding: 4px 4px; } /* source: /style_pan_prefs_theme_dark.css?v=3 */ /* 命盘偏好弹层深色；由 style_pan_prefs_theme.css 拆出；须在其之后、style_pan_dayun.css 之前 */ /* 深色主题：偏好弹层（含 portal 挂 body）白字，选中项白底黑字 */ html:not([data-theme="light"]) .pan-prefs-popover, html:not([data-theme="light"]) .study-pan-prefs-popover { background-color: var(--sheet-bg, var(--bg-dark)) !important; background-image: none !important; border-color: var(--sheet-border, var(--surface-border)) !important; box-shadow: var(--sheet-shadow, var(--shadow-lg)) !important; color: var(--text-main) !important; } html:not([data-theme="light"]) .pan-prefs-popover :is( h4, .pan-prefs-title, .pan-prefs-label, .pan-prefs-field-desc, .pan-prefs-hint, .pan-prefs-seg-btn, .pan-prefs-option, .pan-prefs-radio-row label, .pan-prefs-check-row label ) { color: #ffffff !important; } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-field-desc, html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-hint, html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-section-sub, html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-foot-hint { color: rgba(255, 255, 255, 0.52) !important; } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-head, html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-foot { border-bottom-color: var(--sheet-divider, var(--line)); border-top-color: var(--sheet-divider, var(--line)); background: var(--sheet-bg, var(--bg-dark)); } html:not([data-theme="light"]) .pan-prefs-section--drill { border-bottom-color: var(--sheet-divider, var(--line)); } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-section-head .pan-prefs-label { color: rgba(255, 255, 255, 0.58) !important; } html:not([data-theme="light"]) .pan-prefs-school-block { background: none; border: none; } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-seg { background: color-mix(in srgb, var(--text-main) 3.5%, transparent); border-color: color-mix(in srgb, var(--text-main) 12%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 5%, transparent); } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-seg-btn:has(input:checked) { background: #ffffff !important; color: #111111 !important; box-shadow: none; } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-option:hover { background: rgba(255, 255, 255, 0.06); } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-option--switch:hover { background: rgba(255, 255, 255, 0.04); } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-option:has(input:checked) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-option--switch:has(input:checked) { background: transparent; border-color: transparent; } html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-radio-row label:has(input:checked), html:not([data-theme="light"]) .pan-prefs-popover .pan-prefs-check-row > label:not(.pan-prefs-option):has(input:checked) { background: #ffffff !important; color: #111111 !important; border-radius: 6px; margin-inline: -4px; padding: 4px 4px; } .pan-display-card.pan-pref--hide-ten-god .changsheng-label>.pan-label-ten-god, .pan-display-card.pan-pref--hide-ten-god .changsheng-label>.pan-ten-god-stack { display: none !important; } .pan-display-card.pan-pref--hide-stem-strength .pan-stem-strength-score { display: none !important; } /* source: /style_pan_dayun.css?v=9 */ /* 大运格网前半；工具栏见 style_pan_dayun_toolbar.css */ /* 日柱「乾/坤」：双向箭头小标（互换）+ 整块可点，大运随性别重排 */ #pan .card .pan-gender-toggle-hit { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; cursor: pointer; gap: 3px; max-width: 100%; } #pan .card .pan-gender-toggle-hit .pan-label-ten-god--gender-toggle { text-decoration: none; } #pan .card .pan-gender-toggle-hit .pan-label-ten-god--male, #pan .card .pan-gender-toggle-hit .pan-label-ten-god--female { color: color-mix(in srgb, var(--text-main) 95%, transparent); } #pan .card .pan-gender-toggle-sym { display: flex; align-items: center; flex-shrink: 0; line-height: 0; color: var(--text-dim); opacity: 0.92; } #pan .card .pan-gender-toggle-svg { display: block; } #pan .card .pan-gender-toggle-hit:hover .pan-label-ten-god--gender-toggle { color: var(--text-main); } #pan .card .pan-gender-toggle-hit:hover .pan-gender-toggle-sym { color: var(--text-main); opacity: 1; } #pan .card .pan-gender-toggle-hit:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 1px; border-radius: var(--surface-radius-sm, 11px); } .pan-display-card.pan-pref--hide-changsheng .changsheng-label>.pan-label-cs, .pan-display-card.pan-pref--hide-changsheng .changsheng-label>.changsheng-phase-text { display: none !important; } .pan-display-card--school-wangshuai.pan-pref--hide-changsheng .stem-glyph-clickable { cursor: default !important; } .pan-display-card.pan-pref--hide-self-sit .self-sitting-phase { display: none !important; } .pan-display-card.pan-pref--hide-kong-wang .pan-kong-wang-phase { display: none !important; } .pan-display-card.pan-pref--hide-shen-sha .pan-shen-sha-row { display: none !important; } #pan .card .pan-shen-sha-list, .learnPanDisplaySlot .card .pan-shen-sha-list { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 6px; min-height: 0; } #pan .card .pan-shen-sha-item, #study-pan-preview .card .pan-shen-sha-item, .learnPanDisplaySlot .card .pan-shen-sha-item { font-size: 11px; line-height: 1.35; /* 神煞用中性墨色（非褐金）；深/浅底靠 token 自适应 */ color: var(--text-dim); text-align: center; white-space: nowrap; } .pan-display-card.pan-mobile-compact-cells .pan-shen-sha-item { font-size: 9px; line-height: 1.3; } /* source: /style_pan_dayun_card.css?v=4 */ #pan .card .pan-card-action { min-width: 38px; width: 38px; min-height: 38px; height: 38px; padding: 0; gap: 0; font-size: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--surface-radius-sm, 11px); color: var(--text-muted); background: transparent; border: none; box-shadow: none !important; transform: none; filter: none; transition: color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease; } #pan .card .pan-card-action svg { display: block; flex-shrink: 0; width: 18px; height: 18px; } #pan .card .pan-card-action:hover, #pan .card .pan-card-action:active, #pan .card .pan-card-action:focus-visible { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 6%, transparent) !important; border: none !important; box-shadow: none !important; transform: none !important; filter: none !important; } #pan .card .pan-card-toolbar-actions > button.actionBtn.pan-card-action, #pan .card .pan-card-toolbar-actions > .pan-prefs-wrap > button.actionBtn.pan-card-action, #pan .card .pan-card-toolbar-actions > .pan-card-more-wrap > button.actionBtn.pan-card-action { box-shadow: none !important; transform: none; filter: none; } #pan .card .pan-card-toolbar-actions > button.actionBtn.pan-card-action:hover, #pan .card .pan-card-toolbar-actions > button.actionBtn.pan-card-action:active, #pan .card .pan-card-toolbar-actions > button.actionBtn.pan-card-action:focus-visible, #pan .card .pan-card-toolbar-actions > .pan-prefs-wrap > button.actionBtn.pan-card-action:hover, #pan .card .pan-card-toolbar-actions > .pan-prefs-wrap > button.actionBtn.pan-card-action:active, #pan .card .pan-card-toolbar-actions > .pan-prefs-wrap > button.actionBtn.pan-card-action:focus-visible, #pan .card .pan-card-toolbar-actions > .pan-card-more-wrap > button.actionBtn.pan-card-action:hover, #pan .card .pan-card-toolbar-actions > .pan-card-more-wrap > button.actionBtn.pan-card-action:active, #pan .card .pan-card-toolbar-actions > .pan-card-more-wrap > button.actionBtn.pan-card-action:focus-visible { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 6%, transparent) !important; border: none !important; box-shadow: none !important; transform: none !important; filter: none !important; } #pan .card .pan-card-action.isDragging { opacity: 0.45; } #pan .card .pan-card-action--batch:hover { color: var(--text-main); border: none !important; box-shadow: none !important; transform: none !important; background: color-mix(in srgb, var(--text-main) 6%, transparent) !important; } /* source: /style_pan_dayun_toolbar.css?v=3 */ /* 大运工具栏同步/学习盘；由 style_pan_dayun.css 拆出；须在其之后、style_pan_hour.css 之前 */ /* 工具栏「同步到库房」：仅用 .pan-card-action--linked-store 作语义标记，配色与复制/导出等一致（深色灰字、悬停白字浅底；浅色见 [data-theme="light"]） */ /* 学习盘工具栏：与原局一致，操作行在上、长生区在下 */ #study-pan-preview .pan-card-action--ai, #study-pan-preview .pan-card-action--infer-hour { display: none !important; } #study-pan-preview .card .pan-card-toolbar { flex-direction: column; align-items: stretch; margin-bottom: 10px; justify-content: flex-start; gap: 8px; width: 100%; } #study-pan-preview .card .pan-card-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; width: 100%; max-width: 100%; } #study-pan-preview .card .pan-card-toolbar-actions>.pan-card-action, #study-pan-preview .card .pan-card-toolbar-actions>.study-pan-prefs-wrap>.pan-card-action, #study-pan-preview .card .pan-card-toolbar-actions>.pan-card-more-wrap>.pan-card-action { flex: 0 1 40px; min-width: 28px; width: 40px; min-height: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } #study-pan-preview .card .pan-card-toolbar-actions>.study-pan-prefs-wrap, #study-pan-preview .card .pan-card-toolbar-actions>.pan-card-more-wrap { flex: 0 1 40px; min-width: 28px; width: 40px; position: relative; } #study-pan-preview .card .pan-card-toolbar-actions .pan-card-action:not(.pan-card-more-item) svg { width: 18px; height: 18px; } #study-pan-preview .card .pan-card-more-popover { right: 0; left: auto; } /* source: /style_pan_hour.css?v=5 */ /* 学习盘槽工具栏缩放；表宽见 style_pan_hour_table.css */ /* * 学习页嵌入命盘槽：工具栏图标随槽宽等比缩放（窄侧栏不撑破、不依赖整卡 zoom）。 */ .learnPanDisplaySlot { container-type: inline-size; container-name: learn-pan-slot; --learn-pan-toolbar-btn: clamp(26px, 11cqw, 40px); --learn-pan-toolbar-icon: clamp(13px, 4.2cqw, 18px); --learn-pan-toolbar-gap: clamp(4px, 1.6cqw, 6px); } .learnPanDisplaySlot .card.pan-display-card { padding: 8px 6px; margin-bottom: 0; } .learnPanDisplaySlot .card .pan-card-toolbar { flex-direction: column; align-items: stretch; margin-bottom: 10px; justify-content: flex-start; gap: clamp(6px, 2cqw, 8px); width: 100%; } .learnPanDisplaySlot .card .pan-card-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--learn-pan-toolbar-gap); width: 100%; max-width: 100%; } .learnPanDisplaySlot .card .pan-card-toolbar-actions > .pan-card-action, .learnPanDisplaySlot .card .pan-card-toolbar-actions > .pan-prefs-wrap > .pan-card-action { flex: 0 1 var(--learn-pan-toolbar-btn); min-width: 26px; width: var(--learn-pan-toolbar-btn); min-height: var(--learn-pan-toolbar-btn); height: var(--learn-pan-toolbar-btn); padding: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; font-size: 0; line-height: 0; gap: 0; border-radius: clamp(8px, 2.4cqw, 10px); } .learnPanDisplaySlot .card .pan-card-toolbar-actions > .pan-prefs-wrap { flex: 0 1 var(--learn-pan-toolbar-btn); min-width: 26px; width: var(--learn-pan-toolbar-btn); } .learnPanDisplaySlot .card .pan-card-toolbar-actions .pan-card-action:not(.pan-card-more-item) svg { width: var(--learn-pan-toolbar-icon); height: var(--learn-pan-toolbar-icon); display: block; flex-shrink: 0; } /* * 命盘表格：hidden 列 display:none 不参与列数；fixed + 统一列宽避免「流时」等列被压窄、 * 侧旁十神/长生与天干挤成一团。桌面总宽 = 列数 × 列宽。 * 窄屏（≤900px）命盘主卡：.pan-mobile-compact-cells 表宽 100%、不横滑；天干旁十神/长生列中轴右侧；地支纵向叠字；运程藏干单列叠行、干左注右（详见 @media (max-width: 900px)）。 */ /* source: /style_pan_hour_table.css?v=5 */ /* 命盘时柱表宽与窄屏列；由 style_pan_hour.css 拆出；须在其之后、style_pan_hour_ctrl.css 之前 */ #pan .card .bazi-table { table-layout: fixed; width: max-content; min-width: 0; max-width: none; margin: 0 auto; } #pan .card .bazi-table th, #pan .card .bazi-table td { /* 藏干分层 + 十神 + 月支/时支长生竖排；桌面略加列宽，避免仍被裁切 */ min-width: 118px; width: 118px; max-width: none; box-sizing: border-box; padding: 5px 3px; vertical-align: top; text-align: center; overflow: visible; } #pan .card .bazi-table th { height: auto; min-height: 32px; padding: 6px 2px 4px; } /* 表头各行文字与「时柱」切换条垂直居中、水平对齐 */ #pan .card .bazi-table thead th { vertical-align: middle; text-align: center; } /* 时列表头：单行 ‹ 时柱 ›，与年/月/日同高、易扫读（移动端不再双行垫高） */ #pan .card.pan-display-card, .learnPanDisplaySlot .card.pan-display-card, #study-pan-preview .card.pan-display-card { --pan-hour-nav-size: clamp(14px, 3.6vw, 20px); --pan-hour-nav-svg: clamp(10px, 2.9vw, 15px); --pan-hour-slot-inset: clamp(8px, 2vw, 12px); --pan-hour-nav-prev: clamp(18px, 4.2vw, 28px); --pan-hour-nav-next: clamp(15px, 3.8vw, 26px); /* 旁注 left：按天干字号一半 + 小缝，勿用 god-text 自身 em（仅 ~4px 会压大字） */ --pan-stem-glyph-size: clamp(18px, 4.5vw, 24px); --pan-stem-god-left: calc(50% + var(--pan-stem-glyph-size) * 0.54); --pan-hour-stem-god-left: calc(50% + var(--pan-stem-glyph-size) * 0.51); } /* * 时柱：← → 嵌在地支大字左右（.pan-hour-branch-nav-wrap）。 */ :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .bazi-table tbody tr:first-child td.pan-hour-pillar-td { overflow: visible; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .bazi-table tbody tr:nth-child(2) td.pan-hour-branch-td { overflow: visible; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-nav-wrap { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; /* 箭头贴地支大字；勿 width:100% + 子项 margin:auto（会把 ← → 撑到列两端） */ gap: 6px; width: auto; max-width: 100%; box-sizing: border-box; margin-inline: auto; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-nav-wrap .glyph-wrapper { flex: 0 0 auto; margin-inline: 0; position: relative; width: 1em; /* 高度仅随大字；「养」绝对定位伸出，不参与箭头垂直居中 */ height: auto; min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: visible; } /* source: /style_pan_hour_table_nav.css?v=5 */ :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-nav-wrap .pan-hour-branch-nav { flex: 0 0 auto; align-self: center; margin-top: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; position: relative; z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-nav-wrap .glyph-wrapper .glyph { /* 入文档流：wrap 以大字盒高 align-items:center，左右箭头与「未」水平对齐 */ position: static; left: auto; top: auto; transform: none; width: 1em; height: 1em; flex-shrink: 0; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-nav-wrap .glyph-wrapper .glyph:hover { transform: none; opacity: 0.92; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-nav-wrap .glyph-wrapper .self-sitting-phase { position: absolute; /* * 锚主字盒高（--pan-stem-glyph-size），勿用 100%（紧凑卡 min-height 会偏低） * 也勿用 wrapper 的 1em（继承字号往往小于 .glyph 的 font-size，会叠字）。 */ top: var(--pan-stem-glyph-size, 1em); left: 50%; transform: translateX(-50%); margin-top: 2px; margin-left: 0; margin-right: 0; white-space: nowrap; z-index: 6; line-height: 1; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-nav-wrap .glyph-wrapper .pan-kong-wang-phase { position: absolute; top: var(--pan-stem-glyph-size, 1em); left: 50%; transform: translateX(-50%); margin-top: 2px; margin-left: 0; margin-right: 0; white-space: nowrap; z-index: 6; display: inline-flex; align-items: center; justify-content: center; gap: 1px; line-height: 1; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card.pan-pref--hide-self-sit .pan-hour-branch-nav-wrap .glyph-wrapper .pan-kong-wang-phase { margin-top: 2px; } /* 自坐与空亡同现时错开，避免叠在主字下方同一行 */ :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-nav-wrap .glyph-wrapper .self-sitting-phase + .pan-kong-wang-phase { top: calc(var(--pan-stem-glyph-size, 1em) + 12px); } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-container { /* 「养」绝对伸出大字下，给地支列留底距，避免压到下一行 */ padding-bottom: 14px; box-sizing: border-box; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-branch-nav { flex: 0 0 auto; pointer-events: auto; position: relative; z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-pillar-td .stem-container .pan-hour-stem-aside { position: absolute; left: var(--pan-hour-stem-god-left); top: 50%; transform: translateY(-50%); z-index: 8; max-width: calc(100% - var(--pan-hour-stem-god-left)); pointer-events: none; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .pan-hour-stem-aside .god-text { position: static; top: auto; left: auto; transform: none; min-width: 0; pointer-events: auto; } #pan .card .bazi-table thead th.th-hour-nav { padding: 5px 2px 4px; vertical-align: middle; } /* source: /style_pan_hour_ctrl.css?v=4 */ /* 命盘时柱切换胶囊；行距藏干见 style_pan_hour_ctrl_rows.css */ /* 时柱天干行：旁注区定位基准 */ :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .bazi-table tbody tr:first-child td[data-pillar="hour"] { position: relative; vertical-align: top; } /* 时柱地支行：← → 与地支大字同行居中 */ :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] { position: relative; vertical-align: top; overflow: visible; } /* 时柱胶囊 +「写回」按钮；允许换行以免窄列裁切 */ :is(#pan, .learnPanDisplaySlot) .card .bazi-table thead th .hour-ctrl-wrap { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 3px; row-gap: 0; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; } /* 仅图标：表头时柱用（若有）；写回主操作已迁至 .pan-card-action--linked-store */ #pan .card .bazi-table thead th .hour-ctrl-linked-save { appearance: none; -webkit-appearance: none; margin: 0; padding: 0 2px; min-width: 16px; height: 16px; border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: rgba(var(--accent-rgb), 0.92); box-shadow: none; transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #pan .card .bazi-table thead th .hour-ctrl-linked-save__inner { display: inline-flex; align-items: center; justify-content: center; gap: 0; } #pan .card .bazi-table thead th .hour-ctrl-linked-save__icon { display: block; flex-shrink: 0; } #pan .card .bazi-table thead th .hour-ctrl-linked-save--icon-only .hour-ctrl-linked-save__icon { width: 11px; height: 11px; } #pan .card .bazi-table thead th .hour-ctrl-linked-save:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.06); transform: scale(1.05); } #pan .card .bazi-table thead th .hour-ctrl-linked-save:active:not(:disabled) { transform: scale(0.95); } #pan .card .bazi-table thead th .hour-ctrl-linked-save:disabled { opacity: 0.45; cursor: default; } #pan .card .bazi-table thead th .hour-ctrl-linked-save:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.92), 0 0 0 4px rgba(var(--accent-rgb), 0.4); } /* source: /style_pan_hour_ctrl_rows.css?v=2 */ /* 命盘时辰行紧凑布局；相位修正见 style_pan_hour_ctrl_rows_phase.css */ /* 表头时辰胶囊：← 图标 → */ :is(#pan, .learnPanDisplaySlot) .card .bazi-table thead th .hour-ctrl { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1px; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; padding: 0; border-radius: 0; background: transparent; backdrop-filter: none; border: none; pointer-events: none; } /* 中间循环图标 */ :is(#pan, .learnPanDisplaySlot) .card .bazi-table thead th .hour-ctrl .hour-ctrl-icon { display: none; align-items: center; justify-content: center; opacity: 0.55; pointer-events: none; user-select: none; color: rgba(186, 198, 220, 0.7); } :is(#pan, .learnPanDisplaySlot) .card .bazi-table thead th .hour-ctrl .hour-ctrl-icon svg { width: 10px; height: 10px; display: block; } /* 天干行与地支行贴近，减少两行之间留白 */ :is(#pan, .learnPanDisplaySlot) .card .bazi-table tbody tr:first-child td, #study-pan-preview .card .bazi-table tbody tr:first-child td { padding-bottom: 1px; overflow: visible; } #pan .card .bazi-table tbody tr:nth-child(2) td { padding-top: 1px; } /* 藏干行与地支略分开，避免黏连 */ #pan .card .bazi-table tbody tr:nth-child(3) td { padding-top: 6px; } /* 命盘卡片内：天干地支与藏干略收紧，整体更紧凑 */ #pan .card .stem-container, #pan .card .branch-container { min-height: 44px; } #pan .card .branch-container { min-height: 58px; } #pan .card .stem-container .glyph-wrapper { min-height: 44px; } /* source: /style_pan_hour_ctrl_rows_branch.css?v=2 */ /* 地支大字为 absolute，不占流；须留足高度 + 自坐上边距，避免与 phase-main 重叠 */ #pan .card .branch-container .glyph-wrapper { height: auto; min-height: 52px; padding-bottom: 1px; } #pan .card .branch-container .self-sitting-phase { margin-top: 43px; position: relative; z-index: 6; line-height: 1; } #pan .card .branch-container .self-sitting-phase .phase-main { font-size: 10px; font-weight: 800; } #pan .card .branch-container .pan-kong-wang-phase { position: relative; z-index: 6; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; line-height: 1; } #pan .card .branch-container .pan-kong-wang-phase .pan-kong-wang-char { font-size: 10px; font-weight: 800; } .pan-display-card.pan-pref--hide-self-sit .branch-container .glyph-wrapper .pan-kong-wang-phase { margin-top: 43px; } .pan-display-card.pan-pref--hide-kong-wang .pan-kong-wang-phase { display: none !important; } .pan-display-card--school-wangshuai:not(.pan-pref--hide-kong-wang) .branch-container .glyph-wrapper { min-height: 64px; padding-bottom: 4px; } #pan .card .glyph { font-size: 24px; width: 32px; height: 32px; } #pan .card .stem-container .god-text, #pan .card .branch-container .god-text { left: calc(50% + 15px); min-width: 44px; line-height: 1.08; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .bazi-table tbody tr:first-child td[data-pillar="hour"] .stem-container .pan-hour-stem-aside { left: var(--pan-hour-stem-god-left); } #pan .card .stem-container .god-text.changsheng-label { gap: 4px; row-gap: 4px; } #pan .card .god-text.changsheng-label { font-size: 9px; } #pan .card .god-text.changsheng-label>div:not(.changsheng-phase-text) { font-size: 9px; } #pan .card .god-text.changsheng-label .phase-main { font-size: 11px; } #pan .card .god-text.changsheng-label .phase-sub { font-size: 7px; } #pan .card .changsheng-phase-text { margin-top: 0; } #pan .card .god-text.changsheng-label .changsheng-phase-sub-col .phase-mark-num { font-size: 6.5px; color: var(--text-dim); } /* source: /style_pan_hour_ctrl_rows_phase.css?v=2 */ /* 命盘时辰行长生相位叠字修正；由 style_pan_hour_ctrl_rows.css 拆出；须在其之后、style_pan_table.css 之前 */ /* 覆盖 stem 上 .phase-sub 的 translateY/margin，避免月支与时支两行叠字 */ #pan .card .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub { margin-left: 0; transform: none; } #pan .card .hiddenList { gap: 3px; padding: 0; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box; } #pan .card .hiddenPart { gap: 2px; padding: 1px 0 2px; } #pan .card .hiddenItemsRow { gap: 6px 8px; row-gap: 8px; align-content: flex-start; } #pan .card .hiddenGlyph { width: 19px; height: 21px; } #pan .card .hiddenGlyph.stem-glyph-clickable { cursor: pointer; border-radius: 6px; transition: background 0.15s ease; } #pan .card .hiddenGlyph.stem-glyph-clickable:hover { background: rgba(255, 255, 255, 0.07); } #pan .card .hiddenGlyph span { font-size: 11px; } #pan .card .hiddenItem { align-items: flex-start; min-width: 0; max-width: 100%; } #pan .card .hiddenItem .hiddenGlyph { align-self: center; } #pan .card .hiddenItem .god-text { white-space: normal; min-width: 0; max-width: 100%; word-break: keep-all; overflow-wrap: anywhere; } #pan .card .hiddenItem .god-text.changsheng-label { font-size: 7px; } #pan .card .hiddenItem .god-text.changsheng-label>div:not(.changsheng-phase-text) { font-size: 7px; } #pan .card .hiddenItem .god-text.changsheng-label .phase-main { font-size: 9px; line-height: 1; } /* source: /style_pan_hour_ctrl_rows_phase_sub.css?v=4 */ /* 藏干窄列：字号；布局由 .changsheng-phase-text--marked 统一为「左主字 + 右列顶底对齐」 */ #pan .card .hiddenItem .god-text.changsheng-label .changsheng-phase-sub-col .phase-mark-num { font-size: 6px; line-height: 1; } #pan .card .hiddenItem .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub { line-height: 1; } #pan .card .hiddenItem .changsheng-phase-text { white-space: normal; flex-wrap: wrap; max-width: 100%; } #pan .card .hiddenGlyph--renyuan-siling, .learnPanDisplaySlot .pan-display-card .hiddenGlyph--renyuan-siling { border-radius: 6px; background: transparent; box-shadow: none; } #pan .card .hiddenGlyph--renyuan-siling::before, .learnPanDisplaySlot .pan-display-card .hiddenGlyph--renyuan-siling::before { content: "司"; position: absolute; right: -2px; bottom: -2px; min-width: 10px; height: 10px; padding: 0; border-radius: 2px; background: var(--accent); color: var(--bg-dark, #0a0a0a); font-size: 8px; font-weight: 900; line-height: 10px; text-align: center; pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); z-index: 2; } #pan .card .hiddenGlyph-char--renyuan-siling, .learnPanDisplaySlot .pan-display-card .hiddenGlyph-char--renyuan-siling { text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.75); text-underline-offset: 2px; font-weight: inherit; } /* source: /style_pan_table.css?v=5 */ /* 命盘表强弱分数；藏干色见 style_pan_table_hidden.css */ .bazi-table { width: auto; margin: 0 auto; border-collapse: separate; border-spacing: 0; } .table-container { overflow-x: auto; overflow-y: visible; width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch; padding-bottom: 8px; display: block; overscroll-behavior-x: contain; } .bazi-table th, .bazi-table td { padding: 12px 6px; min-width: 130px; vertical-align: top; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.015); box-sizing: border-box; overflow: visible; } .bazi-table th { font-size: 11px; color: var(--text-dim); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; height: 48px; } .stem-container, .branch-container { display: flex; justify-content: center; align-items: center; min-height: 56px; position: relative; /* Base for absolute positioning */ width: 100%; } .stem-container .god-text, .branch-container .god-text { position: absolute; left: calc(50% + 20px); /* Position to the right of the centered glyph */ display: flex; flex-direction: column; gap: 0; line-height: 1.1; text-align: left; align-items: flex-start; min-width: 60px; } .glyph-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pan-stem-strength-score { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -100%); font-size: 9px; line-height: 1; font-weight: 800; color: var(--text-dim); pointer-events: none; user-select: none; } /* 四柱天干格：分数锚点上移，与下方干字多留一点竖向间距 */ #pan .card .stem-container .glyph-wrapper .pan-stem-strength-score, #study-pan-preview .card .stem-container .glyph-wrapper .pan-stem-strength-score { top: 5px; } .pan-stem-strength-score--hidden { top: 3px; transform: translate(-50%, -80%); font-size: 4px; color: var(--text-dim); } /* source: /style_pan_table_hidden.css?v=1 */ /* 命盘表藏干五行色；由 style_pan_table.css 拆出；须在其之后 */ /* 藏干：天干为全饱和五行色；强弱分数统一中性 slate（勿与干字同色） */ #pan .card .hiddenItem.wood .hiddenGlyph>span, #study-pan-preview .card .hiddenItem.wood .hiddenGlyph>span { color: #52f08c !important; } #pan .card .hiddenItem.fire .hiddenGlyph>span, #study-pan-preview .card .hiddenItem.fire .hiddenGlyph>span { color: #ff7e92 !important; } #pan .card .hiddenItem.earth .hiddenGlyph>span, #study-pan-preview .card .hiddenItem.earth .hiddenGlyph>span { color: #fcd34d !important; } #pan .card .hiddenItem.metal .hiddenGlyph>span, #study-pan-preview .card .hiddenItem.metal .hiddenGlyph>span { color: #ffffff !important; } #pan .card .hiddenItem.water .hiddenGlyph>span, #study-pan-preview .card .hiddenItem.water .hiddenGlyph>span { color: var(--water) !important; } /* 藏干分数：非可点天干仍中性 slate（双 ID 压过浅色 .water * 等） */ #app-view-pan #pan .card .hiddenItem .hiddenGlyph:not(.stem-glyph-clickable) .pan-stem-strength-score--hidden, #app-view-study #study-pan-preview .card .hiddenItem .hiddenGlyph:not(.stem-glyph-clickable) .pan-stem-strength-score--hidden { background: transparent !important; border: none !important; color: rgba(203, 213, 225, 0.88) !important; } /* 可点藏干天干：深色 — 分数纯文字；悬停/按下/焦点内字色提亮（无底、无圆角） */ #app-view-pan #pan .card .hiddenItem .hiddenGlyph.stem-glyph-clickable .pan-stem-strength-score--hidden, #app-view-study #study-pan-preview .card .hiddenItem .hiddenGlyph.stem-glyph-clickable .pan-stem-strength-score--hidden { box-sizing: border-box; z-index: 2; padding: 0 !important; border-radius: 0 !important; border: none !important; background: transparent !important; /* 固定 px：勿用 em，父级 .hiddenGlyph 继承字号随主题/视口变化会导致远端与本地字号不一致 */ font-size: 6px; font-weight: 600; line-height: 1.2; color: rgba(226, 232, 240, 0.92) !important; } #app-view-pan #pan .card .hiddenItem .hiddenGlyph.stem-glyph-clickable:hover .pan-stem-strength-score--hidden, #app-view-pan #pan .card .hiddenItem .hiddenGlyph.stem-glyph-clickable:active .pan-stem-strength-score--hidden, #app-view-pan #pan .card .hiddenItem .hiddenGlyph.stem-glyph-clickable:focus-within .pan-stem-strength-score--hidden, #app-view-study #study-pan-preview .card .hiddenItem .hiddenGlyph.stem-glyph-clickable:hover .pan-stem-strength-score--hidden, #app-view-study #study-pan-preview .card .hiddenItem .hiddenGlyph.stem-glyph-clickable:active .pan-stem-strength-score--hidden, #app-view-study #study-pan-preview .card .hiddenItem .hiddenGlyph.stem-glyph-clickable:focus-within .pan-stem-strength-score--hidden { background: transparent !important; border: none !important; color: #ffffff !important; } /* 主天干分数：与藏干可点天干同色（中性，勿随干字五行色） */ #app-view-pan #pan .card .stem-container .glyph-wrapper.stem-glyph-clickable .pan-stem-strength-score, #app-view-study #study-pan-preview .card .stem-container .glyph-wrapper.stem-glyph-clickable .pan-stem-strength-score { box-sizing: border-box; z-index: 2; padding: 0 !important; border: none !important; background: transparent !important; font-weight: 600; line-height: 1.2; color: rgba(226, 232, 240, 0.92) !important; } #app-view-pan #pan .card .stem-container .glyph-wrapper.stem-glyph-clickable:hover .pan-stem-strength-score, #app-view-pan #pan .card .stem-container .glyph-wrapper.stem-glyph-clickable:active .pan-stem-strength-score, #app-view-pan #pan .card .stem-container .glyph-wrapper.stem-glyph-clickable:focus-within .pan-stem-strength-score, #app-view-study #study-pan-preview .card .stem-container .glyph-wrapper.stem-glyph-clickable:hover .pan-stem-strength-score, #app-view-study #study-pan-preview .card .stem-container .glyph-wrapper.stem-glyph-clickable:active .pan-stem-strength-score, #app-view-study #study-pan-preview .card .stem-container .glyph-wrapper.stem-glyph-clickable:focus-within .pan-stem-strength-score { background: transparent !important; border: none !important; color: #ffffff !important; } .self-sitting-phase { z-index: 5; } .branch-container .glyph-wrapper { height: 60px; /* Give enough height to show phase below */ } .branch-container .self-sitting-phase { margin-top: 38px; /* Position it below the branch glyph */ } /* source: /style_pan_table_glyphs.css?v=2 */ /* 命盘字形/藏干隐藏层；由 style_pan_table.css 拆出；须在其之后、style_pan_table_colors.css 之前 */ /* Glyphs */ .glyph { font-size: 26px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; position: absolute; /* Absolute center within container */ left: 50%; top: 50%; transform: translate(-50%, -50%); /* 悬停勿改 translate，否则偏离中心、不利点击 */ transition: transform 0.18s ease; } .glyph span { display: inline-block; text-align: center; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } /* Remove glow effects */ .glyph span, .hiddenItem span, .ganzhi-row span { text-shadow: none !important; } .glyph:hover { transform: translate(-50%, -50%) scale(1.02); } /* Hidden Stems & Gods */ .hiddenList { display: flex; flex-direction: column; gap: 4px; padding: 2px 0; width: fit-content; margin: 0 auto; } .hiddenPart { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; position: relative; padding: 2px 0 3px; width: 100%; max-width: 100%; box-sizing: border-box; } .hiddenPart__label { font-size: 8px; font-weight: 720; letter-spacing: 0.1em; color: rgba(148, 163, 184, 0.78); line-height: 1.2; width: 100%; text-align: center; flex-shrink: 0; } /* 命盘偏好「地支藏干·库气层」关闭时隐藏（见 localStorage baziPanDisplayPrefs.showHiddenKuqi；远端与本地域名不同则偏好互不共享） */ .pan-display-card.pan-pref--hide-hidden-kuqi .hiddenPart--grave { display: none !important; } .hiddenPart:not(:last-child)::after { content: ""; position: absolute; bottom: -2px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0) 100%); } /* source: /style_pan_table_glyphs_hidden.css?v=1 */ .hiddenItemsRow { display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: flex-start; max-width: 100%; width: 100%; justify-content: center; } .hiddenItem { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; gap: 4px; width: auto; height: auto; margin-bottom: 0; } .hiddenGlyph { width: 22px; height: 24px; display: flex; align-items: center; justify-content: center; position: relative; } .hiddenGlyph span { font-size: 12px; font-weight: 700; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); } .hiddenItem .god-text { position: static; text-align: left; align-items: flex-start; white-space: nowrap; } .hiddenItem .phase-main { font-size: 10px; } .hiddenItem .phase-sub { font-size: 7px; } .hiddenItem .god-text.changsheng-label { font-size: 8px; line-height: 1.05; filter: none; } .hiddenItem .god-text.changsheng-label>div:not(.changsheng-phase-text) { font-size: 8px; font-weight: 800; } .hiddenItem .god-text.changsheng-label .phase-main { line-height: 1; } .hiddenItem .god-text.changsheng-label .changsheng-phase-sub-col .phase-mark-num, .hiddenItem .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub { line-height: 1; } /* source: /style_pan_table_colors.css?v=2 */ /* 命盘表十神相位着色；角标副列见 style_pan_table_colors_marks.css */ /* Element Colors - Sophisticated Palette - Slightly Brighter */ .wood { color: #52f08c; } .fire { color: #ff7e92; } .earth { color: #fcd34d; } .metal { color: #ffffff; } .water { color: var(--water); } /* 长生标签内若显式带五行 class，优先使用五行色（避免被 changsheng-label 层级色覆盖） */ #pan .card .god-text.changsheng-label .pan-label-ten-god.wood, #pan .card .god-text.changsheng-label .phase-main.wood, #pan .card .god-text.changsheng-label .phase-sub.wood, #pan .card .god-text.changsheng-label .pan-ten-god-stack.wood, #study-pan-preview .card .god-text.changsheng-label .pan-label-ten-god.wood, #study-pan-preview .card .god-text.changsheng-label .phase-main.wood, #study-pan-preview .card .god-text.changsheng-label .phase-sub.wood, #study-pan-preview .card .god-text.changsheng-label .pan-ten-god-stack.wood { color: #52f08c; } #pan .card .god-text.changsheng-label .pan-label-ten-god.fire, #pan .card .god-text.changsheng-label .phase-main.fire, #pan .card .god-text.changsheng-label .phase-sub.fire, #pan .card .god-text.changsheng-label .pan-ten-god-stack.fire, #study-pan-preview .card .god-text.changsheng-label .pan-label-ten-god.fire, #study-pan-preview .card .god-text.changsheng-label .phase-main.fire, #study-pan-preview .card .god-text.changsheng-label .phase-sub.fire, #study-pan-preview .card .god-text.changsheng-label .pan-ten-god-stack.fire { color: #ff7e92; } #pan .card .god-text.changsheng-label .pan-label-ten-god.earth, #pan .card .god-text.changsheng-label .phase-main.earth, #pan .card .god-text.changsheng-label .phase-sub.earth, #pan .card .god-text.changsheng-label .pan-ten-god-stack.earth, #study-pan-preview .card .god-text.changsheng-label .pan-label-ten-god.earth, #study-pan-preview .card .god-text.changsheng-label .phase-main.earth, #study-pan-preview .card .god-text.changsheng-label .phase-sub.earth, #study-pan-preview .card .god-text.changsheng-label .pan-ten-god-stack.earth { color: #fcd34d; } #pan .card .god-text.changsheng-label .pan-label-ten-god.metal, #pan .card .god-text.changsheng-label .phase-main.metal, #pan .card .god-text.changsheng-label .phase-sub.metal, #pan .card .god-text.changsheng-label .pan-ten-god-stack.metal, #study-pan-preview .card .god-text.changsheng-label .pan-label-ten-god.metal, #study-pan-preview .card .god-text.changsheng-label .phase-main.metal, #study-pan-preview .card .god-text.changsheng-label .phase-sub.metal, #study-pan-preview .card .god-text.changsheng-label .pan-ten-god-stack.metal { color: #ffffff; } #pan .card .god-text.changsheng-label .pan-label-ten-god.water, /* source: /style_pan_table_colors_phase.css?v=1 */ #pan .card .god-text.changsheng-label .phase-main.water, #pan .card .god-text.changsheng-label .phase-sub.water, #pan .card .god-text.changsheng-label .pan-ten-god-stack.water, #study-pan-preview .card .god-text.changsheng-label .pan-label-ten-god.water, #study-pan-preview .card .god-text.changsheng-label .phase-main.water, #study-pan-preview .card .god-text.changsheng-label .phase-sub.water, #study-pan-preview .card .god-text.changsheng-label .pan-ten-god-stack.water { color: var(--water); } .italic { font-style: italic; opacity: 0.85; } /* TenGod and Phase Tags */ .god-text { font-size: 9px; line-height: 1.2; color: #cbd5e1; font-weight: 700; display: flex; flex-direction: column; gap: 0px; align-items: center; letter-spacing: 0.01em; } .god-text.changsheng-label { font-size: 10px; color: rgba(226, 232, 240, 0.92); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); } .god-text.changsheng-label>div:not(.changsheng-phase-text) { font-size: 10px; font-weight: 900; color: rgba(248, 250, 252, 0.95); letter-spacing: 0.02em; } .god-text.changsheng-label .changsheng-phase-text { color: rgba(203, 213, 225, 0.9); opacity: 1; } .god-text.changsheng-label .changsheng-phase-text.hour-phase { color: rgba(148, 163, 184, 0.75); opacity: 1; } .god-text.changsheng-label .phase-main { font-size: 12px; font-weight: 900; } .god-text.changsheng-label .phase-sub { font-size: 8px; opacity: 0.82; font-weight: 900; } .changsheng-phase-text { color: #94a3b8; opacity: 0.9; white-space: nowrap; font-weight: 700; display: inline-flex; align-items: flex-end; gap: 0; line-height: 1; margin-top: 1px; box-sizing: border-box; } /* source: /style_pan_table_colors_marks.css?v=1 */ /* 命盘表角标副列着色；由 style_pan_table_colors.css 拆出；须在其之后、style_pan_table_colors_hour.css 之前 */ /* 天干/宫位 + 右侧「角标在上、副字在下」列 */ .changsheng-phase-inner { display: inline-flex; align-items: flex-end; gap: 2px; line-height: 1; min-height: 1em; } /* * 有角标（--marked）：左主字与右列（数字上、地支下）外框顶底齐平； * 主字在左格垂直居中，右列 stretch 后 space-between 顶底对齐（与线框示意一致）。 */ .changsheng-phase-text--marked .changsheng-phase-inner { align-items: stretch; /* row-gap / column-gap：主字与「数字+地支」列间距（天干格、藏干等同理） */ gap: 2px 3px; } .changsheng-phase-text--marked .changsheng-phase-inner>.phase-main { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; } /* 副字正上方叠角标（文档流，不压甲/胎等主字） */ .changsheng-phase-sub-col { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; line-height: 1; } /* 数字在副字正上方：副列等宽 stretch + 两行 text-align:center，与地支同一竖轴（避免 flex-end 窄数字显得歪） */ .changsheng-phase-text--marked .changsheng-phase-sub-col { align-items: stretch; justify-content: space-between; align-self: stretch; gap: 0; } .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-mark-num, .changsheng-phase-text--marked .changsheng-phase-sub-col .phase-sub { text-align: center; } /* 副字在竖列内已底对齐，禁止再用 translateY（不占布局高度，会与时支下一行叠在一起） */ .changsheng-phase-sub-col .phase-sub { margin-left: 0; transform: none; } /* 与 app.js CHANGSHENG_PHASE_MARK_NUM 对应；纯数字、无圆框 */ .changsheng-phase-text .phase-mark-num { position: static; flex-shrink: 0; box-sizing: border-box; min-width: 0; padding: 0; margin: 0; border: none; border-radius: 0; background: none; box-shadow: none; font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; text-align: center; color: rgba(186, 198, 226, 0.95); pointer-events: none; user-select: none; } .pan-cs-toolbar-panel .changsheng-phase-sub-col .phase-mark-num { font-size: 0.88em; font-weight: 900; line-height: 1; color: rgba(199, 210, 238, 0.92); } .phase-main { font-size: 13px; line-height: 1; } .phase-sub { font-size: 8.5px; opacity: 0.65; line-height: 1; margin-left: 2px; transform: translateY(2px); display: inline-block; font-weight: 800; } .changsheng-phase-text.hour-phase { color: #64748b; opacity: 0.7; } /* source: /style_pan_table_colors_hour.css?v=3 */ /* 命盘表时辰控制着色；由 style_pan_table_colors.css 拆出；须在其之后、style_pan_dayun_grid.css 之前 */ /* Hour Control（表头内由 #pan … .hour-ctrl 覆盖为 grid） */ .hour-ctrl { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.3); padding: 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); } .hour-nav { cursor: pointer; appearance: none; -webkit-appearance: none; border: none; padding: 0; margin: 0; background: transparent; font: inherit; color: #e11d48; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); touch-action: manipulation; -webkit-tap-highlight-color: transparent; pointer-events: auto; } .hour-nav:hover { color: #be123c; background: rgba(225, 29, 72, 0.08); transform: scale(1.05); } .hour-nav:active { transform: scale(0.95); } /* 命盘表内时辰左右箭头：深色白、浅色黑；略放大（表格外仍用全局 .hour-nav 玫红） */ :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .bazi-table thead th .hour-ctrl .hour-nav, :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] .pan-hour-branch-nav { color: #ffffff; width: var(--pan-hour-nav-size); height: var(--pan-hour-nav-size); min-width: var(--pan-hour-nav-size); } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .bazi-table thead th .hour-ctrl .hour-nav svg, :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] .pan-hour-branch-nav svg { width: var(--pan-hour-nav-svg); height: var(--pan-hour-nav-svg); display: block; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card:not(.pan-display-card) .bazi-table thead th .hour-ctrl .hour-nav, :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card:not(.pan-display-card) .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] .pan-hour-branch-nav { color: #ffffff; width: 22px; height: 22px; min-width: 22px; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card:not(.pan-display-card) .bazi-table thead th .hour-ctrl .hour-nav svg, :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card:not(.pan-display-card) .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] .pan-hour-branch-nav svg { width: 18px; height: 18px; display: block; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .bazi-table .hour-nav:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .bazi-table .hour-nav:active { color: #ffffff; background: rgba(255, 255, 255, 0.08); } /* source: /style_pan_dayun_grid.css?v=4 */ /* 大运/流年网格与选中反转；行距移动端见 style_pan_dayun_grid_layout.css */ /* DaYun & Drill Down */ .dayun-section, .drill-section { width: 100%; max-width: 960px; margin: 12px auto; padding: 0; background: transparent; border: none; box-shadow: none; } /* 大运 / 流年 / 流月流日流时：宽屏 12 列一行；窄屏（手机/小 iPad）6 列自动换行 */ .dayun-grid, .liunian-grid, .drill-grid { display: grid; grid-template-columns: repeat(12, minmax(52px, 1fr)); gap: 3px; border: none; border-radius: 0; overflow: visible; background: transparent; } @media (max-width: 900px) { .dayun-grid, .liunian-grid, .drill-grid { grid-template-columns: repeat(6, minmax(52px, 1fr)); } } /* 格内仅干支，竖排上色字 */ .pillar-gz-compact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 0 4px; min-width: 0; } .pillar-gz-char { font-size: 15px; font-weight: 800; line-height: 1.05; text-align: center; } .dayun-grid .dayun-item, .liunian-grid .liunian-item, .drill-grid .drill-item { min-width: 0; } .liunian-item, .drill-item, .dayun-item { padding: 4px 2px; border: none; border-radius: var(--surface-radius-sm, 11px); transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer; display: flex; flex-direction: column; /* Vertical layout */ align-items: center; justify-content: flex-start; /* Start from top */ min-height: 68px; background: transparent; position: relative; overflow: visible; } .liunian-item:hover, .drill-item:hover, .dayun-item:hover { background: color-mix(in srgb, var(--text-main) 5%, transparent); } .liunian-item.isSelected, .drill-item.isSelected, .dayun-item.isActive { /* 具体配色见下方「运程选中」规则（深浅主题互反） */ position: relative; z-index: 1; } /* source: /style_pan_dayun_grid_selected.css?v=2 */ /* 运程选中：浅色黑底白字 / 深色白底黑字（五行色除外；金在反转底上单独保对比） */ html:not([data-theme="light"]) :is(#app-view-pan, #app-view-notes) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) :is(.dayun-item.isActive, .liunian-item.isSelected, .drill-item.isSelected) { background: #ffffff !important; border: none !important; box-shadow: none !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-notes) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) :is(.dayun-item.isActive, .liunian-item.isSelected, .drill-item.isSelected) :is(.drill-desc, .liunian-year, .liunian-age-label, .god-text, .pillar-gz-char:not(.wood):not(.fire):not(.earth):not(.metal):not(.water)) { color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-notes) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) :is(.dayun-item.isActive, .liunian-item.isSelected, .drill-item.isSelected) :is(.drill-desc div:first-child, .liunian-year div:first-child) { color: #111111 !important; opacity: 1 !important; } /* 深主题选中白底：金为纯白会融于底，改用纯黑 */ html:not([data-theme="light"]) :is(#app-view-pan, #app-view-notes) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) :is(.dayun-item.isActive, .liunian-item.isSelected, .drill-item.isSelected) :is(.pillar-gz-char.metal, .ganzhi-row .phase-main.metal, .ganzhi-row .phase-sub.metal, .ganzhi-row.subscript-mode .phase-sub.metal) { color: #000000 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-notes) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) :is(.dayun-item.isActive, .liunian-item.isSelected, .drill-item.isSelected) { background: #111111 !important; border: none !important; box-shadow: none !important; } [data-theme="light"] :is(#app-view-pan, #app-view-notes) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) :is(.dayun-item.isActive, .liunian-item.isSelected, .drill-item.isSelected) *:not(.wood):not(.fire):not(.earth):not(.metal):not(.water) { color: #ffffff !important; } /* 浅主题选中黑底：金为纯黑会融于底，改用纯白 */ [data-theme="light"] :is(#app-view-pan, #app-view-notes) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) :is(.dayun-item.isActive, .liunian-item.isSelected, .drill-item.isSelected) :is(.pillar-gz-char.metal, .ganzhi-row .phase-main.metal, .ganzhi-row .phase-sub.metal, .ganzhi-row.subscript-mode .phase-sub.metal) { color: #ffffff !important; } .liunian-year, .drill-desc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; row-gap: 2px; font-size: 8px; color: var(--text-dim); margin-bottom: 2px; min-height: 24px; width: 100%; max-width: 100%; box-sizing: border-box; position: relative; z-index: 2; } .liunian-year div:first-child, .drill-desc div:first-child { font-size: 9px; color: #fff; font-weight: 800; } .liunian-age-label { font-size: clamp(5px, 1.15vw, 7px); color: var(--text-dim); opacity: 0.8; font-weight: 600; white-space: nowrap; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: min-content; width: max-content; overflow: visible; overflow-wrap: normal; word-break: keep-all; } #pan #drill-down .drill-desc > .liunian-age-label, #pan #drill-down .liunian-year > .liunian-age-label { white-space: nowrap; } .liunian-ganzhi-block, .drill-ganzhi-block { display: flex; flex-direction: column; gap: 0; align-items: center; justify-content: center; position: relative; min-width: 36px; z-index: 1; } /* source: /style_pan_dayun_grid_layout.css?v=3 */ /* 大运网格布局；长生角标行见 style_pan_dayun_grid_layout_phase.css */ .liunian-ganzhi-block .ganzhi-row+.ganzhi-row, .drill-ganzhi-block .ganzhi-row+.ganzhi-row { margin-top: -4px; } .drill-ganzhi-block .ganzhi-row, .liunian-ganzhi-block .ganzhi-row { display: flex; align-items: center; justify-content: flex-start; width: 100%; position: relative; min-height: 24px; padding-left: 10px; gap: 4px; } .drill-ganzhi-block .ganzhi-row span:first-child, .liunian-ganzhi-block .ganzhi-row span:first-child { font-size: 13px; font-weight: 700; position: static; left: auto; transform: none; } .drill-ganzhi-block .god-text, .liunian-ganzhi-block .god-text { position: static; left: auto; right: auto; top: auto; transform: none; font-size: 7px; color: var(--text-dim); font-weight: 700; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; max-width: none; overflow: visible; pointer-events: none; } .drill-ganzhi-block .god-text.changsheng-label, .liunian-ganzhi-block .god-text.changsheng-label { line-height: 1.0; } .drill-ganzhi-block .god-text.changsheng-label>div:not(.changsheng-phase-text), .liunian-ganzhi-block .god-text.changsheng-label>div:not(.changsheng-phase-text) { font-size: 7px; font-weight: 900; } .drill-ganzhi-block .god-text.changsheng-label .phase-main, .liunian-ganzhi-block .god-text.changsheng-label .phase-main { font-size: 9px; font-weight: 900; } .drill-ganzhi-block .god-text.changsheng-label .phase-sub, .liunian-ganzhi-block .god-text.changsheng-label .phase-sub { font-size: 6px; font-weight: 900; opacity: 0.75; margin-left: 1px; transform: translateY(1px); } .ganzhi-row { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 32px; } .ganzhi-row.subscript-mode { display: inline-flex; align-items: flex-end; justify-content: center; gap: 0px; line-height: 1; } /* source: /style_pan_dayun_grid_layout_phase.css?v=1 */ /* 大运/流年长生角标行；由 style_pan_dayun_grid_layout.css 拆出；须在其之后 */ .drill-ganzhi-block .ganzhi-row.subscript-mode, .liunian-ganzhi-block .ganzhi-row.subscript-mode { display: flex; align-items: center; justify-content: flex-start; padding-left: 10px; gap: 4px; } .drill-ganzhi-block .ganzhi-row.has-changsheng, .liunian-ganzhi-block .ganzhi-row.has-changsheng { min-height: 40px; } .ganzhi-row.subscript-mode .phase-main { font-size: 16px; font-weight: 800; line-height: 1; } .ganzhi-row.subscript-mode .phase-sub { font-size: 10px; color: #64748b; line-height: 1; margin-left: 1px; transform: translateY(2px); display: inline-block; font-weight: 800; } .ganzhi-row.below-mode { flex-direction: column; gap: 0px; } .drill-ganzhi-block .ganzhi-row.below-mode, .liunian-ganzhi-block .ganzhi-row.below-mode { min-height: 26px; align-items: flex-start; padding-left: 10px; } .drill-ganzhi-block .ganzhi-row.below-mode span:first-child, .liunian-ganzhi-block .ganzhi-row.below-mode span:first-child { position: static; left: auto; transform: none; } .ganzhi-row.below-mode .below-phase { margin-top: 0; color: #64748b; opacity: 0.85; line-height: 1; } .ganzhi-row.below-mode .below-phase .phase-main { font-size: 10px; font-weight: 800; } .ganzhi-row span:first-child { font-weight: 700; font-size: 15px; text-align: center; display: inline-block; z-index: 1; } .ganzhi-row .god-text { position: absolute; left: calc(50% + 10px); font-size: 9px; color: var(--text-dim); text-align: left; white-space: nowrap; display: inline-block; z-index: 2; pointer-events: none; } .ganzhi-row .god-text.changsheng-label { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.1; color: rgba(226, 232, 240, 0.9); } .ganzhi-row .god-text.changsheng-label .phase-main { font-size: 10px; font-weight: 900; } .ganzhi-row .god-text.changsheng-label .phase-sub { font-size: 7px; font-weight: 900; opacity: 0.75; } .liunian-grids-container { margin-top: 10px; } /* source: /style_pan_dayun_grid_layout_anim.css?v=1 */ /* 大运格网动画；由 style_pan_dayun_grid_layout.css 拆出；须在其之后、style_pan_piece.css 之前 */ /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Mobile Responsiveness */ .bazi-input-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; } /* 与粘贴逆序一致：视觉上时柱在左、年柱在右（DOM 仍为 年→月→日→时） */ #birth-mode-bazi .bazi-input-grid.bazi-input-grid--reverse-order { direction: rtl; } #birth-mode-bazi .bazi-input-grid.bazi-input-grid--reverse-order>.bazi-col { direction: ltr; } .bazi-col { display: flex; flex-direction: column; gap: 6px; } input.bazi-piece { width: 100% !important; text-align: center; font-size: 16px !important; font-weight: 800; padding: 8px 0 !important; border-radius: 8px !important; cursor: pointer; } /* source: /style_pan_piece.css?v=3 */ /* 四柱单字选字面板；五行着色见 style_pan_piece_colors.css；由 style_pan_table.css 拆出 */ /* 四柱单字：点击/聚焦弹出天干或地支面板（仍可键盘直输） */ .bazi-piece-picker { position: fixed; inset: 0; z-index: 950; pointer-events: none; } .bazi-piece-picker:not(.isHidden) { pointer-events: none; } .bazi-piece-picker__panel { position: fixed; z-index: 951; pointer-events: auto; min-width: 200px; max-width: min(92vw, 320px); padding: 10px 12px 12px; border-radius: 14px; border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.12)); background: var(--panel-bg); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); contain: layout style; } .bazi-piece-picker__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .bazi-piece-picker__grid--branch { grid-template-columns: repeat(6, 1fr); } .bazi-piece-picker__opt { appearance: none; margin: 0; display: inline-flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--card-hover); font-size: 17px; font-weight: 800; cursor: pointer; line-height: 1; transition: background 0.12s ease, border-color 0.12s ease; -webkit-tap-highlight-color: transparent; } .bazi-piece-picker__opt--hidden { display: none !important; } .bazi-piece-picker__opt:active { opacity: 0.92; } .bazi-piece-picker__opt:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.5); } .bazi-piece-picker__opt.isSelected { border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.12); } /* 学习盘选字：不选/清空本格 */ /* source: /style_pan_piece_empty.css?v=1 */ .bazi-piece-picker__opt--empty { grid-column: 1 / -1; aspect-ratio: auto; width: 100%; min-height: 36px; padding: 0 10px; font-size: 12px; font-weight: 800; color: rgba(186, 198, 220, 0.92); border-style: dashed; border-color: rgba(255, 255, 255, 0.14); background: var(--card-hover); border-radius: 8px; } #study-bazi-piece-picker { z-index: 1040; } #study-bazi-piece-picker .bazi-piece-picker__panel { z-index: 1041; } input.bazi-piece::placeholder { font-size: 11px; font-weight: 500; opacity: 0.5; } /* 暗色主题：空四柱格与库房干支筛选空单元格同理，提高白边与占位可读性 */ :root:not([data-theme="light"]) input.bazi-piece:not(.wood):not(.fire):not(.earth):not(.metal):not(.water), html:not([data-theme="light"]) input.bazi-piece:not(.wood):not(.fire):not(.earth):not(.metal):not(.water) { color: rgba(186, 198, 220, 0.5); border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.04); } :root:not([data-theme="light"]) input.bazi-piece:not(.wood):not(.fire):not(.earth):not(.metal):not(.water):hover, html:not([data-theme="light"]) input.bazi-piece:not(.wood):not(.fire):not(.earth):not(.metal):not(.water):hover { border-color: rgba(255, 255, 255, 0.48); color: rgba(186, 198, 220, 0.62); background: rgba(255, 255, 255, 0.06); } :root:not([data-theme="light"]) input.bazi-piece:not(.wood):not(.fire):not(.earth):not(.metal):not(.water):focus, html:not([data-theme="light"]) input.bazi-piece:not(.wood):not(.fire):not(.earth):not(.metal):not(.water):focus { border-color: rgba(255, 255, 255, 0.42); color: rgba(186, 198, 220, 0.58); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); } :root:not([data-theme="light"]) input.bazi-piece::placeholder, html:not([data-theme="light"]) input.bazi-piece::placeholder { color: rgba(186, 198, 220, 0.5); opacity: 1; } /* source: /style_pan_piece_colors.css?v=5 */ /* 四柱选字格五行着色；窄屏见 style_pan_piece_narrow.css */ /* * 已填格与选字按钮共用 .wood/.fire/.earth/.metal/.water 类色 * （深色：style_pan_table_colors.css；浅色：style_theme_light_base.css / style_theme_light_wx.css）。 * 此处用 currentColor 同步 caret / WebKit 填充色；勿再写第二套 hex。 * 浅色表单全局 input 色已在 style_store_note_light.css 排除 .bazi-piece； * 深色在 style.css 把 color 写成 input[type=text]:not(.bazi-piece)，否则会盖掉五行色。 */ .bazi-input-grid input.bazi-piece.wood, .bazi-input-grid input.bazi-piece.fire, .bazi-input-grid input.bazi-piece.earth, .bazi-input-grid input.bazi-piece.metal, .bazi-input-grid input.bazi-piece.water { caret-color: currentColor; -webkit-text-fill-color: currentColor; } /* source: /style_pan_piece_narrow.css?v=6 */ /* 四柱选字格窄屏通用；命盘表见 style_pan_piece_narrow_pan.css */ @media (max-width: 720px) { .page { padding: 20px 16px 60px; padding-bottom: calc(60px + var(--safe-bottom)); } .formGrid { grid-template-columns: 1fr; } .field.span2 { grid-column: span 1; } .glyph { font-size: 32px; } th, td { padding: 10px 8px; } .brandTitle { font-size: 26px; } .actions { flex-wrap: wrap; justify-content: center; gap: 10px 12px; align-items: stretch; } .actions .hint { padding: 0 4px; font-size: 11px; } /* 排盘 / 批断：同宽并排、整块在屏内居中，易点按 */ .actions .primary, .actions .actionBtn { flex: 1 1 calc(50% - 6px); min-width: 0; max-width: calc(50% - 6px); min-height: 44px; height: 44px; padding: 0 10px; box-sizing: border-box; line-height: 1.2; } /* 出生区：底部仅排盘主钮占满 */ #tab-birth .actions.birth-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: stretch; } #tab-birth .actions.birth-actions button.primary { flex: 1 1 100%; max-width: 100%; min-width: 0; min-height: 44px; height: 44px; padding: 0 16px; } #tab-birth .actions>button.primary:only-of-type, #tab-birth .actions>button.actionBtn:only-of-type { flex: 1 1 100%; max-width: 100%; } #app-view-study #study-pan-preview .studyPanNoteView__saveBar > .studyPanNoteView__saveBtn:only-child { flex: 1 1 100%; max-width: 100%; } .panNoteHead { flex-wrap: wrap; } .panNoteHead .panNoteMeta { flex: 1 1 auto; min-width: 0; word-break: break-word; } .panNoteHeadActions { margin-left: 0; gap: 6px; } textarea { min-height: 84px; } .tabBody { padding: 16px 14px; } } /* source: /style_pan_piece_narrow_dayun.css?v=1 */ /* 由 style_pan_piece_narrow.css 拆出；须在其之后 */ @media (max-width: 720px) { /* 手机：区块贴边；格网本身为 6 列自适应，条目极多时可横向滑看 */ .dayun-section, .drill-section { max-width: 100%; margin: 6px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } #pan .drill-title { font-size: 12px; margin-bottom: 6px; } #pan .drill-title:not(.drill-title--collapsible) { padding-left: 6px; } /* 可折叠标题：不受上一段 padding/边线影响，避免叠出「按钮边」 */ #pan .drill-title.drill-title--collapsible { margin-bottom: 4px; padding: 14px 10px 14px 2px; min-height: 48px; border: none; font-weight: 700; } .liunian-item, .drill-item, .dayun-item { min-height: 56px; padding: 2px 1px; } .pillar-gz-char { font-size: 13px; } .liunian-year, .drill-desc { font-size: 7px; min-height: 20px; margin-bottom: 0; gap: 1px; row-gap: 1px; } .liunian-ganzhi-block .ganzhi-row+.ganzhi-row, .drill-ganzhi-block .ganzhi-row+.ganzhi-row { margin-top: -5px; } .liunian-ganzhi-block .ganzhi-row, .drill-ganzhi-block .ganzhi-row { min-height: 20px; padding-left: 4px; gap: 2px; } .liunian-ganzhi-block .ganzhi-row.has-changsheng, .drill-ganzhi-block .ganzhi-row.has-changsheng { min-height: 32px; } .liunian-ganzhi-block .ganzhi-row.below-mode, .drill-ganzhi-block .ganzhi-row.below-mode { min-height: 22px; } .liunian-ganzhi-block .ganzhi-row span:first-child, .drill-ganzhi-block .ganzhi-row span:first-child { font-size: 12px; } } /* source: /style_pan_piece_narrow_pan.css?v=3 */ /* 窄屏学习盘工具钮；时柱表头见 style_pan_piece_narrow_pan_hour.css */ @media (max-width: 720px) { /* 手机：原局四柱表格压缩，尽量收紧列间距把宽度留给单元格内容 */ #pan .card { padding: 12px 6px; margin-bottom: 20px; } #pan .card .pan-card-toolbar { margin-bottom: 10px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; width: 100%; } /* 齿轮/批断/复制/导出 多时允许折行，避免极窄屏横向溢出 */ #pan .card .pan-card-toolbar-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; width: 100%; max-width: 100%; } #pan .card .pan-cs-toolbar-panel:not(:empty), #study-pan-preview .card .pan-cs-toolbar-panel:not(:empty) { flex: 1 1 100%; max-width: 100%; min-width: 0; font-size: 11px; line-height: 1.38; --pan-cs-dismiss-size: clamp(22px, 2.15em, 28px); } #pan .card .pan-cs-toolbar-panel:not(:empty) .changsheng-phase-text .phase-sub, #study-pan-preview .card .pan-cs-toolbar-panel:not(:empty) .changsheng-phase-text .phase-sub { font-size: 0.92em; transform: none; margin-left: 0; } #pan .card .pan-cs-toolbar-panel:not(:empty) .changsheng-phase-text .phase-main, #study-pan-preview .card .pan-cs-toolbar-panel:not(:empty) .changsheng-phase-text .phase-main { font-size: 1em; } #pan .card .pan-cs-toolbar-panel:not(:empty) .changsheng-phase-sub-col .phase-mark-num, #study-pan-preview .card .pan-cs-toolbar-panel:not(:empty) .changsheng-phase-sub-col .phase-mark-num { font-size: 0.85em; } #pan .card .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll, #study-pan-preview .card .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll { max-width: calc(100% - var(--pan-cs-dismiss-size) - 12px); } #pan .card .pan-card-action { flex: 0 0 auto; width: 40px; min-width: 40px; min-height: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } #pan .card .pan-card-action svg { width: 18px; height: 18px; } /* 学习盘（手机）：工具按钮按可用宽度自适应压缩，避免横向溢出 */ #pan .card .bazi-table tbody tr:first-child td { padding-bottom: 0; } #pan .card .bazi-table tbody tr:nth-child(2) td { padding-top: 0; } #pan .card .bazi-table tbody tr:nth-child(3) td { padding-top: 5px; } #pan .card .bazi-table th { font-size: 9px; letter-spacing: 0.06em; height: auto; min-height: 32px; line-height: 1.2; padding: 5px 1px 3px; word-break: keep-all; vertical-align: middle; } #pan .card .glyph { font-size: 22px; width: 30px; height: 30px; } #pan .card .glyph span { font-size: inherit; } } /* source: /style_pan_piece_narrow_pan_hour.css?v=4 */ /* 窄屏命盘时柱表头与藏干；由 style_pan_piece_narrow_pan.css 拆出；须在其之后、style_pan_compact.css 之前 */ @media (max-width: 720px) { /* 时柱表头：单行胶囊，字阶与邻列 th 一致，控制钮略缩小省高 */ #pan .card .bazi-table thead th.th-hour-nav { padding: 4px 1px 3px; min-height: 0; } /* 与桌面同选择器，保证覆盖 gap/padding（勿仅用 #pan .card .hour-ctrl，优先级低于 thead th） */ #pan .card .bazi-table thead th .hour-ctrl-wrap { gap: 2px; } #pan .card .bazi-table thead th .hour-ctrl-linked-save { height: 15px; min-width: 15px; padding: 0 1px; border-radius: 50%; background: transparent; } #pan .card .bazi-table thead th .hour-ctrl-linked-save:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); } #pan .card .bazi-table thead th .hour-ctrl-linked-save__inner { gap: 0; } #pan .card .bazi-table thead th .hour-ctrl-linked-save--icon-only .hour-ctrl-linked-save__icon { width: 10px; height: 10px; } #pan .card .bazi-table thead th .hour-ctrl { gap: 1px; padding: 0; border-radius: 0; background: transparent; border: none; } #pan .card .bazi-table thead th .hour-ctrl .hour-ctrl-icon { width: 10px; height: 10px; } #pan .card.pan-display-card .bazi-table thead th .hour-ctrl .hour-nav, #pan .card.pan-display-card .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] .pan-hour-branch-nav { width: var(--pan-hour-nav-size); height: var(--pan-hour-nav-size); min-width: var(--pan-hour-nav-size); border-radius: 50%; background: transparent; -webkit-tap-highlight-color: transparent; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card .hour-nav svg { width: var(--pan-hour-nav-svg); height: var(--pan-hour-nav-svg); } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card:not(.pan-display-card) .hour-nav svg { width: 16px; height: 16px; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card .hour-nav:active { background: rgba(255, 255, 255, 0.12); } } /* source: /style_pan_piece_narrow_pan_hour_hidden.css?v=4 */ /* 由 style_pan_piece_narrow_pan_hour.css 拆出；须在其之后 */ @media (max-width: 720px) { /* 窄屏藏干：保留分层小标题（易读字号），避免只见干不见「本气」等层名 */ #pan .card .hiddenPart__label { display: block; font-size: 7px; letter-spacing: 0.07em; line-height: 1.15; padding: 0 0 1px; } #pan .card .hiddenItemsRow { flex-wrap: wrap; justify-content: center; gap: 2px 4px; } #pan .card .hiddenItem { padding: 1px; min-width: 0; } #pan .card .hiddenGlyph--renyuan-siling, .learnPanDisplaySlot .pan-display-card .hiddenGlyph--renyuan-siling { border-radius: 6px; background: transparent; box-shadow: none; } #pan .card .hiddenGlyph--renyuan-siling::before, .learnPanDisplaySlot .pan-display-card .hiddenGlyph--renyuan-siling::before { content: "司"; position: absolute; right: -2px; bottom: -2px; min-width: 10px; height: 10px; padding: 0; border-radius: 2px; background: var(--accent); color: var(--bg-dark, #0a0a0a); font-size: 8px; font-weight: 900; line-height: 10px; text-align: center; pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); z-index: 2; } #pan .card .hiddenGlyph-char--renyuan-siling, .learnPanDisplaySlot .pan-display-card .hiddenGlyph-char--renyuan-siling { text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.75); text-underline-offset: 2px; font-weight: inherit; } #pan .card .hiddenGlyph span { font-size: 11px; } #pan .card .hiddenItem .god-text.changsheng-label .phase-main { font-size: 7px; line-height: 1; } /* 命例库命中行：窄屏允许副行换行，避免 .sub 与主行抢宽、56%/60% 上限下几乎不可读 */ .searchHit { flex-wrap: wrap; align-items: flex-start; row-gap: 4px; } /* 命例库命中行栅格见 .storePanelResult / #store-panel-result 规则，窄视口不再用 flex 以免各行列宽不齐 */ .searchHit .sub { flex: 1 1 100%; max-width: 100%; margin-left: 0; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.35; } /* 运程列展开：勿沿用上方 #pan .card .glyph 22px，与 max-width:900 运程紧凑规则一致 */ :is(#pan, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .glyph { font-size: clamp(14px, 3.8vw, 22px); width: 1em; height: 1em; } :is(#pan, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table th { font-size: clamp(8px, 1.9vw, 10.5px); } } /* source: /style_pan_compact.css?v=8 */ /* 命盘紧凑卡列宽前半；时柱见 style_pan_compact_hour.css */ /* iPad 竖屏、分屏等（721–900px）：非命盘主表仍可用横滑避免裁切；命盘展示卡用等比缩放 */ @media (min-width: 721px) and (max-width: 900px) { #pan .card:not(.pan-display-card) .table-container { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } #pan .card:not(.pan-display-card) .bazi-table { width: max-content; min-width: 100%; max-width: none; table-layout: fixed; margin: 0 auto; } #pan .card:not(.pan-display-card) .bazi-table th, #pan .card:not(.pan-display-card) .bazi-table td { min-width: 96px; width: 96px; max-width: none; box-sizing: border-box; } } /* * 命盘主展示卡（.pan-display-card + .pan-mobile-compact-cells）：≤900px 含手机与 iPad 竖屏。 * 表按自然列宽排版，由 JS fitPanDisplayScale 等比缩放；此处仅收紧字距与旁注布局。 */ @media (max-width: 900px) { #pan .card.pan-display-card.pan-mobile-compact-cells .table-container, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .table-container, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .table-container { overflow-x: hidden; overflow-y: visible; padding-bottom: 4px; } #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table tbody tr:first-child td.pan-pillar-td, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table tbody tr:first-child td.pan-pillar-td, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table tbody tr:first-child td.pan-pillar-td { overflow: visible; vertical-align: top; } #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table { width: max-content; min-width: 0; max-width: none; table-layout: auto; margin: 0 auto; } #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table th, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table th, #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table td, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table td, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table th, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table td { min-width: 0; /* width:0 让列按内容最小宽度收缩；width:1% 会均分列宽造成大量内边空隙 */ width: 0; padding: 3px 0; box-sizing: border-box; } /* 列宽随内容收缩，去掉旁注 min-width 对列宽的撑开 */ #pan .card.pan-display-card.pan-mobile-compact-cells .stem-container .god-text, #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container .god-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .stem-container .god-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .branch-container .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .stem-container .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container .god-text { min-width: 0; } /* 表头年/月/日/时同一字阶；运程展开时由下方 .pan-table--drill .bazi-table th 再压一档 */ #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th { font-size: clamp(8px, 2vw, 11px); letter-spacing: 0.06em; line-height: 1.2; } } /* source: /style_pan_compact_hour.css?v=9 */ /* 命盘紧凑卡时柱/drill 列；由 style_pan_compact.css 拆出；须在其之后、style_pan_compact_aside.css 之前 */ @media (max-width: 900px) { /* 手机端时柱地支行：箭头用 em 随地支字号缩放（fitPanDisplayScale zoom 时与大字同步） */ #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"], #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"], .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] { --pan-hour-nav-size: 0.68em; --pan-hour-nav-svg: 0.5em; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap { gap: 6px; width: auto; max-width: 100%; margin-inline: auto; } /* 紧凑卡 branch glyph 常用 margin-inline:auto 居中；在 nav-wrap 内必须清零，否则箭头被顶到列边 */ #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper { margin-inline: 0; } /* 手机端时柱头：有写回按钮时保持单行并垂直居中 */ #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl-wrap, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl-wrap { flex-wrap: nowrap; align-content: center; row-gap: 0; } #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl { flex: 0 1 auto; } #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl-linked-save, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl-linked-save { flex: 0 0 auto; align-self: center; } /* 窄屏表头时辰胶囊（屏上 thead 隐藏，主要服务导出快照） */ #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th.th-hour-nav, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th.th-hour-nav, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table thead th.th-hour-nav { --pan-hour-nav-size: clamp(11px, 2.8vw, 15px); --pan-hour-nav-svg: clamp(7px, 2.1vw, 10px); --pan-hour-slot-inset: clamp(3px, 0.85vw, 6px); } /* * 原局初始态（未展开大运/流年）：四柱均分铺满容器，列宽较内容收缩更宽裕。 * 展开运程后由下方 .pan-table--drill 规则按列数自适应等分。 */ #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .table-container-inner, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .table-container-inner, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .table-container-inner { width: 100%; max-width: 100%; display: block; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .bazi-table, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .bazi-table, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .bazi-table { --pan-pillar-col-count: 4; --pan-pillar-col-floor: clamp(56px, 16.5vw, 96px); width: 100% !important; min-width: calc(var(--pan-pillar-col-count) * var(--pan-pillar-col-floor)) !important; table-layout: fixed !important; max-width: none; margin-inline: auto; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .bazi-table th:not(.isHidden), #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .bazi-table td:not(.isHidden), #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .bazi-table th:not(.isHidden), #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .bazi-table td:not(.isHidden), .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .bazi-table th:not(.isHidden), .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .bazi-table td:not(.isHidden) { width: calc(100% / var(--pan-pillar-col-count, 4)) !important; min-width: 0 !important; max-width: none; box-sizing: border-box; overflow: visible; } } /* source: /style_pan_compact_hour_layout.css?v=8 */ /* 由 style_pan_compact_hour.css 拆出；须在其之后 */ @media (max-width: 900px) { /* 运程 drill：时柱列宽略留旁注与 ← → */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:first-child td.pan-hour-pillar-td, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:first-child td.pan-hour-pillar-td, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:first-child td.pan-hour-pillar-td { padding-inline-end: clamp(4px, 1vw, 8px); } /* * 运程展开（drill）：表铺满容器，原局四柱 + 运程列等分列宽，避免原局过窄、运程列两侧留白过多。 */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .table-container-inner, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .table-container-inner, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .table-container-inner { width: 100%; max-width: 100%; display: block; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table { --pan-drill-col-floor: max(var(--pan-drill-flow-col-min, 68px), clamp(44px, 11vw, 72px)); width: max(100%, calc(var(--pan-drill-total-cols, 5) * var(--pan-drill-col-floor))) !important; min-width: calc(var(--pan-drill-total-cols, 5) * var(--pan-drill-col-floor)) !important; table-layout: fixed !important; max-width: none; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table th:not(.isHidden), #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td:not(.isHidden), #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table th:not(.isHidden), #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td:not(.isHidden), .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table th:not(.isHidden), .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td:not(.isHidden) { width: calc(100% / var(--pan-drill-total-cols, 5)) !important; min-width: var(--pan-drill-col-floor) !important; max-width: none; padding: 2px 0; box-sizing: border-box; overflow: visible; } /* 柱内布局：天干/地支共用列宽 100%，大字沿列中轴对齐 */ #pan .card.pan-display-card.pan-mobile-compact-cells .stem-container, #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .stem-container, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .branch-container, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .stem-container, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container { width: 100%; max-width: 100%; margin-inline: auto; } /* 天干/地支大字共用 1em 列中轴；时柱地支在 nav-wrap 内时除外（见下方） */ #pan .card.pan-display-card.pan-mobile-compact-cells .stem-container .glyph-wrapper, #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container > .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .branch-container > .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .stem-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container > .glyph-wrapper { width: 1em; margin-inline: auto; justify-content: center; } /* 时柱：天干与地支共用列中轴；nav-wrap 内地支勿再 margin:auto（会撑开 ← →） */ #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table td[data-pillar="hour"] .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table td[data-pillar="hour"] .stem-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table td[data-pillar="hour"] .stem-container .glyph-wrapper { margin-inline: auto; left: auto; right: auto; } #pan .card.pan-display-card.pan-mobile-compact-cells .bazi-table td[data-pillar="hour"] .pan-hour-branch-nav-wrap .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .bazi-table td[data-pillar="hour"] .pan-hour-branch-nav-wrap .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .bazi-table td[data-pillar="hour"] .pan-hour-branch-nav-wrap .glyph-wrapper { margin-inline: 0; left: auto; right: auto; } #pan .card.pan-display-card.pan-mobile-compact-cells .glyph, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .glyph, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .glyph { font-size: var(--pan-stem-glyph-size); width: 1em; height: 1em; } } /* source: /style_pan_compact_aside.css?v=5 */ /* 命盘紧凑卡侧栏/运程列；多列收紧见 style_pan_compact_aside_cols.css；分数见 aside_score */ @media (max-width: 900px) { /* 天干旁注：列中轴 + 天干半宽偏移（时柱旁注在 .pan-hour-stem-aside 内，勿匹配） */ #pan .card.pan-display-card.pan-mobile-compact-cells .stem-container > .god-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .stem-container > .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .stem-container > .god-text { left: var(--pan-stem-god-left); top: 50%; transform: translateY(-50%); } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-stem-aside .god-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-stem-aside .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-stem-aside .god-text { position: static; left: auto; top: auto; transform: none; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-pillar-td .stem-container .pan-hour-stem-aside, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-pillar-td .stem-container .pan-hour-stem-aside, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-pillar-td .stem-container .pan-hour-stem-aside { left: var(--pan-hour-stem-god-left); } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav { width: var(--pan-hour-nav-size); height: var(--pan-hour-nav-size); min-width: var(--pan-hour-nav-size); min-height: var(--pan-hour-nav-size); } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav svg, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav svg { width: var(--pan-hour-nav-svg); height: var(--pan-hour-nav-svg); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .hiddenList, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .hiddenList, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .hiddenList { width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } } /* source: /style_pan_compact_aside_drill.css?v=3 */ /* 由 style_pan_compact_aside.css 拆出；须在其之后 */ @media (max-width: 900px) { #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .hiddenItemsRow, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .hiddenItemsRow, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .hiddenItemsRow { width: 100%; min-width: 100%; box-sizing: border-box; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .hiddenItemsRow > .hiddenItem:only-child, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .hiddenItemsRow > .hiddenItem:only-child, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .hiddenItemsRow > .hiddenItem:only-child { width: 100%; justify-content: center; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-shen-sha-item, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-shen-sha-item, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-shen-sha-item { white-space: normal; word-break: keep-all; line-height: 1.25; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .glyph, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .glyph, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .glyph { font-size: clamp(16px, 4vw, 22px); width: 1em; height: 1em; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph-wrapper { width: 1em; min-height: clamp(22px, 6.5vw, 32px); margin-inline: auto; } } /* source: /style_pan_compact_aside_cols.css?v=3 */ /* 紧凑卡 3+ 运程列收紧；由 style_pan_compact_aside.css 拆出；须在其之后、aside_score 之前 */ @media (max-width: 900px) { /* * 3+ 运程列时原局与运程共用同一套格高（字号已由 --pan-drill-glyph-* 统一缩小）。 * 只压运程列会让同一行天干/地支错位。 */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] .stem-container .glyph-wrapper, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] .stem-container .glyph-wrapper, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] .stem-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] .stem-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] .stem-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] .stem-container .glyph-wrapper { min-height: clamp(16px, 3.8vw, 22px); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph-wrapper:has(.pan-stem-strength-score), #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph-wrapper:has(.pan-stem-strength-score), .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph-wrapper:has(.pan-stem-strength-score) { min-height: clamp(22px, 6.5vw, 32px); padding-top: clamp(8px, 2.4vw, 12px); } } /* source: /style_pan_compact_aside_score.css?v=2 */ /* 命盘紧凑卡天干强弱分数；由 style_pan_compact_aside.css 拆出；须在其之后、style_pan_compact_drill.css 之前 */ @media (max-width: 900px) { /* 天干强弱分数：勿用 translateY(-100%) 顶出格被裁；顶内留白 + 顶对齐（仅未展开运程时作用于原局柱） */ #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .glyph-wrapper { padding-top: clamp(8px, 2.2vw, 12px); box-sizing: border-box; overflow: visible; } #pan .card.pan-display-card.pan-mobile-compact-cells .stem-container .pan-stem-strength-score, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .stem-container .pan-stem-strength-score, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .stem-container .pan-stem-strength-score { top: 1px; transform: translateX(-50%); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text { left: 50%; top: 0; transform: none; right: 0; padding-left: calc(clamp(var(--pan-drill-glyph-min), var(--pan-drill-glyph-vw), var(--pan-drill-glyph-max)) * 0.48 + 1px); min-width: 0; max-width: 100%; box-sizing: border-box; font-size: clamp(7px, 1.85vw, 9.5px); overflow: hidden; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text .changsheng-phase-inner, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text .changsheng-phase-inner, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text .changsheng-phase-inner { flex-shrink: 1; min-width: 0; max-width: 100%; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text .changsheng-phase-sub-col, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text .changsheng-phase-sub-col, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text .changsheng-phase-sub-col { flex-shrink: 1; min-width: 0; } } /* source: /style_pan_compact_drill.css?v=4 */ /* 命盘紧凑卡运程展开前半；时柱标题见 style_pan_compact_drill_titles.css；藏干见 style_pan_compact_drill_hidden.css */ @media (max-width: 900px) { /* 运程展开：时柱旁注顶对齐，且勿被下方 drill 通用 .god-text 规则改回 absolute 居中 */ :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-hour-pillar-td .stem-container .pan-hour-stem-aside { top: 0; transform: none; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-hour-stem-aside .god-text { position: static; top: auto; left: auto; transform: none; } /* 运程展开时为 stem-container 加上边距，避免十神/长生文字紧贴 cell 上沿 */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container { padding-top: clamp(2px, 0.6vw, 4px); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label>div:not(.changsheng-phase-text), #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label>div:not(.changsheng-phase-text), .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label>div:not(.changsheng-phase-text) { font-size: clamp(8px, 2.05vw, 10px); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-main, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-main, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-main { font-size: clamp(9px, 2.35vw, 11.5px); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-sub, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-sub, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-sub { font-size: clamp(6px, 1.6vw, 8px); margin-left: 1px; transform: translateY(2px); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub { margin-left: 0; transform: none; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .glyph-wrapper { width: 1em; min-height: clamp(26px, 6.5vw, 34px); margin-inline: auto; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .self-sitting-phase .phase-main, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .self-sitting-phase .phase-main, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .self-sitting-phase .phase-main { font-size: clamp(7px, 1.9vw, 9px); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph { width: clamp(12px, 3.2vw, 18px); height: clamp(14px, 3.6vw, 20px); flex-shrink: 0; padding-top: clamp(6px, 1.8vw, 9px); box-sizing: border-box; min-height: clamp(20px, 5.5vw, 26px); overflow: visible; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .pan-stem-strength-score, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .pan-stem-strength-score, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .pan-stem-strength-score { top: 1px; transform: translateX(-50%); font-size: clamp(5px, 1.45vw, 7px); font-weight: 700; line-height: 1; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph .pan-stem-strength-score, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph .pan-stem-strength-score--hidden, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph .pan-stem-strength-score, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph .pan-stem-strength-score--hidden { top: 1px; transform: translateX(-50%); font-size: clamp(5px, 1.45vw, 7px); font-weight: 700; line-height: 1; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph span, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph span { font-size: clamp(9px, 2.2vw, 12px); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenItem, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenItem { gap: 2px; } } /* source: /style_pan_compact_drill_cols.css?v=2 */ /* 由 style_pan_compact_drill.css 拆出；须在其之后 */ @media (max-width: 900px) { /* * 3+运程列时进一步收紧藏干，并统一所有 hiddenPart 纵向堆叠，确保 glyph 垂直对齐。 */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] .hiddenGlyph, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] .hiddenGlyph, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] .hiddenGlyph, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] .hiddenGlyph, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] .hiddenGlyph, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] .hiddenGlyph { width: auto; height: auto; min-height: 0; padding-top: clamp(6px, 1.4vw, 9px); flex-shrink: 0; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] .hiddenItemsRow, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] .hiddenItemsRow, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] .hiddenItemsRow, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] .hiddenItemsRow, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] .hiddenItemsRow, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] .hiddenItemsRow { flex-direction: column; row-gap: clamp(2px, 0.45vw, 4px); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] .hiddenItemsRow .hiddenItem, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] .hiddenItemsRow .hiddenItem, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] .hiddenItemsRow .hiddenItem, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] .hiddenItemsRow .hiddenItem, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] .hiddenItemsRow .hiddenItem, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] .hiddenItemsRow .hiddenItem { flex: none; width: 100%; gap: 1px; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table th, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table th { font-size: clamp(8px, 1.9vw, 10.5px); letter-spacing: 0.01em; padding: 2px 0 1px; min-height: 22px; } } /* source: /style_pan_compact_drill_titles.css?v=2 */ /* 命盘紧凑卡运程时柱标题尺寸；由 style_pan_compact_drill.css 拆出；须在其之后、drill_hidden 之前 */ @media (max-width: 900px) { /* 运程展开：时柱 ‹ 时柱 › 与邻列 th 同比例缩小（覆盖 ≤720px 固定 24px/15px），避免窄列撑破 */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th.th-hour-nav, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th.th-hour-nav { padding: 2px 0 1px; min-height: 0; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl-wrap { gap: clamp(2px, 0.55vw, 4px); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl { gap: 1px; padding: 0; } /* 运程展开时柱 ± 尺寸见下方 data-pan-drill-col-count 变量块 */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl-linked-save, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl-linked-save { height: 15px; min-width: 15px; padding: 0 1px; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl-linked-save--icon-only .hour-ctrl-linked-save__icon, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl-linked-save--icon-only .hour-ctrl-linked-save__icon { width: 10px; height: 10px; } /* * 运程模式藏干：本气/库气层内多项可纵向叠；余气层内多项改横向一排（丙戊并列）。 * 每项「干 + 十神长生」在格内水平居中；略增层距与行高减轻上下叠字重叠。 */ #pan .card.pan-display-card.pan-table--drill .hiddenList, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill .hiddenList { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; align-items: stretch; gap: 4px; padding: 2px 0; } #pan .card.pan-display-card.pan-table--drill .hiddenPart, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill .hiddenPart { gap: 4px; padding: 2px 0 4px; } #pan .card.pan-display-card.pan-table--drill .hiddenItemsRow, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill .hiddenItemsRow { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 4px 6px; row-gap: 8px; width: 100%; } } /* source: /style_pan_compact_drill_hidden.css?v=3 */ /* 命盘紧凑卡运程藏干/余气；叠放见 style_pan_compact_drill_stack.css */ @media (max-width: 900px) { /* 余气：同一层内多个天干横向排列 */ #pan .card.pan-display-card.pan-table--drill .hiddenPart--residual .hiddenItemsRow, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill .hiddenPart--residual .hiddenItemsRow { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; row-gap: 6px; column-gap: 4px; } #pan .card.pan-display-card.pan-table--drill .hiddenItem, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill .hiddenItem { flex-direction: row; align-items: center; justify-content: center; gap: 4px; width: auto; max-width: 100%; } #pan .card.pan-display-card.pan-table--drill .hiddenItem .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill .hiddenItem .god-text { white-space: nowrap; align-items: center; text-align: left; } #pan .card.pan-display-card.pan-table--drill .hiddenItem .god-text.changsheng-label, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill .hiddenItem .god-text.changsheng-label { margin-top: 2px; line-height: 1.35; } #pan .card.pan-display-card.pan-table--drill .hiddenItem .god-text.changsheng-label .changsheng-phase-text, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill .hiddenItem .god-text.changsheng-label .changsheng-phase-text { justify-content: flex-start; flex-wrap: nowrap; } #pan .card.pan-display-card.pan-table--drill .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-table--drill .stem-container .glyph-wrapper { padding-top: 12px; box-sizing: border-box; overflow: visible; } #pan .card.pan-display-card.pan-table--drill .stem-container .pan-stem-strength-score, #study-pan-preview .card.pan-display-card.pan-table--drill .stem-container .pan-stem-strength-score { top: 2px; transform: translateX(-50%); font-size: 7px; font-weight: 700; line-height: 1; } #pan .card.pan-display-card.pan-table--drill .hiddenGlyph, #study-pan-preview .card.pan-display-card.pan-table--drill .hiddenGlyph { width: 22px; height: 24px; flex-shrink: 0; /* 与天干格一致：为顶部分数留出空间，避免 translate 顶出格被裁 */ padding-top: 12px; box-sizing: border-box; min-height: 30px; overflow: visible; } #pan .card.pan-display-card.pan-table--drill .hiddenGlyph .pan-stem-strength-score, #pan .card.pan-display-card.pan-table--drill .hiddenGlyph .pan-stem-strength-score--hidden, #study-pan-preview .card.pan-display-card.pan-table--drill .hiddenGlyph .pan-stem-strength-score, #study-pan-preview .card.pan-display-card.pan-table--drill .hiddenGlyph .pan-stem-strength-score--hidden { top: 2px; transform: translateX(-50%); font-size: 7px; font-weight: 700; line-height: 1; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph span, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .hiddenGlyph span { font-size: clamp(9px, 2.2vw, 12px); } } /* source: /style_pan_compact_drill_stack.css?v=4 */ /* 紧凑卡地支自坐叠放；藏干长生见 style_pan_compact_drill_stack_hidden.css */ @media (max-width: 900px) { /* * 原局与运程：地支与自坐纵向叠放；天干格内十神+长生「列中轴 + 右侧竖排」（勿改为大字下方居中）。 */ #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container { display: block; position: relative; min-height: 40px; min-width: calc(var(--pan-stem-glyph-size) * 1.65 + 14px); padding: 1px 0; overflow: visible; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill):not(.pan-pref--hide-ten-god) .stem-container, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill):not(.pan-pref--hide-ten-god) .stem-container, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill):not(.pan-pref--hide-ten-god) .stem-container { padding-top: clamp(3px, 0.7vw, 5px); } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .glyph-wrapper { position: relative; width: 1em; min-height: 40px; height: auto; margin: 0 auto; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .glyph, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .glyph, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 3px)); } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container > .god-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container > .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container > .god-text { position: absolute; left: var(--pan-stem-god-left); top: 50%; transform: translateY(-50%); right: auto; max-width: none; min-width: 0; align-items: flex-start; text-align: left; font-size: 8px; line-height: 1.2; box-sizing: border-box; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .pan-hour-stem-aside .god-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .pan-hour-stem-aside .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .pan-hour-stem-aside .god-text { position: static; left: auto; top: auto; transform: none; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .pan-hour-pillar-td .stem-container .pan-hour-stem-aside, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .pan-hour-pillar-td .stem-container .pan-hour-stem-aside, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .pan-hour-pillar-td .stem-container .pan-hour-stem-aside { left: var(--pan-hour-stem-god-left); } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label>div:not(.changsheng-phase-text), #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label>div:not(.changsheng-phase-text), .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label>div:not(.changsheng-phase-text) { font-size: 9px; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .changsheng-phase-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .changsheng-phase-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .changsheng-phase-text { align-self: flex-start; display: flex; align-items: flex-end; flex-wrap: nowrap; white-space: nowrap; line-height: 1.2; gap: 1px; margin-top: 0; width: 100%; max-width: 100%; box-sizing: border-box; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .phase-main, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .phase-main, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .phase-main { font-size: 10px; line-height: 1; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .phase-sub, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .phase-sub, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .phase-sub { font-size: 7px; line-height: 1; margin-left: 2px; transform: translateY(2px); display: inline-block; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub { margin-left: 0; transform: none; display: inline-block; } } /* source: /style_pan_compact_drill_stack_hidden.css?v=6 */ /* 紧凑卡藏干长生叠放；由 style_pan_compact_drill_stack.css 拆出；须在其之后、style_pan_compact_toolbar.css 之前 */ @media (max-width: 900px) { #pan .card.pan-display-card.pan-mobile-compact-cells .hiddenItem .god-text.changsheng-label .phase-main, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .hiddenItem .god-text.changsheng-label .phase-main { font-size: clamp(8px, 2.1vw, 9px); line-height: 1; } #pan .card.pan-display-card.pan-mobile-compact-cells .hiddenItem .god-text.changsheng-label .changsheng-phase-sub-col .phase-mark-num, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .hiddenItem .god-text.changsheng-label .changsheng-phase-sub-col .phase-mark-num { font-size: clamp(5px, 1.4vw, 6.5px); } #pan .card.pan-display-card.pan-mobile-compact-cells .hiddenItem .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .hiddenItem .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub { font-size: clamp(6px, 1.65vw, 7px); } #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; min-height: 0; padding: 2px 0 4px; } #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .branch-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container .glyph-wrapper { position: relative; width: 1em; min-height: 46px; height: auto; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } /* nav-wrap 内覆盖：勿 auto 边距，箭头须贴「未」 */ #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap > .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap > .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap > .glyph-wrapper { margin-inline: 0; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap { align-items: flex-start; width: auto; max-width: 100%; margin-inline: auto; gap: 6px; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper { position: relative; width: 1em; /* 与相邻地支共用同一主字行高，不能随「← 戌 →」控件的内容高度收缩。 */ min-height: 46px; height: auto; margin-inline: 0; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .pan-hour-branch-nav, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .pan-hour-branch-nav, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .pan-hour-branch-nav { /* 按主字（1em）居中，而不是按 46px 的整列高度居中。 */ align-self: flex-start; margin-top: calc((1em - var(--pan-hour-nav-size, 0.68em)) / 2); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"], #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"], .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] { --pan-hour-nav-size: 0.6em; --pan-hour-nav-svg: 0.44em; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .glyph, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .glyph, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .glyph { position: static; left: auto; top: auto; transform: none; width: 1em; height: 1em; flex-shrink: 0; } } /* source: /style_pan_compact_drill_stack_hidden_learn.css?v=4 */ /* 学习槽覆盖；由 style_pan_compact_drill_stack_hidden.css 拆出；须在其之后 */ @media (max-width: 900px) { .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .glyph { position: static; transform: none; left: auto; top: auto; width: 1em; height: 1em; flex-shrink: 0; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .glyph:hover, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .glyph:hover, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .glyph:hover { transform: none; opacity: 0.92; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .self-sitting-phase, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .self-sitting-phase, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .self-sitting-phase { position: absolute; /* 与 .glyph 盒高一致；勿 top:100%（min-height）或 wrapper 的 1em（字号更小） */ top: var(--pan-stem-glyph-size, 1em); left: 50%; transform: translateX(-50%); margin-top: 2px; justify-content: center; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .pan-kong-wang-phase, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .pan-kong-wang-phase, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .pan-kong-wang-phase { position: absolute; top: var(--pan-stem-glyph-size, 1em); left: 50%; transform: translateX(-50%); margin-top: 1px; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .self-sitting-phase + .pan-kong-wang-phase, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .self-sitting-phase + .pan-kong-wang-phase, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper .self-sitting-phase + .pan-kong-wang-phase { top: calc(var(--pan-stem-glyph-size, 1em) + 12px); } #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container .glyph, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container .glyph { position: static; transform: none; left: auto; top: auto; flex-shrink: 0; } #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container .glyph:hover, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .branch-container .glyph:hover, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container .glyph:hover { transform: none; opacity: 0.92; } #pan .card.pan-display-card.pan-mobile-compact-cells .stem-container .glyph:hover, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .stem-container .glyph:hover, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .stem-container .glyph:hover { transform: translate(-50%, calc(-50% + 3px)) scale(1.02); } #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container .self-sitting-phase, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container .self-sitting-phase { margin-top: 2px; margin-left: 0; margin-right: 0; position: static; justify-content: center; } #pan .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .branch-container .self-sitting-phase .phase-main, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells:not(.pan-table--drill) .branch-container .self-sitting-phase .phase-main { font-size: 9px; } #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container .pan-kong-wang-phase, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container .pan-kong-wang-phase { margin-top: 1px; position: static; } #pan .card.pan-display-card.pan-mobile-compact-cells .branch-container .pan-kong-wang-phase .pan-kong-wang-char, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .branch-container .pan-kong-wang-phase .pan-kong-wang-char { font-size: 9px; } } /* source: /style_pan_compact_toolbar.css?v=5 */ /* 命盘紧凑卡工具栏/十二长生条；角标块见 style_pan_compact_toolbar_marks.css；运程缩放见 toolbar_drill */ @media (max-width: 900px) { /* * 十二长生说明条（命盘紧凑卡）：scroll 两行（标题 / 内容）； * seq 单一流从左到右换行，两类间 DOM 竖线；最多两行、禁止横向滚动条。 */ #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty), #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty), .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; column-gap: 0; row-gap: 4px; font-size: clamp(8px, 1.85vw, 10px); line-height: 1.38; --pan-cs-dismiss-size: clamp(20px, 2.05em, 24px); } /* 手机端：标题与序列同一行起排，避免标题视觉上“跑到上面” */ #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 1 1 0; min-width: 0; width: 100%; max-width: calc(100% - var(--pan-cs-dismiss-size) - 8px); gap: clamp(2px, 1vw, 4px); overflow-x: hidden; overflow-y: hidden; overscroll-behavior-x: none; scrollbar-width: none; container-type: inline-size; container-name: pan-cs-toolbar-scroll; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll::-webkit-scrollbar, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll::-webkit-scrollbar, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 1 1 auto; min-width: 0; width: auto; max-width: 100%; } /* 天干/地支长生条 DOM 为两行 div，紧凑卡改为一行：子行 display:contents 并入同一横向 flex 流 */ } /* source: /style_pan_compact_toolbar_cs.css?v=2 */ /* 由 style_pan_compact_toolbar.css 拆出；须在其之后 */ @media (max-width: 900px) { #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack--multiline, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack--multiline, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack--multiline { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: clamp(1px, 1vw, 5px); width: auto; max-width: 100%; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack--multiline>.pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack--multiline>.pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack--multiline>.pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow { display: contents; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head { flex: 0 0 auto; align-self: center; margin-right: 2px; line-height: 1.05; min-height: auto; transform: none; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem { /* 标题干支略大于序列主字；scroll 为 baseline 对齐 */ font-size: 1.24em; font-weight: 850; line-height: 1.08; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow { display: inline-flex; flex-wrap: nowrap; align-items: center; align-content: center; justify-content: flex-start; gap: clamp(1px, 1.2vw, 6px); gap: clamp(1px, 1.5cqw, 7px); min-width: 0; width: auto; max-width: 100%; white-space: nowrap; overflow: hidden; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text.pan-cs-phase-pair, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text.pan-cs-stem-pair, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text.pan-cs-phase-pair, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text.pan-cs-stem-pair, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text.pan-cs-stem-pair { flex: 0 0 auto; width: auto; min-width: auto; margin: 0; justify-content: center; box-sizing: border-box; } } /* source: /style_pan_compact_toolbar_marks.css?v=2 */ /* 紧凑卡带角标长生块；由 style_pan_compact_toolbar.css 拆出；须在其之后、toolbar_drill 之前 */ @media (max-width: 900px) { /* 带角标长生块：与桌面工具条一致略紧 */ #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-inner, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-inner, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-inner { gap: 2px 5px; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .phase-main, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .phase-main, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .phase-main { font-size: 1em; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .phase-sub { font-size: 0.92em; transform: none; margin-left: 0; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--month.changsheng-phase-text, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--hour.changsheng-phase-text, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar.changsheng-phase-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--month.changsheng-phase-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--hour.changsheng-phase-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar.changsheng-phase-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar.changsheng-phase-text { padding: 0; margin: 0; box-shadow: none; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--month.changsheng-phase-text .changsheng-phase-inner, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--hour.changsheng-phase-text .changsheng-phase-inner, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar.changsheng-phase-text .changsheng-phase-inner, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--month.changsheng-phase-text .changsheng-phase-inner, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--hour.changsheng-phase-text .changsheng-phase-inner, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar.changsheng-phase-text .changsheng-phase-inner, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar.changsheng-phase-text .changsheng-phase-inner { padding: 0 0 2px; border-radius: 0; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-stem-pair--in-bazi.changsheng-phase-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-stem-pair--in-bazi.changsheng-phase-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-stem-pair--in-bazi.changsheng-phase-text { padding: 0; margin: 0; box-shadow: none; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-stem-pair--in-bazi.changsheng-phase-text .changsheng-phase-inner, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-stem-pair--in-bazi.changsheng-phase-text .changsheng-phase-inner, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-stem-pair--in-bazi.changsheng-phase-text .changsheng-phase-inner { padding: 0 0 2px; border-radius: 0; } /* 地支视角下非四柱高亮干：与 in-bazi 同高呼吸，避免仅 in-bazi 块略大、其余更扁 */ #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-stem-pair.changsheng-phase-text:not(.pan-cs-stem-pair--in-bazi), #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-stem-pair.changsheng-phase-text:not(.pan-cs-stem-pair--in-bazi), .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-stem-pair.changsheng-phase-text:not(.pan-cs-stem-pair--in-bazi) { padding: 2px 4px 3px; margin: 0; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-sub-col .phase-mark-num, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-sub-col .phase-mark-num, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-sub-col .phase-mark-num { font-size: 0.85em; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text { margin: 0; } /* } /* source: /style_pan_compact_toolbar_drill.css?v=5 */ /* 紧凑运程表缩放变量；stem 格见 style_pan_compact_toolbar_drill_stem.css */ @media (max-width: 900px) { /* * 手机端运程表：随 data-pan-drill-col-count 逐级缩小（原局 4 列 + 大运/流年/流月/流日/流时）。 * 变量挂在命盘卡与 #pan，下方大运/流年格网同步缩放。 */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells { --pan-drill-total-cols: 5; --pan-drill-flow-aside-min: clamp(24px, 6.5vw, 32px); --pan-drill-glyph-max: 22px; --pan-drill-glyph-min: 16px; --pan-drill-glyph-vw: 4vw; --pan-drill-flow-col-min: max( 68px, calc( 0.5 * (1em + clamp(var(--pan-drill-glyph-min), var(--pan-drill-glyph-vw), var(--pan-drill-glyph-max))) + clamp(var(--pan-drill-glyph-min), var(--pan-drill-glyph-vw), var(--pan-drill-glyph-max)) * 0.48 + 1.5em ) ); --pan-drill-god-max: 9.5px; --pan-drill-god-min: 7.5px; --pan-drill-god-vw: 1.85vw; --pan-drill-phase-main-max: 11.5px; --pan-drill-phase-main-min: 9px; --pan-drill-phase-main-vw: 2.35vw; --pan-drill-phase-sub-max: 8px; --pan-drill-phase-sub-min: 6px; --pan-drill-phase-sub-vw: 1.6vw; --pan-drill-th-max: 10.5px; --pan-drill-th-min: 8px; --pan-drill-th-vw: 1.9vw; --pan-drill-hour-nav: 20px; --pan-drill-hour-slot-inset: 12px; --pan-drill-hour-nav-prev: 32px; --pan-drill-hour-nav-next: 30px; --pan-drill-gender-svg-w: 14px; --pan-drill-gender-svg-h: 9px; --pan-drill-gender-gap: 2px; --pan-drill-ten-god-max: 9.5px; --pan-drill-ten-god-min: 7.5px; --pan-drill-ten-god-vw: 1.85vw; --pan-drill-grid-gz: 14px; --pan-drill-grid-god: 13px; /* 旁注偏移跟实际干支字号走；大字靠左，右侧整段给十神/长生 */ --pan-stem-glyph-size: clamp(var(--pan-drill-glyph-min), var(--pan-drill-glyph-vw), var(--pan-drill-glyph-max)); --pan-drill-col-inset: 3px; --pan-stem-god-left: calc(var(--pan-drill-col-inset) + var(--pan-stem-glyph-size) + 2px); --pan-hour-stem-god-left: var(--pan-stem-god-left); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="2"], #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="2"], .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="2"] { --pan-drill-total-cols: 6; --pan-drill-glyph-max: 20px; --pan-drill-glyph-min: 14px; --pan-drill-glyph-vw: 3.6vw; --pan-drill-god-max: 8.5px; --pan-drill-god-min: 7px; --pan-drill-god-vw: 1.7vw; --pan-drill-phase-main-max: 10.5px; --pan-drill-phase-main-min: 8.5px; --pan-drill-phase-main-vw: 2.15vw; --pan-drill-th-max: 9.5px; --pan-drill-th-min: 7.5px; --pan-drill-th-vw: 1.75vw; --pan-drill-hour-nav: 18px; --pan-drill-hour-slot-inset: 11px; --pan-drill-hour-nav-prev: 28px; --pan-drill-hour-nav-next: 26px; --pan-drill-gender-svg-w: 12px; --pan-drill-gender-svg-h: 8px; --pan-drill-gender-gap: 2px; --pan-drill-ten-god-max: 8.5px; --pan-drill-ten-god-min: 7px; --pan-drill-ten-god-vw: 1.7vw; --pan-drill-grid-gz: 13px; --pan-drill-grid-god: 12px; } } /* source: /style_pan_compact_toolbar_drill_learn.css?v=4 */ /* 学习槽运程列覆盖；由 style_pan_compact_toolbar_drill.css 拆出；须在其之后 */ @media (max-width: 900px) { #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"], #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"], .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="3"] { --pan-drill-total-cols: 7; --pan-drill-glyph-max: 18px; --pan-drill-glyph-min: 13px; --pan-drill-glyph-vw: 3.2vw; --pan-drill-god-max: 7.5px; --pan-drill-god-min: 6px; --pan-drill-god-vw: 1.55vw; --pan-drill-phase-main-max: 9.5px; --pan-drill-phase-main-min: 8px; --pan-drill-phase-main-vw: 2vw; --pan-drill-th-max: 8.5px; --pan-drill-th-min: 7px; --pan-drill-th-vw: 1.6vw; --pan-drill-hour-nav: 17px; --pan-drill-hour-slot-inset: 10px; --pan-drill-hour-nav-prev: 26px; --pan-drill-hour-nav-next: 24px; --pan-drill-gender-svg-w: 11px; --pan-drill-gender-svg-h: 7px; --pan-drill-gender-gap: 2px; --pan-drill-ten-god-max: 7.5px; --pan-drill-ten-god-min: 6px; --pan-drill-ten-god-vw: 1.55vw; --pan-drill-grid-gz: 12px; --pan-drill-grid-god: 11px; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"], #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"], .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="4"] { --pan-drill-total-cols: 8; --pan-drill-glyph-max: 16px; --pan-drill-glyph-min: 11.5px; --pan-drill-glyph-vw: 2.85vw; --pan-drill-god-max: 7px; --pan-drill-god-min: 5.5px; --pan-drill-god-vw: 1.45vw; --pan-drill-phase-main-max: 9px; --pan-drill-phase-main-min: 7px; --pan-drill-phase-main-vw: 1.85vw; --pan-drill-th-max: 8px; --pan-drill-th-min: 6.5px; --pan-drill-th-vw: 1.5vw; --pan-drill-hour-nav: 16px; --pan-drill-hour-slot-inset: 9px; --pan-drill-hour-nav-prev: 24px; --pan-drill-hour-nav-next: 22px; --pan-drill-gender-svg-w: 10px; --pan-drill-gender-svg-h: 6.5px; --pan-drill-gender-gap: 1px; --pan-drill-ten-god-max: 7px; --pan-drill-ten-god-min: 5.5px; --pan-drill-ten-god-vw: 1.45vw; --pan-drill-grid-gz: 11px; --pan-drill-grid-god: 10px; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"], #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"], .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells[data-pan-drill-col-count="5"] { --pan-drill-total-cols: 9; --pan-drill-glyph-max: 15px; --pan-drill-glyph-min: 10.5px; --pan-drill-glyph-vw: 2.6vw; --pan-drill-god-max: 6.5px; --pan-drill-god-min: 5px; --pan-drill-god-vw: 1.35vw; --pan-drill-phase-main-max: 8.5px; --pan-drill-phase-main-min: 6.5px; --pan-drill-phase-main-vw: 1.7vw; --pan-drill-th-max: 7.5px; --pan-drill-th-min: 6px; --pan-drill-th-vw: 1.4vw; --pan-drill-hour-nav: 15px; --pan-drill-hour-slot-inset: 8px; --pan-drill-hour-nav-prev: 22px; --pan-drill-hour-nav-next: 20px; --pan-drill-gender-svg-w: 9px; --pan-drill-gender-svg-h: 6px; --pan-drill-gender-gap: 1px; --pan-drill-ten-god-max: 6.5px; --pan-drill-ten-god-min: 5px; --pan-drill-ten-god-vw: 1.35vw; --pan-drill-grid-gz: 10px; --pan-drill-grid-god: 9px; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .glyph, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .glyph { font-size: clamp(var(--pan-drill-glyph-min), var(--pan-drill-glyph-vw), var(--pan-drill-glyph-max)); width: 1em; height: 1em; } } /* source: /style_pan_compact_toolbar_drill_stem.css?v=9 */ /* 紧凑运程表 stem 格覆写；由 style_pan_compact_toolbar_drill.css 拆出；须在其之后、style_pan_compact_toolbar_pillars.css 之前 */ @media (max-width: 900px) { #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container { display: block; position: relative; min-height: 0; min-width: 0; width: 100%; max-width: 100%; padding: 1px 0; overflow: visible; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph { position: static; left: auto; top: auto; transform: none; width: 1em; height: 1em; flex-shrink: 0; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .glyph-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 1em; min-height: 0; padding-top: 0; margin-inline: auto; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td[data-pillar]:not( .col-compare-cell, .col-liunian-cell, .col-liuyue-cell, .col-liuri-cell, .col-liushi-cell ) .stem-container > .god-text, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td[data-pillar]:not( .col-compare-cell, .col-liunian-cell, .col-liuyue-cell, .col-liuri-cell, .col-liushi-cell ) .stem-container > .god-text, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td[data-pillar]:not( .col-compare-cell, .col-liunian-cell, .col-liuyue-cell, .col-liuri-cell, .col-liushi-cell ) .stem-container > .god-text { position: absolute; left: var(--pan-stem-god-left); top: 0; right: 1px; width: auto; transform: none; padding-left: 0; min-width: 0; max-width: none; box-sizing: border-box; font-size: clamp(var(--pan-drill-god-min), var(--pan-drill-god-vw), var(--pan-drill-god-max)); line-height: 1.15; overflow: visible; z-index: 4; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-inner, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-inner, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-inner { flex-shrink: 0; min-width: min-content; max-width: none; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-sub-col, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-sub-col, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-sub-col { display: inline-flex; flex-direction: column; flex-shrink: 0; min-width: min-content; } :is(#pan, .learnPanDisplaySlot, #study-pan-preview) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-hour-stem-aside .god-text { position: static; top: auto; left: auto; transform: none; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label>div:not(.changsheng-phase-text), #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label>div:not(.changsheng-phase-text), .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label>div:not(.changsheng-phase-text), #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .pan-label-ten-god, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .pan-ten-god-stack, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .pan-label-ten-god, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .pan-ten-god-stack, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .pan-label-ten-god { font-size: clamp(var(--pan-drill-ten-god-min), var(--pan-drill-ten-god-vw), var(--pan-drill-ten-god-max)); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-main, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-main, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-main { font-size: clamp(var(--pan-drill-phase-main-min), var(--pan-drill-phase-main-vw), var(--pan-drill-phase-main-max)); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-sub, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-sub, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .phase-sub { font-size: clamp(var(--pan-drill-phase-sub-min), var(--pan-drill-phase-sub-vw), var(--pan-drill-phase-sub-max)); margin-left: 1px; transform: translateY(2px); display: inline-block; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-text, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-text, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-text { display: flex; align-items: flex-end; flex-wrap: nowrap; white-space: nowrap; line-height: 1.2; gap: 1px; margin-top: 0; max-width: none; min-width: 0; box-sizing: border-box; overflow: visible; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .stem-container .god-text.changsheng-label .changsheng-phase-sub-col .phase-sub { margin-left: 0; transform: none; display: inline-block; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container { justify-content: flex-start; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .glyph-wrapper, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .glyph-wrapper, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .glyph-wrapper { width: 1em; min-height: 0; height: auto; margin-inline: auto; justify-content: flex-start; } /* 原局/运程地支大字都走文档流，避免一行里有的绝对居中、有的顶对齐 */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .glyph, #study-pan-preview .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .glyph, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .glyph { position: static; left: auto; top: auto; transform: none; width: 1em; height: 1em; flex-shrink: 0; } } /* source: /style_pan_compact_toolbar_pillars.css?v=9 */ /* 命盘紧凑卡原局/运程同行对齐；须在 style_pan_compact_toolbar_drill_stem.css 之后 */ @media (max-width: 900px) { /* * 运程展开后同一行必须同高、顶对齐。 * 禁止再单独抬原局格（旧 40px 复原会让年柱地支/藏干整列下移）。 */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .stem-container { display: block; position: relative; min-height: 0; padding: 1px 0; overflow: visible; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .stem-container .glyph-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 1em; min-height: 0; height: auto; padding-top: 0; margin: 0; margin-left: var(--pan-drill-col-inset, 3px); box-sizing: border-box; overflow: visible; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .stem-container .glyph { position: static; left: auto; top: auto; transform: none; width: 1em; height: 1em; flex-shrink: 0; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .stem-container .glyph:hover { transform: none; opacity: 0.92; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .stem-container > .god-text { position: absolute; left: var(--pan-stem-god-left); top: 0; right: 1px; width: auto; max-width: none; transform: none; overflow: visible; z-index: 4; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:first-child td.pan-pillar-td:not(.isHidden) { overflow: visible; padding-bottom: 0; position: relative; z-index: 2; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-hour-pillar-td .stem-container .pan-hour-stem-aside { position: absolute; top: 0; right: 1px; left: var(--pan-hour-stem-god-left); max-width: none; transform: none; overflow: visible; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .branch-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 0; padding: 0 0 2px; padding-left: var(--pan-drill-col-inset, 3px); } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .branch-container .glyph-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 1em; min-height: 0; height: auto; padding-top: 0; margin: 0; box-sizing: border-box; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-hour-branch-nav-wrap { position: relative; display: inline-flex; width: 1em; margin: 0; gap: 0; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .hour-nav--prev { position: absolute; right: 100%; top: 0.2em; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .hour-nav--next { position: absolute; left: 100%; top: 0.2em; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-hour-branch-nav-wrap .glyph-wrapper { min-height: 0; margin-inline: 0; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .branch-container .glyph { position: static; left: auto; top: auto; transform: none; width: 1em; height: 1em; flex-shrink: 0; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(3) td.pan-pillar-td { vertical-align: top; padding-top: 2px; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(2) td.pan-pillar-td:not(.isHidden) { position: relative; z-index: 1; overflow: visible; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .hiddenList { justify-content: flex-start; align-items: flex-start; height: auto; min-height: 0; margin-top: 0; margin-left: 0; margin-right: 0; padding-top: 2px; padding-left: var(--pan-drill-col-inset, 3px); } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .hiddenItemsRow, :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .hiddenPart--residual .hiddenItemsRow { align-items: flex-start; justify-content: flex-start; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .hiddenItemsRow > .hiddenItem, :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .hiddenItemsRow > .hiddenItem:only-child { width: auto; max-width: 100%; justify-content: flex-start; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table td.pan-pillar-td .hiddenGlyph { width: 1em; height: 1em; min-height: 0; } } /* source: /style_pan_compact_toolbar_pillars_glyph.css?v=3 */ /* 由 style_pan_compact_toolbar_pillars.css 拆出；须在其之后 */ @media (max-width: 900px) { #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .self-sitting-phase .phase-main, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .branch-container .self-sitting-phase .phase-main { font-size: clamp(var(--pan-drill-phase-main-min), var(--pan-drill-phase-main-vw), var(--pan-drill-phase-main-max)); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table th, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table th { font-size: clamp(var(--pan-drill-th-min), var(--pan-drill-th-vw), var(--pan-drill-th-max)); min-height: 20px; padding: 2px 0 1px; } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl .hour-nav, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] .pan-hour-branch-nav { width: var(--pan-hour-nav-size); height: var(--pan-hour-nav-size); min-width: var(--pan-hour-nav-size); min-height: var(--pan-hour-nav-size); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table thead th .hour-ctrl .hour-nav svg, #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .bazi-table tbody tr:nth-child(2) td[data-pillar="hour"] .pan-hour-branch-nav svg { width: var(--pan-hour-nav-svg); height: var(--pan-hour-nav-svg); } } /* source: /style_pan_compact_toolbar_gender.css?v=2 */ /* 命盘紧凑卡日柱性别箭头与后段；由 style_pan_compact_toolbar_drill.css 拆出；须在 style_pan_compact_toolbar_pillars.css 之后、style_pan_compact_toolbar_wide.css 之前 */ @media (max-width: 900px) { /* 日柱性别切换箭头随十神字号同步缩小 */ #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-gender-toggle-hit, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-gender-toggle-hit { gap: var(--pan-drill-gender-gap); } #pan .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-gender-toggle-svg, .learnPanDisplaySlot .card.pan-display-card.pan-table--drill.pan-mobile-compact-cells .pan-gender-toggle-svg { width: var(--pan-drill-gender-svg-w); height: var(--pan-drill-gender-svg-h); } #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .dayun-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .liunian-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .drill-item { min-height: 48px; padding: 2px 0; } #pan.pan-mobile-compact-host[data-pan-drill-col-count="2"] .dayun-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="2"] .liunian-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="2"] .drill-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="3"] .dayun-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="3"] .liunian-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="3"] .drill-item { min-height: 44px; } #pan.pan-mobile-compact-host[data-pan-drill-col-count="4"] .dayun-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="4"] .liunian-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="4"] .drill-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="5"] .dayun-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="5"] .liunian-item, #pan.pan-mobile-compact-host[data-pan-drill-col-count="5"] .drill-item { min-height: 40px; } /* 大运/流年格网与命盘卡兄弟节点，格网字号变量须挂在 #pan */ #pan.pan-mobile-compact-host[data-pan-drill-col-count="1"] { --pan-drill-grid-gz: 13px; --pan-drill-grid-god: 12px; } #pan.pan-mobile-compact-host[data-pan-drill-col-count="2"] { --pan-drill-grid-gz: 12px; --pan-drill-grid-god: 11px; } #pan.pan-mobile-compact-host[data-pan-drill-col-count="3"] { --pan-drill-grid-gz: 11px; --pan-drill-grid-god: 10px; } #pan.pan-mobile-compact-host[data-pan-drill-col-count="4"] { --pan-drill-grid-gz: 10px; --pan-drill-grid-god: 9px; } #pan.pan-mobile-compact-host[data-pan-drill-col-count="5"] { --pan-drill-grid-gz: 9px; --pan-drill-grid-god: 8px; } #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .pillar-gz-char { font-size: var(--pan-drill-grid-gz, 12px); } #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .liunian-ganzhi-block .ganzhi-row span:first-child, #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .drill-ganzhi-block .ganzhi-row span:first-child { font-size: var(--pan-drill-grid-god, 11px); } #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .liunian-year, #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .drill-desc, #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .liunian-ganzhi-block .god-text, #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .drill-ganzhi-block .god-text { font-size: clamp(6px, 1.35vw, 7px); } #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .liunian-year div:first-child, #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .drill-desc div:first-child { font-size: clamp(7px, 1.55vw, 9px); } #pan.pan-mobile-compact-host[data-pan-drill-col-count]:not([data-pan-drill-col-count="0"]) .liunian-age-label { white-space: nowrap; font-size: clamp(5px, 1.25vw, 7px); line-height: 1.1; letter-spacing: -0.03em; } } /* source: /style_pan_compact_toolbar_wide.css?v=3 */ /* 命盘紧凑卡宽屏与徽记覆写；由 style_pan_compact_toolbar_drill.css 拆出；须在其之后、style_pan_modal.css 之前 */ /* * 屏宽 ≥640px：与 max-width:900 内紧凑规则同链，保证稍宽视口仍单行 + scroll 内横滑（勿改回两行折行）。 */ @media (min-width: 640px) { /* 与 max-width:900 内选择器同链，否则特异性不足 */ #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq-stack { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: max-content; max-width: none; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel:not(:empty) .pan-cs-toolbar-row .pan-cs-toolbar-scroll { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; } #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-seq.pan-cs-toolbar-seq--flow { flex: 0 0 auto; min-width: 0; flex-wrap: nowrap; align-items: center; align-content: center; width: max-content; max-width: none; overflow-x: visible; overflow-y: visible; } } /* * 紧凑卡十二长生条：支字 DOM 为 span.pan-cs-phase-sub.phase-sub.{wood|fire|…}， * 须与本文件 max-width:720 内「.card.pan-display-card.pan-mobile-compact-cells … .phase-sub」链 * 同等特异性并显式上色，否则只继承 .changsheng-phase-text 灰字（用户反馈戌亥酉等无色）。 */ #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.wood, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.wood, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.wood, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.wood, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.wood { color: #52f08c !important; opacity: 1 !important; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.fire, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.fire, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.fire, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.fire, .learnPanDisplaySlot .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.fire { color: #ff7e92 !important; opacity: 1 !important; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.earth, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.earth, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.earth, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.earth { color: #fcd34d !important; opacity: 1 !important; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.metal, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.metal, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.metal, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.metal { color: #ffffff !important; opacity: 1 !important; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.water, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.water, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text .pan-cs-phase-sub.phase-sub.water, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .changsheng-phase-text--marked .changsheng-phase-sub-col .pan-cs-phase-sub.phase-sub.water { color: var(--water) !important; opacity: 1 !important; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.wood, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.wood { color: #52f08c !important; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.fire, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.fire { color: #ff7e92 !important; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.earth, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.earth { color: #fcd34d !important; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.metal, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.metal { color: #ffffff !important; } #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.water, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-toolbar-head .pan-cs-elem.water { color: var(--water) !important; } /* source: /style_pan_compact_toolbar_wide_cs.css?v=1 */ /* 紧凑卡：月/时/柱徽与桌面一致，主字浅色（深色主题底） */ #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--month .phase-main, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--month .pan-cs-phase-main.phase-main, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--hour .phase-main, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--hour .pan-cs-phase-main.phase-main, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar .phase-main, #study-pan-preview .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar .pan-cs-phase-main.phase-main, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--month .phase-main, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--month .pan-cs-phase-main.phase-main, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--hour .phase-main, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--hour .pan-cs-phase-main.phase-main, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar .phase-main, #pan .card.pan-display-card.pan-mobile-compact-cells .pan-cs-toolbar-panel .pan-cs-phase-pair--pillar .pan-cs-phase-main.phase-main { color: rgba(248, 250, 252, 0.96) !important; text-shadow: none !important; font-weight: 900 !important; } /* source: /style_pan_modal.css?v=1 */ /* 命盘紧凑卡 Modal 与地址选择器；由 style_pan_compact.css 拆出 */ /* Modal & Address Picker */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity var(--motion-med, 0.22s) cubic-bezier(0.4, 0, 0.2, 1), visibility var(--motion-med, 0.22s) cubic-bezier(0.4, 0, 0.2, 1); } .modal:not(.isHidden) { visibility: visible; opacity: 1; pointer-events: auto; } /* Modal */ .modalMask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay-bg); backdrop-filter: var(--overlay-blur, blur(10px)); -webkit-backdrop-filter: var(--overlay-blur, blur(10px)); z-index: 1; } @media (prefers-reduced-transparency: reduce) { .modalMask { backdrop-filter: none; -webkit-backdrop-filter: none; } } .modalSheet { position: relative; z-index: 2; background: var(--sheet-bg, var(--bg-dark)); border: 1px solid var(--sheet-border, var(--surface-border, var(--filter-separator))); border-radius: var(--sheet-radius, var(--surface-radius-lg, 20px)); width: 100%; max-width: 480px; max-height: 80vh; box-shadow: var(--sheet-shadow, none); } .modal:not(.isHidden) .modalSheet { transform: scale(1) translateY(0); } .modalHead { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: none; } .place-modal-head .place-modal-title { flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-main); } .place-modal-head-spacer { display: none; } /* source: /style_birth.css?v=7 */ /* 出生表单布局前半；分段/卡片见 style_birth_segment.css */ /* 出生地选择：屏幕居中，多尺寸自适应 */ #place-modal.modal { justify-content: center; align-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); } #place-modal .modalSheet { display: flex; flex-direction: column; width: min(520px, 100%); max-width: min(520px, calc(100vw - 32px)); max-height: min(620px, calc(100dvh - 32px)); margin: auto; overflow: hidden; } #place-modal .place-modal-head { display: flex; align-items: center; justify-content: center; padding: 16px 20px; flex-shrink: 0; } #place-modal .place-modal-title { flex: none; text-align: center; } #place-modal .place-modal-head-spacer { display: none; } #place-modal .modalBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0 16px 20px; } #place-modal .searchRow { flex-shrink: 0; padding: 12px 0 8px; } #place-modal .searchRow input, #place-modal #place-search { box-sizing: border-box; width: 100%; padding: 10px 14px; border-radius: var(--surface-radius-sm, 11px); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-main); font-size: 14px; font-family: inherit; outline: none; box-shadow: none; transition: border-color var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease; } #place-modal .searchRow input:focus, #place-modal #place-search:focus { border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 18%, transparent); } /* source: /style_birth_place_picker.css?v=3 */ /* 出生地弹层滚轮：列宽按地名长度分配；空区列隐藏后改为两列铺满 */ #place-modal .pickerCols { flex: 1 1 auto; width: 100%; min-width: 0; height: 200px; min-height: 200px; max-height: 200px; box-sizing: border-box; } #place-modal .pickerCol { flex: 1 1 0; min-width: 0; height: 100%; min-height: 0; scroll-snap-type: none; } /* 省名更长：略加宽；市/区均分剩余 */ #place-modal #col-province { flex: 1.45 1 0; } #place-modal #col-city, #place-modal #col-area { flex: 1 1 0; } #place-modal #col-area.isHidden { display: none !important; } /* 无区县时两列均分（省仍略宽） */ #place-modal .pickerCols--two #col-province { flex: 1.25 1 0; } #place-modal .pickerCols--two #col-city { flex: 1 1 0; } #place-modal .placeItem { display: flex; align-items: center; justify-content: center; height: 40px; line-height: 1.2; box-sizing: border-box; scroll-snap-align: none; min-width: 0; width: 100%; padding: 0 8px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #place-modal .placeItem.isActive { font-size: 14px; } #place-modal .pickerHighlight { background: rgba(128, 128, 128, 0.06); } #place-modal #place-search-result.searchResult { flex-shrink: 0; max-height: min(240px, 32dvh); margin-bottom: 8px; } #place-modal #place-picker.picker { flex: 1 1 auto; min-height: 200px; height: auto; max-height: 200px; margin: 0; width: 100%; min-width: 0; display: flex; flex-direction: column; box-sizing: border-box; } @media (min-width: 768px) { #place-modal .modalSheet { max-width: min(560px, calc(100vw - 48px)); } } .modalBody { flex: 1; overflow-y: auto; padding: 12px; } .modalFoot { padding: 16px 20px 20px; border-top: none; background: var(--bg-dark); border-bottom-left-radius: var(--surface-radius-lg, 20px); border-bottom-right-radius: var(--surface-radius-lg, 20px); } /* source: /style_birth_segment.css?v=13 */ /* 出生表单分段控件与单层卡片；由 style_birth.css 拆出；须在其之后、style_birth_identity.css 之前 */ /* Segmented Control（通用 .seg；历法段见 style_theme_light_chips_pan_gender.css） */ .seg { display: inline-flex; background: var(--seg-track-bg, transparent); padding: 3px; border-radius: var(--surface-radius, 16px); gap: 2px; border: 1px solid var(--seg-track-border, var(--surface-border)); } .segBtn { background: transparent; border: none; color: var(--seg-btn-fg, var(--text-dim)); padding: 6px 16px; font-size: 13px; font-weight: 600; border-radius: calc(var(--surface-radius, 16px) - 3px); cursor: pointer; transition: color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease; } .segBtn:hover { color: var(--seg-btn-fg-hover, var(--text-main)); background: var(--seg-btn-hover-bg, transparent); } .segBtn:active { transform: scale(0.96); } .segBtn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; } .segBtn.isActive { background: var(--seg-btn-active-bg, var(--btn-primary-bg)); color: var(--seg-btn-active-fg, var(--btn-primary-fg)); box-shadow: none; } /* 出生历法段：未选中项 hover 给一层薄底，反馈更明确 */ #tab-birth .birth-cal-seg .segBtn:hover:not(.isActive) { background: color-mix(in srgb, var(--text-main) 5%, transparent); } /* —— 出生表单：单层卡片（#tab-birth 即容器） * 统一缩放：无量纲 --birth-scale = 卡片宽/设计宽，各尺寸 calc(设计px * scale)。 * 设计宽 360px；100cqi/360px 才是无量纲（勿写 /360，否则长度与无量纲混用整段失效）。 * 不用 em 存间距 token（子级字号不同会二次缩放）；不用 zoom（选字弹层定位错位）。 */ #tab-birth.birth-form-shell { container-type: inline-size; container-name: birth-form; --birth-scale: clamp(0.75, calc(100cqi / 360px), 1); --birth-field-font-size: calc(13px * var(--birth-scale)); --birth-ui-font-size: calc(13px * var(--birth-scale)); --birth-label-font-size: calc(11px * var(--birth-scale)); --birth-meta-font-size: calc(12px * var(--birth-scale)); --birth-chip-font-size: calc(14px * var(--birth-scale)); --birth-form-inline: calc(18px * var(--birth-scale)); --birth-icon-size: calc(18px * var(--birth-scale)); --birth-icon-col: calc(44px * var(--birth-scale)); --birth-control-h: calc(40px * var(--birth-scale)); --birth-row-min: calc(48px * var(--birth-scale)); --birth-clear-size: calc(30px * var(--birth-scale)); --birth-seg-face-h: calc(30px * var(--birth-scale)); --birth-row-pad-y: calc(13px * var(--birth-scale)); --birth-row-gap: calc(12px * var(--birth-scale)); --birth-actions-pad-y: calc(14px * var(--birth-scale)); --birth-actions-pad-bottom: calc(18px * var(--birth-scale)); --btn-font: var(--birth-chip-font-size); --btn-h: calc(44px * var(--birth-scale)); --btn-pad-y: calc(11px * var(--birth-scale)); --btn-pad-x: calc(22px * var(--birth-scale)); font-size: var(--birth-ui-font-size); width: 100%; max-width: none; margin: 0; padding: 0; border-radius: var(--surface-radius-lg, 20px); border: 1px solid var(--surface-border, var(--panel-border)); background: var(--panel-bg); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 5%, transparent), var(--shadow-sm); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); /* visible：底部 sticky「排盘」才能相对页面滚动吸底；圆角由自身 border-radius 承担 */ overflow: visible; } #tab-birth.birth-form-shell.tabBody { padding: 0; animation: none; } #tab-birth .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: var(--birth-actions-pad-y, 14px) var(--birth-form-inline, 18px) var(--birth-actions-pad-bottom, 18px); margin: 0; border-top: 1px solid color-mix(in srgb, var(--text-main) 6%, transparent); position: sticky; bottom: 0; z-index: 8; background: color-mix(in srgb, var(--panel-bg, var(--card-bg)) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -8px 20px color-mix(in srgb, var(--bg-dark, #000) 18%, transparent); } #tab-birth .actions .birth-tools-clear-btn { flex: 0 0 auto; order: 1; opacity: 0.72; } #tab-birth .actions .birth-tools-clear-btn:hover:not(:disabled) { opacity: 1; } #tab-birth .actions #btn-pan-birth.birth-actions__pan, #tab-birth .actions #btn-pan-birth.primary { flex: 1 1 auto; order: 2; min-width: min(100%, 160px); margin-left: auto; } #tab-birth .actions #birth-hint { order: 3; flex: 1 0 100%; } .birth-c-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px var(--birth-form-inline, 18px); border-bottom: 1px solid color-mix(in srgb, var(--text-main) 6%, transparent); min-height: 48px; } /* 出生 tab：去掉行间细分割线，仅靠外框与留白分层 */ #tab-birth .birth-c-row { border-bottom: none; min-height: var(--birth-row-min, 48px); padding-top: var(--birth-row-pad-y, 13px); padding-bottom: var(--birth-row-pad-y, 13px); gap: var(--birth-row-gap, 12px); } #tab-birth.birth-form-shell .segBtn { font-size: inherit; padding: calc(6px * var(--birth-scale)) calc(16px * var(--birth-scale)); } /* source: /style_birth_segment_row.css?v=10 */ .birth-c-row__label { flex: 0 1 auto; font-size: var(--birth-label-font-size, 11px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); max-width: 44%; line-height: 1.35; } .birth-c-row__side-hint { flex: 0 0 auto; font-size: var(--birth-meta-font-size, 12px); font-weight: 600; letter-spacing: 0.04em; line-height: 1.35; color: var(--text-muted); } /* 「必填」等角标：深色白底黑字 / 浅色黑底白字（与筛选 chip 选中态互反） */ .birth-c-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; font-size: calc(9px * var(--birth-scale, 1)); font-weight: 900; letter-spacing: 0.04em; vertical-align: middle; text-transform: none; } html:not([data-theme="light"]) #app-view-pan .birth-c-tag { color: #111111 !important; background: #ffffff !important; } [data-theme="light"] #app-view-pan .birth-c-tag { color: #ffffff !important; background: #111111 !important; } .birth-c-input-trailing { flex: 1; min-width: 0; text-align: right; background: transparent !important; border: none !important; padding: 8px 0 !important; box-shadow: none !important; font-size: var(--birth-field-font-size, 13px); font-weight: 700; color: var(--text-main); } /* source: /style_birth_identity.css?v=18 */ /* 出生身份行；胶囊见 style_birth_identity_pills.css */ /* 身份次要行：略收上下边距，与下方历法主段拉开一点呼吸 */ #tab-birth .birth-c-row--name-gender { align-items: center; padding-top: calc(var(--birth-row-pad-y, 13px) * 0.85); padding-bottom: calc(var(--birth-row-pad-y, 13px) * 0.55); gap: calc(var(--birth-row-gap, 12px) * 0.9); } .birth-name-gender-wrap { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--birth-scale, 1)); } /* 姓名选填：弱于必填时间壳，避免与主路径抢视觉 */ #tab-birth .birth-name-gender-wrap .birth-c-input-trailing--optional { font-weight: 500; color: var(--text-muted); } #tab-birth .birth-name-gender-wrap .birth-c-input-trailing--optional:focus, #tab-birth .birth-name-gender-wrap .birth-c-input-trailing--optional:not(:placeholder-shown) { color: var(--text-main); font-weight: 600; } #tab-birth .birth-name-gender-wrap .birth-c-input-trailing--optional::placeholder { color: var(--text-dim); opacity: 0.55; font-weight: 500; } .birth-name-gender-wrap .birth-c-input-trailing { flex: 1 1 auto; min-width: 0; max-width: none; text-align: left; padding-top: calc(6px * var(--birth-scale, 1)) !important; padding-bottom: calc(6px * var(--birth-scale, 1)) !important; } .birth-name-gender-wrap .birth-pill-tray { flex: 0 0 auto; margin-left: auto; } /* 历法段略抬一点上边距，与身份行分层 */ #tab-birth .birth-c-row--pills { padding-top: calc(var(--birth-row-pad-y, 13px) * 0.9); } @media (max-width: 520px) { .birth-name-gender-wrap { flex-direction: row; align-items: center; gap: calc(8px * var(--birth-scale, 1)); } .birth-name-gender-wrap .birth-c-input-trailing { flex: 1 1 auto; min-width: 0; max-width: none; width: auto; } .birth-name-gender-wrap .birth-pill-tray { justify-content: stretch; min-width: 0; margin-left: auto; } .birth-c-row__icon-lead__text { font-size: var(--birth-label-font-size, 10px); letter-spacing: 0.04em; } label.birth-c-row__label.birth-c-row__icon-lead, label.birth-c-row__label.birth-c-row__tag-lead { min-width: 40px; padding: 2px 1px; gap: 2px; } #tab-birth .birth-c-row--tools .birth-switch-label { font-size: var(--birth-meta-font-size, 12px); } } .birth-c-input-trailing::placeholder { color: var(--text-dim); opacity: 0.75; font-weight: 500; font-size: inherit; } .birth-c-input-trailing:focus { outline: none; } .birth-c-row--pills { flex-wrap: wrap; align-items: flex-start; } #tab-birth .birth-c-row--pills .birth-cal-seg { flex: 1 1 100%; width: 100%; box-sizing: border-box; } /* 历法/八字面板切入：短淡入（尊重 prefers-reduced-motion 全局覆写） */ #tab-birth .birth-mode-panel:not(.isHidden) { animation: birthModePanelIn 0.16s ease both; } @keyframes birthModePanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .birth-c-row--pills .strip--pills { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px; } /* source: /style_birth_identity_pills.css?v=14 */ /* 出生性别：墨笺二分轨（与顶栏导航 / AI 筛选乾坤同族） */ .birth-pill-tray { display: inline-flex; align-items: stretch; gap: calc(2px * var(--birth-scale, 1)); padding: calc(2px * var(--birth-scale, 1)); border-radius: var(--surface-radius, 16px); background: color-mix(in srgb, var(--text-main) 3.5%, transparent); border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 5%, transparent); box-sizing: border-box; } .birth-pill { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; margin: 0; } .birth-pill input { position: absolute; opacity: 0; width: 0; height: 0; } .birth-pill > span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: calc(36px * var(--birth-scale, 1)); min-height: var(--birth-control-h, var(--touch-min, 40px)); padding: calc(5px * var(--birth-scale, 1)) calc(10px * var(--birth-scale, 1)); box-sizing: border-box; border-radius: calc(var(--surface-radius, 16px) - 4px); font-size: var(--birth-ui-font-size, 13px); font-weight: 600; letter-spacing: 0.08em; background: transparent; color: var(--text-dim); border: none; box-shadow: none; transition: color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease; } /* 身份行内乾坤：再略收水平内边，给姓名多一点字距 */ #tab-birth .birth-c-row--name-gender .birth-pill > span { min-width: calc(34px * var(--birth-scale, 1)); padding-left: calc(8px * var(--birth-scale, 1)); padding-right: calc(8px * var(--birth-scale, 1)); } .birth-pill__face { display: inline-flex; align-items: center; justify-content: center; } .birth-pill__text { font-size: var(--birth-ui-font-size, 13px); font-weight: inherit; letter-spacing: 0.08em; line-height: 1; user-select: none; color: inherit; } .birth-pill:hover > span { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 5%, transparent); } .birth-pill:active > span { transform: scale(0.98); } /* 选中：墨底白字 */ .birth-pill input:checked + span { background: var(--seg-btn-active-bg, var(--btn-primary-bg)); color: var(--seg-btn-active-fg, var(--btn-primary-fg)); font-weight: 700; letter-spacing: 0.08em; border: none; box-shadow: none; transform: none; } .birth-pill > span .birth-pill__text { color: inherit; } .birth-pill input:checked + span .birth-pill__text { color: inherit; } .birth-pill input:focus-visible + span { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } #tab-birth .birth-pill-tray { min-width: clamp(4.5rem, 18cqi, 5.75rem); } #tab-birth .birth-pill__text { font-size: var(--birth-ui-font-size, 13px); } /* 浅色 */ [data-theme="light"] .birth-pill-tray { background: color-mix(in srgb, var(--text-main) 2.5%, #ffffff); border-color: rgba(17, 17, 17, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } [data-theme="light"] .birth-pill > span { background: transparent; border: none; color: rgba(17, 17, 17, 0.52); box-shadow: none; } [data-theme="light"] .birth-pill:hover > span { color: #111111; background: color-mix(in srgb, var(--text-main) 5%, transparent); } [data-theme="light"] .birth-pill > span .birth-pill__text { color: inherit !important; } [data-theme="light"] .birth-pill input:checked + span { background: #111111 !important; border: none !important; color: #ffffff !important; box-shadow: none !important; transform: none; } [data-theme="light"] .birth-pill input:checked + span .birth-pill__text { color: inherit !important; } /* source: /style_birth_identity_pills_datetime.css?v=18 */ .birth-c-row--datetime { align-items: center; gap: 10px; } .birth-c-datetime-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .birth-c-datetime-tags { display: none; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; } /* 仅闰月需要额外提示（历法由上方分段承担） */ .birth-c-datetime-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: calc(10px * var(--birth-scale, 1)); font-weight: 800; letter-spacing: 0.06em; line-height: 1.35; color: var(--text-main); background: color-mix(in srgb, var(--accent, var(--primary)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 35%, transparent); } #tab-birth:has(#calendar-type-lunar:checked):has(#lunar-is-leap:checked) .birth-c-datetime-tags { display: flex; } #birth-mode-datetime.birth-mode-datetime--lunar .birth-c-row--datetime .birth-c-datetime-shell, #tab-birth:has(#calendar-type-lunar:checked) #birth-mode-datetime .birth-c-row--datetime .birth-c-datetime-shell { border-color: color-mix(in srgb, var(--accent, var(--primary)) 28%, var(--input-border)); } #birth-mode-datetime .birth-c-row--datetime .birth-c-datetime-shell { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; /* 必填时间：略强于地点等选填壳 */ min-height: var(--birth-control-h, 40px); border-color: color-mix(in srgb, var(--text-main) 20%, var(--input-border)); } #birth-mode-datetime .birth-c-row--datetime .birth-c-datetime-shell input#birth-datetime { font-size: var(--birth-field-font-size, 12px); font-weight: 700; } .birth-c-datetime-shell--need-value { border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 22%, transparent); } /* 与 .birth-c-field-shell 同 token：灰底/描边字段壳（时间、出生地共用本 class） */ .birth-c-datetime-shell { box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; min-height: var(--birth-control-h, 40px); height: auto; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--surface-radius-sm, 11px); padding: 0 4px 0 12px; cursor: pointer; touch-action: manipulation; transition: border-color var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease; } .birth-c-datetime-shell:hover { border-color: color-mix(in srgb, var(--text-main) 22%, transparent); } .birth-c-datetime-shell:focus-within { border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 18%, transparent); } .birth-c-datetime-shell input#birth-datetime, .birth-c-datetime-shell input#birth-place { flex: 1; min-width: 0; box-sizing: border-box; min-height: calc(38px * var(--birth-scale, 1)); height: auto; max-height: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; padding: 0 4px 0 0 !important; line-height: 1.35 !important; background: transparent !important; border: none !important; box-shadow: none !important; text-align: left !important; font-weight: 600; font-size: var(--birth-field-font-size, 13px); color: var(--text-main); cursor: pointer; /* 避免 iOS 点选时整页缩放导致滚轮溢出 */ touch-action: manipulation; } /* 给绝对定位三角留空，避免长地名顶到 ▾ */ .birth-c-place-wrap input#birth-place { padding-right: 18px !important; } .birth-c-place-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .birth-c-place-solar-hint { margin: 0; padding: 0 2px; font-size: var(--birth-meta-font-size, 11px); font-weight: 600; letter-spacing: 0.04em; line-height: 1.35; color: var(--text-muted); } #tab-birth .birth-c-row--place-pref--active .birth-c-place-wrap { border-color: color-mix(in srgb, var(--accent, var(--primary)) 22%, var(--input-border)); } #tab-birth .birth-c-row--place-pref--active .birth-c-place-solar-hint { color: var(--text-main); } .birth-c-datetime-shell input#birth-datetime::placeholder, .birth-c-datetime-shell input#birth-place::placeholder { color: var(--text-dim); opacity: 0.75; font-weight: 500; } /* 地点：▾ 与时间行 × 共用同一右缘槽；有值出现 × 时隐藏 ▾ */ .birth-c-place-wrap.birth-c-datetime-shell { position: relative; } .birth-place-disclose { position: absolute; /* 对齐 .birth-c-datetime-shell .clearBtn 视觉中心（30px 槽 + 壳右内边 4px） */ right: 14px; top: 50%; width: 0; height: 0; margin: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; color: var(--text-dim); opacity: 0.5; transform: translateY(-35%); pointer-events: none; z-index: 1; } .birth-c-place-wrap:has(.clearBtn.isVisible) .birth-place-disclose { visibility: hidden; opacity: 0; } .birth-c-place-wrap:hover .birth-place-disclose { opacity: 0.8; color: var(--text-main); } .birth-c-place-wrap:has(.clearBtn.isVisible):hover .birth-place-disclose { opacity: 0; } /* source: /style_birth_identity_narrow.css?v=15 */ /* 出生姓名性别窄屏；由 style_birth_identity.css 拆出；须在其之后、style_birth_fields.css 之前 */ @media (max-width: 720px) { /* 窄屏：乾坤/历法视觉面随卡片等比收矮；点按热区用伪元素扩到 44，避免整托盘像方块 */ #tab-birth .birth-name-gender-wrap .birth-pill-tray { min-width: 0; min-height: 0; height: auto; padding: calc(2px * var(--birth-scale, 1)); gap: calc(2px * var(--birth-scale, 1)); align-items: center; border-radius: calc(14px * var(--birth-scale, 1)); } #tab-birth .birth-pill { min-height: 0; display: flex; align-items: center; position: relative; } #tab-birth .birth-pill::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--touch-min, 44px); transform: translateY(-50%); } #tab-birth .birth-pill > span { position: relative; z-index: 1; min-width: 0; min-height: 0; height: var(--birth-seg-face-h, 30px); padding: 0 calc(8px * var(--birth-scale, 1)); border-radius: calc(10px * var(--birth-scale, 1)); font-size: var(--birth-ui-font-size, 13px); } #tab-birth .birth-pill__text { font-size: inherit; letter-spacing: 0.04em; } #tab-birth .birth-cal-seg.seg { min-height: 0; height: auto; padding: calc(2px * var(--birth-scale, 1)); gap: calc(2px * var(--birth-scale, 1)); align-items: center; border-radius: calc(14px * var(--birth-scale, 1)); } #tab-birth .birth-cal-seg .segBtn { position: relative; padding: 0 calc(8px * var(--birth-scale, 1)); font-size: var(--birth-ui-font-size, 13px); letter-spacing: 0.04em; min-height: 0; height: var(--birth-seg-face-h, 30px); border-radius: calc(10px * var(--birth-scale, 1)); } #tab-birth .birth-cal-seg .segBtn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--touch-min, 44px); transform: translateY(-50%); } /* * iOS：会弹出软键盘的控件 <16px 会整页放大。 * 时间/地点为只读点选壳；可键入的输入框与粘贴框同策略： * 展示态跟 --birth-field-font-size 与全表单对齐，聚焦再抬到 16 防缩放。 */ #tab-birth .birth-c-input-trailing, #tab-birth input.birth-store-group-select, #tab-birth .birth-c-select.birth-store-group-select, #tab-birth .birth-c-tag-stack .pan-store-tag-composer-input { font-size: var(--birth-field-font-size, 13px) !important; } #tab-birth .birth-c-input-trailing:focus, #tab-birth input.birth-store-group-select:focus, #tab-birth .birth-c-select.birth-store-group-select:focus, #tab-birth .birth-c-tag-stack .pan-store-tag-composer-input:focus { font-size: 16px !important; } /* 反查年份小格：槽宽固定，保持 16 直读 */ #bazi-reverse-year-wrap .bazi-reverse-year-inputs input[type="number"] { font-size: 16px !important; } #tab-birth .birth-c-bazi-textareas textarea, #tab-birth #bazi-input, #tab-birth .birth-c-bazi-textareas textarea::placeholder, #tab-birth #bazi-input::placeholder { font-size: var(--birth-paste-font-size, calc(14px * var(--birth-scale, 1))) !important; } #tab-birth .birth-c-bazi-textareas textarea:focus, #tab-birth #bazi-input:focus { font-size: 16px !important; } } .birth-c-datetime-shell .clearBtn { position: relative !important; right: auto !important; top: auto !important; translate: none !important; inset: auto !important; box-sizing: border-box; width: var(--birth-clear-size, 30px); height: var(--birth-clear-size, 30px); padding: 0; opacity: 0.8; pointer-events: auto; flex-shrink: 0; margin: 0; border: none; border-radius: 9px; background: transparent; box-shadow: none; } .birth-c-datetime-shell .clearBtn:not(.isVisible) { opacity: 0; pointer-events: none; /* 仍占位，保证时间/地点右缘槽宽一致 */ visibility: hidden; } .birth-c-datetime-shell .clearBtn:hover { background: var(--card-hover); border-color: transparent; color: var(--text-main); } .birth-c-row--reverse-range { flex-wrap: nowrap; align-items: center; gap: 12px; } #bazi-reverse-year-wrap.birth-c-row { padding: 0; border-bottom: none; min-height: 0; } #bazi-reverse-year-wrap .birth-c-reverse-year-shell.birth-c-field-shell { flex: 1; min-width: 0; padding: 0; overflow: hidden; } #bazi-reverse-year-wrap .bazi-reverse-year-inputs { flex: 1; min-width: 0; min-height: var(--birth-control-h, 40px); display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2px 4px; padding: 0 10px; box-sizing: border-box; } #bazi-reverse-year-wrap .bazi-reverse-year-inputs input[type="number"] { width: 3.35rem; height: calc(28px * var(--birth-scale, 1)); padding: 0 2px; border: none; border-radius: 8px; background: transparent; font-size: var(--birth-field-font-size, 12px); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; color: var(--text-main); appearance: textfield; -moz-appearance: textfield; cursor: text; } #bazi-reverse-year-wrap .bazi-reverse-year-inputs input[type="number"]::-webkit-outer-spin-button, #bazi-reverse-year-wrap .bazi-reverse-year-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #bazi-reverse-year-wrap .bazi-reverse-year-inputs input[type="number"]:focus { outline: none; background: color-mix(in srgb, var(--text-main) 6%, transparent); box-shadow: none; } #bazi-reverse-year-wrap .bazi-reverse-year-sep { flex: 0 0 auto; font-size: var(--birth-label-font-size, 11px); font-weight: 700; color: var(--text-muted); opacity: 0.45; user-select: none; padding: 0 1px; } /* source: /style_birth_identity_narrow_label.css?v=2 */ .bazi-reverse-year-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--birth-meta-font-size, 12px); font-weight: 600; color: var(--text-main); } .bazi-reverse-year-label>span:first-child { color: var(--text-dim); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--birth-label-font-size, 10px); } @media (max-width: 599px) { .birth-c-bazi-tools-row .birth-c-bazi-textarea-slot textarea { max-height: 96px !important; } } @media (max-width: 520px) { /* 小屏下保持单行：左右年份略收窄，箭头居中 */ #bazi-reverse-year-wrap .bazi-reverse-year-inputs { flex-wrap: nowrap; justify-content: center; gap: 6px; } #bazi-reverse-year-wrap .bazi-reverse-year-inputs input[type="number"] { width: 3.1rem; padding: 0 4px; } #bazi-reverse-year-wrap .bazi-reverse-year-sep { font-size: var(--birth-label-font-size, 10px); opacity: 0.68; } } .birth-c-select-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; } /* source: /style_birth_fields.css?v=7 */ /* 出生表单字段与开关轨；深色覆写见 style_birth_fields_switch.css */ /* * 壳内输入字型统一：时间 / 地点 / 分组 / 标签 composer * 一律 --birth-field-font-size + 600；勿再写死 12px/13px 分叉。 */ #tab-birth .birth-c-datetime-shell input#birth-datetime, #tab-birth .birth-c-datetime-shell input#birth-place, #tab-birth input.birth-c-select.birth-store-group-select, #tab-birth .birth-c-select.birth-store-group-select, #tab-birth .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input, #study-pan-preview .studyPanNoteView .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input { font-family: inherit; font-size: var(--birth-field-font-size, 13px) !important; font-weight: 600; letter-spacing: normal; line-height: 1.35; color: var(--text-main); } #tab-birth .birth-c-datetime-shell input#birth-datetime::placeholder, #tab-birth .birth-c-datetime-shell input#birth-place::placeholder, #tab-birth input.birth-c-select.birth-store-group-select::placeholder, #tab-birth .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input::placeholder, #study-pan-preview .studyPanNoteView .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input::placeholder { color: var(--text-dim); opacity: 0.75; font-weight: 500; font-size: inherit; } /* 出生：分组输入框、标签展开输入 — 与时间壳同 token */ .birth-c-field-shell { box-sizing: border-box; justify-content: flex-start; align-items: stretch; min-height: var(--birth-control-h, 40px); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--surface-radius-sm, 11px); overflow: hidden; transition: border-color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease; } .birth-c-field-shell:hover { border-color: color-mix(in srgb, var(--text-main) 22%, transparent); } .birth-c-field-shell:focus-within { border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 18%, transparent); } .birth-c-field-shell .birth-c-select.birth-store-group-select, .birth-c-field-shell input.birth-c-select.birth-store-group-select { flex: 1 1 0; min-width: 0; width: auto !important; } .birth-c-select.birth-store-group-select, input.birth-c-select.birth-store-group-select { width: 100%; text-align: right; padding: 8px 10px 8px 12px !important; background: transparent !important; border: none !important; appearance: none; -webkit-appearance: none; box-shadow: none !important; color: var(--text-main); font-weight: 600; font-size: var(--birth-field-font-size, 13px) !important; line-height: 1.35; font-family: inherit; } input.birth-c-select.birth-store-group-select::placeholder { color: var(--text-dim); opacity: 0.75; font-weight: 500; } input.birth-c-select.birth-store-group-select:focus { outline: none; } .birth-c-field-shell input.birth-c-select.birth-store-group-select:focus { box-shadow: none !important; } .birth-c-select-chevron { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: 0.55; display: flex; } .birth-c-field-shell .birth-c-select-chevron { position: static; transform: none; align-self: stretch; width: 42px; flex-shrink: 0; align-items: center; justify-content: center; margin: 0; padding: 0; border-left: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent); opacity: 0.7; background: color-mix(in srgb, var(--text-main) 3%, transparent); pointer-events: none; } .birth-c-row--place-pref .birth-c-place-wrap--pref { flex: 1; min-width: 0; max-width: 100%; } .birth-c-row--place-pref .birth-c-place-wrap--pref input { cursor: pointer; } /* source: /style_birth_fields_tools.css?v=15 */ /* 出生表单：「保存到命例库」折叠 + 工具行（清空常显 / 自动入库在折叠内） */ .birth-store-prefs { margin-top: 2px; padding-top: 2px; border-top: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent); } .birth-store-prefs__toggle { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 10px; width: calc(100% - var(--birth-form-inline, 18px) * 0.7); margin: 0 calc(var(--birth-form-inline, 18px) * 0.35); padding: 12px calc(var(--birth-form-inline, 18px) * 0.65); min-height: var(--birth-icon-col, var(--touch-min, 44px)); border: none; border-radius: var(--surface-radius-sm, 11px); background: transparent; color: var(--text-dim); font: inherit; font-size: var(--birth-meta-font-size, 12px); font-weight: 800; letter-spacing: 0.12em; text-align: left; cursor: pointer; box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease; } .birth-store-prefs__toggle:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 5%, transparent); } .birth-store-prefs__toggle:active { background: color-mix(in srgb, var(--text-main) 9%, transparent); } .birth-store-prefs__toggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; } .birth-store-prefs__toggle-text { flex: 0 0 auto; } .birth-store-prefs__summary { flex: 1 1 auto; min-width: 0; font-size: var(--birth-meta-font-size, 11px); font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .birth-store-prefs:not(.isCollapsed) .birth-store-prefs__summary { /* 展开时只隐文字：span 仍是 flex 占位，把箭头固定在右缘，与分组/标签行箭头对齐 */ visibility: hidden; } .birth-store-prefs__chevron { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; opacity: 0.55; transition: transform var(--motion-fast, 0.15s) ease, opacity var(--motion-fast, 0.15s) ease; } .birth-store-prefs__chevron svg { display: block; } .birth-store-prefs:not(.isCollapsed) .birth-store-prefs__chevron { transform: rotate(180deg); opacity: 0.85; } .birth-store-prefs__body[hidden] { display: none !important; } /* 展开后降噪：次要配置不抢底部「排盘」 */ #tab-birth .birth-store-prefs:not(.isCollapsed) .birth-store-prefs__body { opacity: 0.92; } #tab-birth .birth-store-prefs:not(.isCollapsed) .birth-c-row { min-height: calc(var(--birth-row-min, 48px) * 0.92); padding-top: calc(var(--birth-row-pad-y, 13px) * 0.85); padding-bottom: calc(var(--birth-row-pad-y, 13px) * 0.85); } #tab-birth .birth-store-prefs:not(.isCollapsed) .birth-c-row__icon-lead__text, #tab-birth .birth-store-prefs:not(.isCollapsed) .birth-switch-label { color: var(--text-muted); } #tab-birth .birth-store-prefs:not(.isCollapsed) .birth-c-field-shell, #tab-birth .birth-store-prefs:not(.isCollapsed) .birth-c-select-wrap { border-color: color-mix(in srgb, var(--text-main) 10%, var(--input-border, transparent)); } .birth-c-row--tools-autosave { justify-content: flex-end; border-bottom: none; } .birth-c-row--tools-clear { justify-content: flex-start; border-bottom: none; } /* 清空已并入底部 actions；保留类名以免旧引用报错 */ #tab-birth .birth-c-row--tools-clear { display: none; } #tab-birth .birth-c-row--tools .birth-c-store-auto-save-switch { flex-shrink: 0; max-width: 100%; } .birth-tools-clear-btn { appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: var(--birth-icon-col, var(--touch-min, 44px)); margin: 0; padding: 0 4px; border: none; border-radius: 4px; background: transparent; color: var(--text-muted, var(--text-dim)); cursor: pointer; box-sizing: border-box; font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--motion-fast, 0.15s) ease, opacity var(--motion-fast, 0.15s) ease; } .birth-tools-clear-btn .birth-switch-label { color: inherit; } .birth-tools-clear-btn__svg { display: block; width: var(--birth-icon-size, 18px); height: var(--birth-icon-size, 18px); flex-shrink: 0; pointer-events: none; } .birth-tools-clear-btn:hover:not(:disabled) { color: var(--text-main); } .birth-tools-clear-btn:active:not(:disabled) { opacity: 0.75; } .birth-tools-clear-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } [data-theme="light"] .birth-tools-clear-btn { color: var(--text-muted); } [data-theme="light"] .birth-tools-clear-btn:hover:not(:disabled) { color: var(--text-main); } [data-theme="light"] .birth-store-prefs { border-top-color: color-mix(in srgb, var(--text-main) 10%, transparent); } .birth-c-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-size: var(--birth-ui-font-size, 13px); font-weight: 600; color: var(--text-muted); user-select: none; } .birth-c-check input { width: var(--birth-icon-size, 18px); height: var(--birth-icon-size, 18px); accent-color: var(--control-accent); } .birth-switch { display: inline-flex; align-items: center; gap: 10px; width: auto; height: auto; min-height: var(--birth-icon-col, var(--touch-min, 44px)); flex-shrink: 0; cursor: pointer; touch-action: manipulation; } .birth-switch-label { font-size: var(--birth-ui-font-size, 13px); font-weight: 600; line-height: 1.2; color: var(--text-muted); user-select: none; white-space: nowrap; } .birth-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .birth-switch-track { position: relative; width: calc(46px * var(--birth-scale, 1)); height: calc(28px * var(--birth-scale, 1)); flex-shrink: 0; background: rgba(255, 255, 255, 0.92); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); transition: background 0.22s ease, border-color 0.22s ease; } .birth-switch-track::after { content: ""; position: absolute; width: calc(22px * var(--birth-scale, 1)); height: calc(22px * var(--birth-scale, 1)); left: calc(2px * var(--birth-scale, 1)); top: 50%; transform: translateY(-50%); background: #111111; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); transition: transform 0.22s cubic-bezier(0.2, 0.85, 0.25, 1.1); } .birth-switch input:checked+.birth-switch-track { background: #111111; border-color: rgba(255, 255, 255, 0.22); } .birth-switch input:checked+.birth-switch-track::after { transform: translate(calc(18px * var(--birth-scale, 1)), -50%); background: #f8fafc; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } .birth-switch input:focus-visible+.birth-switch-track { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28); } /* source: /style_birth_fields_switch.css?v=2 */ /* 出生表单开关深色覆写；由 style_birth_fields.css 拆出；须在其之后、style_birth_bazi.css 之前 */ /* 深色主题：强制压过表单区局部规则 — 关闭黑轨白球 / 开启白轨黑球 */ html:not([data-theme="light"]) #app-view-pan #tab-birth .birth-switch .birth-switch-track, html:not([data-theme="light"]) #tab-birth .birth-switch .birth-switch-track { background: #111111 !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } html:not([data-theme="light"]) #app-view-pan #tab-birth .birth-switch .birth-switch-track::after, html:not([data-theme="light"]) #tab-birth .birth-switch .birth-switch-track::after { background: #f8fafc !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; } html:not([data-theme="light"]) #app-view-pan #tab-birth .birth-switch input:checked+.birth-switch-track, html:not([data-theme="light"]) #tab-birth .birth-switch input:checked+.birth-switch-track { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(255, 255, 255, 0.35) !important; } html:not([data-theme="light"]) #app-view-pan #tab-birth .birth-switch input:checked+.birth-switch-track::after, html:not([data-theme="light"]) #tab-birth .birth-switch input:checked+.birth-switch-track::after { background: #111111 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important; } .birth-c-subcard { border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(0, 0, 0, 0.16); } #tab-birth .birth-c-subcard { border-top: none; } .birth-c-place-wrap { flex: 1; min-width: 0; max-width: 100%; } /* 出生地已挂 birth-c-datetime-shell：清除钮走时间行同款（见 style_birth_identity_narrow.css） */ /* source: /style_birth_bazi.css?v=15 */ /* 出生八字直排槽；粘贴反查见 style_birth_bazi_paste.css */ /* 八字粘贴区：清除钮在文案槽内；右侧顺序切换钮 */ .birth-c-bazi-textareas .birth-c-bazi-textarea-slot { position: relative; flex: 1; min-width: 0; } /* 可视图标约 14px；热区拉到触控建议尺寸 */ .birth-c-bazi-textareas .birth-c-bazi-textarea-slot .clearBtn { top: 50%; translate: 0 -50%; width: var(--birth-paste-clear-hit, 44px); height: var(--birth-paste-clear-hit, 44px); padding: 0; border-radius: 8px; right: 0; border: none; background: transparent; box-shadow: none; color: var(--text-muted); } .birth-c-bazi-textareas .birth-c-bazi-textarea-slot .clearBtn > svg { width: var(--birth-paste-icon, 14px) !important; height: var(--birth-paste-icon, 14px) !important; } .birth-c-bazi-textareas .birth-c-bazi-textarea-slot .clearBtn:hover { background: var(--card-hover); border-color: transparent; color: var(--text-main); } .birth-c-bazi-textareas .birth-c-bazi-textarea-slot textarea { padding: 0 12px 0 12px !important; min-height: 0 !important; height: var(--birth-paste-line, 38px); max-height: var(--birth-paste-line, 38px); /* 干支正文：略大、略重，柱间靠空格换行，勿字中切开 */ font-size: var(--birth-paste-font-size, calc(14px * var(--birth-scale, 1))); font-weight: 800; letter-spacing: 0.06em; font-variant-east-asian: proportional-width; color: var(--text-main); line-height: var(--birth-paste-line, 38px); resize: none; overflow-x: hidden; overflow-y: hidden; white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; } /* 有清除钮时才为热区留右内边，避免空态/只读回写时右侧大块留白 */ .birth-c-bazi-textareas .birth-c-bazi-textarea-slot:has(.clearBtn.isVisible) textarea { padding-right: calc(var(--birth-paste-clear-hit, 44px) + 2px) !important; } .birth-c-bazi-textareas .birth-c-bazi-textarea-slot textarea::placeholder { font-weight: 500; letter-spacing: 0.08em; color: var(--text-dim); opacity: 0.55; } /* 粘贴区 + 顺序切换：单一外框（唯一 chrome 定义，勿在 paste.css 再写一套） */ .birth-c-bazi-input-combo { display: flex; align-items: stretch; gap: 0; width: 100%; min-width: 0; box-sizing: border-box; min-height: var(--birth-paste-line, var(--birth-control-h, 40px)); border: 1px solid var(--input-border); border-radius: var(--surface-radius-sm, 12px); background: var(--input-bg); overflow: hidden; transition: border-color var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease; } .birth-c-bazi-input-combo:hover { border-color: color-mix(in srgb, var(--text-main) 22%, transparent); } .birth-c-bazi-input-combo:focus-within { border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 18%, transparent); } /* source: /style_birth_bazi_textarea.css?v=12 */ /* WebKit：flex 内 textarea 默认 min-width:auto 会拒绝收缩，与槽位 flex:1 叠加易异常变窄 */ .birth-c-bazi-input-combo textarea { min-width: 0; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .birth-c-bazi-input-combo textarea:focus { border: none !important; box-shadow: none !important; background: transparent !important; } /* 八字直排：四柱格与粘贴区同宽收束、居中，与卡片内公历/农历时间区留白节奏接近 */ #birth-mode-bazi .birth-c-bazi-inner { container-type: inline-size; container-name: birth-bazi; position: relative; overflow: visible; display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; padding: 6px var(--birth-form-inline, 18px) 12px; --birth-paste-line: var(--birth-control-h, 40px); --birth-paste-font-size: calc(14px * var(--birth-scale, 1)); --birth-paste-toggle-pad: calc(8px * var(--birth-scale, 1)); --birth-paste-icon: calc(14px * var(--birth-scale, 1)); --birth-paste-clear: calc(28px * var(--birth-scale, 1)); --birth-paste-clear-hit: max(44px, calc(40px * var(--birth-scale, 1))); } /* source: /style_birth_bazi_paste.css?v=9 */ /* 出生八字粘贴区；工具行见 style_birth_bazi_paste_tools.css */ .birth-c-bazi-tools-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; min-width: 0; margin-top: 8px; box-sizing: border-box; min-height: 0; height: auto; border: none; border-radius: 0; background: transparent; overflow: visible; } .birth-c-bazi-paste-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; width: 100%; box-sizing: border-box; } .birth-c-bazi-paste-head__lead { display: inline-flex; align-items: baseline; gap: 8px; flex: 0 1 auto; min-width: 0; } .birth-c-bazi-paste-label { flex: 0 0 auto; margin: 0; font-size: var(--birth-label-font-size, 11px); font-weight: 700; letter-spacing: 0.14em; color: var(--text-dim); line-height: 1.35; cursor: pointer; } /* 逆序：标签旁弱开关；默认关，开启才加重 */ .birth-c-bazi-paste-head .bazi-order-toggle { appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 0; padding: 2px 0; min-height: 28px; border: none; border-radius: 0; background: transparent; box-shadow: none; color: var(--text-dim); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--motion-fast, 0.15s) ease, opacity var(--motion-fast, 0.15s) ease; } .birth-c-bazi-paste-head .bazi-order-toggle__label { font-size: var(--birth-label-font-size, 11px); font-weight: 600; letter-spacing: 0.08em; line-height: 1.35; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-main) 22%, transparent); text-underline-offset: 0.18em; user-select: none; } .birth-c-bazi-paste-head .bazi-order-toggle:hover { color: var(--text-muted); } .birth-c-bazi-paste-head .bazi-order-toggle:hover .bazi-order-toggle__label { text-decoration-color: color-mix(in srgb, var(--text-main) 40%, transparent); } .birth-c-bazi-paste-head .bazi-order-toggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; border-radius: 4px; } .birth-c-bazi-paste-head .bazi-order-toggle.bazi-order-toggle--reverse { color: var(--text-main); } .birth-c-bazi-paste-head .bazi-order-toggle.bazi-order-toggle--reverse .bazi-order-toggle__label { font-weight: 800; text-decoration-color: color-mix(in srgb, var(--accent, var(--primary)) 55%, transparent); } .birth-c-bazi-paste-status { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--birth-meta-font-size, 11px); font-weight: 600; letter-spacing: 0.02em; line-height: 1.35; text-align: right; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .birth-c-bazi-paste-status[data-kind="ok"] { color: var(--success, var(--text-main)); } .birth-c-bazi-paste-status[data-kind="warn"] { color: var(--danger, #c23b3b); } .birth-c-bazi-paste-status[data-kind="info"] { color: var(--text-muted); } .birth-c-bazi-tools-row__paste { flex: 0 0 auto; width: 100%; min-width: 0; max-width: none; min-height: var(--birth-paste-line, var(--birth-control-h, 40px)); height: auto; } .birth-c-bazi-tools-row__paste.birth-c-bazi-textareas { width: 100%; max-width: none; margin-top: 0; } .birth-c-bazi-tools-row .birth-c-bazi-input-combo { width: 100%; min-width: 0; min-height: var(--birth-paste-line, 40px); height: auto; align-items: center; } .birth-c-bazi-tools-row .birth-c-bazi-textarea-slot { display: flex; align-items: stretch; height: auto; flex: 1 1 auto; min-width: 0; } .birth-c-bazi-tools-row .birth-c-bazi-textarea-slot textarea { height: auto !important; min-height: var(--birth-paste-line, 40px) !important; max-height: 88px !important; padding: 0 12px 0 12px !important; font-size: var(--birth-paste-font-size, calc(14px * var(--birth-scale, 1))); font-weight: 800; letter-spacing: 0.06em; font-variant-east-asian: proportional-width; color: var(--text-main); line-height: var(--birth-paste-line, 40px); white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; overflow-x: hidden; overflow-y: hidden; box-sizing: border-box; field-sizing: content; resize: none; } .birth-c-bazi-tools-row .birth-c-bazi-textarea-slot:has(.clearBtn.isVisible) textarea { padding-right: calc(var(--birth-paste-clear-hit, 44px) + 2px) !important; } .birth-c-bazi-tools-row .birth-c-bazi-textarea-slot textarea::placeholder { font-size: inherit; font-weight: 500; letter-spacing: 0.08em; color: var(--text-dim); opacity: 0.55; } /* 空态 placeholder 不换行，避免整槽被撑成两行、右侧切换钮变成竖条 */ .birth-c-bazi-tools-row .birth-c-bazi-textarea-slot textarea:placeholder-shown { white-space: nowrap; text-overflow: ellipsis; height: var(--birth-paste-line, 40px) !important; min-height: var(--birth-paste-line, 40px) !important; max-height: var(--birth-paste-line, 40px) !important; line-height: var(--birth-paste-line, 40px); overflow-y: hidden; } /* source: /style_birth_bazi_paste_tools.css?v=11 */ /* 出生八字粘贴工具行；由 style_birth_bazi_paste.css 拆出；须在其之后 */ .birth-c-bazi-tools-row .birth-c-bazi-textarea-slot textarea.bazi-paste--multiline { line-height: 1.5; letter-spacing: 0.05em; padding-top: 8px !important; padding-bottom: 8px !important; overflow-y: auto; } .birth-c-bazi-tools-row .birth-c-bazi-textarea-slot .clearBtn { top: 50%; translate: 0 -50%; } /* 反查选项：与入库折叠同族，和粘贴区分开 */ .bazi-reverse-prefs { width: 100%; margin-top: 6px; padding-top: 2px; border-top: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent); box-sizing: border-box; } .bazi-reverse-prefs__toggle { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 0; min-height: var(--birth-icon-col, var(--touch-min, 44px)); border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: var(--birth-meta-font-size, 12px); font-weight: 800; letter-spacing: 0.12em; text-align: left; cursor: pointer; box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .bazi-reverse-prefs__toggle:hover { color: var(--text-main); } .bazi-reverse-prefs__toggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; border-radius: 4px; } .bazi-reverse-prefs__toggle-text { flex: 0 0 auto; } .bazi-reverse-prefs__summary { flex: 1 1 auto; min-width: 0; font-size: var(--birth-label-font-size, 11px); font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .bazi-reverse-prefs:not(.isCollapsed) .bazi-reverse-prefs__summary { display: none; } .bazi-reverse-prefs__chevron { flex: 0 0 auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.55; transition: transform 0.15s ease; } .bazi-reverse-prefs:not(.isCollapsed) .bazi-reverse-prefs__chevron { transform: rotate(180deg); opacity: 0.85; } .bazi-reverse-prefs__body[hidden] { display: none !important; } #bazi-reverse-year-wrap.birth-c-row--reverse-range { flex: 0 0 auto; width: 100%; max-width: none; min-width: 0; margin: 0; padding-left: 0; padding-right: 0; align-self: stretch; box-sizing: border-box; } #birth-mode-bazi .bazi-input-grid { /* 容器宽 + 视口高/短边；行高跟字形走，勿用 44 把整列撑成方柱 */ --birth-bazi-glyph-size: clamp(14px, min(5cqw, 3.2svh, 4vmin), 20px); /* 空态环略大于字（约 1.2×），增强宽格内的可点示能 */ --birth-bazi-ring-size: clamp(16px, min(5.4cqw, 3.4svh, 4.3vmin), 26px); --birth-bazi-ring-border: max(1.5px, calc(var(--birth-bazi-ring-size) * 0.1)); --birth-bazi-stem-row: clamp(28px, calc(var(--birth-bazi-glyph-size) + 10px), 42px); --birth-bazi-branch-row: clamp(28px, calc(var(--birth-bazi-glyph-size) + 12px), 44px); --birth-bazi-col-pad-x: clamp(4px, min(2.5cqw, 1.6svh), 18px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 100%; gap: 0; box-sizing: border-box; padding: clamp(2px, 0.8svh, 6px) 0 clamp(4px, 1.2svh, 10px); border: none; border-radius: 0; background: transparent; text-align: center; } @container birth-bazi (max-width: 360px) { #birth-mode-bazi .bazi-input-grid { --birth-bazi-glyph-size: clamp(14px, min(6.5cqw, 3svh, 4.2vmin), 18px); --birth-bazi-ring-size: clamp(16px, min(7.2cqw, 3.2svh, 4.6vmin), 22px); } } @container birth-bazi (min-width: 640px) { #birth-mode-bazi .bazi-input-grid { --birth-bazi-glyph-size: clamp(16px, min(4.2cqw, 3.4svh, 3.8vmin), 20px); --birth-bazi-ring-size: clamp(18px, min(4.8cqw, 4svh, 4.2vmin), 26px); } } @media (max-height: 640px) { #birth-mode-bazi .bazi-input-grid { --birth-bazi-glyph-size: clamp(13px, min(4.8cqw, 2.8svh, 3.6vmin), 18px); --birth-bazi-ring-size: clamp(16px, min(5.2cqw, 3svh, 4vmin), 22px); } } #birth-mode-bazi .bazi-input-grid .bazi-col { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; padding: clamp(1px, 0.4cqi, 3px) var(--birth-bazi-col-pad-x); box-sizing: border-box; } #birth-mode-bazi .bazi-col-label { display: block; width: 100%; text-align: center; font-size: var(--birth-label-font-size, 10px); font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; padding: clamp(1px, 0.5cqi, 4px) 2px clamp(1px, 0.35cqi, 3px); color: var(--text-dim); user-select: none; } #birth-mode-bazi .bazi-col[data-pillar="day"] .bazi-col-label { color: color-mix(in srgb, var(--accent) 78%, var(--text-dim)); font-weight: 800; } /* source: /style_birth_bazi_glyphs.css?v=6 */ /* 出生八字直排选字字形；由 style_birth_bazi.css 拆出；须在其之后、style_birth_bazi_candidates.css 之前 */ /* 空位环与学习盘 / 库房共用 --bazi-empty-ring*（theme）；尺寸用本表面 --birth-bazi-ring-* */ #birth-mode-bazi .bazi-piece-wrap { position: relative; overflow: visible; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 0; box-sizing: border-box; } #birth-mode-bazi .bazi-col .bazi-piece-wrap:nth-child(2) { height: var(--birth-bazi-stem-row); min-height: var(--birth-bazi-stem-row); } #birth-mode-bazi .bazi-col .bazi-piece-wrap:nth-child(3) { height: var(--birth-bazi-branch-row); min-height: var(--birth-bazi-branch-row); padding-top: 0; } #birth-mode-bazi .bazi-input-grid input.bazi-piece { appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; padding: 0 !important; border: none; background: transparent; box-shadow: none !important; outline: none; text-align: center; font-weight: 700; line-height: 1; cursor: pointer; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: 100%; transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease; } #birth-mode-bazi .bazi-input-grid input.bazi-piece::placeholder { color: transparent; opacity: 0; } /* 空位：热区铺满格子，视觉环画在中央 */ #birth-mode-bazi .bazi-input-grid input.bazi-piece:placeholder-shown { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: 100%; border-radius: 0 !important; border: none !important; background-color: transparent !important; background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--birth-bazi-ring-border)), var(--bazi-empty-ring) calc(50% - var(--birth-bazi-ring-border)), var(--bazi-empty-ring) 50%, transparent 50.5% ) !important; background-size: var(--birth-bazi-ring-size) var(--birth-bazi-ring-size) !important; background-position: center !important; background-repeat: no-repeat !important; color: transparent !important; caret-color: transparent; font-size: 0 !important; box-shadow: none !important; } #birth-mode-bazi .bazi-piece-wrap:focus-within input.bazi-piece:placeholder-shown, #birth-mode-bazi .bazi-input-grid input.bazi-piece:placeholder-shown:focus { background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--birth-bazi-ring-border)), var(--bazi-empty-ring-focus) calc(50% - var(--birth-bazi-ring-border)), var(--bazi-empty-ring-focus) 50%, transparent 50.5% ) !important; } #birth-mode-bazi .bazi-piece-wrap:hover input.bazi-piece:placeholder-shown { background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--birth-bazi-ring-border)), var(--bazi-empty-ring-hover) calc(50% - var(--birth-bazi-ring-border)), var(--bazi-empty-ring-hover) 50%, transparent 50.5% ) !important; } /* 已填：热区铺满格子，字号仍用 glyph-size */ #birth-mode-bazi .bazi-input-grid input.bazi-piece:not(:placeholder-shown) { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: 100%; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: var(--birth-bazi-glyph-size) !important; } #birth-mode-bazi .bazi-piece-wrap:hover input.bazi-piece:not(:placeholder-shown), #birth-mode-bazi .bazi-input-grid input.bazi-piece:not(:placeholder-shown):hover { transform: scale(1.02); } #birth-mode-bazi .bazi-input-grid input.bazi-piece:focus-visible { outline: none; box-shadow: none !important; } #birth-mode-bazi .bazi-piece-wrap:focus-within input.bazi-piece:not(:placeholder-shown) { transform: scale(1.02); } /* source: /style_birth_bazi_glyphs_picker.css?v=3 */ /* 出生八字：选字面板锚定在触发格下方，不悬浮于视口 */ #birth-mode-bazi .bazi-input-grid, #birth-mode-bazi .bazi-input-grid .bazi-col { overflow: visible; } #birth-mode-bazi #bazi-piece-picker { position: static; inset: auto; z-index: auto; pointer-events: none; } #birth-mode-bazi #bazi-piece-picker:not(.isHidden) { pointer-events: none; } #birth-mode-bazi .bazi-piece-wrap--picker-open { z-index: 3; } #birth-mode-bazi .bazi-piece-picker__panel.bazi-piece-picker__panel--anchored { position: absolute; top: calc(100% + 5px); left: 50%; right: auto; transform: translateX(-50%); z-index: 12; box-sizing: border-box; /* 覆盖通用面板 200px 下限；窄屏随四柱容器收缩，避免顶出卡片被 overflow 裁边 */ min-width: 0; width: min(188px, 100cqi); max-width: min(92vw, 320px, 100cqi); margin: 0; padding: clamp(6px, 2cqi, 12px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); } #birth-mode-bazi .bazi-piece-picker__panel--anchored .bazi-piece-picker__grid { gap: clamp(3px, 1.2cqi, 6px); } #birth-mode-bazi .bazi-piece-picker__panel--anchored .bazi-piece-picker__opt { font-size: clamp(13px, 4.4cqi, 17px); border-radius: clamp(6px, 1.6cqi, 8px); } #birth-mode-bazi .bazi-piece-picker__panel.bazi-piece-picker__panel--anchored::before { content: ""; position: absolute; top: -5px; /* 窄屏水平钳位后由 JS 写入 --bazi-picker-nub-x，使指示线仍对准触发格中心 */ left: var(--bazi-picker-nub-x, 50%); width: 2px; height: 5px; transform: translateX(-50%); background: color-mix(in srgb, var(--panel-border, rgba(255, 255, 255, 0.12)) 88%, transparent); pointer-events: none; } #birth-mode-bazi .bazi-piece-picker__panel.bazi-piece-picker__panel--anchored.bazi-piece-picker__panel--above { top: auto; bottom: calc(100% + 5px); } #birth-mode-bazi .bazi-piece-picker__panel.bazi-piece-picker__panel--anchored.bazi-piece-picker__panel--above::before { top: auto; bottom: -5px; } /* 宽屏下勿套用双列 input-row-group；粘贴区始终通栏 */ #birth-mode-bazi .birth-c-bazi-tools-row__paste { grid-template-columns: 1fr; } /* 平板及以上：四柱与粘贴区随卡片内宽伸展，避免 640 列两侧空带过宽 */ @media (min-width: 721px) { #birth-mode-bazi .bazi-pillar-candidates { max-width: 100%; } } #birth-mode-bazi .birth-c-bazi-tools-row__paste .birth-c-bazi-textarea-slot textarea { min-height: 0; } /* source: /style_birth_bazi_candidates.css?v=5 */ /* 八字反查候选容器；网格见 style_birth_bazi_candidates_grid.css */ /* 八字直排：五虎遁月柱 / 五鼠遁时柱 快捷候选 */ .bazi-pillar-candidates { width: 100%; max-width: min(100%, 360px); margin-top: clamp(8px, 3cqi, 12px); display: flex; flex-direction: column; gap: clamp(8px, 3cqi, 12px); } .bazi-pillar-candidate-block { display: flex; flex-direction: column; gap: clamp(4px, 1.6cqi, 6px); } .bazi-pillar-candidate-label { font-size: var(--birth-label-font-size, 11px); font-weight: 700; letter-spacing: 0.05em; color: var(--text-dim); text-align: center; } .bazi-pillar-candidate-grid { --pillar-cand-cols: 4; display: grid; grid-template-columns: repeat(var(--pillar-cand-cols), max-content); gap: clamp(4px, 1.6cqi, 6px); justify-content: center; width: 100%; } .bazi-pillar-candidate-chip { appearance: none; margin: 0; padding: clamp(4px, 1.5cqi, 6px) clamp(6px, 2.4cqi, 10px); min-width: clamp(2.4rem, 10cqi, 3.1rem); min-height: clamp(32px, 9.5cqi, 40px); box-sizing: border-box; border-radius: clamp(8px, 2.6cqi, 10px); border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.28); font-size: var(--birth-chip-font-size, 14px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; cursor: pointer; line-height: 1.2; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; -webkit-tap-highlight-color: transparent; } .bazi-pillar-candidate-chip:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); } .bazi-pillar-candidate-chip:active { transform: scale(0.97); } .bazi-pillar-candidate-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.45); } .bazi-pillar-candidate-chip.isSelected { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.14); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.28); } /* 八字反查候选容器与出生表单对齐 */ #birth-mode-bazi #bazi-date-candidates.date-candidates--embedded { box-sizing: border-box; width: 100%; margin-top: 4px; padding: 0 var(--birth-form-inline, 18px) calc(14px * var(--birth-scale, 1)); border-top: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent); padding-top: calc(12px * var(--birth-scale, 1)); } #birth-mode-bazi #bazi-date-candidates .bazi-reverse-candidates-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin: 0 0 calc(4px * var(--birth-scale, 1)); padding: 0 2px; min-width: 0; } #birth-mode-bazi #bazi-date-candidates .bazi-reverse-candidates-head__label { flex: 0 0 auto; font-size: var(--birth-label-font-size, 11px); font-weight: 800; letter-spacing: 0.1em; color: var(--text-muted); } #birth-mode-bazi #bazi-date-candidates .bazi-reverse-candidates-head__meta { flex: 1 1 auto; min-width: 0; text-align: right; font-size: var(--birth-meta-font-size, 12px); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 操作提示：在卡片之前（先说明再点选），弱于标题 */ #birth-mode-bazi #bazi-date-candidates .bazi-reverse-candidates-hint { margin: 0 2px calc(8px * var(--birth-scale, 1)); padding: 0; font-size: var(--birth-label-font-size, 11px); line-height: 1.4; color: var(--text-dim); max-width: 52em; } #birth-mode-bazi #bazi-date-candidates .candidates-empty-hint { padding: 10px 2px 4px; font-size: var(--birth-ui-font-size, 13px); line-height: 1.45; opacity: 0.75; color: var(--text-muted); } /* source: /style_birth_bazi_candidates_grid.css?v=7 */ /* 出生日期候选网格壳；条目态见 style_birth_bazi_candidates_grid_item.css */ #birth-mode-bazi #bazi-date-candidates .candidates-list-shell { position: relative; width: 100%; min-width: 0; } #birth-mode-bazi #bazi-date-candidates .candidates-list { display: flex; flex-direction: column; gap: calc(10px * var(--birth-scale, 1)); width: 100%; } /* 窄屏可滚：底部淡出示能；滚到底取消淡出 */ #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list-shell::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(18px * var(--birth-scale, 1)); pointer-events: none; border-radius: 0 0 var(--surface-radius-sm, 11px) var(--surface-radius-sm, 11px); background: linear-gradient( to bottom, color-mix(in srgb, var(--panel-bg, var(--card-bg)) 0%, transparent), var(--panel-bg, var(--card-bg)) ); opacity: 1; transition: opacity var(--motion-fast, 0.15s) ease; } #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list-shell.candidates-list-shell--at-end::after { opacity: 0; } @media (max-width: 839px) { #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list--mobile-scroll { --bazi-candidate-scroll-rows: 2; max-height: calc( var(--bazi-candidate-item-h, 62px) * var(--bazi-candidate-scroll-rows) + (10px * var(--birth-scale, 1)) * (var(--bazi-candidate-scroll-rows) - 1) ); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: y proximity; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-main) 28%, transparent) transparent; padding-right: 4px; margin-right: -2px; } #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list--mobile-scroll .candidate-item { scroll-snap-align: start; flex-shrink: 0; } #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list--mobile-scroll::-webkit-scrollbar { width: 5px; } #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list--mobile-scroll::-webkit-scrollbar-thumb { border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 28%, transparent); } } @media (max-width: 519px) { #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list--mobile-scroll { --bazi-candidate-scroll-rows: 2; } } #birth-mode-bazi #bazi-date-candidates .bazi-reverse-candidates-footnote { /* 旧脚注类名保留以免缓存残留；新版用 .bazi-reverse-candidates-hint */ display: none; } @media (min-width: 520px) { #birth-mode-bazi #bazi-date-candidates .candidates-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--birth-scale, 1)) calc(12px * var(--birth-scale, 1)); } } @media (min-width: 520px) and (max-width: 839px) { #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list--mobile-scroll { /* 双列网格：仅露出 1 行（2 条），其余上下滑 */ --bazi-candidate-scroll-rows: 1; } } @media (min-width: 840px) { #birth-mode-bazi #bazi-date-candidates .candidates-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 宽屏也限高内滚，避免把「排盘」顶出首屏 */ #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list--mobile-scroll { --bazi-candidate-scroll-rows: 2; max-height: calc( var(--bazi-candidate-item-h, 62px) * var(--bazi-candidate-scroll-rows) + (10px * var(--birth-scale, 1)) * (var(--bazi-candidate-scroll-rows) - 1) ); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } #birth-mode-bazi #bazi-date-candidates.date-candidates--scroll .candidates-list-shell::after { display: block; } } /* source: /style_birth_bazi_candidates_grid_item.css?v=6 */ /* 出生日期候选条目态；由 style_birth_bazi_candidates_grid.css 拆出；须在其之后 */ #birth-mode-bazi #bazi-date-candidates .candidate-item { box-sizing: border-box; width: 100%; min-width: 0; min-height: calc(58px * var(--birth-scale, 1)); padding: calc(10px * var(--birth-scale, 1)) calc(14px * var(--birth-scale, 1)); border-radius: var(--surface-radius-sm, 11px); border: 1px solid var(--surface-border); background: color-mix(in srgb, var(--text-main) 3%, var(--card-bg)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 5%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease; --bazi-candidate-item-h: calc(60px * var(--birth-scale, 1)); } #birth-mode-bazi #bazi-date-candidates .candidate-item:hover { background: var(--card-hover); border-color: color-mix(in srgb, var(--text-main) 18%, transparent); box-shadow: none; } #birth-mode-bazi #bazi-date-candidates .candidate-item:active { transform: scale(0.992); } #birth-mode-bazi #bazi-date-candidates .candidate-item:focus-visible { outline: none; border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 28%, transparent); } #birth-mode-bazi #bazi-date-candidates .candidate-item--selected { border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border)); background: color-mix(in srgb, var(--accent) 10%, var(--card-bg)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 5%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); } #birth-mode-bazi #bazi-date-candidates .candidate-item--selected:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-border)); background: color-mix(in srgb, var(--accent) 14%, var(--card-bg)); } #birth-mode-bazi #bazi-date-candidates .candidate-item--selected:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 40%, transparent); } #birth-mode-bazi #bazi-date-candidates .candidate-item__stack { display: flex; flex-direction: column; gap: calc(4px * var(--birth-scale, 1)); flex: 1 1 auto; min-width: 0; } #birth-mode-bazi #bazi-date-candidates .candidate-item__body { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; min-width: 0; width: 100%; } /* source: /style_birth_bazi_candidates_grid_item_lunar.css?v=6 */ #birth-mode-bazi #bazi-date-candidates .candidate-item__lunar-row { font-size: var(--birth-label-font-size, 11px); font-weight: 500; line-height: 1.35; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #birth-mode-bazi #bazi-date-candidates .candidate-item__solar-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.25em; font-size: var(--birth-ui-font-size, 13px); font-weight: 700; line-height: 1.35; color: var(--text-main); } #birth-mode-bazi #bazi-date-candidates .candidate-item__solar-date { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; } #birth-mode-bazi #bazi-date-candidates .candidate-item__renyuan { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 0; max-width: 42%; padding: 2px 0 2px 4px; font-size: var(--birth-label-font-size, 11px); font-weight: 650; line-height: 1.3; color: var(--text-dim); letter-spacing: 0.02em; white-space: nowrap; text-align: right; } #birth-mode-bazi #bazi-date-candidates .candidate-item__renyuan-stem { font-weight: 800; font-size: 13px; margin-right: 1px; } @media (max-width: 400px) { #birth-mode-bazi #bazi-date-candidates .candidate-item { min-height: calc(56px * var(--birth-scale, 1)); padding: calc(10px * var(--birth-scale, 1)) calc(12px * var(--birth-scale, 1)); border-radius: calc(12px * var(--birth-scale, 1)); --bazi-candidate-item-h: calc(60px * var(--birth-scale, 1)); } #birth-mode-bazi #bazi-date-candidates .candidate-item__lunar-row { font-size: var(--birth-label-font-size, 11px); } #birth-mode-bazi #bazi-date-candidates .candidate-item__solar-row { font-size: var(--birth-meta-font-size, 12px); } #birth-mode-bazi #bazi-date-candidates .candidate-item__renyuan { font-size: 10.5px; max-width: 38%; } #birth-mode-bazi #bazi-date-candidates .candidate-item__renyuan-stem { font-size: 12px; } } .bazi-pillar-candidate-chip .ganzhi-stem, .bazi-pillar-candidate-chip .ganzhi-branch { display: inline; } .birth-c-row--eot { border-bottom: none; } .birth-c-check--full { width: auto; } @media (max-width: 720px) { #tab-birth.birth-form-shell { border-radius: var(--surface-radius, 16px); } .birth-c-row__label { max-width: 46%; } } /* source: /style_birth_wheel.css?v=4 */ /* 出生时间工具条与 picker 列；滚轮弹层见 style_birth_wheel_modal.css */ /* 出生时间：主表单分段、今、快速输入（风格沿用站点 seg / 玻璃） */ .birth-time-field .birth-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } /* 出生时间通栏：工具条与输入区拉满宽度 */ .birth-time-field.span2 .birth-time-toolbar { max-width: 100%; } .birth-time-field.span2 .birth-datetime-wrap { max-width: 100%; } /* 按八字：保存选项与表单对齐 */ .bazi-save-pref .row { margin-top: 0; } .birth-time-field .birth-cal-seg { flex: 1 1 auto; min-width: 0; } .birth-datetime-wrap { margin-top: 0; } .birth-datetime-wrap .birth-datetime-clear { box-sizing: border-box; width: 30px; height: 30px; padding: 0; border-radius: 9px; border: none; background: transparent; box-shadow: none; } .birth-datetime-wrap .birth-datetime-clear:hover { background: var(--card-hover); border-color: transparent; color: var(--text-main); } /* 按出生：库分组下拉（与文本框同风格） */ .birth-store-group-select { width: 100%; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-main); border-radius: 10px; padding: 8px 12px; font-size: var(--birth-field-font-size, 13px); font-weight: 600; font-family: inherit; outline: none; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .birth-store-group-select option { font-size: var(--birth-field-font-size, 13px); font-weight: 600; font-family: inherit; } .birth-store-group-select:hover { border-color: rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.4); } .birth-store-group-select:focus { border-color: rgba(255, 255, 255, 0.06); box-shadow: none; } .birth-c-field-shell .birth-store-group-select:hover, .birth-c-field-shell input.birth-store-group-select:hover { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .birth-c-field-shell .birth-store-group-select:focus, .birth-c-field-shell input.birth-store-group-select:focus { border-color: transparent !important; box-shadow: none !important; } /* source: /style_birth_wheel_picker.css?v=1 */ /* Picker Columns */ .picker { height: 280px; border-radius: 16px; background: transparent; margin: 12px; } .pickerCols { display: flex; position: relative; height: 200px; background: transparent; border-radius: 8px; overflow: hidden; } .pickerHighlight { position: absolute; top: 50%; left: 0; right: 0; height: 40px; transform: translateY(-50%); background: rgba(128, 128, 128, 0.08); border-top: 1px solid var(--filter-separator); border-bottom: 1px solid var(--filter-separator); pointer-events: none; z-index: 10; } .pickerCol { flex: 1; height: 200px; overflow-y: auto; scroll-snap-type: y mandatory; -ms-overflow-style: none; scrollbar-width: none; position: relative; z-index: 5; /* Lower than modal content but high enough to be interactable */ } .pickerCol::-webkit-scrollbar { display: none; } .placeItem { height: 40px; line-height: 40px; text-align: center; font-size: 15px; color: var(--text-dim); scroll-snap-align: center; transition: all 0.2s; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; } .placeItem.spacer { pointer-events: none; cursor: default; } .placeItem.isActive { color: var(--text-main); font-weight: 700; font-size: 17px; } /* source: /style_birth_wheel_modal.css?v=8 */ /* 出生滚轮弹层前半；头区见 style_birth_wheel_modal_head.css */ /* 出生公历时间：手机滚轮（与 modal / place 选择器同风格） */ .ghostBtn { appearance: none; -webkit-appearance: none; background: var(--btn-ghost-bg); border: 1px solid transparent; color: var(--btn-ghost-fg); font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 8px 10px; border-radius: var(--btn-radius, var(--surface-radius-sm, 11px)); box-sizing: border-box; transition: background var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease; } .ghostBtn:hover:not(:disabled) { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-fg-hover); } .ghostBtn:active:not(:disabled) { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-fg-hover); } .ghostBtn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } .ghostBtn:disabled { opacity: var(--btn-disabled-opacity, 0.45); cursor: not-allowed; } .dangerBtn { color: var(--danger); } .dangerBtn:hover:not(:disabled), .dangerBtn:active:not(:disabled) { background: var(--danger-muted); color: var(--danger); } /* 出生时间滚轮打开时锁横向滚动，避免放大后左右裁切 */ html.birth-wheel-open, html.birth-wheel-open body { overflow-x: hidden !important; overscroll-behavior: none; } /* 出生时间滚轮：屏幕居中（与命盘偏好弹层 / 出生地选择一致） */ #birth-wheel-modal.modal { justify-content: center; align-items: center; box-sizing: border-box; width: 100%; max-width: 100%; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: hidden; } .birth-wheel-sheet.modalSheet { width: min(520px, 100%); max-width: min(520px, calc(100% - 0px), calc(100vw - 32px)); max-height: min(420px, 68vh, calc(100dvh - 32px)); margin: auto; display: flex; flex-direction: column; box-sizing: border-box; overflow-x: hidden; min-width: 0; } .birth-wheel-head.modalHead { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 14px 16px 8px; flex-shrink: 0; } .birth-wheel-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .birth-wheel-icon-btn { flex: 0 0 auto; width: 38px; height: 38px; min-width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; } .birth-wheel-icon-btn--cancel { color: var(--text-muted); } /* source: /style_birth_wheel_modal_head.css?v=6 */ /* 出生滚轮弹层头/确认钮；由 style_birth_wheel_modal.css 拆出；须在其之后、style_birth_wheel_modal_narrow.css 之前 */ .birth-wheel-icon-btn--ok { color: var(--accent); } .birth-wheel-icon-btn:hover, .birth-wheel-icon-btn:active { background: transparent; } .birth-wheel-icon-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--focus-ring-color) 55%, transparent); outline-offset: 2px; } /* 桌面：主操作靠右下（古腾堡）；窄屏仍满宽拇指热区 */ @media (min-width: 721px) { .birth-wheel-foot { justify-content: flex-end; } .birth-wheel-done-btn { width: auto; min-width: 7.5em; padding-left: 22px; padding-right: 22px; } } /* source: /style_birth_wheel_modal_head_preview.css?v=10 */ /* 出生滚轮：手输为主、滚轮为辅；预览作主输入，滚轮折叠进「用滚轮微调」 */ #birth-wheel-modal input.birth-wheel-preview { flex-shrink: 0; box-sizing: border-box; width: calc(100% - 32px); max-width: calc(100% - 32px); margin: 2px 16px 4px; align-self: center; text-align: center; padding: 12px 14px; font: inherit; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-main); letter-spacing: 0.03em; border: 1px solid color-mix(in srgb, var(--text-main) 14%, transparent); border-radius: var(--surface-radius-sm, 11px); background: color-mix(in srgb, var(--text-main) 3.5%, var(--panel-bg, var(--card-bg))); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main) 5%, transparent); outline: none; appearance: none; -webkit-appearance: none; touch-action: manipulation; transition: color var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease; } #birth-wheel-modal input.birth-wheel-preview::placeholder { color: var(--text-dim); font-weight: 600; letter-spacing: 0.02em; opacity: 0.72; } #birth-wheel-modal input.birth-wheel-preview:focus, #birth-wheel-modal input.birth-wheel-preview:focus-visible { color: var(--text-main); border-color: var(--focus-ring-color); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 22%, transparent); background: var(--panel-bg, var(--card-bg)); } #birth-wheel-modal .birth-wheel-input-meta { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 16px 2px; min-width: 0; } #birth-wheel-modal .birth-wheel-hour-unk { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 0; min-height: 36px; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } #birth-wheel-modal .birth-wheel-hour-unk input { width: 16px; height: 16px; margin: 0; accent-color: var(--text-main); cursor: pointer; } #birth-wheel-modal .birth-wheel-hour-unk:has(input:checked) { color: var(--text-main); } #birth-wheel-modal .birth-wheel-hour-status { flex-shrink: 0; margin: 0 16px 6px; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.35; color: var(--text-main); text-align: left; } #birth-wheel-modal .birth-wheel-hour-status[hidden] { display: none !important; } #birth-wheel-modal .birth-wheel-wheel-toggle { appearance: none; -webkit-appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 6px 4px 6px 8px; min-height: 36px; border: none; border-radius: var(--surface-radius-sm, 11px); background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--motion-fast, 0.15s) ease, background var(--motion-fast, 0.15s) ease; } #birth-wheel-modal .birth-wheel-wheel-toggle:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 5%, transparent); } #birth-wheel-modal .birth-wheel-wheel-toggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } #birth-wheel-modal .birth-wheel-wheel-toggle.isExpanded { color: var(--text-main); } #birth-wheel-modal .birth-wheel-wheel-toggle__chevron { display: inline-block; width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); translate: 0 -1px; transition: transform var(--motion-fast, 0.15s) ease; } #birth-wheel-modal .birth-wheel-wheel-toggle.isExpanded .birth-wheel-wheel-toggle__chevron { transform: rotate(-135deg); translate: 0 2px; } #birth-wheel-modal .birth-wheel-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; } #birth-wheel-modal .birth-wheel-panel.isCollapsed, #birth-wheel-modal .birth-wheel-panel[hidden] { display: none !important; } /* 收起滚轮时弹层更矮，突出手输 */ #birth-wheel-modal:not(.birth-wheel--wheel-open) .birth-wheel-sheet.modalSheet { max-height: min(280px, 52vh, calc(100dvh - 32px)); } .birth-wheel-col-head { display: flex; flex-shrink: 0; align-items: stretch; /* 与 .birth-wheel-picker 左右边距一致，保证与五列竖直对齐 */ padding: 0; margin: 0 10px; border-radius: 0; background: transparent; border: none; /* 选区横线只留 pickerHighlight，避免双线噪声 */ } .birth-wheel-col-head span { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; min-height: var(--touch-min, 44px); text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--text-dim); padding: 0 2px; box-sizing: border-box; } .birth-wheel-picker.picker { flex: 1; min-height: 0; height: auto; margin: 0 10px 12px; max-height: 260px; } .birth-wheel-cols.pickerCols { height: 200px; max-height: 200px; background: transparent; } /* source: /style_birth_wheel_decade.css?v=9 */ /* 出生滚轮年代快选：列头「年」带轻量 disclosure 暗示；首次提示对齐年列 */ .birth-wheel-col-head-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex: 1.35 1 0; min-width: 0; min-height: var(--touch-min, 44px); margin: 0; border: none; background: transparent; box-shadow: none; text-align: center; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--text-dim); padding: 0 2px; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .birth-wheel-col-head-btn::after { content: ""; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4.5px solid currentColor; opacity: 0.5; margin-top: 1px; flex-shrink: 0; transition: transform 0.15s ease, opacity 0.15s ease; } .birth-wheel-col-head-btn:hover, .birth-wheel-col-head-btn:focus-visible { color: var(--text-main); } .birth-wheel-col-head-btn:hover::after, .birth-wheel-col-head-btn:focus-visible::after { opacity: 0.85; } .birth-wheel-col-head-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--focus-ring-color) 55%, transparent); outline-offset: 1px; } .birth-wheel-col-head-btn.isDecadeMode { color: var(--text-main); } .birth-wheel-col-head-btn.isDecadeMode::after { transform: rotate(180deg); opacity: 0.9; } /* 未用过年代快选：三角轻闪两下，提示可点 */ .birth-wheel-col-head-btn.needsDiscover::after { animation: birth-wheel-year-caret-nudge 1.4s ease-in-out 2; } @keyframes birth-wheel-year-caret-nudge { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .birth-wheel-col-head-btn.needsDiscover::after { animation: none; opacity: 0.85; } } .birth-wheel-decade-hint { display: flex; flex-shrink: 0; align-items: flex-start; margin: 0 10px 2px; padding: 0; line-height: 1.25; } .birth-wheel-decade-hint.isHidden { display: none; } .birth-wheel-decade-hint > span { flex: 1.35 1 0; min-width: 0; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); } #birth-wheel-modal.birth-wheel--decade-mode #birth-wheel-col-year .placeItem:not(.spacer) { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } @media (max-width: 720px) { .birth-wheel-col-head-btn { flex: 1.4 1 0; font-size: 10px; letter-spacing: 0.04em; padding: 0; gap: 2px; } .birth-wheel-col-head-btn::after { border-left-width: 3px; border-right-width: 3px; border-top-width: 4px; } .birth-wheel-decade-hint { margin: 0 2px 2px; } .birth-wheel-decade-hint > span { flex: 1.4 1 0; font-size: 9px; } } /* source: /style_birth_wheel_modal_narrow.css?v=6 */ /* 出生时间滚轮高亮线与窄屏；由 style_birth_wheel_modal.css 拆出；须在其之后、style_store_hits.css 之前 */ /* 横线画在 40px 高亮区内，避免 border-box 把有效高度吃成 38px */ .birth-wheel-cols .pickerHighlight { top: 50%; transform: translateY(-50%); height: 40px; border: none; background: transparent; box-shadow: inset 0 1px 0 var(--filter-separator), inset 0 -1px 0 var(--filter-separator); } .birth-wheel-col.pickerCol { flex: 1 1 0; min-width: 0; height: 100%; /* 与 JS 定位对齐；mandatory snap 会把选中行顶出高亮区 */ scroll-snap-type: none; } #birth-wheel-col-year { /* 「2026年」比「8月」宽，略多分宽避免窄屏裁切 */ flex: 1.35 1 0; } .birth-wheel-col .placeItem { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; max-width: 100%; height: 40px; line-height: 1; font-size: 14px; font-weight: 500; padding: 0 2px; text-align: center; overflow: hidden; white-space: nowrap; scroll-snap-align: none; transition: color 0.15s ease, font-weight 0.15s ease, font-size 0.15s ease; } .birth-wheel-col .placeItem.isActive { font-size: 16px; font-weight: 800; color: var(--text-main); } @media (max-width: 720px) { /* 出生地与出生时间滚轮：屏幕居中；齿轮选择器仍底部弹出 */ #place-modal.modal { align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); overflow: hidden; } #wheel-picker-modal.modal { align-items: flex-end; justify-content: center; padding: 0; overflow: hidden; } #wheel-picker-modal .modalMask { border-radius: 0; } .birth-wheel-head.modalHead { padding: 12px 12px 6px; gap: 8px; } .birth-wheel-title { font-size: 14px; letter-spacing: 0.02em; } } /* source: /style_birth_wheel_modal_narrow_sheet.css?v=9 */ /* 由 style_birth_wheel_modal_narrow.css 拆出；须在其之后 */ @media (max-width: 720px) { #birth-wheel-modal.modal { align-items: center; justify-content: center; width: 100%; max-width: 100%; padding: max(12px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); overflow: hidden; } #birth-wheel-modal .modalSheet.birth-wheel-sheet { width: 100%; max-width: 100%; margin: auto; max-height: min(88vh, 520px, calc(100dvh - 24px)); padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)); overflow-x: hidden; min-width: 0; } #birth-wheel-modal input.birth-wheel-preview { font-size: 16px; margin: 2px 0 4px; padding: 11px 12px; letter-spacing: 0.02em; } #birth-wheel-modal:not(.birth-wheel--wheel-open) .birth-wheel-sheet.modalSheet { max-height: min(260px, 48vh, calc(100dvh - 24px)); } .birth-wheel-col-head { margin: 0 2px; padding: 0; } .birth-wheel-col-head span { font-size: 10px; letter-spacing: 0.04em; padding: 0; } .birth-wheel-picker.picker { margin: 0 2px 10px; } .birth-wheel-cols.pickerCols { overflow: hidden; } #birth-wheel-col-year, .birth-wheel-col-head-btn { flex: 1.4 1 0; } .birth-wheel-col .placeItem { font-size: 12px; font-weight: 500; padding: 0 0; } .birth-wheel-col .placeItem.isActive { font-size: 13px; font-weight: 800; } #wheel-picker-modal .wheel-picker-manual-input { font-size: 16px; } #place-modal .modalSheet { width: min(520px, calc(100vw - 24px)); max-width: min(520px, calc(100vw - 24px)); margin: auto; max-height: min(620px, calc(100dvh - 24px)); padding-bottom: 0; } #wheel-picker-modal .wheel-picker-sheet { width: 100%; max-width: 100%; margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); } } /* source: /style_store_hits.css?v=7 */ /* 库房搜索结果选中行反转色；横幅/命中布局见 style_store_hits_banner.css */ .searchResult { overflow-y: auto; padding: 6px 12px; background: var(--bg-dark); border: 1px solid var(--filter-separator); border-radius: var(--surface-radius-sm, 11px); max-height: 320px; width: 100%; } /* 命例库命中列表：抽屉内高度由 style_pan_subnav 锁在视口剩余空间，此处不放开 */ .storePanelResult, #store-panel-result { box-sizing: border-box; width: 100%; min-width: 0; overflow-x: hidden; } .searchHit { padding: 10px 10px; border-radius: var(--surface-radius-sm, 11px); cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 0 6px; } .searchHit:hover { background: var(--filter-chip-bg); } .searchHit.searchHit--empty { cursor: default; justify-content: center; padding: 28px 12px; color: var(--text-dim); } .searchHit.searchHit--empty:hover { background: transparent; } /* 库房选中行：浅色黑底白字 / 深色白底黑字（五行色除外；金在反转底上保对比） */ html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected { background: #ffffff !important; box-shadow: none !important; } html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected:hover { background: color-mix(in srgb, #ffffff 94%, var(--text-main)) !important; box-shadow: none !important; } html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitName, html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitBirthCell, html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitTagsCell, html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitBaziSlot, html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitBirth--lunar-only, html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitOwnerInline, html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitTagMore { color: #111111 !important; } html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .genderBadge { color: #111111 !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitBirth--stack :is( .candidate-item__stack, .candidate-item__lunar-row, .candidate-item__solar-row, .candidate-item__solar-date ) { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #111111 !important; } html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitBirth--stack .candidate-item__lunar-row { color: rgba(17, 17, 17, 0.72) !important; } html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitBaziGrid__stem.metal, html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitBaziGrid__br.metal { color: #000000 !important; } /* source: /style_store_hits_selected.css?v=4 */ [data-theme="light"] .searchHit.searchHit--store.searchHit--selected { background: #111111 !important; box-shadow: none !important; } [data-theme="light"] .searchHit.searchHit--store.searchHit--selected:hover { background: #1a1a1a !important; box-shadow: none !important; } [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .storeHitName, [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .storeHitBirthCell, [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .storeHitTagsCell, [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .storeHitBaziSlot, [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .storeHitBirth--lunar-only, [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .storeHitOwnerInline, [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .storeHitTagMore { color: #ffffff !important; } [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .genderBadge { color: #ffffff !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .storeHitBirth--stack :is( .candidate-item__stack, .candidate-item__lunar-row, .candidate-item__solar-row, .candidate-item__solar-date ) { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #ffffff !important; } [data-theme="light"] .searchHit.searchHit--store.searchHit--selected .storeHitBirth--stack .candidate-item__lunar-row { color: rgba(255, 255, 255, 0.72) !important; } [data-theme="light"] #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected *:not(.wood):not(.fire):not(.earth):not(.metal):not(.water):not(.hitDelLink):not(:is(.hitDelLink *)) { color: #ffffff !important; } [data-theme="light"] #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete), [data-theme="light"] .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete) { color: #ffffff !important; } [data-theme="light"] #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):hover, [data-theme="light"] .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):hover { color: #ffffff !important; background: transparent !important; } [data-theme="light"] #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitTagsCell .storeHitTag, [data-theme="light"] #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitHeadMeta .storeHitTag { border-radius: var(--tag-badge-radius) !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.16) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitTagsCell .storeHitTag, html:not([data-theme="light"]) .searchHit.searchHit--store.searchHit--selected .storeHitHeadMeta .storeHitTag { border-radius: var(--tag-badge-radius) !important; } html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected *:not(.wood):not(.fire):not(.earth):not(.metal):not(.water):not(.storeHitName--placeholder):not(.hitDelLink):not(:is(.hitDelLink *)) { color: #111111 !important; } html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete), html:not([data-theme="light"]) .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete) { color: #111111 !important; } html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):hover, html:not([data-theme="light"]) .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):hover { color: #111111 !important; background: transparent !important; } html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitTagsCell .storeHitTag, html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitHeadMeta .storeHitTag { color: #111111 !important; background: rgba(17, 17, 17, 0.08) !important; border: 1px solid rgba(17, 17, 17, 0.22) !important; } html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitBirth--stack .candidate-item__lunar-row { color: rgba(17, 17, 17, 0.72) !important; } /* 选中行仍保留删除钮红色（与学习盘记录删除一致，不被整行反色覆盖） */ html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink, html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink *, html:not([data-theme="light"]) .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink, html:not([data-theme="light"]) .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink *, [data-theme="light"] #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink, [data-theme="light"] #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink *, [data-theme="light"] .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink, [data-theme="light"] .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink * { color: #ef4444 !important; } html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink:hover, html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink:hover *, html:not([data-theme="light"]) .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink:hover, html:not([data-theme="light"]) .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink:hover * { color: #fb7185 !important; } [data-theme="light"] #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink:hover, [data-theme="light"] #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink:hover *, [data-theme="light"] .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink:hover, [data-theme="light"] .storePanelResult .searchHit.searchHit--store.searchHit--selected .storeHitRowActions .hitDelLink:hover * { color: #dc2626 !important; } /* source: /style_store_hits_banner.css?v=13 */ /* 库房同八字横幅与命中操作；八字柱位见 style_store_hits_bazi.css */ /* ── 排盘工作台：相同八字行动条 ─────────────────────────────────── */ .panSameBaziNotice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 8px 10px; border-radius: var(--surface-radius-sm, 11px); border: 1px solid color-mix(in srgb, var(--text-main) 14%, transparent); background: color-mix(in srgb, var(--text-main) 4%, var(--panel-bg, var(--card-bg, var(--bg)))); box-sizing: border-box; min-width: 0; scroll-margin-top: 12px; } .panSameBaziNotice.isHidden, .panSameBaziNotice[hidden] { display: none !important; } @media (prefers-reduced-motion: no-preference) { .panSameBaziNotice:not(.isHidden):not([hidden]) { animation: panSameBaziNoticeIn 200ms cubic-bezier(0.16, 1, 0.3, 1) both; } } @keyframes panSameBaziNoticeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .panSameBaziNotice__mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 auto; color: var(--text-muted); line-height: 0; } .panSameBaziNotice__mark .ui-icon-svg { width: 15px; height: 15px; } .panSameBaziNotice__copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .panSameBaziNotice__title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--text-main); line-height: 1.3; text-wrap: pretty; } .panSameBaziNotice__count { font-variant-numeric: tabular-nums; font-weight: 800; } .panSameBaziNotice__desc { margin: 0; font-size: 11.5px; font-weight: 550; color: var(--text-dim); line-height: 1.35; text-wrap: pretty; } .panSameBaziNotice__cta { appearance: none; margin: 0; padding: 0 2px 0 8px; min-height: 32px; flex: 0 0 auto; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 4px; border: none; border-radius: 0; background: transparent; color: var(--text-main); font: inherit; font-size: 12px; font-weight: 650; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; box-shadow: none; transition: color var(--motion-fast, 0.15s) ease, opacity var(--motion-fast, 0.15s) ease; } .panSameBaziNotice__cta::after { content: ""; width: 0.38em; height: 0.38em; margin-top: 0.05em; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.55; flex: 0 0 auto; } .panSameBaziNotice__cta:hover { color: var(--text-main); opacity: 0.78; background: transparent; border: none; } .panSameBaziNotice__cta:hover::after { opacity: 0.85; } .panSameBaziNotice__cta:active { transform: none; opacity: 0.62; color: var(--text-main); background: transparent; } .panSameBaziNotice__cta:focus-visible { outline: 2px solid var(--focus-ring-color, var(--accent)); outline-offset: 3px; border-radius: 4px; } [data-theme="light"] .panSameBaziNotice__cta, [data-theme="light"] .panSameBaziNotice__cta:hover, [data-theme="light"] .panSameBaziNotice__cta:active { background: transparent !important; border: none !important; color: var(--text-main) !important; box-shadow: none !important; } [data-theme="light"] .panSameBaziNotice { border-color: color-mix(in srgb, var(--text-main) 12%, transparent); background: color-mix(in srgb, var(--text-main) 3%, #ffffff); } @media (max-width: 560px) { .panSameBaziNotice { grid-template-columns: auto minmax(0, 1fr) auto; } .panSameBaziNotice__cta { grid-column: auto; width: auto; min-height: 36px; justify-self: end; padding-right: 0; } } /* ── 同八字对照列表（记录抽屉） ─────────────────────────────────── 横排抱团：条数+提示 | 四柱；底部分隔仍全宽，内容不拉满制造假留白 */ .storeSameBaziHead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 4px; padding: 4px 2px 10px; border-bottom: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent); box-sizing: border-box; min-width: 0; } .storeSameBaziHead__text { display: flex; flex-direction: column; gap: 1px; flex: 0 1 auto; min-width: 0; } .storeSameBaziHead__meta { display: flex; align-items: baseline; gap: 4px; min-width: 0; color: var(--text-main); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; } .storeSameBaziHead__count { font-variant-numeric: tabular-nums; font-weight: 800; } .storeSameBaziHead__label { font-weight: 650; } .storeSameBaziHead__bazi { flex: 0 0 auto; min-width: 0; } .storeSameBaziHead__bazi .storeHitBaziGrid { justify-content: flex-start; font-size: 14px; } .storeSameBaziHead__hint { margin: 0; font-size: 11.5px; font-weight: 550; color: var(--text-dim); line-height: 1.3; } /* 对照模式：行内不再重复相同四柱，只留差异信息 */ .storePanelResult--same-bazi .searchHit--store .storeHitBaziSlot { display: none !important; } .storePanelResult--same-bazi .searchHit.searchHit--store { padding-top: 8px; padding-bottom: 8px; gap: 2px; } .storePanelResult--same-bazi .searchHit--store .storeHitName { max-width: 56%; font-size: 13.5px; } /* 旧横幅类保留空规则以免残留 DOM 难看；新路径用 storeSameBaziHead */ .storeSameBaziBanner { display: none !important; } .searchHit--bazi-match { border-left: none !important; background: transparent !important; border-radius: 0 !important; margin-bottom: 0; } /* 命例库命中行：列表内实际布局见 #store-panel-result / .storePanelResult 下栅格规则 */ .searchHit--store { flex-wrap: wrap; align-items: flex-start; gap: 8px; } /* 库搜索结果：编辑 / 删除为图标按钮，语义靠 title / aria-label */ /* source: /style_store_hits_banner_actions.css?v=1 */ .hitDelLink, .hitEditLink { appearance: none; border: none; background: transparent; padding: 7px; flex: 0 0 auto; cursor: pointer; color: rgba(148, 163, 184, 0.65); border-radius: 10px; transition: color 0.18s ease, background 0.18s ease, transform 0.15s ease; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; -webkit-tap-highlight-color: transparent; } .hitEditLink { margin: 0 0 0 6px; } .hitDelLink { margin: 0 0 0 2px; color: #f87171 !important; } .hitDelLink .hitDelIcon, .hitDelLink .ui-icon-svg--delete, .hitDelLink svg, .hitEditLink .pan-edit-icon, .hitEditLink .ui-icon-svg--edit, .hitEditLink svg { display: block; pointer-events: none; } .searchHit:hover .hitDelLink { color: rgba(251, 146, 166, 0.95); } .hitDelLink:hover { color: #fb7185 !important; background: transparent; box-shadow: none; } .hitDelLink:active { background: transparent; box-shadow: none; transform: scale(0.94); } .searchHit:hover .hitEditLink { color: rgba(var(--accent-rgb), 0.95); } .hitEditLink:hover { color: var(--accent) !important; background: transparent; box-shadow: none; } .hitEditLink:active { background: transparent; box-shadow: none; transform: scale(0.94); } .input-row-group { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* source: /style_store_hits_banner_narrow.css?v=1 */ @media (max-width: 720px) { .input-row-group { grid-template-columns: 1fr; } } .searchHit .sub { font-size: 12px; color: var(--text-muted); margin-left: auto; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .searchHit .storeHitTitle { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; row-gap: 2px; } /* source: /style_store_hits_bazi.css?v=3 */ /* 命例库命中行八字柱；出生行见 style_store_hits_bazi_birth.css */ /* 与四柱输入格一致：天干、地支五行色（支用 baziBranchElementClass） 挂在组件自身，便于同造表头等非 .searchHit 宿主复用 */ .storeHitBaziGrid__stem.wood, .storeHitBaziGrid__br.wood { color: #52f08c; } .storeHitBaziGrid__stem.fire, .storeHitBaziGrid__br.fire { color: #ff7e92; } .storeHitBaziGrid__stem.earth, .storeHitBaziGrid__br.earth { color: #fcd34d; } .storeHitBaziGrid__stem.metal, .storeHitBaziGrid__br.metal { color: #ffffff; } .storeHitBaziGrid__stem.water, .storeHitBaziGrid__br.water { color: var(--water); } /* 甲辰 丁丑 壬午 辛丑 → 天干一行、地支一行，四柱（或三柱）等宽列 */ .storeHitBaziGrid { display: inline-grid; grid-template-columns: repeat(var(--store-hit-bazi-cols, 4), minmax(0.85em, auto)); grid-template-rows: auto auto; column-gap: 0.28em; row-gap: 0; vertical-align: middle; text-align: center; font-weight: 700; line-height: 1.12; letter-spacing: 0.02em; } .searchHit--store .storeHitBaziGrid { align-self: center; } .storeHitBaziGrid__stem { grid-row: 1; } .storeHitBaziGrid__br { grid-row: 2; color: var(--text-dim); opacity: 0.92; } .storeHitBaziGrid__br.wood, .storeHitBaziGrid__br.fire, .storeHitBaziGrid__br.earth, .storeHitBaziGrid__br.metal, .storeHitBaziGrid__br.water { opacity: 1; } .searchHit .storeHitBirth { color: var(--text-muted); font-size: 13px; } .searchHit .storeHitBirthYearOnly { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; } /* source: /style_store_hits_bazi_birth.css?v=2 */ /* 命中行出生文案；分组徽见 style_store_hits_bazi_badge.css */ .searchHit .storeHitBirth--stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; width: fit-content; max-width: 100%; min-width: 0; font-size: 11.5px; line-height: 1.3; vertical-align: middle; } .searchHit .storeHitBirth--stack .candidate-item__stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .searchHit .storeHitBirth--stack .candidate-item__lunar-row { font-size: 10.5px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .searchHit .storeHitBirth--stack .candidate-item__solar-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.25em; font-size: 11px; font-weight: 650; line-height: 1.3; color: rgba(255, 255, 255, 0.9); } .searchHit .storeHitBirth--stack .candidate-item__solar-date { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; } .searchHit .storeHitBirth--stackPlain { display: inline; color: var(--text-muted); font-size: 12px; line-height: 1.35; vertical-align: middle; } /* 与反查候选卡同构：年 | 公历月日+农历 | 时刻或时辰 */ .searchHit .storeHitBirth--grid { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; vertical-align: middle; } .searchHit .storeHitBirth__year { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-muted); } .searchHit .storeHitBirth__mid { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.2; text-align: left; } .searchHit .storeHitBirth__solar { font-size: 12px; opacity: 0.92; } .searchHit .storeHitBirth__lunar { font-size: 12px; opacity: 0.78; } .searchHit .storeHitBirth__shichen { font-weight: 800; font-size: 12px; min-width: 2.75em; text-align: right; color: var(--text-muted); } /* source: /style_store_hits_bazi_badge.css?v=5 */ /* 命例库命中行分组徽；由 style_store_hits_bazi_birth.css 拆出；须在其之后 */ /* 命例库命中行分组徽：与 #store-panel-groups .groupTabWrap 同外形变量 */ .groupBadge { margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--group-badge-min-h); max-height: var(--group-badge-max-h); padding: 5px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: color-mix(in srgb, var(--text-main) 88%, transparent); border: 1px solid color-mix(in srgb, var(--text-main) 28%, transparent); border-radius: var(--group-badge-radius); background: color-mix(in srgb, var(--text-main) 8%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .storeHitTag { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--tag-badge-min-h); max-height: var(--tag-badge-max-h); padding: 5px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: color-mix(in srgb, var(--text-main) 88%, transparent); border: 1px solid color-mix(in srgb, var(--text-main) 28%, transparent); border-radius: var(--tag-badge-radius); background: color-mix(in srgb, var(--text-main) 8%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .searchHit.searchHit--store.searchHit--selected .groupBadge, #store-panel-result .searchHit--store.searchHit--selected .groupBadge, .storePanelResult .searchHit--store.searchHit--selected .groupBadge, html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitGroupCell .groupBadge, html:not([data-theme="light"]) #app-view-pan #store-query-module #store-panel-result .searchHit.searchHit--store.searchHit--selected .storeHitHeadMeta .groupBadge { border-radius: var(--group-badge-radius) !important; color: #111111 !important; background: rgba(17, 17, 17, 0.08) !important; border: 1px solid rgba(17, 17, 17, 0.22) !important; } [data-theme="light"] #store-panel-result .searchHit--store .groupBadge, [data-theme="light"] .storePanelResult .searchHit--store .groupBadge { border-radius: var(--group-badge-radius) !important; background: #ffffff !important; color: #111111 !important; border-color: rgba(17, 17, 17, 0.12) !important; } [data-theme="light"] #store-panel-result .searchHit--store.searchHit--selected .groupBadge, [data-theme="light"] .storePanelResult .searchHit--store.searchHit--selected .groupBadge { border-radius: var(--group-badge-radius) !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.16) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } .searchHit .storeHitName { font-weight: 700; color: var(--text); margin-right: 2px; font-size: 12px; } .searchHit .genderBadge { display: inline-block; margin-right: 4px; font-size: 11px; font-weight: 800; color: var(--text-muted); border: 1px solid color-mix(in srgb, var(--text-main) 28%, transparent); background: color-mix(in srgb, var(--text-main) 8%, transparent); padding: 1px 6px; border-radius: var(--surface-radius-sm, 11px); line-height: 1.2; vertical-align: middle; } .searchHit.searchHit--store .genderBadge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1em; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; line-height: 1; vertical-align: unset; align-self: center; margin-right: 0; border: none; background: transparent; box-shadow: none; padding: 0; color: var(--text-muted); } /* source: /style_pan_flow_cols.css?v=5 */ /* 运程列半幅大字前半；旁注见 style_pan_flow_cols_drill.css */ /* DaYun Header Interaction */ .dayun-header { cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; border-radius: var(--surface-radius-sm, 11px); padding: 4px; } .dayun-header:hover { background: color-mix(in srgb, var(--text-main) 8%, transparent); } .dayun-header.isActive { background: rgba(var(--accent-rgb), 0.2); border: 1px solid rgba(var(--accent-rgb), 0.5); } /* 运程列铬：墨笺灰阶分层（干支五行色见 *_colors / theme_detail） */ .col-compare-header, .col-compare-cell { background: rgba(var(--accent-rgb), 0.07); animation: fadeIn 0.3s ease; } .col-compare-header { color: var(--accent); } .col-liunian-header, .col-liunian-cell { background: rgba(var(--accent-rgb), 0.055); animation: fadeIn 0.3s ease; } .col-liunian-header { color: color-mix(in srgb, var(--accent) 88%, transparent); } .col-liuyue-header, .col-liuyue-cell { background: rgba(var(--accent-rgb), 0.04); animation: fadeIn 0.3s ease; } .col-liuyue-header { color: color-mix(in srgb, var(--accent) 72%, transparent); } .col-liuri-header, .col-liuri-cell { background: rgba(var(--accent-rgb), 0.03); animation: fadeIn 0.3s ease; } .col-liuri-header { color: color-mix(in srgb, var(--accent) 58%, transparent); } .col-liushi-header, .col-liushi-cell { background: rgba(var(--accent-rgb), 0.05); animation: fadeIn 0.3s ease; } .col-liushi-header { color: var(--accent); } /* * 运程列（大运/流年/流月/流日/流时）：列宽下限须容纳天干旁注 + 长生角标列（数字上、地支下）。 * 桌面端直接约束 th/td；手机 drill 等分见 @media ≤900px 的 --pan-drill-col-floor。 */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill { /* 半幅大字 + 旁注偏移 + 角标副列（数字上、地支下） */ --pan-drill-flow-col-min: max(68px, calc(0.5 * (1em + 32px) + 14px + 1.5em)); } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill :is( th.col-compare-header, th.col-liunian-header, th.col-liuyue-header, th.col-liuri-header, th.col-liushi-header, td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) { overflow: visible; min-width: var(--pan-drill-flow-col-min); box-sizing: border-box; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill:not(.pan-mobile-compact-cells) :is( th.col-compare-header, th.col-liunian-header, th.col-liuyue-header, th.col-liuri-header, th.col-liushi-header, td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) { width: auto; } /* source: /style_pan_flow_cols_drill.css?v=3 */ /* 运程列旁注/角标；由 style_pan_flow_cols.css 拆出；须在其之后、style_pan_flow_cols_theme.css 之前 */ /* 运程列：旁注右缘贴列内，长生角标列不溢出 compare/流年等单元格（桌面 + 手机 drill 共用） */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container { min-width: var(--pan-drill-flow-col-min); box-sizing: border-box; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text { right: 0; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill:not(.pan-mobile-compact-cells) .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text { left: 50%; padding-left: calc(var(--pan-stem-glyph-size, 24px) * 0.48 + 1px); } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container .god-text.changsheng-label .changsheng-phase-text { display: flex; align-items: flex-end; flex-wrap: nowrap; white-space: nowrap; max-width: 100%; min-width: 0; box-sizing: border-box; } /* source: /style_pan_flow_cols_drill_phase.css?v=3 */ /* 运程列长生：角标（6辰 / 4午）不可被 flex 挤成残字 */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container > .god-text { overflow: visible; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container .god-text.changsheng-label .changsheng-phase-inner { flex-shrink: 0; min-width: min-content; max-width: none; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container .god-text.changsheng-label .changsheng-phase-text--marked .changsheng-phase-inner { gap: 1px 2px; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) .stem-container .god-text.changsheng-label .changsheng-phase-sub-col { display: inline-flex; flex-direction: column; flex-shrink: 0; min-width: min-content; } /* source: /style_pan_flow_cols_theme.css?v=5 */ /* 运程列深浅主题着色前半；长生/藏干细节见 style_pan_flow_cols_theme_detail.css；长生神煞着色见 style_pan_flow_cols_theme_god.css */ [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( th.col-compare-header, td.col-compare-cell, th.col-liunian-header, td.col-liunian-cell, th.col-liuyue-header, td.col-liuyue-cell, th.col-liuri-header, td.col-liuri-cell, th.col-liushi-header, td.col-liushi-cell ) { background: #111111 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-compare-header { color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-liunian-header { color: rgba(255, 255, 255, 0.9) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-liuyue-header { color: rgba(255, 255, 255, 0.76) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-liuri-header { color: rgba(255, 255, 255, 0.62) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-liushi-header { color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) :is(.glyph, .hiddenGlyph)>span { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important; text-shadow: none !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.wood>span, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.wood .hiddenGlyph>span { color: #52f08c !important; } /* source: /style_pan_flow_cols_theme_hidden.css?v=1 */ [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.fire>span, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.fire .hiddenGlyph>span { color: #ff7e92 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.earth>span, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.earth .hiddenGlyph>span { color: #fcd34d !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.metal>span, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.metal .hiddenGlyph>span { color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.water>span, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.water .hiddenGlyph>span { color: #0ea5e9 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text { color: #cbd5e1 !important; } /* source: /style_pan_flow_cols_theme_god.css?v=1 */ /* 运程列长生神煞着色；由 style_pan_flow_cols_theme.css 拆出；须在其之后、style_pan_flow_cols_theme_detail.css 之前 */ [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label { color: rgba(226, 232, 240, 0.92) !important; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label>div:not(.changsheng-phase-text) { color: rgba(248, 250, 252, 0.95) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label .changsheng-phase-text { color: rgba(203, 213, 225, 0.9) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.pan-label-ten-god, .pan-ten-god-stack) { color: rgba(248, 250, 252, 0.95) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).wood { color: #52f08c !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).fire { color: #ff7e92 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).earth { color: #fcd34d !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).metal { color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).water { color: #0ea5e9 !important; } /* source: /style_pan_flow_cols_theme_detail.css?v=2 */ /* 运程列主题着色：长生副列/藏干细节；干支力度见 style_pan_flow_cols_theme_detail_stem.css；须在 theme/god 之后 */ [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-mark-num { color: rgba(203, 213, 225, 0.88) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.wood { color: #52f08c !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.fire { color: #ff7e92 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.earth { color: #fcd34d !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.metal { color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.water { color: #0ea5e9 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenPart__label { color: rgba(148, 163, 184, 0.78) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph:not(.stem-glyph-clickable) .pan-stem-strength-score--hidden { color: rgba(203, 213, 225, 0.88) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph.stem-glyph-clickable .pan-stem-strength-score--hidden { color: rgba(226, 232, 240, 0.92) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph.stem-glyph-clickable:hover .pan-stem-strength-score--hidden, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph.stem-glyph-clickable:active .pan-stem-strength-score--hidden, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph.stem-glyph-clickable:focus-within .pan-stem-strength-score--hidden { color: #ffffff !important; } /* source: /style_pan_flow_cols_theme_detail_stem.css?v=3 */ /* 运程列干支力度/自坐着色；由 style_pan_flow_cols_theme_detail.css 拆出；须在其之后、style_pan_drill_title.css 之前 */ [data-theme="light"] :is(#app-view-pan #pan, #app-view-study #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .stem-container .glyph-wrapper.stem-glyph-clickable .pan-stem-strength-score { color: rgba(226, 232, 240, 0.92) !important; font-weight: 600; } [data-theme="light"] :is(#app-view-pan #pan, #app-view-study #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .stem-container .glyph-wrapper.stem-glyph-clickable:hover .pan-stem-strength-score, [data-theme="light"] :is(#app-view-pan #pan, #app-view-study #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .stem-container .glyph-wrapper.stem-glyph-clickable:active .pan-stem-strength-score, [data-theme="light"] :is(#app-view-pan #pan, #app-view-study #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .stem-container .glyph-wrapper.stem-glyph-clickable:focus-within .pan-stem-strength-score { color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main { color: rgba(248, 250, 252, 0.95) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.wood { color: #52f08c !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.fire { color: #ff7e92 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.earth { color: #fcd34d !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.metal { color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.water { color: #0ea5e9 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label .phase-main:not(.wood):not(.fire):not(.earth):not(.metal):not(.water), [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label .phase-sub:not(.wood):not(.fire):not(.earth):not(.metal):not(.water) { color: rgba(248, 250, 252, 0.95) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .pan-shen-sha-item { /* 浅色主题运程列为墨底：神煞用浅墨 */ color: rgba(255, 255, 255, 0.72) !important; } /* source: /style_pan_drill_title.css?v=5 */ /* 运程 drill 表浅色列着色；深色见 style_pan_drill_title_dark.css */ /* * 深色主题：表内运程列沿用浅色主题着色（白底），与原局相反。 */ html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( th.col-compare-header, td.col-compare-cell, th.col-liunian-header, td.col-liunian-cell, th.col-liuyue-header, td.col-liuyue-cell, th.col-liuri-header, td.col-liuri-cell, th.col-liushi-header, td.col-liushi-cell ) { background: #ffffff !important; border-bottom-color: rgba(0, 0, 0, 0.12) !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-compare-header, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-liushi-header { color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-liunian-header { color: #0d6e54 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-liuyue-header { color: #b45309 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill th.col-liuri-header { color: #c81a3a !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) :is(.glyph, .hiddenGlyph)>span { filter: none !important; text-shadow: none !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.wood>span, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.wood .hiddenGlyph>span { color: #0d6e54 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.fire>span, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.fire .hiddenGlyph>span { color: #c81a3a !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.earth>span, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.earth .hiddenGlyph>span { color: #b45309 !important; } /* source: /style_pan_drill_title_dark.css?v=4 */ /* 运程 drill 深色字形着色；长生副字见 style_pan_drill_title_dark_phase.css */ /* 白底运程列：金须纯黑（勿用深色主题近白 --metal，否则融于底） */ html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.metal>span, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.metal .hiddenGlyph>span { color: #000000 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .glyph.water>span, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem.water .hiddenGlyph>span { color: #0369a1 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text { color: #334155 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label { color: #111111 !important; filter: none !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label>div:not(.changsheng-phase-text), html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.pan-label-ten-god, .pan-ten-god-stack) { color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label .changsheng-phase-text { color: #334155 !important; } /* source: /style_pan_drill_title_dark_wx.css?v=1 */ html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).wood { color: #0d6e54 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).fire { color: #c81a3a !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).earth { color: #b45309 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).metal { color: #000000 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label :is(.phase-main, .phase-sub).water { color: #0369a1 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label .phase-main:not(.wood):not(.fire):not(.earth):not(.metal):not(.water), html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .god-text.changsheng-label .phase-sub:not(.wood):not(.fire):not(.earth):not(.metal):not(.water) { color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-mark-num { color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.wood { color: #0d6e54 !important; } /* source: /style_pan_drill_title_dark_phase.css?v=2 */ /* 运程 drill 深色长生副字着色；由 style_pan_drill_title_dark.css 拆出；须在其之后、style_pan_drill_relation.css 之前 */ html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.fire { color: #c81a3a !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.earth { color: #b45309 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.metal { color: #000000 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .changsheng-phase-sub-col .phase-sub.water { color: #0369a1 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenPart__label { color: #000000 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph:not(.stem-glyph-clickable) .pan-stem-strength-score--hidden { color: #000000 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph.stem-glyph-clickable .pan-stem-strength-score--hidden { color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph.stem-glyph-clickable:hover .pan-stem-strength-score--hidden, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph.stem-glyph-clickable:active .pan-stem-strength-score--hidden, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .hiddenItem .hiddenGlyph.stem-glyph-clickable:focus-within .pan-stem-strength-score--hidden { color: #000000 !important; } /* source: /style_pan_drill_title_dark_phase_flow.css?v=3 */ html:not([data-theme="light"]) :is(#app-view-pan #pan, #app-view-study #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .stem-container .glyph-wrapper.stem-glyph-clickable .pan-stem-strength-score { color: #111111 !important; font-weight: 600; } html:not([data-theme="light"]) :is(#app-view-pan #pan, #app-view-study #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .stem-container .glyph-wrapper.stem-glyph-clickable:hover .pan-stem-strength-score, html:not([data-theme="light"]) :is(#app-view-pan #pan, #app-view-study #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .stem-container .glyph-wrapper.stem-glyph-clickable:active .pan-stem-strength-score, html:not([data-theme="light"]) :is(#app-view-pan #pan, #app-view-study #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .stem-container .glyph-wrapper.stem-glyph-clickable:focus-within .pan-stem-strength-score { color: #000000 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main { color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.wood { color: #0d6e54 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.fire { color: #c81a3a !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.earth { color: #b45309 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.metal { color: #000000 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .branch-container .self-sitting-phase .phase-main.water { color: #0369a1 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ) .pan-shen-sha-item { /* 深色主题运程列为白底：神煞用深墨，与原局浅墨区分底色但同属墨笺 */ color: #111111 !important; } /* source: /style_pan_drill_relation.css?v=8 */ /* 合冲列轨道底色：与表内运程列 / 原局柱一致；须在 style_pan_drill_title.css 之后 */ /* ── 浅色主题：运程列 #111 / 原局柱白底（同 style_pan_flow_cols_theme） ── */ [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track { background: transparent !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--empty { background: #111111 !important; border-left-color: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--empty { border-left-color: transparent !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill :is(.pan-relation-line--stem, .pan-relation-line--branch, .pan-relation-line--muted) { color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.wood { color: #52f08c !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.fire { color: #ff7e92 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.earth { color: #fcd34d !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.metal { color: #ffffff !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.water { color: #0ea5e9 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal { background: #ffffff !important; color: #111111 !important; border-left-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal :is(.pan-relation-line--stem, .pan-relation-line--branch, .pan-relation-line--muted) { color: #111111 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.wood { color: #0d6e54 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.fire { color: #c81a3a !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.earth { color: #b45309 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.metal { color: #111111 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.water { color: #0369a1 !important; } /* 浅色：运程黑底 → 白分隔线；原局白底 → 黑分隔线 */ [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-line--branch-lead, [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--empty .pan-relation-line--branch-lead { border-top-color: rgba(255, 255, 255, 0.55) !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-line--branch-lead { border-top-color: rgba(0, 0, 0, 0.28) !important; } /* ── 深色主题：运程列白底（同 style_pan_drill_title）/ 原局柱暗底 ── */ html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track { background: transparent !important; border-color: color-mix(in srgb, var(--line) 80%, transparent) !important; color: var(--text-main) !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--empty { background: #ffffff !important; border-left-color: rgba(0, 0, 0, 0.1) !important; color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--empty { border-left-color: transparent !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill :is(.pan-relation-line--stem, .pan-relation-line--branch, .pan-relation-line--muted) { color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.wood { color: #0d6e54 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.fire { color: #c81a3a !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.earth { color: #b45309 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.metal { color: #111111 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-char.water { color: #0369a1 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal { background: color-mix(in srgb, var(--card-bg) 88%, #000) !important; color: var(--text-main) !important; border-left-color: color-mix(in srgb, var(--line) 70%, transparent) !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal :is(.pan-relation-line--stem, .pan-relation-line--branch, .pan-relation-line--muted) { color: color-mix(in srgb, var(--text-main) 88%, transparent) !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.wood { color: #3dcf8e !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.fire { color: #ff7a8a !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.earth { color: #f0c14d !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.metal { color: #f3f4f6 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-char.water { color: #38bdf8 !important; } /* 深色：运程白底 → 黑分隔线；原局暗底 → 白分隔线 */ html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--drill .pan-relation-line--branch-lead, html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--empty .pan-relation-line--branch-lead { border-top-color: rgba(0, 0, 0, 0.28) !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-table--drill .pan-relation-cols-track .pan-relation-col-cell--natal .pan-relation-line--branch-lead { border-top-color: rgba(255, 255, 255, 0.55) !important; } /* source: /style_pan_drill_relation_hints.css?v=2 */ /* * 运程展开：表内大运/流年/流月/流日/流时列 — tbody 三行底色一体，无描边，仅保留圆角裁切背景。 */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table tbody :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) { border-radius: 0 !important; box-sizing: border-box; border: none !important; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table tbody tr:first-child :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) { border-radius: 4px 4px 0 0 !important; } :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table tbody tr:nth-child(3) :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) { border-radius: 0 0 4px 4px !important; overflow: hidden; } /* 神煞行不并入三行一体块 */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table tbody tr.pan-shen-sha-row :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) { border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table tbody tr.pan-shen-sha-row :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) { border-left: none !important; border-right: none !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table tbody tr.pan-shen-sha-row :is( td.col-compare-cell, td.col-liunian-cell, td.col-liuyue-cell, td.col-liuri-cell, td.col-liushi-cell ):not(.isHidden) { border-left: none !important; border-right: none !important; } /* source: /style_pan_drill_chrome.css?v=2 */ /* 运程 drill chrome；可折叠标题见 style_pan_drill_chrome_title.css */ :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card.pan-display-card.pan-table--drill .bazi-table thead :is( th.col-compare-header, th.col-liunian-header, th.col-liuyue-header, th.col-liuri-header, th.col-liushi-header ):not(.isHidden) { border-radius: 4px; box-sizing: border-box; border: none !important; } /* * 关系提示（单栏 / 运程展开原局侧）：随页面主题（深底白字 / 浅底黑字），干支保留五行色。 */ [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) :is(.pan-relation-line--stem, .pan-relation-line--branch, .pan-relation-line--muted) { color: #111111 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.wood { color: #0d6e54 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.fire { color: #c81a3a !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.earth { color: #b45309 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.metal { color: #000000 !important; } [data-theme="light"] :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.water { color: #0369a1 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) :is(.pan-relation-line--stem, .pan-relation-line--branch, .pan-relation-line--muted) { color: #ffffff !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.wood { color: #52f08c !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.fire { color: #ff7e92 !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.earth { color: #fcd34d !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.metal { color: #ffffff !important; } html:not([data-theme="light"]) :is(#app-view-pan, #app-view-study) :is(#pan, #study-pan-preview, .learnPanDisplaySlot) .card :is(.pan-relation-text--single, .pan-table--drill .pan-relation-text-col--base) .pan-relation-char.water { color: #0ea5e9 !important; } .drill-title { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 8px; padding-left: 4px; border-left: 3px solid var(--accent); letter-spacing: 0.05em; } /* 可折叠：整块重置 .drill-title 的紫边与粗字重，避免像主按钮或双重边线 */ /* source: /style_pan_drill_chrome_title.css?v=1 */ /* 运程可折叠标题；由 style_pan_drill_chrome.css 拆出；须在其之后 */ .drill-title.drill-title--collapsible { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; appearance: none; -webkit-appearance: none; margin: 0 0 6px; padding: 11px 8px 11px 2px; border: none; border-radius: 8px; background: transparent; outline: none; box-shadow: none; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: rgba(248, 250, 252, 0.9); text-transform: none; transition: background 0.15s ease, color 0.15s ease; } .drill-title.drill-title--collapsible:hover, .drill-title.drill-title--collapsible:active { background: transparent; color: #fff; } .drill-title.drill-title--collapsible:focus { outline: none; } .drill-title.drill-title--collapsible:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.2); outline-offset: 2px; } .drill-title.drill-title--collapsible:active { background: transparent; } .drill-title.drill-title--collapsible::after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(148, 163, 184, 0.75); margin-left: auto; flex-shrink: 0; transition: transform 0.2s ease; } .drill-title.drill-title--collapsible.isCollapsed::after { transform: rotate(-90deg); } .drill-collapse-body { margin-bottom: 4px; } .drill-section { display: flex; flex-direction: column; gap: 12px; } .drill-day-section, .drill-hour-section { margin-top: 0; border-top: none; padding-top: 0; } .isHidden { display: none !important; } /* Stack characters in headers for drill-down columns */ .col-compare-header span, .col-liunian-header span, .col-liuyue-header span, .col-liuri-header span, .col-liushi-header span { display: block; line-height: 1.2; } .result { display: flex; flex-direction: column; gap: var(--module-gap, 22px); margin-top: 0; } .recordModule { background: transparent; backdrop-filter: none; border: none; box-shadow: none; padding: 0; margin-bottom: 24px; } .recordModule:hover { box-shadow: none; } .recordModuleHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } /* source: /style_store_filter.css?v=7 */ /* 库房筛选条新建簇；芯片滚动见 style_store_filter_scroll.css */ /* —— 库区：分组 / 标签筛选条（扁平条 + 柔角 chip；裁切与弹层逻辑不变） */ #store-query-module .groupTabs, #app-view-study #study-pan-store-tags.groupTabs { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin: 0; overflow: visible; min-width: 0; box-sizing: border-box; } /* 工具条容器：透明、轻量，统一为一个视觉单元 */ #store-query-module #store-panel-owners.groupTabs:not(.isHidden), #store-query-module #store-panel-groups.groupTabs:not(.isHidden), #store-query-module #store-panel-tags.groupTabs:not(.isHidden), #app-view-study #study-pan-store-tags.groupTabs { padding: 6px 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; margin-bottom: 0; box-shadow: none; } #store-query-module .store-filter-stack #store-panel-owners.groupTabs:not(.isHidden), #store-query-module .store-filter-stack #store-panel-groups.groupTabs:not(.isHidden), #store-query-module .store-filter-stack #store-panel-tags.groupTabs:not(.isHidden), #app-view-study .study-filter-stack #study-pan-store-tags.groupTabs { padding: 0; } /* 搜索框与第一个可见工具条之间：仅用间距分隔，不用横线 */ #store-query-module #store-panel-owners.groupTabs:not(.isHidden) { padding-top: 2px; margin-top: 0; } #store-query-module .store-filter-stack #store-panel-owners.groupTabs:not(.isHidden) { padding-top: 8px; margin-top: 0; } #store-query-module .store-filter-stack #store-panel-owners.groupTabs:not(.isHidden):first-child { padding-top: 8px; } #store-query-module #store-panel-owners.isHidden + #store-panel-groups.groupTabs:not(.isHidden) { padding-top: 2px; margin-top: 0; } #store-query-module .store-filter-stack #store-panel-owners.isHidden + #store-panel-groups.groupTabs:not(.isHidden), #store-query-module .store-filter-stack #store-panel-owners.groupTabs:not(.isHidden):first-child { padding-top: 8px; margin-top: 0; } #store-query-module #store-panel-owners:not(.isHidden) + #store-panel-groups.groupTabs:not(.isHidden), #store-query-module #store-panel-owners:not(.isHidden) + #store-panel-tags.groupTabs:not(.isHidden), #store-query-module #store-panel-groups.groupTabs:not(.isHidden) + #store-panel-tags.groupTabs:not(.isHidden) { padding-top: 8px; margin-top: 0; } #store-query-module .store-filter-stack .groupTabs:not(.isHidden) + .groupTabs:not(.isHidden) { padding-top: 8px; margin-top: 0; } /* ── "+" 新建按钮簇：透明、轻量 ── */ #store-query-module .groupTabs>.storeTabBar__addCluster, #app-view-study #study-pan-store-tags.groupTabs>.storeTabBar__addCluster { display: inline-flex; align-items: center; flex-shrink: 0; gap: 4px; padding: 0 2px; border-radius: var(--surface-radius-sm, 11px); border: none; background: transparent; box-shadow: none; } #store-query-module .groupTabs>.storeTabBar__addCluster.storeTabBar__addCluster--solo, #app-view-study #study-pan-store-tags.groupTabs>.storeTabBar__addCluster.storeTabBar__addCluster--solo { gap: 0; padding: 0; } #store-query-module .storeTabBar__taxonomyIcon, #app-view-study #study-pan-store-tags .storeTabBar__taxonomyIcon { display: inline-flex; align-items: center; justify-content: center; width: 22px; min-width: 22px; height: 30px; color: var(--text-dim); pointer-events: none; opacity: 0.55; } #store-query-module .storeTabBar__taxonomyIcon .storeTabBar__taxonomySvg, #app-view-study #study-pan-store-tags .storeTabBar__taxonomyIcon .storeTabBar__taxonomySvg { display: block; flex-shrink: 0; } #store-query-module .groupTabs>.groupTab.groupTab--all, #app-view-study #study-pan-store-tags.groupTabs>.groupTab.groupTab--all { flex-shrink: 0; } /* source: /style_store_filter_scroll.css?v=4 */ /* 库房筛选芯片滚动与更多钮；由 style_store_filter.css 拆出；须在其之后、style_store_filter_overflow.css 之前 */ /* ── 芯片横向滚动区 ── */ #store-query-module .groupTabs__clip, #app-view-study #study-pan-store-tags .groupTabs__clip { flex: 1 1 0%; min-width: 0; overflow-x: hidden; overflow-y: hidden; display: flex; align-items: center; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; } #store-query-module .groupTabs__clip::-webkit-scrollbar, #app-view-study #study-pan-store-tags .groupTabs__clip::-webkit-scrollbar { height: 0; } #store-query-module .groupTabs__track, #app-view-study #study-pan-store-tags .groupTabs__track { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: min-content; flex: 0 0 auto; } /* ── "更多" 溢出按钮（边框与相邻 groupTab 芯片一致） ── */ #store-query-module .groupTabs__more, #app-view-study #study-pan-store-tags .groupTabs__more { position: relative; z-index: 1; flex-shrink: 0; flex: 0 0 auto; width: auto; min-width: 32px; appearance: none; margin: 0; border: 1px solid var(--filter-separator); background: var(--filter-chip-bg); color: var(--text-muted); height: auto; min-height: 30px; max-height: 30px; padding: 5px 10px; border-radius: var(--surface-radius-sm, 11px); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; box-shadow: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #store-query-module #store-panel-groups .groupTabs__more { border-radius: var(--group-badge-radius); min-height: var(--group-badge-min-h); max-height: var(--group-badge-max-h); } #store-query-module #store-panel-tags .groupTabs__more, #app-view-study #study-pan-store-tags .groupTabs__more { border-radius: var(--tag-badge-radius); min-height: var(--tag-badge-min-h); max-height: var(--tag-badge-max-h); } #store-query-module .groupTabs__more:hover:not(:disabled), #app-view-study #study-pan-store-tags .groupTabs__more:hover:not(:disabled) { background: transparent; border-color: var(--filter-separator); box-shadow: none; color: var(--text-main); transform: none; } #store-query-module .groupTabs__more:active:not(:disabled), #app-view-study #study-pan-store-tags .groupTabs__more:active:not(:disabled) { transform: scale(0.97); } #store-query-module .groupTabs__more:focus-visible, #app-view-study #study-pan-store-tags .groupTabs__more:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-dark), 0 0 0 4px rgba(var(--accent-rgb), 0.55); } #store-query-module .groupTabs--tags .groupTabs__more:focus-visible, #app-view-study #study-pan-store-tags.groupTabs--tags .groupTabs__more:focus-visible { box-shadow: 0 0 0 2px var(--bg-dark), 0 0 0 4px rgba(var(--accent-rgb), 0.45); } #store-query-module .groupTabs__more:disabled, #app-view-study #study-pan-store-tags .groupTabs__more:disabled { opacity: 0.45; cursor: default; } /* source: /style_store_filter_scroll_vacant.css?v=3 */ /* 无溢出时仍占位，避免裁切区占满整行导致永远不出现「更多」 */ #store-query-module .groupTabs__more.groupTabs__more--vacant, #app-view-study #study-pan-store-tags .groupTabs__more.groupTabs__more--vacant { visibility: hidden; pointer-events: none; opacity: 0; } #store-query-module .groupTabs__more.groupTabs__more--vacant:disabled, #app-view-study #study-pan-store-tags .groupTabs__more.groupTabs__more--vacant:disabled { opacity: 0; } #store-query-module .groupTabs__moreInner, #app-view-study #study-pan-store-tags .groupTabs__moreInner { position: relative; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; width: auto; height: 100%; } #store-query-module .groupTabs__moreIcon, #app-view-study #study-pan-store-tags .groupTabs__moreIcon { display: flex; align-items: center; justify-content: center; opacity: 0.95; } #store-query-module .groupTabs__moreIcon svg, #app-view-study #study-pan-store-tags .groupTabs__moreIcon svg { display: block; width: 15px; height: 15px; } #store-query-module .groupTabs__moreBadge:empty, #app-view-study #study-pan-store-tags .groupTabs__moreBadge:empty { display: none; } #store-query-module .groupTabs__moreBadge:not(:empty), #app-view-study #study-pan-store-tags .groupTabs__moreBadge:not(:empty) { position: static; display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; background: color-mix(in srgb, var(--text-main) 12%, transparent); color: var(--text-main); box-shadow: none; } #store-query-module .groupTabs--tags .groupTabs__moreBadge:not(:empty), #app-view-study #study-pan-store-tags.groupTabs--tags .groupTabs__moreBadge:not(:empty) { color: var(--text-main); } /* source: /style_store_filter_overflow.css?v=4 */ /* 库房 Tabs 溢出底栏壳；头栏细则见 style_store_filter_overflow_head.css */ html.store-tab-overflow-open { overflow: hidden; } .storeTabOverflowSheet { position: fixed; inset: 0; /* 须高于 #pan-live-note 全屏模态(8100)，否则库房「列表」底栏被挡在批断层下无法操作 */ z-index: 8300; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; pointer-events: none; } .storeTabOverflowSheet__backdrop { position: absolute; inset: 0; border: none; padding: 0; margin: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; pointer-events: auto; } .storeTabOverflowSheet__panel { position: relative; width: 100%; max-width: min(440px, 100%); max-height: min(70vh, 480px); display: flex; flex-direction: column; margin: 0; border-radius: 18px; background: #000000; border: 1px solid var(--line-heavy); box-shadow: none; overflow: hidden; pointer-events: auto; } @media (min-width: 560px) { .storeTabOverflowSheet { align-items: center; padding: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); } .storeTabOverflowSheet__panel { width: fit-content; min-width: min(320px, calc(100vw - 48px)); max-width: min(560px, calc(100vw - 48px)); margin: 0; border-radius: 18px; max-height: min(72vh, 520px); } } .storeTabOverflowSheet__head { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-bottom: 1px solid var(--line); flex-shrink: 0; } /* source: /style_store_filter_overflow_head.css?v=5 */ /* 库房 Tabs 溢出底栏头栏；由 style_store_filter_overflow.css 拆出；须在其之后、overflow_list 之前 */ .storeTabOverflowSheet__headRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 8px; } .storeTabOverflowSheet__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: none; color: var(--text-dim); line-height: 1.35; } .storeTabOverflowSheet__q { display: block; box-sizing: border-box; width: calc(100% - 32px); margin: 0 16px 12px; padding: 8px 10px; appearance: none; -webkit-appearance: none; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text-main); font: inherit; font-size: 13px; box-shadow: none; outline: none; } .storeTabOverflowSheet__q::-webkit-search-decoration, .storeTabOverflowSheet__q::-webkit-search-cancel-button, .storeTabOverflowSheet__q::-webkit-search-results-button, .storeTabOverflowSheet__q::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .storeTabOverflowSheet__q:focus, .storeTabOverflowSheet__q:focus-visible { outline: none; box-shadow: none; background: transparent; border-color: transparent; border-bottom-color: var(--text-main); } .storeTabOverflowSheet__q::placeholder { color: var(--text-dim); } .storeTabOverflowSheet--tag .storeTabOverflowSheet__sub { color: var(--text-muted); } .storeTabOverflowSheet--tag .storeTabOverflowSheet__title { color: var(--text-dim); } .storeTabOverflowSheet__scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 4px 12px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* source: /style_store_filter_overflow_head_row.css?v=2 */ .storeTabOverflowSheet__row { display: flex; align-items: stretch; gap: 0; margin-bottom: 2px; border-radius: 10px; overflow: hidden; border: none; background: transparent; flex-shrink: 0; min-height: 44px; } .storeTabOverflowSheet__row:last-child { margin-bottom: 0; } .storeTabOverflowSheet--reordering .storeTabOverflowSheet__scroll { touch-action: none; user-select: none; -webkit-user-select: none; } .storeTabOverflowSheet__row--dragging { opacity: 0.94; z-index: 4; position: relative; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.35); } .storeTabOverflowSheet--tag .storeTabOverflowSheet__row--dragging { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.35); } .storeTabOverflowSheet--reordering .storeTabOverflowSheet__pick { cursor: grabbing; } .storeTabOverflowSheet__pick { flex: 1 1 auto; min-width: 0; appearance: none; margin: 0; padding: 11px 14px; border: none; border-radius: 0; background: transparent; color: var(--text-main); font-size: 13px; font-weight: 650; line-height: 1.35; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: background 0.2s ease, color 0.2s ease; } /* source: /style_store_filter_overflow_list.css?v=5 */ /* 库区溢出列表前半；深色选中见 style_store_filter_overflow_list_dark.css */ /* 分组/标签溢出列表：外形与命中行 .groupBadge / .storeHitTag 一致（须在通用 __pick 之后） */ #store-tab-overflow-sheet.storeTabOverflowSheet--group .storeTabOverflowSheet__row { min-height: 44px; max-height: none; margin-bottom: 2px; border-radius: 10px; border: none; background: transparent; } #store-tab-overflow-sheet.storeTabOverflowSheet--group .storeTabOverflowSheet__pick { padding: 5px 10px; min-height: var(--group-badge-min-h); max-height: var(--group-badge-max-h); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; gap: 6px; border-radius: var(--group-badge-radius-lead); } #store-tab-overflow-sheet.storeTabOverflowSheet--group .storeTabOverflowSheet__gear { width: 26px; min-height: var(--group-badge-min-h); max-height: var(--group-badge-max-h); border-radius: var(--group-badge-radius-tail); } #store-tab-overflow-sheet.storeTabOverflowSheet--tag .storeTabOverflowSheet__row { min-height: 44px; max-height: none; margin-bottom: 2px; border-radius: 10px; border: none; background: transparent; } #store-tab-overflow-sheet.storeTabOverflowSheet--tag .storeTabOverflowSheet__pick { padding: 5px 10px; min-height: var(--tag-badge-min-h); max-height: var(--tag-badge-max-h); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; gap: 6px; border-radius: var(--tag-badge-radius-lead); } #store-tab-overflow-sheet.storeTabOverflowSheet--tag .storeTabOverflowSheet__gear { width: 26px; min-height: var(--tag-badge-min-h); max-height: var(--tag-badge-max-h); border-radius: var(--tag-badge-radius-tail); } .storeTabOverflowSheet__pickLabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .storeTabOverflowSheet__pickCount { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; padding: 2px 7px; border-radius: var(--surface-radius-sm, 11px); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.08); color: var(--text-dim); } .storeTabOverflowSheet__pick:not(.isActive):hover { background: color-mix(in srgb, var(--text-main) 8%, transparent); box-shadow: none; } .storeTabOverflowSheet__pick.isActive:hover { background: #ffffff; color: #0a0a0a; } /* source: /style_store_filter_overflow_list_dark.css?v=3 */ /* 深色溢出列表行态；添加钮见 style_store_filter_overflow_list_dark_add.css */ .storeTabOverflowSheet__pick.isActive { background: #ffffff; color: #0a0a0a; } .storeTabOverflowSheet__pick.isActive .storeTabOverflowSheet__pickCount { background: rgba(0, 0, 0, 0.08); color: #0a0a0a; } .storeTabOverflowSheet--tag .storeTabOverflowSheet__pick.isActive { background: #ffffff; color: #0a0a0a; } .storeTabOverflowSheet--tag .storeTabOverflowSheet__pick.isActive .storeTabOverflowSheet__pickCount { background: rgba(0, 0, 0, 0.08); color: #0a0a0a; } .storeTabOverflowSheet__gear { flex-shrink: 0; appearance: none; position: relative; z-index: 2; pointer-events: auto; width: 44px; min-height: 44px; align-self: stretch; margin: 0; padding: 0; border: none; border-radius: 0; background: transparent; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08); transition: background 0.2s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent; } .storeTabOverflowSheet__gear:hover { color: var(--text-main); background: transparent; box-shadow: none; } .storeTabOverflowSheet--tag .storeTabOverflowSheet__gear { color: var(--text-dim); } .storeTabOverflowSheet--tag .storeTabOverflowSheet__gear:hover { color: var(--text-main); } /* 当前选中行：齿轮区与主区一致 — 深色为白底黑图标，图标与底反色 */ .storeTabOverflowSheet__row:has(.storeTabOverflowSheet__pick.isActive) .storeTabOverflowSheet__gear { background: #ffffff; color: #0a0a0a; box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.08); } .storeTabOverflowSheet__row:has(.storeTabOverflowSheet__pick.isActive) .storeTabOverflowSheet__gear:hover { background: #ffffff; color: #0a0a0a; } /* 标签溢出：与分组相同，显式压过 .storeTabOverflowSheet--tag .__gear 的绿色字色 */ .storeTabOverflowSheet--tag .storeTabOverflowSheet__row:has(.storeTabOverflowSheet__pick.isActive) .storeTabOverflowSheet__gear { background: #ffffff; color: #0a0a0a; box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.08); } .storeTabOverflowSheet--tag .storeTabOverflowSheet__row:has(.storeTabOverflowSheet__pick.isActive) .storeTabOverflowSheet__gear .groupTabGear__icon { color: inherit; fill: currentColor; opacity: 1; } .storeTabOverflowSheet--tag .storeTabOverflowSheet__row:has(.storeTabOverflowSheet__pick.isActive) .storeTabOverflowSheet__gear:hover { background: #ffffff; color: #0a0a0a; } .storeTabOverflowSheet--tag .storeTabOverflowSheet__row:has(.storeTabOverflowSheet__pick.isActive) .storeTabOverflowSheet__gear:hover .groupTabGear__icon { color: inherit; fill: currentColor; } /* source: /style_store_filter_overflow_list_dark_add.css?v=4 */ /* 深色溢出添加钮与悬停；由 style_store_filter_overflow_list_dark.css 拆出；须在其之后 */ #store-query-module .storeTabAddBtn, #app-view-study #study-pan-store-tags .storeTabAddBtn { flex-shrink: 0; appearance: none; margin: 0; border: none; background: transparent; color: var(--text-dim); width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 18px; font-weight: 400; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; } /* 深色：悬停白底黑字 */ html:not([data-theme="light"]) #store-query-module .storeTabAddBtn:hover, html:not([data-theme="light"]) #app-view-study #study-pan-store-tags .storeTabAddBtn:hover { background: #ffffff; color: #111111; transform: scale(1.05); } #store-query-module .storeTabAddBtn:active, #app-view-study #study-pan-store-tags .storeTabAddBtn:active { transform: scale(0.95); } #store-query-module .storeTabAddBtn:focus-visible, #app-view-study #study-pan-store-tags .storeTabAddBtn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95), 0 0 0 4px rgba(var(--accent-rgb), 0.5); } /* 分组条、标签条共用长按拖拽；touch-action:none 避免父级竖滑在长按前抢走手势 */ #store-query-module #store-panel-groups .groupTabWrap, #store-query-module #store-panel-tags .groupTabWrap, #app-view-study #study-pan-store-tags .groupTabWrap { touch-action: none; } #store-query-module #store-panel-groups .groupTab, #store-query-module #store-panel-tags .groupTab, #app-view-study #study-pan-store-tags .groupTab { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } #store-query-module .groupTab, #app-view-study #study-pan-store-tags .groupTab { appearance: none; margin: 0; border: 1px solid transparent; background: var(--filter-chip-bg); color: var(--text-muted); padding: 5px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap; min-height: 30px; max-height: 30px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; box-shadow: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } #store-query-module .groupTab:hover, #app-view-study #study-pan-store-tags .groupTab:hover { background: transparent; box-shadow: none; border-color: rgba(255, 255, 255, 0.06); color: var(--text-main); } #store-query-module .groupTab.isActive:hover, #app-view-study #study-pan-store-tags .groupTab.isActive:hover { background: var(--filter-chip-active-bg); box-shadow: none; } #store-query-module .groupTab:active, #app-view-study #study-pan-store-tags .groupTab:active { transform: scale(0.97); } #store-query-module .groupTab.isActive, #app-view-study #study-pan-store-tags .groupTab.isActive { background: var(--filter-chip-active-bg); border-color: var(--filter-chip-active-border); color: #ffffff; box-shadow: none; } /* source: /style_store_filter_overflow_all.css?v=3 */ /* 库区溢出「全部」按钮与分隔；由 style_store_filter_overflow_list.css 拆出；须在其之后、style_store_filter_chips.css 之前 */ /* ── "全部" 按钮 —— 清空筛选的视觉提示 ── */ #store-query-module .groupTab--all:not(.isActive), #app-view-study #study-pan-store-tags .groupTab--all:not(.isActive) { border-style: solid; border-color: var(--filter-separator); background: transparent; color: var(--text-dim); font-weight: 500; } #store-query-module .groupTab--all.isActive, #app-view-study #study-pan-store-tags .groupTab--all.isActive { border-style: solid; font-weight: 600; } /* "全部" 与分组/标签芯片之间的视觉分隔 */ #store-query-module .groupTab--all, #app-view-study #study-pan-store-tags .groupTab--all { margin-right: 4px; } #store-query-module .groupTab__label, #app-view-study #study-pan-store-tags .groupTab__label { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; } #store-query-module .groupTabs__clip .groupTab__count, #app-view-study #study-pan-store-tags .groupTabs__clip .groupTab__count { display: none; } #store-query-module .groupTab__count, #app-view-study #study-pan-store-tags .groupTab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2em; margin-left: 0; padding: 0 4px; border-radius: var(--surface-radius-sm, 11px); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; background: rgba(255, 255, 255, 0.08); color: rgba(224, 231, 255, 0.85); } #store-query-module .groupTab.isActive .groupTab__count, #app-view-study #study-pan-store-tags .groupTab.isActive .groupTab__count { background: rgba(255, 255, 255, 0.2); color: #fff; } #store-query-module .groupTabs--tags .groupTab__count, #app-view-study #study-pan-store-tags.groupTabs--tags .groupTab__count { background: rgba(255, 255, 255, 0.08); color: inherit; } #store-query-module .groupTabs--tags .groupTab.isActive .groupTab__count, #app-view-study #study-pan-store-tags.groupTabs--tags .groupTab.isActive .groupTab__count { background: rgba(255, 255, 255, 0.14); color: inherit; } /* 分组 / 标签「全部」选中态由 html:not(light) 与 [data-theme=light] 统一块收口，此处不再单独着色 */ /* source: /style_store_filter_chips.css?v=6 */ /* 库房筛选分组/标签 chip；齿轮见 style_store_filter_chips_gear.css */ /* 芯片外层 wrapper：透明无边框，仅结构容器；圆角由 chips_shape（分组/标签）覆写 */ #store-query-module .groupTabWrap, #app-view-study #study-pan-store-tags .groupTabWrap { display: inline-flex; align-items: stretch; flex-shrink: 0; gap: 0; cursor: grab; -webkit-touch-callout: none; overflow: hidden; border: none; background: transparent; box-shadow: none; transition: transform 0.15s ease; } #store-query-module .groupTabWrap.groupTabWrap--clipped, #app-view-study #study-pan-store-tags .groupTabWrap.groupTabWrap--clipped { display: none !important; } #store-query-module .groupTabWrap:hover, #app-view-study #study-pan-store-tags .groupTabWrap:hover { transform: none; } #store-query-module .groupTabWrap .groupTab, #app-view-study #study-pan-store-tags .groupTabWrap .groupTab { border: 1px solid var(--filter-separator); background: var(--filter-chip-bg); box-shadow: none; padding: 5px 6px 5px 10px; min-height: 30px; max-height: 30px; } #store-query-module .groupTabWrap .groupTab:hover, #app-view-study #study-pan-store-tags .groupTabWrap .groupTab:hover { background: transparent; box-shadow: none; } #store-query-module .groupTabWrap .groupTab.isActive:hover, #app-view-study #study-pan-store-tags .groupTabWrap .groupTab.isActive:hover { background: var(--filter-chip-active-bg); box-shadow: none; } #store-query-module .groupTabWrap .groupTab.isActive, #app-view-study #study-pan-store-tags .groupTabWrap .groupTab.isActive { background: var(--filter-chip-active-bg); border-color: var(--filter-chip-active-border); color: var(--seg-btn-active-fg, var(--btn-primary-fg)); box-shadow: none; } /* 标签选中：与分组同用黑白 active token（标签色板仍可覆写） */ #store-query-module .groupTabs--tags .groupTabWrap .groupTab.isActive, #app-view-study #study-pan-store-tags.groupTabs--tags .groupTabWrap .groupTab.isActive { background: var(--filter-chip-active-bg); border-color: var(--filter-chip-active-border); color: var(--seg-btn-active-fg, var(--btn-primary-fg)); box-shadow: none; } /* source: /style_store_filter_chips_shape.css?v=4 */ /* 分组筛选 chip：与命中行 .groupBadge 同外形（左微方、右圆） */ #store-query-module #store-panel-groups .groupTabWrap { border-radius: var(--group-badge-radius); overflow: hidden; } #store-query-module #store-panel-groups .groupTabWrap .groupTab { border-radius: var(--group-badge-radius-lead); padding: 5px 6px 5px 10px; min-height: var(--group-badge-min-h); max-height: var(--group-badge-max-h); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; } #store-query-module #store-panel-groups .groupTabWrap .groupTabGear { border-radius: var(--group-badge-radius-tail); min-height: var(--group-badge-min-h); max-height: var(--group-badge-max-h); } /* 库房标签 / 学习盘标签筛选 chip：与命中行 .storeHitTag 同外形（勿再叠 group-badge） */ #store-query-module #store-panel-tags .groupTabWrap, #app-view-study #study-pan-store-tags .groupTabWrap { border-radius: var(--tag-badge-radius) !important; overflow: hidden; } #store-query-module #store-panel-tags .groupTabWrap .groupTab, #app-view-study #study-pan-store-tags .groupTabWrap .groupTab { border-radius: var(--tag-badge-radius-lead) !important; padding: 5px 6px 5px 10px; min-height: var(--tag-badge-min-h); max-height: var(--tag-badge-max-h); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; } #store-query-module #store-panel-tags .groupTabWrap .groupTabGear, #app-view-study #study-pan-store-tags .groupTabWrap .groupTabGear { border-radius: var(--tag-badge-radius-tail) !important; min-height: var(--tag-badge-min-h); max-height: var(--tag-badge-max-h); } /* 「更多」按钮：与同行 chip 同款（分组 / 标签各自外形） */ #store-query-module #store-panel-groups .groupTabs__more { border: 1px solid var(--filter-separator); border-radius: var(--group-badge-radius); background: var(--filter-chip-bg); color: var(--text-muted); padding: 0 9px; min-height: var(--group-badge-min-h); max-height: var(--group-badge-max-h); width: auto; min-width: var(--touch-min, 44px); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; } #store-query-module #store-panel-tags .groupTabs__more, #app-view-study #study-pan-store-tags .groupTabs__more { border: 1px solid var(--filter-separator); border-radius: var(--tag-badge-radius) !important; background: var(--filter-chip-bg); color: var(--text-muted); padding: 0 9px; min-height: var(--tag-badge-min-h); max-height: var(--tag-badge-max-h); width: auto; min-width: var(--touch-min, 44px); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; } #store-query-module #store-panel-groups .groupTabs__more:hover:not(:disabled), #store-query-module #store-panel-tags .groupTabs__more:hover:not(:disabled), #app-view-study #study-pan-store-tags .groupTabs__more:hover:not(:disabled) { background: transparent; border-color: var(--filter-separator); color: var(--text-main); box-shadow: none; transform: none; } #store-query-module #store-panel-groups .groupTabs__more:active:not(:disabled), #store-query-module #store-panel-tags .groupTabs__more:active:not(:disabled), #app-view-study #study-pan-store-tags .groupTabs__more:active:not(:disabled) { transform: scale(0.97); } #store-query-module #store-panel-tags .groupTabs__more .groupTabs__moreIcon, #app-view-study #study-pan-store-tags .groupTabs__more .groupTabs__moreIcon { color: inherit; opacity: 1; } /* 「全部」：与各条 chip 外形一致（不在 wrap 内，需单独给圆角） */ #store-query-module #store-panel-groups > .groupTab.groupTab--all { border-radius: var(--group-badge-radius); } #store-query-module #store-panel-tags > .groupTab.groupTab--all, #app-view-study #study-pan-store-tags > .groupTab.groupTab--all { border-radius: var(--tag-badge-radius); } /* source: /style_store_filter_chips_gear.css?v=3 */ /* 库房筛选齿轮与 chip 色同步；由 style_store_filter_chips.css 拆出；须在其之后、style_store_filter_chips_bar.css 之前 */ /* ── 齿轮菜单按钮（边框保留，颜色与相邻 chip 同步） ── */ #store-query-module .groupTabGear, #app-view-study #study-pan-store-tags .groupTabGear { appearance: none; flex-shrink: 0; width: 26px; min-height: 30px; margin: 0; padding: 0; box-sizing: border-box; border: 1px solid var(--filter-separator); border-left: none; border-radius: var(--tag-badge-radius-tail, 0 12px 12px 0); background: transparent; color: var(--text-muted); opacity: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; transition: color 0.2s ease, opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease; -webkit-tap-highlight-color: transparent; } /* 齿轮右边框色镜像 .groupTabWrap 内 chip */ #store-query-module .groupTabWrap .groupTabGear, #app-view-study #study-pan-store-tags .groupTabWrap .groupTabGear { border-color: var(--filter-separator); } #store-query-module .groupTab:hover ~ .groupTabGear, #store-query-module .groupTabWrap:has(.groupTab:not(.isActive)):hover .groupTabGear, #store-query-module .groupTabWrap:has(.groupTab:not(.isActive):hover) .groupTabGear, #app-view-study #study-pan-store-tags .groupTab:hover ~ .groupTabGear, #app-view-study #study-pan-store-tags .groupTabWrap:has(.groupTab:not(.isActive)):hover .groupTabGear, #app-view-study #study-pan-store-tags .groupTabWrap:has(.groupTab:not(.isActive):hover) .groupTabGear { border-color: rgba(255, 255, 255, 0.06); } #store-query-module .groupTabWrap:has(.groupTab.isActive) .groupTabGear, #app-view-study #study-pan-store-tags .groupTabWrap:has(.groupTab.isActive) .groupTabGear { border-color: var(--filter-chip-active-border); } #store-query-module .groupTabs--tags .groupTabWrap:has(.groupTab.isActive) .groupTabGear, #app-view-study #study-pan-store-tags.groupTabs--tags .groupTabWrap:has(.groupTab.isActive) .groupTabGear { border-color: var(--filter-chip-active-border); } #store-query-module .groupTabGear__icon, #app-view-study #study-pan-store-tags .groupTabGear__icon { display: block; opacity: 1; color: inherit; fill: currentColor; } /* 深色：竖三点与溢出层齿轮一致，显式浅色（避免继承/webkit 填充导致发灰） */ html:not([data-theme="light"]) #store-query-module .groupTabGear .groupTabGear__icon, html:not([data-theme="light"]) #app-view-study #study-pan-store-tags .groupTabGear .groupTabGear__icon { color: color-mix(in srgb, var(--text-main) 92%, transparent) !important; fill: currentColor !important; opacity: 1 !important; } #store-query-module .groupTabGear:hover, #app-view-study #study-pan-store-tags .groupTabGear:hover { color: var(--text-main); opacity: 1; background: transparent; box-shadow: none; } #store-query-module .groupTabGear:active, #app-view-study #study-pan-store-tags .groupTabGear:active { transform: none; } #store-query-module .groupTabWrap:has(.groupTab.isActive) .groupTabGear, #app-view-study #study-pan-store-tags .groupTabWrap:has(.groupTab.isActive) .groupTabGear { color: var(--text-main); opacity: 1; background: transparent; } #store-query-module .groupTabWrap:has(.groupTab.isActive) .groupTabGear:hover, #app-view-study #study-pan-store-tags .groupTabWrap:has(.groupTab.isActive) .groupTabGear:hover { opacity: 1; color: var(--text-main); background: transparent; box-shadow: none; } /* source: /style_store_filter_chips_gear_focus.css?v=2 */ /* 分组 / 标签 chip：与 owners 一致，沿用上方 .groupTabWrap 胶囊样式（无额外外框） */ #store-query-module .groupTab:focus-visible, #store-query-module .groupTabGear:focus-visible, #app-view-study #study-pan-store-tags .groupTab:focus-visible, #app-view-study #study-pan-store-tags .groupTabGear:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.5); } #store-query-module .groupTabs--tags .groupTab:focus-visible, #store-query-module .groupTabs--tags .groupTabGear:focus-visible, #app-view-study #study-pan-store-tags.groupTabs--tags .groupTab:focus-visible, #app-view-study #study-pan-store-tags.groupTabs--tags .groupTabGear:focus-visible { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.45); } #store-query-module .groupTabs.groupTabs--reordering, #app-view-study #study-pan-store-tags.groupTabs.groupTabs--reordering { touch-action: none; user-select: none; -webkit-user-select: none; } #store-query-module .groupTabs.groupTabs--reordering .groupTabs__clip, #app-view-study #study-pan-store-tags.groupTabs.groupTabs--reordering .groupTabs__clip { overflow: visible; mask-image: none; -webkit-mask-image: none; } #store-query-module .groupTabWrap--dragging, #app-view-study #study-pan-store-tags .groupTabWrap--dragging { cursor: grabbing; opacity: 0.95; z-index: 6; position: relative; transform: scale(1.04); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--filter-chip-active-border); border-radius: var(--surface-radius-sm, 11px); } #store-query-module #store-panel-groups .groupTabWrap--dragging { border-radius: 4px 16px 16px 12px; } #store-query-module .groupTabs--tags.groupTabs--reordering .groupTabWrap--dragging, #app-view-study #study-pan-store-tags.groupTabs--tags.groupTabs--reordering .groupTabWrap--dragging { border-radius: 3px 14px 14px 3px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--filter-chip-active-border); } /* source: /style_store_filter_chips_bar.css?v=4 */ /* 库房筛选 chips 条；检索框见 style_store_filter_chips_bar_search.css */ .storeTabBar__typeLabel { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 2.75rem; padding: 0 6px 0 0; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); opacity: 1; white-space: nowrap; user-select: none; } /* 分组外形已能辨认；默认行不再重复「分组」二字 */ #store-query-module #store-panel-groups > .storeTabBar__typeLabel { display: none; } /* ── 筛选条右侧折叠/展开按钮 ── */ .storeTabBar__collapseToggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 30px; border-radius: 50%; border: none; background: transparent; color: var(--text-dim); opacity: 0.55; cursor: pointer; padding: 0; margin: 0; transition: opacity 0.15s, background 0.15s; } .storeTabBar__collapseToggle:hover { opacity: 0.85; background: var(--hover-bg, rgba(0,0,0,0.06)); } .storeTabBar__collapseToggle:active { opacity: 1; } .storeTabBar__collapseToggle:focus-visible { outline: 2px solid var(--focus-ring-color, var(--accent)); outline-offset: 2px; opacity: 1; } .storeTabBar__collapseToggle__chevron { display: block; transition: transform 0.2s ease; } /* 展开状态：箭头指向右侧（可以折叠） */ .storeTabBar__collapseToggle .storeTabBar__collapseToggle__chevron { transform: rotate(0deg); } /* 折叠状态：箭头指向下方（可以展开） */ .groupTabs--collapsed .storeTabBar__collapseToggle .storeTabBar__collapseToggle__chevron { transform: rotate(90deg); } /* ── 筛选条折叠状态：隐藏滚动区与「更多」；保留「+」以便折叠时仍可新建 ── */ .groupTabs--collapsed > .groupTabs__clip, .groupTabs--collapsed > .groupTabs__more { display: none !important; } /* ── 筛选条折叠状态：显示全部按钮并靠近类型标签 ── */ .groupTabs--collapsed > .groupTab--all { flex-shrink: 0; } /* ── 移动端：更紧凑的筛选条 ── */ @media (max-width: 520px) { .storeTabBar__typeLabel { font-size: 10px; padding: 0 2px 0 0; } .storeTabBar__collapseToggle { width: 22px; height: 26px; } #store-query-module .groupTabs, #app-view-study #study-pan-store-tags.groupTabs { gap: 3px; } #store-query-module .groupTabs:not(.isHidden), #app-view-study #study-pan-store-tags.groupTabs { padding: 3px 0; } #store-query-module .groupTabs > .groupTab { font-size: 11px; padding: 2px 8px; } #store-query-module .groupTabs > .groupTab .groupTab__count { font-size: 10px; } #store-query-module .storeTabBar__addCluster .storeTabAddBtn { width: 24px; height: 24px; font-size: 14px; } #store-query-module .storeTabBar__addCluster .storeTabBar__taxonomyIcon { width: 18px; min-width: 18px; height: 24px; } } /* source: /style_store_filter_chips_bar_search.css?v=3 */ /* 库房/访客历史检索框；由 style_store_filter_chips_bar.css 拆出；须在其之后 */ /* 库检索框在分组条之上；AI 批断历史筛选复用同一套检索框样式 */ #store-query-module .inputWrapper--store-search, #guest-ai-history .inputWrapper--store-search { margin-bottom: 0; } #store-query-module .inputWrapper--store-search input, #guest-ai-history .inputWrapper--store-search input { padding: 0 48px 0 12px; height: 38px; min-height: 38px; box-sizing: border-box; font-size: 12px; line-height: 36px; } #store-query-module .inputWrapper--store-search input::placeholder, #guest-ai-history .inputWrapper--store-search input::placeholder { font-size: 12px; } #store-query-module .inputWrapper--store-search:has(.clearBtn.isVisible) input, #guest-ai-history .inputWrapper--store-search:has(.clearBtn.isVisible) input { padding-right: 82px; } #store-query-module .inputWrapper--store-search .storePanelSearchBtn, #guest-ai-history .inputWrapper--store-search .storePanelSearchBtn { position: absolute; right: 12px; top: 50%; translate: 0 -50%; z-index: 2; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 9px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; transition: color 0.2s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #store-query-module .inputWrapper--store-search .storePanelSearchBtn::before, #guest-ai-history .inputWrapper--store-search .storePanelSearchBtn::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--touch-min, 44px); height: var(--touch-min, 44px); transform: translate(-50%, -50%); } #store-query-module .inputWrapper--store-search:has(.clearBtn.isVisible) .storePanelSearchBtn, #guest-ai-history .inputWrapper--store-search:has(.clearBtn.isVisible) .storePanelSearchBtn { right: 46px; } #store-query-module .inputWrapper--store-search .clearBtn, #guest-ai-history .inputWrapper--store-search .clearBtn { top: 50%; translate: 0 -50%; background: transparent; border-color: transparent; box-shadow: none; } #store-query-module .inputWrapper--store-search .clearBtn:hover, #store-query-module .inputWrapper--store-search .clearBtn:active, #store-query-module .inputWrapper--store-search .clearBtn:focus-visible, #guest-ai-history .inputWrapper--store-search .clearBtn:hover, #guest-ai-history .inputWrapper--store-search .clearBtn:active, #guest-ai-history .inputWrapper--store-search .clearBtn:focus-visible { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-main); opacity: 1; } [data-theme="light"] #store-query-module .inputWrapper--store-search .clearBtn:hover, [data-theme="light"] #guest-ai-history .inputWrapper--store-search .clearBtn:hover { color: var(--text-main); } #store-query-module .inputWrapper--store-search .storePanelSearchBtn:hover, #guest-ai-history .inputWrapper--store-search .storePanelSearchBtn:hover { color: var(--text-main); background: transparent; border-color: transparent; } #store-query-module .inputWrapper--store-search .storePanelSearchBtn:active, #guest-ai-history .inputWrapper--store-search .storePanelSearchBtn:active { transform: scale(0.96); } #store-query-module .inputWrapper--store-search .storePanelSearchBtn:focus-visible, #guest-ai-history .inputWrapper--store-search .storePanelSearchBtn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.5); } #store-query-module .inputWrapper--store-search .storePanelSearchBtn__icon, #guest-ai-history .inputWrapper--store-search .storePanelSearchBtn__icon { display: block; flex-shrink: 0; width: 13px; height: 13px; } /* source: /style_store_bazi.css?v=5 */ /* 库房柱位筛选壳；单元格见 style_store_bazi_cells.css */ /* ── 库房八字柱位筛选网格（对齐出生表单四柱格） ───────────────── */ .storePillarFilter { container-type: inline-size; container-name: store-pillar-filter; --store-pf-glyph-size: clamp(14px, min(5cqw, 3.2svh, 4vmin), 20px); --store-pf-ring-size: clamp(16px, min(5.4cqw, 3.4svh, 4.3vmin), 26px); --store-pf-ring-border: max(1.5px, calc(var(--store-pf-ring-size) * 0.1)); --store-pf-stem-row: clamp(28px, calc(var(--store-pf-glyph-size) + 10px), 42px); --store-pf-branch-row: clamp(28px, calc(var(--store-pf-glyph-size) + 12px), 44px); --store-pf-col-pad-x: clamp(4px, min(2.5cqw, 1.6svh), 18px); position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 4px 0 8px; border: none; border-radius: 0; background: transparent; box-sizing: border-box; overflow: visible; } @container store-pillar-filter (max-width: 360px) { .storePillarFilter { --store-pf-glyph-size: clamp(14px, min(6.5cqw, 3svh, 4.2vmin), 18px); --store-pf-ring-size: clamp(16px, min(7.2cqw, 3.2svh, 4.6vmin), 22px); } } @container store-pillar-filter (min-width: 640px) { .storePillarFilter { --store-pf-glyph-size: clamp(16px, min(4.2cqw, 3.4svh, 3.8vmin), 20px); --store-pf-ring-size: clamp(18px, min(4.8cqw, 4svh, 4.2vmin), 26px); } } @media (max-height: 640px) { .storePillarFilter { --store-pf-glyph-size: clamp(13px, min(4.8cqw, 2.8svh, 3.6vmin), 18px); --store-pf-ring-size: clamp(16px, min(5.2cqw, 3svh, 4vmin), 22px); } } .storePillarFilter__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; padding: 0 2px; cursor: pointer; } .storePillarFilter__toggle.pan-collapsible-head { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border-radius: 6px; color: var(--text-dim); display: inline-flex; align-items: center; cursor: pointer; } .storePillarFilter__chevron.pan-collapsible-chevron { flex-shrink: 0; margin-left: auto; cursor: pointer; } .storePillarFilter__head:has(.storePillarFilter__toggle.isCollapsed) .storePillarFilter__chevron { transform: rotate(-90deg); } .storePillarFilter--collapsible:has(.storePillarFilter__toggle.isCollapsed) { padding-bottom: 0; } .storePillarFilter__body.pan-collapsible-body { display: flex; flex-direction: column; gap: 0; } .storePillarFilter__title { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.04em; line-height: 1.2; } .storePillarFilter__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0; width: 100%; align-items: stretch; overflow: visible; } .storePillarFilter__col { display: contents; } .storePillarFilter__colTitle { display: flex; align-items: center; justify-content: center; padding: clamp(1px, 0.5cqi, 4px) var(--store-pf-col-pad-x) clamp(1px, 0.35cqi, 3px); font-size: 10px; font-weight: 700; color: var(--text-dim); line-height: 1.2; letter-spacing: 0.06em; user-select: none; } /* source: /style_store_bazi_cells.css?v=4 */ /* 库房柱位筛选单元格；视觉对齐录入页 .bazi-piece；须在 style_store_bazi.css 之后 */ .storePillarFilter__cellWrap { position: relative; display: flex; align-items: center; justify-content: center; overflow: visible; width: 100%; min-width: 0; padding: clamp(1px, 0.4cqi, 3px) var(--store-pf-col-pad-x); box-sizing: border-box; } .storePillarFilter__cellWrap--stem { height: var(--store-pf-stem-row); min-height: var(--store-pf-stem-row); } .storePillarFilter__cellWrap--branch { height: var(--store-pf-branch-row); min-height: var(--store-pf-branch-row); padding-top: 0; } .storePillarFilter__cellWrap--picker-open { z-index: 3; } .storePillarFilter__cell { appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; outline: none; width: 100%; height: 100%; min-height: 0; max-width: 100%; font-weight: 700; line-height: 1; cursor: pointer; text-align: center; transition: transform 0.18s ease, color 0.18s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .storePillarFilter__cell--empty { border-radius: 0; border: none; background-color: transparent; background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--store-pf-ring-border)), var(--bazi-empty-ring) calc(50% - var(--store-pf-ring-border)), var(--bazi-empty-ring) 50%, transparent 50.5% ); background-size: var(--store-pf-ring-size) var(--store-pf-ring-size); background-position: center; background-repeat: no-repeat; color: transparent; font-size: 0; } .storePillarFilter__cellWrap:hover .storePillarFilter__cell--empty, .storePillarFilter__cell--empty:hover { background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--store-pf-ring-border)), var(--bazi-empty-ring-hover) calc(50% - var(--store-pf-ring-border)), var(--bazi-empty-ring-hover) 50%, transparent 50.5% ); transform: none; box-shadow: none; } .storePillarFilter__cellWrap:focus-within .storePillarFilter__cell--empty, .storePillarFilter__cell--empty:focus-visible { background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--store-pf-ring-border)), var(--bazi-empty-ring-focus) calc(50% - var(--store-pf-ring-border)), var(--bazi-empty-ring-focus) 50%, transparent 50.5% ); outline: none; } /* source: /style_store_bazi_cells_filled.css?v=2 */ .storePillarFilter__cell:not(.storePillarFilter__cell--empty) { width: 100%; height: 100%; min-height: 0; font-size: var(--store-pf-glyph-size); background: transparent; } .storePillarFilter__cellWrap:hover .storePillarFilter__cell:not(.storePillarFilter__cell--empty), .storePillarFilter__cell:not(.storePillarFilter__cell--empty):hover, .storePillarFilter__cellWrap:focus-within .storePillarFilter__cell:not(.storePillarFilter__cell--empty) { transform: scale(1.02); background: transparent; box-shadow: none; } .storePillarFilter__cell--active { color: inherit; } .storePillarFilter__clearBtn { appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-dim); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, color 0.12s ease; -webkit-tap-highlight-color: transparent; } .storePillarFilter__clearIcon { display: block; flex-shrink: 0; width: 14px; height: 14px; } .storePillarFilter__clearBtn--visible { opacity: 0.85; pointer-events: auto; } .storePillarFilter__clearBtn:hover, .storePillarFilter__clearBtn:active, .storePillarFilter__clearBtn:focus-visible { color: var(--text-main); background: transparent; border: none; box-shadow: none; opacity: 1; } /* source: /style_store_bazi_picker.css?v=2 */ /* 库房柱选字板；五行色见 style_store_bazi_picker_colors.css */ .storePillarPicker { position: absolute; z-index: 12; padding: 8px 10px 10px; border-radius: 14px; border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.12)); background: var(--panel-bg); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; min-width: max(100%, 188px); max-width: min(92vw, 320px); pointer-events: auto; margin: 0; } .storePillarPicker.storePillarPicker--anchored { top: calc(100% + 5px); left: 50%; right: auto; transform: translateX(-50%); } .storePillarPicker.storePillarPicker--fixed { position: fixed; transform: none; min-width: 0; width: max-content; max-width: calc(100vw - 16px); z-index: 10050; } .storePillarPicker.storePillarPicker--fixed::before { display: none; } .storePillarPicker.storePillarPicker--anchored::before { content: ""; position: absolute; top: -5px; left: 50%; width: 2px; height: 5px; transform: translateX(-50%); background: color-mix(in srgb, var(--panel-border, rgba(255, 255, 255, 0.12)) 88%, transparent); pointer-events: none; } .storePillarPicker.storePillarPicker--anchored.storePillarPicker--above { top: auto; bottom: calc(100% + 5px); } .storePillarPicker.storePillarPicker--anchored.storePillarPicker--above::before { top: auto; bottom: -5px; } .storePillarPicker.storePillarPicker--branch { grid-template-columns: repeat(6, 1fr); } .storePillarPicker.isHidden { display: none; } .storePillarPicker__opt { appearance: none; margin: 0; display: inline-flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--card-hover); font-size: 17px; font-weight: 800; cursor: pointer; line-height: 1; text-align: center; transition: background 0.12s ease, border-color 0.12s ease; -webkit-tap-highlight-color: transparent; } /* source: /style_store_bazi_picker_colors.css?v=2 */ /* 库房柱选字板五行色；由 style_store_bazi_picker.css 拆出；须在其之后 */ .storePillarPicker__opt.wood { color: #52f08c; } .storePillarPicker__opt.fire { color: #ff7e92; } .storePillarPicker__opt.earth { color: #fcd34d; } .storePillarPicker__opt.metal { color: #ffffff; } .storePillarPicker__opt.water { color: var(--water); } .storePillarPicker__opt:hover { background: var(--card-hover); border-color: rgba(255, 255, 255, 0.16); } .storePillarPicker__opt.isSelected { background: var(--card-hover); border-color: rgba(255, 255, 255, 0.24); } .storePillarPicker__opt--hidden { display: none !important; } .storePillarPicker__opt--clear { grid-column: 1 / -1; aspect-ratio: auto; width: 100%; min-height: 36px; padding: 0 10px; font-size: 12px; font-weight: 800; color: rgba(186, 198, 220, 0.92); border-style: dashed; border-color: rgba(255, 255, 255, 0.14); background: var(--card-hover); border-radius: 8px; } .storePillarPicker__opt:active, .storePillarPicker__opt:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.45); } /* 浅色主题适配 */ :root[data-theme="light"] .storePillarFilter { border: none; background: transparent; box-shadow: none; } :root[data-theme="light"] .storePillarFilter__colTitle { color: var(--text-muted); } :root[data-theme="light"] .storePillarFilter__cell--empty { background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--store-pf-ring-border)), rgba(100, 116, 139, 0.55) calc(50% - var(--store-pf-ring-border)), rgba(100, 116, 139, 0.55) 50%, transparent 50.5% ); } :root[data-theme="light"] .storePillarFilter__cellWrap:hover .storePillarFilter__cell--empty, :root[data-theme="light"] .storePillarFilter__cell--empty:hover { background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--store-pf-ring-border)), rgba(100, 116, 139, 0.72) calc(50% - var(--store-pf-ring-border)), rgba(100, 116, 139, 0.72) 50%, transparent 50.5% ); } :root[data-theme="light"] .storePillarFilter__cellWrap:focus-within .storePillarFilter__cell--empty, :root[data-theme="light"] .storePillarFilter__cell--empty:focus-visible { background-image: radial-gradient( circle closest-side, transparent calc(50% - var(--store-pf-ring-border)), rgba(100, 116, 139, 0.78) calc(50% - var(--store-pf-ring-border)), rgba(100, 116, 139, 0.78) 50%, transparent 50.5% ); } :root[data-theme="light"] .storePillarFilter__cell.metal { color: #0a0a0a; } :root[data-theme="light"] .storePillarFilter__clearBtn:hover, :root[data-theme="light"] .storePillarFilter__clearBtn:active, :root[data-theme="light"] .storePillarFilter__clearBtn:focus-visible { color: var(--text-main); } :root[data-theme="light"] .storePillarPicker { background: var(--panel-bg); border-color: var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); } :root[data-theme="light"] .storePillarPicker__opt { background: var(--card-hover); border-color: rgba(0, 0, 0, 0.08); } :root[data-theme="light"] .storePillarPicker__opt.isSelected { background: var(--card-hover); border-color: rgba(0, 0, 0, 0.22); } :root[data-theme="light"] .storePillarPicker__opt.metal { color: #0a0a0a; } :root[data-theme="light"] .storePillarPicker__opt--clear { color: rgba(71, 85, 105, 0.8); border-color: rgba(0, 0, 0, 0.12); background: var(--card-hover); } /* source: /style_store.css?v=11 */ /* 库房区布局；内联对话框见 style_store_modal.css */ .storeTabActionMenu { position: fixed; z-index: 5200; width: max-content; min-width: 10.5rem; max-width: calc(100vw - 16px); border-radius: 12px; background: rgba(10, 11, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); padding: 6px; box-sizing: border-box; pointer-events: auto; -webkit-overflow-scrolling: touch; } html.store-tab-overflow-open .storeTabActionMenu { z-index: 9000; pointer-events: auto; } .storeTabActionMenu__item { display: block; width: 100%; margin: 0; padding: 10px 12px; min-height: 40px; border: none; border-radius: 9px; background: transparent; appearance: none; -webkit-appearance: none; color: rgba(248, 250, 252, 0.98); font-size: 13px; font-weight: 600; font-family: inherit; text-align: left; white-space: nowrap; cursor: pointer; line-height: 1.35; transition: background 0.16s ease, color 0.16s ease; -webkit-tap-highlight-color: transparent; } .storeTabActionMenu__item:hover { background: rgba(var(--accent-rgb), 0.14); } .storeTabActionMenu__item--danger { color: #fecaca; text-shadow: none; } .storeTabActionMenu__item--danger:hover { background: rgba(248, 113, 113, 0.18); color: #fecaca; } /* 库房全部分组/标签底栏打开时，重命名等对话框须叠在底栏之上 */ html.store-tab-overflow-open .storeModalBackdrop { z-index: 8400; } /* source: /style_store_modal.css?v=2 */ /* 库房内联对话框；由 style_store.css 拆出；须在其之后、style_store_fields.css 之前 */ /* 库区操作：内联对话框（替代被内嵌浏览器禁用的 prompt/confirm） */ .storeModalBackdrop { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: storeModalBackdropIn 0.18s ease; } .storeModalSheet { width: 100%; max-width: 380px; border-radius: 16px; background: rgba(16, 17, 28, 0.98); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); padding: 20px 22px 18px; box-sizing: border-box; animation: storeModalSheetIn 0.22s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes storeModalBackdropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes storeModalSheetIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .storeModalTitle { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 12px; line-height: 1.4; } .storeModalMessage { margin: 0 0 18px; font-size: 13px; font-weight: 600; line-height: 1.55; color: rgba(226, 232, 240, 0.88); } .storeModalInput { width: 100%; box-sizing: border-box; margin-bottom: 18px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.4); color: var(--text-main); font-size: 14px; font-weight: 600; font-family: inherit; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .storeModalInput:focus { border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2); } /* source: /style_store_modal_actions.css?v=1 */ .storeModalActions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; } .storeModalBtn { appearance: none; margin: 0; padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent; } .storeModalBtn--ghost { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: var(--text-muted); } .storeModalBtn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-main); } .storeModalBtn--primary { background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.25)); border-color: rgba(var(--accent-rgb), 0.45); color: var(--text-main); } .storeModalBtn--primary:hover { background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.45), rgba(var(--accent-rgb), 0.32)); } .storeModalBtn--danger { background: rgba(248, 113, 113, 0.18); border-color: rgba(248, 113, 113, 0.45); color: #fecaca; } .storeModalBtn--danger:hover { background: rgba(248, 113, 113, 0.28); } .storeModalBtn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 2px; } .storeModalBtn:disabled { opacity: 0.55; cursor: not-allowed; } /* source: /style_store_fields.css?v=5 */ /* 库房字段布局；分组/标签壳见 style_store_fields_shell.css */ .birth-c-row--tag-bundle { align-items: flex-start; overflow: visible; } /* 出生卡片左侧图标列（姓名、时间、出生地、分组、标签）：图标 + 短文案，窄屏可读 */ label.birth-c-row__label.birth-c-row__icon-lead, label.birth-c-row__label.birth-c-row__tag-lead { flex: 0 0 auto; max-width: none; width: auto; min-width: var(--birth-icon-col, 44px); min-height: var(--birth-icon-col, var(--touch-min, 44px)); margin: 0; padding: 4px 2px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: 3px; text-transform: none; letter-spacing: normal; font-size: inherit; line-height: 1.1; cursor: pointer; border-radius: 10px; color: var(--text-dim); transition: color 0.15s ease, background 0.15s ease; -webkit-tap-highlight-color: transparent; } label.birth-c-row__label.birth-c-row__icon-lead:hover, label.birth-c-row__label.birth-c-row__tag-lead:hover { color: var(--text-muted); background: color-mix(in srgb, var(--text-main) 6%, transparent); } label.birth-c-row__label.birth-c-row__icon-lead:focus-visible, label.birth-c-row__label.birth-c-row__tag-lead:focus-visible { outline: 2px solid color-mix(in srgb, var(--focus-ring-color) 70%, transparent); outline-offset: 2px; } .birth-c-row__icon-lead__svg, .birth-c-row__tag-lead__svg { display: block; flex-shrink: 0; width: var(--birth-icon-size, 18px); height: var(--birth-icon-size, 18px); } .birth-c-row__icon-lead__text { display: block; max-width: 3.2em; overflow: hidden; text-overflow: clip; white-space: nowrap; font-size: var(--birth-label-font-size, 10px); font-weight: 750; letter-spacing: 0.04em; line-height: 1.15; color: inherit; text-align: center; user-select: none; } #birth-pref-group-wrap.birth-c-row, #bazi-reverse-year-wrap.birth-c-row { align-items: center; } /* * 出生 tab「库分组 / 标签」：有排盘但无库房读或写权限的用户不展示（与 perm-no-store-* 一致）。 * 默认隐藏；仅在 /api/user/status 已写入权限类后，且同时具备 store:read + store:write 时显示。 */ #birth-pref-group-wrap, #birth-pref-tags-wrap { display: none !important; } body.bazi-perms-applied:not(.perm-no-store-read):not(.perm-no-store-write) #birth-pref-group-wrap, body.bazi-perms-applied:not(.perm-no-store-read):not(.perm-no-store-write) #birth-pref-tags-wrap { display: flex !important; } .birth-c-group-picker-root.pan-store-group-picker { flex: 1; min-width: 0; width: 100%; position: relative; } /* 深色主题：表单壳/下拉触发器边框各态一致，展开/聚焦不变 accent 灰边 */ html:not([data-theme="light"]) .birth-c-field-shell, html:not([data-theme="light"]) .birth-c-field-shell:hover, html:not([data-theme="light"]) .birth-c-field-shell:focus-within, html:not([data-theme="light"]) .birth-c-group-picker-root.isOpen > .birth-c-field-shell, html:not([data-theme="light"]) .birth-c-tag-picker-root.isOpen > .birth-c-tag-composer-shell.birth-c-field-shell, html:not([data-theme="light"]) .birth-c-tag-picker-root:not(.isOpen) .birth-c-tag-composer-shell.birth-c-field-shell:focus-within, html:not([data-theme="light"]) .pan-store-group-picker .pan-store-group-input-wrap, html:not([data-theme="light"]) .pan-store-group-picker:hover .pan-store-group-input-wrap, html:not([data-theme="light"]) .pan-store-group-picker.isOpen .pan-store-group-input-wrap, html:not([data-theme="light"]) .pan-store-group-picker:focus-within .pan-store-group-input-wrap { border-color: rgba(255, 255, 255, 0.06); box-shadow: none; } /* source: /style_store_fields_shell.css?v=4 */ /* 出生/学习盘分组标签字段壳；由 style_store_fields.css 拆出；须在其之后 */ /* 出生 tab + 学习盘笔记（名称/内容/标签）：字段壳与出生时间、八字工具行同款 */ :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-field-shell { min-height: 40px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input-bg); overflow: hidden; } :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-field-shell:focus-within, #tab-birth .birth-c-group-picker-root.isOpen > .birth-c-field-shell, :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-picker-root.isOpen > .birth-c-tag-composer-shell.birth-c-field-shell { border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 18%, transparent); } :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-field-shell:hover { border-color: var(--input-border); background: var(--input-bg); } #tab-birth input.birth-c-select.birth-store-group-select, #tab-birth .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input, #study-pan-preview .studyPanNoteView .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input { text-align: left; padding: 0 10px 0 12px !important; } #tab-birth .birth-c-group-pick-btn.pan-store-group-pick-btn, :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-pick-btn.pan-store-group-pick-btn { width: 40px; flex-shrink: 0; align-self: stretch; border: none; border-left: none; border-radius: 0; background: transparent; color: var(--text-dim); } #tab-birth .birth-c-group-pick-btn.pan-store-group-pick-btn:hover, #tab-birth .birth-c-group-pick-btn.pan-store-group-pick-btn:active, :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-pick-btn.pan-store-group-pick-btn:hover, :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-pick-btn.pan-store-group-pick-btn:active { background: transparent; color: var(--text-main); box-shadow: none; } #tab-birth .birth-c-group-pick-btn.pan-store-group-pick-btn:focus-visible, :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-pick-btn.pan-store-group-pick-btn:focus-visible { background: transparent; box-shadow: none; outline: 2px solid color-mix(in srgb, var(--focus-ring-color) 55%, transparent); outline-offset: -2px; } #tab-birth .birth-c-group-picker-root.isOpen .birth-c-group-pick-btn, :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-picker-root.isOpen .birth-c-tag-pick-btn { color: var(--text-main); } #tab-birth .birth-c-group-picker-root.isOpen .birth-c-group-pick-btn svg, :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-picker-root.isOpen .birth-c-tag-pick-btn svg { transform: rotate(180deg); } #tab-birth .birth-c-group-pick-btn svg, :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-pick-btn svg { transition: transform 0.18s ease; } html:not([data-theme="light"]) :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-field-shell, html:not([data-theme="light"]) :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-field-shell:hover, html:not([data-theme="light"]) :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-field-shell:focus-within, html:not([data-theme="light"]) #tab-birth .birth-c-group-picker-root.isOpen > .birth-c-field-shell, html:not([data-theme="light"]) :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-picker-root.isOpen > .birth-c-tag-composer-shell.birth-c-field-shell { border-color: var(--input-border); background: var(--input-bg); box-shadow: none; } html:not([data-theme="light"]) :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-field-shell:focus-within, html:not([data-theme="light"]) #tab-birth .birth-c-group-picker-root.isOpen > .birth-c-field-shell, html:not([data-theme="light"]) :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-picker-root.isOpen > .birth-c-tag-composer-shell.birth-c-field-shell { border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 18%, transparent); } html:not([data-theme="light"]) #tab-birth .birth-c-group-pick-btn.pan-store-group-pick-btn, html:not([data-theme="light"]) :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-pick-btn.pan-store-group-pick-btn { border-left: none; background: transparent; } .birth-c-group-pick-btn.pan-store-group-pick-btn { width: 42px; align-self: stretch; } .birth-c-tag-mount, .birth-pref-tags-mount { flex: 1; min-width: 0; } /* source: /style_store_birth_tags.css?v=10 */ /* 出生卡片标签/分组壳；下拉菜单见 style_store_birth_tags_menu.css */ /* 出生标签：与批断入库同款「色点 + 输入 + 下拉」一体条，上为已选 chips */ .birth-c-tag-picker-root.pan-store-group-picker { width: 100%; display: flex; flex-direction: column; gap: 0; } /* 与分组 .birth-c-field-shell 一致：圆角 + overflow 裁切，避免右侧箭头伸出圆角 */ .birth-c-tag-composer-shell.birth-c-field-shell { display: flex; width: 100%; min-width: 0; padding: 0; overflow: hidden; } :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-composer-shell.birth-c-field-shell { overflow: hidden; } .birth-c-tag-composer-shell .pan-store-tag-composer-wrap { flex: 1; min-width: 0; } /* 标签 composer：外框由 birth-c-field-shell 承担，内层 input-wrap 不再叠边框 */ .birth-c-tag-composer-shell > .pan-store-group-input-wrap.pan-store-tag-composer-wrap { border: none; border-radius: 0; box-shadow: none; background: transparent; /* 裁切交给外层 field-shell；内层勿再 overflow:hidden 成直角盒 */ overflow: visible; } html:not([data-theme="light"]) .birth-c-tag-composer-shell > .pan-store-group-input-wrap.pan-store-tag-composer-wrap { border: none; box-shadow: none; background: transparent; } .birth-c-tag-picker-root.isOpen > .birth-c-tag-composer-shell.birth-c-field-shell, .birth-c-tag-picker-root:not(.isOpen) .birth-c-tag-composer-shell.birth-c-field-shell:focus-within { border-color: rgba(255, 255, 255, 0.06); box-shadow: none; } /* 出生 tab / 学习盘笔记：覆盖上一段弱边框，与字段壳 focus 规则一致 */ :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-picker-root.isOpen > .birth-c-tag-composer-shell.birth-c-field-shell, :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-picker-root:not(.isOpen) .birth-c-tag-composer-shell.birth-c-field-shell:focus-within { border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 18%, transparent); } .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input { border: none; border-radius: 0; box-shadow: none !important; background: transparent; /* 字号/字重见 style_birth_fields.css 统一规则 */ min-height: 38px; /* 与分组 #birth-store-group 同：提示/正文距左边框 12px */ padding: 0 10px 0 12px; } .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input::placeholder { /* placeholder 样式见 style_birth_fields.css 统一规则 */ color: var(--text-dim); opacity: 0.75; font-weight: 500; } /* 与分组 pick 同高同裁切：不额外 border-left，避免右侧「竖线+箭头被圆角切」 */ .birth-c-tag-pick-btn.pan-store-group-pick-btn { width: 40px; align-self: stretch; touch-action: manipulation; } :is(#tab-birth, #study-pan-preview .studyPanNoteView) .birth-c-tag-pick-btn.pan-store-group-pick-btn { border-left: none; background: transparent; } .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input:hover { background: transparent; } .birth-c-tag-stack .pan-store-group-combo-input.pan-store-tag-composer-input:focus { outline: none; box-shadow: none !important; } .birth-c-tag-menu-empty { margin: 0; padding: 14px 12px; font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: center; line-height: 1.4; } /* source: /style_store_birth_tags_menu.css?v=3 */ /* 出生标签菜单；chip 见 style_store_birth_tags_chips.css */ .pan-store-group-menu.birth-c-tag-menu-portal, .pan-store-group-menu.birth-c-group-menu-portal { border-radius: 10px; background: var(--bg-dark); border: 1px solid var(--filter-separator); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); } @media (prefers-reduced-transparency: reduce) { .pan-store-group-menu.birth-c-tag-menu-portal, .pan-store-group-menu.birth-c-group-menu-portal { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-dark); } } .pan-store-group-menu.birth-c-tag-menu-portal .pan-store-group-menu-scroll, .pan-store-group-menu.birth-c-group-menu-portal .pan-store-group-menu-scroll { padding: 4px; max-height: min(260px, 44vh); } .pan-store-group-menu.birth-c-tag-menu-portal .pan-store-group-menu-item, .pan-store-group-menu.birth-c-group-menu-portal .pan-store-group-menu-item { padding: 8px 10px; border-radius: 8px; font-size: var(--birth-label-font-size, 12px); font-weight: 600; letter-spacing: 0.01em; } .pan-store-group-menu.birth-c-tag-menu-portal .pan-store-group-menu-item:hover, .pan-store-group-menu.birth-c-group-menu-portal .pan-store-group-menu-item:hover { background: rgba(var(--accent-rgb), 0.1); } .pan-store-group-menu.birth-c-tag-menu-portal .pan-store-group-menu-item:disabled, .pan-store-group-menu.birth-c-group-menu-portal .pan-store-group-menu-item:disabled { opacity: 0.38; } .pan-store-group-menu.birth-c-tag-menu-portal .birth-c-tag-menu-empty, .pan-store-group-menu.birth-c-group-menu-portal .birth-c-tag-menu-empty { padding: 11px 10px; font-size: var(--birth-label-font-size, 11px); font-weight: 600; } .birth-c-tag-stack { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: stretch; } .birth-c-tag-stack .tagChips--birth { justify-content: flex-start; } .tagChips--birth { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 0; padding: 0; } .tagChips--birth:empty { display: none; } .birth-c-mini-chip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px 4px 10px; border-radius: var(--surface-radius-sm, 11px); font-size: var(--birth-label-font-size, 11px); font-weight: 700; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.22); color: #e0e7ff; } .birth-c-mini-chip__x { appearance: none; border: none; background: transparent; color: rgba(255, 255, 255, 0.45); cursor: pointer; font-size: var(--birth-ui-font-size, 14px); line-height: 1; padding: 0 0 0 2px; border-radius: 4px; } .birth-c-mini-chip__x:hover { color: var(--text-main); } .birth-c-mini-chip__x:focus-visible { outline: 2px solid color-mix(in srgb, var(--focus-ring-color, #fff) 50%, transparent); outline-offset: 1px; } /* source: /style_store_birth_tags_chips.css?v=2 */ /* 出生/通用标签 chip；由 style_store_birth_tags_menu.css 拆出；须在其之后 */ .tagChips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .tagChip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: var(--surface-radius-sm, 11px); font-size: 12px; font-weight: 600; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.28); color: #e0e7ff; } .tagChip__remove { appearance: none; border: none; background: transparent; color: rgba(255, 255, 255, 0.45); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; border-radius: 4px; } .tagChip__remove:hover { color: var(--text-main); } .tagInputRow { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; width: 100%; min-width: 0; } .tagChipSelect { flex: 0 0 auto; width: min(42%, 200px); min-width: 132px; max-width: 220px; padding: 8px 10px; padding-right: 28px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.35); color: var(--text-main); font-size: 13px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .tagChipInput { flex: 1 1 auto; min-width: 96px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.25); color: var(--text-main); font-size: 13px; } .tagChipAdd { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; } @media (max-width: 520px) { .tagInputRow { flex-wrap: wrap; } .tagChipSelect { width: 100%; max-width: none; } .tagChipInput { flex: 1 1 140px; min-width: 0; } } /* source: /style_store_hit_row.css?v=6 */ /* 库房命中行竖排；出生见 style_store_hit_row_birth.css */ .storePanelResult .searchHit.searchHit--store, #store-panel-result .searchHit.searchHit--store { display: flex; flex-direction: column; align-items: stretch; gap: 4px; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; border-radius: 0; padding: 10px 8px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .storePanelResult .searchHit.searchHit--store:not(.searchHit--selected):not(.searchHit--empty):not(:last-child), #store-panel-result .searchHit.searchHit--store:not(.searchHit--selected):not(.searchHit--empty):not(:last-child) { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--text-main) 8%, transparent); } .storePanelResult .searchHit.searchHit--store:focus-visible, #store-panel-result .searchHit.searchHit--store:focus-visible { outline: 2px solid var(--focus-ring-color, var(--accent)); outline-offset: -2px; } .storePanelResult .searchHit.searchHit--store.searchHit--selected, #store-panel-result .searchHit.searchHit--store.searchHit--selected { border-radius: 10px; } .storePanelResult .searchHit--store .storeHitHead, #store-panel-result .searchHit--store .storeHitHead { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 8px; min-width: 0; width: 100%; } .storePanelResult .searchHit--store .storeHitName, #store-panel-result .searchHit--store .storeHitName { box-sizing: border-box; flex: 0 1 auto; min-width: 0; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0; font-size: 14px; } .storePanelResult .searchHit--store .storeHitName--placeholder, #store-panel-result .searchHit--store .storeHitName--placeholder { color: transparent; } .storePanelResult .searchHit--store .genderBadge, #store-panel-result .searchHit--store .genderBadge { box-sizing: border-box; flex-shrink: 0; width: auto; min-width: 0; max-width: none; margin-right: 0; padding-left: 0; padding-right: 0; justify-content: center; align-self: center; } .storePanelResult .searchHit--store .genderBadge--quiet, #store-panel-result .searchHit--store .genderBadge--quiet { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-dim, #94a3b8); } .storePanelResult .searchHit--store.searchHit--selected .genderBadge--quiet, #store-panel-result .searchHit--store.searchHit--selected .genderBadge--quiet { color: var(--text-muted, #94a3b8); } .storePanelResult .searchHit--store .genderBadge--placeholder, #store-panel-result .searchHit--store .genderBadge--placeholder { visibility: hidden; } .storePanelResult .searchHit--store .storeHitHeadMeta, #store-panel-result .searchHit--store .storeHitHeadMeta { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 6px; margin-left: auto; min-width: 0; overflow: hidden; } .storePanelResult .searchHit--store .storeHitHeadMeta .groupBadge, #store-panel-result .searchHit--store .storeHitHeadMeta .groupBadge, .storePanelResult .searchHit--store .storeHitHeadMeta .storeHitTag, #store-panel-result .searchHit--store .storeHitHeadMeta .storeHitTag { margin-left: 0; max-width: 7.5rem; min-height: 0; max-height: none; padding: 1px 6px; font-size: 10px; flex-shrink: 0; box-sizing: border-box; } .storePanelResult .searchHit--store .storeHitBaziSlot, #store-panel-result .searchHit--store .storeHitBaziSlot { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; display: flex; justify-content: flex-start; align-items: center; overflow: hidden; } .storePanelResult .searchHit--store .storeHitBirthCell, #store-panel-result .searchHit--store .storeHitBirthCell { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 0.35em; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; color: var(--text-dim, #94a3b8); font-size: 12px; line-height: 1.3; } /* source: /style_store_hit_row_birth.css?v=3 */ /* 库房命中行出生叠排；由 style_store_hit_row.css 拆出；须在其之后、actions 之前 */ .storePanelResult .searchHit--store .storeHitBirthCell>.storeHitBirth--lunar-only, #store-panel-result .searchHit--store .storeHitBirthCell>.storeHitBirth--lunar-only { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.3; color: inherit; } .storePanelResult .searchHit--store .storeHitOwnerSep, #store-panel-result .searchHit--store .storeHitOwnerSep { flex-shrink: 0; opacity: 0.45; user-select: none; } .storePanelResult .searchHit--store .storeHitOwnerInline, #store-panel-result .searchHit--store .storeHitOwnerInline { flex: 0 1 auto; min-width: 0; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; opacity: 0.78; } .storePanelResult .searchHit--store .storeHitBirthCell>.storeHitBirth--stack, #store-panel-result .searchHit--store .storeHitBirthCell>.storeHitBirth--stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; width: max-content; max-width: 20rem; box-sizing: border-box; font-size: 11px; line-height: 1.25; } .storePanelResult .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__stack, #store-panel-result .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__stack { gap: 1px; max-width: 100%; min-width: 0; } .storePanelResult .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__lunar-row, .storePanelResult .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__solar-row, #store-panel-result .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__lunar-row, #store-panel-result .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__solar-row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .storePanelResult .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__lunar-row, #store-panel-result .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__lunar-row { font-size: 10px; } .storePanelResult .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__solar-row, #store-panel-result .searchHit--store .storeHitBirthCell>.storeHitBirth--stack .candidate-item__solar-row { font-size: 10.5px; } .storePanelResult .searchHit--store .storeHitBirthCell--empty, #store-panel-result .searchHit--store .storeHitBirthCell--empty { color: transparent; pointer-events: none; } .storePanelResult .searchHit--store .storeHitGroupCell, #store-panel-result .searchHit--store .storeHitGroupCell { box-sizing: border-box; width: max-content; max-width: min(12rem, 100%); min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; align-self: center; justify-self: start; } .storePanelResult .searchHit--store .storeHitGroupCell--empty, #store-panel-result .searchHit--store .storeHitGroupCell--empty { color: transparent; } .storePanelResult .searchHit--store .storeHitGroupCell .groupBadge, #store-panel-result .searchHit--store .storeHitGroupCell .groupBadge { margin-left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .storePanelResult .searchHit--store .storeHitOwnerCell, #store-panel-result .searchHit--store .storeHitOwnerCell { box-sizing: border-box; width: max-content; max-width: min(8rem, 100%); min-width: 0; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; align-self: center; justify-self: start; } .storePanelResult .searchHit--store .storeHitOwnerCell--empty, #store-panel-result .searchHit--store .storeHitOwnerCell--empty { color: transparent; } .ownerBadge { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 8px; border-radius: var(--surface-radius-sm, 11px); font-size: 11px; font-weight: 600; line-height: 1.35; border: 1px solid color-mix(in srgb, var(--text-main) 22%, transparent); background: transparent; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="light"] .ownerBadge { border-color: rgba(17, 17, 17, 0.18); color: #111111; } /* source: /style_store_hit_row_actions.css?v=4 */ /* 库房命中行操作前半；悬停见 style_store_hit_row_actions_hover.css */ /* 用户条 chips：无齿轮，完整柔角（与墨笺 chip 语汇一致） */ #store-query-module .groupTabs--owners .groupTabWrap--owner { border-radius: var(--surface-radius-sm, 11px); } #store-query-module .groupTabs--owners .groupTabWrap--owner .groupTab { border-radius: var(--surface-radius-sm, 11px); padding: 5px 12px; } .storePanelResult .searchHit--store .storeHitTagsCell, #store-panel-result .searchHit--store .storeHitTagsCell, .storePanelResult .searchHit--store .storeHitHeadMeta, #store-panel-result .searchHit--store .storeHitHeadMeta { min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 6px; overflow: hidden; } .storePanelResult .searchHit--store .storeHitTagMore, #store-panel-result .searchHit--store .storeHitTagMore { flex-shrink: 0; font-size: 11px; font-weight: 650; color: var(--text-dim); letter-spacing: 0.02em; } .storePanelResult .searchHit--store .storeHitTagsCell .storeHitTag, #store-panel-result .searchHit--store .storeHitTagsCell .storeHitTag, .storePanelResult .searchHit--store .storeHitHeadMeta .storeHitTag, #store-panel-result .searchHit--store .storeHitHeadMeta .storeHitTag { margin-left: 0; flex-shrink: 0; } .storePanelResult .searchHit--store .storeHitRowActions, #store-panel-result .searchHit--store .storeHitRowActions { display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-shrink: 0; margin-left: 2px; gap: 8px; align-self: center; min-height: 0; line-height: 1; } /* 库房命中行：编辑等与 admin ghostBtn ai-master-icon-btn 一致 */ .storePanelResult .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn, #store-panel-result .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn, .storePanelResult .searchHit--store .storeHitRowActions .hitDelLink, #store-panel-result .searchHit--store .storeHitRowActions .hitDelLink { margin: 0; padding: 0; width: 34px; height: 34px; min-width: 34px; min-height: 34px; box-sizing: border-box; border: none; border-radius: 8px; background: transparent; box-shadow: none; flex: 0 0 auto; line-height: 1; transition: color 0.15s ease; } .storePanelResult .searchHit--store .storeHitRowActions .hitDelLink .ui-icon-svg--delete, .storePanelResult .searchHit--store .storeHitRowActions .hitDelLink svg, #store-panel-result .searchHit--store .storeHitRowActions .hitDelLink .ui-icon-svg--delete, #store-panel-result .searchHit--store .storeHitRowActions .hitDelLink svg { width: 16px; height: 16px; } .storePanelResult .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn, #store-panel-result .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn { font-size: 18px; font-weight: 600; } .storePanelResult .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete), #store-panel-result .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete) { color: var(--text-dim); } .searchHit--store:hover .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete), .storePanelResult .searchHit--store:hover .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete), #store-panel-result .searchHit--store:hover .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete) { color: var(--text-main); } .storePanelResult .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):hover, #store-panel-result .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):hover, .storePanelResult .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):active, #store-panel-result .searchHit--store .storeHitRowActions .ghostBtn.ai-master-icon-btn:not(.ai-master-icon-btn--delete):active { color: var(--text-main); background: transparent !important; box-shadow: none; transform: none; } .storePanelResult .searchHit--store .storeHitRowActions .hitDelLink, #store-panel-result .searchHit--store .storeHitRowActions .hitDelLink { /* 破坏性动作静置即红（深色用浅红；浅色由 style_theme_light_fix_controls_dark.css 覆盖为 #ef4444） */ color: #f87171 !important; } /* source: /style_store_hit_row_actions_hover.css?v=3 */ /* 库房命中行操作悬停；由 style_store_hit_row_actions.css 拆出；须在其之后 */ /* 覆盖全局 .hitDelLink:hover / .hitEditLink:hover 的色块底，库房行内仅变色、无阴影 */ .storePanelResult .searchHit--store .storeHitRowActions .hitDelLink:hover, #store-panel-result .searchHit--store .storeHitRowActions .hitDelLink:hover { color: #fb7185 !important; background: transparent !important; box-shadow: none !important; filter: none !important; } /* 静置已红：行 hover 维持同色，加亮留给按钮自身 hover/focus */ .searchHit--store:hover .storeHitRowActions .hitDelLink, .storePanelResult .searchHit--store:hover .storeHitRowActions .hitDelLink, #store-panel-result .searchHit--store:hover .storeHitRowActions .hitDelLink { color: #f87171 !important; background: transparent !important; box-shadow: none !important; filter: none !important; } .storePanelResult .searchHit--store .storeHitRowActions .hitDelLink:active, #store-panel-result .searchHit--store .storeHitRowActions .hitDelLink:active { transform: scale(0.96); background: transparent !important; box-shadow: none !important; filter: none !important; } .storePanelResult .searchHit--store .storeHitRowActions .hitDelLink:focus-visible, #store-panel-result .searchHit--store .storeHitRowActions .hitDelLink:focus-visible { outline: 2px solid rgba(248, 113, 113, 0.45); outline-offset: 1px; background: transparent !important; box-shadow: none !important; } .searchHit--store-user-hidden .storeHitName { opacity: 0.72; } .storeHitUserHiddenTag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 6px; border-radius: var(--surface-radius-sm, 11px); font-size: 10px; font-weight: 700; line-height: 1.35; color: color-mix(in srgb, var(--danger, #e25b5b) 95%, transparent); border: 1px solid color-mix(in srgb, var(--danger, #e25b5b) 35%, transparent); background: color-mix(in srgb, var(--danger, #e25b5b) 8%, transparent); vertical-align: middle; } [data-theme="light"] .storeHitUserHiddenTag { color: #c81a3a; border-color: rgba(200, 26, 58, 0.28); background: rgba(200, 26, 58, 0.08); } .storePanelResult .searchHit--store .storeHitBaziGrid, #store-panel-result .searchHit--store .storeHitBaziGrid { flex-shrink: 0; column-gap: 0.4em; row-gap: 0; display: inline-grid; width: 100%; max-width: 100%; box-sizing: border-box; grid-template-columns: repeat(var(--store-hit-bazi-cols, 4), minmax(0, 1fr)); grid-template-rows: auto auto; line-height: 1.12; text-align: center; } /* source: /style_store_hit_row_actions_hover_grid.css?v=1 */ .storePanelResult .searchHit--store .storeHitBaziGrid__stem, #store-panel-result .searchHit--store .storeHitBaziGrid__stem { grid-row: 1; } .storePanelResult .searchHit--store .storeHitBaziGrid__br, #store-panel-result .searchHit--store .storeHitBaziGrid__br { grid-row: 2; } .storePanelResult .searchHit--store .storeHitBirth--grid, #store-panel-result .searchHit--store .storeHitBirth--grid { flex-wrap: nowrap; gap: 12px; align-items: center; } .storePanelResult .searchHit--store .storeHitBirth__mid, #store-panel-result .searchHit--store .storeHitBirth__mid { flex-direction: row; align-items: center; gap: 10px; } .storePanelResult .searchHit--store .storeHitBirth__year, .storePanelResult .searchHit--store .storeHitBirth__shichen, #store-panel-result .searchHit--store .storeHitBirth__year, #store-panel-result .searchHit--store .storeHitBirth__shichen { display: inline-flex; align-items: center; line-height: 1.2; } .storePanelResult .searchHit--store .storeHitBirth__solar, .storePanelResult .searchHit--store .storeHitBirth__lunar, #store-panel-result .searchHit--store .storeHitBirth__solar, #store-panel-result .searchHit--store .storeHitBirth__lunar { line-height: 1.2; } .storePanelStatus { font-size: 12px; color: var(--text-dim); margin-top: 10px; display: none; } .storePanelStatus:not(:empty) { display: block; } .storeHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .storeTitleText { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .storeBaziLine { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.4; } /* source: /style_store_edit.css?v=5 */ /* 命盘入库/编辑姓名性别壳；一体输入见 style_store_edit_inputs.css */ /* 命盘区「入库 / 编辑」表单 */ .pan-store-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; margin-top: 8px; margin-bottom: 4px; align-items: start; } /* * #pan-live-note-body 内：操作行须可点；打开中的下拉再抬到更高层。 * 勿让栅格 z-index 压过「更新/取消」，否则溢出层会吞掉按钮点击，表现为「更新无效」。 */ #pan-live-note-body>.pan-store-editor-grid { position: relative; z-index: 0; } #pan-live-note-body>.panNoteActions { position: relative; z-index: 2; } .pan-store-editor-grid>.storeSpan2 { grid-column: 1 / -1; } /* 库房编辑：姓名 + 性别同排（对齐出生 tab .birth-c-row--name-gender） */ .pan-store-name-gender-row { display: flex; align-items: center; gap: 10px; min-width: 0; } .pan-store-name-gender-row .inputWrapper--pan-store-name { flex: 1 1 auto; min-width: 0; } .pan-store-name-gender-row .inputWrapper--pan-store-gender { flex: 0 0 auto; /* 覆盖全局 .inputWrapper { width:100% }，否则性别块会占满整行 */ width: auto; max-width: max-content; align-self: center; } .pan-store-name-gender-row .inputWrapper--pan-store-gender .birth-pill-tray { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 6px; margin: 0; width: auto; } /* 库房编辑姓名+性别：窄屏单行时给性别留位；超窄屏改纵排避免挤压 */ @media (max-width: 520px) { .pan-store-name-gender-row { flex-wrap: nowrap; gap: 8px; } .pan-store-name-gender-row .inputWrapper--pan-store-name { max-width: 65%; } .pan-store-name-gender-row .inputWrapper--pan-store-gender .birth-pill-tray { gap: 4px; } .pan-store-name-gender-row .birth-pill > span { min-width: 40px; min-height: 36px; padding: 6px 12px; } } @media (max-width: 420px) { .pan-store-name-gender-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; } .pan-store-name-gender-row .inputWrapper--pan-store-name { max-width: none; width: 100%; } .pan-store-name-gender-row .inputWrapper--pan-store-gender { align-self: flex-start; max-width: 100%; } .pan-store-name-gender-row .inputWrapper--pan-store-gender .birth-pill-tray { flex-wrap: wrap; } } /* source: /style_store_edit_batch.css?v=1 */ /* 命盘「批断」：仅批断区可见时收紧表单栅格上下留白 */ #pan-live-note.pan-live-note--batch-only .pan-store-editor-grid { margin-top: 4px; margin-bottom: 0; } /* 铅笔「编辑」：隐藏批断块时收紧栅格底留白 */ #pan-live-note.pan-live-note--store-edit-meta-only .pan-store-editor-grid { margin-bottom: 0; } .pan-store-editor-grid>.inputWrapper, .pan-store-name-gender-row .inputWrapper { min-width: 0; } .pan-store-editor-grid>.inputWrapper.inputWrapper--pan-store-name, .pan-store-name-gender-row .inputWrapper.inputWrapper--pan-store-name { display: flex; align-items: stretch; gap: 10px; } .pan-store-editor-grid>.inputWrapper.inputWrapper--pan-store-name input, .pan-store-name-gender-row .inputWrapper.inputWrapper--pan-store-name input { flex: 1; min-width: 0; width: auto; } .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field { display: flex; align-items: stretch; gap: 10px; } /* source: /style_store_edit_inputs.css?v=3 */ /* 库房编辑输入；时柱步进见 style_store_edit_inputs_hour.css */ .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field .pan-store-bazi-row { display: flex; flex: 1; align-items: stretch; gap: 0; min-width: 0; min-height: 38px; background: var(--bg-dark); border: 1px solid var(--filter-separator); border-radius: 10px; overflow: hidden; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field .pan-store-bazi-row:hover { border-color: var(--filter-separator); } .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field .pan-store-bazi-row:focus-within { border-color: var(--focus-ring-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 18%, transparent); } .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field input.pan-store-bazi-input { flex: 1; min-width: 0; width: auto; height: auto; min-height: 38px; margin: 0; padding: 8px 12px; border: none !important; border-radius: 0; box-shadow: none !important; background: transparent; color: var(--text-main); font-size: 13px; font-weight: 600; font-variant-east-asian: proportional-width; letter-spacing: 0.06em; outline: none; } .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field input.pan-store-bazi-input::placeholder { color: var(--text-dim); font-weight: 500; letter-spacing: 0.02em; opacity: 0.72; } .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field input.pan-store-bazi-input:focus { box-shadow: none !important; outline: none; } .pan-store-bazi-hour-nav { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; align-self: stretch; min-width: 4.75rem; padding: 0 8px 0 10px; border-left: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); user-select: none; } .pan-store-bazi-hour-nav.isDisabled { opacity: 0.42; } /* source: /style_store_edit_inputs_hour.css?v=2 */ /* 库房编辑时柱步进；由 style_store_edit_inputs.css 拆出；须在其之后 */ .pan-store-bazi-hour-cap { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; color: var(--text-dim); opacity: 0.7; } .pan-store-bazi-hour-pillar { display: inline-flex; align-items: baseline; justify-content: center; gap: 0; min-width: 2em; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; font-variant-east-asian: proportional-width; color: var(--text-main); } .pan-store-bazi-hour-char { display: inline-block; line-height: 1; } .pan-store-bazi-hour-stepper { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin-left: 1px; } .pan-store-bazi-hour-btn { appearance: none; -webkit-appearance: none; cursor: pointer; border: none; margin: 0; padding: 0; width: 18px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: transparent; color: var(--text-main); opacity: 0.55; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .pan-store-bazi-hour-btn svg { width: 12px; height: 12px; display: block; } /* source: /style_store_edit_inputs_hour_btn.css?v=1 */ .pan-store-bazi-hour-btn:hover:not(:disabled) { opacity: 1; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); } .pan-store-bazi-hour-btn:active:not(:disabled) { transform: scale(0.92); } .pan-store-bazi-hour-btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 1px; opacity: 1; } .pan-store-bazi-hour-btn:disabled { opacity: 0.28; cursor: not-allowed; } html:not([data-theme="light"]) .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field .pan-store-bazi-row, html:not([data-theme="light"]) .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field .pan-store-bazi-row:hover { border-color: rgba(255, 255, 255, 0.06); box-shadow: none; } html:not([data-theme="light"]) .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field .pan-store-bazi-row:focus-within { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); } [data-theme="light"] .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field .pan-store-bazi-row, [data-theme="light"] .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field .pan-store-bazi-row:hover, [data-theme="light"] .pan-store-editor-grid>.inputWrapper.pan-store-bazi-field .pan-store-bazi-row:focus-within { border-color: #000000 !important; box-shadow: none !important; background: #ffffff; } [data-theme="light"] .pan-store-bazi-hour-nav { border-left-color: #000000; background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .pan-store-bazi-hour-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .pan-store-bazi-hour-char.metal { color: #000000; } @media (max-width: 720px) { .pan-store-editor-grid { grid-template-columns: 1fr; gap: 10px 12px; } } /* source: /style_store_edit_inputs_group.css?v=2 */ /* 入库编辑分组/标签输入；由 style_store_edit_inputs.css 拆出；须在其之后、style_store_edit_birth.css 之前 */ /* 批断表单：分组 = 可输入 + 右侧按钮展开全部分组（避免 datalist 按输入过滤） */ .pan-store-group-field .pan-store-group-row { display: flex; align-items: stretch; width: 100%; } .pan-store-group-row--unified { flex-direction: column; gap: 10px; } .pan-store-group-picker { position: relative; width: 100%; } .pan-store-picker-row { display: flex; align-items: stretch; gap: 10px; width: 100%; min-width: 0; } .pan-store-field-label { flex-shrink: 0; display: flex; align-items: center; min-width: 2.75em; margin: 0; padding: 0; font-size: 12px; font-weight: 750; letter-spacing: 0.02em; color: rgba(226, 232, 240, 0.5); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .pan-store-field-label:hover { color: rgba(226, 232, 240, 0.72); } label.pan-store-field-label--icon { min-width: 36px; width: 36px; justify-content: center; font-size: 0; line-height: 0; border-radius: 10px; transition: color 0.15s ease, background 0.15s ease; } label.pan-store-field-label--icon:hover { background: rgba(255, 255, 255, 0.05); } label.pan-store-field-label--icon:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; } .pan-store-field-icon-svg { display: block; flex-shrink: 0; } .pan-store-picker-row>.pan-store-group-input-wrap { flex: 1; min-width: 0; width: auto; } /* 批断标签行：左侧吊牌图标代替「标签」二字，点击可聚焦输入 */ /* source: /style_store_edit_inputs_group_tags.css?v=1 */ .pan-store-picker-row--tags { align-items: center; } label.pan-store-tag-row-lead { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 10px; color: rgba(226, 232, 240, 0.42); cursor: pointer; transition: color 0.15s ease, background 0.15s ease; -webkit-tap-highlight-color: transparent; } label.pan-store-tag-row-lead:hover { color: rgba(226, 232, 240, 0.78); background: rgba(255, 255, 255, 0.05); } label.pan-store-tag-row-lead:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; } .pan-store-tag-row-lead__svg { display: block; flex-shrink: 0; } .pan-store-birth-row>.pan-store-birth-picker { flex: 1; min-width: 0; width: auto; } /* source: /style_store_edit_birth.css?v=3 */ /* 命盘批断出生反查字段；下拉菜单见 style_store_edit_birth_menu.css */ /* 出生时刻：与分组同款 inputWrap + 下拉菜单，不用系统原生