/* ============================================================================= 上品软件 · 统一设计体系（单一真源） 管理后台 / 客户后台 / 登录页 共用这一个文件，不再各写一份 CSS 各自漂移。 两条独立的主题轴： 1) 视觉模式 data-mode = light | dark | compact （个人偏好，存 localStorage，人人可选） - light : 明亮扁平、柔阴影、舒适密度 - dark : 暗色材质、深表面、强对比 - compact: 明亮但高密度（更小留白/圆角/字号，信息密集） 未显式选择时跟随系统 prefers-color-scheme。 2) 品牌配色 data-theme = green | purple | blue | teal | orange （平台级，仅管理员可改） 无障碍：focus-visible 焦点环 / prefers-reduced-motion 尊重减少动画 / 主题控件可键盘操作。 ============================================================================= */ /* ---------- 设计令牌：亮色（默认） ---------- */ :root { --bg:#f4f5fb; --bg-2:#eef0f8; --panel:#ffffff; --panel-2:#fbfcfe; --panel-3:#f7f8fd; --ink:#1e2531; --ink-soft:#616b7b; --ink-mute:#8a93a3; /* --ink-soft 加深至 ≥4.5:1 (WCAG AA 正文)；--ink-mute 同步加深 */ --line:#e9ecf3; --line-2:#dfe3ec; --side-bg:#1c2333; --side-ink:#aab3c6; --side-ink-soft:#8b94a8; --side-hover:rgba(255,255,255,.06); --ok:#1f9d55; --ok-bg:#e8f7ee; --ok-line:#bfe6cd; --ok-ink:#17703e; --warn:#d98a1a; --warn-bg:#fff4e5; --warn-line:#f0c98a; --warn-ink:#8a5a00; --danger:#e14b3f; --danger-bg:#fdeeec; --danger-line:#f4c3bd; --danger-ink:#b23a30; --shadow:0 1px 2px rgba(30,37,49,.04), 0 6px 20px rgba(30,37,49,.05); --shadow-lg:0 8px 30px rgba(60,70,120,.14); /* 密度令牌（compact 会覆盖） */ --r:12px; --r-sm:8px; --r-xs:6px; --fs:13.5px; --fs-sm:12.5px; --fs-xs:11px; --fs-h1:20px; --pad-card:18px 20px; --pad-cell:10px 12px; --gap:16px; --nav-pad:9px 20px; --side-w:200px; /* 企业级间距刻度（仅供 R23 样板组件取用；新增自定义属性，对既有页面零视觉影响） */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --focus:0 0 0 3px var(--brand-glow); color-scheme:light; } /* ---------- 暗色：跟随系统（未显式选择时） ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --bg:#0e131d; --bg-2:#0b0f18; --panel:#171e2b; --panel-2:#1b2434; --panel-3:#202a3c; --ink:#e6eaf3; --ink-soft:#9aa6bd; --ink-mute:#6b7690; --line:#26304a; --line-2:#324065; --side-bg:#0c111b; --side-ink:#aab3c6; --side-ink-soft:#7e88a0; --side-hover:rgba(255,255,255,.07); --ok-bg:#123123; --ok-line:#1f5a3a; --ok-ink:#6ee2a6; --warn-bg:#2f2410; --warn-line:#6b511e; --warn-ink:#f0c07a; --danger-bg:#341a1a; --danger-line:#6b2f2f; --danger-ink:#f19a9a; --brand-ink:#43c88a; /* 暗底链接/品牌墨色改用更亮品牌绿，保证文字≥4.5:1 */ --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.45); --shadow-lg:0 10px 40px rgba(0,0,0,.6); color-scheme:dark; } } /* ---------- 暗色：显式选择（覆盖系统） ---------- */ :root[data-mode="dark"] { --bg:#0e131d; --bg-2:#0b0f18; --panel:#171e2b; --panel-2:#1b2434; --panel-3:#202a3c; --ink:#e6eaf3; --ink-soft:#9aa6bd; --ink-mute:#6b7690; --line:#26304a; --line-2:#324065; --side-bg:#0c111b; --side-ink:#aab3c6; --side-ink-soft:#7e88a0; --side-hover:rgba(255,255,255,.07); --ok-bg:#123123; --ok-line:#1f5a3a; --ok-ink:#6ee2a6; --warn-bg:#2f2410; --warn-line:#6b511e; --warn-ink:#f0c07a; --danger-bg:#341a1a; --danger-line:#6b2f2f; --danger-ink:#f19a9a; --brand-ink:#43c88a; /* 暗底链接/品牌墨色改用更亮品牌绿，保证文字≥4.5:1 */ --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.45); --shadow-lg:0 10px 40px rgba(0,0,0,.6); color-scheme:dark; } /* ---------- 信息密度：独立轴 data-density（可与 light/dark 任意组合，非"第三种风格"） ---------- */ :root[data-density="compact"] { --r:8px; --r-sm:6px; --r-xs:4px; --fs:12.5px; --fs-sm:11.5px; --fs-xs:10.5px; --fs-h1:17px; --pad-card:11px 14px; --pad-cell:6px 9px; --gap:10px; --nav-pad:6px 18px; --side-w:184px; } /* ---------- 品牌配色轴（与模式正交）。--halo=品牌色光晕，登录背景/侧栏光晕都用它，随配色协调，不写死紫色 ---------- */ :root { --brand:#16a06a; --brand-ink:#0d7a49; --brand-2:#2bb87c; --grad:linear-gradient(135deg,#16a06a 0%,#2bb87c 100%); --grad-soft:linear-gradient(135deg,rgba(22,160,106,.10),rgba(43,184,124,.10)); --brand-glow:rgba(22,160,106,.22); --brand-shadow:rgba(22,160,106,.30); --halo:rgba(22,160,106,.16); --halo-2:rgba(43,184,124,.12); } /* --btn=按钮底色：由当前品牌色加深约28%，保证白字≥4.5:1(WCAG AA 正文对比度)对所有品牌轴成立；随 --brand 自动跟随。 */ :root { --btn: color-mix(in srgb, var(--brand) 72%, #000); } [data-theme="purple"]{ --brand:#5563e6; --brand-ink:#4a56d2; --brand-2:#7b74f2; --grad:linear-gradient(135deg,#5b6cf0,#7a5cf0); --grad-soft:linear-gradient(135deg,rgba(91,108,240,.10),rgba(122,92,240,.10)); --brand-glow:rgba(85,99,230,.22); --brand-shadow:rgba(103,92,230,.30); --halo:rgba(91,108,240,.18); --halo-2:rgba(122,92,240,.13); } [data-theme="blue"]{ --brand:#2d7ff9; --brand-ink:#1f6fe0; --brand-2:#4d9bff; --grad:linear-gradient(135deg,#2d7ff9,#4d9bff); --grad-soft:linear-gradient(135deg,rgba(45,127,249,.10),rgba(77,155,255,.10)); --brand-glow:rgba(45,127,249,.22); --brand-shadow:rgba(45,127,249,.28); --halo:rgba(45,127,249,.16); --halo-2:rgba(77,155,255,.12); } [data-theme="teal"]{ --brand:#0ea5a5; --brand-ink:#0b8f8f; --brand-2:#22c3c3; --grad:linear-gradient(135deg,#0ea5a5,#22c3c3); --grad-soft:linear-gradient(135deg,rgba(14,165,165,.10),rgba(34,195,195,.10)); --brand-glow:rgba(14,165,165,.22); --brand-shadow:rgba(14,165,165,.28); --halo:rgba(14,165,165,.16); --halo-2:rgba(34,195,195,.12); } [data-theme="orange"]{ --brand:#ef7a24; --brand-ink:#df6a14; --brand-2:#ff9a45; --grad:linear-gradient(135deg,#ef7a24,#ff9a45); --grad-soft:linear-gradient(135deg,rgba(239,122,36,.10),rgba(255,154,69,.10)); --brand-glow:rgba(239,122,36,.22); --brand-shadow:rgba(239,122,36,.28); --halo:rgba(239,122,36,.16); --halo-2:rgba(255,154,69,.12); } :root[data-mode="dark"] [data-theme], :root[data-mode="dark"] { --grad-soft:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); } /* ---------- 复位 ---------- */ * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif; font-size:var(--fs); line-height:1.6; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; } a { color:var(--brand-ink); text-decoration:none; transition:color .15s; } a:hover { filter:brightness(1.1); } img { max-width:100%; } /* ============================================================================ 壳布局：CSS Grid，侧栏定宽 + 主区 minmax(0,1fr)。 minmax(0,1fr) + main{min-width:0} 是根因修复：主区能收缩到内容以下， 宽内容（榜单表）在自己的滚动容器里横向滚动，绝不把整页撑出横向滚动条。 ============================================================================ */ body.admin-shell { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh; } nav.side { position:sticky; top:0; align-self:start; height:100vh; width:var(--side-w); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; background:var(--side-bg); background-image:radial-gradient(120% 60% at 0 0, var(--halo), transparent 55%); /* 品牌色光晕，随配色协调 */ color:var(--side-ink); padding:20px 0 14px; z-index:20; box-shadow:2px 0 16px rgba(20,26,40,.24); } main { min-width:0; padding:26px 34px; animation:rise .4s cubic-bezier(.2,.7,.2,1) both; } @keyframes rise { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} } /* 侧栏内部 */ nav.side .brand { color:#fff; font-weight:700; font-size:15px; letter-spacing:.3px; padding:0 20px 6px; display:flex; flex-direction:column; gap:2px; } /* 品牌标识：原创几何「上」标（自绘 SVG，无外部字体/位图依赖），替代原先的临时渐变色块。 用 mask 着色以适配侧栏深底；尺寸/间距与原色块一致，移动端侧栏布局不受影响。 */ nav.side .brand::before { content:""; width:26px; height:26px; margin-bottom:9px; background:linear-gradient(135deg,#43c88a,#2bb87c 55%,#9be3c4); -webkit-mask:url("brand/logo-mono.svg") no-repeat center/contain; mask:url("brand/logo-mono.svg") no-repeat center/contain; } nav.side .brand span { color:var(--side-ink-soft); font-size:12px; font-weight:500; } nav.side .navcap { color:#5b6478; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; padding:14px 20px 5px; } nav.side .navgroup { display:flex; flex-direction:column; } nav.side a { position:relative; color:var(--side-ink); padding:var(--nav-pad); font-size:var(--fs); transition:color .16s,background .16s; border-left:3px solid transparent; } nav.side a:hover { color:#fff; background:var(--side-hover); } nav.side a.on { color:#fff; background:rgba(255,255,255,.10); border-left-color:var(--brand-2); font-weight:600; } /* 图标化导航（企业控制台）：图标 + 文案对齐，选中态图标提亮为品牌色 */ nav.side .navgroup a { display:flex; align-items:center; gap:11px; } nav.side .nav-ico { width:17px; height:17px; flex:0 0 auto; opacity:.72; transition:opacity .16s,color .16s; } nav.side .navgroup a:hover .nav-ico { opacity:1; } nav.side .navgroup a.on .nav-ico { opacity:1; color:var(--brand-2); } nav.side .navgroup a > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } nav.side .spacer { flex:1; min-height:8px; } nav.side .navuser { padding:12px 20px 0; margin-top:8px; border-top:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:4px; } nav.side .navuser span { color:var(--side-ink-soft); font-size:12px; } nav.side .navuser a { padding:4px 0; color:var(--side-ink); font-size:12.5px; border-left:none; } /* 视觉模式切换（个人偏好，人人可用） */ .mode-toggle { display:flex; gap:6px; padding:8px 20px 2px; } .mode-toggle button { flex:1; background:rgba(255,255,255,.06); color:var(--side-ink); border:1px solid rgba(255,255,255,.10); box-shadow:none; padding:6px 4px; font-size:11.5px; font-weight:600; border-radius:var(--r-sm); cursor:pointer; transition:background .14s,color .14s,border-color .14s; } .mode-toggle button:hover { color:#fff; background:rgba(255,255,255,.12); } .mode-toggle button[aria-pressed="true"] { background:var(--btn); color:#fff; border-color:var(--btn); box-shadow:0 2px 8px var(--brand-shadow); } /* 品牌配色圆点：显式收窄 padding，避免撑破侧栏（曾致底部横向滚动条的根因之一，这里不靠隐藏遮盖） */ nav.side .theme-pick { display:grid; grid-template-columns:repeat(5,18px); align-items:center; gap:9px; width:100%; padding:8px 20px 2px; flex:none; } nav.side .theme-pick a { display:block; width:18px; min-width:18px; height:18px; margin:0; padding:0; border-left:0; border:2px solid transparent; border-radius:50%; cursor:pointer; transition:transform .12s,border-color .12s; } nav.side .theme-pick a:hover { transform:scale(1.15); } nav.side .theme-pick a.on { border-color:#fff; } .theme-pick .tg{background:#16a06a;} .theme-pick .tp{background:#5b6cf0;} .theme-pick .tb{background:#2d7ff9;} .theme-pick .tt{background:#0ea5a5;} .theme-pick .to{background:#ef7a24;} /* ---------- 排版 ---------- */ h1 { font-size:var(--fs-h1); font-weight:700; color:var(--ink); margin:2px 0 18px; letter-spacing:-.2px; } h1 .muted { letter-spacing:0; } .muted { color:var(--ink-soft); font-size:var(--fs-sm); font-weight:400; } .ok { color:var(--ok); } .bad { color:var(--danger); } /* ---------- 页头（企业级云控制台）：面包屑 · 标题 · 一句白话说明 · 右侧主动作 ---------- */ /* R23 阶段二：全部选择器前缀 body.r23s，仅本轮 10 个样板 route 生效，绝不影响非样板页。 */ body.r23s .pagehead { display:flex; flex-direction:column; gap:var(--sp-1); margin:0 0 var(--sp-6); } body.r23s .pagehead .crumbs { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-mute); line-height:1.4; } body.r23s .pagehead .crumbs a { color:var(--ink-soft); } body.r23s .pagehead .crumbs a:hover { color:var(--brand-ink); } body.r23s .pagehead .crumbs .sep { color:var(--line-2); font-size:11px; } body.r23s .pagehead .crumbs b { color:var(--ink-soft); font-weight:600; } body.r23s .pagehead__bar { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; } body.r23s .pagehead__bar h1 { margin:2px 0 0; } body.r23s .pagehead__desc { margin:var(--sp-1) 0 0; color:var(--ink-soft); font-size:13px; font-weight:400; line-height:1.55; max-width:74ch; } body.r23s .pagehead__act { display:flex; align-items:center; gap:var(--sp-2); flex:0 0 auto; padding-top:2px; } body.r23s .pagehead__act .tag { align-self:center; } body.r23s .pagehead__tabs { display:flex; gap:2px; margin:calc(-1 * var(--sp-3)) 0 var(--sp-4); border-bottom:1px solid var(--line); flex-wrap:wrap; } body.r23s .pagehead__tabs a { padding:8px 14px; font-size:13px; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; } body.r23s .pagehead__tabs a:hover { color:var(--brand-ink); } body.r23s .pagehead__tabs a.on { color:var(--brand-ink); border-bottom-color:var(--brand); font-weight:600; } @media (max-width:560px) { body.r23s .pagehead__bar { flex-direction:column; } body.r23s .pagehead__act { width:100%; } } /* ============================================================================ R23 阶段二样板皮肤 —— 仅 body.r23s（本轮 10 个样板 route）生效。 未经 Codex 逐图批准，绝不把此标记扩到全站；未列入样板的页面保持原基准外观。 企业级细化：圆角收敛 8–10、正文 14/辅助 12、统计数字实色墨、卡片左对齐。 ============================================================================ */ body.r23s { --r:10px; --r-sm:8px; --r-xs:6px; --fs:14px; --fs-sm:12px; --fs-h1:19px; --pad-card:16px 18px; } body.r23s .stat { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--ink); font-weight:700; font-size:26px; letter-spacing:-.3px; } body.r23s .grid .card { text-align:left; padding:16px 18px; } body.r23s .grid .card::before { display:none; } body.r23s .grid .card:hover .stat { transform:none; } /* 专业空状态（真实：说明 + 权限允许的下一步路径，绝不造假数据/假图表） */ body.r23s .emptystate { text-align:center; padding:36px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; } body.r23s .emptystate .es-ic { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--panel-3); color:var(--ink-soft); } body.r23s .emptystate .es-ic .ui-ico { width:22px; height:22px; } body.r23s .emptystate b { font-size:15px; color:var(--ink); } body.r23s .emptystate p { margin:0; max-width:54ch; color:var(--ink-soft); font-size:13px; line-height:1.6; } /* 自动上品：分组表单（筛选开关网格 / 补给参数字段网格 / 排除规则表）+ 运行控制工具栏 */ body.r23s .auto-sec { margin-bottom:var(--sp-4); } body.r23s .auto-sec:last-child { margin-bottom:0; } body.r23s .auto-sec__hd { font-size:13px; font-weight:700; color:var(--ink); margin:0 0 2px; } body.r23s .auto-sec__sub { font-size:12px; color:var(--ink-soft); margin:0 0 10px; line-height:1.5; } body.r23s .auto-toolbar { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; } body.r23s .auto-toolbar form { margin:0; } body.r23s .auto-checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:8px 12px; } body.r23s .auto-checks label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); padding:8px 11px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); cursor:pointer; transition:border-color .14s; } body.r23s .auto-checks label:hover { border-color:var(--brand); } body.r23s .auto-checks input[type=checkbox] { flex:0 0 auto; margin:0; } body.r23s .auto-fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:14px 16px; } body.r23s .auto-fields .fld { display:flex; flex-direction:column; gap:4px; min-width:0; } body.r23s .auto-fields .fld > span { font-size:12.5px; font-weight:600; color:var(--ink); } body.r23s .auto-fields .fld input { width:100%; box-sizing:border-box; } body.r23s .auto-fields .fld small { font-size:11.5px; color:var(--ink-soft); line-height:1.45; } body.r23s .auto-extable input[type=text], body.r23s .auto-extable input:not([type]), body.r23s .auto-extable input[type=number] { width:100%; box-sizing:border-box; } body.r23s .auto-extable th, body.r23s .auto-extable td { padding:6px 10px; } /* ---------- 面板 ---------- */ .card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:var(--pad-card); margin-bottom:var(--gap); box-shadow:var(--shadow); transition:box-shadow .18s,border-color .18s; } .card:hover { border-color:var(--line-2); } .row-head { width:100%; margin-bottom:10px; font-weight:700; color:var(--ink); font-size:14px; } .row { display:flex; justify-content:space-between; padding:5px 0; } /* ---------- 概览统计卡 ---------- */ .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px; } .grid .card { text-align:center; padding:22px 14px; cursor:default; position:relative; overflow:hidden; } .grid .card::before { content:""; position:absolute; inset:0; background:var(--grad-soft); opacity:0; transition:opacity .25s; } .grid .card:hover::before { opacity:1; } .grid .card > * { position:relative; } .grid .card > div:last-child { color:var(--ink-soft); font-size:var(--fs-sm); margin-top:4px; } .stat { font-size:30px; font-weight:800; line-height:1.1; letter-spacing:-.5px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; transition:transform .22s; } .grid .card:hover .stat { transform:scale(1.05); } /* ---------- 反馈条 / Toast ---------- */ .flash { background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok-ink); padding:11px 15px; border-radius:var(--r-sm); margin:12px 0; font-size:13px; animation:drop .3s ease both; } .flash.err { background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger-ink); } @keyframes drop { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:none;} } .toast-host { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:60; } .toast { background:var(--panel); border:1px solid var(--line-2); color:var(--ink); padding:11px 15px; border-radius:var(--r-sm); box-shadow:var(--shadow-lg); font-size:13px; animation:drop .25s ease both; } .toast.ok { border-left:3px solid var(--ok); } .toast.err { border-left:3px solid var(--danger); } /* ---------- 空状态 / 加载骨架 ---------- */ .empty { text-align:center; color:var(--ink-soft); padding:40px 16px; } .empty .emoji { font-size:34px; opacity:.5; display:block; margin-bottom:8px; } .skeleton { position:relative; overflow:hidden; background:var(--panel-3); border-radius:var(--r-sm); } .skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(125,140,170,.12),transparent); animation:sk 1.2s infinite; } @keyframes sk { to{transform:translateX(100%);} } /* ---------- 登录页 ---------- */ .login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; background:var(--bg-2); background-image:radial-gradient(60% 55% at 50% 0,var(--halo),transparent 70%),radial-gradient(50% 50% at 90% 100%,var(--halo-2),transparent 70%); } /* 品牌色，随配色协调，不写死紫 */ .login { width:min(340px,100%); box-shadow:var(--shadow-lg); animation:rise .4s cubic-bezier(.2,.7,.2,1) both; } .login h2 { font-size:19px; font-weight:700; margin:0 0 4px; } .login .muted { display:block; margin-bottom:18px; } .login input { display:block; width:100%; margin-bottom:12px; } .login button { width:100%; margin-top:4px; } .login-tabs { display:flex; margin:0 0 16px; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; } .login-tabs .ltab { flex:1; width:auto; margin:0; padding:9px 8px; background:var(--panel); border:none; border-radius:0; color:var(--ink-soft); font-size:13px; font-weight:600; cursor:pointer; transition:background .12s,color .12s; box-shadow:none; } .login-tabs .ltab + .ltab { border-left:1px solid var(--line-2); } .login-tabs .ltab.on { background:var(--btn); color:#fff; } /* 管理后台：主要方式(验证器动态码) / 备用方式(账号密码) 的层级副标 */ .login-tabs .ltab small { display:block; font-size:10.5px; font-weight:400; opacity:.72; margin-top:1px; } .captcha-row { display:flex; gap:8px; align-items:stretch; margin-bottom:12px; } .captcha-row input { flex:1; width:auto; min-width:0; margin-bottom:0; } .captcha-img { flex:none; width:130px; height:44px; border:1px solid var(--line-2); border-radius:var(--r-sm); cursor:pointer; background:#fff; } /* ---------- 榜单宽表：只在 .pool-wrap 内横向滚动，字段完整不删 ---------- */ .pool-wrap { width:100%; max-width:100%; max-height:calc(100vh - 250px); overflow:auto; border:1px solid var(--line-2); border-radius:var(--r-sm); overscroll-behavior:contain; } .pool-table { width:max-content; min-width:2827px; border-collapse:collapse; font-size:13px; background:var(--panel); } .pool-table thead th { position:sticky; top:0; z-index:1; background:var(--panel-3); padding:8px 10px; text-align:left; font-weight:700; color:var(--ink); border:1px solid var(--line-2); white-space:nowrap; } .pool-table td { padding:8px 10px; border:1px solid var(--line); vertical-align:top; } .pool-table th.num, .pool-table td.num { text-align:right; white-space:nowrap; vertical-align:middle; } .pool-table tbody tr:hover { background:var(--panel-2); } .pool-table .pool-prod { display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:start; } .pool-table .pool-thumb { width:60px; height:60px; object-fit:cover; border-radius:5px; border:1px solid var(--line); display:block; } .pool-table .pool-title { font-weight:700; color:var(--brand-ink); white-space:normal; word-break:break-word; line-height:1.4; } .pool-table .pool-sub { margin-top:4px; color:var(--ink-soft); font-size:12px; white-space:normal; word-break:break-word; } .pool-table .pool-chip { display:inline-block; margin:0 4px 4px 0; padding:2px 6px; border-radius:4px; background:var(--panel-3); color:var(--brand-ink); white-space:nowrap; font-size:12px; } .pool-table .pool-rate { font-size:12px; margin-top:2px; } /* ---------- 表单控件 ---------- */ input, select, textarea { padding:9px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:var(--fs); color:var(--ink); background:var(--panel); transition:border-color .16s,box-shadow .16s; } input::placeholder { color:var(--ink-mute); } input:focus, select:focus, textarea:focus { border-color:var(--brand); outline:none; box-shadow:var(--focus); } .pricing-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; } .pricing-row label { display:flex; flex-direction:column; font-size:12px; color:var(--ink-soft); gap:4px; } .pricing-row input, .pricing-row select { width:130px; } /* ---------- 按钮 ---------- */ button { background:var(--btn); color:#fff; border:none; cursor:pointer; padding:9px 18px; border-radius:var(--r-sm); font-size:var(--fs); font-weight:600; box-shadow:0 2px 6px var(--brand-shadow); transition:box-shadow .18s,filter .18s,transform .05s; } button:hover { filter:brightness(1.06); box-shadow:0 4px 12px var(--brand-shadow); } button:active { transform:translateY(1px); filter:brightness(.97); box-shadow:0 1px 3px var(--brand-shadow); } .btn-sm { padding:5px 14px; font-size:12px; } .btn-plain { background:var(--panel); color:var(--ink); border:1px solid var(--line-2); box-shadow:none; font-weight:500; } .btn-plain:hover { filter:none; background:var(--panel-3); border-color:var(--line-2); box-shadow:var(--shadow); } /* 主/次/危险三级按钮， 与