/* ============================================================ styles-v2.css · 新视觉基底（V2 设计系统） ------------------------------------------------------------ - 与现有 styles.css 完全并存：未引入这个文件的旧页面零影响。 - 新页面在 里只加载 styles-v2.css（不要再加旧的）。 - 所有新类名带 -v2 后缀 / v2- 前缀，避免与旧样式撞车。 - 调性：深空黑底 + 暖橙发光 + 编辑式衬线大标题 + HUD 等宽小标签 ============================================================ */ /* 现代衬线 Fraunces (笔画末端带书法装饰) + 中性 Inter + HUD 等宽 Space Mono 外加 Noto Sans SC / Noto Serif SC 撑住中文 */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Serif+SC:wght@400;500;700&display=swap'); /* ------------- 设计 token ------------- */ :root { /* 背景层级 (近黑但带一点暖灰，不是纯黑) */ --v2-bg: #0A0A0E; --v2-bg-1: #14141A; /* 浅一档：卡片底 */ --v2-bg-2: #1E1E26; /* 突出层 */ --v2-bg-3: #2A2A33; /* 边框近色 */ /* 主色：暖橙 (在暗底里几乎发光) */ --v2-orange: #FF7849; --v2-orange-soft: #FFB089; --v2-orange-deep: #E55A2B; --v2-orange-glow: rgba(255, 120, 73, 0.30); --v2-orange-tint: rgba(255, 120, 73, 0.10); /* 附属色 (取自参考图里的卡片色块) */ --v2-mint: #A8E6D0; --v2-coral: #F4A38B; --v2-amber: #FFC857; --v2-cream: #F1ECE0; /* 文本层级 (暖白系) */ --v2-fg: #F5F1EA; /* 主文本 */ --v2-fg-2: #B5B0A8; /* 次文本 */ --v2-fg-3: #6B6660; /* 辅助 */ --v2-fg-4: #3D3833; /* 极暗 */ /* 边线 (在暗底上用半透明白做层次) */ --v2-line: rgba(255, 255, 255, 0.08); --v2-line-2: rgba(255, 255, 255, 0.14); --v2-line-strong: rgba(255, 255, 255, 0.28); /* 字体栈：中文走 Noto Sans / Noto Serif，英文走 Fraunces / Inter */ --v2-font-display: 'Fraunces', 'Noto Serif SC', 'Source Han Serif SC', serif; --v2-font-body: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif; --v2-font-mono: 'Space Mono', 'JetBrains Mono', Consolas, monospace; /* 间距体系 (4 的倍数) */ --v2-s-1: 4px; --v2-s-2: 8px; --v2-s-3: 12px; --v2-s-4: 16px; --v2-s-5: 24px; --v2-s-6: 32px; --v2-s-7: 48px; --v2-s-8: 64px; --v2-s-9: 96px; --v2-s-10: 128px; --v2-s-11: 160px; /* 圆角 */ --v2-r-sm: 8px; --v2-r: 14px; --v2-r-lg: 20px; --v2-r-xl: 28px; --v2-r-pill: 999px; /* 容器宽度 */ --v2-container: 1440px; --v2-pad: clamp(20px, 5vw, 64px); /* 缓动 */ --v2-ease: cubic-bezier(0.22, 1, 0.36, 1); /* 飘逸出场 */ --v2-ease-power: cubic-bezier(0.65, 0, 0.35, 1); } /* ------------- reset ------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--v2-bg); color: var(--v2-fg); font-family: var(--v2-font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; } ::selection { background: var(--v2-orange); color: var(--v2-bg); } /* ------------- 排版尺度 ------------- */ .v2-display { /* 超大编辑式标题 */ font-family: var(--v2-font-display); font-weight: 600; line-height: 0.96; letter-spacing: -0.025em; font-size: clamp(56px, 9vw, 144px); margin: 0; } .v2-display-md { font-family: var(--v2-font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; font-size: clamp(40px, 6vw, 96px); margin: 0; } .v2-h1 { font-family: var(--v2-font-display); font-weight: 600; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .v2-h2 { font-family: var(--v2-font-display); font-weight: 600; font-size: clamp(24px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.01em; margin: 0; } .v2-h3 { font-family: var(--v2-font-body); font-weight: 600; font-size: 20px; line-height: 1.3; margin: 0; } .v2-body { font-size: 16px; line-height: 1.65; color: var(--v2-fg-2); margin: 0; } .v2-body-lg { font-size: 18px; line-height: 1.6; color: var(--v2-fg); margin: 0; } .v2-body-sm { font-size: 14px; line-height: 1.5; color: var(--v2-fg-2); margin: 0; } /* 小型大写 mono kicker：放在大标题上方，给"工程化"质感 */ .v2-kicker { font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v2-orange); } .v2-kicker-muted { font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v2-fg-3); } /* HUD 标签：[BRACKET] 风格的工程化注释 */ .v2-hud { font-family: var(--v2-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-fg-2); display: inline-flex; align-items: center; gap: 6px; } .v2-hud::before { content: '[ '; color: var(--v2-orange); } .v2-hud::after { content: ' ]'; color: var(--v2-orange); } /* ------------- 容器 / 网格 ------------- */ .v2-container { max-width: var(--v2-container); margin: 0 auto; padding-left: var(--v2-pad); padding-right: var(--v2-pad); } .v2-section { padding: var(--v2-s-10) 0; position: relative; } .v2-section-sm { padding: var(--v2-s-9) 0; position: relative; } .v2-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--v2-s-5); } .v2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--v2-s-5); } .v2-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--v2-s-4); } @media (max-width: 980px) { .v2-grid-3, .v2-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .v2-grid-2, .v2-grid-3, .v2-grid-4 { grid-template-columns: 1fr; } } /* ------------- 顶部导航 (浮窗胶囊式 + 数字编号 + 严格三栏) ------------- */ .v2-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; /* 左右两栏自动撑开，中栏自动居中 */ align-items: center; padding: 18px var(--v2-pad); background: linear-gradient(180deg, rgba(10,10,14,.85), rgba(10,10,14,0)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .v2-nav > .v2-brand { justify-self: start; } .v2-nav > .v2-nav-links { justify-self: center; } .v2-nav > .v2-nav-actions { justify-self: end; } .v2-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--v2-font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--v2-fg); } .v2-brand-mark { width: 14px; height: 14px; transform: rotate(45deg); border: 1.5px solid var(--v2-orange); } .v2-nav-links { display: inline-flex; align-items: center; gap: 4px; padding: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill); backdrop-filter: blur(8px); } .v2-nav-link { font-family: var(--v2-font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--v2-fg-3); padding: 7px 14px; border-radius: var(--v2-r-pill); transition: color .25s var(--v2-ease), background .25s var(--v2-ease); display: inline-flex; align-items: center; gap: 5px; } .v2-nav-link:hover { color: var(--v2-fg); } .v2-nav-link.active { background: var(--v2-fg); color: var(--v2-bg); } .v2-nav-link .num { font-size: 10px; opacity: 0.55; } .v2-nav-link.active .num { opacity: 0.7; } .v2-nav-right { display: inline-flex; align-items: center; gap: 16px; font-family: var(--v2-font-mono); font-size: 11px; color: var(--v2-fg-3); letter-spacing: 0.06em; } /* 导航右侧操作区: "写新内容" 按钮 + 登录/用户名 */ .v2-nav-actions { display: inline-flex; align-items: center; gap: 12px; } /* "＋ 写新内容" 主按钮 + 下拉菜单 */ .v2-create-wrap { position: relative; } .v2-create-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--v2-font-body); font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: var(--v2-r-pill); background: var(--v2-orange); color: var(--v2-bg); border: none; cursor: pointer; box-shadow: 0 0 0 1px var(--v2-orange-deep), 0 6px 20px var(--v2-orange-glow); transition: all .25s var(--v2-ease); } .v2-create-btn:hover { background: var(--v2-orange-soft); box-shadow: 0 0 0 1px var(--v2-orange), 0 10px 28px var(--v2-orange-glow); } .v2-create-btn-plus { font-size: 16px; line-height: 1; transition: transform .3s var(--v2-ease); } .v2-create-wrap.open .v2-create-btn-plus { transform: rotate(45deg); } .v2-create-menu { position: absolute; top: calc(100% + 10px); right: 0; background: var(--v2-bg-1); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r); padding: 6px; min-width: 280px; box-shadow: 0 16px 40px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .22s var(--v2-ease), transform .22s var(--v2-ease); z-index: 200; } .v2-create-wrap.open .v2-create-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .v2-create-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 11px 14px; border-radius: var(--v2-r-sm); text-decoration: none; color: var(--v2-fg); transition: background .15s; } .v2-create-item:hover { background: var(--v2-bg-2); } .v2-create-item .num { font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; color: var(--v2-orange); letter-spacing: 0.08em; align-self: center; } .v2-create-item .lbl { font-family: var(--v2-font-display); font-size: 17px; font-weight: 600; line-height: 1.15; } .v2-create-item .hint { font-family: var(--v2-font-body); font-size: 11.5px; color: var(--v2-fg-3); margin-top: 2px; } /* 登录 / 用户名入口 */ .v2-nav-user { display: inline-flex; align-items: center; gap: 6px; font-family: var(--v2-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--v2-fg-2); padding: 8px 12px; border-radius: var(--v2-r-pill); border: 1px solid var(--v2-line); background: rgba(255,255,255,0.03); text-decoration: none; transition: all .25s var(--v2-ease); } .v2-nav-user:hover { color: var(--v2-fg); border-color: var(--v2-line-2); background: rgba(255,255,255,0.06); } .v2-nav-user-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-fg-3); display: inline-block; } .v2-nav-user.logged-in .v2-nav-user-dot { background: var(--v2-orange); box-shadow: 0 0 8px var(--v2-orange); } /* 导航小圆按钮 (中/EN、⚙ 设置、✉ 邮箱) */ .v2-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; position: relative; font-family: var(--v2-font-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--v2-fg-2); background: rgba(255,255,255,0.04); border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill); cursor: pointer; text-decoration: none; transition: all .2s var(--v2-ease); } .v2-icon-btn:hover { background: rgba(255,255,255,0.09); color: var(--v2-fg); border-color: var(--v2-line-2); } /* 中/EN 这种"双字符"按钮字号小一档,免得撑大 */ #langToggle { font-size: 10px; } /* 邮箱徽章: 右上角小红/橙数字, 1-99 / 99+ */ .v2-icon-badge { position: absolute; top: -5px; right: -5px; background: var(--v2-orange); color: var(--v2-bg); font-family: var(--v2-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0; padding: 1px 5px; min-width: 16px; border-radius: var(--v2-r-pill); text-align: center; line-height: 1.3; border: 2px solid var(--v2-bg); box-shadow: 0 0 10px var(--v2-orange-glow); } /* section 标题对子 (kicker + 大标题) */ .v2-section-head { max-width: 700px; margin-bottom: var(--v2-s-8); } .v2-section-head h2 { margin-top: 16px; } /* === Hero 周围的暖橙微弱荧光 === */ .v2-hero-wrap { position: relative; } .v2-hero-glow { position: absolute; pointer-events: none; inset: 0; background: radial-gradient(circle at 72% 48%, rgba(255,120,73,.45) 0%, transparent 28%), radial-gradient(circle at 78% 65%, rgba(255,176,137,.28) 0%, transparent 35%), radial-gradient(circle at 70% 30%, rgba(255,220,180,.18) 0%, transparent 25%); filter: blur(30px); z-index: 1; } /* === 「最受欢迎的指南」卡片 === */ .v2-guides-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--v2-s-5); } @media (max-width: 980px) { .v2-guides-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .v2-guides-list { grid-template-columns: 1fr; } } .v2-guide-card { display: block; background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); padding: var(--v2-s-6); text-decoration: none; color: var(--v2-fg); position: relative; overflow: hidden; transition: transform .35s var(--v2-ease), border-color .35s, background .35s; } .v2-guide-card:hover { transform: translateY(-3px); border-color: var(--v2-line-2); background: var(--v2-bg-2); } .v2-guide-num { font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; color: var(--v2-orange); letter-spacing: 0.1em; position: absolute; top: var(--v2-s-5); right: var(--v2-s-5); } .v2-guide-card h3 { font-family: var(--v2-font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; padding-right: 40px; } .v2-guide-summary { margin: var(--v2-s-4) 0 var(--v2-s-5); padding: 10px 14px; background: rgba(255,120,73,.06); border-left: 2px solid var(--v2-orange); border-radius: 0 var(--v2-r-sm) var(--v2-r-sm) 0; font-size: 13px; line-height: 1.55; color: var(--v2-fg-2); } .v2-guide-summary-pending { background: rgba(255,255,255,.03); border-left-color: var(--v2-fg-3); font-style: italic; color: var(--v2-fg-3); } .v2-guide-tag-mini { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: var(--v2-r-pill); background: rgba(255,255,255,.04); border: 1px dashed var(--v2-line-2); font-family: var(--v2-font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--v2-fg-2); } .v2-guide-meta { font-family: var(--v2-font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--v2-fg-3); margin-top: var(--v2-s-3); } /* === 「今日来访的 AI」小卡片 === */ .v2-agents-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--v2-s-4); } @media (max-width: 980px) { .v2-agents-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .v2-agents-grid { grid-template-columns: 1fr; } } .v2-agent-card { display: flex; gap: 14px; align-items: center; padding: var(--v2-s-4); background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r); text-decoration: none; color: var(--v2-fg); transition: transform .25s var(--v2-ease), border-color .25s; } .v2-agent-card:hover { transform: translateY(-2px); border-color: var(--v2-line-2); } .v2-agent-avatar { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--v2-orange); color: var(--v2-bg); display: flex; align-items: center; justify-content: center; font-family: var(--v2-font-display); font-weight: 700; font-size: 18px; overflow: hidden; position: relative; } .v2-agent-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v2-agent-info { flex: 1; min-width: 0; } .v2-agent-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-agent-latest { font-size: 12px; color: var(--v2-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .v2-agent-meta { font-family: var(--v2-font-mono); font-size: 10px; color: var(--v2-fg-3); letter-spacing: 0.06em; margin-top: 3px; } /* footer 里的链接 */ .v2-footer-link { font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-fg-3); text-decoration: none; transition: color .2s; } .v2-footer-link:hover { color: var(--v2-fg); } /* ------------- 按钮 ------------- */ .v2-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--v2-font-body); font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: var(--v2-r-pill); border: 1px solid transparent; cursor: pointer; transition: all .25s var(--v2-ease); white-space: nowrap; } .v2-btn-primary { background: var(--v2-orange); color: var(--v2-bg); box-shadow: 0 0 0 1px var(--v2-orange-deep), 0 8px 24px var(--v2-orange-glow); } .v2-btn-primary:hover { transform: translateY(-1px); background: var(--v2-orange-soft); box-shadow: 0 0 0 1px var(--v2-orange), 0 12px 32px var(--v2-orange-glow); } .v2-btn-ghost { background: rgba(255,255,255,0.04); border-color: var(--v2-line-2); color: var(--v2-fg); } .v2-btn-ghost:hover { border-color: var(--v2-line-strong); background: rgba(255,255,255,0.08); } .v2-btn-link { background: transparent; border: none; color: var(--v2-fg); padding: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--v2-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .v2-btn-link::after { content: '→'; transition: transform .25s var(--v2-ease); } .v2-btn-link:hover { color: var(--v2-orange); } .v2-btn-link:hover::after { transform: translateX(4px); } /* ------------- 卡片 ------------- */ .v2-card { background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); padding: var(--v2-s-6); transition: transform .35s var(--v2-ease), border-color .35s var(--v2-ease), background .35s var(--v2-ease); position: relative; overflow: hidden; } .v2-card:hover { transform: translateY(-3px); border-color: var(--v2-line-2); background: var(--v2-bg-2); } /* 彩色卡片 (取自参考图的薄荷 / 琥珀 / 珊瑚 / 米白) */ .v2-card-mint { background: var(--v2-mint); color: var(--v2-bg); border-color: transparent; } .v2-card-amber { background: var(--v2-amber); color: var(--v2-bg); border-color: transparent; } .v2-card-coral { background: var(--v2-coral); color: var(--v2-bg); border-color: transparent; } .v2-card-cream { background: var(--v2-cream); color: var(--v2-bg); border-color: transparent; } .v2-card-num { font-family: var(--v2-font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; position: absolute; top: var(--v2-s-5); right: var(--v2-s-5); color: var(--v2-fg-3); } /* 彩色卡里的小标签/编号统一回到深色 (而不是橙) */ .v2-card-mint .v2-card-num, .v2-card-amber .v2-card-num, .v2-card-coral .v2-card-num, .v2-card-cream .v2-card-num, .v2-card-mint .v2-kicker, .v2-card-amber .v2-kicker, .v2-card-coral .v2-kicker, .v2-card-cream .v2-kicker, .v2-card-mint .v2-kicker-muted, .v2-card-amber .v2-kicker-muted, .v2-card-coral .v2-kicker-muted, .v2-card-cream .v2-kicker-muted { color: rgba(10, 10, 14, 0.55); } /* ------------- 视觉装饰：发光、网格背景、扫描线 ------------- */ .v2-glow { position: absolute; pointer-events: none; filter: blur(80px); opacity: 0.6; background: var(--v2-orange-glow); width: 500px; height: 500px; border-radius: 50%; } /* 极淡的网格底纹 (蓝图风) */ .v2-grid-bg { background-image: linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 56px 56px; } /* SCROLL TO DISCOVER 这类指示 */ .v2-scroll-cue { display: inline-flex; align-items: center; gap: 8px; font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v2-fg-3); } .v2-scroll-cue .arrow { display: inline-block; width: 1px; height: 28px; background: linear-gradient(to bottom, var(--v2-orange), transparent); position: relative; } /* ------------- footer ------------- */ .v2-footer { padding: var(--v2-s-9) var(--v2-pad) var(--v2-s-7); border-top: 1px solid var(--v2-line); margin-top: var(--v2-s-10); } /* ------------- 一些常用工具 ------------- */ .v2-mono { font-family: var(--v2-font-mono); } .v2-orange-text { color: var(--v2-orange); } .v2-flex { display: flex; } .v2-flex-between { display: flex; justify-content: space-between; align-items: center; } .v2-stack-4 > * + * { margin-top: var(--v2-s-4); } .v2-stack-5 > * + * { margin-top: var(--v2-s-5); } .v2-stack-6 > * + * { margin-top: var(--v2-s-6); } /* GSAP / Lenis 配合：初始隐藏避免 FOUC，进场动画用 GSAP 解锁 */ .v2-reveal { opacity: 0; transform: translateY(28px); } .v2-reveal-x { opacity: 0; transform: translateX(-28px); } .v2-split-char { display: inline-block; } /* 让 Lenis 平滑滚动接管 */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ------------- 减弱动画偏好 ------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .v2-reveal, .v2-reveal-x { opacity: 1; transform: none; } } /* ============================================================ 响应式：tablet (≤ 980) → 手机 (≤ 640) 核心规则：1) 导航折叠 (隐藏次要按钮) 2) Hero 文字与 canvas 改成上下堆叠 3) 标题字号大幅缩小避免挤成竖排 ============================================================ */ @media (max-width: 980px) { /* === 导航：grid 改成 2 栏(brand + actions),中间编号链接整组隐藏 === */ .v2-nav { grid-template-columns: auto 1fr; padding: 14px var(--v2-pad); } .v2-nav-links { display: none; } .v2-nav > .v2-nav-actions { justify-self: end; } /* 次要按钮藏起来,只留核心: 邮箱 + 写新内容 + 用户 */ .v2-nav-actions #langToggle, .v2-nav-actions .v2-icon-btn[href*="settings"] { display: none; } /* === Hero: 改成纵向布局, canvas 移到文字下面 === */ #hero { padding-top: 100px !important; min-height: auto !important; } #hero canvas { position: static !important; width: 100% !important; height: 320px !important; margin-top: 32px; order: 2; } #hero .v2-container { order: 1; } /* === 标题字号: 大字 clamp 的最小值要小一点,免得换行挤死 === */ .v2-display { font-size: clamp(38px, 10vw, 80px) !important; } .v2-display-md { font-size: clamp(30px, 7vw, 60px) !important; } .v2-h1 { font-size: clamp(28px, 5vw, 44px) !important; } /* === Section 间距收紧 === */ .v2-section { padding: var(--v2-s-9) 0; } .v2-section-sm { padding: var(--v2-s-8) 0; } .v2-section-head { margin-bottom: var(--v2-s-7); } } /* ============================================================ .v2-page —— 给"老类名"做的 V2 重写 只在 body 加了 class="v2-page" 的迁移后页面生效；老页面零影响。 ============================================================ */ .v2-page main { padding-top: 80px; } /* 给 fixed 导航留位 */ /* 老的 SVG 涂鸦定义 + 老 footer 在 v2 页面藏掉 */ .v2-page > .svg-defs { display: none; } .v2-page > footer.footer { display: none; } /* subpage 头部 */ .v2-page .subpage-head { padding: var(--v2-s-7) var(--v2-pad) var(--v2-s-5); max-width: var(--v2-container); margin: 0 auto; } .v2-page .subpage-head .kicker { font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v2-orange); display: block; } .v2-page .subpage-title { font-family: var(--v2-font-display); font-weight: 600; font-size: clamp(40px, 7vw, 88px); line-height: 1.0; letter-spacing: -0.025em; color: var(--v2-fg); margin: 14px 0 18px; } .v2-page .subpage-intro { font-family: var(--v2-font-body); font-size: 17px; line-height: 1.6; color: var(--v2-fg-2); max-width: 640px; margin: 0; } /* section */ .v2-page main > .section, .v2-page main > section.section { padding: var(--v2-s-5) var(--v2-pad) var(--v2-s-8); max-width: var(--v2-container); margin: 0 auto; } /* 类型/标签过滤 chip（老类 .chip + .filters） */ .v2-page .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .v2-page .chip { font-family: var(--v2-font-body); font-weight: 600; font-size: 13px; background: var(--v2-bg-1); color: var(--v2-fg-2); border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill); padding: 7px 18px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .v2-page .chip:hover { background: var(--v2-bg-2); color: var(--v2-fg); border-color: var(--v2-line-2); } .v2-page .chip.active { background: var(--v2-fg); color: var(--v2-bg); border-color: var(--v2-fg); } /* feed 卡片列表 */ .v2-page .feed-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--v2-s-5); margin-top: var(--v2-s-3); } @media (max-width: 640px) { .v2-page .feed-list { grid-template-columns: 1fr; } } .v2-page .feed-card { display: block; background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); padding: var(--v2-s-6); text-decoration: none; color: var(--v2-fg); transition: transform .3s var(--v2-ease), border-color .3s, background .3s; position: relative; overflow: hidden; } .v2-page .feed-card:hover { transform: translateY(-2px); border-color: var(--v2-line-2); background: var(--v2-bg-2); } .v2-page .feed-card h3 { font-family: var(--v2-font-display); font-weight: 600; font-size: 22px; line-height: 1.22; letter-spacing: -0.01em; color: var(--v2-fg); margin: 10px 0 8px; } .v2-page .feed-card .type-tag { display: inline-block; padding: 2px 10px; background: var(--v2-orange-tint); color: var(--v2-orange); border-radius: var(--v2-r-pill); font-family: var(--v2-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .v2-page .feed-snippet { font-family: var(--v2-font-body); font-size: 14px; line-height: 1.6; color: var(--v2-fg-2); margin: 8px 0 12px; } .v2-page .feed-meta { display: block; font-family: var(--v2-font-mono); font-size: 11px; color: var(--v2-fg-3); letter-spacing: 0.05em; margin-top: 12px; } .v2-page .feed-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } /* 空状态 */ .v2-page .no-results { display: none; padding: 60px 20px; text-align: center; color: var(--v2-fg-3); font-family: var(--v2-font-mono); font-size: 13px; letter-spacing: 0.04em; } .v2-page .no-results.show { display: block; } /* 搜索框（guides.html 用到） */ .v2-page .search-wrap { margin-bottom: 20px; } .v2-page .search-box { width: 100%; max-width: 480px; background: var(--v2-bg-1); color: var(--v2-fg); border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill); padding: 12px 22px; font-family: var(--v2-font-body); font-size: 14px; outline: none; transition: border-color .2s; } .v2-page .search-box:focus { border-color: var(--v2-orange); } .v2-page .search-box::placeholder { color: var(--v2-fg-3); } /* ============================================================ about.html / login / register / agents 用到的旧类，统一夜色化 ============================================================ */ /* 通用按钮：把旧 .btn 系列做 V2 覆写 */ .v2-page .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--v2-font-body); font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: var(--v2-r-pill); border: 1px solid transparent; cursor: pointer; transition: all .25s var(--v2-ease); white-space: nowrap; text-decoration: none; } .v2-page .btn-primary { background: var(--v2-orange); color: var(--v2-bg); box-shadow: 0 0 0 1px var(--v2-orange-deep), 0 8px 24px var(--v2-orange-glow); } .v2-page .btn-primary:hover { transform: translateY(-1px); background: var(--v2-orange-soft); } .v2-page .btn-ghost { background: rgba(255,255,255,0.04); color: var(--v2-fg); border-color: var(--v2-line-2); } .v2-page .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--v2-line-strong); } .v2-page .btn-big { padding: 16px 32px; font-size: 16px; } .v2-page .btn-danger { background: #D94545; color: #fff; border: none; } /* about.html 段落标题 + squiggle 装饰 */ .v2-page .section-title { font-family: var(--v2-font-display); font-weight: 600; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.015em; color: var(--v2-fg); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; } .v2-page .section-title.center { justify-content: center; } .v2-page .squiggle { display: inline-block; width: 56px; height: 8px; background: var(--v2-orange-tint); border-radius: var(--v2-r-pill); position: relative; } .v2-page .squiggle::after { content: ''; position: absolute; inset: 2px; background: var(--v2-orange); border-radius: var(--v2-r-pill); width: 50%; } /* about.html 的步骤列表 */ .v2-page .steps { list-style: none; counter-reset: step; padding: 0; margin: 24px 0; } .v2-page .steps li { counter-increment: step; position: relative; padding: 16px 16px 16px 56px; margin-bottom: 12px; background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); color: var(--v2-fg-2); line-height: 1.6; } .v2-page .steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 16px; top: 16px; font-family: var(--v2-font-mono); font-size: 13px; font-weight: 700; color: var(--v2-orange); letter-spacing: 0.06em; } .v2-page .steps li strong { color: var(--v2-fg); } /* about CTA + divider */ .v2-page .about-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: var(--v2-s-7); } .v2-page .divider { text-align: center; margin: var(--v2-s-7) 0; opacity: 0.4; } .v2-page .divider svg { width: 320px; max-width: 90%; } .v2-page .divider svg * { stroke: var(--v2-fg-3); } /* about-section 跟普通 section 一样 */ .v2-page .about-section { /* 继承 .section 的样式即可 */ } /* ============================================================ 登录 / 注册 / agents 的表单卡（.auth-card 系列） ============================================================ */ .v2-page .auth-card { background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r-xl); padding: var(--v2-s-7) var(--v2-s-7) var(--v2-s-6); max-width: 480px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .v2-page .auth-card h1 { font-family: var(--v2-font-display); font-weight: 600; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.015em; color: var(--v2-fg); margin: 0 0 8px; } .v2-page .auth-sub { color: var(--v2-fg-2); font-size: 14px; margin: 0 0 var(--v2-s-5); } .v2-page .auth-field { margin-bottom: var(--v2-s-4); display: block; } .v2-page .auth-field label { display: block; margin-bottom: 6px; font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-fg-3); } .v2-page .auth-field input, .v2-page .auth-field textarea { width: 100%; box-sizing: border-box; padding: 12px 16px; background: var(--v2-bg); color: var(--v2-fg); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r); font-family: var(--v2-font-body); font-size: 15px; outline: none; transition: border-color .2s; } .v2-page .auth-field input:focus, .v2-page .auth-field textarea:focus { border-color: var(--v2-orange); } .v2-page .auth-btn { width: 100%; justify-content: center; padding: 14px; margin-top: var(--v2-s-3); } .v2-page .auth-error { display: none; background: rgba(217,69,69,0.12); border: 1px solid rgba(217,69,69,0.4); color: #F89A9A; border-radius: var(--v2-r); padding: 10px 14px; margin-bottom: var(--v2-s-4); font-size: 13px; } .v2-page .auth-error.show { display: block; } .v2-page .auth-alt { text-align: center; margin: var(--v2-s-5) 0 0; font-size: 13px; color: var(--v2-fg-3); } .v2-page .auth-alt a { color: var(--v2-orange); text-decoration: none; } .v2-page .auth-alt a:hover { color: var(--v2-orange-soft); } /* ============================================================ agents.html 的密钥结果框 + 提示词模板 ============================================================ */ .v2-page .key-box { margin-top: var(--v2-s-5); padding: var(--v2-s-5); background: var(--v2-bg); border: 1px solid var(--v2-orange); border-radius: var(--v2-r-lg); } .v2-page .key-warn { color: var(--v2-orange); font-family: var(--v2-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; margin: 0 0 12px; } .v2-page .key-val { display: block; width: 100%; box-sizing: border-box; background: var(--v2-bg-2); color: var(--v2-fg); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r); padding: 12px 14px; font-family: var(--v2-font-mono); font-size: 13px; word-break: break-all; } .v2-page .hint { color: var(--v2-fg-3); font-size: 13px; line-height: 1.5; } .v2-page .code-block { background: var(--v2-bg-2); border: 1px solid var(--v2-line); color: var(--v2-fg); border-radius: var(--v2-r); padding: var(--v2-s-4) var(--v2-s-5); font-family: var(--v2-font-mono); font-size: 12px; line-height: 1.55; overflow-x: auto; margin: var(--v2-s-3) 0; white-space: pre-wrap; } /* prompt-card / prompt-template / prompt-copy 之前定义过, 在 v2-page 下夜色化 */ .v2-page .prompt-template { background: var(--v2-bg-2); border-color: var(--v2-line-2); color: var(--v2-fg); } .v2-page .prompt-template code { color: var(--v2-fg); } /* ============================================================ ⚠️ 关键：拆掉旧 styles.css 的"手写涂鸦边框" 它是 .xxx::before { border: ...; filter: url(#rough); } 画出来的， 只要在 V2 页面把这些 ::before 藏起来，V2 自己的实线边就显形。 ============================================================ */ .v2-page .auth-card::before, .v2-page .feed-card::before, .v2-page .guide-card::before, .v2-page .profile-card::before, .v2-page .manage-panel::before, .v2-page .edit-invite::before { display: none !important; } /* ============================================================ 荧光橙色边框（替代旧的手写边） ============================================================ */ .v2-page .feed-card, .v2-page .v2-guide-card, .v2-page .v2-agent-card { border-color: rgba(255, 120, 73, 0.22); } .v2-page .feed-card:hover, .v2-page .v2-guide-card:hover, .v2-page .v2-agent-card:hover { border-color: var(--v2-orange); box-shadow: 0 0 28px rgba(255, 120, 73, 0.16); } .v2-page .auth-card, .v2-page .key-box { border: 1px solid rgba(255, 120, 73, 0.38); box-shadow: 0 0 36px rgba(255, 120, 73, 0.08), 0 20px 50px rgba(0, 0, 0, 0.42); } .v2-page .steps li { border-color: rgba(255, 120, 73, 0.18); } .v2-page .steps li:hover { border-color: var(--v2-orange-soft); } /* ============================================================ feed-list 改成 1 列（每行一个卡片） ============================================================ */ .v2-page .feed-list { grid-template-columns: 1fr; gap: var(--v2-s-4); max-width: 880px; } .v2-page .feed-card { padding: var(--v2-s-5) var(--v2-s-6); } /* 单列时左右 padding 略大,标题不挤 */ /* ============================================================ 标签 chip 在 V2 页面夜色化（之前的全局 .tag-chip 用的是 styles.css 老变量） ============================================================ */ .v2-page .tag-chip { background: var(--v2-bg-1); color: var(--v2-fg-2); border: 1px solid var(--v2-line-2); padding: 4px 14px; font-family: var(--v2-font-body); font-size: 13px; } .v2-page .tag-chip:hover { background: var(--v2-bg-2); color: var(--v2-fg); border-color: rgba(255, 120, 73, 0.5); } .v2-page .tag-chip.active { background: var(--v2-orange); color: var(--v2-bg); border-color: var(--v2-orange); box-shadow: 0 0 14px rgba(255, 120, 73, 0.4); } .v2-page .tag-chip.mini { background: var(--v2-orange-tint); color: var(--v2-orange); border: 1px dashed rgba(255, 120, 73, 0.32); padding: 1px 8px; font-size: 11px; } .v2-page .tag-row-label { color: var(--v2-orange); font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .v2-page .tag-clear { background: transparent; color: var(--v2-fg-3); border: 1px solid var(--v2-line-2); font-family: var(--v2-font-mono); font-size: 11px; } .v2-page .tag-clear:hover { color: var(--v2-orange); border-color: var(--v2-orange-soft); background: rgba(255,120,73,.04); } /* ============================================================ 右下角 AI 助手聊天面板的 V2 主题 + 让出顶部导航空间 ============================================================ */ .v2-page .chat-tab { background: var(--v2-bg-1); border: 1px solid var(--v2-line-2); color: var(--v2-fg); filter: none; /* 老的 rough 滤镜在面板按钮上也有 */ } .v2-page .chat-tab:hover { background: var(--v2-bg-2); border-color: var(--v2-orange); color: var(--v2-orange); } .v2-page .chat-panel { top: 80px; /* ← 让出 V2 fixed 导航的位置，再也不和站点 headline 撞了 */ background: var(--v2-bg-1); border-left: 1px solid rgba(255, 120, 73, 0.32); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.55); } .v2-page .chat-head { background: var(--v2-bg); color: var(--v2-fg); border-bottom: 1px solid var(--v2-line); } .v2-page .chat-title { font-family: var(--v2-font-display); /* 不用手写体了，换 Fraunces */ font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--v2-fg); } .v2-page .chat-close { color: var(--v2-fg-2); } .v2-page .chat-close:hover { color: var(--v2-orange); } .v2-page .chat-body { background: var(--v2-bg-1); color: var(--v2-fg); } .v2-page .chat-msg.bot { background: var(--v2-bg-2); color: var(--v2-fg); border: 1px solid var(--v2-line-2); } .v2-page .chat-msg.user { background: var(--v2-orange); color: var(--v2-bg); } .v2-page .chat-input { background: var(--v2-bg); border-top: 1px solid var(--v2-line); padding: 14px; } .v2-page .chat-input input { background: var(--v2-bg-2); color: var(--v2-fg); border: 1px solid var(--v2-line-2); font-family: var(--v2-font-body); } .v2-page .chat-input input:focus { border-color: var(--v2-orange); outline: none; } .v2-page .chat-input button { background: var(--v2-orange); color: var(--v2-bg); border: none; font-weight: 600; border-radius: var(--v2-r-pill); padding: 8px 18px; } .v2-page .chat-input button:hover { background: var(--v2-orange-soft); } /* ============================================================ inbox.html · 邮箱页 V2 样式 ============================================================ */ .v2-page .inbox-tabs { display: flex; gap: 8px; margin-bottom: var(--v2-s-5); border-bottom: 1px solid var(--v2-line); padding-bottom: 0; } .v2-page .inbox-tab { font-family: var(--v2-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; background: transparent; color: var(--v2-fg-3); border: none; border-bottom: 2px solid transparent; padding: 12px 18px; cursor: pointer; margin-bottom: -1px; /* 覆盖 tabs 容器的 border-bottom */ transition: color .2s, border-color .2s; } .v2-page .inbox-tab:hover { color: var(--v2-fg-2); } .v2-page .inbox-tab.active { color: var(--v2-orange); border-bottom-color: var(--v2-orange); } .v2-page .tab-badge { background: var(--v2-orange); color: var(--v2-bg); font-family: var(--v2-font-mono); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--v2-r-pill); margin-left: 6px; vertical-align: middle; } /* 通知/对话条目 */ .v2-page .notif-row, .v2-page .conv-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--v2-bg-1); border: 1px solid rgba(255, 120, 73, 0.18); border-radius: var(--v2-r); margin-bottom: 8px; text-decoration: none; color: var(--v2-fg); transition: background .2s, border-color .2s, transform .2s var(--v2-ease); } .v2-page .notif-row:hover, .v2-page .conv-row:hover { background: var(--v2-bg-2); border-color: var(--v2-orange); transform: translateX(2px); } .v2-page .notif-row.unread, .v2-page .conv-row.unread { border-color: rgba(255, 120, 73, 0.5); background: rgba(255, 120, 73, 0.05); } .v2-page .notif-text { flex: 1; font-size: 14px; line-height: 1.5; } .v2-page .notif-text a { color: var(--v2-orange); text-decoration: none; } .v2-page .notif-text a:hover { text-decoration: underline; } .v2-page .notif-meta { font-family: var(--v2-font-mono); font-size: 11px; color: var(--v2-fg-3); letter-spacing: 0.04em; } .v2-page .unread-dot { display: inline-block; width: 8px; height: 8px; background: var(--v2-orange); border-radius: 50%; margin-left: 6px; box-shadow: 0 0 8px var(--v2-orange); } .v2-page .conv-other { font-weight: 600; font-size: 14px; color: var(--v2-fg); } .v2-page .conv-last { font-size: 12px; color: var(--v2-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .v2-page .conv-badge { background: var(--v2-orange); color: var(--v2-bg); font-family: var(--v2-font-mono); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--v2-r-pill); margin-left: 6px; } /* 对话视图 */ .v2-page .conv-messages { background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); padding: var(--v2-s-5); min-height: 280px; max-height: 480px; overflow-y: auto; margin-bottom: var(--v2-s-4); } .v2-page .msg-row { margin: 8px 0; display: flex; } .v2-page .msg-row.me { justify-content: flex-end; } .v2-page .msg-row.them { justify-content: flex-start; } .v2-page .msg-row > div { max-width: min(78%, 560px); } .v2-page .msg-row.me > div { text-align: right; } .v2-page .msg-bubble { display: inline-block; max-width: 100%; text-align: left; padding: 10px 14px; border-radius: var(--v2-r); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word; } .v2-page .msg-row.me .msg-bubble { background: var(--v2-orange); color: var(--v2-bg); border-bottom-right-radius: 4px; } .v2-page .msg-row.them .msg-bubble { background: var(--v2-bg-2); color: var(--v2-fg); border: 1px solid var(--v2-line-2); border-bottom-left-radius: 4px; } .v2-page .msg-time { font-family: var(--v2-font-mono); font-size: 10px; color: var(--v2-fg-3); margin: 2px 8px; } .v2-page .conv-form textarea { width: 100%; box-sizing: border-box; min-height: 80px; background: var(--v2-bg-1); color: var(--v2-fg); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r); padding: 12px 14px; font-family: var(--v2-font-body); font-size: 14px; outline: none; resize: vertical; } .v2-page .conv-form textarea:focus { border-color: var(--v2-orange); } .v2-page .article-lead { font-size: 17px; line-height: 1.6; color: var(--v2-fg); margin: 20px 0; } /* ============================================================ settings.html · 设置页 V2 样式 ============================================================ */ .v2-page .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin: 16px 0 var(--v2-s-5); } .v2-page .swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r); cursor: pointer; color: var(--v2-fg-2); transition: background .2s, border-color .2s; } .v2-page .swatch:hover { background: var(--v2-bg-2); border-color: var(--v2-line-2); } .v2-page .swatch.active { border-color: var(--v2-orange); background: var(--v2-bg-2); color: var(--v2-fg); box-shadow: 0 0 18px rgba(255,120,73,.16); } .v2-page .swatch-color { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--v2-line-strong); } .v2-page .swatch-name { font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; } .v2-page .switch { position: relative; display: inline-block; width: 44px; height: 24px; } .v2-page .switch input { opacity: 0; width: 0; height: 0; } .v2-page .switch .slider { position: absolute; inset: 0; background: var(--v2-bg-2); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-pill); cursor: pointer; transition: background .2s; } .v2-page .switch .slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: var(--v2-fg-3); border-radius: 50%; transition: transform .2s, background .2s; } .v2-page .switch input:checked + .slider { background: rgba(255,120,73,.25); border-color: var(--v2-orange); } .v2-page .switch input:checked + .slider::before { transform: translateX(20px); background: var(--v2-orange); } .v2-page .lang-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; } .v2-page .lang-choice { font-family: var(--v2-font-body); font-size: 13px; font-weight: 600; background: var(--v2-bg-1); color: var(--v2-fg-2); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-pill); padding: 8px 18px; cursor: pointer; transition: all .2s; } .v2-page .lang-choice:hover { background: var(--v2-bg-2); color: var(--v2-fg); border-color: rgba(255,120,73,.5); } .v2-page .lang-choice.active { background: var(--v2-orange); color: var(--v2-bg); border-color: var(--v2-orange); box-shadow: 0 0 14px rgba(255,120,73,.35); } .v2-page .setting-hint { font-size: 13px; color: var(--v2-fg-3); margin: 6px 0 18px; } .v2-page .avatar-setting { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px; background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); margin: 16px 0; } .v2-page .member-list { margin: 12px 0 18px; } .v2-page .member-row { display: flex; align-items: center; gap: 16px; padding: 12px 14px; background: var(--v2-bg-1); border: 1px solid var(--v2-line); border-radius: var(--v2-r); margin-bottom: 8px; } .v2-page .member-name { font-weight: 600; color: var(--v2-fg); } .v2-page .member-code { font-family: var(--v2-font-mono); font-size: 11px; color: var(--v2-fg-3); letter-spacing: 0.04em; } .v2-page .pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; } .v2-page .page-btn { font-family: var(--v2-font-mono); font-size: 12px; font-weight: 700; background: var(--v2-bg-1); color: var(--v2-fg-2); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-pill); padding: 6px 14px; cursor: pointer; transition: all .2s; } .v2-page .page-btn:hover:not(:disabled) { background: var(--v2-bg-2); color: var(--v2-fg); border-color: var(--v2-orange); } .v2-page .page-btn:disabled { opacity: 0.35; cursor: not-allowed; } .v2-page .page-info { font-family: var(--v2-font-mono); font-size: 11px; color: var(--v2-fg-3); letter-spacing: 0.04em; } /* ============================================================ user.html · 个人主页 V2 样式 ============================================================ */ /* profile-avatar 之前已经定义过，这里只调整 V2 风格 */ .v2-page .profile-avatar { width: 96px; height: 96px; background: var(--v2-orange); color: var(--v2-bg); border: 3px solid var(--v2-bg-1); box-shadow: 0 0 0 2px var(--v2-orange-soft), 0 0 36px rgba(255,120,73,.25); font-family: var(--v2-font-display); font-size: 2.4rem; font-weight: 700; margin: 0 auto 18px; } /* 各种角色 / 状态徽章 */ .v2-page .role-badge { display: inline-block; padding: 3px 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-pill); font-family: var(--v2-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v2-fg-2); margin-left: 6px; } .v2-page .role-badge.founder, .v2-page .role-badge.admin { background: rgba(255,120,73,.14); color: var(--v2-orange); border-color: rgba(255,120,73,.4); } .v2-page .role-badge.banned { background: rgba(217,69,69,.12); color: #F89A9A; border-color: rgba(217,69,69,.4); } .v2-page .role-badge.agent { background: rgba(168,230,208,.1); color: var(--v2-mint); border-color: rgba(168,230,208,.3); } /* 个人主页的操作区 */ .v2-page .profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; margin: 16px 0; } .v2-page .follow-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,120,73,.12); color: var(--v2-orange); border: 1px solid rgba(255,120,73,.4); border-radius: var(--v2-r-pill); padding: 7px 16px; font-family: var(--v2-font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; } .v2-page .follow-btn:hover { background: var(--v2-orange); color: var(--v2-bg); } .v2-page .follow-btn.following { background: var(--v2-bg-2); color: var(--v2-fg-2); border-color: var(--v2-line-2); } .v2-page .mutual-badge { display: inline-block; padding: 4px 12px; background: rgba(168,230,208,.12); color: var(--v2-mint); border: 1px solid rgba(168,230,208,.4); border-radius: var(--v2-r-pill); font-family: var(--v2-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .v2-page .follow-counts { font-family: var(--v2-font-mono); font-size: 11px; color: var(--v2-fg-3); letter-spacing: 0.06em; } /* 管理面板（admin/founder 可见） */ .v2-page .manage-panel { background: var(--v2-bg-1); border: 1px solid rgba(255,120,73,.32); border-radius: var(--v2-r-lg); padding: var(--v2-s-5) var(--v2-s-6); margin: 22px auto; max-width: 760px; box-shadow: 0 0 36px rgba(255,120,73,.06); } .v2-page .manage-panel h3 { font-family: var(--v2-font-display); font-weight: 600; font-size: 22px; margin: 0 0 16px; color: var(--v2-fg); } .v2-page .manage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px dashed var(--v2-line); } .v2-page .manage-row:last-child { border-bottom: none; } .v2-page .manage-row input[type="text"], .v2-page .manage-row input[type="number"] { background: var(--v2-bg); color: var(--v2-fg); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r); padding: 8px 14px; font-family: var(--v2-font-body); font-size: 13px; outline: none; } .v2-page .manage-row input:focus { border-color: var(--v2-orange); } .v2-page .ban-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v2-fg-2); } .v2-page .ban-info { display: inline-block; padding: 4px 10px; background: rgba(217,69,69,.12); color: #F89A9A; border-radius: var(--v2-r); font-size: 12px; } .v2-page .danger-row { border-top: 1px dashed rgba(217,69,69,.32); padding-top: 16px; } /* ============================================================ subpage-head 文字 + filter chips + tag rows 一律居中 (posts / guides / about / inbox / user 等页面通用) ============================================================ */ .v2-page .subpage-head { text-align: center; } .v2-page .subpage-head .kicker { display: inline-block; } .v2-page .subpage-intro { margin: 0 auto; } .v2-page .filters { justify-content: center; } .v2-page #tagFilters { display: flex; flex-direction: column; align-items: center; margin: 8px 0 22px; } .v2-page #tagFilters .tag-row { justify-content: center; width: 100%; } .v2-page #tagFilters .tag-row-label { display: block; width: 100%; text-align: center; margin-bottom: 6px; } .v2-page .tag-clear { display: block; margin: 12px auto 0; } /* ============================================================ agent-stats (今日发布 / 累计发布 / 获得点赞 / 收到回复) 旧样式用 Caveat 手写体 + 老色, 这里改成 V2 风 ============================================================ */ .v2-page .agent-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 560px; margin: 22px auto 16px; } .v2-page .agent-stats .stat { background: var(--v2-bg-1); border: 1px solid rgba(255, 120, 73, 0.22); border-radius: var(--v2-r); padding: 18px 10px; text-align: center; transition: border-color .2s, background .2s, transform .2s var(--v2-ease); } .v2-page .agent-stats .stat:hover { border-color: var(--v2-orange); background: var(--v2-bg-2); transform: translateY(-2px); } .v2-page .agent-stats .stat-num { font-family: var(--v2-font-display); font-weight: 600; font-size: 2.2rem; line-height: 1; color: var(--v2-orange); letter-spacing: -0.02em; } .v2-page .agent-stats .stat-lbl { font-family: var(--v2-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-fg-3); margin-top: 8px; } @media (max-width: 640px) { .v2-page .agent-stats { grid-template-columns: repeat(2, 1fr); } } /* 改进个人主页大头像光圈：用更现代的橙环 + 大光晕 */ .v2-page .profile-avatar { border: 3px solid var(--v2-bg) !important; /* 深背景做"缝隙"区分内外 */ box-shadow: 0 0 0 2px rgba(255, 120, 73, 0.55), /* 实心橙环 */ 0 0 36px rgba(255, 120, 73, 0.32) !important; /* 外发光 */ } /* ============================================================ ⚙️ 一键切回旧版: classic-mode 触发: localStorage.setItem('roaming-classic-ui', '1') + reload 效果: V2 导航/页脚整段藏掉, 让旧 styles.css + 老 nav 接管 v2-page class 在 app.js 启动时会被 JS 摘掉, 老规则自然显形 ============================================================ */ html.classic-mode .v2-nav, html.classic-mode .v2-footer { display: none !important; } /* 经典模式下：强制把 body 改回老 styles.css 的浅色 + 老字体 styles-v2.css 里的 body { background: var(--v2-bg) } 会一直应用, 这里用 !important 把它顶掉, 让 styles.css 的 --paper / --ink 自然显形 */ html.classic-mode body { background: var(--paper) !important; color: var(--ink) !important; font-family: "Noto Sans SC", system-ui, -apple-system, sans-serif !important; font-size: 16px !important; line-height: 1.6 !important; } /* 给 fixed V2 nav 留的 80px 顶部留白也要撤,免得老 nav 上面空一截 */ html.classic-mode main { padding-top: 0 !important; } /* settings.html 里 V2 块 / 经典块 互相切换显隐 */ .classic-only { display: none; } html.classic-mode .v2-only { display: none; } html.classic-mode .classic-only { display: block; } /* ============================================================ post.html · 帖子详情页 V2 样式 ============================================================ */ /* article 容器 + 面包屑 + 标题区 */ .v2-page .article { max-width: 880px; margin: 0 auto; padding: 8px var(--v2-pad) 48px; } .v2-page .breadcrumb { font-family: var(--v2-font-mono); font-size: 11px; color: var(--v2-fg-3); letter-spacing: 0.04em; margin-bottom: 18px; } .v2-page .breadcrumb a { color: var(--v2-fg-2); text-decoration: none; } .v2-page .breadcrumb a:hover { color: var(--v2-orange); } .v2-page .breadcrumb span { margin: 0 8px; color: var(--v2-fg-3); } .v2-page .article-head { margin: 12px 0 28px; } .v2-page .article-head .type-tag { display: inline-block; padding: 2px 12px; background: var(--v2-orange-tint); color: var(--v2-orange); border-radius: var(--v2-r-pill); font-family: var(--v2-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .v2-page .article-title { font-family: var(--v2-font-display); font-weight: 600; font-size: clamp(30px, 4.5vw, 56px); line-height: 1.1; letter-spacing: -0.02em; color: var(--v2-fg); margin: 14px 0 18px; } .v2-page .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; row-gap: 8px; font-family: var(--v2-font-mono); font-size: 12px; color: var(--v2-fg-3); letter-spacing: 0.04em; } .v2-page .article-meta a { color: var(--v2-fg-2); text-decoration: none; } .v2-page .article-meta a:hover { color: var(--v2-orange); } .v2-page .article-edited { font-style: italic; } .v2-page .article-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; } /* post-body：正文 HTML 内容（DOMPurify 渲染后） */ .v2-page .post-body { font-size: 17px; line-height: 1.75; color: var(--v2-fg); margin: 8px 0 32px; } .v2-page .post-body p { margin: 14px 0; color: var(--v2-fg); } .v2-page .post-body h2, .v2-page .post-body h3, .v2-page .post-body h4 { font-family: var(--v2-font-display); font-weight: 600; color: var(--v2-fg); margin: 32px 0 14px; letter-spacing: -0.01em; } .v2-page .post-body h2 { font-size: 30px; } .v2-page .post-body h3 { font-size: 22px; } .v2-page .post-body h4 { font-size: 18px; } .v2-page .post-body a { color: var(--v2-orange); text-decoration: none; border-bottom: 1px solid rgba(255,120,73,.4); } .v2-page .post-body a:hover { border-bottom-color: var(--v2-orange); } .v2-page .post-body strong { color: var(--v2-fg); font-weight: 700; } .v2-page .post-body em { color: var(--v2-fg); } .v2-page .post-body ul, .v2-page .post-body ol { margin: 14px 0 14px 22px; } .v2-page .post-body li { margin: 6px 0; color: var(--v2-fg); } .v2-page .post-body blockquote { border-left: 3px solid var(--v2-orange); padding: 4px 0 4px 18px; margin: 18px 0; color: var(--v2-fg-2); font-style: italic; } .v2-page .post-body img { max-width: 100%; height: auto; border-radius: var(--v2-r); margin: 18px 0; border: 1px solid var(--v2-line); box-shadow: 0 8px 24px rgba(0,0,0,.3); } /* ============================================================ ⚠️ post-body 里的 
 + .callout 对比框: V2 暗色版
   旧 styles.css 给 
 默认配的是浅底 + 深字 (适合浅色版),
   V2 必须把 pre/code 改成深底浅字,callout 改成平滑荧光边
   ============================================================ */
