/* fy.celpipcelpip.com — 语域转换配色、字体、间距、"不用圆角"的处理都取自 fatou.celpipcelpip.com。明暗切换沿用 dashboard 的逻辑：暗色打底，.day-mode 覆盖成明亮； Auto 按钟点走（7:00–19:00 算白天），选择存 localStorage。区别是 dashboard 逐元素写了六十来行覆盖，这里改成一层"角色色"变量，两套值各写一遍就够，以后加组件不用再补一条 day-mode 规则。 */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } :root { /* ── 品牌色：两种模式共用，取自 fatou ── */ --navy: #1e2d4a; --gold: #b8912f; --dark: #0f1c2e; --cream: #faf7f2; --light: #f0ebe2; /* ── 角色色：暗色（基准）── */ --bg: var(--dark); --ink: #e8e4dc; --ink-soft: #9aa3b0; --surface: rgba(255,255,255,0.04); /* 卡片 */ --sunken: rgba(255,255,255,0.02); /* 结果框这类凹下去的区域 */ --edge: rgba(255,255,255,0.08); /* 卡片描边 */ --field-edge: rgba(255,255,255,0.16); /* 输入框描边 */ --rule: rgba(255,255,255,0.07); /* 分隔线 */ --hover: rgba(255,255,255,0.03); --input-bg: rgba(255,255,255,0.05); --th-bg: rgba(255,255,255,0.05); --th-ink: rgba(255,255,255,0.5); --ok: #6dbb8b; --warn: #d9ac54; --fail: #e0806c; --ok-bg: rgba(109,187,139,0.15); --warn-bg: rgba(217,172,84,0.15); --fail-bg: rgba(224,128,108,0.15); --err-bg: rgba(224,128,108,0.12); --err-edge: rgba(224,128,108,0.35); --login-bg: var(--dark); --login-card: var(--cream); --watermark: rgba(255,255,255,0.015); } /* ── 角色色：明亮 ── 类挂在而不是上，这样里的内联脚本能在首次绘制前就把它加上，不会先闪一下暗色再跳成亮色。 */ :root.day-mode { --bg: var(--cream); --ink: var(--navy); --ink-soft: #64748b; --surface: #ffffff; --sunken: var(--cream); --edge: #e8e2d8; --field-edge: #d8d1c4; --rule: var(--light); --hover: var(--cream); --input-bg: #ffffff; --th-bg: var(--navy); --th-ink: #ffffff; --ok: #2f7d4f; --warn: #9a6f14; --fail: #a4211b; --ok-bg: #e6f1ea; --warn-bg: var(--light); --fail-bg: #fdecea; --err-bg: #fdecea; --err-edge: #f0c8c4; --login-bg: var(--light); --login-card: #ffffff; --watermark: rgba(0,0,0,0.028); } /* Playfair 没有中文字形，中文会落到后面的宋体系列上，跟 Playfair 同为衬线，混排不违和。 */ body { font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; } .serif { font-family: 'Playfair Display', 'Songti SC', 'Noto Serif SC', 'SimSun', serif; } /* ── 导航（两种模式都是深色，与 dashboard 一致）───────── */ nav { background: var(--dark); padding: 1.2rem 5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: nowrap; } .logo { font-family: 'Playfair Display', 'Songti SC', serif; color: #fff; font-size: 1.1rem; letter-spacing: 0.04em; white-space: nowrap; /* 导航里任何一项都不许折成两行 */ min-width: 0; overflow: hidden; text-overflow: ellipsis; } .logo span { color: var(--gold); } .nav-right { display: flex; align-items: center; gap: 1.1rem; flex-wrap: nowrap; flex-shrink: 0; } .nav-user { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .nav-link { color: rgba(255,255,255,0.4); text-decoration: none; font-size: 0.84rem; white-space: nowrap; transition: color 0.2s; } .nav-link:hover { color: var(--gold); } /* 明暗选择器。导航栏两种模式下都是深色，所以它自己始终是浅字深底。 width/flex 必须写死 —— 通用 select 规则是 width:100%，一旦这条没生效它就会把整条导航挤到换行。 */ #theme-select { width: auto; flex: 0 0 auto; background-color: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); color: #fff; padding: 0.32rem 1.5rem 0.32rem 0.6rem; font-family: inherit; font-size: 0.78rem; line-height: 1.4; cursor: pointer; outline: none; transition: background-color 0.2s, border-color 0.2s; /* 箭头也要覆盖：通用规则用的是 --ink-soft，明亮模式下那是深灰，画在深色导航上几乎看不见 */ background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.65) 50%), linear-gradient(135deg, rgba(255,255,255,0.65) 50%, transparent 50%); background-position: calc(100% - 13px) 54%, calc(100% - 9px) 54%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } #theme-select:hover { background-color: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); } #theme-select:focus { border-color: var(--gold); } #theme-select option { background: var(--dark); color: #fff; } /* ── 页头（两种模式都是深色）──────────────────────────── */ .page-header { background: var(--navy); padding: 2.6rem 5rem; } .page-header .eyebrow { color: var(--gold); font-size: 0.75rem; letter-spacing: 0.18em; margin-bottom: 0.6rem; } .page-header h1 { font-family: 'Playfair Display', 'Songti SC', 'Noto Serif SC', serif; color: #fff; font-size: 1.9rem; margin-bottom: 0.5rem; font-weight: 600; } .page-header p { color: rgba(255,255,255,0.45); font-size: 0.9rem; max-width: 620px; line-height: 1.8; } /* ── 主体 ─────────────────────────────────────────────── */ main { flex: 1; padding: 2.5rem 5rem 4rem; max-width: 1020px; width: 100%; } .panel { background: var(--surface); border: 1px solid var(--edge); padding: 1.6rem; margin-bottom: 1.2rem; transition: background-color 0.25s ease, border-color 0.25s ease; } .section-title { font-family: 'Playfair Display', 'Songti SC', 'Noto Serif SC', serif; font-size: 1.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.2rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } label.field { display: block; } .field > span { display: block; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 0.45rem; } textarea, select, input[type=text], input[type=password] { width: 100%; font-family: inherit; font-size: 16px; /* 必须 ≥16px，否则 iOS 一点输入框整页放大且不缩回 */ color: var(--ink); background: var(--input-bg); border: 1px solid var(--field-edge); padding: 0.7rem 0.8rem; transition: border-color 0.2s, background-color 0.25s ease, color 0.25s ease; } textarea { resize: vertical; line-height: 1.8; } textarea:focus, select:focus, input:focus { outline: none; border-color: var(--gold); } textarea::placeholder, input::placeholder { color: var(--ink-soft); opacity: 0.75; } select { cursor: pointer; appearance: none; padding-right: 1.8rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 15px) 53%, calc(100% - 10px) 53%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* 暗色下原生下拉列表在部分浏览器会用系统白底，指定一下免得刺眼 */ select option { background: var(--bg); color: var(--ink); } .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .grid.wide { grid-template-columns: 2fr 1fr 1fr; } .counter { text-align: right; font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.35rem; } .counter.over { color: var(--fail); } details.adv { margin-top: 1.1rem; } details.adv summary { cursor: pointer; font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.06em; list-style: none; user-select: none; display: flex; align-items: center; gap: 0.5rem; } details.adv summary::-webkit-details-marker { display: none; } details.adv summary::before { content: ''; width: 0; height: 0; border-left: 5px solid var(--gold); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.2s; } details.adv[open] summary::before { transform: rotate(90deg); } details.adv summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } details.adv > div { margin-top: 0.7rem; } .actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.3rem; } .btn { display: inline-block; padding: 0.85rem 2rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; border: 0; cursor: pointer; transition: opacity 0.2s; } .btn-gold { background: var(--gold); color: var(--dark); } .btn-gold:hover:not(:disabled) { opacity: 0.85; } .btn-gold:disabled { opacity: 0.45; cursor: default; } .btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--field-edge); padding: 0.45rem 1rem; font-size: 0.78rem; letter-spacing: 0.06em; font-weight: 500; font-family: inherit; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .btn-ghost:hover { border-color: var(--gold); color: var(--ink); } .check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; user-select: none; } .check input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; } .hint { color: var(--ink-soft); font-size: 0.78rem; line-height: 1.6; } .err { margin-top: 0.9rem; padding: 0.7rem 0.9rem; background: var(--err-bg); border: 1px solid var(--err-edge); color: var(--fail); font-size: 0.85rem; line-height: 1.6; } /* ── 输出 ─────────────────────────────────────────────── */ #output { min-height: 140px; white-space: pre-wrap; word-break: break-word; background: var(--sunken); border: 1px solid var(--edge); padding: 1rem 1.1rem; line-height: 1.9; font-size: 0.98rem; transition: background-color 0.25s ease, border-color 0.25s ease; } #output:empty::before { content: '结果会出现在这里。'; color: var(--ink-soft); } /* 推理模型在出正文前会沉默一阵，给个明确的「在想」而不是空白框 */ #output.thinking:empty::before { content: '模型正在思考…（高精度档会先推理再落笔，通常十几秒）'; color: var(--gold); } #output.streaming::after { content: '▍'; color: var(--gold); animation: blink 1s steps(2, start) infinite; } @keyframes blink { to { visibility: hidden; } } table.metrics { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 1.2rem; } table.metrics th { background: var(--th-bg); color: var(--th-ink); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; text-align: right; padding: 0.65rem 1rem; } table.metrics td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--rule); text-align: right; } table.metrics th:first-child, table.metrics td:first-child { text-align: left; } table.metrics td:first-child { color: var(--ink-soft); } table.metrics tr:hover td { background: var(--hover); } .delta { font-size: 0.72rem; margin-left: 0.4rem; } .delta.good { color: var(--ok); } .delta.bad { color: var(--warn); } /* ── 保真校验 ─────────────────────────────────────────── */ .verdict { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; padding: 0.22rem 0.7rem; text-transform: uppercase; } .verdict.ok { background: var(--ok-bg); color: var(--ok); } .verdict.warn { background: var(--warn-bg); color: var(--warn); } .verdict.fail { background: var(--fail-bg); color: var(--fail); } ul.issues { list-style: none; margin-top: 1rem; } ul.issues li { border-left: 3px solid var(--rule); padding: 0.1rem 0 0.1rem 0.9rem; margin-bottom: 1.1rem; font-size: 0.88rem; line-height: 1.7; } ul.issues li.high { border-color: var(--fail); } ul.issues li.medium { border-color: var(--gold); } ul.issues .tag { display: block; font-size: 0.68rem; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; font-weight: 600; margin-bottom: 0.2rem; } ul.issues .frag { color: var(--ink-soft); font-size: 0.82rem; margin-top: 0.25rem; } ul.issues .frag b { color: var(--ink); font-weight: 600; } .spin { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sp 0.7s linear infinite; vertical-align: -1px; margin-right: 0.45rem; } @keyframes sp { to { transform: rotate(360deg); } } /* ── 页脚（两种模式都是深色）──────────────────────────── */ footer { background: var(--dark); padding: 1.5rem 5rem; display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; } footer p { color: rgba(255,255,255,0.22); font-size: 0.78rem; } /* ── 登录页 ───────────────────────────────────────────── */ .login-body { background: var(--login-bg); justify-content: center; align-items: center; padding: 1.5rem; } .login-body::before { content: '语'; position: fixed; right: 4rem; top: 50%; transform: translateY(-50%); font-family: 'Playfair Display', 'Songti SC', serif; font-size: 26rem; color: var(--watermark); line-height: 1; pointer-events: none; } /* 登录卡片两种模式下都是浅色卡片，只是底色深浅不同—— 所以卡片内部的文字颜色固定用 navy，不跟随 --ink。 */ .login-card { background: var(--login-card); border-top: 3px solid var(--gold); padding: 2.6rem 2.2rem; width: 100%; max-width: 380px; position: relative; z-index: 1; color: var(--navy); } .login-card .brand { font-family: 'Playfair Display', 'Songti SC', serif; font-size: 0.95rem; margin-bottom: 1.6rem; letter-spacing: 0.03em; } .login-card .brand span { color: var(--gold); } .login-card .eyebrow { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.4rem; } .login-card h1 { font-family: 'Playfair Display', 'Songti SC', 'Noto Serif SC', serif; font-size: 1.5rem; font-weight: 600; margin-bottom: 1.6rem; } .login-card .field { margin-bottom: 1rem; } .login-card .field > span { color: #64748b; } .login-card input { background: #fff; border-color: #d8d1c4; color: var(--navy); } .login-card .btn { width: 100%; margin-top: 0.6rem; } .login-card .err { background: #fdecea; border-color: #f0c8c4; color: #a4211b; } .login-foot { color: #64748b; font-size: 0.75rem; margin-top: 1.4rem; line-height: 1.6; } /* ── 移动端 ───────────────────────────────────────────── */ @media (max-width: 820px) { nav { padding: 1rem 1.2rem; gap: 0.6rem; } .nav-right { gap: 0.7rem; } .nav-right .nav-link[href^="https"] { display: none; } /* 窄屏先让掉外链，保住主题选择器 */ .logo { font-size: 0.95rem; } .nav-user { font-size: 0.72rem; letter-spacing: 0.04em; } #theme-select { padding: 0.28rem 1.2rem 0.28rem 0.45rem; font-size: 0.72rem; background-position: calc(100% - 10px) 54%, calc(100% - 6px) 54%; } .page-header { padding: 2rem 1.5rem; } .page-header h1 { font-size: 1.5rem; } main { padding: 1.5rem 1.5rem 3rem; } .panel { padding: 1.1rem; } .grid.wide { grid-template-columns: 1fr; } .btn { width: 100%; text-align: center; } .actions { gap: 0.8rem; } footer { padding: 1.2rem 1.5rem; flex-direction: column; gap: 0.4rem; text-align: center; } .login-body::before { display: none; } table.metrics th, table.metrics td { padding: 0.55rem 0.6rem; font-size: 0.8rem; } } /* 系统开了「减少动态效果」就别做主题过渡的淡入淡出 */ @media (prefers-reduced-motion: reduce) { body, .panel, #output, textarea, select, input { transition: none; } }