/* ============================================================================ * member.css — 会员中心 · V3 极简（Vercel-mono 气质） * 设计契约：/DESIGN.md（token / 字阶 / 间距 / 组件与状态 / 动效 / 无障碍） * 只在 /member/ 4 个页面加载（含 nav.inc.php 输出的站内 chrome 覆盖） * 原则：层级靠留白 + 1px 发丝线 + 明度台阶；零模糊阴影；金色只作强调 * ==========================================================================*/ /* ---- 1. Token（DESIGN.md §2 §3 §4 §6）------------------------------------ */ :root{ --canvas:#FFFFFF; --block:#FAFAFA; /* --block-2 已删（F 批：0 引用 ✓）*/ --ink:#0A0A0A; --ink-2:#525252; --ink-3:#737373; --icon:#8F8F8F; --line:#EAEAEA; --line-2:#D4D4D4; --line-input:#8A8A8A; --track:#EDEDED; --accent:#A0854A; --accent-ink:#7A6435; --accent-soft:#F6F1E5; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-8:32px; /* --sp-6 / --sp-10 已删（F 批：0 引用 ✓）*/ --r-ctrl:6px; --r-panel:8px; --dur:160ms; /* --dur-fast / --dur-slow 已删（F 批：0 引用 ✓）*/ --ease:ease; /* --ease-morph 已删（F 批：0 引用 ✓）*/ --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC", "Microsoft YaHei","Noto Sans SC",system-ui,"Segoe UI",sans-serif; --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono", Consolas,"Liberation Mono",monospace; } /* ---- 2. 基底 ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} ::selection{background:var(--accent-soft);color:var(--ink)} body{ background:var(--canvas); color:var(--ink); font-family:var(--font-sans); font-size:14px; line-height:1.6; text-wrap:pretty; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* 结构：站内 chrome（顶栏 / 子导航 / 页脚）通栏，会员内容列居中。 原因：站点顶栏桌面宽度需求 ≈545px，硬塞进 520px 窄列会横向溢出（实测 1280 下 app-wrap 溢出 133px）。 三者共用同一套 padding-inline 公式，保证品牌/页签与内容列左对齐。*/ .app-wrap{max-width:none; margin:0; padding:0 0 96px; min-height:100vh} .app-wrap > section{max-width:552px; margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px} .navbar,.sub-nav,.site-footer{ padding-left:max(16px, calc(50% - 260px))!important; padding-right:max(16px, calc(50% - 260px))!important; } @media (min-width:992px){ .app-wrap{padding-bottom:48px} .app-wrap > section{max-width:584px; padding-left:32px; padding-right:32px} } /* site.css §3 有一条「把 .app-wrap 直接子元素左右 padding 清零」的规则（特异度 6 个 class）， 它压过了上面的 .app-wrap > section{padding:0 16px} → 会员页每个 section 的留白被清零， 内容一路贴到屏幕边缘（手机右边缘看着像被切掉）。这里用同等特异度、放在 site.css 之后覆盖回来： 会员页的留白本来就设计在 section 上（.app-wrap 是全通栏的），所以必须还给它。*/ .app-wrap > *:not(.navbar):not(.nav-menu-mobile):not(.sub-nav):not(.bottom-nav):not(.site-footer){ max-width:552px; margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; } @media (min-width:992px){ .app-wrap > *:not(.navbar):not(.nav-menu-mobile):not(.sub-nav):not(.bottom-nav):not(.site-footer){ max-width:584px; padding-left:32px; padding-right:32px; } } /* ============================================================================ * 会员中心：桌面**加宽**（2026-09-19 用户定「方案 A」；两栏方案已否掉 ✗） * ---------------------------------------------------------------------------- * 现状：5 个会员页原来一律「永远手机宽」—— 内容列 552（默认）→ 584（≥992），宽屏两边大片空白 ✗。 * 现在：**≥768 → 720px；≥1200 → 900px**（结构与手机端布局都不动 ✓）。 * 影响面：`member.css` **只被** `member/{index,orders,promote,account,learning}.php` 引用（已逐文件核 ✓）， * 站上其它 60+ 页不加载它 → 改这里不会波及别处 ✓。 * ⚠️ ① 顶栏 / 子导航 / 页脚必须**一起改**：会员页的对齐口径是「chrome 内边距 == 内容列的内文本左沿」 * = `50% − 列宽/2 + 列内边距`。原 584/32 → `50% − 260px`；720/32 → `50% − 328px`；900/32 → `50% − 418px`。 * 不跟着改的话，判据 #4「顶栏品牌 / 内容列左沿重合」（≥1200）会红 ✗。 * ⚠️ ② ≥768 档必须**同时把列内边距补到 32** —— 契约 §4.1 就是「16（<768）/ 32（≥768）」； * 若不补，768–991 区间内文内距仍是 16，而上面的顶栏公式按 32 算 → 会错 16px ✗（本轮实测发现）。 * ⚠️ ③ 选择器与上文 `.app-wrap > *:not(…)×5`(0,6,0) **同特异度、但在后** → 稳定覆盖 ✓ * 手机（<768）：本块**一行都不生效** → 与改前逐像素相同 ✓ * ==========================================================================*/ /* ⚠️ 对齐口径（本块的核心，别改错）： 判据 #4 只在**内容列 ≥900px** 时启用（`audit_site.js`：`colW >= 900`），它比对的是 「顶栏品牌左沿」vs「内容列的**盒**左沿」（不是文字左沿）✗。 → 所以列一旦到 900，就必须：① chrome 左右内距 == 列盒左沿 `50% − 列宽/2`； ② 同时把 section 的左右内距归零（否则盒左沿与文字左沿差 32px，chrome 对上了盒、文字却错位 ✗）。 `.navbar` 必须用 `html body` 前缀提升特异度 —— 否则被下文 §4 的 `.navbar{padding:0 16px!important}`（在后、同特异度）压住（本轮实测踩到：#4 红 2 格）✗ */ @media (min-width:768px){ .app-wrap > *:not(.navbar):not(.nav-menu-mobile):not(.sub-nav):not(.bottom-nav):not(.site-footer){ max-width:720px; padding-left:0; padding-right:0; } html body .navbar, html body .sub-nav, html body .site-footer{ padding-left:max(16px, calc(50% - 360px))!important; padding-right:max(16px, calc(50% - 360px))!important; } } @media (min-width:1200px){ .app-wrap > *:not(.navbar):not(.nav-menu-mobile):not(.sub-nav):not(.bottom-nav):not(.site-footer){ max-width:900px; } html body .navbar, html body .sub-nav, html body .site-footer{ padding-left:max(16px, calc(50% - 450px))!important; padding-right:max(16px, calc(50% - 450px))!important; } } /* PWA「添加到桌面」浮条：`site.css` 按**站点 1020 列**给它定位（`left:calc((100%-1020px)/2)`）， 会员页列是 720/900 → 判据 #4 会判它错位（实测 125 vs 185）→ 这里按会员列重算 ✓ ⚠️ **只在 ≥1100 覆盖**：`site.css` 那段注释写明 ≥768~1100 不能动（动了会把 `.fav-btn` 顶过 30px 豁免线 → #18 红 ✗） */ @media (min-width:1100px){ html body #pwaBar{ left:calc((100% - 720px) / 2); right:calc((100% - 720px) / 2); } } @media (min-width:1200px){ html body #pwaBar{ left:calc((100% - 900px) / 2); right:calc((100% - 900px) / 2); } } a{color:inherit} :where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{ outline:2px solid var(--accent-ink); outline-offset:1px; border-radius:var(--r-ctrl); } /* ---- 3. 图标（inline SVG，24 网格 1.5px 描边，DESIGN.md §5）------------- */ .ic{width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round} .ic-sm{width:15px; height:15px} .n-icon{display:flex; line-height:0} .n-icon .ic{width:22px; height:22px} /* ---- 4. 站内 chrome：顶栏 / 子导航 / 底栏 / 页脚 ------------------------ */ /* 顶栏：54px、画布 92% + blur、底部发丝线（对齐 DESIGN.md §5 #1） */ .navbar{ height:54px!important; min-height:54px!important; padding:0 16px!important; align-items:center; background:rgba(255,255,255,.92)!important; -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); box-shadow:none!important; } .navbar .navbar-brand{ display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0 8px 0 0; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ds-brand); } .navbar .nav-link{ display:inline-flex; align-items:center; min-height:44px; padding:0 5px; font-size:12.5px; font-weight:550; letter-spacing:0; transition:color var(--dur) var(--ease); } .navbar .nav-dd-menu{ background:var(--canvas); border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:0 8px 24px rgba(10,10,10,.06); padding:4px; min-width:150px; } .navbar .nav-dd-menu a{ display:flex; align-items:center; min-height:44px; padding:0 12px; font-size:13px; font-weight:400; color:var(--ink-2); border-radius:var(--r-ctrl); } .navbar .nav-dd-menu a:hover{background:var(--block); color:var(--ink)} .navbar .btn,.navbar .btn-sm{min-height:36px; padding:0 12px; font-size:12.5px} .navbar #authStatus{font-size:11.5px!important; color:var(--ink-3)} .navbar #authStatus a{color:var(--accent-ink); font-weight:650; text-decoration:none} /* 汉堡 / 抽屉关闭：字符换成 SVG（JS 注入），并去掉按钮本身的重装饰 */ button.nav-menu-mobile{ min-width:44px; min-height:44px; height:44px!important; padding:0; display:inline-flex; align-items:center; justify-content:center; line-height:0; background:var(--canvas); border:1px solid var(--line-2); border-radius:var(--r-ctrl); color:var(--ink); } button.nav-menu-mobile:hover{background:var(--block)} .nav-drawer-x{ min-width:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; line-height:0; background:transparent; border:0; color:var(--ink); } #navMenu{background:var(--canvas); border-left:1px solid var(--line); box-shadow:none} .nav-drawer-head{border-bottom:1px solid var(--line)} #navMenu a{color:var(--ink-2)!important; font-size:13px!important; font-weight:550!important} #navMenu a:hover{background:var(--block); color:var(--ink)} /* 子导航（nav.inc.php 输出的 4 个页签）→ DESIGN.md §5 #2 */ .sub-nav{ display:flex; flex-wrap:nowrap; align-items:center; gap:18px; overflow-x:auto; overscroll-behavior-x:contain; background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0; margin:0; box-shadow:none; position:sticky; top:54px; z-index:19; } .sub-nav a{ display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:0; height:44px; padding:0; border-radius:0; font-size:13px; font-weight:400; color:var(--ink-3); text-decoration:none; white-space:nowrap; position:relative; transition:color var(--dur) var(--ease); } .sub-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:transparent; transition:background var(--dur) var(--ease); } .sub-nav a:hover{background:transparent; color:var(--ink)} .sub-nav a.on,.sub-nav a.active,.sub-nav a[data-active="1"]{ background:transparent; color:var(--ink); font-weight:650; } .sub-nav a.on::after,.sub-nav a.active::after,.sub-nav a[data-active="1"]::after{background:var(--accent)} /* 底栏 → DESIGN.md §5 #13 */ .bottom-nav{ display:grid; grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--line); box-shadow:none; padding-bottom:env(safe-area-inset-bottom,0); } .bottom-nav a{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:56px; padding:9px 0 10px; font-size:10px; letter-spacing:.04em; color:var(--ink-3); text-decoration:none; transition:color var(--dur) var(--ease); } .bottom-nav a::before{ content:''; position:absolute; top:-1px; left:0; right:0; height:1.5px; background:transparent; transition:background var(--dur) var(--ease); } .bottom-nav a.on{color:var(--ink); font-weight:700} .bottom-nav a.on::before{background:var(--accent)} .bottom-nav a.on .ic{color:var(--accent-ink)} /* 页脚：细排版，别抢戏 */ .site-footer{color:var(--ink-3); font-size:11.5px; border-top:1px solid var(--line); margin-top:var(--sp-8); padding-top:var(--sp-4)} .site-footer a{color:var(--ink-3); text-decoration:none} .site-footer a:hover{color:var(--ink)} /* ---- 5. 排版原始件 ------------------------------------------------------ */ h1{font-size:20px; line-height:1.25; font-weight:650; letter-spacing:-.02em; margin:0; text-wrap:balance} h3{font-size:15px; line-height:1.4; font-weight:650; letter-spacing:-.01em; margin:0 0 6px} .section{padding:var(--sp-5) 0; border-top:1px solid var(--line); margin:0} /* 区块小标签：全大写式的极宽字距 overline（中文同样有效）*/ .section h2,.overline{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 var(--sp-3); font-size:10.5px; line-height:1; font-weight:700; letter-spacing:.16em; color:var(--ink-3); text-transform:none; } .section h2 .sub,.section p.sub,.panel .sub{ font-size:11.5px; font-weight:400; letter-spacing:0; color:var(--ink-3); } .panel{background:var(--block); border:1px solid var(--line); border-radius:var(--r-panel); padding:var(--sp-4); margin:0} .panel > h2:first-child{margin-top:0} .note{font-size:11.5px; color:var(--ink-3)} /* ---- 6. 按钮（DESIGN.md §5 #3/#4）--------------------------------------- */ .btn,.btn-sm{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border-radius:var(--r-ctrl); font-family:var(--font-sans); font-size:13px; font-weight:650; letter-spacing:.005em; cursor:pointer; text-decoration:none; border:1px solid transparent; transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 90ms var(--ease); } .btn:active,.btn-sm:active{transform:scale(.98)} .btn-primary,.btn-primary:focus{ background-color:var(--ink); border-color:var(--ink); color:var(--ds-canvas); } .btn-primary:hover{background-color:var(--ds-ink-deep-2); border-color:var(--ds-ink-deep-2); color:var(--ds-canvas)} .btn-outline-primary{ background-color:var(--canvas); border-color:var(--line-2); color:var(--ink); } .btn-outline-primary:hover{background-color:var(--block); border-color:var(--line-2); color:var(--ink)} .btn-ghost{background-color:var(--canvas); border-color:var(--line-2); color:var(--ink)} .btn-ghost:hover{background-color:var(--block)} .btn-block{display:flex; width:100%} .btn-row{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4)} .btn-row .btn{flex:1 1 auto} /* 站点 site.css 里为「旧深色 hero」留了 ID 级颜色规则（如 #mcPhone 是金浅色）， 在白色画布上对比度只有 ~1.4:1。ID 优先级高于类，必须在同优先级上覆盖。 下面几条同理：都是旧暖色系遗留 + 行内 style，实测对比度不足 4.5:1。*/ #mcPhone{color:inherit; font-style:normal} #phraseScene{color:var(--ink-3)!important; font-size:inherit} .navbar .navbar-brand em{color:var(--accent-ink)!important} /* 品牌点：金 #A0854A 只有 3.53:1 */ .expire-warn a{color:var(--accent-ink)!important} /* JS 生成的行内玫瑰色 3.64:1 */ /* 身份区（原深色 hero → 平铺身份区）--------------------------------------- */ .hero-brand{ background:transparent; color:var(--ink); border-radius:0; box-shadow:none; padding:var(--sp-5) 0 var(--sp-4); position:static; overflow:visible; } .hero-brand::before,.hero-brand::after{display:none} .hero-brand .slogan{font-size:20px; line-height:1.25; font-weight:650; letter-spacing:-.02em; color:var(--ink); text-wrap:balance} .hero-brand .slogan em{font-style:normal} .hero-brand .desc{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-2); font-size:11.5px; color:var(--ink-3); line-height:1.5} .hero-brand #memberBody p,.hero-brand #memberBody div{color:var(--ink-2)!important} .hero-brand #memberBody b{color:var(--ink)!important} #mcPhoneSub{font-size:11.5px; color:var(--ink-3)} /* 2026-09-18 A-7：已移入 .hero-brand .desc 的 flex 行 → 去掉原 margin-top ✓ */ /* 2026-09-18 A-8：快捷入口 4 → 6 张（加了「我的 AI 记录」「我的收藏」）—— 6 张按 4 列会掉成「4+2」，右下两格空着但边框还在 → 像没画完的表 ✗；改 3 列 = 整齐的 2×3 ✓ （沿用 `#guestCard .tool-grid` 三列先例；卡片自带 right/bottom 边框，末列边框即外框，无需 nth-child 补 ✗） */ #quickCard .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))} /* 同上：工具箱 8 → 6 张（撤掉与快捷入口重复的「AI 记录」「推广」）→ 也改 3 列 = 2×3 ✓ 否则 6 张按 4 列会掉成「4+2」，右下两格空着但没边框 → 像没画完 ✗ */ #toolCard .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))} /* 2026-09-18 A-7：额度芯片在手机端改 2×2 —— 4 枚挤一行会掉成「3+1」，第 4 枚孤零零一行很难看 ✗ 桌面端 d-flex 一行刚好铺满整行 ✓，故只在 ≤479.98px 换 grid；.d-flex 自带 !important，必须压过它 ✓ */ @media (max-width:479.98px){ .mc-quota{display:grid!important; grid-template-columns:1fr 1fr; gap:0} .mc-quota .stat-chip{padding:var(--sp-3) 0} .mc-quota .stat-chip + .stat-chip{border-left:0; padding-left:0} .mc-quota .stat-chip:nth-child(even){border-left:1px solid var(--line); padding-left:var(--sp-4)} .mc-quota .stat-chip:nth-child(n+3){border-top:1px solid var(--line); padding-top:var(--sp-3)} } #mcActions,#mcActions:not(:empty){display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4)} #memberCard{margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line)} /* 会员徽标：直角细框，不用填充色块（DESIGN.md §5 #5）*/ .big-flag{display:inline-flex; align-items:center; padding:2px 9px; border:1px solid var(--line-2); border-radius:0; background:transparent; font-size:10.5px; font-weight:650; letter-spacing:.04em; color:var(--ink-2); vertical-align:2px; white-space:nowrap} .flag-vip{color:var(--accent-ink); border-color:var(--accent)} .flag-no{color:var(--ink-3); border-color:var(--line-2)} .flag-expired{color:var(--ink-2); border-color:var(--line-2)} /* JS 生成的 hero 内 CTA（.mc-cta / .mc-cta.ghost）*/ .mc-cta{ display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1 1 auto; min-width:0; min-height:44px; padding:0 16px; background:var(--ink); color:var(--ds-canvas); font-size:13px; font-weight:650; text-decoration:none; border:1px solid var(--ink); border-radius:var(--r-ctrl); transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 90ms var(--ease); } .mc-cta:hover{background:var(--ds-ink-deep-2); color:var(--ds-canvas)} .mc-cta:active{transform:scale(.98)} .mc-cta.ghost{background:var(--canvas); color:var(--ink); border-color:var(--line-2)} .mc-cta.ghost:hover{background:var(--block); border-color:var(--line-2); color:var(--ink)} /* 权益清单：发丝行 + 图标，不再是米色圆角块 */ .benefit-list{display:grid; grid-template-columns:1fr; gap:0; margin-top:var(--sp-3)} .benefit-item{display:flex; gap:var(--sp-2); align-items:center; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 0; font-size:13px; color:var(--ink-2); min-height:44px} .benefit-item:last-child{border-bottom:0} .benefit-item b{color:var(--ink); font-weight:650} .benefit-item.locked{opacity:1; color:var(--ink-3)} .benefit-item .b-ic{display:flex; line-height:0; color:var(--icon)} .benefit-item .b-ic .ic{width:16px; height:16px} /* 到期提醒：不用红色块，用金色左规 */ .expire-warn{background:var(--block); border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:0; padding:var(--sp-3) var(--sp-4); font-size:11.5px; font-weight:400; line-height:1.7; color:var(--ink-2); margin-top:var(--sp-3)} .expire-warn a{color:var(--accent-ink); font-weight:650; text-decoration:none} /* ---- 8. 今日行动 / 金句 ------------------------------------------------- */ .quote-card{background:var(--block); border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:0; padding:var(--sp-4); margin-top:var(--sp-4)} .q-label{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:650; letter-spacing:.06em; color:var(--ink-3)} .q-text{margin-top:7px; font-size:14px; line-height:1.8; color:var(--ink); text-wrap:pretty} /* ---- 9. 训练数据：大数字 + 2px 刻度 + 5 格发丝表 ------------------------- */ .stat-flex{display:flex; flex-direction:column; gap:0; margin-top:var(--sp-1)} .ring-wrap{display:flex; align-items:baseline; gap:10px; text-align:left; flex:none} .ring{width:auto; height:auto; border-radius:0; background:none; display:block; position:static; align-items:initial; justify-content:initial} .ring::before{display:none} .ring b{position:static; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:40px; line-height:1; font-weight:500; letter-spacing:-.03em; color:var(--ink)} .ring-label{display:block; margin:0; font-size:11.5px; color:var(--ink-3)} /* 进度刻度：--pct 由 JS 写在 #trainRing 上，子元素继承读取（无需改 JS 结构）*/ .meter{height:2px; background:var(--track); margin-top:var(--sp-3); overflow:hidden} .meter i{display:block; height:100%; background:var(--accent); width:calc(var(--pct,0) * 1%)} .stat-row{display:grid; gap:0; margin-top:var(--sp-4); border-top:1px solid var(--line); padding-top:var(--sp-3)} .stat-row-5{grid-template-columns:repeat(5,minmax(0,1fr))} .stat-row-3{grid-template-columns:repeat(3,minmax(0,1fr))} .stat-box{background:none; border-radius:0; padding:0 10px 0 0; text-align:left; min-width:0; transition:none} .stat-box + .stat-box{border-left:1px solid var(--line); padding-left:10px} .stat-box b{display:block; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:17px; line-height:1.2; font-weight:500; letter-spacing:-.02em; color:var(--ink)} .stat-box span{display:block; margin-top:3px; font-size:10px; line-height:1.3; color:var(--ink-3); letter-spacing:.02em} .stat-box-wide{grid-column:1 / -1; border-left:0!important; padding-left:0!important; border-top:1px solid var(--line); margin-top:var(--sp-3); padding-top:var(--sp-3)} .stat-mini{font-size:11.5px; color:var(--ink-3); margin-top:10px} .stat-mini b{color:var(--accent-ink)} /* ---- 10. 学习地图：发丝行 + 2px 刻度 ------------------------------------ */ .phase-bar{margin:0; padding:var(--sp-3) 0; border-bottom:1px solid var(--line)} .phase-bar:last-child{border-bottom:0; padding-bottom:2px} .phase-bar .pb-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; font-size:13px; font-weight:550; color:var(--ink)} /* span1 = 阶段名（主）；span2 = 1/6 · 17%（次，等宽）—— JS 生成结构决定的 */ .phase-bar .pb-head span:first-child{font-size:13px; font-weight:550; color:var(--ink)} .phase-bar .pb-head b{font-family:var(--font-sans); font-size:13px; font-weight:550; color:var(--ink)} .phase-bar .pb-head span:last-child{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:11.5px; font-weight:400; color:var(--ink-3)} .phase-bar .pb-track{height:2px; background:var(--track); border-radius:0; overflow:hidden} .phase-bar .pb-fill{display:block; height:100%; background:var(--accent); border-radius:0} .week-report{background:var(--block); border:1px solid var(--line); border-radius:0; padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-4); font-size:11.5px; line-height:1.7; color:var(--ink-2)} /* ---- 11. 30 天日历：1px 表格网格（DESIGN.md §5 #11）---------------------- */ .day-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-right:0; border-bottom:0} .day-cell{min-height:44px; display:flex; align-items:center; justify-content:center; aspect-ratio:auto; border-radius:0; background:var(--canvas); border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:11.5px; font-weight:400; color:var(--ink-2); transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease)} .day-cell:hover{background:var(--block)} .day-cell.done{background:var(--ink); color:var(--ds-canvas); font-weight:600} .day-cell.today{outline:none; box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent-ink); font-weight:700} .day-cell a{width:100%; height:100%; min-height:44px; display:flex; align-items:center; justify-content:center; text-decoration:none; color:inherit; font:inherit} .day-cell.is-empty{cursor:default} .day-cell.is-empty:hover{background:var(--canvas)} /* 序号模型（2026-09-19）：未到的序号（i > camp_day）只压暗**底/边**，不动文字色 —— 判据 #2 要求数字对比度 ≥4.5:1；数字在 .day-num 里自带底/字（site.css token，7.5:1 ✓）， 把格子底压成 --block 即可弱化，**不要**用 opacity 或更浅的字色去压文字 ✗ */ .day-cell.future{background:var(--block); border-color:var(--line)} /* 注：camp.php 的 `.day-done-btn:disabled` 规则在 site.css（camp.php 不加载本文件 ✗），别往这里放 */ /* ---- 12. 成就：2×2 发丝表 ----------------------------------------------- */ .badge-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:var(--sp-4); border:1px solid var(--line); border-right:0; border-bottom:0} .achievement{display:flex; gap:10px; align-items:flex-start; text-align:left; background:var(--canvas); border-radius:0; padding:var(--sp-3); min-height:66px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)} .achievement .a-icon{display:flex; line-height:0; color:var(--ink); flex:none} .achievement .a-icon .ic{width:20px; height:20px} .achievement .a-name{margin:0; font-size:13px; line-height:1.3; font-weight:650; color:var(--ink)} .achievement .a-desc{margin-top:3px; font-size:10px; line-height:1.35; color:var(--ink-3)} .achievement.locked{opacity:1; filter:none} .achievement.locked .a-icon{color:var(--line-2)} .achievement.locked .a-name{color:var(--ink-3); font-weight:550} /* 徽章变可点（2026-09-20 档 3）： 版本去掉下划线、继承色 */ a.achievement{ text-decoration:none; color:inherit; } /* 进度：未达成金色强调「还差 N/M」；达成用成功色 ✓ */ .achievement .a-prog{ font-weight:700; color:var(--ds-accent-ink); } .achievement:not(.locked) .a-prog{ color:var(--ds-success-ink); } /* 首次解锁弹窗（2026-09-20 档 3） */ .bd-mask{ position:fixed; inset:0; z-index:1090; display:flex; align-items:center; justify-content:center; background:rgba(20,18,30,.55); padding:16px; } .bd-box{ width:min(360px,92vw); background:var(--canvas); border:1px solid var(--line); border-radius:16px; padding:20px; text-align:center; } .bd-emoji{ display:flex; justify-content:center; line-height:0; color:var(--ds-accent-ink); } .bd-emoji .ic{ width:34px; height:34px; } .bd-box>b{ display:block; margin:6px 0 12px; font-size:16px; color:var(--ink); } .bd-item{ display:flex; gap:10px; align-items:center; text-align:left; padding:10px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; } .bd-ic{ display:flex; line-height:0; color:var(--ds-accent-ink); flex:none; } .bd-ic .ic{ width:22px; height:22px; } .bd-tx b{ display:block; font-size:13px; color:var(--ink); } .bd-d{ font-size:11.5px; color:var(--ink-3); } .bd-btn{ margin-top:6px; min-height:44px; padding:0 22px; border:none; border-radius:22px; background:var(--ds-accent-ink); color:var(--ds-canvas); font-size:14px; font-weight:800; font-family:inherit; cursor:pointer; } /* ---- 13. 表格（复习计划 / 团队 / 榜单）---------------------------------- */ table{width:100%; border-collapse:collapse; margin:0; font-size:13px} th,td{padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top} th{background:transparent!important; color:var(--ink-3)!important; font-size:10.5px; font-weight:700; letter-spacing:.08em; white-space:nowrap} table tr:nth-child(even) td{background:transparent} .review-table{width:100%; border-collapse:collapse; font-size:13px; margin:0} .review-table th{text-align:left; padding:10px 8px; color:var(--ink-3); border-bottom:1px solid var(--line); font-size:10.5px; font-weight:700; letter-spacing:.08em} .review-table td{padding:10px 8px; border-bottom:1px solid var(--line)} .review-table a{color:var(--accent-ink); font-weight:650; text-decoration:none} .table-responsive{margin:0; border:0} /* ---- 14. 标签 / 提示 / 空态 -------------------------------------------- */ .tag{display:inline-flex; align-items:center; font-size:10.5px; font-weight:650; letter-spacing:.04em; padding:2px 7px; border:1px solid var(--line-2); border-radius:0; background:transparent; color:var(--ink-3); white-space:nowrap} .tag.green{color:var(--accent-ink); border-color:var(--accent)} .tag.gray{color:var(--ink-3); border-color:var(--line-2)} .tag.gold{color:var(--accent-ink); border-color:var(--accent)} .msg{font-size:13px; margin-top:10px; color:var(--ink); line-height:1.6} .msg.ok{color:var(--accent-ink)} .msg:empty{display:none; margin:0} .empty{color:var(--ink-3); font-size:13px; padding:var(--sp-4) 0; text-align:center} /* ---- 15. 非会员开通（原深色 banner → 明度台阶块 + 1px 价格表）----------- */ .banner-section{display:block; padding:var(--sp-5) 0; border-top:1px solid var(--line)} .banner-card{background:var(--block); border:1px solid var(--line); border-radius:var(--r-panel); padding:var(--sp-4); color:var(--ink); margin:0} .banner-card.bg-camp{background:var(--block)} .banner-card h3{color:var(--ink)} .banner-card p{margin:0; font-size:11.5px; line-height:1.7; color:var(--ink-2)} .bc-tag{display:block; margin-bottom:var(--sp-2); font-size:10.5px; font-weight:700; letter-spacing:.16em; color:var(--ink-3)} .upsell-plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:var(--sp-4); border:1px solid var(--line)} .upsell-plan{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:66px; padding:var(--sp-3) 6px; background:transparent; border-radius:0; border:0; border-right:1px solid var(--line); text-decoration:none; color:var(--ink); transition:background-color var(--dur) var(--ease)} .upsell-plan:last-child{border-right:0} .upsell-plan:hover{background:var(--block)} .upsell-plan b{display:block; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:20px; line-height:1.1; font-weight:500; letter-spacing:-.02em; color:var(--ink)} .upsell-plan span{display:block; font-size:10px; line-height:1.3; color:var(--ink-3); letter-spacing:.02em; text-align:center} .upsell-plan.hot{background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent)} .upsell-plan.hot:hover{background:var(--accent-soft)} .upsell-plan .hot-tag{display:inline-block; margin:0 0 2px; padding:0; border-radius:0; background:transparent; color:var(--accent-ink); font-size:10px; font-weight:650; letter-spacing:.06em} /* ---- 16. 工具箱：4 列 1px 表格网格（DESIGN.md §5 #12）------------------- */ .tool-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-right:0; border-bottom:0} .tool-card{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; min-height:82px; padding:var(--sp-3) 4px; background:var(--canvas); border-radius:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; color:var(--icon); text-align:center; transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease)} .tool-card:hover{background:var(--block); color:var(--accent-ink)} .tool-card .t-icon{display:flex; line-height:0; font-size:0; color:inherit} .tool-card .t-icon .ic{width:24px; height:24px} .tool-card .t-name{display:block; margin:0; font-size:11.5px; font-weight:650; letter-spacing:.02em; color:var(--ink)} .tool-card .t-desc{display:block; font-size:10px; line-height:1.3; color:var(--ink-3)} #guestCard .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #guestCard .tool-card{border-right:1px solid var(--line)} #guestCard .tool-card:nth-child(3n){border-right:0} /* ---- 17. 表单（DESIGN.md §5 #16；表单边界用 3.45:1 的 --line-input）---- */ .acct-field{margin-bottom:var(--sp-3)} .acct-field label{display:block; margin-bottom:6px; font-size:11.5px; font-weight:650; letter-spacing:.02em; color:var(--ink-3)} .acct-input,.form-control{ width:100%; max-width:100%; min-height:44px; padding:10px 12px; font-family:var(--font-sans); font-size:16px; line-height:1.4; color:var(--ink); background:var(--canvas); border:1px solid var(--line-input); border-radius:var(--r-ctrl); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .acct-input:focus,.form-control:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); } .acct-input:focus-visible,.form-control:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:1px; } .acct-input::placeholder,.form-control::placeholder{color:var(--icon)} .acct-code-row{display:flex; gap:var(--sp-2); align-items:stretch} .acct-code-row input{flex:1 1 0; min-width:0} .acct-code-btn{flex:0 0 auto; min-height:44px; white-space:nowrap} .acct-save{min-height:44px; width:100%} /* ---- 18. 账号行（键值对）----------------------------------------------- */ .acct-row{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:var(--sp-3) 0; border-bottom:1px solid var(--line); font-size:13px} .acct-row:last-child{border-bottom:0} .acct-row .k{color:var(--ink-3); font-size:13px} .acct-row .v{color:var(--ink); font-weight:400; text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:11.5px; word-break:break-all} .acct-row .v.name{font-family:var(--font-sans); font-size:13px; font-weight:650} .acct-row.edit{grid-template-columns:1fr auto auto} .acct-row .link-edit{display:inline-flex; align-items:center; min-height:44px; padding:0 2px; color:var(--accent-ink); font-size:13px; font-weight:650; text-decoration:none} .acct-row .link-edit:hover{text-decoration:underline} details summary{display:flex; align-items:center; min-height:44px; cursor:pointer; font-size:13px; font-weight:650; color:var(--ink-2); list-style:none} details summary::-webkit-details-marker{display:none} details summary:hover{color:var(--ink)} /* ---- 18b. 补充原始件（渐进式揭示：大数字、推广链接、表单分组、间距）--- */ /* 大数字 + 单位 + 刻度（--pct 由 JS 写在容器上，刻度条作为子元素继承读取）*/ .figure{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px} .figure .num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:40px; line-height:1; font-weight:500; letter-spacing:-.03em; color:var(--ink)} .figure .unit{font-size:11.5px; color:var(--ink-3); letter-spacing:.04em} .figure .meter{flex:1 1 100%; height:2px; background:var(--track); margin-top:var(--sp-3); overflow:hidden} .figure .meter i{display:block; height:100%; background:var(--accent); width:calc(var(--pct,0) * 1%)} /* 推广链接：等宽小字，长串必须可断行，绝不撑破栅格 */ .stat-box b.url{font-family:var(--font-mono); font-size:11.5px; font-weight:400; line-height:1.5; letter-spacing:0; color:var(--ink-2); word-break:break-all; margin-top:var(--sp-1)} .stat-box-wide .btn{margin-top:var(--sp-3); align-self:flex-start} /* 表单分组块（明度台阶 + 发丝线；不是「卡片」）*/ .form-box{background:var(--block); border:1px solid var(--line); border-radius:var(--r-panel); padding:var(--sp-4); margin-top:var(--sp-4)} /* 子区块小标题（带上方间距的 overline）*/ .overline.sub{margin:var(--sp-5) 0 var(--sp-3)} /* 标题内嵌数字（完成率 / 连续打卡）*/ .section h2 .sub b{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:650; color:var(--ink-2)} /* 空态里的链接 */ .empty a{color:var(--accent-ink); font-weight:650; text-decoration:none} .empty a:hover{text-decoration:underline} /* 少量间距工具（替代行内 style）*/ .mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} /* ---- 19. 动效收尾（DESIGN.md §6）--------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important} } /* ============================================================================ * 20. 学习数据明细（2026-09-19 用户提出：数字有，但看不出「是哪些」） * ---------------------------------------------------------------------------- * ① `.stat-box` 由
改为