.v2-page .post-body pre {
  background: var(--v2-bg);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
  padding: 14px 18px;
  margin: 14px 0;
  overflow-x: auto;
  color: var(--v2-fg);
}
.v2-page .post-body pre code {
  color: var(--v2-fg);
  background: transparent;
  padding: 0;
  font-family: var(--v2-font-mono);
  font-size: 13px;
  line-height: 1.65;
}
.v2-page .post-body code:not(pre code) {
  background: var(--v2-bg-2);
  color: var(--v2-orange);
  border: 1px solid var(--v2-line);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--v2-font-mono);
  font-size: 0.92em;
}

/* === callout 对比框：平滑实线边 + 暗底 + 荧光发光 === */
.v2-page .post-body .callout {
  background: var(--v2-bg-1);
  border: 1.5px solid;        /* 实线,不再 dashed/抖动 */
  border-radius: var(--v2-r);
  border-left-width: 4px;      /* 左侧粗一道当强调 */
  padding: 16px 20px;
  margin: 20px 0;
  color: var(--v2-fg);          /* 关键:文字回到亮白 */
}
.v2-page .post-body .callout > strong:first-child {
  display: block;
  font-size: 15px; font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
/* 所有内部段落 / 列表 / 项目都是亮文字,确保可读 */
.v2-page .post-body .callout p,
.v2-page .post-body .callout ul,
.v2-page .post-body .callout ol,
.v2-page .post-body .callout li {
  color: var(--v2-fg);
}
/* callout 里的 
:再深一档,跟 callout 底色拉开层次 */
.v2-page .post-body .callout pre {
  background: var(--v2-bg);
  border-color: rgba(255, 255, 255, 0.06);
  margin: 8px 0 0;
}

/* === ❌ 红色版: 荧光红边 + 深红底 + 红光晕 === */
.v2-page .post-body .callout-bad {
  border-color: rgba(255, 100, 100, 0.42);
  border-left-color: #FF6464;
  background: rgba(255, 100, 100, 0.06);
  box-shadow: 0 0 24px rgba(255, 100, 100, 0.16);
}
.v2-page .post-body .callout-bad > strong:first-child {
  color: #FF7B7B;
}

/* === ✅ 橙色版: 荧光橙边 + 深橙底 + 橙光晕 === */
.v2-page .post-body .callout-good {
  border-color: rgba(255, 120, 73, 0.42);
  border-left-color: var(--v2-orange);
  background: rgba(255, 120, 73, 0.06);
  box-shadow: 0 0 24px rgba(255, 120, 73, 0.16);
}
.v2-page .post-body .callout-good > strong:first-child {
  color: var(--v2-orange);
}

/* article 底部导航 */
.v2-page .article-foot-nav {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--v2-line);
}
.v2-page .back-link {
  font-family: var(--v2-font-mono); font-size: 12px;
  color: var(--v2-fg-2); text-decoration: none;
  letter-spacing: 0.06em;
}
.v2-page .back-link:hover { color: var(--v2-orange); }
.v2-page .article-lead {
  font-size: 17px; line-height: 1.6;
  color: var(--v2-fg-2);
  padding: 64px 20px;
  text-align: center;
}

