/* ============================================================ * mine.css —— 「我的」页 v3 增量样式（独立文件，免疫 app.js/styles.css 整存覆盖） * 负责人：我的页负责人（mine 模块） * 接入：index.html 中，在 styles.css 之后 。 * 约定：本轮起「我的」页新增样式一律进本文件；沿用 styles.css 既有 * .mz-block / .mz-shead / .mz-indent 外壳与 --mz-serif 等 token，仅补内部件。 * 配色：jade #176F52 / cinnabar #B23A2E / gold #9C7C43 / line #E7E1D5 / ink #2A2622。 * ============================================================ */ /* ===== 关于洞明国学 弹层 ===== */ .mz-about-body { padding: 4px 20px 22px; } .mz-about-hero { background: linear-gradient(160deg, #1C4A3D, #123128); color: #EEF3EF; border-radius: 16px; padding: 18px; margin-bottom: 16px; } .mz-about-hero span { font-size: 10px; letter-spacing: .28em; color: #9FBCAE; } .mz-about-hero h2 { font-family: var(--mz-serif, serif); font-size: 19px; margin: 8px 0; letter-spacing: .04em; } .mz-about-hero p { font-size: 12.5px; line-height: 1.75; color: #CFE0D6; margin: 0; } .mz-about-p { font-size: 13px; line-height: 1.85; color: #5B6660; font-family: var(--mz-serif, serif); margin: 0 0 14px; } .mz-about-p b { color: #2A2622; } .mz-about-sig { font-family: var(--mz-serif, serif); text-align: center; color: #0F6648; font-size: 14px; margin: 6px 0 0; } /* ===== 邀请同窗 分享块（内嵌于 .mz-block .mz-indent） ===== */ .mz-invite-lab { font-size: 11px; letter-spacing: .28em; color: #B6BDB7; font-family: var(--mz-serif, serif); } .mz-invite-code-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; min-width: 0; } .mz-invite-code { flex: 1; min-width: 0; font-family: var(--mz-serif, serif); font-size: 24px; letter-spacing: .16em; color: #9C7C43; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mz-invite-desc { font-size: 12.5px; color: #5B6660; line-height: 1.75; font-family: var(--mz-serif, serif); margin: 0 0 14px; } .mz-invite-desc b { color: #B23A2E; } .mz-invite-big { width: 100%; height: 46px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #208260, #0F6648); color: #fff; font-family: var(--mz-serif, serif); font-size: 15px; letter-spacing: .1em; cursor: pointer; } .mz-invite-big:active { transform: translateY(1px); } .mz-invite-link { text-align: center; font-size: 12px; color: #9AA39D; margin: 10px 0 14px; word-break: break-all; } .mz-invite-stats { display: flex; text-align: center; border-top: 1px solid #E7E1D5; padding-top: 14px; } .mz-invite-stats div { flex: 1; } .mz-invite-stats b { font-family: var(--mz-serif, serif); font-size: 22px; color: #0F6648; display: block; line-height: 1.2; } .mz-invite-stats span { font-size: 11.5px; color: #9AA39D; } .mz-invite-mile { display: flex; justify-content: space-between; font-family: var(--mz-serif, serif); font-size: 12.5px; margin: 16px 0 0; } .mz-invite-mile em { font-style: normal; color: #5B6660; } .mz-invite-mile em b { color: #9C7C43; } .mz-invite-bar { position: relative; height: 2px; background: #E7E1D5; margin: 16px 6px 8px; } .mz-invite-bar i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #CDD3CC; transform: translateX(-50%); } .mz-invite-legend { display: flex; justify-content: space-between; font-size: 10.5px; color: #9AA39D; } .mz-invite-foot { font-size: 11px; color: #9AA39D; margin: 12px 0 0; } /* ===== 功名 进度环 + 可见经验值 ===== */ .mz-keju-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .mz-keju-ring { --p: 0; width: 60px; height: 60px; flex: none; border-radius: 50%; position: relative; background: conic-gradient(#9C7C43 calc(var(--p) * 1%), #ECE6D8 0); } .mz-keju-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #FFFEFB; } .mz-keju-ring-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mz-serif, serif); font-size: 20px; color: #0F6648; z-index: 1; } .mz-keju-now { flex: 1; min-width: 0; } .mz-keju-exp { font-size: 12.5px; color: #5B6660; margin: 4px 0 0; } .mz-keju-exp b { color: #B23A2E; font-family: var(--mz-serif, serif); } /* ===== 学习会员并入功名框 ===== */ /* ===== 守护 · 双星护学（双档卡，换思路） ===== */ .mz-guard { margin-top: 16px; } .mz-guard-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .mz-guard-head span { font-family: var(--mz-serif, serif); font-size: 14px; color: #2A2622; } .mz-guard-head i { font-style: normal; font-size: 11px; color: #176F52; } .mz-guard-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mz-guard-tier { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 12px; border-radius: 14px; cursor: pointer; text-align: left; overflow: hidden; } /* 洞明星 PRO —— 深绿（柔和） */ .mz-guard-tier.is-pro { border: 1px solid #3A7561; background: linear-gradient(160deg, #3E7D66, #2E5C4A); box-shadow: 0 8px 18px rgba(30, 60, 46, .14); } /* 隐元星 MAX —— 金黑（柔和棕金，非纯黑） */ .mz-guard-tier.is-max { border: 1px solid #BFA267; background: linear-gradient(160deg, #4C422B, #322815); box-shadow: 0 8px 18px rgba(30, 24, 12, .18); } /* 流动金光动效 */ .mz-guard-tier::after { content: ""; position: absolute; top: 0; left: -60%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent); animation: mzGuardSheen 5.5s ease-in-out infinite; pointer-events: none; } .mz-guard-tier.is-max::after { animation-delay: 1.4s; background: linear-gradient(100deg, transparent, rgba(240, 214, 145, .14), transparent); } @keyframes mzGuardSheen { 0% { left: -60%; } 55%, 100% { left: 130%; } } .mz-guard-badge { position: absolute; top: 0; right: 0; z-index: 1; font-size: 10px; color: #23180A; background: linear-gradient(100deg, #E8C877, #F5E6B8); border-bottom-left-radius: 10px; padding: 2px 8px; font-family: var(--mz-serif, serif); letter-spacing: .08em; } .mz-guard-star { position: relative; font-family: var(--mz-serif, serif); font-size: 15px; } .mz-guard-tier.is-pro .mz-guard-star { color: #F0D9A8; } .mz-guard-tier.is-max .mz-guard-star { background: linear-gradient(100deg, #C99B45, #F5E6B8, #C99B45); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #E8C877; } .mz-guard-price { position: relative; font-family: var(--mz-serif, serif); font-size: 18px; } .mz-guard-tier.is-pro .mz-guard-price { color: #FFFFFF; } .mz-guard-tier.is-max .mz-guard-price { color: #F5E6B8; } .mz-guard-price i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .55); } .mz-guard-desc { position: relative; font-style: normal; font-size: 11px; line-height: 1.4; } .mz-guard-tier.is-pro .mz-guard-desc { color: #C7D8CD; } .mz-guard-tier.is-max .mz-guard-desc { color: #C9BE9A; } .mz-guard-cta { position: relative; margin-top: 9px; text-align: center; font-size: 12px; padding: 6px 0; border-radius: 9px; font-family: var(--mz-serif, serif); } .mz-guard-tier.is-pro .mz-guard-cta { background: rgba(255, 255, 255, .14); color: #F0D9A8; } .mz-guard-cta.is-gold { background: linear-gradient(180deg, #E8C87A, #C89B45); color: #2A1E06; font-weight: 600; } /* ===== 万年历：生辰行右侧横排挂件 + 详情浮窗 ===== */ #screen-mine .mz-birthrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; } /* 生辰文字过长时单行省略，绝不换行（与万年历挂件同排） */ #screen-mine .mz-birthrow .mz-birth-line { flex: 1; min-width: 0; margin-top: 0; white-space: nowrap; } #screen-mine .mz-birthrow .mz-birth-line b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } #screen-mine .mz-birthrow .mz-birth-line span { flex: none; } .mz-almanac { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; cursor: pointer; border: 1px solid #E2D6BC; border-radius: 10px; background: #FFFDF7; box-shadow: 0 3px 8px rgba(60, 50, 20, .10); font-family: var(--mz-serif, serif); } .mz-almanac:active { transform: translateY(1px); } .mz-alm-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(180deg, #C2543F, #A8402E); color: #FBEDE9; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); } .mz-alm-date b { font-size: 14px; line-height: 1.1; } .mz-alm-date em { font-style: normal; font-size: 8px; line-height: 1.2; opacity: .92; } .mz-alm-txt { display: flex; flex-direction: column; text-align: left; } .mz-alm-txt b { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: #2A2622; } .mz-alm-txt em { font-style: normal; font-size: 10px; line-height: 1.3; color: #B0893F; } .mz-alm-arrow { font-style: normal; font-size: 13px; color: #C9BFA8; } /* 万年历 · 详情浮窗 */ .mz-alm-sheet { max-width: 358px; } .mz-alm-hero { text-align: center; padding: 4px 0 12px; margin-bottom: 12px; border-bottom: 1px dashed #E7DFC9; } .mz-alm-hero span { display: block; font-size: 10px; letter-spacing: .24em; text-indent: .24em; color: #B0893F; margin-bottom: 7px; } .mz-alm-hero h2 { margin: 0 0 5px; font-family: var(--mz-serif, serif); font-size: 19px; color: #2A2622; letter-spacing: .03em; } .mz-alm-hero p { margin: 0 0 4px; font-family: var(--mz-serif, serif); font-size: 13.5px; color: #B03A28; } .mz-alm-moonline { display: inline-block; font-style: normal; font-size: 11.5px; color: #6B5B33; background: #FBF4DF; border: 1px solid #EFDFB4; border-radius: 999px; padding: 3px 12px; } .mz-alm-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 12px; } .mz-alm-p { text-align: center; padding: 8px 0 7px; border: 1px solid #EDE3CC; border-radius: 10px; background: #FBF8F0; } .mz-alm-p em { display: block; font-style: normal; font-size: 10px; color: #9A8F7D; margin-bottom: 3px; } .mz-alm-p b { display: block; font-family: var(--mz-serif, serif); font-size: 15px; color: #2A2622; } .mz-alm-p.is-day { border-color: #C9A25A; background: linear-gradient(180deg, #FBF4DF, #F7EDD2); } .mz-alm-p.is-day b { color: #7A5A14; } .mz-alm-facts { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding: 9px 2px; margin-bottom: 12px; font-size: 12px; color: #5B5546; border-top: 1px dashed #E7DFC9; border-bottom: 1px dashed #E7DFC9; } .mz-alm-facts b { font-family: var(--mz-serif, serif); color: #2A2622; } .mz-alm-row { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; } .mz-alm-tag { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; color: #fff; font-family: var(--mz-serif, serif); } .mz-alm-tag.is-yi { background: #176F52; } .mz-alm-tag.is-ji { background: #B03A28; } .mz-alm-row span { flex: 1; padding-top: 1px; } .mz-alm-row u { display: inline-block; margin: 0 6px 4px 0; padding: 2px 9px; text-decoration: none; font-size: 12px; font-family: var(--mz-serif, serif); color: #4A4436; background: #F7F2E5; border: 1px solid #EDE3CC; border-radius: 999px; } .mz-alm-note { margin: 4px 0 0; font-size: 10.5px; line-height: 1.6; color: #A79E8C; } .mz-alm-hero p i { font-style: normal; font-size: 11px; color: #C9853F; margin: 0 1px; } /* 生肖 · 方位速览 */ .mz-alm-zodiac { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; } .mz-alm-z { display: flex; align-items: baseline; justify-content: center; gap: 5px; padding: 6px 4px; border: 1px solid #EDE3CC; border-radius: 9px; background: #FBF8F0; } .mz-alm-z em { font-style: normal; font-size: 10px; color: #9A8F7D; } .mz-alm-z b { font-family: var(--mz-serif, serif); font-size: 13px; color: #2A2622; } .mz-alm-z.is-he b { color: #176F52; } .mz-alm-z.is-chong b { color: #B03A28; } .mz-alm-z.is-day b { color: #7A5A14; } /* 小节标题 */ .mz-alm-sec { margin: 12px 0 7px; font-family: var(--mz-serif, serif); font-size: 12.5px; color: #2A2622; display: flex; align-items: baseline; justify-content: space-between; } .mz-alm-sec i { font-style: normal; font-size: 10px; color: #A79E8C; } /* 十二时辰吉凶 */ .mz-alm-hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .mz-alm-h { text-align: center; padding: 5px 0 4px; border-radius: 8px; border: 1px solid #EDE6D7; background: #F8F5EC; } .mz-alm-h b { display: block; font-family: var(--mz-serif, serif); font-size: 13px; color: #6B6459; } .mz-alm-h em { display: block; font-style: normal; font-size: 9px; color: #A79E8C; transform: scale(.92); } .mz-alm-h u { display: block; text-decoration: none; font-size: 9px; color: #B3AC9C; } .mz-alm-h.is-ji { border-color: #CADED4; background: #F0F7F2; } .mz-alm-h.is-ji b { color: #176F52; } .mz-alm-h.is-ji u { color: #176F52; } .mz-alm-h.is-now { border-color: #C9A25A; background: linear-gradient(180deg, #FBF4DF, #F7EDD2); box-shadow: 0 2px 6px rgba(178, 132, 45, .18); } .mz-alm-h.is-now b { color: #7A5A14; } /* 五行穿衣 */ .mz-alm-dress { display: flex; gap: 7px; margin-bottom: 4px; } .mz-alm-dw { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; border: 1px solid #EDE3CC; border-radius: 10px; background: #FBF8F0; } .mz-alm-dw i { font-style: normal; font-size: 10px; color: #9A8F7D; } .mz-alm-dw b { font-family: var(--mz-serif, serif); font-size: 13.5px; color: #4A4436; } .mz-alm-dw u { display: flex; gap: 4px; text-decoration: none; margin-top: 1px; } .mz-alm-dw u s { display: inline-block; width: 12px; height: 12px; border-radius: 50%; text-decoration: none; border: 1px solid rgba(0, 0, 0, .10); } .mz-alm-dw.is-good { border-color: #CADED4; background: #F0F7F2; } .mz-alm-dw.is-good i { color: #176F52; } .mz-alm-dw.is-mid { border-color: #E9D9AC; background: #FBF4DF; } .mz-alm-dw.is-mid i { color: #7A5A14; } .mz-alm-dw.is-bad { opacity: .78; } .mz-alm-dw.is-bad i { color: #B03A28; } /* 彭祖百忌 / 节气 */ .mz-alm-pz { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid #E0C178; border-radius: 0 9px 9px 0; background: #FBF8F0; font-family: var(--mz-serif, serif); font-size: 12px; line-height: 1.7; color: #6B5B33; } .mz-alm-term { margin: 0 0 8px; padding: 8px 12px; text-align: center; border-radius: 9px; border: 1px dashed #CADED4; background: #F4FAF6; font-size: 12px; color: #3E6B58; } .mz-alm-term b { font-family: var(--mz-serif, serif); color: #176F52; } /* ===== 补录生辰 · 命主性别独立浮窗（乾造/坤造双卡；生辰确定后弹出） ===== */ .mz-gender-sheet { max-width: 320px; } .mz-gd-head { text-align: center; padding: 2px 0 14px; } .mz-gd-head span { display: block; font-size: 10px; letter-spacing: .24em; text-indent: .24em; color: #B0893F; margin-bottom: 6px; } .mz-gd-head h3 { margin: 0 0 5px; font-family: var(--mz-serif, serif); font-size: 18px; color: #2A2622; letter-spacing: .08em; } .mz-gd-head p { margin: 0; font-family: var(--mz-serif, serif); font-size: 11.5px; color: #9A8F7D; letter-spacing: .12em; } .mz-gd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 4px; } .mz-gd-opts button { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 8px 15px; border: 1.5px solid #E6E0D2; border-radius: 14px; background: #FBFAF5; cursor: pointer; transition: transform .12s, box-shadow .12s; } .mz-gd-opts button:active { transform: translateY(1px); } .mz-gd-opts i { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--mz-serif, serif); font-size: 26px; color: #F4E7C4; box-shadow: inset 0 0 0 2px rgba(244, 231, 196, .35), 0 5px 12px rgba(20, 30, 25, .18); } .mz-gd-opts [data-mz-gender="male"] i { background: radial-gradient(circle at 35% 30%, #2E6B52, #143329); } .mz-gd-opts [data-mz-gender="female"] i { background: radial-gradient(circle at 35% 30%, #C05A44, #7E2F1F); } .mz-gd-opts b { font-family: var(--mz-serif, serif); font-size: 13.5px; color: #4A4436; } .mz-gd-opts button.is-on { box-shadow: 0 6px 16px rgba(60, 50, 20, .12); background: #FFFDF7; } .mz-gd-opts [data-mz-gender="male"].is-on { border-color: #176F52; } .mz-gd-opts [data-mz-gender="male"].is-on b { color: #0F6648; } .mz-gd-opts [data-mz-gender="female"].is-on { border-color: #B03A28; } .mz-gd-opts [data-mz-gender="female"].is-on b { color: #B03A28; } /* ===== 每日打卡 · 上课铃（挂在万年历头上，时不时晃动） ===== */ #screen-mine .mz-birthrow { position: relative; } .mz-bell { position: absolute; top: -38px; right: 10px; z-index: 3; padding: 2px; cursor: pointer; border: 0; background: none; filter: drop-shadow(0 3px 4px rgba(90, 60, 10, .32)); } .mz-bell:active { transform: translateY(1px); } .mz-bell-svg { display: block; transform-origin: 50% 3px; /* 悬于钮环，绕顶摆动 */ animation: mzBellSwing 2s ease-in-out infinite; } /* 瓷铃图（运行时抠绿后显示；缺图回退 SVG） */ .mz-bell-img { display: block; height: 50px; width: auto; transform-origin: 50% 5%; /* 悬于龙钮，绕顶摆动 */ animation: mzBellSwing 2s ease-in-out infinite; filter: drop-shadow(0 3px 5px rgba(90, 60, 10, .28)); } .mz-bell-img[hidden] { display: none; } /* 瓷铃图生效时（更高），挂点相应上移 */ .mz-bell:has(.mz-bell-img:not([hidden])) { top: -52px; } /* ===== 瓷铃 · 双摆真动画（铃身/珠穗分层：穗挂铃口随动 + 相位延迟反摆） ===== */ .mz-bell.is-rig { top: -56px; } .mz-bell-rig { display: block; position: relative; filter: drop-shadow(0 3px 5px rgba(90, 60, 10, .28)); } .mz-bell-sw { display: block; position: relative; height: 100%; transform-origin: 50% 4px; /* 悬于龙钮 */ animation: mzBellSway 2s ease-in-out infinite; } .mz-bell-p { display: block; width: auto; pointer-events: none; } .mz-bell-p-body { margin: 0 auto; } .mz-bell-tas { position: absolute; transform: translateX(-50%); transform-origin: 50% 0; /* 挂于铃口吊珠 */ animation: mzTasselSway 2s ease-in-out infinite; } @keyframes mzBellSway { /* 2 秒一晃：起摆-回摆-收 */ 0% { transform: rotate(0); } 10% { transform: rotate(9deg); } 30% { transform: rotate(-7deg); } 50% { transform: rotate(4.5deg); } 68% { transform: rotate(-2.5deg); } 84% { transform: rotate(1deg); } 100% { transform: rotate(0); } } @keyframes mzTasselSway { /* 相位滞后 + 反向甩动 */ 0% { transform: translateX(-50%) rotate(0); } 14% { transform: translateX(-50%) rotate(-7deg); } 36% { transform: translateX(-50%) rotate(9deg); } 56% { transform: translateX(-50%) rotate(-6deg); } 74% { transform: translateX(-50%) rotate(3.5deg); } 90% { transform: translateX(-50%) rotate(-1.5deg); } 100% { transform: translateX(-50%) rotate(0); } } .mz-bell-clapper { transform-box: fill-box; transform-origin: 50% 0; animation: mzBellClap 2s ease-in-out infinite; } .mz-bell-dot { position: absolute; top: 0; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: #C2543F; border: 1.5px solid #FFFDF7; animation: mzBellDot 1.6s ease-in-out infinite; } @keyframes mzBellSwing { 0%, 55%, 100% { transform: rotate(0); } 58% { transform: rotate(14deg); } 62% { transform: rotate(-11deg); } 66% { transform: rotate(8deg); } 70% { transform: rotate(-5deg); } 74% { transform: rotate(3deg); } 78% { transform: rotate(-1deg); } 82% { transform: rotate(0); } } @keyframes mzBellClap { /* 垂舌反相小摆，铃身停后余摆片刻 */ 0%, 55%, 100% { transform: rotate(0); } 59% { transform: rotate(-10deg); } 63% { transform: rotate(8deg); } 67% { transform: rotate(-6deg); } 72% { transform: rotate(4deg); } 78% { transform: rotate(-2deg); } 86% { transform: rotate(0); } } @keyframes mzBellDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .75; } } /* 打卡浮窗：弹跳入场 */ .mz-ci-sheet { max-width: 330px; } .mz-ci-sheet[open] { animation: mzPopIn .34s cubic-bezier(.34, 1.56, .64, 1); } @keyframes mzPopIn { from { transform: scale(.82) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .mz-ci-head { text-align: center; padding: 2px 0 10px; } .mz-ci-head span { display: block; font-size: 10px; letter-spacing: .24em; text-indent: .24em; color: #B0893F; margin-bottom: 6px; } .mz-ci-head h3 { margin: 0 0 5px; font-family: var(--mz-serif, serif); font-size: 18px; color: #2A2622; letter-spacing: .08em; } .mz-ci-head p { margin: 0; font-family: var(--mz-serif, serif); font-size: 11.5px; color: #9A8F7D; letter-spacing: .12em; } /* 每日一言 · 笺 */ .mz-ci-quote { position: relative; margin: 0 0 14px; padding: 13px 16px 10px; border-radius: 12px; background: linear-gradient(180deg, #FBF8F0, #F7F2E5); border: 1px solid #EDE3CC; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); overflow: hidden; } .mz-ci-quote::before { content: "「"; position: absolute; top: -6px; left: 6px; font-family: var(--mz-serif, serif); font-size: 42px; line-height: 1; color: rgba(176, 58, 40, .16); } .mz-ci-quote::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 30px; height: 0; } .mz-ci-quote p { position: relative; margin: 0 0 7px; text-align: center; font-family: var(--mz-serif, serif); font-size: 13.5px; line-height: 1.9; color: #3D3728; letter-spacing: .04em; } .mz-ci-quote em { position: relative; display: block; text-align: center; font-style: normal; font-size: 9.5px; letter-spacing: .3em; text-indent: .3em; color: #B0893F; } .mz-ci-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 12px; } .mz-ci-d { text-align: center; padding: 7px 0 6px; border-radius: 9px; border: 1px solid #EDE6D7; background: #F8F5EC; } .mz-ci-d span { display: block; font-family: var(--mz-serif, serif); font-size: 10px; color: #9A8F7D; margin-bottom: 3px; } .mz-ci-d b { display: block; font-size: 14px; line-height: 1.3; color: #6B6459; font-family: var(--mz-serif, serif); } .mz-ci-d em { display: block; font-style: normal; font-size: 9px; color: #B3AC9C; } .mz-ci-d.is-done { border-color: #CADED4; background: #F0F7F2; } .mz-ci-d.is-done b { color: #176F52; } .mz-ci-d.is-done em { color: #176F52; } .mz-ci-d.is-today { border-color: #C9A25A; background: linear-gradient(180deg, #FBF4DF, #F7EDD2); box-shadow: 0 2px 8px rgba(178, 132, 45, .22); } .mz-ci-d.is-today b { color: #7A5A14; } .mz-ci-d.is-miss { border-style: dashed; } .mz-ci-bu { cursor: pointer; color: #B03A28 !important; background: #FBEDE9; border-radius: 6px; margin: 0 4px; } .mz-ci-d.is-lost { opacity: .55; } .mz-ci-bar { position: relative; height: 16px; border-radius: 999px; overflow: hidden; background: #F0EBDD; margin-bottom: 10px; } .mz-ci-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #2E8564, #0F6648); transition: width .5s cubic-bezier(.22, .61, .36, 1); } .mz-ci-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; color: #5B6660; letter-spacing: .1em; } .mz-ci-bonus { margin: 0 0 12px; padding: 7px 12px; text-align: center; border-radius: 9px; border: 1px dashed #E4C784; background: #FBF4DF; font-family: var(--mz-serif, serif); font-size: 12px; color: #7A5A14; } .mz-ci-bonus b { color: #B03A28; } .mz-ci-bonus.is-got { border-style: solid; border-color: #CADED4; background: #F0F7F2; color: #176F52; } .mz-ci-ok { width: 100%; height: 46px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #208260, #0E5B41); color: #fff; font-family: var(--mz-serif, serif); font-size: 14.5px; letter-spacing: .12em; box-shadow: 0 8px 18px rgba(15, 102, 72, .28); position: relative; overflow: hidden; } .mz-ci-ok::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: mzClaimSweep 2.8s ease-in-out infinite; } .mz-ci-ok:active { transform: translateY(1px); } .mz-ci-ok.is-done { background: #EDE6D7; color: #9A8F7D; box-shadow: none; cursor: default; } .mz-ci-ok.is-done::after { display: none; } .mz-ci-note { margin: 10px 0 0; text-align: center; font-size: 10.5px; line-height: 1.6; color: #A79E8C; } /* ===== 补录生辰 · mine 自有浮窗（v31：历法 + 年/月/日 + 时辰地支 + 乾坤，一步定盘） ===== */ .mz-birth-sheet { max-width: 342px; } .mzb-cal { display: flex; gap: 8px; margin: 2px 0 12px; } .mzb-cal button { flex: 1; padding: 8px 0; cursor: pointer; border: 1.5px solid #E6E0D2; border-radius: 10px; background: #FBFAF5; font-family: var(--mz-serif, serif); font-size: 13px; color: #6B6459; } .mzb-cal button.is-on { border-color: #176F52; background: #F0F7F2; color: #0F6648; font-weight: 600; } .mzb-selects { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.35fr; gap: 7px; margin-bottom: 12px; } .mzb-selects label { position: relative; display: block; } .mzb-selects select { width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; padding: 9px 4px 21px; border: 1px solid #E6E0D2; border-radius: 10px; background: #FFFDF7; font-family: var(--mz-serif, serif); font-size: 13.5px; color: #2A2622; text-align: center; text-align-last: center; } .mzb-selects select:focus { outline: none; border-color: #176F52; } .mzb-selects em { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font-style: normal; font-size: 10px; color: #9A8F7D; pointer-events: none; } .mzb-gender { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .mzb-gender button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; cursor: pointer; border: 1.5px solid #E6E0D2; border-radius: 12px; background: #FBFAF5; font-family: var(--mz-serif, serif); font-size: 13px; color: #4A4436; } .mzb-gender i { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--mz-serif, serif); font-size: 14px; color: #F4E7C4; } .mzb-gender [data-mzb-gender="male"] i { background: radial-gradient(circle at 35% 30%, #2E6B52, #143329); } .mzb-gender [data-mzb-gender="female"] i { background: radial-gradient(circle at 35% 30%, #C05A44, #7E2F1F); } .mzb-gender [data-mzb-gender="male"].is-on { border-color: #176F52; background: #F0F7F2; color: #0F6648; font-weight: 600; } .mzb-gender [data-mzb-gender="female"].is-on { border-color: #B03A28; background: #FBEDE9; color: #B03A28; font-weight: 600; } .mzb-ok { width: 100%; height: 46px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #208260, #0E5B41); color: #fff; font-family: var(--mz-serif, serif); font-size: 15px; letter-spacing: .3em; text-indent: .3em; box-shadow: 0 8px 18px rgba(15, 102, 72, .28); } .mzb-ok:active { transform: translateY(1px); } .mzb-note { margin: 10px 0 0; text-align: center; font-size: 10.5px; line-height: 1.6; color: #A79E8C; } /* ===== 守护入口 v5：回归双卡原版视感 + 克制精修（内侧高光 / 角落星芒水印 / 价格加大）。 入口不分档位高下，主推 MAX 交由弹窗承担。 ===== */ .mz-guard-tier::before { content: "✦"; position: absolute; right: -8px; bottom: -18px; z-index: 0; font-size: 64px; line-height: 1; pointer-events: none; color: rgba(240, 217, 168, .08); } .mz-guard-tier.is-max::before { color: rgba(232, 200, 119, .12); } .mz-guard-tier.is-pro { box-shadow: 0 8px 18px rgba(30, 60, 46, .14), inset 0 1px 0 rgba(255, 255, 255, .12); } .mz-guard-tier.is-max { box-shadow: 0 8px 18px rgba(30, 24, 12, .18), inset 0 1px 0 rgba(255, 255, 255, .10); } .mz-guard-price { font-size: 20px; } /* ===== 守护入口 v4（已废弃，HTML 不再引用，保留备回滚）：夜空星幕方案 ===== */ .mz-guard-sky { position: relative; padding: 12px 12px 4px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(191, 162, 103, .38); background: radial-gradient(1.5px 1.5px at 15% 25%, rgba(240, 217, 168, .85), transparent 60%), radial-gradient(1px 1px at 35% 72%, rgba(255, 255, 255, .50), transparent 60%), radial-gradient(1.5px 1.5px at 55% 14%, rgba(240, 217, 168, .70), transparent 60%), radial-gradient(1px 1px at 76% 62%, rgba(255, 255, 255, .45), transparent 60%), radial-gradient(1.5px 1.5px at 90% 30%, rgba(240, 217, 168, .80), transparent 60%), radial-gradient(1px 1px at 24% 90%, rgba(255, 255, 255, .40), transparent 60%), radial-gradient(150px 90px at 80% 0%, rgba(232, 200, 119, .12), transparent 70%), radial-gradient(150px 90px at 12% 100%, rgba(46, 110, 84, .20), transparent 70%), linear-gradient(155deg, #182720 0%, #101A15 50%, #14120A 100%); box-shadow: inset 0 0 42px rgba(0, 0, 0, .35), 0 10px 24px rgba(15, 25, 20, .22); } .mz-guard-sky::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1px 1px at 45% 40%, rgba(240, 217, 168, .75), transparent 60%), radial-gradient(1.5px 1.5px at 66% 84%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(1px 1px at 8% 55%, rgba(240, 217, 168, .65), transparent 60%), radial-gradient(1.5px 1.5px at 85% 78%, rgba(240, 217, 168, .60), transparent 60%); animation: mzStarTwinkle 3.6s ease-in-out infinite alternate; } @keyframes mzStarTwinkle { from { opacity: .25; } to { opacity: 1; } } /* 双星交替呼吸辉光（错开相位，如二星轮值守夜） */ .mz-guard-sky .mz-guard-tier.is-pro { border-color: rgba(150, 200, 175, .55); animation: mzGuardGlowPro 4.6s ease-in-out infinite; } .mz-guard-sky .mz-guard-tier.is-max { border-color: rgba(232, 200, 119, .60); animation: mzGuardGlowMax 4.6s ease-in-out 2.3s infinite; } @keyframes mzGuardGlowPro { 0%, 100% { box-shadow: 0 8px 18px rgba(10, 20, 15, .30); } 50% { box-shadow: 0 8px 20px rgba(10, 20, 15, .30), 0 0 20px rgba(88, 168, 132, .42); } } @keyframes mzGuardGlowMax { 0%, 100% { box-shadow: 0 8px 18px rgba(10, 8, 3, .32); } 50% { box-shadow: 0 8px 20px rgba(10, 8, 3, .32), 0 0 22px rgba(232, 200, 119, .46); } } .mz-guard-sky .mz-guard-star { font-size: 15.5px; } .mz-guard-sky .mz-guard-tier.is-pro .mz-guard-star { background: linear-gradient(100deg, #9CC7AE, #F0D9A8, #9CC7AE); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #F0D9A8; } .mz-guard-sky .mz-guard-price { font-size: 20px; } .mz-guard-sky .mz-guard-cta { padding: 7px 0; } .mz-guard-motto { position: relative; margin: 10px 0 8px; text-align: center; font-family: var(--mz-serif, serif); font-size: 11px; letter-spacing: .30em; text-indent: .30em; color: #C8B078; } /* ===== 守护入口 v3（已废弃，保留备回滚）：MAX 大卡主推 + PRO 轻量条 ===== */ .mz-guard-hero { position: relative; display: block; width: 100%; padding: 14px 14px 12px; border-radius: 14px; overflow: hidden; cursor: pointer; text-align: left; border: 1px solid #BFA267; background: linear-gradient(160deg, #4C422B, #322815); box-shadow: 0 8px 18px rgba(30, 24, 12, .18); } .mz-guard-hero::after { content: ""; position: absolute; top: 0; left: -60%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(240, 214, 145, .14), transparent); animation: mzGuardSheen 5.5s ease-in-out infinite; pointer-events: none; } .mz-guard-hero .mz-guard-star { display: block; font-size: 16px; background: linear-gradient(100deg, #C99B45, #F5E6B8, #C99B45); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #E8C877; } .mz-guard-hero .mz-guard-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 22px; color: #F5E6B8; } .mz-guard-hero .mz-guard-price em { font-style: normal; font-size: 11px; color: #C9BE9A; } .mz-guard-perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .mz-guard-perks u { text-decoration: none; font-size: 11px; font-family: var(--mz-serif, serif); color: #F0D9A8; border: 1px solid rgba(232, 200, 119, .45); border-radius: 999px; padding: 3px 9px; background: rgba(232, 200, 119, .10); } .mz-guard-hero .mz-guard-cta { display: block; margin-top: 11px; padding: 8px 0; font-size: 13px; } .mz-guard-lite { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid #CADED4; border-radius: 12px; background: #F1F7F3; cursor: pointer; text-align: left; } .mz-guard-lite b { font-family: var(--mz-serif, serif); font-size: 13px; color: #2E5C4A; white-space: nowrap; } .mz-guard-lite span { flex: 1; font-size: 11px; color: #6E877B; } .mz-guard-lite i { font-style: normal; font-size: 14px; color: #6E877B; } .mz-guard-all { display: block; width: 100%; margin-top: 12px; padding: 0; border: 0; background: none; color: #176F52; font-size: 12.5px; font-family: var(--mz-serif, serif); cursor: pointer; text-align: center; } /* ===== 分享面板（微信 / 微信群 / 复制） ===== */ .mz-share-body { padding: 6px 20px 24px; } .mz-share-opts { display: flex; gap: 10px; } .mz-share-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border: 1px solid #EEE8DC; border-radius: 14px; background: #FFFEFB; cursor: pointer; font-family: var(--mz-serif, serif); font-size: 12.5px; color: #3A362F; } .mz-share-ic { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--mz-serif, serif); font-size: 17px; } .mz-share-ic.is-wx { background: #07C160; } .mz-share-ic.is-group { background: #2AAE67; } .mz-share-ic.is-copy { background: #9C7C43; } .mz-share-tip { margin: 16px 0 0; font-size: 11.5px; color: #9AA39D; line-height: 1.6; text-align: center; } /* ===== 头像全屏预览 ===== */ .mz-ava-full { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; background: rgba(15, 25, 20, .92); cursor: zoom-out; } .mz-ava-full[hidden] { display: none; } .mz-ava-full img { width: 78vw; max-width: 340px; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); } /* ===== 会员权益 · 居中弹浮窗（各页面复用） ===== */ .mz-center-modal { position: fixed; inset: 0; margin: auto; width: 88%; max-width: 360px; height: fit-content; max-height: 82vh; border: 0; border-radius: 18px; padding: 0; overflow: hidden; background: #FBF8F2; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); } .mz-center-modal::backdrop { background: rgba(18, 30, 25, .55); } .mz-center-x { position: absolute; top: 10px; right: 12px; z-index: 5; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(20, 30, 25, .10); color: #5B6660; font-size: 19px; line-height: 1; cursor: pointer; } .mz-center-body { max-height: 82vh; overflow-y: auto; padding: 20px 18px 22px; } /* ===== 守护会员 · 底部弹窗 ===== */ .mz-vip-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 640px; max-height: 90vh; border: 0; border-radius: 22px 22px 0 0; padding: 0; overflow: hidden; background: linear-gradient(180deg, #FDFBF6, #F5F0E6); box-shadow: 0 -18px 60px rgba(0, 0, 0, .32); animation: mzVipUp .34s cubic-bezier(.22, .61, .36, 1); } .mz-vip-sheet::backdrop { background: rgba(18, 30, 25, .55); } @keyframes mzVipUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .mz-vip-handle { width: 40px; height: 4px; border-radius: 2px; background: #D9D2C4; margin: 10px auto 2px; } .mz-vip-body { max-height: 84vh; overflow-y: auto; padding: 8px 18px calc(22px + var(--h5-safe-bottom)); } /* 守护视图（带底部支付栏）：滚动容器不留底部内边距，交由支付栏自身 padding 收尾 */ .mz-vip-body.has-dock { padding-bottom: 0; } /* 守护 · 标题 */ .mine-detail-content .mzv-head { text-align: center; padding: 2px 0 0; margin-bottom: 12px; } .mine-detail-content .mzv-head span { display: block; font-size: 10px; letter-spacing: .22em; color: #B0893F; margin-bottom: 5px; } .mine-detail-content .mzv-head h2 { font-family: var(--mz-serif, serif); font-size: 18px; color: #2A2622; letter-spacing: .1em; margin: 0; } .mine-detail-content .mzv-head h2::after { display: none; } /* 守护 · 书签式双档切换 */ .mine-detail-content .mzv-card { margin: 4px 0 16px; } .mine-detail-content .mzv-promo { position: relative; overflow: hidden; margin: 0 0 9px; padding: 6px 12px; border-radius: 10px; text-align: center; color: #3A2A08; font-family: var(--mz-serif, serif); font-size: 12px; letter-spacing: .04em; background: linear-gradient(100deg, #C89438 0%, #EAC66E 35%, #FBEDBC 50%, #EAC66E 65%, #C89438 100%); background-size: 220% auto; box-shadow: 0 3px 10px rgba(200, 150, 60, .28); animation: mzClaimShine 3s linear infinite; } .mine-detail-content .mzv-promo b { font-weight: 700; } .mine-detail-content .mzv-promo::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-18deg); animation: mzClaimSweep 3s ease-in-out infinite; } .mine-detail-content .mzv-tabs { display: flex; gap: 8px; align-items: flex-end; position: relative; z-index: 2; } .mine-detail-content .mzv-tab { flex: 1; padding: 10px 8px 12px; cursor: pointer; text-align: center; border: 0; border-radius: 16px 16px 0 0; font-family: var(--mz-serif, serif); transition: all .2s; } .mine-detail-content .mzv-tab b { display: block; font-size: 13.5px; letter-spacing: .02em; } .mine-detail-content .mzv-tab span { font-size: 11px; opacity: .85; } /* 未选中：浅色扁平，可辨色系不抢眼 */ .mine-detail-content .mzv-tab.is-pro { background: #E7EEEA; color: #6E877B; } .mine-detail-content .mzv-tab.is-max { background: #ECE7DB; color: #927F58; } /* 选中 · 洞明星 PRO 墨绿 */ .mine-detail-content .mzv-tab.is-pro.is-on { background: linear-gradient(160deg, #245644, #143329); color: #F4E7C4; padding: 13px 8px 15px; box-shadow: inset 0 0 0 1px rgba(224,193,120,.28), 0 -3px 12px rgba(20,50,40,.20); } .mine-detail-content .mzv-tab.is-pro.is-on span { color: #BCD0C4; } /* 选中 · 隐元星 MAX 黑金 */ .mine-detail-content .mzv-tab.is-max.is-on { background: linear-gradient(160deg, #2C2517, #14110B); color: #ECCB78; padding: 13px 8px 15px; box-shadow: inset 0 0 0 1px rgba(224,193,120,.42), 0 -3px 12px rgba(20,16,8,.28); } .mine-detail-content .mzv-tab.is-max.is-on span { color: #CBB177; } .mine-detail-content .mzv-panel { position: relative; z-index: 1; margin-top: -2px; background: #FDFBF6; border: 1px solid #E2DCCD; border-radius: 0 0 16px 16px; padding: 16px 15px; } .mine-detail-content .mzv-card.is-pro-sel .mzv-panel { border-color: #CADED4; box-shadow: 0 8px 20px rgba(23,111,82,.08); } .mine-detail-content .mzv-card.is-max-sel .mzv-panel { border-color: #E4C784; box-shadow: 0 8px 22px rgba(156,124,67,.12); } .mine-detail-content .mzv-pane-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .mine-detail-content .mzv-pane-price strong { font-family: var(--mz-serif, serif); font-size: 28px; font-weight: 700; color: #2A2622; } .mine-detail-content .mzv-pane-price s { font-size: 13px; color: #B3AC9C; } .mine-detail-content .mzv-pane-save { align-self: center; font-family: var(--mz-serif, serif); font-size: 11px; color: #C2543F; background: #FBEDE9; border: 1px solid #F0CFC6; border-radius: 6px; padding: 2px 8px; } .mine-detail-content .mzv-pane-sub { font-size: 11.5px; color: #9A8F7D; margin-bottom: 12px; } .mine-detail-content .mzv-pane-benefits { list-style: none; margin: 0 0 10px; padding: 0; } .mine-detail-content .mzv-pane-benefits li { position: relative; padding: 5px 0 5px 16px; font-size: 12.5px; color: #5B6660; } .mine-detail-content .mzv-pane-benefits li::before { content: "·"; position: absolute; left: 5px; font-weight: 700; color: #176F52; } .mine-detail-content .mzv-pane[data-vip-pane="max"] .mzv-pane-benefits li::before { color: #C89B45; } .mine-detail-content .mzv-pane-note { margin: 0; font-size: 11.5px; line-height: 1.6; color: #9A8F7D; } .mine-detail-content .mzv-pane-gift { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 12px; font-family: var(--mz-serif, serif); background: linear-gradient(100deg, #EAF4EC, #DFEFE4); color: #0F6648; } .mine-detail-content .mzv-pane-gift.is-gold { background: linear-gradient(100deg, #FBF1D6, #F5E7C0); color: #8A5F16; } /* 守护 · 支付方式选择 */ .mine-detail-content .mzv-bottom { position: sticky; bottom: 0; z-index: 3; margin: 10px -18px 0; padding: 12px 18px calc(16px + var(--h5-safe-bottom)); background: #FBF6EC; border-top: 1px solid #EDE6D7; box-shadow: 0 -6px 16px rgba(0,0,0,.08); } .mine-detail-content .mzv-bottom .mzv-foot { margin: 8px 0 0; } .mine-detail-content .mzv-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; } .mine-detail-content .mzv-pay-opt { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 8px; border: 1.5px solid #E6E0D2; border-radius: 10px; background: #FBFAF5; font-family: var(--mz-serif, serif); font-size: 13px; color: #2A2622; cursor: pointer; } .mine-detail-content .mzv-pay-opt.is-on { border-color: #176F52; background: #F0F7F2; } .mine-detail-content .mzv-pay-ic { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-style: normal; } .mine-detail-content .mzv-pay-ic.wx { background: #1AAD19; } .mine-detail-content .mzv-pay-ic.ali { background: #1677FF; } /* 守护 · 开通按钮 */ .mine-detail-content .mzv-buy { width: 100%; height: 50px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #208260, #0E5B41); color: #fff; font-family: var(--mz-serif, serif); font-size: 15px; letter-spacing: .08em; box-shadow: 0 8px 20px rgba(15,102,72,.30); } .mine-detail-content .mzv-buy.is-gold { background: linear-gradient(180deg, #EBCB7C, #C2933B); color: #2A1E06; box-shadow: 0 8px 20px rgba(178,132,45,.32); } .mine-detail-content .mzv-foot { margin: 12px 2px 0; font-size: 11px; line-height: 1.6; color: #A79E8C; text-align: center; } /* 守护 · v2 成交性强化：推荐签 / 档位色价格 / 权益要点 / 回本账 / 按钮扫光 */ .mine-detail-content .mzv-tab { position: relative; } .mine-detail-content .mzv-tab-tag { position: absolute; top: -9px; right: 8px; font-style: normal; font-size: 9.5px; padding: 2px 8px; border-radius: 999px; letter-spacing: .08em; background: linear-gradient(100deg, #C2543F, #A8402E); color: #FBEDE9; box-shadow: 0 2px 6px rgba(160, 60, 40, .30); } .mine-detail-content .mzv-pane[data-vip-pane="pro"] .mzv-pane-price strong { color: #0E5B41; } .mine-detail-content .mzv-pane[data-vip-pane="max"] .mzv-pane-price strong { color: #7A5A14; } .mine-detail-content .mzv-pane-benefits li b { font-weight: 700; color: #0F6648; } .mine-detail-content .mzv-pane[data-vip-pane="max"] .mzv-pane-benefits li b { color: #8A5F16; } .mine-detail-content .mzv-pane-math { margin: 0 0 10px; padding: 7px 11px; border-radius: 9px; font-size: 11.5px; line-height: 1.55; color: #7A5A14; background: #FBF4DF; border: 1px dashed #E4C784; font-family: var(--mz-serif, serif); } .mine-detail-content .mzv-buy { position: relative; overflow: hidden; } .mine-detail-content .mzv-buy::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: mzClaimSweep 2.8s ease-in-out infinite; } /* 守护 · v3 主推 MAX：PRO 面板内的升级差价钩子（点击即切到 MAX 档） */ .mine-detail-content .mzv-upsell { display: block; width: 100%; margin: 0 0 10px; padding: 8px 12px; cursor: pointer; border: 1px solid #E4C784; border-radius: 10px; text-align: left; font-family: var(--mz-serif, serif); font-size: 12px; line-height: 1.5; color: #6B4E10; background: linear-gradient(100deg, #FBF1D6, #F5E7C0); box-shadow: 0 3px 8px rgba(178, 132, 45, .14); } .mine-detail-content .mzv-upsell:active { transform: translateY(1px); } /* ===== 个人设置 ===== */ .mz-acct-body { padding: 4px 20px 24px; } .mz-acct-row { display: flex; align-items: center; width: 100%; gap: 8px; padding: 14px 2px; border: 0; border-bottom: 1px solid #EEE8DC; background: none; text-align: left; font-family: var(--mz-serif, serif); font-size: 14px; color: #2A2622; } .mz-acct-row:last-child { border-bottom: 0; } .mz-acct-row.is-act { cursor: pointer; } .mz-acct-row > span { flex: none; } .mz-acct-row em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #9AA39D; } .mz-acct-row i { font-style: normal; color: #C3C9C2; margin-left: 6px; } /* ===== 会员权益 / 墨点 弹窗内容（clean，作用域 .mine-detail-content 复用） ===== */ .mine-detail-content .mzd-hero { position: relative; overflow: hidden; background: linear-gradient(155deg, #22503F 0%, #143329 62%, #0E271F 100%); color: #EEF3EF; border-radius: 16px; padding: 22px 20px; margin-bottom: 16px; box-shadow: inset 0 0 0 1px rgba(214, 182, 110, .16); } .mine-detail-content .mzd-hero::after { content: ""; position: absolute; top: -46px; right: -34px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(224, 193, 120, .22), transparent 70%); pointer-events: none; } .mine-detail-content .mzd-hero span { position: relative; font-size: 10.5px; letter-spacing: .22em; color: #C9A96A; } .mine-detail-content .mzd-hero h2 { position: relative; font-family: var(--mz-serif, serif); font-size: 22px; margin: 10px 0 0; color: #FBF8F2; letter-spacing: .04em; } .mine-detail-content .mzd-hero h2:not(.mzd-hero-bal)::after { content: ""; display: block; width: 36px; height: 2px; margin-top: 11px; background: linear-gradient(90deg, #E0C178, rgba(224, 193, 120, 0)); } .mine-detail-content .mzd-hero p { position: relative; font-size: 12px; line-height: 1.7; color: #CFE0D6; margin: 10px 0 0; } .mine-detail-content .mzd-hero-bal { display: flex; align-items: baseline; gap: 6px; } .mine-detail-content .mzd-hero-bal b { font-family: var(--mz-serif, serif); font-size: 30px; color: #F0D691; } .mine-detail-content .mzd-hero-bal small { font-size: 12px; color: #9FBCAE; } /* 守护浮窗：性价比引导条 */ .mine-detail-content .mzd-value { background: linear-gradient(160deg, #FBF7EC, #F5EEDB); border: 1px solid #E6D5A8; border-radius: 12px; padding: 11px 13px; margin-bottom: 14px; } .mine-detail-content .mzd-value b { display: block; font-family: var(--mz-serif, serif); font-size: 13px; color: #6B4E12; margin-bottom: 4px; } .mine-detail-content .mzd-value span { font-size: 12px; line-height: 1.65; color: #7A6A4A; } /* 守护浮窗：权益对比（含普通档锚定列；选中档整列随书签联动高亮；表头 PRO/MAX 可点切档） */ .mine-detail-content .mzd-cmp { border: 1px solid #E7DFC9; border-radius: 12px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 5px 14px rgba(60, 50, 20, .05); } .mine-detail-content .mzd-cmp-row { display: grid; grid-template-columns: 1fr 48px 56px 56px; align-items: stretch; padding: 0 12px; border-bottom: 1px solid #F0EBDD; font-size: 12px; color: #4A4436; } .mine-detail-content .mzd-cmp-row span { font-family: var(--mz-serif, serif); padding: 8px 0; } .mine-detail-content .mzd-cmp-row:last-child { border-bottom: 0; } .mine-detail-content .mzd-cmp-row u, .mine-detail-content .mzd-cmp-row em, .mine-detail-content .mzd-cmp-row i { font-style: normal; text-decoration: none; font-family: var(--mz-serif, serif); display: flex; align-items: center; justify-content: center; padding: 8px 0; } .mine-detail-content .mzd-cmp-row u { font-size: 11px; color: #B3AC9C; } .mine-detail-content .mzd-cmp-row em { color: #0F6648; font-weight: 700; } .mine-detail-content .mzd-cmp-row i { color: #9C6E22; font-weight: 700; } .mine-detail-content .mzd-cmp.is-pro-sel .mzd-cmp-row em { background: rgba(23, 111, 82, .07); } .mine-detail-content .mzd-cmp.is-max-sel .mzd-cmp-row i { background: rgba(156, 124, 67, .10); } .mine-detail-content .mzd-cmp-head em, .mine-detail-content .mzd-cmp-head i { cursor: pointer; } .mine-detail-content .mzd-cmp-head { background: linear-gradient(180deg, #F7F2E5, #F0E9D6); } .mine-detail-content .mzd-cmp-head span { font-family: var(--mz-serif, serif); color: #2A2622; letter-spacing: .04em; } /* 守护浮窗：PRO 旗标 / MAX 含PRO说明 */ .mine-detail-content .mzd-tier-flag { position: absolute; top: 0; right: 0; font-size: 10px; color: #0F6648; background: linear-gradient(100deg, #CDE8D6, #E9F4ED); border-bottom-left-radius: 10px; padding: 2px 9px; font-family: var(--mz-serif, serif); letter-spacing: .08em; } .mine-detail-content .mzd-tier-inc { margin: 0 0 8px; font-size: 12px; color: #9C6E22; font-family: var(--mz-serif, serif); } .mine-detail-content .mzd-tier { position: relative; border-radius: 14px; padding: 14px 14px 15px; margin-bottom: 12px; overflow: hidden; } .mine-detail-content .mzd-tier.is-pro { background: linear-gradient(160deg, #F4F9F3, #E6F0E9); border: 1px solid #CBDDD2; box-shadow: 0 8px 22px rgba(23, 111, 82, .10); } .mine-detail-content .mzd-tier.is-max { background: linear-gradient(160deg, #FFFCF4, #F7ECD2); border: 1px solid #E0BC6E; box-shadow: 0 10px 28px rgba(156, 124, 67, .20); } .mine-detail-content .mzd-tier-badge { position: absolute; top: 0; right: 0; font-size: 10px; color: #23180A; background: linear-gradient(100deg, #E8C877, #F5E6B8); border-bottom-left-radius: 10px; padding: 2px 9px; font-family: var(--mz-serif, serif); letter-spacing: .08em; } .mine-detail-content .mzd-tier-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .mine-detail-content .mzd-tier-top b { font-family: var(--mz-serif, serif); font-size: 16px; } .mine-detail-content .mzd-tier.is-pro .mzd-tier-top b { color: #0F6648; } .mine-detail-content .mzd-tier.is-max .mzd-tier-top b { color: #9C6E22; } .mine-detail-content .mzd-tier-price { font-family: var(--mz-serif, serif); font-size: 24px; color: #2A2622; letter-spacing: .01em; } .mine-detail-content .mzd-tier-price i { font-style: normal; font-size: 11px; color: #9AA39D; } .mine-detail-content .mzd-tier-benefits { list-style: none; margin: 0 0 12px; padding: 0; } .mine-detail-content .mzd-tier-benefits li { position: relative; padding: 4px 0 4px 16px; font-size: 12.5px; color: #5B6660; } .mine-detail-content .mzd-tier-benefits li::before { content: "·"; position: absolute; left: 5px; color: #176F52; font-weight: 700; } .mine-detail-content .mzd-tier.is-max .mzd-tier-benefits li::before { color: #C89B45; } .mine-detail-content .mzd-tier-btn { width: 100%; height: 46px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #208260, #0E5B41); color: #fff; font-family: var(--mz-serif, serif); font-size: 14.5px; letter-spacing: .1em; box-shadow: 0 6px 16px rgba(15, 102, 72, .28); } .mine-detail-content .mzd-tier-btn.is-gold { background: linear-gradient(180deg, #EBCB7C, #C2933B); color: #2A1E06; font-weight: 600; box-shadow: 0 6px 16px rgba(178, 132, 45, .32); } .mine-detail-content .mzd-sec-title { font-family: var(--mz-serif, serif); font-size: 13px; color: #2A2622; margin: 16px 0 10px; } .mine-detail-content .mzd-buy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mine-detail-content .mzd-buy { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; cursor: pointer; border: 1px solid #E7E1D5; border-radius: 12px; background: #FFFEFB; } .mine-detail-content .mzd-buy b { font-family: var(--mz-serif, serif); font-size: 16px; color: #2A2622; } .mine-detail-content .mzd-buy em { font-style: normal; font-size: 11px; color: #9C7C43; } /* 「推荐」不等于「已选中」：is-best 只做角标 + 描边，底色留白， * 否则 ¥6 会从进弹窗那一刻起就长得像被选中，且选了别档也不褪色。 */ .mine-detail-content .mzd-buy.is-best { position: relative; border-color: #E2C079; background: #FFFEFB; } .mine-detail-content .mzd-buy.is-best::after { content: "荐"; position: absolute; top: -1px; right: -1px; padding: 0 5px; font-size: 10px; line-height: 15px; color: #FFFDF6; background: #C89B45; border-radius: 0 11px 0 8px; } .mine-detail-content .mzd-task-list { border: 1px solid #ECE6DA; border-radius: 12px; overflow: hidden; background: #FFFEFB; } .mine-detail-content .mzd-tk { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid #F1ECE2; } .mine-detail-content .mzd-tk:last-child { border-bottom: 0; } .mine-detail-content .mzd-tk span { font-family: var(--mz-serif, serif); font-size: 13px; color: #2A2622; } .mine-detail-content .mzd-tk em { font-style: normal; font-size: 11.5px; color: #9AA39D; } .mine-detail-content .mzd-hint { font-size: 11.5px; color: #9AA39D; line-height: 1.7; margin: 14px 0 0; text-align: center; } /* 任务6R（20260716zp）：充值下守护引导视觉强化——上一版素得像一行字（晨哥反馈）。 * 改「灯」印章 + 双行文案 + 右箭头的浅金小卡；仍整卡点击复用 data-mine-detail="vip"，不新造支付。 */ .mine-detail-content .mzd-guard-lead { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic title arrow" "ic sub arrow"; align-items: center; column-gap: 11px; row-gap: 2px; width: 100%; margin: 14px 0 0; padding: 11px 13px; text-align: left; border: 1px solid #E4D3A4; border-radius: 12px; background: linear-gradient(135deg, #FCF7EA, #F5ECD4); box-shadow: 0 4px 14px rgba(158, 124, 51, .10); cursor: pointer; } .mine-detail-content .mzd-guard-lead::before { content: "灯"; grid-area: ic; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(180deg, #E8C87A, #C89B45); color: #2A1E06; font-family: var(--mz-serif, serif); font-size: 16px; font-weight: 600; } .mine-detail-content .mzd-guard-lead::after { content: "›"; grid-area: arrow; color: #B08F4C; font-size: 18px; line-height: 1; } .mine-detail-content .mzd-guard-lead b { grid-area: title; display: block; font-family: var(--mz-serif, serif); font-size: 13.5px; font-weight: 600; color: #5A431A; letter-spacing: .02em; } .mine-detail-content .mzd-guard-lead em { grid-area: sub; display: block; margin: 0; font-style: normal; font-size: 11px; color: #A6863E; } .mine-detail-content .mzd-guard-lead:active { filter: brightness(.97); } /* ===== 守护/墨点：买赠标、支付、选中、动效 ===== */ .mine-detail-content .mzd-tier-promo { display: inline-block; font-style: normal; font-size: 11px; color: #0F6648; background: #E7F1EA; border-radius: 8px; padding: 2px 9px; margin: 0 0 10px; } .mine-detail-content .mzd-tier-promo.is-gold { color: #7A5A1E; background: linear-gradient(100deg, #F6E9C8, #FBF2DE); } .mz-guard-promo { display: block; position: relative; font-style: normal; font-size: 10.5px; margin: 2px 0 6px; } .mz-guard-tier.is-pro .mz-guard-promo { color: #EAF3ED; } .mz-guard-tier.is-max .mz-guard-promo { color: #F0D9A8; } .mz-guard-desc { position: relative; } .mz-guard-tier .mz-guard-desc { line-height: 1.55; } /* ============================================================ * 守护双横条（20260716zp · 任务7R，替代窗口C的并排小卡） * ------------------------------------------------------------ * 晨哥反馈并排小卡「看不出明显变化」→ 改上下两条整宽横条的简易美化版。 * 不改 index.html 结构，纯 CSS 重排：每条三段式 * [徽标] 星名 / 一句促销 价格 / 立即开通 * 双行权益(desc)在横条里不展示（详情见守护对比页），保持简易。 * 覆盖顺序同前：置于全部 .mz-guard 基础定义之后。sky/hero/lite 废弃变体不受影响。 * ============================================================ */ .mz-guard { margin-top: 14px; } .mz-guard-head { margin-bottom: 8px; } .mz-guard-head span { font-size: 13px; color: #3A362F; } .mz-guard-head i { font-size: 10.5px; color: #8C8575; } .mz-guard-tiers { display: flex; flex-direction: column; gap: 8px; } /* 横条骨架 */ .mz-guard-tier { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "badge star price" "badge promo cta"; align-items: center; column-gap: 10px; row-gap: 1px; width: 100%; padding: 9px 12px; border-radius: 12px; box-shadow: none; text-align: left; } .mz-guard-tier.is-pro { border: 1px solid #D4E0D8; background: #F6FAF7; box-shadow: none; } .mz-guard-tier.is-max { border: 1px solid #E5D9BE; background: #FAF7F0; box-shadow: none; } .mz-guard-tier::after { content: none; animation: none; } .mz-guard-tier::before { content: none; } .mz-guard-tier.is-max::after { content: none; } .mz-guard-tier.is-max::before { content: none; } /* 徽标：左侧素净小方标 */ .mz-guard-badge { grid-area: badge; position: static; align-self: center; color: #6E877B; background: #EDF2EF; padding: 7px 8px; font-size: 10.5px; letter-spacing: .08em; border-radius: 9px; } .mz-guard-tier.is-max .mz-guard-badge { color: #9C7C43; background: #F4EEDF; } /* 星名：深墨字（弃浅金/渐变字） */ .mz-guard-star { grid-area: star; position: static; min-width: 0; font-size: 13.5px; } .mz-guard-tier.is-pro .mz-guard-star { color: #2E5C4A; } .mz-guard-tier.is-max .mz-guard-star { background: none; -webkit-text-fill-color: currentColor; color: #8A6A2F; } /* 促销一句话：单行截断 */ .mz-guard-promo { grid-area: promo; position: static; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; } .mz-guard-tier.is-pro .mz-guard-promo { color: #7C9A88; } .mz-guard-tier.is-max .mz-guard-promo { color: #A6863E; } /* 双行权益说明横条内不展示 */ .mz-guard-tier .mz-guard-desc { display: none; } /* 价格：右上 */ .mz-guard-price { grid-area: price; position: static; justify-self: end; font-size: 16px; } .mz-guard-tier.is-pro .mz-guard-price { color: #2A2622; } .mz-guard-tier.is-max .mz-guard-price { color: #6E541F; } .mz-guard-price i { color: #A79E8C; } /* CTA：右下轻文字链 */ .mz-guard-cta { grid-area: cta; position: static; justify-self: end; margin: 0; padding: 0; text-align: right; font-size: 11px; border-radius: 0; font-weight: 400; } .mz-guard-tier.is-pro .mz-guard-cta { background: none; color: #176F52; } .mz-guard-cta.is-gold { background: none; color: #9C7C43; font-weight: 500; } /* 「查看两档对比」链接略收 */ .mz-guard-all { margin-top: 10px; font-size: 12px; } /* ==== 守护双横条 覆盖结束 ==== */ .mine-detail-content .mzd-pay { width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #E8C87A, #C89B45); color: #2A1E06; font-weight: 600; font-family: var(--mz-serif, serif); font-size: 15px; letter-spacing: .04em; } .mine-detail-content .mzd-pay[disabled] { background: #E7E1D5; color: #A7ADA7; cursor: default; } .mine-detail-content .mzd-buy.is-sel { border-color: #C89B45; box-shadow: 0 0 0 2px rgba(200, 155, 69, .25); background: linear-gradient(180deg, #FFFCF4, #FBF2DE); } .mine-detail-content .mzd-buy.is-sel b { color: #8A6A2F; } .mine-detail-content .mzd-tier-badge { animation: mzBadgePulse 2.4s ease-in-out infinite; } @keyframes mzBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 200, 119, .5); } 50% { box-shadow: 0 0 0 5px rgba(232, 200, 119, 0); } } .mine-detail-content .mzd-tier-btn.is-gold { animation: mzGoldBtnGlow 2.8s ease-in-out infinite; } @keyframes mzGoldBtnGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 155, 69, 0); } 50% { box-shadow: 0 6px 20px rgba(200, 155, 69, .45); } } .mine-detail-content .mzd-tier.is-max::after { content: ""; position: absolute; top: 0; left: -50%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(240, 214, 145, .26), transparent); animation: mzGuardSheen 4.8s ease-in-out infinite; pointer-events: none; } /* ===== 功名九阶详情 · 逐阶释义 ===== */ #sheet-keju .mine-edit-panel { max-height: 84vh; overflow-y: auto; } #sheet-keju .keju-list { margin: 4px 0 6px; } #sheet-keju .keju-item { padding: 10px 2px; border-bottom: 1px solid #EEE8DC; } #sheet-keju .keju-item:last-child { border-bottom: 0; } #sheet-keju .keju-item.is-current { background: #FBF5F3; border-radius: 8px; padding: 10px 8px; border-bottom: 0; } #sheet-keju .keju-item-h { display: flex; align-items: baseline; gap: 8px; } #sheet-keju .keju-item-h b { font-family: var(--mz-serif, serif); font-size: 14px; color: #2A2622; } #sheet-keju .keju-item.is-done .keju-item-h b { color: #176F52; } #sheet-keju .keju-item.is-current .keju-item-h b { color: #B23A2E; } #sheet-keju .keju-item-h em { font-style: normal; font-size: 11px; color: #9AA39D; } #sheet-keju .keju-item-h i { margin-left: auto; font-style: normal; font-size: 11.5px; color: #9C7C43; } #sheet-keju .keju-item p { margin: 4px 0 0; font-size: 12px; color: #6B6459; line-height: 1.5; font-family: var(--mz-serif, serif); } /* 功名栏目框 · 当前阶释义 */ .mz-keju-desc { margin: 3px 0 0; font-family: var(--mz-serif, serif); font-size: 12px; color: #6B6459; line-height: 1.55; } /* ===== 入门功课 · 完成待领取（金色）+ 领取动效 ===== */ .mz-task.is-claim .mz-task-tk { background: #176F52; border-color: #176F52; } .mz-task.is-claim .mz-task-claim { position: relative; overflow: hidden; padding: 3px 15px; border-radius: 12px; color: #2A1E06; font-weight: 600; background: linear-gradient(100deg, #C89438 0%, #EAC66E 35%, #FBEDBC 50%, #EAC66E 65%, #C89438 100%); background-size: 220% auto; box-shadow: 0 0 10px rgba(216, 169, 78, .5); animation: mzClaimShine 2.4s linear infinite, mzClaimGlow 2s ease-in-out infinite; } /* 流光扫过的高光条 */ .mz-task.is-claim .mz-task-claim::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-18deg); animation: mzClaimSweep 2.4s ease-in-out infinite; } @keyframes mzClaimShine { 0% { background-position: 0% center; } 100% { background-position: 220% center; } } @keyframes mzClaimGlow { 0%, 100% { box-shadow: 0 0 8px rgba(216, 169, 78, .4); } 50% { box-shadow: 0 0 18px rgba(242, 205, 110, .85); } } @keyframes mzClaimSweep { 0% { left: -60%; } 55%, 100% { left: 120%; } } .mz-task.is-done .mz-task-claim { background: none; color: #C0C5BE; font-weight: 400; padding: 0; animation: none; } /* ===== 顶部未登录态（自持副本，免受 styles.css 缓存/邻居覆盖影响）===== */ #screen-mine .mz-name-guest, #screen-mine .mz-guest-tip, #screen-mine .mz-login-cta { display: none; } #screen-mine.is-guest #mineNameText, #screen-mine.is-guest .mz-ident, #screen-mine.is-guest .mz-meta, #screen-mine.is-guest .mz-birth-line, #screen-mine.is-guest .mz-gear { display: none !important; } #screen-mine.is-guest .mz-name-guest { display: block !important; } #screen-mine.is-guest .mz-guest-tip { display: block !important; margin: 10px 0 0; font-size: 12.5px; color: #6B6459; } #screen-mine.is-guest .mz-login-cta { display: inline-flex !important; align-items: center; margin: 12px auto 2px; height: 38px; padding: 0 22px; border: 0; border-radius: 20px; cursor: pointer; background: linear-gradient(180deg, #208260, #0F6648); color: #fff; font-size: 14px; letter-spacing: .06em; font-family: var(--mz-serif, inherit); } /* 未登录也展示默认头像（丙火男），不再用灰章覆盖 */ /* ===== 功名九阶表：四列 —— 功名 | 晋阶经验 | 题库解锁 | 墨点奖励 ===== */ #sheet-keju .keju-tab-row { grid-template-columns: 48px 1fr 52px 52px; gap: 6px; } #sheet-keju .keju-tab-row i { text-align: right; color: #2C6E56; } #sheet-keju .keju-tab-row b { font-style: normal; text-align: right; font-family: var(--mz-serif); font-weight: 700; color: #C9A15C; } #sheet-keju .keju-tab-head i, #sheet-keju .keju-tab-head b { font-family: var(--mz-serif); font-weight: 600; color: #8A7E68; text-align: right; } /* ===== 纠错贡献 · 提交表单 ===== */ .mzc-submit h3 { font-size: 14px; margin: 0 0 8px; color: #2A2620; font-weight: 600; } .mzc-submit textarea { width: 100%; box-sizing: border-box; min-height: 90px; border: 1px solid rgba(23,111,82,.25); border-radius: 10px; padding: 10px; font-size: 13px; line-height: 1.6; font-family: inherit; resize: vertical; background: #FBFAF5; color: #2A2620; } .mzc-submit textarea:focus { outline: none; border-color: #176F52; } .mzc-submit-btn { margin-top: 10px; width: 100%; height: 40px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #208260, #0F6648); color: #fff; font-size: 14px; letter-spacing: .06em; cursor: pointer; font-family: var(--mz-serif, inherit); } .mzc-submit-btn:active { transform: scale(.99); } .mzc-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: #9A8F7D; } /* ===== 下载 APP 弹窗 ===== */ .mz-app-dls { display: flex; gap: 12px; } .mz-app-dl { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 10px; border: 1px solid rgba(23,111,82,.18); border-radius: 14px; background: #FBFAF5; cursor: pointer; font-family: var(--mz-serif, inherit); } .mz-app-dl:active { transform: scale(.98); } .mz-app-dl b { font-size: 14px; color: #2A2620; font-weight: 600; } .mz-app-dl i { font-size: 11px; color: #9A8F7D; font-style: normal; } .mz-app-ic { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; background: linear-gradient(160deg, #2A2620, #4A4238); } .mz-app-ic.is-and { background: linear-gradient(160deg, #2E9E6B, #178A55); } .mz-float { position: fixed; z-index: 60; pointer-events: none; transform: translateX(-50%); font-family: var(--mz-serif, serif); font-weight: 600; font-size: 14px; color: #C89B45; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); animation: mzFloatUp 1s ease-out forwards; } @keyframes mzFloatUp { 0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(.9); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-42px) scale(1.12); } } /* ===== 设置 · 文档行图标 ===== */ .mz-row-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 7px; background: #F6F1E7; color: #9C7C43; font-family: var(--mz-serif, serif); font-size: 12px; font-style: normal; flex: none; } /* （20260716zp：皮肤设置行样式已随皮肤功能整体下架，原样式见 _backupC_20260716_mine.css 时期之后的版本与 HANDOFF §11） */ /* ===== 法务链接（登录勾选项 / 关于弹窗）：随正文，不做成按钮 ===== */ .mz-agree-link { color: #8A6A2F; text-decoration: underline; text-underline-offset: 2px; } /* ===== 口令兑换（墨点框内 · 入门功课之上） ===== */ .mz-redeem { margin: 12px 0 2px; padding-top: 12px; border-top: 1px dashed #E7E1D5; } .mz-redeem-head { display: flex; align-items: baseline; gap: 6px; font-family: var(--mz-serif, serif); font-size: 13px; color: #2A2622; } .mz-redeem-ico { font-size: 12px; color: #C89B45; } .mz-redeem-sub { font-family: system-ui, sans-serif; font-size: 11px; color: #9C7C43; } .mz-redeem-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .mz-redeem-input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 2px; font-size: 13px; color: #2A2622; letter-spacing: .5px; border: 0; border-bottom: 1px solid #D9D0BE; border-radius: 0; background: transparent; outline: none; } .mz-redeem-input::placeholder { color: #A9A08D; letter-spacing: normal; } .mz-redeem-input:focus { border-bottom-color: #C89B45; } .mz-redeem-btn { flex: none; min-width: 62px; height: 32px; padding: 0 12px; font-family: var(--mz-serif, serif); font-size: 13px; color: #8A6A2F; border: 1px solid #E2C079; border-radius: 8px; background: #FFFCF4; cursor: pointer; } .mz-redeem-btn:active { background: #FBF2DE; } .mz-redeem-btn[disabled] { opacity: .5; cursor: default; } .mz-redeem-tip { margin: 6px 0 0; font-size: 11px; color: #9C7C43; } .mz-redeem-tip.is-bad { color: #A6483C; } .mz-redeem-tip.is-good { color: #176F52; } /* ===== 入门功课（墨点框内） ===== */ .mz-task-head { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--mz-serif, serif); font-size: 13px; color: #2A2622; margin: 12px 0 2px; padding-top: 12px; border-top: 1px dashed #E7E1D5; } .mz-task-head span { font-size: 11px; color: #176F52; } .mz-task { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 2px; border: 0; border-bottom: 1px solid #F1ECE2; background: none; cursor: pointer; text-align: left; } .mz-task:last-child { border-bottom: 0; } .mz-task-tk { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #CDD3CC; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; transition: .2s; } .mz-task.is-done .mz-task-tk { background: #176F52; border-color: #176F52; } /* ⚠️ 20260714：勾**由 CSS 画**，不再写在 HTML 里。 * * 原来 0 号「修改昵称」和 1 号「选择头像」的 HTML 里硬编码了一个 ✓， * 其余任务的圈里是空的。而从服务端恢复「已领取」状态走的是 mzMarkTaskDone —— * 它只加 class，**不碰那个字符**。于是同样是已完成的任务， * 有的圈里有勾，有的是个空的绿圈。用户看到的就是「完成状态不统一」。 * * 根子在于：**同一个状态由两处各画一半**（class 画圈、HTML 画勾）。 * 现在收敛成一处：状态只由 class 决定，勾是 class 的产物。 */ .mz-task.is-done .mz-task-tk::after, .mz-task.is-claim .mz-task-tk::after { content: "✓"; color: #fff; font-size: 10px; line-height: 1; font-weight: 700; } .mz-task-title { flex: 1; min-width: 0; font-family: var(--mz-serif, serif); font-size: 12.5px; font-weight: 500; color: #3A362F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mz-task.is-done .mz-task-title { color: #A7ADA7; text-decoration: line-through; text-decoration-color: #D6DAD3; } .mz-task-reward { flex: none; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; } .mz-task-go { flex: none; font-size: 11px; white-space: nowrap; font-family: var(--mz-serif, serif); } .mz-task.is-done .mz-task-go { color: #C0C5BE; } .mz-task:not(.is-done) .mz-task-go:not(.mz-task-claim) { padding: 3px 11px; border-radius: 12px; background: #176F52; color: #fff; animation: mzTaskBreathe 2.6s ease-in-out infinite; } @keyframes mzTaskBreathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(23, 111, 82, .30); } 50% { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(23, 111, 82, 0); } } /* ===== 二级页面（我的 · 详情）视觉优化：克制、书院质感 ===== */ .mine-detail-content .detail-top { border-bottom: 1px solid #EEE8DC; } .mine-detail-content .detail-top strong { font-family: var(--mz-serif, serif); font-weight: 600; letter-spacing: .04em; } .mine-detail-content .mine-detail-hero { background: linear-gradient(160deg, #1F4A3D, #123128); border: 0; border-radius: 18px; padding: 20px; box-shadow: 0 10px 26px rgba(18, 40, 32, .16); } .mine-detail-content .mine-detail-hero span { color: #9FBCAE; font-weight: 600; letter-spacing: .14em; font-size: 11px; } .mine-detail-content .mine-detail-hero h2 { color: #FBF8F2; font-family: var(--mz-serif, serif); font-weight: 600; font-size: 21px; margin-top: 8px; letter-spacing: .02em; } .mine-detail-content .mine-detail-hero p { color: #CFE0D6; font-size: 12.5px; line-height: 1.7; margin-top: 8px; } .mine-detail-content .mine-detail-hero .mzd-num, .mine-detail-content .mzd-price .mzd-num { color: #F0D691; } .mine-detail-content .mine-detail-hero button { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 500; border-radius: 999px; min-height: 34px; padding: 0 16px; margin-top: 14px; font-size: 12.5px; } .mine-detail-content .detail-list, .mine-detail-content .mine-detail-card { border: 1px solid #ECE6DA; border-radius: 14px; box-shadow: 0 4px 16px rgba(20, 40, 32, .05); background: #FFFEFB; margin-top: 14px; } .mine-detail-content .mine-detail-card { padding: 15px; } .mine-detail-content .mine-detail-card h3 { font-family: var(--mz-serif, serif); font-weight: 600; color: #2A2622; } .mine-detail-content .mine-detail-card p { color: #5B6660; font-size: 12.5px; line-height: 1.7; } .mine-detail-content .detail-row { min-height: 46px; padding: 11px 14px; border-bottom-color: #F1ECE2; } .mine-detail-content .detail-row.mzd-list-head { background: #FAF6EE; min-height: 40px; } .mine-detail-content .detail-row.mzd-list-head span { font-family: var(--mz-serif, serif); font-weight: 600; color: #2A2622; } .mine-detail-content .detail-row span { font-weight: 500; color: #3A362F; } .mine-detail-content .detail-row em { color: #9AA39D; font-style: normal; font-size: 12.5px; } .mine-detail-content .mzd-num { font-family: var(--mz-serif, serif); font-weight: 600; } .mine-detail-content .mine-detail-card button, .mine-detail-content .detail-list button, .mine-detail-content[data-vip-action] { font-weight: 500; border-radius: 999px; background: linear-gradient(180deg, #208260, #0F6648); color: #fff; min-height: 40px; margin-top: 12px; letter-spacing: .04em; } .mine-detail-content .mine-detail-card button + button { background: #F1EADF; color: #8A6A42; } .mine-detail-content .mzd-note { color: #9AA39D; font-size: 11.5px; line-height: 1.7; margin-top: 14px; } /* ===== 会员权益 · 两档守护卡 premium ===== */ .mine-detail-content .mzd-plan { position: relative; border-radius: 16px; overflow: hidden; } .mine-detail-content .mzd-plan .mzd-list-head { background: transparent; padding: 14px 16px 10px; } .mine-detail-content .mzd-plan .mzd-list-head span { font-size: 15px; } .mine-detail-content .mzd-plan .mzd-list-head em { color: #8A6A42; font-weight: 600; } .mine-detail-content .mzd-plan-pro { background: linear-gradient(180deg, #FFFDF8, #F3F8F2); border-color: #DDE7DD; } .mine-detail-content .mzd-plan-max { background: linear-gradient(180deg, #FFFBF2, #FBF3E4); border: 1px solid #E4C989; box-shadow: 0 10px 26px rgba(156, 124, 67, .14); } .mine-detail-content .mzd-plan-max::before { content: "尊享"; position: absolute; top: 12px; right: 14px; font-size: 10.5px; color: #7A5A22; background: linear-gradient(100deg, #E8C877, #F5E6B8); border-radius: 10px; padding: 2px 9px; font-family: var(--mz-serif, serif); letter-spacing: .1em; } .mine-detail-content .mzd-plan-max .mzd-list-head span { background: linear-gradient(100deg, #9C6E22, #C99B45, #9C6E22); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #9C6E22; } .mine-detail-content .mzd-plan [data-vip-action] { margin: 12px 16px 16px; width: calc(100% - 32px); } .mine-detail-content .mzd-plan-max [data-vip-action] { background: linear-gradient(180deg, #D8B463, #B58E46); color: #3A2C0E; } /* ===== 入门功课 · 奖励金韵光泽（更明显） ===== */ .mz-task-reward { font-style: normal; background: linear-gradient(100deg, #9A6A15 0%, #C79A34 30%, #EBC466 48%, #C79A34 66%, #9A6A15 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #B07E1E; animation: mzGoldShine 3.4s linear infinite; } .mz-task.is-done .mz-task-reward { background: none; -webkit-text-fill-color: #C7C1B2; color: #C7C1B2; animation: none; } @keyframes mzGoldShine { to { background-position: 200% center; } } /* ===== 会员头像 · 十天干（头像弹层内） ===== */ .mz-ava-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #E7E1D5; } .mz-ava-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .mz-ava-head span { font-family: var(--mz-serif, serif); font-size: 13px; color: #2A2622; } .mz-ava-gate { font-style: normal; font-size: 10.5px; color: #9C7C43; background: #F6F1E7; border-radius: 10px; padding: 2px 8px; } .mz-ava-gender { display: flex; gap: 8px; margin-bottom: 12px; } .mz-ava-gender button { flex: 1; height: 32px; border: 1px solid #E7E1D5; background: #FFFEFB; border-radius: 9px; font-family: var(--mz-serif, serif); font-size: 12.5px; color: #6B6459; cursor: pointer; } .mz-ava-gender button.is-on { border-color: #176F52; background: #176F52; color: #fff; } .mz-ava-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 12px; } .mz-ava-item { border: 0; background: none; padding: 0; cursor: pointer; text-align: center; } .mz-ava-item em { font-size: 11px; margin-top: 6px; } .mz-ava-im { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid transparent; background: #EEE; } .mz-ava-im img { width: 100%; height: 100%; object-fit: cover; display: block; } .mz-ava-item.is-sel .mz-ava-im { border-color: #B23A2E; box-shadow: 0 0 0 3px #F4E7E3; } .mz-ava-item em { display: block; font-style: normal; font-size: 11px; color: #6B6459; margin-top: 6px; font-family: var(--mz-serif, serif); } /* ===== 功名 · 进度轨道（整块可点开九阶）+ 呼吸金点 ===== */ .mz-keju-open { display: block; width: 100%; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; } .mz-keju-open:active { opacity: .85; } .mz-keju-rank .mz-keju-more { float: right; font-style: normal; font-size: 11.5px; color: #176F52; font-family: var(--mz-serif, serif); } .mz-keju-track { position: relative; margin: 12px 8px 6px; } .mz-keju-line { position: absolute; left: 6px; right: 6px; top: 5px; height: 2px; border-radius: 2px; background: #EAE4D6; } .mz-keju-fill { position: absolute; left: 0; top: 0; height: 100%; width: 42%; border-radius: 3px; background: linear-gradient(90deg, #176F52, #4FA985); } .mz-keju-fill::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; transform: translate(50%, -50%); border-radius: 50%; background: #C9A253; box-shadow: 0 0 0 0 rgba(201, 162, 83, .5); animation: mzTipBreathe 1.9s ease-in-out infinite; } .mz-keju-dots { position: relative; display: flex; justify-content: space-between; } .mz-keju-d { display: flex; flex-direction: column; align-items: center; gap: 8px; } .mz-keju-d i { width: 11px; height: 11px; border-radius: 50%; background: #D8D1C1; border: 2.5px solid #FBF8F2; box-shadow: 0 0 0 1px #E2DBCB; position: relative; z-index: 1; } .mz-keju-d em { font-style: normal; font-size: 11px; color: #B0B6B0; font-family: var(--mz-serif, serif); } .mz-keju-d.is-done i { background: #176F52; box-shadow: none; border-color: #FBF8F2; } .mz-keju-d.is-done em { color: #6B6459; } .mz-keju-d.is-current i { background: #B23A2E; box-shadow: 0 0 0 4px #F4E7E3; } .mz-keju-d.is-current em { color: #B23A2E; font-weight: 600; } @keyframes mzTipBreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 83, .5); } 50% { box-shadow: 0 0 0 6px rgba(201, 162, 83, 0); } } /* ===== 会员头像 · 大图预览 ===== */ .mz-ava-preview { display: flex; flex-direction: column; align-items: center; margin: 4px 0 14px; } .mz-ava-preview img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 3px solid #C9A253; box-shadow: 0 8px 20px rgba(20, 40, 32, .16); background: #EEE; } .mz-ava-cap { margin-top: 8px; font-family: var(--mz-serif, serif); font-size: 13px; color: #2A2622; } /* ===== 顶部个人信息：头像在左、左对齐、整体右移 10px ===== */ #screen-mine .mz-eyebrow { padding-left: 10px; } #screen-mine .mz-id { text-align: left; padding-left: 10px; } #screen-mine .mz-name-row { justify-content: flex-start; } #screen-mine .mz-name { padding-bottom: 6px; } /* ===== 头像放大 + 圆形（比原来大一倍，头像在左，称呼底部对齐） ===== */ #screen-mine .mz-name-row { flex-direction: row; align-items: flex-end; gap: 14px; } #screen-mine .mz-avatar { display: inline-block; line-height: 0; } #screen-mine .mz-seal { width: 84px; height: 84px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 6px 18px rgba(20, 40, 32, .16), inset 0 0 0 2px rgba(255, 255, 255, .55); font-size: 34px; } /* ==== [全站原生触感] mine：按压不缩放/不位移，统一轻变色 ==== */ .mz-invite-big:active, .mine-detail-content .mzv-upsell:active, .mzc-submit-btn:active, .mz-app-dl:active { transform: none; filter: brightness(.95); } /* ============================================================ * 注销账户（20260713） * ------------------------------------------------------------ * 应用商店（尤其 iOS）把「App 内可自助注销」列为强制项，缺了直接拒审。 * 视觉上刻意做重：这是不可逆操作，不该和「绑定手机」长得一样轻。 * ============================================================ */ .mz-acct-danger span { color: #B3261E; } .mz-acct-danger i { color: #B3261E; } .mz-del-body { padding: 4px 2px 18px; } .mz-del-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #2A2622; } .mz-del-lead b { color: #B3261E; } .mz-del-list { margin: 0 0 18px; padding: 14px 16px 14px 30px; list-style: disc; background: #FBF4F3; border: 1px solid #F0DAD7; border-radius: 10px; } .mz-del-list li { font-size: 13px; line-height: 1.9; color: #6B615A; } .mz-del-list b { color: #B3261E; font-weight: 600; } .mz-del-check { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 18px; font-size: 13px; line-height: 1.5; color: #2A2622; cursor: pointer; } .mz-del-check input { margin-top: 2px; flex: 0 0 auto; } .mz-del-acts { display: flex; gap: 10px; } .mz-del-acts button { flex: 1; padding: 13px 0; font-size: 15px; border-radius: 999px; border: 0; cursor: pointer; } .mz-del-cancel { color: #176F52; background: #EEF3F0; } .mz-del-go { color: #FFF; background: #B3261E; } /* 没勾选确认时保持不可点 —— 让「不可逆」这件事需要一个主动动作 */ .mz-del-go:disabled { background: #E4D7D5; color: #B09E9B; cursor: not-allowed; } /* 注销入口：放在隐私条款页底部，刻意远离「退出登录」—— 那两个按钮一个随时能回来、一个永久删除，挨在一起迟早点错。 */ .mz-privacy-del { margin-top: 6px; } .mz-privacy-del-line { height: 1px; margin: 18px 0 16px; background: #EEE8DC; } .mz-privacy-del-btn { margin-top: 12px; padding: 10px 20px; font-size: 13px; color: #B3261E; background: none; border: 1px solid #E8C9C6; border-radius: 999px; cursor: pointer; } .mz-privacy-del-btn:active { background: #FBF4F3; } /* 身份验证提示 + 验证码输入 */ .mz-del-verify { margin: 0 0 16px; font-size: 12.5px; line-height: 1.7; color: #9AA39D; } .mz-del-verify b { color: #2A2622; } .mz-del-code { display: block; width: 100%; margin-top: 10px; padding: 12px 14px; font-size: 16px; letter-spacing: 3px; color: #2A2622; background: #FAF7F0; border: 1px solid #E6DDC9; border-radius: 10px; outline: none; } .mz-del-code:focus { border-color: #176F52; } /* 退出登录：可逆操作，用主色而不是红色 —— 别和「注销」混淆 */ .mz-logout-go { color: #FFF; background: #176F52; } /* ============================================================ * 墨点不足 · 全站统一弹窗（20260713） * ------------------------------------------------------------ * 以前每个收费点各弹各的：明心回落演示模板、课堂直接糊一个守护浮窗、 * app.js 里一张自建提示卡（写了"做任务免费得"却没有任务入口）。 * 同一件事四种长相，用户只知道"没反应"。 * 现在一个出口：差多少说清楚，三条补给路一次给全。 * ============================================================ */ .mz-ink-body { padding: 4px 2px 18px; } .mz-ink-gauge { display: flex; align-items: center; gap: 10px; padding: 16px 14px; background: #FAF7F0; border: 1px solid #EEE8DC; border-radius: 12px; } .mz-ink-need, .mz-ink-have { flex: 1; text-align: center; } .mz-ink-need span, .mz-ink-have span { display: block; margin-bottom: 3px; font-size: 11.5px; color: #9AA39D; } .mz-ink-need b, .mz-ink-have b { font-family: "Noto Serif SC", serif; font-size: 24px; line-height: 1.2; } .mz-ink-need b { color: #B3261E; } /* 要多少：红 */ .mz-ink-have b { color: #2A2622; } /* 有多少：墨 */ .mz-ink-need i, .mz-ink-have i { margin-left: 2px; font-style: normal; font-size: 11.5px; color: #9AA39D; } .mz-ink-arrow { flex: 0 0 auto; font-size: 16px; color: #C9C2B4; } .mz-ink-reason { margin: 12px 0 18px; font-size: 12.5px; text-align: center; color: #9C7C43; } .mz-ink-ways { display: flex; flex-direction: column; gap: 9px; } .mz-ink-way { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; text-align: left; background: #FFF; border: 1px solid #EEE8DC; border-radius: 12px; cursor: pointer; } /* 充值是最直接的路，给它主色描边 —— 但不做成唯一的路 */ .mz-ink-way.is-primary { border-color: #C8DCD2; background: #F5FAF7; } .mz-ink-way:active { background: #F4EFE4; } .mz-ink-way-ic { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-family: "Noto Serif SC", serif; font-size: 15px; font-style: normal; color: #176F52; background: #EEF3F0; border-radius: 9px; } .mz-ink-way.is-primary .mz-ink-way-ic { color: #FFF; background: #176F52; } .mz-ink-way span { flex: 1; min-width: 0; } .mz-ink-way b { display: block; font-size: 14px; color: #2A2622; font-weight: 600; } .mz-ink-way em { display: block; margin-top: 2px; font-size: 11.5px; font-style: normal; color: #9AA39D; line-height: 1.5; } .mz-ink-way u { flex: 0 0 auto; font-size: 15px; color: #C9C2B4; text-decoration: none; } /* ============================================================ * 口令兑换结果弹窗（20260713） * ------------------------------------------------------------ * 原来只在输入框下面显示一行小字。手机上键盘一收，那行字就滚出视野了， * 用户根本不知道 300 墨点到底到没到账。这种事必须弹出来说清楚。 * ============================================================ */ .mz-rd-body { padding: 10px 4px 20px; text-align: center; } .mz-rd-ic { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 14px; font-size: 26px; line-height: 1; border-radius: 50%; } .mz-rd-ic.is-ok { color: #FFF; background: #176F52; } .mz-rd-ic.is-bad { color: #FFF; background: #B3261E; } .mz-rd-title { margin: 0 0 6px; font-family: "Noto Serif SC", serif; font-size: 18px; color: #2A2622; } .mz-rd-sub { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: #9AA39D; } .mz-rd-amount { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 14px 0; margin-bottom: 10px; background: #FAF7F0; border: 1px solid #EEE8DC; border-radius: 12px; } .mz-rd-amount b { font-family: "Noto Serif SC", serif; font-size: 30px; color: #9C7C43; } .mz-rd-amount span { font-size: 13px; color: #9AA39D; } .mz-rd-bal { margin: 0 0 18px; font-size: 12.5px; color: #9C7C43; } .mz-rd-ok { width: 100%; padding: 13px 0; font-size: 15px; color: #FFF; background: #176F52; border: 0; border-radius: 999px; cursor: pointer; } /* 没勾协议就点登录：晃动协议行 + 品牌金高亮，不再用红色文字报错（用户反馈「会显示红色代码」）。 高亮全部取自登录区现有配色：金 #8A6A2F（.mz-agree-link 同款），底色是它的 8% 透明衍生，不引入新色板。 class 由 mine-auth.js 在 animationend 时移除；transition 让高亮淡出而不是硬切。 */ @keyframes mzNudge { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } } .mz-agree { transition: background-color .3s ease, box-shadow .3s ease; } .mz-agree span { transition: color .3s ease; } .mz-agree.is-nudge { animation: mzNudge .5s ease-in-out; background-color: rgba(138, 106, 47, .08); box-shadow: 0 0 0 6px rgba(138, 106, 47, .08); /* 光晕式描边，不占布局、不引起抖动时的位移 */ border-radius: 6px; } .mz-agree.is-nudge span { color: #8A6A2F; } .mz-agree.is-nudge input { outline: 2px solid #8A6A2F; outline-offset: 2px; border-radius: 3px; } /* 播客：已听的集 */ .ap-row.is-heard b { color: #176F52; } .ap-row.is-heard strong { color: #6B7C73; } .ap-heard { margin: 10px 0 4px; font-size: 12.5px; color: #9C7C43; text-align: center; } /* ============================================================ * 全站统一分享面板（20260713） * ------------------------------------------------------------ * 原来各处用 navigator.clipboard.writeText —— 微信内置浏览器禁用它， * 所以微信里分享必然失败。现在按环境降级，并带上邀请码。 * ============================================================ */ .mz-sh-body { padding: 4px 2px 18px; } .mz-sh-wxtip { margin: 0 0 14px; padding: 12px 14px; font-size: 12.5px; line-height: 1.8; color: #6B615A; background: #F2F8F4; border: 1px solid #D6E7DC; border-radius: 10px; } .mz-sh-wxtip b { color: #176F52; } .mz-sh-card { padding: 16px 14px; background: #FAF7F0; border: 1px solid #EEE8DC; border-radius: 12px; } .mz-sh-title { display: block; font-family: "Noto Serif SC", serif; font-size: 15px; color: #2A2622; line-height: 1.5; } .mz-sh-desc { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.7; color: #9AA39D; } /* 链接必须可长按选中 —— 微信里复制不了时，这是最后一条路 */ .mz-sh-url { margin: 0; padding: 9px 10px; font-size: 11.5px; line-height: 1.6; color: #9C7C43; word-break: break-all; background: #FFF; border: 1px dashed #E2D6BC; border-radius: 8px; -webkit-user-select: all; user-select: all; } .mz-sh-invite { margin: 12px 0 16px; font-size: 12px; text-align: center; color: #9AA39D; } .mz-sh-invite b { color: #9C7C43; letter-spacing: 1px; } .mz-sh-invite a { color: #176F52; font-weight: 600; text-decoration: underline; } .mz-sh-copy { width: 100%; padding: 13px 0; font-size: 15px; color: #FFF; background: #176F52; border: 0; border-radius: 999px; cursor: pointer; } /* ============================================================ * 墨点不足 · 居中 + IP（20260714 重做） * ------------------------------------------------------------ * 原来是底部抽屉里的一块数字仪表盘：「本次需要 50 → 你当前有 12」。 * 那是柜台催缴的口气，不是书院。 * 现在由同门开口 —— 头像 + 一句合乎他性情的话，然后才是数字和去路。 * ============================================================ */ .dm-ink { border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100%; } .dm-ink::backdrop { background: rgba(28, 24, 18, .52); backdrop-filter: blur(2px); } .dm-ink-card { position: relative; width: min(340px, calc(100vw - 40px)); padding: 22px 20px 18px; border-radius: 16px; background: #F6EFE0; box-shadow: 0 24px 64px rgba(0, 0, 0, .3); animation: dmInkIn .24s cubic-bezier(.2, .9, .3, 1.15); } @keyframes dmInkIn { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } } .dm-ink-x { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border: 0; padding: 0; background: transparent; color: #B3A78F; font-size: 20px; line-height: 1; cursor: pointer; } /* IP 开口 */ .dm-ink-hero { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .dm-ink-ava { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #E6DFCC; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); } .dm-ink-say { flex: 1; min-width: 0; padding-top: 2px; } .dm-ink-who { display: inline-block; margin-bottom: 4px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 12px; letter-spacing: 2px; color: #9B2C2C; } .dm-ink-line { margin: 0; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 14px; line-height: 1.75; color: #2C2823; } /* 数字：需要 / 现有 / 差多少 */ .dm-ink-num { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; margin-bottom: 14px; border-radius: 10px; background: rgba(155, 44, 44, .05); border: 1px solid rgba(155, 44, 44, .12); } .dm-ink-num > div { flex: 1; text-align: center; } .dm-ink-num b { display: block; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 21px; line-height: 1.2; color: #2C2823; font-variant-numeric: tabular-nums; } .dm-ink-num span { display: block; margin-top: 2px; font-size: 10.5px; color: #9A9080; } .dm-ink-gap { flex: none; padding: 3px 9px; border-radius: 999px; background: #9B2C2C; color: #F6EFE0; font-style: normal; font-size: 11px; white-space: nowrap; } /* 三条去路 */ .dm-ink-ways { display: flex; flex-direction: column; gap: 8px; } .dm-ink-way { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid #DCD3C2; border-radius: 10px; background: #FFFBF2; cursor: pointer; text-align: left; } .dm-ink-way.is-primary { border-color: transparent; background: #2C2823; } .dm-ink-way.is-primary b, .dm-ink-way.is-primary em, .dm-ink-way.is-primary u { color: #F6EFE0; } .dm-ink-way.is-primary em { opacity: .72; } .dm-ink-way.is-primary i { background: rgba(246, 239, 224, .16); color: #F6EFE0; } .dm-ink-way i { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: rgba(155, 44, 44, .08); color: #9B2C2C; font-family: "Noto Serif SC", "Songti SC", serif; font-style: normal; font-size: 13px; } .dm-ink-way span { flex: 1; min-width: 0; } .dm-ink-way b { display: block; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 14px; color: #2C2823; } .dm-ink-way em { display: block; margin-top: 1px; font-style: normal; font-size: 11px; color: #9A9080; } .dm-ink-way u { flex: none; text-decoration: none; color: #B3A78F; font-size: 15px; } .dm-ink-way:active { opacity: .85; } /* ============================================================ * 登录 · 居中（20260714） * ------------------------------------------------------------ * 原来是底部抽屉。改居中的理由不只是「统一样式」： * 这个框现在还承担「拦截未登录操作」—— 用户正做着一件事被拦下来， * 框从底下滑上来像个附属面板，居中弹出才说明「这一步必须先过」。 * 登录完会自动回到他原来在做的事（见 mine-ui.js 的 requireLogin）。 * ============================================================ */ .dm-login { border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100%; } .dm-login::backdrop { background: rgba(28, 24, 18, .55); backdrop-filter: blur(2px); } .dm-login-card { position: relative; width: min(340px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow-y: auto; padding: 24px 20px 18px; border-radius: 16px; background: #F6EFE0; box-shadow: 0 24px 64px rgba(0, 0, 0, .32); animation: dmLoginIn .24s cubic-bezier(.2, .9, .3, 1.15); } @keyframes dmLoginIn { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } } .dm-login-x { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border: 0; padding: 0; background: transparent; color: #B3A78F; font-size: 20px; line-height: 1; cursor: pointer; } .dm-login-title { margin: 0 0 8px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 17px; letter-spacing: 4px; text-align: center; color: #2C2823; } /* 「为什么被拦下来」那句话 —— 一句「请先登录」等于没说 */ .dm-login-card .mz-login-tip { margin: 0 0 16px; font-size: 12.5px; line-height: 1.7; text-align: center; color: #8A8471; } /* ===== 账号绑定入口（20260718：手机号 ⇄ 微信） ===== * 个人设置里「绑定手机 / 绑定微信」两行的右侧状态： * 未绑 → 绿色「绑定」pill（描边取自 .mz-getcode 的品牌绿 #176F52） * 微信外浏览器 → 整行置灰 + 注明「需在微信中打开绑定」，不可点 * 绑定手机号弹层 #sheet-bind-phone 完全复用 .dm-login / .dm-login-card / * .mz-lin / .mz-lcode / .mz-getcode / .mz-lerr / .mz-login-go，无需新样式。 */ .mz-acct-row .mz-bind-pill { padding: 3px 12px; border: 1px solid #176F52; border-radius: 999px; color: #176F52; font-size: 12px; line-height: 1.4; } .mz-acct-row.is-off { cursor: default; opacity: .55; } .mz-acct-row.is-off i { display: none; /* 置灰行不显示「›」—— 没有可去的下一步 */ }