/* ============================================================ 四合占卜 · 深色神秘主题深靛蓝 / 墨黑底 + 暗金 + 青紫点缀纯自包含：无外部字体、无外部图片、无 CDN ============================================================ */ :root { --bg-0: #05060f; --bg-1: #0a0c1c; --bg-2: #10142b; --panel: rgba(20, 25, 52, .72); --panel-solid: #141932; --panel-2: #1a2043; --line: #2a3160; --line-soft: rgba(120, 132, 200, .18); --gold: #d8b46a; --gold-hi: #f0d79a; --gold-dim: #8a7238; --violet: #8f7ce8; --violet-dim: #5a4aa0; --cyan: #5fd2c8; --text: #dbe0f5; --text-2: #aab1d6; --muted: #7f87b0; --danger: #e8697f; --ok: #62d6a4; --warn: #e9b45c; --el-wood: #62c98a; --el-fire: #e8756b; --el-earth: #d5a95e; --el-metal: #d8dce8; --el-water: #6aa8f0; --radius: 14px; --radius-sm: 9px; --shadow: 0 10px 34px rgba(0, 0, 0, .5); --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "Menlo", "DejaVu Sans Mono", monospace; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* ---------- 作者调试口 ---------- 默认视图里不该出现的东西（测试连接 / 接口线路 / 密钥说明 / 逐阶段面板）都带 .dv-devonly 且在 HTML 里就写了 hidden。访问 ?dev=1 时 app.js 会给加 .dv-dev 并把这些块的 hidden 摘掉（见 initDevMode）。下面这两条是双保险：即使 hidden 没被摘掉，.dv-dev 下也照样显示。必须写 !important —— 上面那条 [hidden] 本身就是 !important。 */ body.dv-dev .dv-devonly[hidden] { display: block !important; } body.dv-dev .dv-row.dv-devonly[hidden] { display: flex !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100%; font-family: var(--font); font-size: 15px; line-height: 1.7; color: var(--text); background: var(--bg-0); overflow-x: hidden; } /* 星空底：纯 CSS 径向渐变 */ .dv-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(1px 1px at 27% 62%, rgba(255, 255, 255, .35), transparent 60%), radial-gradient(1px 1px at 43% 12%, rgba(255, 255, 255, .45), transparent 60%), radial-gradient(1.4px 1.4px at 58% 78%, rgba(216, 180, 106, .5), transparent 60%), radial-gradient(1px 1px at 71% 33%, rgba(255, 255, 255, .4), transparent 60%), radial-gradient(1px 1px at 84% 66%, rgba(143, 124, 232, .5), transparent 60%), radial-gradient(1px 1px at 92% 22%, rgba(255, 255, 255, .3), transparent 60%), radial-gradient(1200px 700px at 78% -8%, rgba(90, 74, 160, .30), transparent 62%), radial-gradient(1000px 620px at 6% 8%, rgba(28, 60, 120, .28), transparent 60%), radial-gradient(900px 900px at 50% 118%, rgba(138, 114, 56, .16), transparent 62%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%, #04050c 100%); } /* ------------------------- 头部 ------------------------- */ /* ------------------------- 被 iframe 嵌入时的提示条 ------------------------- 只有 app.js 检测到 window.self !== window.top 才会去掉 [hidden]。 Google Sites 的「通过网址嵌入」高度固定且不高，给一条「在新窗口打开」的直链。 */ .dv-embed-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding: 7px 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); background: linear-gradient(180deg, rgba(143, 124, 232, .16), rgba(143, 124, 232, .06)); border-bottom: 1px solid var(--line-soft); } .dv-embed-text { min-width: 0; } .dv-embed-link { color: var(--gold-hi); font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid var(--gold-dim); border-radius: 999px; padding: 2px 12px; background: rgba(216, 180, 106, .08); } .dv-embed-link:hover, .dv-embed-link:focus-visible { color: #17110a; background: var(--gold); border-color: var(--gold); } .dv-header { padding: 30px 16px 10px; text-align: center; } .dv-header-inner { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; } .dv-logo { color: var(--gold); display: inline-flex; filter: drop-shadow(0 0 10px rgba(216, 180, 106, .35)); } .dv-header-txt { text-align: left; } .dv-header h1 { margin: 0; font-size: 27px; letter-spacing: .34em; font-weight: 600; color: var(--gold-hi); text-shadow: 0 0 18px rgba(216, 180, 106, .28); } .dv-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); letter-spacing: .06em; } .dv-main { max-width: 1120px; margin: 0 auto; padding: 14px 14px 40px; } /* ------------------------- 区块 ------------------------- */ .dv-section { margin: 0 0 18px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(3px); overflow: hidden; } .dv-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 13px 18px; cursor: default; background: linear-gradient(90deg, rgba(143, 124, 232, .12), rgba(216, 180, 106, .07) 55%, transparent); border-bottom: 1px solid var(--line-soft); list-style: none; user-select: none; } details.dv-section > .dv-section-head { cursor: pointer; } details.dv-section > .dv-section-head::-webkit-details-marker { display: none; } details.dv-section > .dv-section-head::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .2s ease; } details.dv-section[open] > .dv-section-head::after { transform: rotate(180deg); } .dv-section-no { font-size: 13px; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 6px; padding: 0 7px; letter-spacing: .1em; flex: none; } .dv-section-title { font-size: 16.5px; font-weight: 600; letter-spacing: .12em; color: var(--gold-hi); } .dv-section-hint { font-size: 12px; color: var(--muted); } .dv-section-body { padding: 16px 18px 20px; } .dv-h3 { margin: 20px 0 10px; font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--cyan); border-left: 3px solid var(--violet-dim); padding-left: 9px; } .dv-h3-sub { font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0; } /* ------------------------- 表单 ------------------------- */ .dv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; } .dv-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0 0 12px; } .dv-grid > .dv-field { margin: 0; } .dv-field-wide { grid-column: span 2; } .dv-field-btn { justify-content: flex-end; } .dv-label { font-size: 12px; color: var(--text-2); letter-spacing: .05em; } .dv-req { color: var(--gold); font-style: normal; } .dv-input { width: 100%; min-width: 0; padding: 9px 11px; font-family: inherit; font-size: 14px; color: var(--text); background: rgba(8, 10, 24, .72); border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; transition: border-color .16s, box-shadow .16s; } .dv-input::placeholder { color: #5a628c; } .dv-input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(143, 124, 232, .18); } .dv-input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(232, 105, 127, .16); } .dv-textarea { resize: vertical; line-height: 1.65; } .dv-mono { font-family: var(--font-mono); font-size: 12.5px; } select.dv-input { appearance: none; cursor: pointer; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select.dv-input option { background: #10142b; color: var(--text); } .dv-input-wrap { position: relative; display: flex; align-items: center; } .dv-input-wrap .dv-input { padding-right: 40px; } .dv-input-wrap .dv-icon-btn { position: absolute; right: 4px; } .dv-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2); margin: 4px 0 10px; cursor: pointer; } .dv-check input { margin-top: 4px; accent-color: var(--violet); flex: none; } .dv-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; } .dv-row-actions { margin-top: 16px; } /* ------------------------- 按钮 ------------------------- */ .dv-btn { font-family: inherit; font-size: 13.5px; letter-spacing: .06em; padding: 9px 16px; color: var(--text); background: linear-gradient(180deg, rgba(42, 49, 96, .85), rgba(26, 32, 67, .9)); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: transform .12s, border-color .16s, box-shadow .16s, color .16s; white-space: nowrap; } .dv-btn:hover { border-color: var(--violet); color: #fff; box-shadow: 0 0 14px rgba(143, 124, 232, .22); } .dv-btn:active { transform: translateY(1px); } .dv-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .dv-btn-primary { color: #1b1503; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: var(--gold-hi); font-weight: 600; } .dv-btn-primary:hover { color: #120e02; box-shadow: 0 0 20px rgba(216, 180, 106, .38); } .dv-btn-lg { padding: 12px 30px; font-size: 15px; } .dv-btn-ghost { background: transparent; color: var(--text-2); } .dv-btn-danger { color: #fff; background: linear-gradient(180deg, #a63a4c, #7c2536); border-color: #c0475c; } .dv-icon-btn { font-family: inherit; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 5px 8px; border-radius: 6px; line-height: 1; } .dv-icon-btn:hover { color: var(--gold); background: rgba(143, 124, 232, .12); } .dv-status { font-size: 12.5px; color: var(--muted); } .dv-status.is-ok { color: var(--ok); } .dv-status.is-err { color: var(--danger); } .dv-status.is-run { color: var(--cyan); } .dv-note { font-size: 12px; color: var(--muted); line-height: 1.75; margin: 12px 0 0; } .dv-note code { font-family: var(--font-mono); color: var(--gold); background: rgba(0, 0, 0, .3); padding: 1px 5px; border-radius: 4px; } .dv-note strong { color: var(--text-2); } .dv-adv { margin: 12px 0 0; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0 12px; } .dv-adv > summary { cursor: pointer; padding: 9px 0; font-size: 13px; color: var(--cyan); user-select: none; } .dv-adv[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; } /* ---------- 内置接口状态 + 三档解读模式 ---------- */ .dv-builtin { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); padding: 9px 14px; border: 1px solid rgba(95, 210, 200, .32); background: rgba(95, 210, 200, .08); border-radius: var(--radius-sm); } .dv-builtin-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .dv-builtin.is-off { border-color: var(--line); background: rgba(0, 0, 0, .2); color: var(--muted); } .dv-builtin.is-off .dv-builtin-dot { background: var(--muted); box-shadow: none; } /* 线路状态行：密钥到底在服务端还是在页面里，一眼可见。代理=青色（安全边界成立），直连=琥珀色（密钥可被提取，不是错误但要让人知道）。 */ .dv-route { margin: 10px 0 0; padding: 9px 14px; font-size: 12.5px; line-height: 1.7; color: var(--text-2); border: 1px solid var(--line); border-left: 3px solid var(--muted); background: rgba(0, 0, 0, .2); border-radius: var(--radius-sm); word-break: break-word; } .dv-route.is-proxy { border-color: rgba(95, 210, 200, .32); border-left-color: var(--cyan); background: rgba(95, 210, 200, .08); } .dv-route.is-direct, .dv-route.is-user { border-color: rgba(226, 176, 92, .34); border-left-color: var(--gold); background: rgba(226, 176, 92, .07); } .dv-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 14px 0 0; } .dv-mode { position: relative; display: block; cursor: pointer; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(10, 13, 30, .5); transition: border-color .15s, background .15s; } .dv-mode:hover { border-color: rgba(143, 124, 232, .5); } .dv-mode.is-on { border-color: var(--gold); background: rgba(216, 180, 106, .09); } /* 单选框本身不显示，但保留在 DOM 里供键盘与读屏软件使用 */ .dv-mode > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .dv-mode > input:focus-visible + .dv-mode-body { outline: 2px solid var(--cyan); outline-offset: 3px; } .dv-mode-body { display: flex; flex-direction: column; gap: 3px; } .dv-mode-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .dv-mode-name { font-size: 15px; font-weight: 600; color: var(--gold); letter-spacing: .1em; } /* 售价：整张卡里最显眼的一个数（它是用户真正要掏的钱）。只有网页版的 MODES 带 priceUsd（构建时从服务端 TIERS 镜像而来），离线版没有这个字段 —— 那边不卖钱，也就不该出现价格。 */ .dv-mode-price { font-size: 17px; font-weight: 700; color: var(--gold-hi); letter-spacing: .04em; white-space: nowrap; } /* 卡片上只留「档位名 + 售价 + 一句人话」。模型 id / 预计耗时 / 接口成本仍在 DV.embedded.MODES 里（报告的真实用量统计要用），只是不摆在设置区。 */ .dv-mode-desc { font-size: 11.5px; color: var(--muted); line-height: 1.6; } /* ---------- 注册码 / 报价 ---------- */ .dv-entitle { margin: 14px 0 0; padding: 12px 14px 4px; border: 1px solid rgba(216, 180, 106, .3); border-radius: var(--radius-sm); background: rgba(216, 180, 106, .05); } .dv-entitle-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dv-entitle-title { font-size: 13.5px; color: var(--gold); letter-spacing: .12em; font-weight: 600; } .dv-badge-gold { color: var(--gold-hi); border-color: rgba(216, 180, 106, .45); background: rgba(216, 180, 106, .12); } .dv-entitle-status { margin: 9px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-2); word-break: break-word; } .dv-entitle-status.is-ok { color: var(--ok); } .dv-entitle-status.is-err { color: var(--danger); } .dv-entitle-status.is-run { color: var(--cyan); } .dv-entitle-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 8px 0 0; } .dv-entitle-row .dv-field { margin: 0; } .dv-entitle-row .dv-field-wide { flex: 1 1 240px; min-width: 0; } .dv-entitle-detail { margin: 10px 0 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(10, 13, 30, .5); font-size: 12.5px; color: var(--text-2); } .dv-entitle-detail .dv-kv { display: flex; flex-wrap: wrap; gap: 5px 18px; } .dv-entitle-detail b { color: var(--text); } .dv-entitle-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; } .dv-entitle-pay .dv-note { margin: 0; } /* 支付按钮**存在但停用**：让人一眼看出「以后会有，现在没有」，比藏起来更诚实 —— 藏起来的结果是每个人都来问「能不能买」。 */ .dv-entitle-pay .dv-btn[disabled] { opacity: .45; cursor: not-allowed; } /* ---------- 本次用量 ---------- */ .dv-usage { margin: 14px 0 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(10, 13, 30, .5); } .dv-usage .dv-note { margin-top: 8px; } .dv-form-error { margin: 14px 0 0; padding: 10px 14px; font-size: 13px; color: #ffd7de; background: rgba(166, 58, 76, .22); border: 1px solid rgba(232, 105, 127, .45); border-radius: var(--radius-sm); } .dv-form-error ul { margin: 4px 0 0; padding-left: 20px; } /* ------------------------- 选项卡 ------------------------- */ .dv-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; } .dv-tab { font-family: inherit; font-size: 13.5px; letter-spacing: .1em; padding: 8px 16px; color: var(--muted); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; } .dv-tab:hover { color: var(--text); } .dv-tab.is-active { color: var(--gold-hi); border-bottom-color: var(--gold); } .dv-tabpane { display: none; } .dv-tabpane.is-active { display: block; animation: dv-fade .28s ease; } @keyframes dv-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* ------------------------- 通用卡片 ------------------------- */ .dv-card-box { background: rgba(10, 13, 30, .55); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 13px 15px; margin: 0 0 14px; } .dv-block-title { font-size: 13px; letter-spacing: .16em; color: var(--cyan); margin: 0 0 10px; font-weight: 600; } .dv-kv { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-2); } .dv-kv b { color: var(--text); font-weight: 600; } .dv-kv span { white-space: nowrap; } .dv-empty { color: var(--muted); font-size: 13px; padding: 8px 0; } .dv-err-inline { color: var(--danger); font-size: 13px; padding: 10px 0; } .dv-tag { display: inline-block; font-size: 12px; padding: 2px 9px; margin: 3px 5px 3px 0; border-radius: 999px; color: var(--text-2); background: rgba(143, 124, 232, .12); border: 1px solid rgba(143, 124, 232, .3); } .dv-tag-gold { color: var(--gold-hi); background: rgba(216, 180, 106, .1); border-color: rgba(216, 180, 106, .35); } .dv-tag-cyan { color: var(--cyan); background: rgba(95, 210, 200, .1); border-color: rgba(95, 210, 200, .3); } .dv-tag-danger { color: #ffc3cd; background: rgba(232, 105, 127, .14); border-color: rgba(232, 105, 127, .4); } .dv-badge { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } /* 五行配色 */ .el-wood { color: var(--el-wood); } .el-fire { color: var(--el-fire); } .el-earth { color: var(--el-earth); } .el-metal { color: var(--el-metal); } .el-water { color: var(--el-water); } .bg-wood { background: linear-gradient(90deg, #2f6b48, var(--el-wood)); } .bg-fire { background: linear-gradient(90deg, #7a2f2c, var(--el-fire)); } .bg-earth { background: linear-gradient(90deg, #6f5527, var(--el-earth)); } .bg-metal { background: linear-gradient(90deg, #6b7080, var(--el-metal)); } .bg-water { background: linear-gradient(90deg, #234a78, var(--el-water)); } /* ============================================================ 八字 ============================================================ */ .dv-bazi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.dv-bazi { width: 100%; min-width: 470px; border-collapse: collapse; font-size: 13.5px; } table.dv-bazi th, table.dv-bazi td { border: 1px solid var(--line-soft); padding: 7px 9px; text-align: center; vertical-align: middle; } table.dv-bazi thead th { background: rgba(143, 124, 232, .13); color: var(--gold-hi); letter-spacing: .1em; font-weight: 600; } table.dv-bazi th.dv-rowhead { background: rgba(10, 13, 30, .6); color: var(--muted); font-weight: 400; font-size: 12px; white-space: nowrap; width: 74px; } table.dv-bazi td.dv-gz { font-size: 25px; line-height: 1.25; font-weight: 600; } table.dv-bazi td.dv-day-col { background: rgba(216, 180, 106, .08); } .dv-hidden-stem { display: block; font-size: 12px; color: var(--text-2); } .dv-hidden-stem em { font-style: normal; color: var(--muted); font-size: 11px; } .dv-el-chart { display: flex; flex-direction: column; gap: 7px; } .dv-el-row { display: flex; align-items: center; gap: 10px; font-size: 13px; } .dv-el-name { width: 26px; text-align: center; font-size: 16px; font-weight: 600; flex: none; } .dv-el-track { flex: 1; height: 13px; background: rgba(0, 0, 0, .4); border-radius: 999px; overflow: hidden; border: 1px solid var(--line-soft); } /* display:block 不能少：render.js 把力量条画成，而 width/height 的百分比对非替换的**行内**元素完全不生效 —— 少了这一句，五行力量条整条是空的（轨道有、彩色填充没有），而且 DOM 里五个 .dv-el-bar 一个不少，只靠数节点根本发现不了。 */ .dv-el-bar { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; min-width: 2px; } .dv-el-val { width: 96px; text-align: right; color: var(--muted); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; } .dv-strength { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; } .dv-strength-level { font-size: 20px; font-weight: 700; color: var(--gold-hi); letter-spacing: .1em; } .dv-reasons { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--text-2); } .dv-reasons li { margin: 2px 0; } .dv-luck-line { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 12px; -webkit-overflow-scrolling: touch; } .dv-luck-item { flex: none; min-width: 82px; text-align: center; padding: 8px 6px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(10, 13, 30, .5); } .dv-luck-item.is-current { border-color: var(--gold); background: rgba(216, 180, 106, .12); box-shadow: 0 0 16px rgba(216, 180, 106, .22); } .dv-luck-age { font-size: 11px; color: var(--muted); } .dv-luck-gz { font-size: 21px; font-weight: 600; line-height: 1.2; margin: 3px 0; } .dv-luck-god { font-size: 11px; color: var(--cyan); } .dv-luck-year { font-size: 10.5px; color: var(--muted); } .dv-luck-nayin { font-size: 10.5px; color: var(--muted); } .dv-chips { display: flex; flex-wrap: wrap; gap: 7px; } .dv-chip { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(10, 13, 30, .5); padding: 5px 9px; text-align: center; min-width: 66px; } .dv-chip-y { font-size: 11px; color: var(--muted); } .dv-chip-gz { font-size: 16px; font-weight: 600; } .dv-chip-god { font-size: 10.5px; color: var(--cyan); } /* ============================================================ 大六壬 ============================================================ */ .dv-lr-plate-wrap { display: flex; justify-content: center; padding: 4px 0 14px; } .dv-lr-plate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4px; width: min(100%, 470px); aspect-ratio: 1 / 1; padding: 6px; border: 1px solid var(--gold-dim); border-radius: 10px; background: radial-gradient(circle at 50% 50%, rgba(143, 124, 232, .12), transparent 70%), rgba(6, 8, 20, .7); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6); } .dv-lr-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid var(--line-soft); border-radius: 7px; background: rgba(16, 20, 43, .78); padding: 2px; min-width: 0; overflow: hidden; } .dv-lr-cell.is-kong { border-color: rgba(232, 105, 127, .5); background: rgba(80, 26, 40, .3); } .dv-lr-cell.is-hour { box-shadow: inset 0 0 0 1px var(--cyan); } .dv-lr-gen { font-size: 11px; color: var(--violet); letter-spacing: .04em; line-height: 1.2; } .dv-lr-heaven { font-size: 22px; font-weight: 700; color: var(--gold-hi); line-height: 1.15; } .dv-lr-hname { font-size: 10px; color: var(--muted); line-height: 1.15; } .dv-lr-dun { font-size: 11px; color: var(--cyan); } .dv-lr-kong { font-size: 10px; color: var(--danger); } .dv-lr-earth { font-size: 12px; color: var(--text-2); border-top: 1px dashed var(--line); width: 84%; text-align: center; padding-top: 1px; line-height: 1.3; } .dv-lr-center { grid-row: 2 / 4; grid-column: 2 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--gold-dim); border-radius: 9px; background: radial-gradient(circle at 50% 40%, rgba(216, 180, 106, .1), rgba(6, 8, 20, .85)); padding: 6px; text-align: center; } .dv-lr-center-gz { font-size: 21px; font-weight: 700; color: var(--gold-hi); letter-spacing: .06em; line-height: 1.2; } .dv-lr-center-line { font-size: 11.5px; color: var(--text-2); line-height: 1.5; } .dv-lr-center-line b { color: var(--cyan); font-weight: 600; } .dv-lr-lessons { display: flex; gap: 8px; flex-wrap: wrap; } .dv-lr-lesson { flex: 1 1 88px; min-width: 88px; text-align: center; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(10, 13, 30, .5); padding: 8px 4px; } .dv-lr-lesson-no { font-size: 11px; color: var(--muted); letter-spacing: .1em; } .dv-lr-lesson-top, .dv-lr-lesson-bot { font-size: 23px; font-weight: 700; line-height: 1.25; } .dv-lr-lesson-top { color: var(--gold-hi); } .dv-lr-lesson-bot { color: var(--text); } .dv-lr-lesson-gen { font-size: 11px; color: var(--violet); } .dv-lr-lesson-sep { height: 1px; background: var(--line); margin: 4px 18%; } .dv-lr-rel { font-size: 11px; margin-top: 4px; } .dv-lr-rel.rel-zei { color: var(--danger); font-weight: 600; } .dv-lr-rel.rel-ke { color: var(--warn); font-weight: 600; } .dv-lr-rel.rel-other { color: var(--muted); } .dv-lr-trans { display: flex; flex-direction: column; gap: 7px; } .dv-lr-tran { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-soft); border-left: 3px solid var(--violet-dim); border-radius: var(--radius-sm); background: rgba(10, 13, 30, .5); padding: 7px 12px; flex-wrap: wrap; } .dv-lr-tran:first-child { border-left-color: var(--gold); } .dv-lr-tran-pos { font-size: 12px; color: var(--muted); width: 40px; flex: none; letter-spacing: .08em; } .dv-lr-tran-gz { font-size: 24px; font-weight: 700; color: var(--gold-hi); line-height: 1.2; } .dv-lr-tran-gz .dun { font-size: 15px; color: var(--cyan); margin-right: 2px; } .dv-lr-tran-meta { font-size: 12px; color: var(--text-2); display: flex; gap: 12px; flex-wrap: wrap; } /* ============================================================ 塔罗 ============================================================ */ .dv-tarot-head { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; } .dv-spread { display: grid; gap: 12px; justify-content: center; justify-items: center; margin: 6px 0 18px; } .dv-spread-single { grid-template-columns: minmax(0, 132px); } .dv-spread-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 470px; margin-inline: auto; } .dv-spread-five { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 470px; margin-inline: auto; } .dv-spread-celtic { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px; margin-inline: auto; } .dv-spread-flow { grid-template-columns: repeat(auto-fit, minmax(104px, 128px)); max-width: 700px; margin-inline: auto; } .dv-slot-cell { display: flex; justify-content: center; width: 100%; min-width: 0; } .dv-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-width: 0; } .dv-slot-label { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.35; } .dv-slot-label b { color: var(--cyan); font-weight: 600; } /* 凯尔特十字的中心格：第 1 张牌在流内，第 2 张牌绝对定位横压其上。注意 .dv-spread 上有 justify-items:center，网格项默认是 shrink-to-fit，所以这里和 .dv-slot-cell 一样必须显式 width:100%，否则中心格会被压缩成标签文字的宽度（约 58px），牌面只有别的格一半大，横压牌也跟着错位。 align-self:start 让本格高度等于内容高度，下面的 bottom:0 才能精确对齐两张牌。 */ .dv-slot-center { position: relative; width: 100%; min-width: 0; align-self: start; } .dv-slot-cross { position: absolute; /* 标签在横压牌里是隐藏的，故本盒高度 = 牌高；bottom:0 即与流内那张牌底端齐平，等价于完全重叠（两张牌等宽等高），且不依赖标签行高这种魔数。 */ bottom: 0; left: 0; right: 0; /* transform-origin 保持默认的 50% 50%：绕牌面中心旋转，横压牌才正好压在中心牌正中，也不会向左溢出到相邻列。 */ transform: rotate(90deg); z-index: 3; } .dv-slot-cross .dv-slot-label { display: none; } /* 卡牌本体（有插画时铺，无插画时退回纯 CSS 绘制） */ .dv-card { position: relative; width: 100%; max-width: 118px; cursor: pointer; } .dv-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 10px; } .dv-card-face { position: relative; aspect-ratio: 5 / 8.6; border-radius: 9px; /* 牌面必须明显亮于页面底色（--bg-0 #05060f）与面板（≈#141934），否则牌会"陷"进背景里；下缘尤其不能低于面板色。 */ border: 1px solid rgba(216, 180, 106, .5); background: radial-gradient(circle at 50% 26%, rgba(216, 180, 106, .18), transparent 62%), linear-gradient(160deg, #2a3268 0%, #1e2550 48%, #171c3c 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(216, 180, 106, .16); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 7px 5px; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s; } .dv-card:hover .dv-card-face { box-shadow: 0 10px 26px rgba(0, 0, 0, .65), 0 0 20px rgba(143, 124, 232, .28); border-color: var(--gold); } .dv-card.is-reversed .dv-card-face { transform: rotate(180deg); } .dv-card.is-open .dv-card-face { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(95, 210, 200, .5), 0 8px 24px rgba(0, 0, 0, .6); } .dv-card-rank { font-size: 12px; font-weight: 700; color: var(--gold-hi); letter-spacing: .05em; line-height: 1; } .dv-card-art { color: var(--gold); display: flex; align-items: center; justify-content: center; flex: 1; } .dv-card-art svg { width: 44%; max-width: 46px; height: auto; opacity: .95; } .dv-card-suit { font-size: 10px; color: var(--violet); letter-spacing: .18em; } .dv-card-name { font-size: 11.5px; color: var(--text); text-align: center; line-height: 1.25; padding: 0 2px; word-break: keep-all; } .dv-card-badge { position: absolute; top: -7px; right: -6px; z-index: 2; font-size: 10px; padding: 1px 7px; border-radius: 999px; background: linear-gradient(180deg, #b2495c, #7c2536); color: #fff; border: 1px solid rgba(255, 190, 200, .5); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); } .dv-card-badge-up { background: linear-gradient(180deg, rgba(95, 210, 200, .28), rgba(30, 80, 80, .5)); color: #cdfaf5; border-color: rgba(95, 210, 200, .5); } /* ------------------------------------------------------------ 牌面插画（Rider–Waite–Smith，js/data/tarot-art.js）插画是 JPEG 白底扫描件，直接贴在 #05060f 的深色页面上会「发光」，与整站的靛蓝/暗金调子打架。三层处理： ① 图本身压一点亮度与饱和度（filter），让它落回页面的明度区间； ② 牌面上再盖一层 ::after —— 暗角 + 靛蓝薄纱 + 内描边金线，既把四角收进背景，又把金色描边压在**画面之上**（inset 阴影画在背景层，会被盖住，所以必须另起一层）； ③ 鼠标悬停 / 展开释义时撤掉压制，还原全亮全彩 —— 想细看时不打折。没有插画（tarot-art.js 未加载 / 缺图 / 解码失败摘掉 .has-art）时，本节全部规则不生效，牌面就是原来那套 CSS + SVG，不需要任何额外分支。 ------------------------------------------------------------ */ .dv-card-img { position: absolute; inset: 0; /* 覆盖 padding 盒，即整个牌面内缘 */ z-index: 1; width: 100%; height: 100%; object-fit: cover; /* 250×~430 与 5/8.6 几乎同比，只裁掉发丝宽的一线，不变形 */ object-position: 50% 46%; display: block; border-radius: 7px; background: #12142c; /* 解码完成前不露出下面的 CSS 牌面，避免闪烁 */ filter: saturate(.9) brightness(.86) contrast(1.06); transition: filter .22s ease; } /* 有插画时，藏起同一张牌上的 CSS 绘制层（保留在 DOM 里，回退时立刻可用） */ .dv-card.has-art .dv-card-rank, .dv-card.has-art .dv-card-art, .dv-card.has-art .dv-card-suit, .dv-card.has-art .dv-card-name { display: none; } .dv-card.has-art .dv-card-face { padding: 0; background: #0a0c1e; border-color: rgba(216, 180, 106, .62); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); } /* 压在插画之上的暗角 + 金色内描边 */ .dv-card.has-art .dv-card-face::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 7px; box-shadow: inset 0 0 0 2px rgba(216, 180, 106, .3), inset 0 0 14px rgba(4, 5, 16, .5); background: radial-gradient(115% 92% at 50% 42%, rgba(0, 0, 0, 0) 46%, rgba(4, 5, 16, .5) 100%), linear-gradient(180deg, rgba(40, 34, 96, .1), rgba(8, 6, 24, .3)); transition: opacity .22s ease; } .dv-card.has-art:hover .dv-card-img, .dv-card.has-art.is-open .dv-card-img { filter: none; } .dv-card.has-art:hover .dv-card-face::after, .dv-card.has-art.is-open .dv-card-face::after { opacity: .45; } /* 上面那条 .dv-card.has-art .dv-card-face 的选择器权重（0,3,0）压过了 .dv-card:hover / .dv-card.is-open 的原规则，交互反馈会整个失踪。这里按同权重就近补回来，别让「加了插画」把悬停/展开的高亮吃掉。 */ .dv-card.has-art:hover .dv-card-face { border-color: var(--gold); box-shadow: 0 10px 26px rgba(0, 0, 0, .65), 0 0 20px rgba(143, 124, 232, .28); } .dv-card.has-art.is-open .dv-card-face { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(95, 210, 200, .5), 0 8px 24px rgba(0, 0, 0, .6); } /* 牌名条：贴在牌底、半透明、不糊住画面主体。它是 .dv-card-face 的**兄弟**，所以逆位旋转 180° 时牌名不会跟着倒过来；又是 position:absolute，不占流，牌的外接矩形仍严格等于牌面（5/8.6）。 */ .dv-card-cap { display: none; position: absolute; left: 1px; right: 1px; bottom: 1px; z-index: 4; padding: 8px 3px 3px; border-radius: 0 0 8px 8px; font-size: 11px; line-height: 1.25; text-align: center; color: #f4e3bb; text-shadow: 0 1px 3px rgba(0, 0, 0, .95); background: linear-gradient(180deg, rgba(6, 8, 20, 0), rgba(6, 8, 20, .82) 42%, rgba(6, 8, 20, .93)); word-break: keep-all; pointer-events: none; } .dv-card.has-art .dv-card-cap { display: block; } .dv-card-details { display: flex; flex-direction: column; gap: 8px; } .dv-card-detail { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(10, 13, 30, .5); padding: 0 13px; } .dv-card-detail > summary { cursor: pointer; padding: 9px 0; font-size: 13.5px; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; user-select: none; } .dv-card-detail > summary::-webkit-details-marker { display: none; } .dv-card-detail[open] { border-color: rgba(95, 210, 200, .38); } .dv-card-detail .dv-cd-pos { color: var(--cyan); font-size: 12px; } .dv-card-detail .dv-cd-name { color: var(--gold-hi); font-weight: 600; } .dv-card-detail .dv-cd-body { padding: 2px 0 12px; font-size: 13px; color: var(--text-2); line-height: 1.8; } .dv-card-detail .dv-cd-body p { margin: 5px 0; } .dv-card-detail .dv-cd-body b { color: var(--text); } /* ============================================================ 解读 / 进度 / 面板 ============================================================ */ .dv-progress { display: flex; gap: 8px; margin: 16px 0 6px; } .dv-prog-seg { flex: 1; position: relative; height: 26px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, .38); overflow: hidden; } .dv-prog-fill { position: absolute; inset: 0 100% 0 0; background: linear-gradient(90deg, var(--violet-dim), var(--violet)); transition: right .4s ease; } .dv-prog-seg.is-done .dv-prog-fill { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); } .dv-prog-seg.is-error .dv-prog-fill { background: linear-gradient(90deg, #7c2536, #c0475c); } .dv-prog-seg.is-active .dv-prog-fill { animation: dv-pulse 1.6s ease-in-out infinite; } @keyframes dv-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .dv-prog-cap { position: relative; z-index: 1; display: block; text-align: center; line-height: 24px; font-size: 11.5px; letter-spacing: .1em; color: var(--text-2); } .dv-prog-seg.is-done .dv-prog-cap { color: #1b1503; font-weight: 600; } .dv-progress-text { font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; } /* ---------- 解读进行中：一句话 + 计时器 ---------- 深度档一次要跑四分多钟。这段时间里页面上没有别的动静，计时器就是「它还活着」的唯一证据，所以做得比正文标题还大。 */ .dv-live { margin: 16px 0 0; padding: 14px 16px; border: 1px solid rgba(95, 210, 200, .32); border-left: 3px solid var(--cyan); border-radius: var(--radius-sm); background: rgba(95, 210, 200, .07); } .dv-live-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .dv-live-dot { width: 9px; height: 9px; flex: none; align-self: center; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: dv-breathe 1.5s ease-in-out infinite; } @keyframes dv-breathe { 0%, 100% { opacity: .3; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } } .dv-live-text { font-size: 15px; color: var(--text); letter-spacing: .08em; } .dv-live-timer { margin-left: auto; font-family: var(--font-mono); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--gold-hi); letter-spacing: .06em; font-variant-numeric: tabular-nums; } .dv-live-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; } /* 跑完了：呼吸灯停下，只留「用时多久」这条事实 */ .dv-live.is-done { border-color: rgba(98, 214, 164, .4); border-left-color: var(--ok); background: rgba(98, 214, 164, .07); } .dv-live.is-done .dv-live-dot { animation: none; background: var(--ok); box-shadow: none; } .dv-live.is-done .dv-live-hint { display: none; } .dv-live.is-error { border-color: rgba(232, 105, 127, .45); border-left-color: var(--danger); background: rgba(232, 105, 127, .08); } .dv-live.is-error .dv-live-dot { animation: none; background: var(--danger); box-shadow: none; } .dv-live.is-error .dv-live-text { color: var(--danger); } .dv-live.is-error .dv-live-hint { display: none; } /* ---------- 最终卦象：默认视图里的正文 ---------- */ .dv-final { margin: 16px 0 0; padding: 4px 18px 16px; border: 1px solid rgba(216, 180, 106, .3); border-radius: var(--radius-sm); background: rgba(216, 180, 106, .045); } .dv-final-head { margin: 14px 0 6px; font-size: 13px; letter-spacing: .22em; color: var(--gold); } /* ---------- 解读失败 / 降级说明 ---------- */ .dv-reading-error { margin: 14px 0 0; padding: 11px 14px; font-size: 13px; line-height: 1.75; border: 1px solid rgba(232, 105, 127, .45); border-radius: var(--radius-sm); background: rgba(232, 105, 127, .08); color: #f0b6c0; } .dv-reading-error b { color: #ffd9e0; } .dv-reading-error ul { margin: 6px 0 0; padding-left: 20px; } /* 单路失败但整体跑完了：是提醒不是事故，别用红色吓人 */ .dv-reading-error.is-warn { border-color: rgba(233, 180, 92, .45); background: rgba(233, 180, 92, .08); color: #f2dcb2; } .dv-reading-error.is-warn b { color: var(--gold-hi); } .dv-panels { display: flex; flex-direction: column; gap: 10px; } .dv-panel { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(10, 13, 30, .5); overflow: hidden; } .dv-panel > summary { cursor: pointer; padding: 10px 14px; font-size: 14px; color: var(--text); list-style: none; display: flex; align-items: center; gap: 10px; user-select: none; background: rgba(143, 124, 232, .06); } .dv-panel > summary::-webkit-details-marker { display: none; } .dv-panel > summary::before { content: "▸"; color: var(--muted); transition: transform .18s; } .dv-panel[open] > summary::before { transform: rotate(90deg); } .dv-panel-status { margin-left: auto; font-size: 11.5px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .dv-panel-status.st-run { color: var(--cyan); border-color: rgba(95, 210, 200, .5); } .dv-panel-status.st-done { color: var(--ok); border-color: rgba(98, 214, 164, .5); } .dv-panel-status.st-error { color: var(--danger); border-color: rgba(232, 105, 127, .5); } .dv-panel-body { padding: 6px 16px 14px; } /* Markdown 渲染 */ .dv-md { font-size: 14px; line-height: 1.85; color: var(--text-2); word-wrap: break-word; overflow-wrap: anywhere; } .dv-md .dv-md-h { color: var(--gold-hi); letter-spacing: .06em; margin: 18px 0 8px; line-height: 1.4; } .dv-md .dv-md-h1 { font-size: 19px; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; } .dv-md .dv-md-h2 { font-size: 17px; } .dv-md .dv-md-h3 { font-size: 15px; color: var(--cyan); } .dv-md .dv-md-h4, .dv-md .dv-md-h5, .dv-md .dv-md-h6 { font-size: 14px; color: var(--cyan); } .dv-md .dv-md-p { margin: 9px 0; } .dv-md .dv-md-ul, .dv-md .dv-md-ol { margin: 8px 0; padding-left: 22px; } .dv-md li { margin: 3px 0; } .dv-md strong { color: var(--gold-hi); font-weight: 600; } .dv-md em { color: var(--violet); font-style: normal; border-bottom: 1px dotted var(--violet-dim); } .dv-md del { color: var(--muted); } .dv-md .dv-md-quote { margin: 10px 0; padding: 6px 14px; border-left: 3px solid var(--gold-dim); background: rgba(216, 180, 106, .07); color: var(--text-2); border-radius: 0 6px 6px 0; } .dv-md .dv-md-quote > :first-child { margin-top: 0; } .dv-md .dv-md-quote > :last-child { margin-bottom: 0; } .dv-md .dv-md-code { font-family: var(--font-mono); font-size: .9em; color: var(--gold); background: rgba(0, 0, 0, .4); padding: 1px 5px; border-radius: 4px; } .dv-md .dv-md-pre { margin: 10px 0; padding: 11px 13px; background: rgba(0, 0, 0, .48); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow-x: auto; } .dv-md .dv-md-pre code { font-family: var(--font-mono); font-size: 12.5px; color: #c8d2f0; white-space: pre; } .dv-md .dv-md-hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; } .dv-md .dv-md-a { color: var(--cyan); } .dv-md-cursor { display: inline-block; width: 7px; color: var(--cyan); animation: dv-blink 1s steps(1) infinite; } @keyframes dv-blink { 50% { opacity: 0; } } /* 手动模式 */ .dv-manual { border: 1px solid rgba(216, 180, 106, .35); border-radius: var(--radius-sm); background: rgba(216, 180, 106, .05); padding: 14px 16px 18px; margin: 0 0 16px; } .dv-manual-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .dv-manual-head strong { color: var(--gold-hi); font-size: 15px; letter-spacing: .06em; } .dv-manual .dv-label { display: block; margin: 12px 0 5px; } /* ------------------------- 提示条 ------------------------- */ .dv-error-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: flex-start; gap: 10px; max-width: min(94vw, 640px); padding: 11px 12px 11px 16px; font-size: 13.5px; color: #ffdde3; background: linear-gradient(180deg, rgba(120, 30, 48, .96), rgba(70, 16, 30, .96)); border: 1px solid rgba(232, 105, 127, .55); border-radius: var(--radius-sm); box-shadow: 0 10px 34px rgba(0, 0, 0, .6); } .dv-error-banner .dv-icon-btn { color: #ffdde3; } .dv-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 61; padding: 9px 20px; font-size: 13.5px; color: var(--text); background: rgba(20, 25, 52, .97); border: 1px solid var(--violet-dim); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); } .dv-footer { text-align: center; padding: 18px 16px 34px; font-size: 11.5px; color: #565d85; line-height: 1.9; } .dv-disclaimer { max-width: 640px; margin: 4px auto 0; } /* ------------------------- 响应式 ------------------------- */ @media (max-width: 760px) { body { font-size: 14.5px; } .dv-main { padding: 10px 10px 30px; } .dv-section-body { padding: 13px 12px 16px; } .dv-section-head { padding: 11px 12px; } .dv-header h1 { font-size: 22px; letter-spacing: .26em; } .dv-field-wide { grid-column: span 2; } .dv-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } table.dv-bazi td.dv-gz { font-size: 21px; } .dv-lr-heaven { font-size: 18px; } .dv-lr-center-gz { font-size: 17px; } .dv-lr-lesson-top, .dv-lr-lesson-bot { font-size: 20px; } .dv-el-val { width: 78px; } } @media (max-width: 620px) { /* 牌阵在窄屏改为自然流式排列，避免十字重叠 */ .dv-spread { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 14px 10px; } .dv-slot-cell, .dv-slot-center { grid-row: auto !important; grid-column: auto !important; width: calc(50% - 8px); max-width: 128px; } .dv-slot-cross .dv-slot-label { display: block; } /* 摊平凯尔特十字的重叠容器，让每张牌都成为独立的流式项 */ .dv-slot-center { display: flex !important; flex-direction: column; gap: 14px; } .dv-slot-cross { position: static; transform: none; z-index: auto; } .dv-lr-plate { width: 100%; } .dv-lr-gen { font-size: 9.5px; } .dv-lr-hname { display: none; } .dv-lr-earth { font-size: 10.5px; } .dv-progress { gap: 4px; } .dv-prog-cap { font-size: 10px; letter-spacing: 0; } .dv-btn { padding: 8px 13px; font-size: 13px; } /* 窄屏也要一眼看见计时器：缩字号，但不缩到要眯眼 */ .dv-live-timer { font-size: 22px; } .dv-final { padding: 4px 12px 14px; } } @media (max-width: 400px) { .dv-field-wide { grid-column: span 2; } .dv-slot { width: 100%; } } /* 矮视口：Google Sites 的嵌入框常见高度只有 600px 上下，页头再占 90px 就太奢侈了。这条同样惠及笔记本上把窗口拉扁的情形，所以按高度判定而不是「是否被嵌入」。 */ @media (max-height: 700px) { .dv-header { padding: 14px 16px 6px; } .dv-header h1 { font-size: 21px; letter-spacing: .24em; } .dv-logo svg { width: 30px; height: 30px; } .dv-sub { font-size: 11.5px; } .dv-main { padding-top: 6px; } .dv-footer { padding: 14px 16px 22px; } } @media print { .dv-sky, .dv-tabs, .dv-row-actions, .dv-progress, .dv-manual, .dv-live, .dv-error-banner, .dv-toast { display: none !important; } body { background: #fff; color: #111; } .dv-tabpane { display: block !important; } }