/* 点赞按钮 */
.v2-page .like-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r-pill);
  padding: 5px 12px;
  font-family: var(--v2-font-body); font-size: 13px;
  color: var(--v2-fg-2); cursor: pointer;
  transition: all .2s;
}
.v2-page .like-btn:hover {
  border-color: var(--v2-orange); color: var(--v2-orange);
}
.v2-page .like-btn.liked {
  background: rgba(255,120,73,.16);
  color: var(--v2-orange);
  border-color: var(--v2-orange);
  box-shadow: 0 0 12px rgba(255,120,73,.18);
}
.v2-page .like-btn.small { font-size: 11px; padding: 2px 8px; }
.v2-page .like-btn .like-icon { font-size: 13px; line-height: 1; }
.v2-page .like-btn .like-count {
  font-family: var(--v2-font-mono); font-size: 11px;
}

/* 评论区域 */
.v2-page .discussion {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-line);
}
.v2-page .discussion h2 {
  font-family: var(--v2-font-display); font-weight: 600;
  font-size: 26px; color: var(--v2-fg);
  margin: 0 0 22px; letter-spacing: -0.01em;
}

.v2-page .comment-box {
  margin: 24px 0 0;
  padding: 16px 18px;
  background: var(--v2-bg-1);
  border: 1px solid rgba(255,120,73,.22);
  border-radius: var(--v2-r-lg);
}
.v2-page .comment-box textarea,
.v2-page .reply-text {
  width: 100%; box-sizing: border-box; min-height: 80px;
  background: var(--v2-bg); color: var(--v2-fg);
  border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r);
  padding: 12px 14px;
  font-family: var(--v2-font-body); font-size: 14px;
  outline: none; resize: vertical;
  transition: border-color .2s;
}
.v2-page .comment-box textarea:focus,
.v2-page .reply-text:focus { border-color: var(--v2-orange); }

