/* ============================================================================ GEO-fresh 皮肤 —— 2026-09-14 创始人定：「智慧官网的设计风格和标准完全向 GEO-fresh 对齐； SaaS 平台的风格、logo、租户的设计风格完全对齐 GEO-fresh；这两天的渠道状态、问题状态 BI 呈现不要改。」 ──────────────────────────────────────────────────────────────────────────── 对照的源头（只读，GEO 仓一行没改）： GEO-fresh/app/src/styles.css :root 令牌、侧边栏重构、运营总后台深色玻璃（.shell.console） GEO-fresh/app/src/App.tsx 两个外壳的结构（side-brand / side-nav / side-foot / topbar ws-context） GEO-fresh/app/src/brandTheme.ts 租户主色 → --brand，deep/soft/weak 全从它派生 GEO-fresh/app/public/logo-mark.svg / favicon.svg Forming 鱼眼标识（原样拷到 console/public/） 用法：，本文件排在 skin-feishu.css 与 question-status.css 之后。 撤销：删掉 index.html 上的 data-geo 和两行 （本文件、login-geo.css）即可回到飞书皮肤—— main.ts / login-screen.ts 的外壳结构改动不依赖本文件也能跑，只是没有 GEO 的长相。 四条纪律： 1. 选择器一律以 `:root[data-skin][data-geo]` 打头（0,3,0），稳压飞书皮肤的 `:root[data-skin="feishu"]`（0,2,0）。 2. **渠道状态 / 问题状态两页的内容区锁回原样**：main.ts 在 .view 上挂 data-bi， 本文件第 2 节在 .view[data-bi] 上把改过的令牌逐个写回飞书浅色原值； 第 4 节所有组件级改动都限定在 `.view:not([data-bi])` 里。这两页只有外壳（左栏、顶栏、页头）跟着换。 3. GEO 的工作区只有浅色。所以 GEO 浅色令牌只在「实际是浅色」时生效（显式浅色，或跟随系统且系统是浅色）； 选了深色的人仍然是飞书深色，BI 两页在深色下也一个像素不变。运营总后台恒为 GEO 深色玻璃（第 5 节）。 4. 只用 app.css 已有的令牌名；新增的 --brand* / --geo-* 只在本文件里定义和使用（幽灵 token 守卫的规则 2）。 指纹：skin-geo-r1 ============================================================================ */ /* ── 0. 与深浅无关的品牌派生（照 GEO .shell：只注入 --brand，其余从它派生）────────── */ :root[data-skin][data-geo] { --brand: #3C7FFF; /* Forming 品牌蓝。main.ts 进工作区时在 行内改成租户主色 */ --brand-deep: color-mix(in srgb, var(--brand) 82%, #000); --brand-soft: color-mix(in srgb, var(--brand) 13%, var(--surface)); --brand-weak: color-mix(in srgb, var(--brand) 5%, var(--surface)); --geo-accent2: #33D6C0; /* 品牌青，只在总后台用 */ --geo-glow: transparent; --geo-r: 14px; --geo-shadow-lift: 0 3px 6px rgba(20,23,31,.06), 0 14px 32px rgba(20,23,31,.10); } /* ── 1. GEO 浅色令牌（styles.css :root 同值）────────────────────────────────── */ @media (prefers-color-scheme: light) { :root[data-skin][data-geo]:not([data-theme="dark"]) { --ground: #f7f8fa; --surface: #ffffff; --surface-2: #f5f6f8; --sunken: #f0f2f5; --line: #e6e8ec; --line-soft: #eef0f3; --ink: #1a1c1f; --ink-2: #585e68; --ink-3: #969ca6; --accent: var(--brand); --accent-ink: #ffffff; --accent-wash: color-mix(in srgb, var(--brand) 8%, #fff); --accent-line: color-mix(in srgb, var(--brand) 28%, #fff); --ok: #1f9254; --ok-wash: #e7f4ec; --warn: #b07505; --warn-wash: #fbf0d9; --bad: #c8102e; --bad-wash: #fbe9ec; --idle: #969ca6; --idle-wash: #f0f2f5; --shadow: 0 1px 2px rgba(20,23,31,.04), 0 2px 10px rgba(20,23,31,.035); --geo-glow: color-mix(in srgb, var(--brand) 5%, transparent); } } :root[data-skin][data-geo][data-theme="light"] { --ground: #f7f8fa; --surface: #ffffff; --surface-2: #f5f6f8; --sunken: #f0f2f5; --line: #e6e8ec; --line-soft: #eef0f3; --ink: #1a1c1f; --ink-2: #585e68; --ink-3: #969ca6; --accent: var(--brand); --accent-ink: #ffffff; --accent-wash: color-mix(in srgb, var(--brand) 8%, #fff); --accent-line: color-mix(in srgb, var(--brand) 28%, #fff); --ok: #1f9254; --ok-wash: #e7f4ec; --warn: #b07505; --warn-wash: #fbf0d9; --bad: #c8102e; --bad-wash: #fbe9ec; --idle: #969ca6; --idle-wash: #f0f2f5; --shadow: 0 1px 2px rgba(20,23,31,.04), 0 2px 10px rgba(20,23,31,.035); --geo-glow: color-mix(in srgb, var(--brand) 5%, transparent); } /* ── 2. BI 两页锁回飞书浅色原值（值逐个抄自 skin-feishu.css 第 1 节）─────────────── 只在浅色条件下写回；深色下根上本来就是飞书深色，没改过，不用锁。 */ @media (prefers-color-scheme: light) { :root[data-skin][data-geo]:not([data-theme="dark"]) .view[data-bi] { --ground: #f5f6f7; --surface: #ffffff; --surface-2: #fafbfc; --sunken: #f2f3f5; --line: #dee0e3; --line-soft: #eff0f1; --ink: #1f2329; --ink-2: #646a73; --ink-3: #8f959e; --accent: #3370ff; --accent-ink: #ffffff; --accent-wash: #f0f4ff; --accent-line: #c2d5ff; --ok: #1f7a16; --ok-wash: #e8f7e4; --warn: #a85b00; --warn-wash: #fff3e0; --bad: #c4342f; --bad-wash: #fdedec; --idle: #8f959e; --idle-wash: #f2f3f5; --shadow: 0 1px 3px rgba(31,35,41,.05), 0 4px 12px rgba(31,35,41,.04); } } :root[data-skin][data-geo][data-theme="light"] .view[data-bi] { --ground: #f5f6f7; --surface: #ffffff; --surface-2: #fafbfc; --sunken: #f2f3f5; --line: #dee0e3; --line-soft: #eff0f1; --ink: #1f2329; --ink-2: #646a73; --ink-3: #8f959e; --accent: #3370ff; --accent-ink: #ffffff; --accent-wash: #f0f4ff; --accent-line: #c2d5ff; --ok: #1f7a16; --ok-wash: #e8f7e4; --warn: #a85b00; --warn-wash: #fff3e0; --bad: #c4342f; --bad-wash: #fdedec; --idle: #8f959e; --idle-wash: #f2f3f5; --shadow: 0 1px 3px rgba(31,35,41,.05), 0 4px 12px rgba(31,35,41,.04); } /* 继承下来的字色、字体是在 body 上按 GEO 令牌算好的值，光改令牌锁不住——在这里按锁回的令牌重算一次 */ :root[data-skin][data-geo] .view[data-bi] { color: var(--ink); font-family: var(--fs-cjk); } /* ============================================================================ 3. 外壳（照 GEO-fresh App.tsx + styles.css「侧边栏导航重构」） ============================================================================ */ :root[data-skin][data-geo] body { font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } /* 主区底色：极淡的双色光晕，避免大白板（GEO「运营总览视觉优化 v3」.main） */ :root[data-skin][data-geo] .stage { background: radial-gradient(1100px 520px at 12% -8%, var(--geo-glow), transparent 62%), var(--ground); min-height: 100vh; } /* ── 3.1 左栏 ── */ :root[data-skin][data-geo] .rail { background: var(--surface); border-right: 1px solid var(--line); } :root[data-skin][data-geo] .side-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; } :root[data-skin][data-geo] .side-logo { width: 34px; height: 34px; border-radius: 9px; flex: none; object-fit: contain; padding: 3px; background: #fff; border: 1px solid var(--line); } :root[data-skin][data-geo] .side-logo.mono { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 16px; font-weight: 700; color: #fff; background: var(--brand); border: 0; } :root[data-skin][data-geo] .side-logo.eye { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; padding: 3px; background: radial-gradient(125% 125% at 42% 32%, rgba(70, 140, 255, .5), rgba(18, 30, 56, .96)); border: 1px solid rgba(140, 175, 235, .34); box-shadow: 0 0 26px rgba(60, 127, 255, .38), inset 0 1px 0 rgba(180, 210, 255, .22), inset 0 0 18px rgba(51, 214, 192, .14); } :root[data-skin][data-geo] .side-logo.eye img { width: 100%; height: 100%; display: block; } :root[data-skin][data-geo] .side-brand-tx { min-width: 0; display: flex; flex-direction: column; } :root[data-skin][data-geo] .side-brand-tx b { font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: .2px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin][data-geo] .side-brand-tx span { font-weight: 500; font-size: 10.5px; color: var(--ink-3); letter-spacing: 1.2px; margin-top: 1px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 导航：组名是可折叠的小按钮；选中 = 品牌浅底 + 品牌字 + 左侧 3px 指示条（随租户换色） */ :root[data-skin][data-geo] .nav { padding: 4px 10px 16px; gap: 2px; } :root[data-skin][data-geo] .nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; } :root[data-skin][data-geo] .nav-group:first-child { margin-top: 2px; } :root[data-skin][data-geo] .nav-group.plain { margin-top: 10px; } :root[data-skin][data-geo] .nav-group.plain:first-child { margin-top: 2px; } :root[data-skin][data-geo] .nav-gap { display: none; } :root[data-skin][data-geo] .nav-label { appearance: none; display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: none; color: var(--ink-3); padding: 4px 10px 6px; transition: color .15s ease; } :root[data-skin][data-geo] .nav-label:hover { color: var(--ink-2); } :root[data-skin][data-geo] .nav-label:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 6px; } :root[data-skin][data-geo] .nav-label .ng-chevron { flex-shrink: 0; opacity: .6; transition: transform .18s ease, opacity .15s ease; } :root[data-skin][data-geo] .nav-label:hover .ng-chevron { opacity: 1; } :root[data-skin][data-geo] .nav-group.collapsed .ng-chevron { transform: rotate(-90deg); } :root[data-skin][data-geo] .nav-group.collapsed .nav-item { display: none; } :root[data-skin][data-geo] .nav-item { position: relative; gap: 10px; padding: 8px 10px; border-radius: 9px; font-family: inherit; font-size: 13.5px; font-weight: 400; color: var(--ink-2); transition: background .15s ease, color .15s ease; } :root[data-skin][data-geo] .nav-item:hover { background: var(--sunken); color: var(--ink); } :root[data-skin][data-geo] .nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; box-shadow: none; } :root[data-skin][data-geo] .nav-item[aria-current="page"]::before { content: ""; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 3px; border-radius: 99px; background: var(--brand); } :root[data-skin][data-geo] .nav-item[data-view] .dot { width: 17px; height: 17px; background: var(--ink-3); } :root[data-skin][data-geo] .nav-item[data-view]:hover .dot { background: var(--ink-2); } :root[data-skin][data-geo] .nav-item[data-view][aria-current="page"] .dot { background: var(--brand); } :root[data-skin][data-geo] .nav-item[aria-current="page"] .nav-badge { background: var(--surface); color: var(--brand); } /* ── 3.2 左栏底部：返回总后台（虚线按钮）+ 账号卡（GEO side-foot / side-account）── */ :root[data-skin][data-geo] .rail-foot { margin-top: auto; padding: 10px 12px 14px; border-top: 0; gap: 10px; } :root[data-skin][data-geo] .rail-foot .btn.back { width: 100%; justify-content: center; color: var(--ink-3); border-style: dashed; background: transparent; } :root[data-skin][data-geo] .rail-foot .btn.back:hover { color: var(--bad); border-color: var(--bad); border-style: solid; background: transparent; } :root[data-skin][data-geo] .rail-account { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--line); gap: 6px; } :root[data-skin][data-geo] .acct-card { gap: 9px; padding: 7px 8px; margin-left: 0; border-radius: 10px; transition: background .15s ease; } :root[data-skin][data-geo] .acct-card:hover { background: var(--sunken); } :root[data-skin][data-geo] .acct-ava { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; } :root[data-skin][data-geo] .acct-tx b { font-size: 13px; font-weight: 600; color: var(--ink); } :root[data-skin][data-geo] .acct-logout { width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); display: grid; place-items: center; transition: all .15s ease; } :root[data-skin][data-geo] .acct-logout:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-wash); } :root[data-skin][data-geo] .side-foot-tag { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: .4px; padding: 6px 4px 0; border-top: 1px dashed var(--line); } :root[data-skin][data-geo][data-shell="ops"] .side-foot-tag { border-top-color: var(--line-soft); } /* 设置 › 我的账号 顶部个人卡（GEO acct-hero-ava） */ :root[data-skin][data-geo] .acct-hero-ava { width: 52px; height: 52px; border-radius: 14px; background: var(--brand); color: #fff; font-weight: 700; font-size: 22px; } /* ── 3.3 顶栏（GEO .app-right .topbar：54px，左边在哪个工作区，右边工具）── */ :root[data-skin][data-geo] .geo-top { position: sticky; top: 0; z-index: 30; } :root[data-skin][data-geo] .geo-top .ops-watch { position: static; } :root[data-skin][data-geo] .geo-bar { height: 54px; padding: 0 22px 0 28px; display: flex; align-items: center; gap: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(10px); backdrop-filter: saturate(1.5) blur(10px); border-bottom: 1px solid var(--line); } :root[data-skin][data-geo] .ws-context { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; } :root[data-skin][data-geo] .tenant-pill { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--ink-2); background: var(--sunken); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; } :root[data-skin][data-geo] .tenant-pill svg { flex: none; color: var(--ink-3); } :root[data-skin][data-geo] .tenant-pill .tenant { font-size: 13px; font-weight: 600; color: var(--ink); gap: 6px; white-space: nowrap; } :root[data-skin][data-geo] .tenant-pill .tenant-domain { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; border-left: 1px solid var(--line); } :root[data-skin][data-geo] .forming-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-soft); padding: 5px 11px; border-radius: 99px; white-space: nowrap; } :root[data-skin][data-geo] .forming-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--geo-accent2); box-shadow: 0 0 8px var(--geo-accent2); } :root[data-skin][data-geo] .top-right { display: flex; align-items: center; gap: 14px; } :root[data-skin][data-geo] .geo-bar .tenant-switch { margin-top: 0; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 2px 4px; background: var(--surface); } :root[data-skin][data-geo] .geo-bar .tenant-switch select { width: auto; max-width: 220px; border: 0; background-color: transparent; font-family: inherit; font-size: 13px; color: var(--ink); padding: 3px 22px 3px 6px; } :root[data-skin][data-geo] .data-chip:empty { display: none; } /* 代看条（GEO 服务商的「当前客户」常驻条）：品牌极淡底，客户名加粗 */ :root[data-skin][data-geo] .ops-watch { padding: 8px 22px 8px 28px; background: var(--brand-weak); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13px; } /* ── 3.4 页头（GEO .page-head：21px 700 标题 + 12.5px 说明，不再是一条白底带下边线的横条）── */ :root[data-skin][data-geo] .topbar { padding: 22px 28px 0; background: transparent; border-bottom: 0; align-items: flex-end; } :root[data-skin][data-geo] .topbar h1 { font-size: 21px; font-weight: 700; letter-spacing: .01em; color: var(--ink); } :root[data-skin][data-geo] .topbar p { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); } /* ============================================================================ 4. 组件（GEO .btn / .panel / select / 表格）。只作用于非 BI 视图、左栏、顶栏与弹层 ============================================================================ */ :root[data-skin][data-geo] :is(.view:not([data-bi]), .rail, .geo-bar, .sheet, .toast) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 7px 14px; font-family: inherit; font-size: 13px; font-weight: 600; transition: all .15s; } :root[data-skin][data-geo] :is(.view:not([data-bi]), .rail, .geo-bar, .sheet, .toast) .btn:hover:not([disabled]) { border-color: var(--ink-3); background: var(--surface); } :root[data-skin][data-geo] :is(.view:not([data-bi]), .rail, .geo-bar, .sheet, .toast) .btn:active:not([disabled]) { transform: scale(.97); } :root[data-skin][data-geo] :is(.view:not([data-bi]), .rail, .geo-bar, .sheet, .toast) .btn.small { padding: 4px 10px; font-size: 12px; } :root[data-skin][data-geo] :is(.view:not([data-bi]), .rail, .geo-bar, .sheet, .toast) .btn.ghost { background: transparent; color: var(--ink-2); } :root[data-skin][data-geo] :is(.view:not([data-bi]), .rail, .geo-bar, .sheet, .toast) .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } :root[data-skin][data-geo] :is(.view:not([data-bi]), .rail, .geo-bar, .sheet, .toast) .btn.primary:hover:not([disabled]) { background: var(--brand-deep); border-color: var(--brand-deep); filter: none; box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 25%, transparent); } :root[data-skin][data-geo] :is(.view:not([data-bi]), .sheet) .btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; } /* 面板：14px 圆角 + 柔和多层阴影（GEO「视觉优化 v3」.panel / .op-kpi） */ :root[data-skin][data-geo] .view:not([data-bi]) .card, :root[data-skin][data-geo] .view:not([data-bi]) .readouts { border: 1px solid var(--line); border-radius: var(--geo-r); box-shadow: var(--shadow); } :root[data-skin][data-geo] .view:not([data-bi]) .card-head { padding: 13px 16px 11px; border-bottom-color: var(--line-soft); } :root[data-skin][data-geo] .view:not([data-bi]) .card-head h2 { font-size: 13.5px; font-weight: 600; } :root[data-skin][data-geo] .view:not([data-bi]) .readout-val { font-weight: 700; } /* 表头：不再是等宽大写小字（GEO .ent-table thead th） */ :root[data-skin][data-geo] .view:not([data-bi]) .tbl th { font-family: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: .03em; text-transform: none; color: var(--ink-3); } :root[data-skin][data-geo] .view:not([data-bi]) .tbl tbody tr { transition: background .12s; } :root[data-skin][data-geo] .view:not([data-bi]) .tbl tbody tr:hover { background: color-mix(in srgb, var(--brand) 3%, transparent); } /* 下拉框：去原生箭头 + 自绘 chevron + 品牌色聚焦环（GEO「全局统一下拉框」） */ :root[data-skin][data-geo] :is(.view:not([data-bi]), .sheet) select { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: 12.5px; color: var(--ink); background-color: var(--surface); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23969ca6'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 30px 6px 11px; } :root[data-skin][data-geo] .geo-bar select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23969ca6'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 13px; } :root[data-skin][data-geo] :is(.view:not([data-bi]), .sheet) :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea):focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); outline: none; } /* 弹层与提示 */ :root[data-skin][data-geo] .sheet { border-radius: var(--geo-r); } :root[data-skin][data-geo] .toast > div { border-radius: 10px; border-left-color: var(--brand); } :root[data-skin][data-geo] .toast > div.bad { border-left-color: var(--bad); } :root[data-skin][data-geo] .toast > div.ok { border-left-color: var(--ok); } /* ============================================================================ 5. 运营总后台：深色玻璃 + WebGL 流光（GEO .shell.console，逐条移植） （main.ts applyShell 挂）。特异性 0,4,0 且排在第 1 节之后，压住浅色与飞书深色。 ============================================================================ */ :root[data-skin][data-geo][data-shell="ops"] { color-scheme: dark; --ground: #05070E; --surface: rgba(21, 29, 49, .55); --surface-2: rgba(31, 42, 68, .6); --sunken: rgba(120, 150, 210, .08); --line: rgba(122, 152, 214, .16); --line-soft: rgba(122, 152, 214, .09); --ink: #EAF1FF; --ink-2: #9FB0CE; --ink-3: #6E7D9E; --brand: #3C7FFF; --brand-deep: color-mix(in srgb, var(--brand) 42%, #fff); --brand-soft: color-mix(in srgb, var(--brand) 20%, transparent); --brand-weak: color-mix(in srgb, var(--brand) 12%, transparent); --accent: #5B9BFF; --accent-ink: #04101f; --accent-wash: color-mix(in srgb, var(--brand) 20%, transparent); --accent-line: color-mix(in srgb, var(--brand) 50%, transparent); --ok: #33D6C0; --ok-wash: rgba(51, 214, 192, .15); --warn: #F5B451; --warn-wash: rgba(245, 180, 81, .15); --bad: #FF6B7A; --bad-wash: rgba(255, 107, 122, .15); --idle: #6E7D9E; --idle-wash: rgba(122, 152, 214, .1); --shadow: 0 8px 30px rgba(2, 5, 14, .5); --geo-glow: transparent; } /* WebGL 背景层：固定铺满视口，内容玻璃透出流光；WebGL 不可用时由 fallback 渐变兜底 */ :root[data-skin][data-geo] .console-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; } :root[data-skin][data-geo] .console-bg-fallback { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% -8%, rgba(60, 127, 255, .22), transparent 55%), radial-gradient(90% 70% at 85% 15%, rgba(51, 214, 192, .12), transparent 60%), linear-gradient(180deg, #080C1A, #05070E); } :root[data-skin][data-geo] .console-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } :root[data-skin][data-geo][data-shell="ops"] .rail { z-index: 2; } :root[data-skin][data-geo][data-shell="ops"] .stage { position: relative; z-index: 1; background: transparent; } /* 侧栏：深色玻璃 */ :root[data-skin][data-geo][data-shell="ops"] .rail { background: linear-gradient(180deg, rgba(12, 18, 34, .72), rgba(8, 12, 24, .55)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 1px solid var(--line-soft); } :root[data-skin][data-geo][data-shell="ops"] .side-brand-tx b { color: #F2F7FF; } :root[data-skin][data-geo][data-shell="ops"] .nav-item { color: var(--ink-2); } :root[data-skin][data-geo][data-shell="ops"] .nav-item:hover { background: rgba(122, 152, 214, .08); color: var(--ink); } :root[data-skin][data-geo][data-shell="ops"] .nav-item[aria-current="page"] { color: #fff; background: linear-gradient(90deg, var(--brand-soft), transparent); font-weight: 600; } :root[data-skin][data-geo][data-shell="ops"] .nav-item[data-view][aria-current="page"] .dot { background: var(--geo-accent2); } :root[data-skin][data-geo][data-shell="ops"] .nav-item[aria-current="page"]::before { background: linear-gradient(180deg, var(--geo-accent2), var(--brand)); box-shadow: 0 0 10px var(--brand); } :root[data-skin][data-geo][data-shell="ops"] .rail-account { border-top-color: var(--line-soft); } :root[data-skin][data-geo][data-shell="ops"] .acct-card:hover { background: rgba(122, 152, 214, .08); } :root[data-skin][data-geo][data-shell="ops"] .acct-tx b { color: #F2F7FF; } :root[data-skin][data-geo][data-shell="ops"] .acct-logout { border-color: var(--line-soft); color: var(--ink-2); } :root[data-skin][data-geo][data-shell="ops"] .acct-logout:hover { color: #ff8a8a; border-color: #ff8a8a; background: rgba(255, 138, 138, .1); } /* 顶栏 */ :root[data-skin][data-geo][data-shell="ops"] .geo-bar { background: rgba(10, 15, 28, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } /* 切工作区的下拉只属于工作区外壳（GEO 总后台顶栏右边只有告警铃） */ :root[data-skin][data-geo][data-shell="ops"] .geo-bar .tenant-switch { display: none; } :root[data-skin][data-geo][data-shell="ops"] .forming-pill { color: #CFE0FF; border-color: color-mix(in srgb, var(--brand) 40%, transparent); } /* 标题：渐变字 */ :root[data-skin][data-geo][data-shell="ops"] .topbar h1 { background: linear-gradient(92deg, #fff, #CFE0FF 60%, #BFFFEF); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-skin][data-geo][data-shell="ops"] .topbar p { color: var(--ink-2); } /* 面板：玻璃 */ :root[data-skin][data-geo][data-shell="ops"] .view .card, :root[data-skin][data-geo][data-shell="ops"] .view .readouts { background: var(--surface); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); } /* 读数条：顶部渐变 hairline（GEO .op-kpi::before） */ :root[data-skin][data-geo][data-shell="ops"] .view .readouts { position: relative; } :root[data-skin][data-geo][data-shell="ops"] .view .readouts::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--geo-accent2), var(--brand)); opacity: .9; } /* 表格 */ :root[data-skin][data-geo][data-shell="ops"] .view .tbl tbody tr:hover { background: rgba(60, 127, 255, .07); } /* 表单控件 */ :root[data-skin][data-geo][data-shell="ops"] input::placeholder, :root[data-skin][data-geo][data-shell="ops"] textarea::placeholder { color: var(--ink-3); } :root[data-skin][data-geo][data-shell="ops"] select option { background: #0d1323; color: var(--ink); } :root[data-skin][data-geo][data-shell="ops"] :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { background-color: var(--surface-2); color: var(--ink); border-color: var(--line); } :root[data-skin][data-geo][data-shell="ops"] :is(input, textarea, select):focus { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); outline: none; } /* 按钮：主按钮青→蓝渐变、暗字发光 */ :root[data-skin][data-geo][data-shell="ops"] :is(.view, .rail, .geo-bar, .sheet) .btn { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); } :root[data-skin][data-geo][data-shell="ops"] :is(.view, .rail, .geo-bar, .sheet) .btn:hover:not([disabled]) { background: var(--surface); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--ink); } :root[data-skin][data-geo][data-shell="ops"] :is(.view, .rail, .geo-bar, .sheet) .btn.primary { background: linear-gradient(100deg, var(--geo-accent2), var(--brand)); border-color: transparent; color: #04101f; box-shadow: 0 6px 20px rgba(60, 127, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .25); } :root[data-skin][data-geo][data-shell="ops"] :is(.view, .rail, .geo-bar, .sheet) .btn.primary:hover:not([disabled]) { filter: brightness(1.05); box-shadow: 0 8px 26px rgba(60, 127, 255, .42); } :root[data-skin][data-geo][data-shell="ops"] :is(.view, .sheet) .btn.danger { background: rgba(255, 90, 106, .18); border-color: rgba(255, 107, 122, .5); color: #FFB4BC; } /* 弹层：令牌是半透明玻璃，弹层底下没有东西垫着，要给实底 */ :root[data-skin][data-geo][data-shell="ops"] .sheet { background: #0d1323; border-color: var(--line); } :root[data-skin][data-geo][data-shell="ops"] .sheet::backdrop { background: rgba(2, 5, 14, .7); } :root[data-skin][data-geo][data-shell="ops"] .toast > div { background: #0d1323; } @media (prefers-reduced-motion: reduce) { :root[data-skin][data-geo] .nav-label .ng-chevron { transition: none; } }