/* ============================================================ 紫微斗数排盘 App — 视觉样式 设计语言：宣纸底 · 描金辅色 · 篆印点缀 · 卦象符号 主题：① 靛紫「紫微垣」（默认）　② 朱墨「朱砂丹印」　③ 雾紫「薰衣幻梦」　④ 曜黑「深空星舰」　⑤ 星夜「黑夜星空」 —— 切换方式： 字体：标题用衬线（宋/明体）营造古籍质感，正文用无衬线保证手机可读性 ============================================================ */ /* ---- 主题一：靛紫（紫微垣 · 天帝之居）---- */ :root, html[data-theme="indigo"] { /* 墨色阶（略带青紫的冷墨） */ --ink: #16131f; --ink-2: #474056; --ink-3: #877f97; --ink-4: #b0a9bf; /* 纸色阶（月白底，冷调） */ --paper: #f2f1f6; --paper-2: #f9f8fc; --paper-3: #f2ece0; --card: #fffefe; --card-2: #faf9fd; /* 主色：紫微垣之紫（深靛紫） */ --primary: #3d2f66; --primary-lt: #5a4a94; --primary-dk: #2a1f47; /* 描金辅色 */ --gold: #a8842f; --gold-lt: #c9a961; --gold-pale: #e8d9b0; /* 警示色：仅用于化忌、凶曜、避忌提示（与主色分离，吉凶不同色） */ --warn: #a32638; --warn-lt: #c04a5c; /* 五行色 */ --mu: #2f7d5d; --huo: #b5442f; --tu: #9a7b3c; --jin: #b08c2e; --shui: #2c5f8a; /* 线 / 影（冷调） */ --line: #e2e0eb; --line-2: #cfcbdd; --shadow-sm: 0 1px 3px rgba(50, 42, 80, .07); --shadow: 0 3px 14px rgba(50, 42, 80, .09), 0 1px 2px rgba(50, 42, 80, .05); --shadow-lg: 0 10px 34px rgba(50, 42, 80, .15); /* 派生色 */ --tint-primary: rgba(61, 47, 102, .05); --shadow-primary: rgba(61, 47, 102, .28); --line-primary: rgba(61, 47, 102, .30); --ming-bg: linear-gradient(180deg, #f4f1fb, #ece7f7); --chip: #efedf5; --chip-line: rgba(61, 47, 102, .14); --grid-bg: linear-gradient(180deg, #e9e6f2, #ded9ec); --btn-bg: linear-gradient(180deg, #fffefe, #f5f3fa); --info-bg: linear-gradient(180deg, #f6f3fc, #efeaf8); --overlay: rgba(242, 241, 246, .96); --radius: 14px; --radius-sm: 9px; } /* ---- 主题二：朱墨（朱砂丹印）---- */ html[data-theme="cinnabar"] { --ink: #17140f; --ink-2: #4a4238; --ink-3: #8b8172; --ink-4: #b3a894; --paper: #f6f1e7; --paper-2: #fbf7ef; --paper-3: #f2ece0; --card: #fffdf8; --card-2: #fdf9f0; --primary: #9b1c2c; --primary-lt: #b8434a; --primary-dk: #7a1220; --gold: #a8842f; --gold-lt: #c9a961; --gold-pale: #e8d9b0; --warn: #9b1c2c; --warn-lt: #c04a5c; --mu: #2f7d5d; --huo: #b5442f; --tu: #9a7b3c; --jin: #b08c2e; --shui: #2c5f8a; --line: #e3d9c4; --line-2: #d3c5a8; --shadow-sm: 0 1px 3px rgba(70, 52, 20, .07); --shadow: 0 3px 14px rgba(70, 52, 20, .09), 0 1px 2px rgba(70, 52, 20, .05); --shadow-lg: 0 10px 34px rgba(70, 52, 20, .14); --tint-primary: rgba(155, 28, 44, .045); --shadow-primary: rgba(155, 28, 44, .28); --line-primary: rgba(155, 28, 44, .30); --ming-bg: linear-gradient(180deg, #fdf5e6, #f8eed8); --chip: #f2ecdd; --chip-line: rgba(168, 132, 47, .14); --grid-bg: var(--grid-bg); --radius: 14px; --radius-sm: 9px; } /* ---- 主题三：雾紫（薰衣幻梦 · 柔紫梦境）---- */ html[data-theme="violet"] { /* 墨色阶（偏紫的柔和墨） */ --ink: #2b2440; --ink-2: #554b70; --ink-3: #8c81a8; --ink-4: #b8aed2; /* 纸色阶（淡薰衣草底） */ --paper: #f3f0fc; --paper-2: #faf8ff; --paper-3: #ece5f9; --card: #ffffff; --card-2: #f9f6ff; /* 主色：柔和薰衣草紫 */ --primary: #7a67c4; --primary-lt: #9b8ad8; --primary-dk: #5b4a9e; /* 描金辅色（淡金） */ --gold: #b4943e; --gold-lt: #d4b96a; --gold-pale: #ede2c2; /* 警示色 */ --warn: #c04a6b; --warn-lt: #d4728c; /* 五行色 */ --mu: #3f8a68; --huo: #c25a44; --tu: #a5854c; --jin: #bb9a42; --shui: #4a72a8; /* 线 / 影（柔紫调） */ --line: #e6e1f4; --line-2: #d4ccea; --shadow-sm: 0 1px 3px rgba(90, 74, 158, .08); --shadow: 0 3px 14px rgba(90, 74, 158, .12), 0 1px 2px rgba(90, 74, 158, .06); --shadow-lg: 0 10px 34px rgba(90, 74, 158, .18); /* 派生色 */ --tint-primary: rgba(122, 103, 196, .06); --shadow-primary: rgba(122, 103, 196, .30); --line-primary: rgba(122, 103, 196, .32); --ming-bg: linear-gradient(180deg, #f2edfd, #e7dff8); --chip: #efeafb; --chip-line: rgba(122, 103, 196, .16); --grid-bg: linear-gradient(180deg, #ece7f9, #ded5f3); --btn-bg: linear-gradient(180deg, #ffffff, #f6f2fd); --info-bg: linear-gradient(180deg, #f5f1fe, #ece5fa); --overlay: rgba(243, 240, 252, .96); --radius: 14px; --radius-sm: 9px; } /* ---- 主题四：曜黑（深空星舰 · 霓虹科技）---- */ html[data-theme="tech"] { color-scheme: dark; /* 墨色阶（反转为浅色文字） */ --ink: #e9f1ff; --ink-2: #aab8d6; --ink-3: #7285a6; --ink-4: #46536e; /* 底 / 卡（深空黑，冷蓝调） */ --paper: #0a0f1c; --paper-2: #0d1322; --paper-3: #05070d; --card: #121a2c; --card-2: #0e1524; /* 主色：霓虹青（青→紫渐变，用于填充与标题） */ --primary: #4fe4ff; --primary-lt: #22d3ee; --primary-dk: #7c3aed; /* 辅色：霓虹紫（描金位替换为科技紫） */ --gold: #a78bfa; --gold-lt: #c4b5fd; --gold-pale: rgba(167, 139, 250, .30); /* 警示色：高亮珊瑚红 */ --warn: #ff5d73; --warn-lt: #ff8a9c; /* 五行色（深色下提亮） */ --mu: #3ddc97; --huo: #ff6b5a; --tu: #e0b060; --jin: #ffd166; --shui: #4db8ff; /* 线 / 影（深色描边 + 深空投影） */ --line: #1d2840; --line-2: #2b3a58; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55); --shadow: 0 4px 18px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 14px 44px rgba(0, 0, 0, .62); /* 派生色（霓虹光晕） */ --tint-primary: rgba(79, 228, 255, .06); --shadow-primary: rgba(34, 211, 238, .40); --line-primary: rgba(79, 228, 255, .42); --ming-bg: linear-gradient(180deg, #17253f, #101a30); --chip: #1a2236; --chip-line: rgba(120, 170, 255, .16); --grid-bg: linear-gradient(180deg, #0d1626, #0a1120); --btn-bg: linear-gradient(180deg, #182238, #121a2c); --info-bg: linear-gradient(180deg, #12203a, #0d1730); --overlay: rgba(6, 9, 16, .92); --radius: 14px; --radius-sm: 9px; } /* ---- 曜黑：深空背景与辉光（覆盖浅色主题的纸底纹理）---- */ html[data-theme="tech"], html[data-theme="tech"] body { background: radial-gradient(1100px 560px at 50% -12%, rgba(34, 211, 238, .14), transparent 62%), radial-gradient(760px 520px at 100% 0, rgba(124, 58, 237, .16), transparent 58%), repeating-linear-gradient(90deg, rgba(90, 200, 255, .05) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(90, 200, 255, .05) 0 1px, transparent 1px 24px), linear-gradient(180deg, #0a0f1c, #070b14 60%, #05070d); } html[data-theme="tech"] body::before { background: radial-gradient(circle at 0 0, rgba(79, 228, 255, .12), transparent 30%), radial-gradient(circle at 100% 0, rgba(124, 58, 237, .14), transparent 28%), radial-gradient(circle at 0 100%, rgba(124, 58, 237, .10), transparent 28%), radial-gradient(circle at 100% 100%, rgba(79, 228, 255, .12), transparent 30%); } /* ---- 主题五：星夜（纯黑星空 · 紫微星与北斗）---- */ html[data-theme="star"] { color-scheme: dark; /* 墨色阶（星辉白） */ --ink: #f2f6ff; --ink-2: #a9b9d8; --ink-3: #6a7694; --ink-4: #3c4662; /* 底 / 卡（纯黑底 + 极暗卡片） */ --paper: #000000; --paper-2: #04050a; --paper-3: #000000; --card: #0a0c15; --card-2: #05060c; /* 主色：星辉蓝紫（蓝→深紫，用于填充与标题） */ --primary: #c3d4ff; --primary-lt: #a8c0ff; --primary-dk: #4b3fb8; /* 辅色：星金（北斗与紫微之光） */ --gold: #ffd071; --gold-lt: #ffe7b4; --gold-pale: rgba(255, 208, 113, .26); /* 警示色 */ --warn: #ff7085; --warn-lt: #ff98a8; /* 五行色（夜空中提亮） */ --mu: #46e0a0; --huo: #ff7a66; --tu: #e8bb6a; --jin: #ffd76e; --shui: #5cc0ff; /* 线 / 影 */ --line: #171c2c; --line-2: #232a42; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .8); --shadow: 0 4px 20px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .6); --shadow-lg: 0 16px 50px rgba(0, 0, 0, .85); /* 派生色（星辉光晕） */ --tint-primary: rgba(168, 192, 255, .06); --shadow-primary: rgba(150, 180, 255, .42); --line-primary: rgba(168, 192, 255, .42); --ming-bg: linear-gradient(180deg, #131a30, #080b16); --chip: #111524; --chip-line: rgba(168, 192, 255, .16); --grid-bg: linear-gradient(180deg, #070912, #020306); --btn-bg: linear-gradient(180deg, #11141f, #080a12); --info-bg: linear-gradient(180deg, #0d1425, #06090f); --overlay: rgba(0, 0, 0, .95); --radius: 14px; --radius-sm: 9px; } /* 星夜：纯黑底色（仅留极淡星晕，避免发蓝发灰） */ html[data-theme="star"], html[data-theme="star"] body { background: radial-gradient(1100px 620px at 78% -14%, rgba(70, 92, 200, .10), transparent 60%), radial-gradient(880px 560px at 3% 106%, rgba(92, 62, 176, .08), transparent 58%), #000; } html[data-theme="star"] body::before { background: radial-gradient(circle at 0 0, rgba(140, 180, 255, .07), transparent 28%), radial-gradient(circle at 100% 0, rgba(255, 215, 140, .05), transparent 26%), radial-gradient(circle at 0 100%, rgba(255, 215, 140, .04), transparent 26%), radial-gradient(circle at 100% 100%, rgba(140, 180, 255, .07), transparent 28%); } /* 星空装饰层 */ .starfield { display: none; } html[data-theme="star"] .starfield { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* 底层密集星点（按层微闪，构成银河底色） */ .sf { position: absolute; inset: 0; background-repeat: repeat; } .sf-1 { background-image: radial-gradient(1.5px 1.5px at 22px 34px, #ffffff, transparent), radial-gradient(1.3px 1.3px at 78px 152px, #ffffff, transparent), radial-gradient(1px 1px at 186px 54px, #cfe0ff, transparent); background-size: 220px 200px; animation: twinkle 5.5s ease-in-out infinite; } .sf-2 { background-image: radial-gradient(1px 1px at 44px 62px, #ffffff, transparent), radial-gradient(1.2px 1.2px at 160px 24px, #ffe9bd, transparent), radial-gradient(1px 1px at 96px 118px, #dfe9ff, transparent); background-size: 168px 148px; animation: twinkle 4.2s ease-in-out infinite -1.6s; } .sf-3 { background-image: radial-gradient(0.9px 0.9px at 26px 96px, #ffffff, transparent), radial-gradient(1px 1px at 118px 40px, #d7e5ff, transparent); background-size: 128px 128px; animation: twinkle 3.4s ease-in-out infinite -2.4s; } @keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: .12; } } /* 单颗亮星：各自随机延迟独立闪烁（由脚本生成） 类名用 sf-star 并限定在 .starfield 内，避免与星曜标签 .tag.star 冲突 */ .starfield .sf-star { position: absolute; border-radius: 50%; background: var(--star-c, #ffffff); box-shadow: 0 0 2px 0 var(--star-g, rgba(255, 255, 255, .26)); animation: starBlink var(--star-d, 3s) ease-in-out infinite var(--star-delay, 0s); } @keyframes starBlink { 0%, 100% { opacity: var(--star-o, .95); transform: scale(1); } 50% { opacity: .06; transform: scale(.55); } } /* 紫微星（北极星）：紫色星辉 + 十字光芒 + 呼吸 */ .polestar { position: absolute; top: 3%; left: 4.5%; width: 4px; height: 4px; border-radius: 50%; background: #f4ecff; box-shadow: 0 0 6px 2px rgba(246, 238, 255, .95), 0 0 20px 7px rgba(186, 146, 255, .85), 0 0 54px 20px rgba(146, 100, 255, .45); animation: starPulse 3.6s ease-in-out infinite; } .polestar::before, .polestar::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .polestar::before { width: 58px; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 208, 255, .92), transparent); } .polestar::after { width: 1px; height: 58px; background: linear-gradient(180deg, transparent, rgba(226, 208, 255, .92), transparent); } @keyframes starPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .58; transform: scale(.86); } } /* 北斗七星（置于右上、完整显示；斗柄朝左上，延长线正对紫微星） */ .beidou { position: absolute; top: 8vh; left: 29%; width: 175px; height: auto; filter: drop-shadow(0 0 3px rgba(255, 232, 170, 1)) drop-shadow(0 0 12px rgba(255, 200, 90, .55)); } /* 连线样式：当前北斗不连线；如需恢复，给 SVG 加 即可生效 */ .beidou .bd-line { stroke: rgba(255, 228, 165, .62); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .beidou .bd-star { animation: starFade 4.6s ease-in-out infinite; } .beidou .bd-star:nth-of-type(2n) { animation-duration: 5.8s; animation-delay: -1.4s; } .beidou .bd-star:nth-of-type(3n) { animation-duration: 3.9s; animation-delay: -2.6s; } .beidou .bd-star:nth-of-type(5n) { animation-duration: 6.4s; animation-delay: -3.5s; } @keyframes starFade { 0%, 100% { opacity: 1; } 50% { opacity: .28; } } @media (prefers-reduced-motion: reduce) { .sf, .starfield .sf-star, .polestar, .beidou .bd-star { animation: none; } } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; /* 纯色底（不做上下渐变），仅保留宣纸网格纹理 */ background: repeating-linear-gradient(90deg, rgba(168,132,47,.030) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(168,132,47,.030) 0 1px, transparent 1px 22px), var(--paper); color: var(--ink); font: 15px/1.65 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; } body::before { /* 四角云纹暗饰 */ content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 0 0, var(--tint-primary), transparent 26%), radial-gradient(circle at 100% 0, rgba(168,132,47,.05), transparent 24%), radial-gradient(circle at 0 100%, rgba(168,132,47,.05), transparent 24%), radial-gradient(circle at 100% 100%, var(--tint-primary), transparent 26%); } #app { max-width: 560px; margin: 0 auto; min-height: 100vh; position: relative; z-index: 1; } .screen { display: none; } .screen.active { display: block; } .serif, h1, h3, h4, .zn, .drawer-head h3, .sec > h3 { font-family: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "Times New Roman", serif; } /* ================= 输入屏 ================= */ /* ---- 主题切换 ---- */ .themebar { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; justify-content: flex-end; flex-wrap: nowrap; gap: 5px; margin: 0; transform: scale(.667); transform-origin: top right; } .theme-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 4px 9px; border-radius: 20px; cursor: pointer; border: 1px solid var(--line-2); background: var(--card); font-size: 11px; color: var(--ink-3); font-family: inherit; letter-spacing: .04em; transition: .18s; } .theme-btn.active { color: var(--primary); border-color: var(--line-primary); box-shadow: 0 2px 8px var(--shadow-primary); } .theme-btn .sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .sw-indigo { background: linear-gradient(140deg, #5a4a94, #2a1f47); } .sw-cinnabar { background: linear-gradient(140deg, #b8434a, #7a1220); } .sw-violet { background: linear-gradient(140deg, #9b8ad8, #5b4a9e); } .sw-tech { background: radial-gradient(circle at 35% 30%, #6ff0ff, #0a1020 72%); box-shadow: 0 0 6px rgba(79, 228, 255, .85); } .sw-star { background: radial-gradient(circle at 30% 32%, #fff 0 1px, transparent 1px), radial-gradient(circle at 70% 62%, #ffe6ad 0 1px, transparent 1px), radial-gradient(circle at 46% 82%, #cfe0ff 0 1px, transparent 1px), #05070f; box-shadow: inset 0 0 0 1px rgba(150, 190, 255, .40), 0 0 6px rgba(200, 220, 255, .45); } .hero { padding: 38px 20px 20px; text-align: center; position: relative; } .hero h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: .3em; text-indent: .3em; color: var(--primary); background: linear-gradient(180deg, var(--primary-lt), var(--primary-dk)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero .sub { margin: 10px 0 0; color: var(--ink-2); font-size: 13px; letter-spacing: .22em; } .hero .sub i { font-style: normal; color: var(--gold); } .hero .rule { width: 92px; height: 1px; margin: 16px auto 12px; background: linear-gradient(90deg, transparent, var(--gold-lt), transparent); position: relative; } .hero .rule::after { content: '❖'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; color: var(--gold); background: var(--paper); padding: 0 6px; } /* 页面最底端的当前 UI 主题说明 */ .note { margin: 0 20px 32px; color: var(--primary); font-size: 11px; line-height: 1.7; letter-spacing: .1em; text-align: center; opacity: .78; } .hero .src { margin: 6px 0 0; color: var(--ink-3); font-size: 11px; letter-spacing: .04em; } .card { margin: 10px 14px 32px; padding: 20px 18px; background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; } .card::before { /* 描金内框 */ content: ''; position: absolute; inset: 5px; border: 1px solid rgba(168,132,47,.16); border-radius: calc(var(--radius) - 5px); pointer-events: none; } .field { margin-bottom: 20px; position: relative; } .field > label, .field-head > label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 9px; letter-spacing: .06em; } .field > label::before, .field-head > label::before { content: ''; width: 3px; height: 11px; border-radius: 2px; background: linear-gradient(180deg, var(--primary-lt), var(--primary-dk)); } /* 字段标题行：标题 + 紧随其后的控件（如阳历/阴历切换） */ .field-head { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-bottom: 9px; } .field-head > label { margin-bottom: 0; flex: 0 0 auto; } .row { display: flex; gap: 8px; } input[type=date], input[type=text], select, input[type=number] { flex: 1; width: 100%; padding: 12px 13px; font-size: 15px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fffefb; color: var(--ink); font-family: inherit; box-shadow: inset 0 1px 2px rgba(120,100,60,.05); } input[type=date]:focus, input[type=text]:focus, select:focus { outline: 2px solid rgba(168,132,47,.35); border-color: var(--gold-lt); } /* 占位提示：点击输入后自动消失，各主题下均清晰可读 */ input::placeholder { color: var(--ink-3); opacity: .8; } /* ---- 日期输入：公历/农历切换 + 日历按钮 ---- */ .seg-mini { display: inline-flex; width: auto; flex: 0 0 auto; } .seg-mini .seg-btn { flex: 0 0 auto; padding: 4px 10px; font-size: 12px; } /* ---- 滚轮选择器（年 / 月 / 日 / 时辰） ---- */ .wheel-group { position: relative; display: flex; gap: 4px; height: 132px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--card); box-shadow: inset 0 1px 2px rgba(120,100,60,.05); } .wheel-group.single { justify-content: center; } .wheel-group.single .wheel { flex: 0 0 46%; } .wheel { flex: 1; min-width: 0; overflow-y: auto; scroll-snap-type: y mandatory; padding: 48px 0; text-align: center; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 32%, #000 68%, transparent 100%); } .wheel::-webkit-scrollbar { display: none; } .wheel-item { height: 36px; line-height: 36px; scroll-snap-align: center; font-size: 15px; color: var(--ink-3); cursor: pointer; letter-spacing: .04em; transition: color .16s, transform .16s; } .wheel-item.active { color: var(--primary); font-weight: 700; transform: scale(1.06); } /* 中央选中带 */ .wheel-group::before { content: ''; position: absolute; left: 5px; right: 5px; top: 48px; height: 36px; border-top: 1px solid var(--line-primary); border-bottom: 1px solid var(--line-primary); opacity: .5; pointer-events: none; } /* ---- 日期输入框：可正常输入，右侧内联显示换算结果 ---- */ .date-box { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fffefb; box-shadow: inset 0 1px 2px rgba(120,100,60,.05); overflow: hidden; } .date-box:focus-within { outline: 2px solid rgba(168,132,47,.35); border-color: var(--gold-lt); } .date-box > #in-date { flex: 1 1 auto; min-width: 104px; width: auto; border-radius: 0; border: 0; background: transparent; box-shadow: none; padding: 12px 4px 12px 13px; } .date-box > #in-date:focus { outline: none; } /* 换算文案：每行整体不折断（min-width 取 min-content，故不会被拆成三行） */ .cal-conv { flex: 0 1 auto; max-width: 58%; padding: 2px 11px 2px 4px; font-size: 11px; line-height: 1.3; color: var(--primary); text-align: right; white-space: pre-line; pointer-events: none; } .cal-conv .nw { white-space: nowrap; } /* 日历按钮：唤起滚轮式日期选择弹层 */ .cal-btn { flex: 0 0 auto; width: 46px; padding: 0; display: grid; place-items: center; font-size: 18px; line-height: 1; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--ink-2); cursor: pointer; transition: .16s; } .cal-btn:active { transform: scale(.96); } /* ---- 日期滚轮选择弹层 ---- */ .picker-mask { position: fixed; inset: 0; z-index: 70; background: rgba(30, 20, 10, .45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .22s; } .picker-mask.show { opacity: 1; pointer-events: auto; } .picker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-width: 560px; margin: 0 auto; padding-bottom: 18px; background: linear-gradient(180deg, var(--card), var(--paper)); border-radius: 18px 18px 0 0; border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, var(--gold-lt), transparent) 1; box-shadow: 0 -8px 30px rgba(40, 28, 15, .22); transform: translateY(102%); transition: transform .26s cubic-bezier(.3, .85, .4, 1); } .picker.show { transform: translateY(0); } .picker-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); } .picker-title { font-size: 14px; color: var(--ink); letter-spacing: .06em; } .picker-btn { border: 0; background: none; font-family: inherit; font-size: 14px; color: var(--ink-3); cursor: pointer; padding: 6px 4px; letter-spacing: .04em; } .picker-btn.picker-ok { color: var(--primary); font-weight: 600; } #picker-wheels { margin: 14px 16px 0; } #leap-wrap { display: none; align-items: center; gap: 5px; margin: 0; font-size: 11px; color: var(--ink-2); letter-spacing: 0; cursor: pointer; font-weight: normal; white-space: nowrap; flex: 0 0 auto; } #leap-wrap::before { display: none; } #leap-wrap input { accent-color: var(--primary); margin: 0; } /* 出生时辰：十二时辰按钮网格 */ .zhi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .zhi-grid button { padding: 10px 0; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--btn-bg); font-size: 14px; color: var(--ink-2); font-family: inherit; cursor: pointer; transition: .16s; position: relative; letter-spacing: .04em; } .zhi-grid button:active { transform: scale(.97); } .zhi-grid button.active { background: linear-gradient(160deg, var(--primary-lt), var(--primary-dk)); border-color: var(--primary-dk); color: #fff; font-weight: 600; box-shadow: 0 3px 10px var(--shadow-primary); } .zhi-grid button.active::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; } .hint { font-size: 11.5px; color: var(--ink-3); margin: 8px 0 0; letter-spacing: .04em; } #hour-hint { margin: 0; } .seg { display: flex; gap: 8px; } .seg-btn { flex: 1; padding: 11px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--btn-bg); font-size: 15px; font-family: inherit; color: var(--ink-2); cursor: pointer; transition: .16s; } .seg-btn.active { background: linear-gradient(160deg, var(--primary-lt), var(--primary-dk)); border-color: var(--primary-dk); color: #fff; font-weight: 600; } .adv { margin: 2px 0 18px; font-size: 13px; border-top: 1px dashed var(--line-2); padding-top: 12px; } .adv summary { color: var(--ink-3); cursor: pointer; padding: 4px 0; letter-spacing: .05em; list-style: none; display: flex; align-items: center; gap: 6px; } .adv summary::before { content: '❖'; color: var(--gold); font-size: 10px; } .adv summary::-webkit-details-marker { display: none; } .adv .chk { display: block; margin: 10px 0; color: var(--ink-2); line-height: 1.5; } .adv input { margin-right: 7px; accent-color: var(--primary); } button.primary { width: 100%; padding: 15px; font-size: 16px; letter-spacing: .3em; text-indent: .3em; background: linear-gradient(135deg, var(--primary-lt) 0%, var(--primary) 45%, var(--primary-dk) 100%); border: 1px solid var(--line-primary); color: #fff; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-family: "Songti SC", "SimSun", serif; font-weight: 600; box-shadow: 0 6px 20px var(--shadow-primary), inset 0 1px 0 rgba(255,255,255,.22); position: relative; } button.primary:active { transform: translateY(1px); box-shadow: 0 3px 12px var(--shadow-primary); } .err { color: var(--primary); font-size: 12.5px; text-align: center; margin: 10px 0 0; min-height: 18px; } /* ================= 顶栏 / 标签 ================= */ .topbar { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: linear-gradient(180deg, var(--card), var(--paper-2)); border-bottom: 1px solid var(--line); box-shadow: 0 1px 6px rgba(120,100,60,.05); position: sticky; top: 0; z-index: 20; } .topbar .back, .topbar .ghost { border: 0; background: none; font-size: 14px; color: var(--ink-2); cursor: pointer; font-family: inherit; padding: 6px 8px; letter-spacing: .06em; } .topbar .back { font-size: 26px; line-height: 1; color: var(--primary); } .topbar .who { flex: 1; font-size: 11.5px; color: var(--ink-2); letter-spacing: .01em; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; line-height: 1.32; } .topbar .who .who-line { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .who b { color: var(--primary); font-weight: 600; } .topbar .who .who-sub { font-size: 10.5px; color: var(--ink-3); } /* 历法标注：标明该行日期为阴历（农历）还是阳历 */ .topbar .who .cal-tag { display: inline-block; font-size: 9.5px; line-height: 1.6; color: var(--primary); border: 1px solid var(--line-primary); border-radius: 4px; padding: 0 3px; margin-right: 2px; vertical-align: 1px; letter-spacing: .02em; } .tabs { display: flex; background: linear-gradient(180deg, var(--paper-2), var(--paper)); border-bottom: 1px solid var(--line); position: sticky; top: 47px; z-index: 19; } .tab { flex: 1; padding: 13px 0; border: 0; background: none; font-size: 14px; color: var(--ink-3); font-family: "Songti SC", "SimSun", serif; letter-spacing: .12em; cursor: pointer; position: relative; } .tab.active { color: var(--primary); font-weight: 700; } .tab.active::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); border-radius: 2px; } .pane { display: none; padding: 13px 12px 44px; } .pane.active { display: block; } /* ================= 运限层级条 ================= */ .layerbar { display: flex; gap: 6px; padding: 2px 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .lyr-btn { flex: 1 0 auto; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--btn-bg); font-size: 12.5px; color: var(--ink-2); cursor: pointer; font-family: inherit; white-space: nowrap; letter-spacing: .06em; transition: .16s; } .lyr-btn.active { background: linear-gradient(160deg, var(--primary-lt), var(--primary-dk)); border-color: var(--primary-dk); color: #fff; font-weight: 600; box-shadow: 0 3px 10px var(--shadow-primary); } .layerinfo { font-size: 11.5px; color: var(--ink-2); line-height: 1.75; background: var(--info-bg); border: 1px solid var(--gold-pale); border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 9px; position: relative; } .layerinfo::before { content: '❖'; position: absolute; right: 9px; top: 7px; color: var(--gold-lt); font-size: 10px; } .layerinfo b { color: var(--primary); } .layerinfo .ov { color: var(--mu); font-weight: 700; } .layerinfo:empty { display: none; } /* ================= 命盘 ================= */ .chart-wrap { position: relative; } .chart { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); gap: 5px; padding: 7px; background: var(--grid-bg); border: 1px solid var(--gold-lt); border-radius: var(--radius); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.5); } .cell { background: linear-gradient(180deg, var(--card), var(--card-2)); padding: 6px 7px; position: relative; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 2px; min-height: 100px; border: 1px solid rgba(168,132,47,.14); transition: background .16s; } .cell:active { background: #f6eeda; } .cell::before { /* 卦象水印 */ content: attr(data-gua); position: absolute; right: 3px; bottom: 1px; font-size: 22px; color: rgba(168,132,47,.13); line-height: 1; pointer-events: none; } .cell .hd { display: flex; justify-content: space-between; align-items: baseline; } .cell .pname { font-family: "Songti SC", "SimSun", serif; font-size: 12px; color: var(--ink); letter-spacing: .04em; font-weight: 600; } .cell .gz { font-size: 10px; color: var(--ink-3); letter-spacing: .02em; } .cell .stars { font-size: 11.5px; line-height: 1.62; flex: 1; position: relative; z-index: 1; } .cell .stars .st { display: inline-block; margin-right: 3px; white-space: nowrap; } .cell .stars .st .sy { font-size: 9px; color: var(--gold); margin-right: 1px; } .cell .stars .st.main { font-weight: 700; font-size: 13px; color: var(--ink); } .cell .stars .st.main .sy { font-size: 11px; color: var(--primary); } .cell .stars .wd { font-size: 9px; vertical-align: super; margin-left: 1px; color: var(--ink-3); } .cell .stars .st.ji { color: var(--mu); } .cell .stars .st.xiong { color: var(--warn); } .cell .ft { font-size: 9.5px; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; } .cell .alias { font-size: 8.5px; color: var(--gold); letter-spacing: .02em; line-height: 1.3; } .cell.ming { background: var(--ming-bg); border-color: var(--line-primary); box-shadow: inset 0 0 0 1px var(--line-primary); } .cell.ming .pname { color: var(--primary); } .cell.shen { box-shadow: inset 0 0 0 2px var(--gold-lt); } .cell .badge { position: absolute; top: 4px; right: 4px; font-size: 9px; padding: 1px 5px; border-radius: 4px; color: #fff; letter-spacing: .06em; background: linear-gradient(150deg, var(--gold-lt), var(--gold)); box-shadow: 0 1px 4px rgba(168,132,47,.4); font-family: "Songti SC", serif; } /* 四化徽章 */ .hua-mark { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; margin-left: 2px; font-size: 8.5px; color: #fff; vertical-align: 1px; font-weight: 700; font-family: "Songti SC", serif; } .hua-禄 { background: linear-gradient(150deg, #2f8f68, #1f7a52); } .hua-权 { background: linear-gradient(150deg, #2f6f9e, #1e5c8a); } .hua-科 { background: linear-gradient(150deg, #7d5aa3, #6b4a8f); } .hua-忌 { background: linear-gradient(150deg, var(--warn-lt), var(--warn)); } /* 旺度着色 */ .wd-miao { color: var(--primary) !important; font-weight: 700; } .wd-wang { color: var(--gold) !important; font-weight: 600; } .wd-dedi { color: var(--mu) !important; } .wd-ping { color: var(--ink-3) !important; } .wd-xian { color: #b9b0a0 !important; } /* 运限宫名叠加 */ .cell .lyrname { font-size: 9.5px; color: var(--shui); letter-spacing: -.1px; border-top: 1px dashed var(--line-2); margin-top: 1px; padding-top: 1px; position: relative; z-index: 1; } .cell .lyrname.hit { color: var(--primary); font-weight: 700; } /* 中宫 */ .center { grid-column: 2 / 4; grid-row: 2 / 4; background: radial-gradient(circle at 50% 40%, var(--card), var(--paper) 70%); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 12px 10px; text-align: center; position: relative; border: 1px solid rgba(168,132,47,.22); } .center::before, .center::after { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; border-color: var(--gold-lt); border-style: solid; opacity: .55; } .center::before { left: 5px; top: 5px; border-width: 1px 0 0 1px; } .center::after { right: 5px; bottom: 5px; border-width: 0 1px 1px 0; } .center .zn { font-size: 20px; font-weight: 700; color: var(--primary); letter-spacing: .18em; text-indent: .18em; } .center .zn .ju { font-size: 15px; color: var(--gold); margin-left: 2px; } .center .kv { font-size: 11px; color: var(--ink-2); line-height: 1.6; } .center .kv b { color: var(--ink); font-weight: 600; } .center .guas { letter-spacing: .3em; font-size: 13px; color: var(--gold-lt); } .center .stamp { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; display: grid; place-items: center; background: linear-gradient(150deg, var(--primary-lt), var(--primary-dk)); color: #fff; font-size: 12px; border-radius: 4px; opacity: .88; font-family: "Songti SC", serif; } .legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 11px 4px 0; font-size: 11px; color: var(--ink-3); letter-spacing: .02em; } .legend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; } .dot.ji { background: var(--mu); } .dot.xiong { background: var(--huo); } .dot.hua { background: var(--gold); } .legend .wd { flex-basis: 100%; } .legend .wd i { font-style: normal; color: var(--gold); } /* ================= 内容卡 ================= */ .sec { margin-bottom: 16px; } .sec > h3 { margin: 0 0 9px; font-size: 14.5px; color: var(--primary); font-weight: 700; display: flex; align-items: center; gap: 7px; letter-spacing: .08em; } .sec > h3::before { content: '❖'; font-size: 10px; color: var(--gold); } .sec > h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-pale), transparent); } .block { background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); position: relative; } .block h4 { margin: 0 0 7px; font-size: 13.5px; color: var(--ink); font-weight: 700; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .block h4::before { content: ''; width: 2px; height: 12px; background: var(--gold-lt); border-radius: 1px; } .block p { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); line-height: 1.8; } .block p:last-child { margin-bottom: 0; } .pg { font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em; } .pg::before { content: '❋ '; color: var(--gold-lt); font-size: 9px; } .tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; padding: 1px 7px; border-radius: 5px; background: var(--chip); color: var(--ink-2); margin-right: 4px; border: 1px solid var(--chip-line); } .tag .sy { color: var(--gold); font-size: 10px; } .tag.hua { background: #f7e7e7; color: var(--primary); border-color: var(--line-primary); } .tag.star { background: #e8f1ec; color: var(--mu); border-color: rgba(47,125,93,.16); } .tag.pal { background: #e8eef5; color: var(--shui); border-color: rgba(44,95,138,.16); } .tag.wx-木 { background: #e8f1ec; color: var(--mu); } .tag.wx-火 { background: #f8e9e5; color: var(--huo); } .tag.wx-土 { background: #f5efe0; color: var(--tu); } .tag.wx-金 { background: #f6f0dc; color: var(--jin); } .tag.wx-水 { background: #e8eef5; color: var(--shui); } .kvlist { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; } .kvlist dt { color: var(--ink-3); letter-spacing: .04em; } .kvlist dd { margin: 0; color: var(--ink); } .kvlist dd b { color: var(--primary); } .empty { text-align: center; color: var(--ink-3); font-size: 13px; padding: 28px 0; } .empty::before { content: '∅'; display: block; font-size: 20px; color: var(--gold-pale); margin-bottom: 6px; } /* ================= 抽屉 ================= */ .drawer-mask { position: fixed; inset: 0; background: rgba(38,26,14,.48); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: .24s; z-index: 40; } .drawer-mask.show { opacity: 1; pointer-events: auto; } .drawer { position: fixed; left: 0; right: 0; bottom: 0; max-height: 84vh; max-width: 560px; margin: 0 auto; background: linear-gradient(180deg, var(--card), var(--paper)); border-radius: 18px 18px 0 0; border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, var(--gold-lt), transparent) 1; transform: translateY(102%); transition: transform .28s cubic-bezier(.3,.85,.4,1); z-index: 41; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(40,28,15,.22); } .drawer.show { transform: translateY(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px 11px; border-bottom: 1px solid var(--line); } .drawer-head h3 { margin: 0; font-size: 16.5px; color: var(--primary); letter-spacing: .1em; display: flex; align-items: center; gap: 8px; } .drawer-head h3 .gua { color: var(--gold-lt); font-size: 15px; } .drawer-head button { border: 0; background: none; font-size: 17px; color: var(--ink-3); cursor: pointer; } .drawer-body { overflow-y: auto; padding: 15px 16px 32px; -webkit-overflow-scrolling: touch; } /* ================= 加载 ================= */ .loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; background: var(--overlay); backdrop-filter: blur(3px); color: var(--ink-2); font-size: 13px; letter-spacing: .1em; } .loading.hide { display: none; } .spinner { width: 34px; height: 34px; border: 2px solid var(--line-2); border-top-color: var(--primary); border-radius: 50%; animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ================= 运限页 ================= */ .yun-list { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 9px; } .yun-item { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--btn-bg); font-size: 12.5px; color: var(--ink-2); cursor: pointer; text-align: center; letter-spacing: .02em; } .yun-item.active { background: linear-gradient(160deg, var(--primary-lt), var(--primary-dk)); color: #fff; border-color: var(--primary-dk); box-shadow: 0 3px 10px var(--shadow-primary); } .yun-item small { display: block; font-size: 10px; opacity: .78; } .numgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; } .numgrid button { padding: 8px 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--btn-bg); font-size: 12px; color: var(--ink-2); cursor: pointer; font-family: inherit; } .numgrid button.active { background: linear-gradient(160deg, var(--primary-lt), var(--primary-dk)); border-color: var(--primary-dk); color: #fff; font-weight: 600; } .numgrid button small { display: block; font-size: 9px; opacity: .7; } .hua-row { display: flex; flex-wrap: wrap; gap: 6px; } .hua-chip { font-size: 11.5px; padding: 4px 9px; border-radius: 7px; background: #f2ecdd; color: var(--ink-2); border: 1px solid rgba(168,132,47,.16); letter-spacing: .02em; } .hua-chip.禄 { background: #e4f1ea; color: var(--mu); border-color: rgba(47,125,93,.2); } .hua-chip.权 { background: #e6eef6; color: var(--shui); border-color: rgba(44,95,138,.2); } .hua-chip.科 { background: #efe8f7; color: #6b4a8f; border-color: rgba(107,74,143,.2); } .hua-chip.忌 { background: #f9e6e7; color: var(--primary); border-color: rgba(155,28,44,.2); } /* 星曜罗列（宫位抽屉） */ .starline { display: flex; flex-wrap: wrap; gap: 6px; } .starline .tag { font-size: 12px; padding: 3px 8px; } /* 旺度图例 */ .wd-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: var(--ink-3); } .wd-legend span { display: inline-flex; align-items: center; gap: 3px; } @media (max-width: 360px) { .cell .stars { font-size: 11px; } .cell { min-height: 92px; } .hero h1 { font-size: 28px; } } /* ============================================================ 曜黑主题 · 局部覆盖（修正早期硬编码的浅色值，仅作用于 tech） ============================================================ */ /* 输入控件：深色底 + 霓虹描边 */ html[data-theme="tech"] input[type=date], html[data-theme="tech"] input[type=text], html[data-theme="tech"] select, html[data-theme="tech"] input[type=number] { background: var(--card-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55); } html[data-theme="tech"] input[type=date]:focus, html[data-theme="tech"] input[type=text]:focus, html[data-theme="tech"] select:focus { outline: 2px solid rgba(79, 228, 255, .45); border-color: var(--primary-lt); } html[data-theme="tech"] .wheel-group, html[data-theme="tech"] .date-box { background: var(--card); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); } html[data-theme="tech"] .date-box:focus-within { outline: 2px solid rgba(79, 228, 255, .45); border-color: var(--primary-lt); } /* 卡片描边改为冷蓝内框 */ html[data-theme="tech"] .card::before { border-color: rgba(120, 170, 255, .18); } /* 顶栏投影 */ html[data-theme="tech"] .topbar { box-shadow: 0 1px 10px rgba(0, 0, 0, .55); } /* 命盘容器：霓虹青描边 + 深色内光 */ html[data-theme="tech"] .chart { border-color: rgba(79, 228, 255, .40); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(79, 228, 255, .12); } /* 宫位格：深色描边 / 激活态 / 卦象水印 */ html[data-theme="tech"] .cell { border-color: rgba(120, 170, 255, .12); } html[data-theme="tech"] .cell.ming { border-color: var(--line-primary); } html[data-theme="tech"] .cell:active { background: #1a2740; } html[data-theme="tech"] .cell::before { color: rgba(90, 200, 255, .12); } html[data-theme="tech"] .cell .badge { background: linear-gradient(150deg, #7c3aed, #d946ef); box-shadow: 0 1px 8px rgba(124, 58, 237, .5); } /* 中宫描边 */ html[data-theme="tech"] .center { border-color: rgba(120, 170, 255, .22); } /* 陷（旺度）在深色下压暗 */ html[data-theme="tech"] .wd-xian { color: #56617a !important; } /* 标签：半透明霓虹底 */ html[data-theme="tech"] .tag.hua { background: rgba(79, 228, 255, .12); border-color: rgba(79, 228, 255, .30); } html[data-theme="tech"] .tag.star { background: rgba(61, 220, 151, .12); border-color: rgba(61, 220, 151, .30); } html[data-theme="tech"] .tag.pal { background: rgba(77, 184, 255, .12); border-color: rgba(77, 184, 255, .30); } html[data-theme="tech"] .tag.wx-木 { background: rgba(61, 220, 151, .12); } html[data-theme="tech"] .tag.wx-火 { background: rgba(255, 107, 90, .12); } html[data-theme="tech"] .tag.wx-土 { background: rgba(224, 176, 96, .12); } html[data-theme="tech"] .tag.wx-金 { background: rgba(255, 209, 102, .12); } html[data-theme="tech"] .tag.wx-水 { background: rgba(77, 184, 255, .12); } /* 四化胶囊：半透明霓虹底 */ html[data-theme="tech"] .hua-chip { background: var(--chip); border-color: rgba(120, 170, 255, .18); } html[data-theme="tech"] .hua-chip.禄 { background: rgba(61, 220, 151, .14); border-color: rgba(61, 220, 151, .30); } html[data-theme="tech"] .hua-chip.权 { background: rgba(77, 184, 255, .14); border-color: rgba(77, 184, 255, .30); } html[data-theme="tech"] .hua-chip.科 { background: rgba(167, 139, 250, .16); color: #c4b5fd; border-color: rgba(167, 139, 250, .32); } html[data-theme="tech"] .hua-chip.忌 { background: rgba(255, 93, 115, .14); color: var(--warn-lt); border-color: rgba(255, 93, 115, .30); } /* 抽屉：更深遮罩与投影 */ html[data-theme="tech"] .drawer-mask { background: rgba(3, 6, 12, .68); backdrop-filter: blur(4px); } html[data-theme="tech"] .drawer { box-shadow: 0 -10px 40px rgba(0, 0, 0, .65); border-image: linear-gradient(90deg, transparent, var(--primary-lt), transparent) 1; } /* ============================================================ 星夜主题 · 局部覆盖（与曜黑同理，配色改为星辉蓝紫 + 星金） ============================================================ */ html[data-theme="star"] input[type=date], html[data-theme="star"] input[type=text], html[data-theme="star"] select, html[data-theme="star"] input[type=number] { background: var(--card-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); } html[data-theme="star"] input[type=date]:focus, html[data-theme="star"] input[type=text]:focus, html[data-theme="star"] select:focus { outline: 2px solid var(--line-primary); border-color: var(--primary-lt); } html[data-theme="star"] .wheel-group, html[data-theme="star"] .date-box { background: var(--card); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55); } html[data-theme="star"] .date-box:focus-within { outline: 2px solid var(--line-primary); border-color: var(--primary-lt); } html[data-theme="star"] .card::before { border-color: rgba(150, 185, 255, .18); } html[data-theme="star"] .topbar { box-shadow: 0 1px 10px rgba(0, 0, 0, .6); } html[data-theme="star"] .chart { border-color: rgba(255, 207, 107, .34); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(157, 184, 255, .12); } html[data-theme="star"] .cell { border-color: rgba(150, 185, 255, .12); } html[data-theme="star"] .cell.ming { border-color: var(--line-primary); } html[data-theme="star"] .cell:active { background: #182240; } html[data-theme="star"] .cell::before { color: rgba(255, 207, 107, .12); } html[data-theme="star"] .cell .badge { background: linear-gradient(150deg, #d9a53c, #8a5f14); box-shadow: 0 1px 8px rgba(217, 165, 60, .5); } html[data-theme="star"] .center { border-color: rgba(150, 185, 255, .22); } html[data-theme="star"] .wd-xian { color: #4e5a78 !important; } html[data-theme="star"] .tag.hua { background: rgba(185, 204, 255, .12); border-color: rgba(185, 204, 255, .30); } html[data-theme="star"] .tag.star { background: rgba(70, 224, 160, .12); border-color: rgba(70, 224, 160, .30); } html[data-theme="star"] .tag.pal { background: rgba(92, 192, 255, .12); border-color: rgba(92, 192, 255, .30); } html[data-theme="star"] .tag.wx-木 { background: rgba(70, 224, 160, .12); } html[data-theme="star"] .tag.wx-火 { background: rgba(255, 122, 102, .12); } html[data-theme="star"] .tag.wx-土 { background: rgba(232, 187, 106, .12); } html[data-theme="star"] .tag.wx-金 { background: rgba(255, 215, 110, .12); } html[data-theme="star"] .tag.wx-水 { background: rgba(92, 192, 255, .12); } html[data-theme="star"] .hua-chip { background: var(--chip); border-color: rgba(150, 185, 255, .18); } html[data-theme="star"] .hua-chip.禄 { background: rgba(70, 224, 160, .14); border-color: rgba(70, 224, 160, .30); } html[data-theme="star"] .hua-chip.权 { background: rgba(92, 192, 255, .14); border-color: rgba(92, 192, 255, .30); } html[data-theme="star"] .hua-chip.科 { background: rgba(185, 204, 255, .16); color: #cddcff; border-color: rgba(185, 204, 255, .32); } html[data-theme="star"] .hua-chip.忌 { background: rgba(255, 112, 133, .14); color: var(--warn-lt); border-color: rgba(255, 112, 133, .30); } html[data-theme="star"] .drawer-mask { background: rgba(2, 4, 10, .70); backdrop-filter: blur(4px); } html[data-theme="star"] .drawer { box-shadow: 0 -10px 40px rgba(0, 0, 0, .70); border-image: linear-gradient(90deg, transparent, var(--gold-lt), transparent) 1; }