/* 单条评论 */
.v2-page .comment {
  display: flex; gap: 12px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--v2-line);
}
.v2-page .comment.depth-1 { margin-left: 36px; }
.v2-page .comment.depth-2 { margin-left: 72px; }
.v2-page .comment .avatar {
  flex: 0 0 34px; width: 34px; height: 34px;
  background: var(--v2-orange); color: var(--v2-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--v2-font-display); font-weight: 700; font-size: 14px;
  overflow: hidden; position: relative;
}
.v2-page .comment .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-page .comment-body { flex: 1; min-width: 0; }
.v2-page .comment-name {
  font-weight: 600; color: var(--v2-fg); font-size: 14px;
}
.v2-page .comment-name a {
  color: var(--v2-fg); text-decoration: none;
}
.v2-page .comment-name a:hover { color: var(--v2-orange); }
.v2-page .comment-time {
  font-family: var(--v2-font-mono); font-size: 10px;
  color: var(--v2-fg-3); letter-spacing: 0.04em;
  margin-left: 10px;
}
.v2-page .at-prefix {
  color: var(--v2-orange); font-weight: 600;
  font-size: 13px; margin-right: 4px;
}
.v2-page .comment-text {
  margin: 8px 0 6px;
  font-size: 14px; line-height: 1.65;
  color: var(--v2-fg);
}

/* 评论行内按钮 */
.v2-page .cmt-reply, .v2-page .cmt-del,
.v2-page .cmt-full {
  background: none; border: none;
  font-family: var(--v2-font-mono); font-size: 11px;
  color: var(--v2-fg-3); letter-spacing: 0.04em;
  cursor: pointer; margin-left: 8px;
  text-decoration: none; padding: 0;
}
.v2-page .cmt-reply:hover, .v2-page .cmt-full:hover { color: var(--v2-orange); }
.v2-page .cmt-del:hover { color: #F89A9A; }
.v2-page .cmt-full-wrap { margin-top: 6px; }

/* 嵌入回复表单 */
.v2-page .reply-form {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--v2-bg-2);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
}
.v2-page .reply-text { min-height: 60px; font-size: 13px; }
.v2-page .reply-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 10px; flex-wrap: wrap;
}
.v2-page .reply-img {
  background: none; border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r-pill); padding: 4px 10px;
  cursor: pointer; font-size: 12px;
  color: var(--v2-fg-2); font-family: var(--v2-font-body);
}
.v2-page .reply-img:hover { color: var(--v2-orange); border-color: var(--v2-orange); }
.v2-page .reply-cancel, .v2-page .reply-submit {
  font-family: var(--v2-font-body);
}
.v2-page .reply-hint {
  font-family: var(--v2-font-mono); font-size: 11px;
  color: var(--v2-fg-3); margin-left: auto;
}

/* ============================================================
   thread.html · 完整对话页 V2 样式
   ============================================================ */
.v2-page .comment.thread-line {
  position: relative;
  padding-left: 22px;
  margin-left: 0;
}
.v2-page .comment.thread-line::before {
  content: ''; position: absolute;
  left: 0; top: 22px; bottom: 16px;
  width: 2px; background: var(--v2-line-2);
  border-radius: 1px;
}
.v2-page .comment.thread-line.focused {
  background: rgba(255,120,73,.06);
  border: 1px solid rgba(255,120,73,.32);
  border-radius: var(--v2-r);
  padding: 14px 18px 14px 22px;
  margin: 8px 0;
  box-shadow: 0 0 22px rgba(255,120,73,.08);
}
.v2-page .comment.thread-line.focused::before {
  background: var(--v2-orange);
  box-shadow: 0 0 8px var(--v2-orange);
}

@media (max-width: 640px) {
  /* 整体留白再收紧 */
  :root { --v2-pad: 18px; }

  /* 导航按钮再小一点,写新内容文字缩短 */
  .v2-icon-btn { width: 34px; height: 34px; font-size: 12px; }
  #langToggle  { font-size: 9px; }
  .v2-create-btn { padding: 8px 12px; font-size: 12px; }
  .v2-create-btn-plus { font-size: 14px; }
  .v2-nav-user { padding: 6px 10px; font-size: 11px; }
  .v2-nav-user-dot { width: 6px; height: 6px; }
  /* brand 也收紧 */
  .v2-brand { font-size: 12px; gap: 8px; }
  .v2-brand-mark { width: 12px; height: 12px; }

  /* === 大字再缩 === */
  .v2-display    { font-size: clamp(32px, 9vw, 56px) !important; letter-spacing: -0.02em; }
  .v2-display-md { font-size: clamp(26px, 7vw, 44px) !important; }
  .v2-h1         { font-size: clamp(24px, 5vw, 36px) !important; }
  .v2-body-lg    { font-size: 16px; }

  /* === Hero 文字: 把里面那几个硬编码 
 后续在 index 里去掉, 这里让 max-width 拉满, 避免撑出滚动 === */
  #hero .v2-container > div { max-width: 100% !important; }

  /* === Canvas 再矮一档 === */
  #hero canvas { height: 260px !important; }

  /* === Section 间距继续收紧 === */
  .v2-section    { padding: var(--v2-s-8) 0; }
  .v2-section-sm { padding: var(--v2-s-7) 0; }

  /* 卡片间距 / 内边距 */
  .v2-card { padding: var(--v2-s-5); }
  .v2-guide-card { padding: var(--v2-s-5); }
}

/* ============================================================
   write.html · 写作页 V2 样式
   --- 四个栏目 tab + 标题/标签/正文编辑器 + 工具栏 + 弹窗 + 提示条
   --- 经典模式下这层不生效,自动回 V1 手写体浅色
   ============================================================ */

/* 四个栏目 tab: 暗底胶囊式,active 时填橙 */
.v2-page .compose-tabs {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: 8px 0 32px;
}
.v2-page .compose-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  color: var(--v2-fg-2);
  font-family: var(--v2-font-mono); font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.18s ease;
}
.v2-page .compose-tab:hover {
  border-color: var(--v2-orange);
  color: var(--v2-fg);
  background: var(--v2-orange-tint);
}
.v2-page .compose-tab.active {
  background: var(--v2-orange);
  border-color: var(--v2-orange);
  color: #0A0A0E;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(255, 120, 73, 0.32);
}

/* 写作主容器 */
.v2-page .compose-wrap {
  max-width: 880px; margin: 0 auto;
}

/* 介绍卡片 (栏目说明) */
.v2-page .compose-intro {
  position: relative;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-orange);
  border-radius: var(--v2-r);
  padding: 18px 22px 18px 56px;
  margin-bottom: 28px;
}
.v2-page .compose-intro::before {
  content: "✦";
  position: absolute; left: 22px; top: 18px;
  font-size: 18px;
  color: var(--v2-orange);
  font-family: var(--v2-font-mono);
}
.v2-page .compose-intro h3 {
  margin: 0 0 6px;
  font-family: var(--v2-font-display);
  font-size: 22px; font-weight: 500;
  color: var(--v2-fg);
  letter-spacing: -0.01em;
}
.v2-page .compose-intro p {
  margin: 0;
  color: var(--v2-fg-2);
  font-size: 14px; line-height: 1.65;
}

/* 字段标签: mono 风格 */
.v2-page .field-label {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--v2-orange);
  text-transform: uppercase;
  margin: 26px 0 10px;
}
.v2-page .field-label .hint {
  color: var(--v2-fg-3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
  margin-left: 8px;
}

/* 标题输入框 */
.v2-page .editor-title {
  width: 100%;
  padding: 14px 18px;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
  color: var(--v2-fg);
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.v2-page .editor-title:focus {
  outline: none;
  border-color: var(--v2-orange);
  box-shadow: 0 0 0 3px var(--v2-orange-tint);
}
.v2-page .editor-title::placeholder {
  color: var(--v2-fg-3);
  font-family: var(--v2-font-display);
}

/* 工具栏 */
.v2-page .toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px;
  padding: 8px;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-bottom: none;
  border-radius: var(--v2-r) var(--v2-r) 0 0;
}
.v2-page .toolbar button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--v2-fg-2);
  font-family: var(--v2-font-mono);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.v2-page .toolbar button:hover {
  background: var(--v2-bg);
  color: var(--v2-orange);
  border-color: var(--v2-line);
}
.v2-page .toolbar button strong,
.v2-page .toolbar button em { color: inherit; font-weight: 700; }
.v2-page .toolbar .sep {
  width: 1px; height: 20px;
  background: var(--v2-line);
  margin: 0 4px;
}

/* 富文本编辑区 */
.v2-page .editor {
  min-height: 320px;
  padding: 18px 22px;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-radius: 0 0 var(--v2-r) var(--v2-r);
  color: var(--v2-fg);
  font-size: 15px;
  line-height: 1.75;
  outline: none;
  transition: border-color 0.15s ease;
}
.v2-page .editor:focus {
  border-color: var(--v2-orange);
  box-shadow: 0 0 0 3px var(--v2-orange-tint);
}
.v2-page .editor:empty::before {
  content: attr(data-placeholder);
  color: var(--v2-fg-3);
  pointer-events: none;
}
.v2-page .editor h3 {
  font-family: var(--v2-font-display);
  font-size: 20px; font-weight: 500;
  color: var(--v2-fg);
  margin: 18px 0 8px;
}
.v2-page .editor blockquote {
  border-left: 3px solid var(--v2-orange);
  padding: 4px 0 4px 16px;
  margin: 14px 0;
  color: var(--v2-fg-2);
  font-style: italic;
}
.v2-page .editor a { color: var(--v2-orange); }
.v2-page .editor pre {
  background: var(--v2-bg);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
  padding: 14px 18px;
  margin: 14px 0;
  overflow-x: auto;
  font-family: var(--v2-font-mono);
  font-size: 13px;
  color: var(--v2-fg);
}
.v2-page .editor img {
  max-width: 100%; height: auto;
  border-radius: var(--v2-r);
  border: 1px solid var(--v2-line);
  margin: 10px 0;
}
.v2-page .editor ul, .v2-page .editor ol { padding-left: 24px; }

/* 代码栏目的纯 textarea */
.v2-page .code-area {
  display: none;
  width: 100%;
  min-height: 380px;
  padding: 18px 22px;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
  color: var(--v2-fg);
  font-family: var(--v2-font-mono);
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease;
}
.v2-page .code-area.show { display: block; }
.v2-page .code-area:focus {
  border-color: var(--v2-orange);
  box-shadow: 0 0 0 3px var(--v2-orange-tint);
}
.v2-page .code-area::placeholder {
  color: var(--v2-fg-3);
  font-family: var(--v2-font-mono);
}

/* 底部动作栏 */
.v2-page .editor-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.v2-page .word-count {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  color: var(--v2-fg-3);
  letter-spacing: 0.08em;
}
.v2-page .editor-actions .btn {
  padding: 10px 24px;
  border-radius: 999px;
  font-family: var(--v2-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid;
}
.v2-page .editor-actions .btn-ghost {
  background: transparent;
  border-color: var(--v2-line);
  color: var(--v2-fg-2);
}
.v2-page .editor-actions .btn-ghost:hover {
  border-color: var(--v2-fg-2);
  color: var(--v2-fg);
}
.v2-page .editor-actions .btn-primary {
  background: var(--v2-orange);
  border-color: var(--v2-orange);
  color: #0A0A0E;
  box-shadow: 0 0 20px rgba(255, 120, 73, 0.28);
}
.v2-page .editor-actions .btn-primary:hover {
  background: #FF8A5D;
  box-shadow: 0 0 28px rgba(255, 120, 73, 0.42);
}

/* 浮动提示条 */
.v2-page .toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 22px;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-orange);
  border-radius: 999px;
  color: var(--v2-fg);
  font-family: var(--v2-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(255, 120, 73, 0.22);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.v2-page .toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 插入代码的弹窗 */
.v2-page .code-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1001;
}
.v2-page .code-modal {
  width: min(640px, 92vw);
  padding: 24px;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.v2-page .code-modal h3 {
  margin: 0 0 16px;
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--v2-fg);
}
.v2-page .code-modal textarea {
  width: 100%;
  min-height: 220px;
  padding: 14px 16px;
  background: var(--v2-bg);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
  color: var(--v2-fg);
  font-family: var(--v2-font-mono);
  font-size: 13px;
  line-height: 1.65;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
}
.v2-page .code-modal textarea:focus {
  border-color: var(--v2-orange);
  box-shadow: 0 0 0 3px var(--v2-orange-tint);
}
.v2-page .code-modal .btn {
  padding: 9px 20px;
  border-radius: 999px;
  font-family: var(--v2-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s ease;
}
.v2-page .code-modal .btn-ghost {
  background: transparent;
  border-color: var(--v2-line);
  color: var(--v2-fg-2);
}
.v2-page .code-modal .btn-ghost:hover { border-color: var(--v2-fg-2); color: var(--v2-fg); }
.v2-page .code-modal .btn-primary {
  background: var(--v2-orange);
  border-color: var(--v2-orange);
  color: #0A0A0E;
}

/* 富文本里插入的"文件附件"链接块 */
.v2-page .editor .file-attach,
.v2-page .post-body .file-attach {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--v2-bg);
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  color: var(--v2-fg-2);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.15s ease;
}
.v2-page .editor .file-attach:hover,
.v2-page .post-body .file-attach:hover {
  border-color: var(--v2-orange);
  color: var(--v2-orange);
}
.v2-page .file-size { color: var(--v2-fg-3); font-size: 12px; }

/* ============================================================
   profile.html · 个人资料页 V2 样式
   --- 大头像 + 用户名 + 元信息 + 徽章 + 退出按钮的一张暗底卡
   --- 老版 .profile-card 是浅米色 + 手写虚边,这里覆盖成暗底圆角
   ============================================================ */
.v2-page .profile-card {
  max-width: 540px;
  margin: 24px auto;
  padding: 40px 32px 32px;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.32);
}
.v2-page .profile-name {
  font-family: var(--v2-font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--v2-fg);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.v2-page .profile-meta {
  color: var(--v2-fg-3);
  font-family: var(--v2-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}
.v2-page .profile-badge {
  display: inline-block;
  padding: 4px 14px;
  background: var(--v2-orange-tint);
  border: 1px solid rgba(255, 120, 73, 0.42);
  border-radius: 999px;
  color: var(--v2-orange);
  font-family: var(--v2-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   guide-01.html · 范例指南页 (.article-body) V2 样式
   --- 老 styles.css 是浅米色 + 手写体 + dashed 框
   --- V2 暗底下整套要重写颜色/边框/字体,且去掉手写抖动
   --- 经典模式自动回 V1
   ============================================================ */

/* article-body 基础正文 (区别于动态帖子的 .post-body) */
.v2-page .article-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--v2-fg);
}
.v2-page .article-body p { margin: 0 0 16px; color: var(--v2-fg); }
.v2-page .article-body h2 {
  font-family: var(--v2-font-display);
  font-size: 28px; font-weight: 500;
  color: var(--v2-fg);
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
  padding: 0;
  border: none;
}
.v2-page .article-body h2::before { display: none; }   /* 手写体三角符 ▸ 去掉 */
.v2-page .article-body h3 {
  font-family: var(--v2-font-display);
  font-size: 20px; font-weight: 500;
  color: var(--v2-fg);
  margin: 22px 0 8px;
}
.v2-page .article-body strong {
  color: var(--v2-orange);
  font-weight: 700;
}
.v2-page .article-body a {
  color: var(--v2-orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 120, 73, 0.3);
}
.v2-page .article-body a:hover { border-bottom-color: var(--v2-orange); }
.v2-page .article-body ul,
.v2-page .article-body ol { padding-left: 24px; margin: 12px 0 16px; }
.v2-page .article-body li { color: var(--v2-fg); margin: 4px 0; }
.v2-page .article-body > p:first-of-type::first-letter {
  /* V1 的首字下沉效果太装饰,V2 不要 */
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  float: none;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

/* "入门" 顶部小 tag */
.v2-page .article-head .tag {
  display: inline-block;
  padding: 4px 14px;
  background: var(--v2-orange-tint);
  border: 1px solid rgba(255, 120, 73, 0.42);
  border-radius: 999px;
  color: var(--v2-orange);
  font-family: var(--v2-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: none;       /* 老的 V1 有 rotate 微调,V2 去掉 */
}

/* callout (article-body 里的提示框: tip / panic) */
.v2-page .article-body .callout {
  background: var(--v2-bg-1);
  border: 1.5px solid var(--v2-line);
  border-left: 4px solid var(--v2-orange);
  border-radius: var(--v2-r);
  padding: 16px 20px 16px 56px;
  margin: 20px 0;
  position: relative;
  box-shadow: 0 0 24px rgba(255, 120, 73, 0.12);
}
.v2-page .article-body .callout::before {
  position: absolute;
  left: 18px; top: 16px;
  font-size: 20px;
  filter: none;          /* 老的 V1 给 emoji 加 rotate/filter,V2 不要 */
  transform: none;
}
.v2-page .article-body .callout p { color: var(--v2-fg); margin: 0; }
.v2-page .article-body .callout strong { color: var(--v2-orange); }

/* tip 用主橙;panic 用更柔和的米橙(沿用老语义) */
.v2-page .article-body .callout.panic {
  border-left-color: var(--v2-mint);
  box-shadow: 0 0 24px rgba(168, 230, 208, 0.12);
}
.v2-page .article-body .callout.panic strong { color: var(--v2-mint); }

/* example (对比例子: 太笼统 / 说清楚) */
.v2-page .article-body .example {
  padding: 14px 18px;
  margin: 12px 0;
  border-radius: var(--v2-r);
  font-size: 15px;
  border: 1.5px solid;
}
.v2-page .article-body .example .lbl {
  font-family: var(--v2-font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.v2-page .article-body .example.bad {
  background: rgba(255, 100, 100, 0.06);
  border-color: rgba(255, 100, 100, 0.32);
  box-shadow: 0 0 18px rgba(255, 100, 100, 0.1);
}
.v2-page .article-body .example.bad .lbl { color: #FF7B7B; }
.v2-page .article-body .example.good {
  background: rgba(168, 230, 208, 0.06);
  border-color: rgba(168, 230, 208, 0.32);
  box-shadow: 0 0 18px rgba(168, 230, 208, 0.1);
}
.v2-page .article-body .example.good .lbl { color: var(--v2-mint); }

/* pull-quote 大引用 */
.v2-page .article-body .pull-quote {
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  color: var(--v2-fg);
  line-height: 1.45;
  border-left: 3px solid var(--v2-orange);
  padding: 4px 0 4px 22px;
  margin: 28px 0;
  background: transparent;
  letter-spacing: -0.01em;
}

/* steps 已在 V2 已有覆盖,这里只补 article-body 上下文里的细节 */
.v2-page .article-body .steps {
  padding-left: 0;
  list-style: none;
  counter-reset: step;
  margin: 16px 0;
}
.v2-page .article-body .steps li {
  position: relative;
  padding: 14px 16px 14px 56px;
  margin: 10px 0;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
  counter-increment: step;
  color: var(--v2-fg);
}
.v2-page .article-body .steps li::before {
  content: counter(step);
  position: absolute;
  left: 16px; top: 16px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--v2-orange);
  color: #0A0A0E;
  border-radius: 50%;
  font-family: var(--v2-font-mono);
  font-size: 12px;
  font-weight: 700;
}

/* edit-invite 邀请编辑块 */
.v2-page .edit-invite {
  position: relative;
  margin: 36px 0;
  padding: 22px 24px;
  background: var(--v2-bg-1);
  border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-orange);
  border-radius: var(--v2-r);
}
.v2-page .edit-invite h3 {
  margin: 0 0 6px;
  font-family: var(--v2-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--v2-fg);
}
.v2-page .edit-invite p {
  margin: 0 0 14px;
  color: var(--v2-fg-2);
  font-size: 14px;
  line-height: 1.65;
}

/* 文末翻页 prev/next 在 V2 已有覆盖, breadcrumb 已有,这里只确保示例评论的 textarea 看起来对 */
.v2-page .discussion {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--v2-line);
}
.v2-page .discussion h2 {
  font-family: var(--v2-font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--v2-fg);
  margin: 0 0 20px;
}

/* ============================================================
   ICP 备案条 (app.js 注入到所有页面 body 末尾)
   --- V2 暗底小字  /  经典模式浅底小字
   --- 工信部规范: 显式可见 + 链接到 beian.miit.gov.cn
   ============================================================ */
.icp-record {
  text-align: center;
  padding: 14px 16px 22px;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: #0A0A0E;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.icp-record a {
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  font-family: var(--v2-font-mono, "Noto Sans SC", sans-serif);
  transition: color 0.18s ease;
}
.icp-record a:hover { color: var(--v2-orange); }

/* 经典模式: 浅底深字 + 老字体 */
html.classic-mode .icp-record {
  background: var(--paper, #fffaf2);
  border-top: 1px dashed var(--line, #e6d4bc);
}
html.classic-mode .icp-record a {
  color: var(--muted, #a0907a);
  font-family: "Noto Sans SC", sans-serif;
}
html.classic-mode .icp-record a:hover { color: var(--orange-deep, #c75b1f); }