/* ============================================================ skins.css — 六套皮肤（明暗双主题）· **自动生成，请勿手改** 生成器：admin/css/gen-skins.py （改样式后重跑本脚本） 结构： ① 归一化层 —— 把既有 267 处硬编码色值改为 var(--skin-*) 选择器加 :root[data-skin] 前缀（特异性 0,3,0 > 既有最高 0,2,0） ⇒ 稳定覆盖且**不需要 !important**（全项目零 !important，已实测） ② 角色变量层 —— 12 组（6 皮肤 × 明/暗） ③ 令牌重映射层 —— 三域都要覆盖（否则"一半页面不变色"）： :root 全站 / .ui2 （5 个视图）/ .poa （订单·分析） ④ 形态叠加层 —— 模糊 / 衬线 / 渐变顶栏 / 等宽数字（非颜色差异） ============================================================ */ /* ══════ ① 归一化层（179 条规则 / 236 处色值）══════ */ :root[data-skin] .admin-body{background:var(--skin-bg)} :root[data-skin] .admin-sidebar{color:var(--skin-primary)} :root[data-skin] .admin-logo{color:var(--skin-on-accent);border-bottom:1px solid var(--skin-hairline)} :root[data-skin] .admin-logo-mark{color:var(--skin-on-accent)} :root[data-skin] .admin-logo small{color:var(--skin-primary)} :root[data-skin] .admin-nav a{color:var(--skin-primary)} :root[data-skin] .admin-nav a:hover{color:var(--skin-on-accent);background:var(--skin-hairline)} :root[data-skin] .admin-nav a.active{color:var(--skin-on-accent);box-shadow:var(--skin-shadow)} :root[data-skin] .nav-badge{color:var(--skin-on-accent)} :root[data-skin] .nav-badge.danger{background:var(--skin-danger)} :root[data-skin] .admin-sidebar-foot{border-top:1px solid var(--skin-hairline)} :root[data-skin] .admin-sidebar-foot a{color:var(--skin-primary)} :root[data-skin] .admin-sidebar-foot a:hover{color:var(--skin-on-accent);background:var(--skin-hairline)} :root[data-skin] .admin-topbar{background:var(--skin-surface)} :root[data-skin] .admin-menu-btn{background:var(--skin-surface)} :root[data-skin] .icon-btn{background:var(--skin-surface)} :root[data-skin] .admin-user-avatar{color:var(--skin-on-accent)} :root[data-skin] .kpi-card{background:var(--skin-surface)} :root[data-skin] .kpi-card .k-ic.purple{background:var(--skin-primary-soft);color:var(--skin-primary)} :root[data-skin] .panel{background:var(--skin-surface)} :root[data-skin] .tab-btn.active .cnt{color:var(--skin-on-accent)} :root[data-skin] .admin-table tr:hover td{background:var(--skin-primary-soft)} :root[data-skin] .badge.gray{background:var(--skin-bg);color:var(--skin-primary)} :root[data-skin] .badge.green{color:var(--skin-ok)} :root[data-skin] .badge.red{background:var(--skin-danger-soft);color:var(--skin-danger)} :root[data-skin] .badge.purple{background:var(--skin-primary-soft);color:var(--skin-primary)} :root[data-skin] .op-btn{background:var(--skin-surface)} :root[data-skin] .op-btn.primary{color:var(--skin-on-accent)} :root[data-skin] .op-btn.green{color:var(--skin-on-accent)} :root[data-skin] .op-btn.green:hover{background:var(--skin-ok)} :root[data-skin] .op-btn.red{background:var(--skin-danger);border-color:var(--skin-danger);color:var(--skin-on-accent)} :root[data-skin] .op-btn.red:hover{background:var(--skin-danger)} :root[data-skin] .op-btn.orange{color:var(--skin-on-accent)} :root[data-skin] .toolbar .search-box{background:var(--skin-surface)} :root[data-skin] .toolbar select{background:var(--skin-surface)} :root[data-skin] .btn-sm.primary{color:var(--skin-on-accent)} :root[data-skin] .btn-sm.outline{background:var(--skin-surface)} :root[data-skin] .btn-sm.red{background:var(--skin-danger);color:var(--skin-on-accent)} :root[data-skin] .btn-sm.red:hover{background:var(--skin-danger)} :root[data-skin] .pager button{background:var(--skin-surface)} :root[data-skin] .pager button.active{color:var(--skin-on-accent)} :root[data-skin] .modal-mask{background:var(--skin-shadow)} :root[data-skin] .modal{background:var(--skin-surface);box-shadow:var(--skin-shadow-lg)} :root[data-skin] .modal-close:hover{background:var(--skin-danger-soft);color:var(--skin-danger)} :root[data-skin] .f-item input,.f-item select,.f-item textarea{background:var(--skin-surface)} :root[data-skin] .f-item input:focus,.f-item select:focus,.f-item textarea:focus{box-shadow:var(--skin-shadow-sm)} :root[data-skin] .toast{color:var(--skin-on-accent);box-shadow:var(--skin-shadow-lg)} :root[data-skin] .toast.success{background:var(--skin-ok)} :root[data-skin] .toast.error{background:var(--skin-danger)} :root[data-skin] .confirm-box .cf-ic{background:var(--skin-danger-soft);color:var(--skin-danger)} :root[data-skin] .kanban-col{background:var(--skin-bg)} :root[data-skin] .ticket-card{background:var(--skin-surface)} :root[data-skin] .ticket-card.overdue{border-left:3px solid var(--skin-danger)} :root[data-skin] .detail-step .dot{color:var(--skin-on-accent)} :root[data-skin] .word-item{background:var(--skin-surface)} :root[data-skin] .word-item button:hover{color:var(--skin-danger)} :root[data-skin] .quota-bar .bar i.danger{background:var(--skin-danger)} :root[data-skin] .login-card{background:var(--skin-surface);box-shadow:var(--skin-shadow-lg)} :root[data-skin] .login-mark{color:var(--skin-on-accent);box-shadow:var(--skin-shadow)} :root[data-skin] .login-error{background:var(--skin-danger-soft);color:var(--skin-danger)} :root[data-skin] .login-tab.active{background:var(--skin-surface);box-shadow:var(--skin-shadow)} :root[data-skin] .otp-code-row .btn-ghost{background:var(--skin-surface)} :root[data-skin] .captcha-img.error{background:var(--skin-danger-soft);border-color:var(--skin-danger)} :root[data-skin] .captcha-hint.err{color:var(--skin-danger)} :root[data-skin] .admin-sidebar.open{box-shadow:var(--skin-shadow-lg)} :root[data-skin] .admin-mask{background:var(--skin-shadow)} :root[data-skin] .ui2 .kpi-card .k-ic{box-shadow:var(--skin-shadow-sm)} :root[data-skin] .ui2 .panel-head{border-bottom:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .panel-flush{border-top:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .tab-btn:hover{background:var(--skin-primary-soft)} :root[data-skin] .ui2 .tab-btn.active{color:var(--skin-on-accent);box-shadow:var(--skin-shadow)} :root[data-skin] .ui2 .tab-btn .cnt{background:var(--skin-shadow)} :root[data-skin] .ui2 .tab-btn.active .cnt{background:var(--skin-hairline);color:var(--skin-on-accent)} :root[data-skin] .ui2 .toolbar .search-box{background:var(--skin-surface)} :root[data-skin] .ui2 .toolbar .search-box:focus-within{box-shadow:var(--skin-shadow-sm)} :root[data-skin] .ui2 .toolbar select{background:var(--skin-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238591AC' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center} :root[data-skin] .ui2 .toolbar select:focus{box-shadow:var(--skin-shadow-sm)} :root[data-skin] .ui2 .btn-sm.primary{color:var(--skin-on-accent);box-shadow:var(--skin-shadow)} :root[data-skin] .ui2 .btn-sm.primary:hover{box-shadow:var(--skin-shadow)} :root[data-skin] .ui2 .btn-sm.outline{background:var(--skin-surface)} :root[data-skin] .ui2 .btn-sm.red{color:var(--skin-on-accent)} :root[data-skin] .ui2 .op-btn{background:var(--skin-surface)} :root[data-skin] .ui2 .op-btn:hover{background:var(--skin-primary-soft)} /* 🔴 2026-10-21 修：皮肤层此前只给 `.op-btn.primary` 设了 color(=on-accent，白)，却没设 background； 而上一行 `.ui2 .op-btn{background:var(--skin-surface)}` 权重 (0,4,0) > admin-v2 的 `.ui2 .op-btn.primary{background:渐变}` (0,3,0) ⇒ 底色被换成白/半透明白，文字仍白 ⇒ **白底白字，按钮看不见**。 此处补回主色底（与 on-accent 白字配对），green/red/orange 同理。 */ :root[data-skin] .ui2 .op-btn.primary{background:var(--skin-primary);border-color:transparent;color:var(--skin-on-accent)} :root[data-skin] .ui2 .op-btn.primary:hover{background:var(--skin-primary);filter:brightness(1.06);color:var(--skin-on-accent)} :root[data-skin] .ui2 .op-btn.green{background:var(--skin-ok);border-color:transparent;color:var(--skin-on-accent)} :root[data-skin] .ui2 .op-btn.green:hover{background:var(--skin-ok);color:var(--skin-on-accent)} :root[data-skin] .ui2 .op-btn.red{background:var(--skin-danger);border-color:transparent;color:var(--skin-on-accent)} :root[data-skin] .ui2 .op-btn.red:hover{background:var(--skin-danger);color:var(--skin-on-accent)} :root[data-skin] .ui2 .op-btn.orange{background:var(--skin-warn,var(--skin-amber,#D97706));border-color:transparent;color:var(--skin-on-accent)} :root[data-skin] .ui2 .op-btn.orange:hover{color:var(--skin-on-accent)} :root[data-skin] .ui2 .admin-table th{background:var(--skin-primary-soft)} :root[data-skin] .ui2 .admin-table td{border-bottom:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .admin-table tbody tr:hover td{background:var(--skin-primary-soft)} :root[data-skin] .ui2 .badge.gray{color:var(--skin-primary)} :root[data-skin] .ui2 .badge.green{color:var(--skin-ok)} :root[data-skin] .ui2 .badge.orange{color:var(--skin-warn-dark)} :root[data-skin] .ui2 .badge.purple{color:var(--skin-primary)} :root[data-skin] .ui2 .badge.soft{background:var(--skin-primary-soft)} :root[data-skin] .ui2 .quota-bar .bar{background:var(--skin-bg)} :root[data-skin] .ui2 .pager{border-top:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .pager button{background:var(--skin-surface)} :root[data-skin] .ui2 .pager button.active{color:var(--skin-on-accent)} :root[data-skin] .ui2 .log-row{border-bottom:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .modal{border:1px solid var(--skin-hairline)} :root[data-skin] .ui2 .modal-head{border-bottom:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .modal-foot{border-top:1px solid var(--skin-surface-2);background:var(--skin-bg)} :root[data-skin] .ui2 .f-item input,.ui2 .f-item select,.ui2 .f-item textarea{background:var(--skin-surface)} :root[data-skin] .ui2 .f-item input:focus,.ui2 .f-item select:focus,.ui2 .f-item textarea:focus{box-shadow:var(--skin-shadow-sm)} :root[data-skin] .ui2 .switch-item.on{border-color:var(--skin-primary)} :root[data-skin] .ui2 .dash-hero{background:radial-gradient(720px 220px at 92% -40%,var(--skin-violet-soft),transparent 60%), radial-gradient(620px 200px at 8% 130%,var(--skin-primary-soft),transparent 55%), linear-gradient(135deg,var(--skin-primary),var(--skin-primary));box-shadow:var(--skin-shadow)} :root[data-skin] .ui2 .dash-hero .dh-ic{background:var(--skin-hairline);color:var(--skin-on-accent)} :root[data-skin] .ui2 .dash-hero h2{color:var(--skin-on-accent)} :root[data-skin] .ui2 .dash-hero .dh-chip{background:var(--skin-hairline);border:1px solid var(--skin-hairline)} :root[data-skin] .ui2 .dash-hero .dh-chip b{color:var(--skin-on-accent)} :root[data-skin] .ui2 .dash-hero .dh-chip.red b{color:var(--skin-danger)} :root[data-skin] .ui2 .dash-hero .dh-chip.amber b{color:var(--skin-ok)} :root[data-skin] .ui2 .feat-mini:hover{border-color:var(--skin-primary)} :root[data-skin] .ui2 .feat-mini .fm-ic.gray{color:var(--skin-primary)} :root[data-skin] .ui2 .feat-mini .fm-ic.teal{background:var(--skin-ok-soft);color:var(--skin-primary)} :root[data-skin] .ui2 .surf-sec{border-top:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .sec-head{border-bottom:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .surf-sec .toolbar{border-bottom:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .panel-head .search-box{background:var(--skin-surface)} :root[data-skin] .ui2 .panel-head .search-box:focus-within{box-shadow:var(--skin-shadow-sm)} :root[data-skin] .ui2 .panel-head select{background:var(--skin-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238591AC' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center} :root[data-skin] .ui2 .panel-head select:focus{box-shadow:var(--skin-shadow-sm)} :root[data-skin] .ui2 .cfg-tabs{background:var(--skin-surface)} :root[data-skin] .ui2 .price-card{background:var(--skin-surface)} :root[data-skin] .ui2 .price-card:hover{border-color:var(--skin-primary)} :root[data-skin] .ui2 .price-card .p-badge{color:var(--skin-on-accent)} :root[data-skin] .ui2 .kanban-col{background:var(--skin-primary-soft)} :root[data-skin] .ui2 .kanban-head .cnt{background:var(--skin-bg)} :root[data-skin] .ui2 .ticket-card{background:var(--skin-surface);box-shadow:var(--skin-shadow-sm)} :root[data-skin] .ui2 .ticket-card:hover{border-color:var(--skin-primary)} :root[data-skin] .ui2 .ticket-meta{border-top:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .detail-step .dot{background:var(--skin-bg);color:var(--skin-on-accent);border:2px solid var(--skin-surface)} :root[data-skin] .ui2 .detail-step::after{background:var(--skin-bg)} :root[data-skin] .ui2 .word-item{background:var(--skin-surface)} :root[data-skin] .ui2 .key-box{background:var(--skin-primary-soft);border:1px dashed var(--skin-primary)} :root[data-skin] .ui2 .release-card{background:var(--skin-surface)} :root[data-skin] .ui2 .release-card:hover{border-color:var(--skin-primary)} :root[data-skin] .ui2 .release-head{background:var(--skin-primary-soft)} :root[data-skin] .ui2 .release-progress{background:var(--skin-bg)} :root[data-skin] .ui2 .release-foot{border-top:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .it-card-h{border-bottom:1px solid var(--skin-surface-2);background:linear-gradient(180deg,var(--skin-primary-soft),var(--skin-surface))} :root[data-skin] .ui2 .it-card-f{border-top:1px solid var(--skin-surface-2)} :root[data-skin] .ui2 .it-field input,.ui2 .it-field select{background:var(--skin-surface)} :root[data-skin] .ui2 .it-field select{background:var(--skin-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238591AC' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center} :root[data-skin] .ui2 .it-field input:focus,.ui2 .it-field select:focus{box-shadow:var(--skin-shadow-sm)} :root[data-skin] .admin-nav .nav-group-head{color:var(--skin-primary)} :root[data-skin] .admin-nav .nav-group-head:hover{color:var(--skin-on-accent);background:var(--skin-hairline)} :root[data-skin] .admin-nav .nav-group-head.active{color:var(--skin-on-accent);box-shadow:var(--skin-shadow)} :root[data-skin] .admin-nav .nav-sub a.active{color:var(--skin-on-accent);background:var(--skin-primary-soft);box-shadow:var(--skin-shadow)} :root[data-skin] .ui2 .res-card:hover{box-shadow:var(--skin-shadow)} :root[data-skin] .ui2 .res-notice{background:var(--skin-warn-soft);border:1px solid var(--skin-ok);color:var(--skin-warn-dark)} :root[data-skin] .ui2 .note-warn{background:var(--skin-warn-soft);border:1px solid var(--skin-ok);color:var(--skin-warn-dark)} :root[data-skin] .ui2 .note-warn b{color:var(--skin-warn-dark)} :root[data-skin] .poa-tab.is-active{color:var(--skin-on-accent);box-shadow:var(--skin-shadow)} :root[data-skin] .poa-tab.is-active .cnt{background:var(--skin-hairline);color:var(--skin-on-accent)} :root[data-skin] .poa-field select:focus,.poa-field input:focus{box-shadow:var(--skin-shadow-sm)} :root[data-skin] .poa-btn.is-primary{color:var(--skin-on-accent);box-shadow:var(--skin-shadow)} :root[data-skin] .poa-btn.is-primary:hover{color:var(--skin-on-accent)} :root[data-skin] .poa-btn.is-warn{color:var(--skin-on-accent)} :root[data-skin] .poa-btn.is-warn:hover{background:var(--skin-warn-dark);border-color:var(--skin-warn-dark);color:var(--skin-on-accent)} :root[data-skin] .poa-btn.is-danger{color:var(--skin-on-accent)} :root[data-skin] .poa-btn.is-danger:hover{background:var(--skin-danger);border-color:var(--skin-danger);color:var(--skin-on-accent)} :root[data-skin] .poa-tag.is-gray{border-color:var(--skin-surface-2)} :root[data-skin] .poa-tag.is-blue{border-color:var(--skin-primary-soft)} :root[data-skin] .poa-tag.is-green{border-color:var(--skin-ok)} :root[data-skin] .poa-tag.is-orange{border-color:var(--skin-ok)} :root[data-skin] .poa-tag.is-red{border-color:var(--skin-danger-soft)} :root[data-skin] .poa-tag.is-purple{border-color:var(--skin-primary-soft)} :root[data-skin] .poa-note.is-info{border-color:var(--skin-primary-soft);color:var(--skin-primary)} :root[data-skin] .poa-note.is-warn{border-color:var(--skin-ok);color:var(--skin-warn-dark)} :root[data-skin] .poa-note.is-danger{border-color:var(--skin-danger);color:var(--skin-danger)} :root[data-skin] .poa-note code{background:var(--skin-hairline);border:1px solid var(--skin-shadow)} :root[data-skin] .poa-empty .sub{color:var(--skin-primary)} :root[data-skin] .poa-kv-item .v.is-empty{color:var(--skin-primary)} /* ══════ ② + ③ 皮肤定义（12 组）══════ */ /* K1 云雾玻璃 · 明色 */ :root[data-skin="k1"]:not([data-theme="dark"]){ --skin-bg:#EEF2F9; --skin-surface:rgba(255,255,255,.72); --skin-surface-2:#F4F7FB; --skin-border:rgba(255,255,255,.60); --skin-border-2:#E2E8F0; --skin-divider:#E8EEF7; --skin-ink:#0F1A2E; --skin-ink-2:#46536E; --skin-ink-3:#5F6A84; --skin-primary:#3B6FE0; --skin-primary-dark:#2C57BC; --skin-primary-soft:#E8EFFF; --skin-violet:#7C5CE0; --skin-violet-soft:#F0EBFF; --skin-ok:#10B981; --skin-ok-soft:#ECFDF5; --skin-warn:#F97316; --skin-warn-dark:#EA580C; --skin-warn-soft:#FFF7ED; --skin-danger:#DC2626; --skin-danger-soft:#FEF2F2; --skin-navy:#131C33; --skin-navy-2:#1B2745; --skin-on-accent:#FFFFFF; --skin-hairline:rgba(255,255,255,.55); --skin-shadow-sm:0 1px 3px rgba(15,23,42,.06); --skin-shadow:0 8px 32px rgba(15,23,42,.10); --skin-shadow-lg:0 20px 56px rgba(15,23,42,.16); --skin-radius:22px; --skin-radius-lg:26px; --skin-r-sm:12px; --skin-r-md:16px; --skin-r-lg:20px; --skin-r-xl:26px; --skin-row-h:48px; --skin-container:1200px; --skin-font-title:var(--font); --skin-blur:blur(20px) saturate(1.25); --skin-gradient:linear-gradient(120deg,#3B6FE0 0%,#7C5CE0 100%); --skin-gradient-soft:linear-gradient(120deg,#E8EFFF 0%,#F0EBFF 100%); --skin-gradient-btn:linear-gradient(135deg,#3B6FE0 0%,#7C5CE0 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#386DE0; --skin-fill-primary:#3B6FE0; --skin-ink-ok:#0B835B; --skin-fill-ok:#0C865D; --skin-ink-danger:#DC2626; --skin-fill-danger:#DC2626; --skin-ink-warn:#C05105; --skin-fill-warn:#C35305; } :root[data-skin="k1"]:not([data-theme="dark"]){ --primary:#3B6FE0; --primary-dark:#2C57BC; --primary-light:#E8EFFF; --violet:#7C5CE0; --gradient:linear-gradient(120deg,#3B6FE0 0%,#7C5CE0 100%); --gradient-soft:linear-gradient(120deg,#E8EFFF 0%,#F0EBFF 100%); --orange:#F97316; --orange-dark:#EA580C; --orange-soft:#FFF7ED; --green:#10B981; --green-soft:#ECFDF5; --navy:#131C33; --navy-2:#1B2745; --text:#0F1A2E; --text-2:#46536E; --text-3:#5F6A84; --border:rgba(255,255,255,.60); --bg:#EEF2F9; --white:rgba(255,255,255,.72); --radius:22px; --radius-lg:26px; --shadow-sm:0 1px 3px rgba(15,23,42,.06); --shadow:0 8px 32px rgba(15,23,42,.10); --shadow-lg:0 20px 56px rgba(15,23,42,.16); --container:1200px; } :root[data-skin="k1"]:not([data-theme="dark"]) .ui2{ --ui-bg:#EEF2F9; --ui-surface:rgba(255,255,255,.72); --ui-border:rgba(255,255,255,.60); --ui-border-2:#E2E8F0; --ui-ink:#0F1A2E; --ui-ink-2:#46536E; --ui-ink-3:#5F6A84; --ui-primary:#3B6FE0; --ui-primary-2:#7C5CE0; --ui-violet:#7C5CE0; --ui-gradient:linear-gradient(120deg,#3B6FE0 0%,#7C5CE0 100%); --ui-gradient-btn:linear-gradient(135deg,#3B6FE0 0%,#7C5CE0 100%); --ui-green:#10B981; --ui-amber:#F97316; --ui-red:#DC2626; --ui-navy:#131C33; --soft-blue:#E8EFFF; --soft-green:#ECFDF5; --soft-amber:#FFF7ED; --soft-red:#FEF2F2; --soft-violet:#F0EBFF; --soft-gray:#F4F7FB; --ui-shadow-sm:0 1px 3px rgba(15,23,42,.06); --ui-shadow-md:0 8px 32px rgba(15,23,42,.10); --ui-shadow-lg:0 20px 56px rgba(15,23,42,.16); --ui-r-sm:12px; --ui-r-md:16px; --ui-r-lg:20px; --ui-r-xl:26px; --bg:#EEF2F9; --border:rgba(255,255,255,.60); --navy:#131C33; --text:#0F1A2E; --text-2:#46536E; --text-3:#5F6A84; --primary-light:#E8EFFF; --green-soft:#ECFDF5; --orange-soft:#FFF7ED; --orange-dark:#EA580C; --shadow:0 8px 32px rgba(15,23,42,.10); --green:#10B981; --orange:#F97316; --gradient:linear-gradient(120deg,#3B6FE0 0%,#7C5CE0 100%); --radius-lg:26px; --shadow-lg:0 20px 56px rgba(15,23,42,.16); } :root[data-skin="k1"]:not([data-theme="dark"]) .poa{ --poa-bg:#EEF2F9; --poa-surface:rgba(255,255,255,.72); --poa-surface-2:#F4F7FB; --poa-border:rgba(255,255,255,.60); --poa-border-2:#E2E8F0; --poa-divider:#E8EEF7; --poa-ink:#0F1A2E; --poa-ink-2:#46536E; --poa-ink-3:#5F6A84; --poa-primary:#3B6FE0; --poa-primary-2:#2C57BC; --poa-primary-bg:#E8EFFF; --poa-ok:#10B981; --poa-ok-bg:#ECFDF5; --poa-warn:#F97316; --poa-warn-bg:#FFF7ED; --poa-danger:#DC2626; --poa-danger-bg:#FEF2F2; --poa-violet:#7C5CE0; --poa-violet-bg:#F0EBFF; --poa-neutral:#5F6A84; --poa-neutral-bg:#F4F7FB; --poa-r-sm:12px; --poa-r-md:16px; --poa-r-lg:20px; --poa-shadow-sm:0 1px 3px rgba(15,23,42,.06); --poa-shadow-md:0 8px 32px rgba(15,23,42,.10); --poa-row-h:48px; } /* K1 云雾玻璃 · 暗色 */ :root[data-skin="k1"][data-theme="dark"]{ --skin-bg:#0A0F1A; --skin-surface:rgba(22,30,46,.72); --skin-surface-2:#16203A; --skin-border:rgba(255,255,255,.10); --skin-border-2:#2A3654; --skin-divider:#1E2942; --skin-ink:#EEF2F9; --skin-ink-2:#B6C2D8; --skin-ink-3:#8291AB; --skin-primary:#7AA2FF; --skin-primary-dark:#5B84E8; --skin-primary-soft:rgba(122,162,255,.16); --skin-violet:#A78BFA; --skin-violet-soft:rgba(167,139,250,.16); --skin-ok:#34D399; --skin-ok-soft:rgba(52,211,153,.14); --skin-warn:#FBBF24; --skin-warn-dark:#F59E0B; --skin-warn-soft:rgba(251,191,36,.14); --skin-danger:#F87171; --skin-danger-soft:rgba(248,113,113,.14); --skin-navy:#060A12; --skin-navy-2:#0E1626; --skin-on-accent:#0A0F1A; --skin-hairline:rgba(255,255,255,.10); --skin-shadow-sm:0 1px 3px rgba(0,0,0,.40); --skin-shadow:0 8px 32px rgba(0,0,0,.48); --skin-shadow-lg:0 20px 56px rgba(0,0,0,.58); --skin-radius:22px; --skin-radius-lg:26px; --skin-r-sm:12px; --skin-r-md:16px; --skin-r-lg:20px; --skin-r-xl:26px; --skin-row-h:48px; --skin-container:1200px; --skin-font-title:var(--font); --skin-blur:blur(20px) saturate(1.25); --skin-gradient:linear-gradient(120deg,#7AA2FF 0%,#A78BFA 100%); --skin-gradient-soft:linear-gradient(120deg,rgba(122,162,255,.16) 0%,rgba(167,139,250,.16) 100%); --skin-gradient-btn:linear-gradient(135deg,#7AA2FF 0%,#A78BFA 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#7AA2FF; --skin-fill-primary:#7AA2FF; --skin-ink-ok:#34D399; --skin-fill-ok:#34D399; --skin-ink-danger:#F87171; --skin-fill-danger:#F87171; --skin-ink-warn:#FBBF24; --skin-fill-warn:#FBBF24; } :root[data-skin="k1"][data-theme="dark"]{ --primary:#7AA2FF; --primary-dark:#5B84E8; --primary-light:rgba(122,162,255,.16); --violet:#A78BFA; --gradient:linear-gradient(120deg,#7AA2FF 0%,#A78BFA 100%); --gradient-soft:linear-gradient(120deg,rgba(122,162,255,.16) 0%,rgba(167,139,250,.16) 100%); --orange:#FBBF24; --orange-dark:#F59E0B; --orange-soft:rgba(251,191,36,.14); --green:#34D399; --green-soft:rgba(52,211,153,.14); --navy:#060A12; --navy-2:#0E1626; --text:#EEF2F9; --text-2:#B6C2D8; --text-3:#8291AB; --border:rgba(255,255,255,.10); --bg:#0A0F1A; --white:rgba(22,30,46,.72); --radius:22px; --radius-lg:26px; --shadow-sm:0 1px 3px rgba(0,0,0,.40); --shadow:0 8px 32px rgba(0,0,0,.48); --shadow-lg:0 20px 56px rgba(0,0,0,.58); --container:1200px; } :root[data-skin="k1"][data-theme="dark"] .ui2{ --ui-bg:#0A0F1A; --ui-surface:rgba(22,30,46,.72); --ui-border:rgba(255,255,255,.10); --ui-border-2:#2A3654; --ui-ink:#EEF2F9; --ui-ink-2:#B6C2D8; --ui-ink-3:#8291AB; --ui-primary:#7AA2FF; --ui-primary-2:#A78BFA; --ui-violet:#A78BFA; --ui-gradient:linear-gradient(120deg,#7AA2FF 0%,#A78BFA 100%); --ui-gradient-btn:linear-gradient(135deg,#7AA2FF 0%,#A78BFA 100%); --ui-green:#34D399; --ui-amber:#FBBF24; --ui-red:#F87171; --ui-navy:#060A12; --soft-blue:rgba(122,162,255,.16); --soft-green:rgba(52,211,153,.14); --soft-amber:rgba(251,191,36,.14); --soft-red:rgba(248,113,113,.14); --soft-violet:rgba(167,139,250,.16); --soft-gray:#16203A; --ui-shadow-sm:0 1px 3px rgba(0,0,0,.40); --ui-shadow-md:0 8px 32px rgba(0,0,0,.48); --ui-shadow-lg:0 20px 56px rgba(0,0,0,.58); --ui-r-sm:12px; --ui-r-md:16px; --ui-r-lg:20px; --ui-r-xl:26px; --bg:#0A0F1A; --border:rgba(255,255,255,.10); --navy:#060A12; --text:#EEF2F9; --text-2:#B6C2D8; --text-3:#8291AB; --primary-light:rgba(122,162,255,.16); --green-soft:rgba(52,211,153,.14); --orange-soft:rgba(251,191,36,.14); --orange-dark:#F59E0B; --shadow:0 8px 32px rgba(0,0,0,.48); --green:#34D399; --orange:#FBBF24; --gradient:linear-gradient(120deg,#7AA2FF 0%,#A78BFA 100%); --radius-lg:26px; --shadow-lg:0 20px 56px rgba(0,0,0,.58); } :root[data-skin="k1"][data-theme="dark"] .poa{ --poa-bg:#0A0F1A; --poa-surface:rgba(22,30,46,.72); --poa-surface-2:#16203A; --poa-border:rgba(255,255,255,.10); --poa-border-2:#2A3654; --poa-divider:#1E2942; --poa-ink:#EEF2F9; --poa-ink-2:#B6C2D8; --poa-ink-3:#8291AB; --poa-primary:#7AA2FF; --poa-primary-2:#5B84E8; --poa-primary-bg:rgba(122,162,255,.16); --poa-ok:#34D399; --poa-ok-bg:rgba(52,211,153,.14); --poa-warn:#FBBF24; --poa-warn-bg:rgba(251,191,36,.14); --poa-danger:#F87171; --poa-danger-bg:rgba(248,113,113,.14); --poa-violet:#A78BFA; --poa-violet-bg:rgba(167,139,250,.16); --poa-neutral:#8291AB; --poa-neutral-bg:#16203A; --poa-r-sm:12px; --poa-r-md:16px; --poa-r-lg:20px; --poa-shadow-sm:0 1px 3px rgba(0,0,0,.40); --poa-shadow-md:0 8px 32px rgba(0,0,0,.48); --poa-row-h:48px; } /* K2 深海霓虹 · 明色 */ :root[data-skin="k2"]:not([data-theme="dark"]){ --skin-bg:#F7F9FC; --skin-surface:#FFFFFF; --skin-surface-2:#EEF2F9; --skin-border:#E4E9F2; --skin-border-2:#D3DAE6; --skin-divider:#EDF1F7; --skin-ink:#0B1220; --skin-ink-2:#44506B; --skin-ink-3:#5F6A84; --skin-primary:#4F46E5; --skin-primary-dark:#4338CA; --skin-primary-soft:#EEF0FE; --skin-violet:#7C3AED; --skin-violet-soft:#F5F3FF; --skin-ok:#059669; --skin-ok-soft:#ECFDF5; --skin-warn:#D97706; --skin-warn-dark:#B45309; --skin-warn-soft:#FFFBEB; --skin-danger:#DC2626; --skin-danger-soft:#FEF2F2; --skin-navy:#0B1220; --skin-navy-2:#111C34; --skin-on-accent:#FFFFFF; --skin-hairline:rgba(255,255,255,.10); --skin-shadow-sm:0 1px 2px rgba(16,27,51,.05); --skin-shadow:0 4px 14px rgba(16,27,51,.08); --skin-shadow-lg:0 24px 64px rgba(16,27,51,.16); --skin-radius:12px; --skin-radius-lg:14px; --skin-r-sm:8px; --skin-r-md:12px; --skin-r-lg:14px; --skin-r-xl:16px; --skin-row-h:44px; --skin-container:1200px; --skin-font-title:var(--font); --skin-blur:none; --skin-gradient:linear-gradient(120deg,#4F46E5 0%,#7C3AED 100%); --skin-gradient-soft:linear-gradient(120deg,#EEF0FE 0%,#F5F3FF 100%); --skin-gradient-btn:linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#4F46E5; --skin-fill-primary:#4F46E5; --skin-ink-ok:#04865E; --skin-fill-ok:#04865E; --skin-ink-danger:#DC2626; --skin-fill-danger:#DC2626; --skin-ink-warn:#B16105; --skin-fill-warn:#B16105; } :root[data-skin="k2"]:not([data-theme="dark"]){ --primary:#4F46E5; --primary-dark:#4338CA; --primary-light:#EEF0FE; --violet:#7C3AED; --gradient:linear-gradient(120deg,#4F46E5 0%,#7C3AED 100%); --gradient-soft:linear-gradient(120deg,#EEF0FE 0%,#F5F3FF 100%); --orange:#D97706; --orange-dark:#B45309; --orange-soft:#FFFBEB; --green:#059669; --green-soft:#ECFDF5; --navy:#0B1220; --navy-2:#111C34; --text:#0B1220; --text-2:#44506B; --text-3:#5F6A84; --border:#E4E9F2; --bg:#F7F9FC; --white:#FFFFFF; --radius:12px; --radius-lg:14px; --shadow-sm:0 1px 2px rgba(16,27,51,.05); --shadow:0 4px 14px rgba(16,27,51,.08); --shadow-lg:0 24px 64px rgba(16,27,51,.16); --container:1200px; } :root[data-skin="k2"]:not([data-theme="dark"]) .ui2{ --ui-bg:#F7F9FC; --ui-surface:#FFFFFF; --ui-border:#E4E9F2; --ui-border-2:#D3DAE6; --ui-ink:#0B1220; --ui-ink-2:#44506B; --ui-ink-3:#5F6A84; --ui-primary:#4F46E5; --ui-primary-2:#7C3AED; --ui-violet:#7C3AED; --ui-gradient:linear-gradient(120deg,#4F46E5 0%,#7C3AED 100%); --ui-gradient-btn:linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%); --ui-green:#059669; --ui-amber:#D97706; --ui-red:#DC2626; --ui-navy:#0B1220; --soft-blue:#EEF0FE; --soft-green:#ECFDF5; --soft-amber:#FFFBEB; --soft-red:#FEF2F2; --soft-violet:#F5F3FF; --soft-gray:#EEF2F9; --ui-shadow-sm:0 1px 2px rgba(16,27,51,.05); --ui-shadow-md:0 4px 14px rgba(16,27,51,.08); --ui-shadow-lg:0 24px 64px rgba(16,27,51,.16); --ui-r-sm:8px; --ui-r-md:12px; --ui-r-lg:14px; --ui-r-xl:16px; --bg:#F7F9FC; --border:#E4E9F2; --navy:#0B1220; --text:#0B1220; --text-2:#44506B; --text-3:#5F6A84; --primary-light:#EEF0FE; --green-soft:#ECFDF5; --orange-soft:#FFFBEB; --orange-dark:#B45309; --shadow:0 4px 14px rgba(16,27,51,.08); --green:#059669; --orange:#D97706; --gradient:linear-gradient(120deg,#4F46E5 0%,#7C3AED 100%); --radius-lg:14px; --shadow-lg:0 24px 64px rgba(16,27,51,.16); } :root[data-skin="k2"]:not([data-theme="dark"]) .poa{ --poa-bg:#F7F9FC; --poa-surface:#FFFFFF; --poa-surface-2:#EEF2F9; --poa-border:#E4E9F2; --poa-border-2:#D3DAE6; --poa-divider:#EDF1F7; --poa-ink:#0B1220; --poa-ink-2:#44506B; --poa-ink-3:#5F6A84; --poa-primary:#4F46E5; --poa-primary-2:#4338CA; --poa-primary-bg:#EEF0FE; --poa-ok:#059669; --poa-ok-bg:#ECFDF5; --poa-warn:#D97706; --poa-warn-bg:#FFFBEB; --poa-danger:#DC2626; --poa-danger-bg:#FEF2F2; --poa-violet:#7C3AED; --poa-violet-bg:#F5F3FF; --poa-neutral:#5F6A84; --poa-neutral-bg:#EEF2F9; --poa-r-sm:8px; --poa-r-md:12px; --poa-r-lg:14px; --poa-shadow-sm:0 1px 2px rgba(16,27,51,.05); --poa-shadow-md:0 4px 14px rgba(16,27,51,.08); --poa-row-h:44px; } /* K2 深海霓虹 · 暗色 */ :root[data-skin="k2"][data-theme="dark"]{ --skin-bg:#070B14; --skin-surface:#0E1626; --skin-surface-2:#16203A; --skin-border:#1E2B47; --skin-border-2:#2A3C63; --skin-divider:#16223C; --skin-ink:#E6ECF7; --skin-ink-2:#A9B6CD; --skin-ink-3:#74829B; --skin-primary:#8B5CF6; --skin-primary-dark:#7C3AED; --skin-primary-soft:rgba(139,92,246,.16); --skin-violet:#A78BFA; --skin-violet-soft:rgba(167,139,250,.16); --skin-ok:#34D399; --skin-ok-soft:rgba(52,211,153,.14); --skin-warn:#FBBF24; --skin-warn-dark:#F59E0B; --skin-warn-soft:rgba(251,191,36,.14); --skin-danger:#F87171; --skin-danger-soft:rgba(248,113,113,.14); --skin-navy:#050810; --skin-navy-2:#0B1220; --skin-on-accent:#FFFFFF; --skin-hairline:rgba(255,255,255,.08); --skin-shadow-sm:0 0 0 1px rgba(139,92,246,.18); --skin-shadow:0 0 0 1px rgba(139,92,246,.28),0 8px 28px rgba(124,58,237,.22); --skin-shadow-lg:0 0 0 1px rgba(139,92,246,.35),0 20px 56px rgba(124,58,237,.30); --skin-radius:12px; --skin-radius-lg:14px; --skin-r-sm:8px; --skin-r-md:12px; --skin-r-lg:14px; --skin-r-xl:16px; --skin-row-h:44px; --skin-container:1200px; --skin-font-title:var(--font); --skin-blur:none; --skin-gradient:linear-gradient(120deg,#8B5CF6 0%,#A78BFA 100%); --skin-gradient-soft:linear-gradient(120deg,rgba(139,92,246,.16) 0%,rgba(167,139,250,.16) 100%); --skin-gradient-btn:linear-gradient(135deg,#8B5CF6 0%,#A78BFA 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#9064F6; --skin-fill-primary:#8553F6; --skin-ink-ok:#34D399; --skin-fill-ok:#1D855F; --skin-ink-danger:#F87171; --skin-fill-danger:#EA0C0C; --skin-ink-warn:#FBBF24; --skin-fill-warn:#986E03; } :root[data-skin="k2"][data-theme="dark"]{ --primary:#8B5CF6; --primary-dark:#7C3AED; --primary-light:rgba(139,92,246,.16); --violet:#A78BFA; --gradient:linear-gradient(120deg,#8B5CF6 0%,#A78BFA 100%); --gradient-soft:linear-gradient(120deg,rgba(139,92,246,.16) 0%,rgba(167,139,250,.16) 100%); --orange:#FBBF24; --orange-dark:#F59E0B; --orange-soft:rgba(251,191,36,.14); --green:#34D399; --green-soft:rgba(52,211,153,.14); --navy:#050810; --navy-2:#0B1220; --text:#E6ECF7; --text-2:#A9B6CD; --text-3:#74829B; --border:#1E2B47; --bg:#070B14; --white:#0E1626; --radius:12px; --radius-lg:14px; --shadow-sm:0 0 0 1px rgba(139,92,246,.18); --shadow:0 0 0 1px rgba(139,92,246,.28),0 8px 28px rgba(124,58,237,.22); --shadow-lg:0 0 0 1px rgba(139,92,246,.35),0 20px 56px rgba(124,58,237,.30); --container:1200px; } :root[data-skin="k2"][data-theme="dark"] .ui2{ --ui-bg:#070B14; --ui-surface:#0E1626; --ui-border:#1E2B47; --ui-border-2:#2A3C63; --ui-ink:#E6ECF7; --ui-ink-2:#A9B6CD; --ui-ink-3:#74829B; --ui-primary:#8B5CF6; --ui-primary-2:#A78BFA; --ui-violet:#A78BFA; --ui-gradient:linear-gradient(120deg,#8B5CF6 0%,#A78BFA 100%); --ui-gradient-btn:linear-gradient(135deg,#8B5CF6 0%,#A78BFA 100%); --ui-green:#34D399; --ui-amber:#FBBF24; --ui-red:#F87171; --ui-navy:#050810; --soft-blue:rgba(139,92,246,.16); --soft-green:rgba(52,211,153,.14); --soft-amber:rgba(251,191,36,.14); --soft-red:rgba(248,113,113,.14); --soft-violet:rgba(167,139,250,.16); --soft-gray:#16203A; --ui-shadow-sm:0 0 0 1px rgba(139,92,246,.18); --ui-shadow-md:0 0 0 1px rgba(139,92,246,.28),0 8px 28px rgba(124,58,237,.22); --ui-shadow-lg:0 0 0 1px rgba(139,92,246,.35),0 20px 56px rgba(124,58,237,.30); --ui-r-sm:8px; --ui-r-md:12px; --ui-r-lg:14px; --ui-r-xl:16px; --bg:#070B14; --border:#1E2B47; --navy:#050810; --text:#E6ECF7; --text-2:#A9B6CD; --text-3:#74829B; --primary-light:rgba(139,92,246,.16); --green-soft:rgba(52,211,153,.14); --orange-soft:rgba(251,191,36,.14); --orange-dark:#F59E0B; --shadow:0 0 0 1px rgba(139,92,246,.28),0 8px 28px rgba(124,58,237,.22); --green:#34D399; --orange:#FBBF24; --gradient:linear-gradient(120deg,#8B5CF6 0%,#A78BFA 100%); --radius-lg:14px; --shadow-lg:0 0 0 1px rgba(139,92,246,.35),0 20px 56px rgba(124,58,237,.30); } :root[data-skin="k2"][data-theme="dark"] .poa{ --poa-bg:#070B14; --poa-surface:#0E1626; --poa-surface-2:#16203A; --poa-border:#1E2B47; --poa-border-2:#2A3C63; --poa-divider:#16223C; --poa-ink:#E6ECF7; --poa-ink-2:#A9B6CD; --poa-ink-3:#74829B; --poa-primary:#8B5CF6; --poa-primary-2:#7C3AED; --poa-primary-bg:rgba(139,92,246,.16); --poa-ok:#34D399; --poa-ok-bg:rgba(52,211,153,.14); --poa-warn:#FBBF24; --poa-warn-bg:rgba(251,191,36,.14); --poa-danger:#F87171; --poa-danger-bg:rgba(248,113,113,.14); --poa-violet:#A78BFA; --poa-violet-bg:rgba(167,139,250,.16); --poa-neutral:#74829B; --poa-neutral-bg:#16203A; --poa-r-sm:8px; --poa-r-md:12px; --poa-r-lg:14px; --poa-shadow-sm:0 0 0 1px rgba(139,92,246,.18); --poa-shadow-md:0 0 0 1px rgba(139,92,246,.28),0 8px 28px rgba(124,58,237,.22); --poa-row-h:44px; } /* K3 杂志编辑 · 明色 */ :root[data-skin="k3"]:not([data-theme="dark"]){ --skin-bg:#FBFAF8; --skin-surface:#FFFFFF; --skin-surface-2:#F6F4F0; --skin-border:#E6E2DC; --skin-border-2:#D8D3CA; --skin-divider:#EFECE6; --skin-ink:#141414; --skin-ink-2:#4A4A4A; --skin-ink-3:#757575; --skin-primary:#1A4FD6; --skin-primary-dark:#1338A3; --skin-primary-soft:#EEF2FE; --skin-violet:#6D4AC7; --skin-violet-soft:#F2EEFB; --skin-ok:#2F7D5F; --skin-ok-soft:#EDF6F1; --skin-warn:#9A6B1F; --skin-warn-dark:#7A5416; --skin-warn-soft:#FBF3E4; --skin-danger:#A33A3A; --skin-danger-soft:#F8EDED; --skin-navy:#1A1A1A; --skin-navy-2:#262626; --skin-on-accent:#FFFFFF; --skin-hairline:#EFECE6; --skin-shadow-sm:none; --skin-shadow:none; --skin-shadow-lg:none; --skin-radius:4px; --skin-radius-lg:6px; --skin-r-sm:2px; --skin-r-md:3px; --skin-r-lg:4px; --skin-r-xl:6px; --skin-row-h:40px; --skin-container:880px; --skin-font-title:"Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,serif; --skin-blur:none; --skin-gradient:linear-gradient(120deg,#1A4FD6 0%,#6D4AC7 100%); --skin-gradient-soft:linear-gradient(120deg,#EEF2FE 0%,#F2EEFB 100%); --skin-gradient-btn:linear-gradient(135deg,#1A4FD6 0%,#6D4AC7 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#1A4FD6; --skin-fill-primary:#1A4FD6; --skin-ink-ok:#2F7D5F; --skin-fill-ok:#2F7D5F; --skin-ink-danger:#A33A3A; --skin-fill-danger:#A33A3A; --skin-ink-warn:#9A6B1F; --skin-fill-warn:#9A6B1F; } :root[data-skin="k3"]:not([data-theme="dark"]){ --primary:#1A4FD6; --primary-dark:#1338A3; --primary-light:#EEF2FE; --violet:#6D4AC7; --gradient:linear-gradient(120deg,#1A4FD6 0%,#6D4AC7 100%); --gradient-soft:linear-gradient(120deg,#EEF2FE 0%,#F2EEFB 100%); --orange:#9A6B1F; --orange-dark:#7A5416; --orange-soft:#FBF3E4; --green:#2F7D5F; --green-soft:#EDF6F1; --navy:#1A1A1A; --navy-2:#262626; --text:#141414; --text-2:#4A4A4A; --text-3:#757575; --border:#E6E2DC; --bg:#FBFAF8; --white:#FFFFFF; --radius:4px; --radius-lg:6px; --shadow-sm:none; --shadow:none; --shadow-lg:none; --container:880px; } :root[data-skin="k3"]:not([data-theme="dark"]) .ui2{ --ui-bg:#FBFAF8; --ui-surface:#FFFFFF; --ui-border:#E6E2DC; --ui-border-2:#D8D3CA; --ui-ink:#141414; --ui-ink-2:#4A4A4A; --ui-ink-3:#757575; --ui-primary:#1A4FD6; --ui-primary-2:#6D4AC7; --ui-violet:#6D4AC7; --ui-gradient:linear-gradient(120deg,#1A4FD6 0%,#6D4AC7 100%); --ui-gradient-btn:linear-gradient(135deg,#1A4FD6 0%,#6D4AC7 100%); --ui-green:#2F7D5F; --ui-amber:#9A6B1F; --ui-red:#A33A3A; --ui-navy:#1A1A1A; --soft-blue:#EEF2FE; --soft-green:#EDF6F1; --soft-amber:#FBF3E4; --soft-red:#F8EDED; --soft-violet:#F2EEFB; --soft-gray:#F6F4F0; --ui-shadow-sm:none; --ui-shadow-md:none; --ui-shadow-lg:none; --ui-r-sm:2px; --ui-r-md:3px; --ui-r-lg:4px; --ui-r-xl:6px; --bg:#FBFAF8; --border:#E6E2DC; --navy:#1A1A1A; --text:#141414; --text-2:#4A4A4A; --text-3:#757575; --primary-light:#EEF2FE; --green-soft:#EDF6F1; --orange-soft:#FBF3E4; --orange-dark:#7A5416; --shadow:none; --green:#2F7D5F; --orange:#9A6B1F; --gradient:linear-gradient(120deg,#1A4FD6 0%,#6D4AC7 100%); --radius-lg:6px; --shadow-lg:none; } :root[data-skin="k3"]:not([data-theme="dark"]) .poa{ --poa-bg:#FBFAF8; --poa-surface:#FFFFFF; --poa-surface-2:#F6F4F0; --poa-border:#E6E2DC; --poa-border-2:#D8D3CA; --poa-divider:#EFECE6; --poa-ink:#141414; --poa-ink-2:#4A4A4A; --poa-ink-3:#757575; --poa-primary:#1A4FD6; --poa-primary-2:#1338A3; --poa-primary-bg:#EEF2FE; --poa-ok:#2F7D5F; --poa-ok-bg:#EDF6F1; --poa-warn:#9A6B1F; --poa-warn-bg:#FBF3E4; --poa-danger:#A33A3A; --poa-danger-bg:#F8EDED; --poa-violet:#6D4AC7; --poa-violet-bg:#F2EEFB; --poa-neutral:#757575; --poa-neutral-bg:#F6F4F0; --poa-r-sm:2px; --poa-r-md:3px; --poa-r-lg:4px; --poa-shadow-sm:none; --poa-shadow-md:none; --poa-row-h:40px; } /* K3 杂志编辑 · 暗色 */ :root[data-skin="k3"][data-theme="dark"]{ --skin-bg:#141312; --skin-surface:#1C1B1A; --skin-surface-2:#242322; --skin-border:#2E2C2A; --skin-border-2:#3B3936; --skin-divider:#262524; --skin-ink:#F0ECE6; --skin-ink-2:#B8B2A8; --skin-ink-3:#8A857C; --skin-primary:#7AA2FF; --skin-primary-dark:#5B84E8; --skin-primary-soft:rgba(122,162,255,.16); --skin-violet:#B79CF5; --skin-violet-soft:rgba(183,156,245,.16); --skin-ok:#5FBF97; --skin-ok-soft:rgba(95,191,151,.14); --skin-warn:#D9A94B; --skin-warn-dark:#C2942F; --skin-warn-soft:rgba(217,169,75,.14); --skin-danger:#E08080; --skin-danger-soft:rgba(224,128,128,.14); --skin-navy:#0F0E0D; --skin-navy-2:#1A1918; --skin-on-accent:#141312; --skin-hairline:#262524; --skin-shadow-sm:none; --skin-shadow:none; --skin-shadow-lg:none; --skin-radius:4px; --skin-radius-lg:6px; --skin-r-sm:2px; --skin-r-md:3px; --skin-r-lg:4px; --skin-r-xl:6px; --skin-row-h:40px; --skin-container:880px; --skin-font-title:"Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,serif; --skin-blur:none; --skin-gradient:linear-gradient(120deg,#7AA2FF 0%,#B79CF5 100%); --skin-gradient-soft:linear-gradient(120deg,rgba(122,162,255,.16) 0%,rgba(183,156,245,.16) 100%); --skin-gradient-btn:linear-gradient(135deg,#7AA2FF 0%,#B79CF5 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#7AA2FF; --skin-fill-primary:#7AA2FF; --skin-ink-ok:#5FBF97; --skin-fill-ok:#5FBF97; --skin-ink-danger:#E08080; --skin-fill-danger:#E08080; --skin-ink-warn:#D9A94B; --skin-fill-warn:#D9A94B; } :root[data-skin="k3"][data-theme="dark"]{ --primary:#7AA2FF; --primary-dark:#5B84E8; --primary-light:rgba(122,162,255,.16); --violet:#B79CF5; --gradient:linear-gradient(120deg,#7AA2FF 0%,#B79CF5 100%); --gradient-soft:linear-gradient(120deg,rgba(122,162,255,.16) 0%,rgba(183,156,245,.16) 100%); --orange:#D9A94B; --orange-dark:#C2942F; --orange-soft:rgba(217,169,75,.14); --green:#5FBF97; --green-soft:rgba(95,191,151,.14); --navy:#0F0E0D; --navy-2:#1A1918; --text:#F0ECE6; --text-2:#B8B2A8; --text-3:#8A857C; --border:#2E2C2A; --bg:#141312; --white:#1C1B1A; --radius:4px; --radius-lg:6px; --shadow-sm:none; --shadow:none; --shadow-lg:none; --container:880px; } :root[data-skin="k3"][data-theme="dark"] .ui2{ --ui-bg:#141312; --ui-surface:#1C1B1A; --ui-border:#2E2C2A; --ui-border-2:#3B3936; --ui-ink:#F0ECE6; --ui-ink-2:#B8B2A8; --ui-ink-3:#8A857C; --ui-primary:#7AA2FF; --ui-primary-2:#B79CF5; --ui-violet:#B79CF5; --ui-gradient:linear-gradient(120deg,#7AA2FF 0%,#B79CF5 100%); --ui-gradient-btn:linear-gradient(135deg,#7AA2FF 0%,#B79CF5 100%); --ui-green:#5FBF97; --ui-amber:#D9A94B; --ui-red:#E08080; --ui-navy:#0F0E0D; --soft-blue:rgba(122,162,255,.16); --soft-green:rgba(95,191,151,.14); --soft-amber:rgba(217,169,75,.14); --soft-red:rgba(224,128,128,.14); --soft-violet:rgba(183,156,245,.16); --soft-gray:#242322; --ui-shadow-sm:none; --ui-shadow-md:none; --ui-shadow-lg:none; --ui-r-sm:2px; --ui-r-md:3px; --ui-r-lg:4px; --ui-r-xl:6px; --bg:#141312; --border:#2E2C2A; --navy:#0F0E0D; --text:#F0ECE6; --text-2:#B8B2A8; --text-3:#8A857C; --primary-light:rgba(122,162,255,.16); --green-soft:rgba(95,191,151,.14); --orange-soft:rgba(217,169,75,.14); --orange-dark:#C2942F; --shadow:none; --green:#5FBF97; --orange:#D9A94B; --gradient:linear-gradient(120deg,#7AA2FF 0%,#B79CF5 100%); --radius-lg:6px; --shadow-lg:none; } :root[data-skin="k3"][data-theme="dark"] .poa{ --poa-bg:#141312; --poa-surface:#1C1B1A; --poa-surface-2:#242322; --poa-border:#2E2C2A; --poa-border-2:#3B3936; --poa-divider:#262524; --poa-ink:#F0ECE6; --poa-ink-2:#B8B2A8; --poa-ink-3:#8A857C; --poa-primary:#7AA2FF; --poa-primary-2:#5B84E8; --poa-primary-bg:rgba(122,162,255,.16); --poa-ok:#5FBF97; --poa-ok-bg:rgba(95,191,151,.14); --poa-warn:#D9A94B; --poa-warn-bg:rgba(217,169,75,.14); --poa-danger:#E08080; --poa-danger-bg:rgba(224,128,128,.14); --poa-violet:#B79CF5; --poa-violet-bg:rgba(183,156,245,.16); --poa-neutral:#8A857C; --poa-neutral-bg:#242322; --poa-r-sm:2px; --poa-r-md:3px; --poa-r-lg:4px; --poa-shadow-sm:none; --poa-shadow-md:none; --poa-row-h:40px; } /* K4 渐变流光 · 明色 */ :root[data-skin="k4"]:not([data-theme="dark"]){ --skin-bg:#F6F7FC; --skin-surface:#FFFFFF; --skin-surface-2:#EEF1FA; --skin-border:#E4E8F4; --skin-border-2:#D2D9EC; --skin-divider:#EDF0F8; --skin-ink:#101B33; --skin-ink-2:#44506B; --skin-ink-3:#657495; --skin-primary:#2563EB; --skin-primary-dark:#1D4ED8; --skin-primary-soft:#EFF6FF; --skin-violet:#7C3AED; --skin-violet-soft:#F5F3FF; --skin-ok:#059669; --skin-ok-soft:#ECFDF5; --skin-warn:#D97706; --skin-warn-dark:#B45309; --skin-warn-soft:#FFFBEB; --skin-danger:#DC2626; --skin-danger-soft:#FEF2F2; --skin-navy:#16224A; --skin-navy-2:#1E2C5C; --skin-on-accent:#FFFFFF; --skin-hairline:rgba(255,255,255,.28); --skin-shadow-sm:0 1px 2px rgba(37,99,235,.06); --skin-shadow:0 12px 32px rgba(124,58,237,.22); --skin-shadow-lg:0 20px 48px rgba(124,58,237,.30); --skin-radius:18px; --skin-radius-lg:20px; --skin-r-sm:10px; --skin-r-md:14px; --skin-r-lg:18px; --skin-r-xl:22px; --skin-row-h:46px; --skin-container:1200px; --skin-font-title:var(--font); --skin-blur:none; --skin-gradient:linear-gradient(120deg,#2563EB 0%,#7C3AED 100%); --skin-gradient-soft:linear-gradient(120deg,#EFF6FF 0%,#F5F3FF 100%); --skin-gradient-btn:linear-gradient(135deg,#2563EB 0%,#7C3AED 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#2563EB; --skin-fill-primary:#2563EB; --skin-ink-ok:#04865E; --skin-fill-ok:#04865E; --skin-ink-danger:#DC2626; --skin-fill-danger:#DC2626; --skin-ink-warn:#B16105; --skin-fill-warn:#B16105; } :root[data-skin="k4"]:not([data-theme="dark"]){ --primary:#2563EB; --primary-dark:#1D4ED8; --primary-light:#EFF6FF; --violet:#7C3AED; --gradient:linear-gradient(120deg,#2563EB 0%,#7C3AED 100%); --gradient-soft:linear-gradient(120deg,#EFF6FF 0%,#F5F3FF 100%); --orange:#D97706; --orange-dark:#B45309; --orange-soft:#FFFBEB; --green:#059669; --green-soft:#ECFDF5; --navy:#16224A; --navy-2:#1E2C5C; --text:#101B33; --text-2:#44506B; --text-3:#657495; --border:#E4E8F4; --bg:#F6F7FC; --white:#FFFFFF; --radius:18px; --radius-lg:20px; --shadow-sm:0 1px 2px rgba(37,99,235,.06); --shadow:0 12px 32px rgba(124,58,237,.22); --shadow-lg:0 20px 48px rgba(124,58,237,.30); --container:1200px; } :root[data-skin="k4"]:not([data-theme="dark"]) .ui2{ --ui-bg:#F6F7FC; --ui-surface:#FFFFFF; --ui-border:#E4E8F4; --ui-border-2:#D2D9EC; --ui-ink:#101B33; --ui-ink-2:#44506B; --ui-ink-3:#657495; --ui-primary:#2563EB; --ui-primary-2:#7C3AED; --ui-violet:#7C3AED; --ui-gradient:linear-gradient(120deg,#2563EB 0%,#7C3AED 100%); --ui-gradient-btn:linear-gradient(135deg,#2563EB 0%,#7C3AED 100%); --ui-green:#059669; --ui-amber:#D97706; --ui-red:#DC2626; --ui-navy:#16224A; --soft-blue:#EFF6FF; --soft-green:#ECFDF5; --soft-amber:#FFFBEB; --soft-red:#FEF2F2; --soft-violet:#F5F3FF; --soft-gray:#EEF1FA; --ui-shadow-sm:0 1px 2px rgba(37,99,235,.06); --ui-shadow-md:0 12px 32px rgba(124,58,237,.22); --ui-shadow-lg:0 20px 48px rgba(124,58,237,.30); --ui-r-sm:10px; --ui-r-md:14px; --ui-r-lg:18px; --ui-r-xl:22px; --bg:#F6F7FC; --border:#E4E8F4; --navy:#16224A; --text:#101B33; --text-2:#44506B; --text-3:#657495; --primary-light:#EFF6FF; --green-soft:#ECFDF5; --orange-soft:#FFFBEB; --orange-dark:#B45309; --shadow:0 12px 32px rgba(124,58,237,.22); --green:#059669; --orange:#D97706; --gradient:linear-gradient(120deg,#2563EB 0%,#7C3AED 100%); --radius-lg:20px; --shadow-lg:0 20px 48px rgba(124,58,237,.30); } :root[data-skin="k4"]:not([data-theme="dark"]) .poa{ --poa-bg:#F6F7FC; --poa-surface:#FFFFFF; --poa-surface-2:#EEF1FA; --poa-border:#E4E8F4; --poa-border-2:#D2D9EC; --poa-divider:#EDF0F8; --poa-ink:#101B33; --poa-ink-2:#44506B; --poa-ink-3:#657495; --poa-primary:#2563EB; --poa-primary-2:#1D4ED8; --poa-primary-bg:#EFF6FF; --poa-ok:#059669; --poa-ok-bg:#ECFDF5; --poa-warn:#D97706; --poa-warn-bg:#FFFBEB; --poa-danger:#DC2626; --poa-danger-bg:#FEF2F2; --poa-violet:#7C3AED; --poa-violet-bg:#F5F3FF; --poa-neutral:#657495; --poa-neutral-bg:#EEF1FA; --poa-r-sm:10px; --poa-r-md:14px; --poa-r-lg:18px; --poa-shadow-sm:0 1px 2px rgba(37,99,235,.06); --poa-shadow-md:0 12px 32px rgba(124,58,237,.22); --poa-row-h:46px; } /* K4 渐变流光 · 暗色 */ :root[data-skin="k4"][data-theme="dark"]{ --skin-bg:#0C1020; --skin-surface:#141A2E; --skin-surface-2:#1B2440; --skin-border:#26304E; --skin-border-2:#34406A; --skin-divider:#1E2745; --skin-ink:#EEF1FB; --skin-ink-2:#B4BEDC; --skin-ink-3:#808EAF; --skin-primary:#3B82F6; --skin-primary-dark:#2563EB; --skin-primary-soft:rgba(59,130,246,.18); --skin-violet:#8B5CF6; --skin-violet-soft:rgba(139,92,246,.18); --skin-ok:#34D399; --skin-ok-soft:rgba(52,211,153,.14); --skin-warn:#FBBF24; --skin-warn-dark:#F59E0B; --skin-warn-soft:rgba(251,191,36,.14); --skin-danger:#F87171; --skin-danger-soft:rgba(248,113,113,.14); --skin-navy:#0A0E1C; --skin-navy-2:#141A2E; --skin-on-accent:#FFFFFF; --skin-hairline:rgba(255,255,255,.16); --skin-shadow-sm:0 1px 2px rgba(0,0,0,.35); --skin-shadow:0 12px 32px rgba(124,58,237,.30); --skin-shadow-lg:0 20px 48px rgba(124,58,237,.40); --skin-radius:18px; --skin-radius-lg:20px; --skin-r-sm:10px; --skin-r-md:14px; --skin-r-lg:18px; --skin-r-xl:22px; --skin-row-h:46px; --skin-container:1200px; --skin-font-title:var(--font); --skin-blur:none; --skin-gradient:linear-gradient(120deg,#3B82F6 0%,#8B5CF6 100%); --skin-gradient-soft:linear-gradient(120deg,rgba(59,130,246,.18) 0%,rgba(139,92,246,.18) 100%); --skin-gradient-btn:linear-gradient(135deg,#3B82F6 0%,#8B5CF6 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#3B82F6; --skin-fill-primary:#1B6DF5; --skin-ink-ok:#34D399; --skin-fill-ok:#1D855F; --skin-ink-danger:#F87171; --skin-fill-danger:#EA0C0C; --skin-ink-warn:#FBBF24; --skin-fill-warn:#986E03; } :root[data-skin="k4"][data-theme="dark"]{ --primary:#3B82F6; --primary-dark:#2563EB; --primary-light:rgba(59,130,246,.18); --violet:#8B5CF6; --gradient:linear-gradient(120deg,#3B82F6 0%,#8B5CF6 100%); --gradient-soft:linear-gradient(120deg,rgba(59,130,246,.18) 0%,rgba(139,92,246,.18) 100%); --orange:#FBBF24; --orange-dark:#F59E0B; --orange-soft:rgba(251,191,36,.14); --green:#34D399; --green-soft:rgba(52,211,153,.14); --navy:#0A0E1C; --navy-2:#141A2E; --text:#EEF1FB; --text-2:#B4BEDC; --text-3:#808EAF; --border:#26304E; --bg:#0C1020; --white:#141A2E; --radius:18px; --radius-lg:20px; --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 12px 32px rgba(124,58,237,.30); --shadow-lg:0 20px 48px rgba(124,58,237,.40); --container:1200px; } :root[data-skin="k4"][data-theme="dark"] .ui2{ --ui-bg:#0C1020; --ui-surface:#141A2E; --ui-border:#26304E; --ui-border-2:#34406A; --ui-ink:#EEF1FB; --ui-ink-2:#B4BEDC; --ui-ink-3:#808EAF; --ui-primary:#3B82F6; --ui-primary-2:#8B5CF6; --ui-violet:#8B5CF6; --ui-gradient:linear-gradient(120deg,#3B82F6 0%,#8B5CF6 100%); --ui-gradient-btn:linear-gradient(135deg,#3B82F6 0%,#8B5CF6 100%); --ui-green:#34D399; --ui-amber:#FBBF24; --ui-red:#F87171; --ui-navy:#0A0E1C; --soft-blue:rgba(59,130,246,.18); --soft-green:rgba(52,211,153,.14); --soft-amber:rgba(251,191,36,.14); --soft-red:rgba(248,113,113,.14); --soft-violet:rgba(139,92,246,.18); --soft-gray:#1B2440; --ui-shadow-sm:0 1px 2px rgba(0,0,0,.35); --ui-shadow-md:0 12px 32px rgba(124,58,237,.30); --ui-shadow-lg:0 20px 48px rgba(124,58,237,.40); --ui-r-sm:10px; --ui-r-md:14px; --ui-r-lg:18px; --ui-r-xl:22px; --bg:#0C1020; --border:#26304E; --navy:#0A0E1C; --text:#EEF1FB; --text-2:#B4BEDC; --text-3:#808EAF; --primary-light:rgba(59,130,246,.18); --green-soft:rgba(52,211,153,.14); --orange-soft:rgba(251,191,36,.14); --orange-dark:#F59E0B; --shadow:0 12px 32px rgba(124,58,237,.30); --green:#34D399; --orange:#FBBF24; --gradient:linear-gradient(120deg,#3B82F6 0%,#8B5CF6 100%); --radius-lg:20px; --shadow-lg:0 20px 48px rgba(124,58,237,.40); } :root[data-skin="k4"][data-theme="dark"] .poa{ --poa-bg:#0C1020; --poa-surface:#141A2E; --poa-surface-2:#1B2440; --poa-border:#26304E; --poa-border-2:#34406A; --poa-divider:#1E2745; --poa-ink:#EEF1FB; --poa-ink-2:#B4BEDC; --poa-ink-3:#808EAF; --poa-primary:#3B82F6; --poa-primary-2:#2563EB; --poa-primary-bg:rgba(59,130,246,.18); --poa-ok:#34D399; --poa-ok-bg:rgba(52,211,153,.14); --poa-warn:#FBBF24; --poa-warn-bg:rgba(251,191,36,.14); --poa-danger:#F87171; --poa-danger-bg:rgba(248,113,113,.14); --poa-violet:#8B5CF6; --poa-violet-bg:rgba(139,92,246,.18); --poa-neutral:#808EAF; --poa-neutral-bg:#1B2440; --poa-r-sm:10px; --poa-r-md:14px; --poa-r-lg:18px; --poa-shadow-sm:0 1px 2px rgba(0,0,0,.35); --poa-shadow-md:0 12px 32px rgba(124,58,237,.30); --poa-row-h:46px; } /* K5 纸感素雅 · 明色 */ :root[data-skin="k5"]:not([data-theme="dark"]){ --skin-bg:#FAF9F6; --skin-surface:#FFFEFB; --skin-surface-2:#FBF9F4; --skin-border:#E2DED4; --skin-border-2:#D3CEC1; --skin-divider:#ECE8DF; --skin-ink:#1C1C1C; --skin-ink-2:#55605A; --skin-ink-3:#6F7570; --skin-primary:#1F3A5F; --skin-primary-dark:#16293F; --skin-primary-soft:#EDF1F6; --skin-violet:#5B4A7A; --skin-violet-soft:#F1EEF6; --skin-ok:#2F7D5F; --skin-ok-soft:#EDF6F1; --skin-warn:#9A6B1F; --skin-warn-dark:#7A5416; --skin-warn-soft:#FBF3E4; --skin-danger:#A33A3A; --skin-danger-soft:#F8EDED; --skin-navy:#1F1F1D; --skin-navy-2:#2B2B28; --skin-on-accent:#FFFFFF; --skin-hairline:#ECE8DF; --skin-shadow-sm:none; --skin-shadow:none; --skin-shadow-lg:none; --skin-radius:3px; --skin-radius-lg:4px; --skin-r-sm:2px; --skin-r-md:3px; --skin-r-lg:4px; --skin-r-xl:5px; --skin-row-h:40px; --skin-container:1200px; --skin-font-title:var(--font); --skin-blur:none; --skin-gradient:linear-gradient(120deg,#1F3A5F 0%,#5B4A7A 100%); --skin-gradient-soft:linear-gradient(120deg,#EDF1F6 0%,#F1EEF6 100%); --skin-gradient-btn:linear-gradient(135deg,#1F3A5F 0%,#5B4A7A 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#1F3A5F; --skin-fill-primary:#1F3A5F; --skin-ink-ok:#2F7D5F; --skin-fill-ok:#2F7D5F; --skin-ink-danger:#A33A3A; --skin-fill-danger:#A33A3A; --skin-ink-warn:#9A6B1F; --skin-fill-warn:#9A6B1F; } :root[data-skin="k5"]:not([data-theme="dark"]){ --primary:#1F3A5F; --primary-dark:#16293F; --primary-light:#EDF1F6; --violet:#5B4A7A; --gradient:linear-gradient(120deg,#1F3A5F 0%,#5B4A7A 100%); --gradient-soft:linear-gradient(120deg,#EDF1F6 0%,#F1EEF6 100%); --orange:#9A6B1F; --orange-dark:#7A5416; --orange-soft:#FBF3E4; --green:#2F7D5F; --green-soft:#EDF6F1; --navy:#1F1F1D; --navy-2:#2B2B28; --text:#1C1C1C; --text-2:#55605A; --text-3:#6F7570; --border:#E2DED4; --bg:#FAF9F6; --white:#FFFEFB; --radius:3px; --radius-lg:4px; --shadow-sm:none; --shadow:none; --shadow-lg:none; --container:1200px; } :root[data-skin="k5"]:not([data-theme="dark"]) .ui2{ --ui-bg:#FAF9F6; --ui-surface:#FFFEFB; --ui-border:#E2DED4; --ui-border-2:#D3CEC1; --ui-ink:#1C1C1C; --ui-ink-2:#55605A; --ui-ink-3:#6F7570; --ui-primary:#1F3A5F; --ui-primary-2:#5B4A7A; --ui-violet:#5B4A7A; --ui-gradient:linear-gradient(120deg,#1F3A5F 0%,#5B4A7A 100%); --ui-gradient-btn:linear-gradient(135deg,#1F3A5F 0%,#5B4A7A 100%); --ui-green:#2F7D5F; --ui-amber:#9A6B1F; --ui-red:#A33A3A; --ui-navy:#1F1F1D; --soft-blue:#EDF1F6; --soft-green:#EDF6F1; --soft-amber:#FBF3E4; --soft-red:#F8EDED; --soft-violet:#F1EEF6; --soft-gray:#FBF9F4; --ui-shadow-sm:none; --ui-shadow-md:none; --ui-shadow-lg:none; --ui-r-sm:2px; --ui-r-md:3px; --ui-r-lg:4px; --ui-r-xl:5px; --bg:#FAF9F6; --border:#E2DED4; --navy:#1F1F1D; --text:#1C1C1C; --text-2:#55605A; --text-3:#6F7570; --primary-light:#EDF1F6; --green-soft:#EDF6F1; --orange-soft:#FBF3E4; --orange-dark:#7A5416; --shadow:none; --green:#2F7D5F; --orange:#9A6B1F; --gradient:linear-gradient(120deg,#1F3A5F 0%,#5B4A7A 100%); --radius-lg:4px; --shadow-lg:none; } :root[data-skin="k5"]:not([data-theme="dark"]) .poa{ --poa-bg:#FAF9F6; --poa-surface:#FFFEFB; --poa-surface-2:#FBF9F4; --poa-border:#E2DED4; --poa-border-2:#D3CEC1; --poa-divider:#ECE8DF; --poa-ink:#1C1C1C; --poa-ink-2:#55605A; --poa-ink-3:#6F7570; --poa-primary:#1F3A5F; --poa-primary-2:#16293F; --poa-primary-bg:#EDF1F6; --poa-ok:#2F7D5F; --poa-ok-bg:#EDF6F1; --poa-warn:#9A6B1F; --poa-warn-bg:#FBF3E4; --poa-danger:#A33A3A; --poa-danger-bg:#F8EDED; --poa-violet:#5B4A7A; --poa-violet-bg:#F1EEF6; --poa-neutral:#6F7570; --poa-neutral-bg:#FBF9F4; --poa-r-sm:2px; --poa-r-md:3px; --poa-r-lg:4px; --poa-shadow-sm:none; --poa-shadow-md:none; --poa-row-h:40px; } /* K5 纸感素雅 · 暗色 */ :root[data-skin="k5"][data-theme="dark"]{ --skin-bg:#1A1A18; --skin-surface:#222220; --skin-surface-2:#2A2A27; --skin-border:#34332F; --skin-border-2:#43423D; --skin-divider:#2C2B28; --skin-ink:#ECE8E0; --skin-ink-2:#B5AFA3; --skin-ink-3:#8F8A7F; --skin-primary:#8AB4D8; --skin-primary-dark:#6E9BC4; --skin-primary-soft:rgba(138,180,216,.16); --skin-violet:#B3A3D6; --skin-violet-soft:rgba(179,163,214,.16); --skin-ok:#6FBF97; --skin-ok-soft:rgba(111,191,151,.14); --skin-warn:#D9B15E; --skin-warn-dark:#C29A3F; --skin-warn-soft:rgba(217,177,94,.14); --skin-danger:#DB8A8A; --skin-danger-soft:rgba(219,138,138,.14); --skin-navy:#141413; --skin-navy-2:#1F1F1D; --skin-on-accent:#1A1A18; --skin-hairline:#2C2B28; --skin-shadow-sm:none; --skin-shadow:none; --skin-shadow-lg:none; --skin-radius:3px; --skin-radius-lg:4px; --skin-r-sm:2px; --skin-r-md:3px; --skin-r-lg:4px; --skin-r-xl:5px; --skin-row-h:40px; --skin-container:1200px; --skin-font-title:var(--font); --skin-blur:none; --skin-gradient:linear-gradient(120deg,#8AB4D8 0%,#B3A3D6 100%); --skin-gradient-soft:linear-gradient(120deg,rgba(138,180,216,.16) 0%,rgba(179,163,214,.16) 100%); --skin-gradient-btn:linear-gradient(135deg,#8AB4D8 0%,#B3A3D6 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#8AB4D8; --skin-fill-primary:#8AB4D8; --skin-ink-ok:#6FBF97; --skin-fill-ok:#6FBF97; --skin-ink-danger:#DB8A8A; --skin-fill-danger:#DB8A8A; --skin-ink-warn:#D9B15E; --skin-fill-warn:#D9B15E; } :root[data-skin="k5"][data-theme="dark"]{ --primary:#8AB4D8; --primary-dark:#6E9BC4; --primary-light:rgba(138,180,216,.16); --violet:#B3A3D6; --gradient:linear-gradient(120deg,#8AB4D8 0%,#B3A3D6 100%); --gradient-soft:linear-gradient(120deg,rgba(138,180,216,.16) 0%,rgba(179,163,214,.16) 100%); --orange:#D9B15E; --orange-dark:#C29A3F; --orange-soft:rgba(217,177,94,.14); --green:#6FBF97; --green-soft:rgba(111,191,151,.14); --navy:#141413; --navy-2:#1F1F1D; --text:#ECE8E0; --text-2:#B5AFA3; --text-3:#8F8A7F; --border:#34332F; --bg:#1A1A18; --white:#222220; --radius:3px; --radius-lg:4px; --shadow-sm:none; --shadow:none; --shadow-lg:none; --container:1200px; } :root[data-skin="k5"][data-theme="dark"] .ui2{ --ui-bg:#1A1A18; --ui-surface:#222220; --ui-border:#34332F; --ui-border-2:#43423D; --ui-ink:#ECE8E0; --ui-ink-2:#B5AFA3; --ui-ink-3:#8F8A7F; --ui-primary:#8AB4D8; --ui-primary-2:#B3A3D6; --ui-violet:#B3A3D6; --ui-gradient:linear-gradient(120deg,#8AB4D8 0%,#B3A3D6 100%); --ui-gradient-btn:linear-gradient(135deg,#8AB4D8 0%,#B3A3D6 100%); --ui-green:#6FBF97; --ui-amber:#D9B15E; --ui-red:#DB8A8A; --ui-navy:#141413; --soft-blue:rgba(138,180,216,.16); --soft-green:rgba(111,191,151,.14); --soft-amber:rgba(217,177,94,.14); --soft-red:rgba(219,138,138,.14); --soft-violet:rgba(179,163,214,.16); --soft-gray:#2A2A27; --ui-shadow-sm:none; --ui-shadow-md:none; --ui-shadow-lg:none; --ui-r-sm:2px; --ui-r-md:3px; --ui-r-lg:4px; --ui-r-xl:5px; --bg:#1A1A18; --border:#34332F; --navy:#141413; --text:#ECE8E0; --text-2:#B5AFA3; --text-3:#8F8A7F; --primary-light:rgba(138,180,216,.16); --green-soft:rgba(111,191,151,.14); --orange-soft:rgba(217,177,94,.14); --orange-dark:#C29A3F; --shadow:none; --green:#6FBF97; --orange:#D9B15E; --gradient:linear-gradient(120deg,#8AB4D8 0%,#B3A3D6 100%); --radius-lg:4px; --shadow-lg:none; } :root[data-skin="k5"][data-theme="dark"] .poa{ --poa-bg:#1A1A18; --poa-surface:#222220; --poa-surface-2:#2A2A27; --poa-border:#34332F; --poa-border-2:#43423D; --poa-divider:#2C2B28; --poa-ink:#ECE8E0; --poa-ink-2:#B5AFA3; --poa-ink-3:#8F8A7F; --poa-primary:#8AB4D8; --poa-primary-2:#6E9BC4; --poa-primary-bg:rgba(138,180,216,.16); --poa-ok:#6FBF97; --poa-ok-bg:rgba(111,191,151,.14); --poa-warn:#D9B15E; --poa-warn-bg:rgba(217,177,94,.14); --poa-danger:#DB8A8A; --poa-danger-bg:rgba(219,138,138,.14); --poa-violet:#B3A3D6; --poa-violet-bg:rgba(179,163,214,.16); --poa-neutral:#8F8A7F; --poa-neutral-bg:#2A2A27; --poa-r-sm:2px; --poa-r-md:3px; --poa-r-lg:4px; --poa-shadow-sm:none; --poa-shadow-md:none; --poa-row-h:40px; } /* K6 驾驶舱 · 明色 */ :root[data-skin="k6"]:not([data-theme="dark"]){ --skin-bg:#F2F4F7; --skin-surface:#FFFFFF; --skin-surface-2:#F7F9FC; --skin-border:#CBD3DF; --skin-border-2:#B4BECD; --skin-divider:#E1E6ED; --skin-ink:#0F1720; --skin-ink-2:#44506B; --skin-ink-3:#697587; --skin-primary:#0F62FE; --skin-primary-dark:#0043CE; --skin-primary-soft:#E8F1FF; --skin-violet:#6F4FE8; --skin-violet-soft:#F0EDFE; --skin-ok:#10B981; --skin-ok-soft:#ECFDF5; --skin-warn:#F59E0B; --skin-warn-dark:#D97706; --skin-warn-soft:#FFFBEB; --skin-danger:#DC2626; --skin-danger-soft:#FEF2F2; --skin-navy:#12181F; --skin-navy-2:#1C2733; --skin-on-accent:#FFFFFF; --skin-hairline:#E1E6ED; --skin-shadow-sm:none; --skin-shadow:none; --skin-shadow-lg:none; --skin-radius:1px; --skin-radius-lg:2px; --skin-r-sm:0px; --skin-r-md:1px; --skin-r-lg:2px; --skin-r-xl:3px; --skin-row-h:36px; --skin-container:1600px; --skin-font-title:var(--font); --skin-blur:none; --skin-gradient:linear-gradient(120deg,#0F62FE 0%,#6F4FE8 100%); --skin-gradient-soft:linear-gradient(120deg,#E8F1FF 0%,#F0EDFE 100%); --skin-gradient-btn:linear-gradient(135deg,#0F62FE 0%,#6F4FE8 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#0F62FE; --skin-fill-primary:#0F62FE; --skin-ink-ok:#0C865D; --skin-fill-ok:#0C865D; --skin-ink-danger:#DC2626; --skin-fill-danger:#DC2626; --skin-ink-warn:#A36907; --skin-fill-warn:#A36907; } :root[data-skin="k6"]:not([data-theme="dark"]){ --primary:#0F62FE; --primary-dark:#0043CE; --primary-light:#E8F1FF; --violet:#6F4FE8; --gradient:linear-gradient(120deg,#0F62FE 0%,#6F4FE8 100%); --gradient-soft:linear-gradient(120deg,#E8F1FF 0%,#F0EDFE 100%); --orange:#F59E0B; --orange-dark:#D97706; --orange-soft:#FFFBEB; --green:#10B981; --green-soft:#ECFDF5; --navy:#12181F; --navy-2:#1C2733; --text:#0F1720; --text-2:#44506B; --text-3:#697587; --border:#CBD3DF; --bg:#F2F4F7; --white:#FFFFFF; --radius:1px; --radius-lg:2px; --shadow-sm:none; --shadow:none; --shadow-lg:none; --container:1600px; } :root[data-skin="k6"]:not([data-theme="dark"]) .ui2{ --ui-bg:#F2F4F7; --ui-surface:#FFFFFF; --ui-border:#CBD3DF; --ui-border-2:#B4BECD; --ui-ink:#0F1720; --ui-ink-2:#44506B; --ui-ink-3:#697587; --ui-primary:#0F62FE; --ui-primary-2:#6F4FE8; --ui-violet:#6F4FE8; --ui-gradient:linear-gradient(120deg,#0F62FE 0%,#6F4FE8 100%); --ui-gradient-btn:linear-gradient(135deg,#0F62FE 0%,#6F4FE8 100%); --ui-green:#10B981; --ui-amber:#F59E0B; --ui-red:#DC2626; --ui-navy:#12181F; --soft-blue:#E8F1FF; --soft-green:#ECFDF5; --soft-amber:#FFFBEB; --soft-red:#FEF2F2; --soft-violet:#F0EDFE; --soft-gray:#F7F9FC; --ui-shadow-sm:none; --ui-shadow-md:none; --ui-shadow-lg:none; --ui-r-sm:0px; --ui-r-md:1px; --ui-r-lg:2px; --ui-r-xl:3px; --bg:#F2F4F7; --border:#CBD3DF; --navy:#12181F; --text:#0F1720; --text-2:#44506B; --text-3:#697587; --primary-light:#E8F1FF; --green-soft:#ECFDF5; --orange-soft:#FFFBEB; --orange-dark:#D97706; --shadow:none; --green:#10B981; --orange:#F59E0B; --gradient:linear-gradient(120deg,#0F62FE 0%,#6F4FE8 100%); --radius-lg:2px; --shadow-lg:none; } :root[data-skin="k6"]:not([data-theme="dark"]) .poa{ --poa-bg:#F2F4F7; --poa-surface:#FFFFFF; --poa-surface-2:#F7F9FC; --poa-border:#CBD3DF; --poa-border-2:#B4BECD; --poa-divider:#E1E6ED; --poa-ink:#0F1720; --poa-ink-2:#44506B; --poa-ink-3:#697587; --poa-primary:#0F62FE; --poa-primary-2:#0043CE; --poa-primary-bg:#E8F1FF; --poa-ok:#10B981; --poa-ok-bg:#ECFDF5; --poa-warn:#F59E0B; --poa-warn-bg:#FFFBEB; --poa-danger:#DC2626; --poa-danger-bg:#FEF2F2; --poa-violet:#6F4FE8; --poa-violet-bg:#F0EDFE; --poa-neutral:#697587; --poa-neutral-bg:#F7F9FC; --poa-r-sm:0px; --poa-r-md:1px; --poa-r-lg:2px; --poa-shadow-sm:none; --poa-shadow-md:none; --poa-row-h:36px; } /* K6 驾驶舱 · 暗色 */ :root[data-skin="k6"][data-theme="dark"]{ --skin-bg:#0B0D10; --skin-surface:#14171B; --skin-surface-2:#1A1E23; --skin-border:#262B33; --skin-border-2:#333A45; --skin-divider:#1E2329; --skin-ink:#DFE4EA; --skin-ink-2:#A7B0BB; --skin-ink-3:#78828F; --skin-primary:#4D9DFF; --skin-primary-dark:#2E86F0; --skin-primary-soft:rgba(77,157,255,.16); --skin-violet:#9E86FF; --skin-violet-soft:rgba(158,134,255,.16); --skin-ok:#3DDC84; --skin-ok-soft:rgba(61,220,132,.14); --skin-warn:#FBBF24; --skin-warn-dark:#F59E0B; --skin-warn-soft:rgba(251,191,36,.14); --skin-danger:#FF6B6B; --skin-danger-soft:rgba(255,107,107,.14); --skin-navy:#05070A; --skin-navy-2:#0B0D10; --skin-on-accent:#0B0D10; --skin-hairline:#1E2329; --skin-shadow-sm:none; --skin-shadow:none; --skin-shadow-lg:none; --skin-radius:1px; --skin-radius-lg:2px; --skin-r-sm:0px; --skin-r-md:1px; --skin-r-lg:2px; --skin-r-xl:3px; --skin-row-h:36px; --skin-container:1600px; --skin-font-title:var(--font); --skin-blur:none; --skin-gradient:linear-gradient(120deg,#4D9DFF 0%,#9E86FF 100%); --skin-gradient-soft:linear-gradient(120deg,rgba(77,157,255,.16) 0%,rgba(158,134,255,.16) 100%); --skin-gradient-btn:linear-gradient(135deg,#4D9DFF 0%,#9E86FF 100%); /* ── 可读性 token：由 tools/gen-skin-contrast-tokens.cjs 按 WCAG 4.5:1 反算 ── */ --skin-ink-primary:#4D9DFF; --skin-fill-primary:#4D9DFF; --skin-ink-ok:#3DDC84; --skin-fill-ok:#3DDC84; --skin-ink-danger:#FF6B6B; --skin-fill-danger:#FF6B6B; --skin-ink-warn:#FBBF24; --skin-fill-warn:#FBBF24; } :root[data-skin="k6"][data-theme="dark"]{ --primary:#4D9DFF; --primary-dark:#2E86F0; --primary-light:rgba(77,157,255,.16); --violet:#9E86FF; --gradient:linear-gradient(120deg,#4D9DFF 0%,#9E86FF 100%); --gradient-soft:linear-gradient(120deg,rgba(77,157,255,.16) 0%,rgba(158,134,255,.16) 100%); --orange:#FBBF24; --orange-dark:#F59E0B; --orange-soft:rgba(251,191,36,.14); --green:#3DDC84; --green-soft:rgba(61,220,132,.14); --navy:#05070A; --navy-2:#0B0D10; --text:#DFE4EA; --text-2:#A7B0BB; --text-3:#78828F; --border:#262B33; --bg:#0B0D10; --white:#14171B; --radius:1px; --radius-lg:2px; --shadow-sm:none; --shadow:none; --shadow-lg:none; --container:1600px; } :root[data-skin="k6"][data-theme="dark"] .ui2{ --ui-bg:#0B0D10; --ui-surface:#14171B; --ui-border:#262B33; --ui-border-2:#333A45; --ui-ink:#DFE4EA; --ui-ink-2:#A7B0BB; --ui-ink-3:#78828F; --ui-primary:#4D9DFF; --ui-primary-2:#9E86FF; --ui-violet:#9E86FF; --ui-gradient:linear-gradient(120deg,#4D9DFF 0%,#9E86FF 100%); --ui-gradient-btn:linear-gradient(135deg,#4D9DFF 0%,#9E86FF 100%); --ui-green:#3DDC84; --ui-amber:#FBBF24; --ui-red:#FF6B6B; --ui-navy:#05070A; --soft-blue:rgba(77,157,255,.16); --soft-green:rgba(61,220,132,.14); --soft-amber:rgba(251,191,36,.14); --soft-red:rgba(255,107,107,.14); --soft-violet:rgba(158,134,255,.16); --soft-gray:#1A1E23; --ui-shadow-sm:none; --ui-shadow-md:none; --ui-shadow-lg:none; --ui-r-sm:0px; --ui-r-md:1px; --ui-r-lg:2px; --ui-r-xl:3px; --bg:#0B0D10; --border:#262B33; --navy:#05070A; --text:#DFE4EA; --text-2:#A7B0BB; --text-3:#78828F; --primary-light:rgba(77,157,255,.16); --green-soft:rgba(61,220,132,.14); --orange-soft:rgba(251,191,36,.14); --orange-dark:#F59E0B; --shadow:none; --green:#3DDC84; --orange:#FBBF24; --gradient:linear-gradient(120deg,#4D9DFF 0%,#9E86FF 100%); --radius-lg:2px; --shadow-lg:none; } :root[data-skin="k6"][data-theme="dark"] .poa{ --poa-bg:#0B0D10; --poa-surface:#14171B; --poa-surface-2:#1A1E23; --poa-border:#262B33; --poa-border-2:#333A45; --poa-divider:#1E2329; --poa-ink:#DFE4EA; --poa-ink-2:#A7B0BB; --poa-ink-3:#78828F; --poa-primary:#4D9DFF; --poa-primary-2:#2E86F0; --poa-primary-bg:rgba(77,157,255,.16); --poa-ok:#3DDC84; --poa-ok-bg:rgba(61,220,132,.14); --poa-warn:#FBBF24; --poa-warn-bg:rgba(251,191,36,.14); --poa-danger:#FF6B6B; --poa-danger-bg:rgba(255,107,107,.14); --poa-violet:#9E86FF; --poa-violet-bg:rgba(158,134,255,.16); --poa-neutral:#78828F; --poa-neutral-bg:#1A1E23; --poa-r-sm:0px; --poa-r-md:1px; --poa-r-lg:2px; --poa-shadow-sm:none; --poa-shadow-md:none; --poa-row-h:36px; } /* ══════ ④ 形态叠加层 ══════ */ /* ── 形态叠加层（非颜色差异；默认无副作用） ───────────────────────── 这些效果无法靠"换色"得到，故单列。全部用可选变量驱动： 未定义的皮肤走 var(...,fallback) 的回退值 ⇒ 对其它皮肤零影响。 */ /* K1 玻璃：顶栏 / 侧栏 / 卡片加背景模糊（底色已由 --skin-surface 变为半透明） */ .admin-topbar,.admin-sidebar{backdrop-filter:var(--skin-blur,none);-webkit-backdrop-filter:var(--skin-blur,none)} .card,.kpi-card,.ui2 .card{backdrop-filter:var(--skin-blur,none);-webkit-backdrop-filter:var(--skin-blur,none)} /* K3 衬线标题：页头 / 卡片标题 / 顶栏标题 */ .admin-topbar-title,.pg-head h2,.ui2 .pg-head h2,.card-title{font-family:var(--skin-font-title,inherit)} /* K6 等宽数字：表格与统计里的数字用等宽，便于纵向比对 */ [data-skin="k6"] table td,[data-skin="k6"] table th,[data-skin="k6"] .kpi-card b,[data-skin="k6"] .poa table td{ font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} [data-skin="k6"] .poa-row,[data-skin="k6"] .poa-table td{height:var(--skin-row-h,36px)} /* K3/K5/K6 斑马纹（无卡片，靠行底色分层）——用 --skin-surface-2，暗色下自动适配 */ [data-skin="k3"] table tbody tr:nth-child(even), [data-skin="k5"] table tbody tr:nth-child(even), [data-skin="k6"] table tbody tr:nth-child(even), [data-skin="k6"] .poa-table tbody tr:nth-child(even){background:var(--skin-surface-2)} /* K4 渐变顶栏：品牌渐变成为结构元素（顶栏内的文字/图标转白） */ [data-skin="k4"] .admin-topbar{background-image:var(--skin-gradient);border-bottom-color:transparent} [data-skin="k4"] .admin-topbar .admin-topbar-title, [data-skin="k4"] .admin-topbar .icon-btn{color:var(--skin-on-accent)} [data-skin="k4"] .admin-topbar .icon-btn{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.14)} [data-skin="k4"] .admin-topbar .icon-btn:hover{border-color:var(--skin-on-accent);color:var(--skin-on-accent)} [data-skin="k4"] .admin-topbar .skin-sw-btn{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.14)} [data-skin="k4"] .admin-topbar .skin-sw-btn:hover{border-color:var(--skin-on-accent);color:var(--skin-on-accent)} /* ══════ ⑤ 皮肤切换器 / 设置页面板 组件样式 ══════ */ /* ── 皮肤切换器（顶栏）——镜像 .lang-sw* 范式 ───────────────── */ .skin-sw{position:relative;display:inline-block} .admin-topbar .skin-sw-btn{height:40px;padding:0 11px;border-radius:9px;min-width:40px;justify-content:center;gap:6px;display:flex;align-items:center} .skin-sw-btn svg{width:18px;height:18px;flex:none} .skin-sw-cur{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500} .skin-caret{width:12px!important;height:12px!important;opacity:.6;flex:none} .skin-sw-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--white,#fff); border:1px solid var(--border);border-radius:var(--radius,14px);box-shadow:var(--shadow-lg); padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.16s;z-index:300} .skin-sw.open .skin-sw-menu{opacity:1;visibility:visible;transform:translateY(0)} .skin-sw-item{display:flex;align-items:center;gap:8px;width:100%; /* 🔴 min-height 44px：移动端触控基线。实测被 verify-admin-mobile.cjs 量到 37px （padding 9+9 + 文字 19）⇒ 低于 44 的推荐值，手指点不准。加 min-height 后达标。 */ min-height:44px;padding:9px 10px;border:0; border-radius:calc(var(--radius,14px) - 6px);background:transparent;color:var(--text); font-size:13.5px;text-align:left;transition:.12s;position:relative;cursor:pointer} .skin-sw-item:hover{background:var(--bg)} .skin-sw-item.on{color:var(--primary);font-weight:600;background:var(--primary-light)} /* 选中态的**第二通道**（无障碍：不只靠颜色）—— 左侧 3px 主色条 */ .skin-sw-item.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px; border-radius:2px;background:var(--primary)} .skin-sw-item.on .skin-nm{padding-left:2px} .skin-dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .skin-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .skin-tag{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--text-3); border:1px solid var(--border);border-radius:5px;padding:1px 4px;flex:none} .skin-sw-item.on .skin-tag{color:var(--primary);border-color:var(--primary-light);background:var(--white,#fff)} .skin-check{width:14px;height:14px;margin-left:auto;color:var(--primary);flex:none} .skin-sw-sep{height:1px;background:var(--border);margin:5px 8px} /* ── 设置页「界面外观」面板 ───────────────── */ .skin-panel{max-width:1000px} .skin-panel-h{font-size:var(--ui-fs-title,15px);font-weight:700;color:var(--text);margin:0 0 4px} .skin-panel-h4{font-size:var(--ui-fs-body,13.5px);font-weight:700;color:var(--text);margin:22px 0 10px} .skin-panel-sub{font-size:var(--ui-fs-sm,13px);color:var(--text-3);line-height:1.7;margin:0 0 16px} .skin-panel-hint{font-size:var(--ui-fs-xs,12px);color:var(--text-3);line-height:1.7;margin:18px 0 0} .skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .skin-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;text-align:left; background:var(--white,#fff);border:1px solid var(--border);border-radius:var(--radius,14px); cursor:pointer;transition:.15s;font:inherit} .skin-card:hover{border-color:var(--primary)} .skin-card.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)} .skin-thumb{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:calc(var(--radius,14px) - 4px); border:1px solid var(--border);height:78px;justify-content:center} .skin-thumb-bar{height:12px;width:100%;opacity:.95;border:1px solid rgba(0,0,0,.06)} .skin-thumb-row{height:9px;width:62%} .skin-thumb-lite{width:40%;opacity:.85} .skin-card-nm{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--text)} .skin-card-cur{font-style:normal;font-size:10px;font-weight:700;color:var(--primary); border:1px solid var(--primary-light);background:var(--primary-light);border-radius:5px;padding:1px 5px} .skin-card-tag{font-size:11.5px;color:var(--text-3);line-height:1.6} .skin-card-check{position:absolute;right:12px;top:12px;width:16px;height:16px} .skin-seg{display:inline-flex;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--border); border-radius:var(--radius,14px)} .skin-seg-btn{border:0;background:transparent;color:var(--text-2);font:inherit;font-size:13px; padding:7px 16px;border-radius:calc(var(--radius,14px) - 6px);cursor:pointer;transition:.12s} .skin-seg-btn:hover{color:var(--primary)} .skin-seg-btn.on{background:var(--white,#fff);color:var(--primary);font-weight:600;box-shadow:var(--shadow-sm)} .skin-preview{margin-top:20px;padding:18px;border:1px solid var(--border);border-radius:var(--radius,14px)} .skin-pv-card{padding:14px 16px;border:1px solid var(--border)} .skin-pv-row{display:flex;gap:8px;margin-bottom:10px} .skin-pv-sw{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .skin-pv-txt{font-size:13.5px;line-height:1.7} .skin-pv-sub{font-size:12.5px;margin-top:4px;border-top:1px solid var(--border);padding-top:8px} /* 窄屏降级：照 .lang-sw-btn 口径（只留 40×40 图标） */ @media (max-width:768px){ .admin-topbar .skin-sw-btn{width:40px;padding:0;justify-content:center} .admin-topbar .skin-sw-cur,.admin-topbar .skin-caret{display:none} .skin-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .skin-grid{grid-template-columns:1fr} .skin-sw-menu{min-width:190px} } /* 默认回退：未设置 data-skin 时等同 K1 明色（防止极端情况下变量未定义） */ :root:not([data-skin]){ --skin-bg:#EEF2F9; --skin-surface:rgba(255,255,255,.72); --skin-surface-2:#F4F7FB; --skin-border:rgba(255,255,255,.60); --skin-border-2:#E2E8F0; --skin-divider:#E8EEF7; --skin-ink:#0F1A2E; --skin-ink-2:#46536E; --skin-ink-3:#5F6A84; --skin-primary:#3B6FE0; --skin-primary-dark:#2C57BC; --skin-primary-soft:#E8EFFF; --skin-violet:#7C5CE0; --skin-violet-soft:#F0EBFF; --skin-ok:#10B981; --skin-ok-soft:#ECFDF5; --skin-warn:#F97316; --skin-warn-dark:#EA580C; --skin-warn-soft:#FFF7ED; --skin-danger:#DC2626; --skin-danger-soft:#FEF2F2; --skin-navy:#131C33; --skin-navy-2:#1B2745; --skin-on-accent:#FFFFFF; --skin-hairline:rgba(255,255,255,.55); --skin-shadow-sm:0 1px 3px rgba(15,23,42,.06); --skin-shadow:0 8px 32px rgba(15,23,42,.10); --skin-shadow-lg:0 20px 56px rgba(15,23,42,.16); --skin-radius:22px; --skin-radius-lg:26px; --skin-r-sm:12px; --skin-r-md:16px; --skin-r-lg:20px; --skin-r-xl:26px; --skin-row-h:48px; --skin-container:1200px; --skin-font-title:var(--font); --skin-blur:blur(20px) saturate(1.25); --skin-gradient:linear-gradient(120deg,#3B6FE0 0%,#7C5CE0 100%); --skin-gradient-soft:linear-gradient(120deg,#E8EFFF 0%,#F0EBFF 100%); --skin-gradient-btn:linear-gradient(135deg,#3B6FE0 0%,#7C5CE0 100%); } /* ══════════════════════════════════════════════════════════════════════════ 皮肤层可读性修正（SKIN_CONTRAST_FIX_V1 · 2026-10-21） -------------------------------------------------------------------------- 定位：tools/verify-skin-contrast.cjs 真实渲染扫描 12 组皮肤 × 6 页面， 算每个文本元素「color 与有效背景（回溯+半透明混合）」的对比度， 与默认皮肤基线差分 ⇒ 皮肤层引入的低对比度，最低 1.00:1（白底白字）。 统一根因（两类，覆盖全部命中项）： ① `--skin-on-accent` 被当"通用浅色文字"用：它只在**主色填充底**上成立， 明色皮肤=白、暗色皮肤=深。用在 surface/bg 上 ⇒ 白底白字 / 深底深字。 ② 同一色值 `--skin-primary/ok/danger/warn` 既当**填充底**又当**文字色**， 两种用途对亮度要求相反 ⇒ 必有一侧失效（按钮 1.92:1 / badge 2.41:1）。 修正语义（不再混用）： · --skin-ink-* 仅文字（对 surface 反算 ≥4.6:1） · --skin-fill-* 仅填充底（对 on-accent 反算 ≥4.6:1） · --skin-ink-on-dark 恒深色容器（侧栏 --navy）上的文字 · --skin-ink-soft-* badge/软底上的文字（软底 --soft-* 随主题翻转，不能写死深色） 🔴 为什么用 !important： 原有皮肤规则大量是 `:root[data-skin] .ui2 .badge.green`（权重 0,5,0）， 修复块若只写 `:root[data-skin] .badge.green`（0,4,0）**压不过**，会出现 "改了但没生效"（实测残留 20 类）。可读性是硬约束，故用 !important 兜底； 如需让皮肤自定义覆盖，删除本节即可整体回退。 ══════════════════════════════════════════════════════════════════════════ */ :root[data-skin]{ --skin-ink-on-dark:#E6ECF7; /* 侧栏恒深底 --navy */ --skin-ink-soft-green:#065F46; /* 软绿底上的文字 */ --skin-ink-soft-orange:#7A3E00; --skin-ink-soft-purple:#4B2A87; --skin-ink-soft-blue:#123E7A; --skin-ink-soft-gray:#374151; --skin-ink-soft-red:#7A1B1B; --skin-ink-soft-amber:#6B3900; } /* 暗色皮肤下软底会翻转成深色 ⇒ 软底文字改用亮色（与 ink 同源） */ :root[data-skin][data-theme="dark"]{ --skin-ink-soft-green:#6EE7B7; --skin-ink-soft-orange:#FCD34D; --skin-ink-soft-purple:#C4B5FD; --skin-ink-soft-blue:#93C5FD; --skin-ink-soft-gray:#CBD5E1; --skin-ink-soft-red:#FCA5A5; --skin-ink-soft-amber:#FCD34D; } /* ── 1. 侧栏（恒深底）与页脚 ─────────────────────────────────────── */ :root[data-skin] .admin-nav a, :root[data-skin] .admin-nav a span, :root[data-skin] .admin-logo span, :root[data-skin] .admin-nav .nav-group-head, :root[data-skin] .admin-nav .nav-group-head span, :root[data-skin] .admin-sidebar-foot a, :root[data-skin] .admin-sidebar-foot a span{ color:var(--skin-ink-on-dark) !important; } :root[data-skin] .admin-nav a:hover, :root[data-skin] .admin-nav a:hover span, :root[data-skin] .admin-sidebar-foot a:hover{ color:#FFFFFF !important; } /* 选中项 = 主色填充底：底用 fill，字用 on-accent */ :root[data-skin] .admin-nav a.active, :root[data-skin] .admin-nav a.active span{ background-color:var(--skin-fill-primary) !important; color:var(--skin-on-accent) !important; } /* 导航上的数字徽标必须压住 .admin-nav a span 的浅色（否则橘底浅字 1.41:1） */ :root[data-skin] .admin-nav .nav-badge, :root[data-skin] .admin-nav .nav-badge.show{ background-color:var(--skin-fill-warn) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .admin-nav .nav-badge.danger{ background-color:var(--skin-fill-danger) !important; color:var(--skin-on-accent) !important; } /* ── 2. 顶栏与用户区（底=surface，随主题明暗）────────────────────── */ :root[data-skin] .admin-topbar-title, :root[data-skin] .admin-user b, :root[data-skin] .admin-user div, :root[data-skin] .admin-user small{ color:var(--skin-ink-primary) !important; } :root[data-skin] .admin-user small{ opacity:.8; } :root[data-skin] .admin-user-avatar{ background:var(--skin-fill-primary) !important; color:var(--skin-on-accent) !important; } /* ── 3. 按钮：填充用 fill 系 ─────────────────────────────────────── */ :root[data-skin] .op-btn.primary, :root[data-skin] .ui2 .op-btn.primary{ background-color:var(--skin-fill-primary) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .op-btn.green, :root[data-skin] .ui2 .op-btn.green{ background-color:var(--skin-fill-ok) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .op-btn.red, :root[data-skin] .ui2 .op-btn.red{ background-color:var(--skin-fill-danger) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .op-btn.orange, :root[data-skin] .ui2 .op-btn.orange{ background-color:var(--skin-fill-warn) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .op-btn.ghost, :root[data-skin] .ui2 .op-btn.ghost{ background-color:var(--skin-surface) !important; color:var(--skin-ink-primary) !important; } :root[data-skin] .ui2 .op-btn.ghost:hover{ color:var(--skin-ink-primary) !important; } /* ── 4. badge / 软底文字 ─────────────────────────────────────────── */ :root[data-skin] .badge.green{ color:var(--skin-ink-soft-green) !important; } :root[data-skin] .badge.orange{ color:var(--skin-ink-soft-orange) !important; } :root[data-skin] .badge.purple{ color:var(--skin-ink-soft-purple) !important; } :root[data-skin] .badge.blue{ color:var(--skin-ink-soft-blue) !important; } :root[data-skin] .badge.gray{ color:var(--skin-ink-soft-gray) !important; } :root[data-skin] .badge.red{ color:var(--skin-ink-soft-red) !important; } /* ── 5. 提示条 / 开关块 / 皮肤卡 ─────────────────────────────────── */ :root[data-skin] .note-warn, :root[data-skin] .note-warn b, :root[data-skin] .it-hint{ color:var(--skin-ink-soft-amber) !important; } :root[data-skin] .switch-item.on, :root[data-skin] .switch-item.on span{ color:var(--skin-ink-soft-blue) !important; } :root[data-skin] .skin-card-cur{ color:var(--skin-ink-soft-purple) !important; } :root[data-skin] .key-box button{ color:var(--skin-ink-primary) !important; } :root[data-skin] .skin-seg-btn.on{ background-color:var(--skin-fill-primary) !important; color:var(--skin-on-accent) !important; } /* ── 6. 残留项精修（第二轮扫描定位）──────────────────────────────── */ /* .it-hint 的底色恒为浅色（--soft-amber 未随主题翻转）⇒ 文字必须用深色，不能用暗色皮肤的亮 token */ :root[data-skin] .it-hint{ color:#7A3E00 !important; } /* logo 副标题（ADMIN CONSOLE）：侧栏恒深底 */ :root[data-skin] .admin-logo small{ color:var(--skin-ink-on-dark) !important; } /* 幽灵按钮：--skin-surface 在半透明叠加下会变中灰，改用不透明 --skin-bg 作底，ink 作字 */ :root[data-skin] .op-btn.ghost, :root[data-skin] .ui2 .op-btn.ghost{ background-color:var(--skin-bg) !important; color:var(--skin-ink-primary) !important; } /* key-box（密钥框）底恒深 ⇒ 文字用深底专用浅色 */ :root[data-skin] .key-box button{ color:var(--skin-ink-on-dark) !important; } /* ── 7. 收尾（第三轮扫描定位）──────────────────────────────────────── key-box 的底色**随主题翻转**（明色 #E8EFFF 浅 / 暗色深），所以不能一律用浅色字： 上一版用 --skin-ink-on-dark 在明色皮肤下造成白底白字 1.03:1。 */ :root[data-skin] .key-box button{ color:var(--skin-ink-primary) !important; } :root[data-skin][data-theme="dark"] .key-box button{ color:var(--skin-ink-on-dark) !important; } /* ── 8. 末次精修：软蓝底上的文字用软底专用 token ────────────────────── 这两处底色是 --soft-blue（随主题明暗），--skin-ink-primary 是对 surface 算的， 对软蓝底只有 3.71/4.11:1（差一点点但不达标）。 */ :root[data-skin] .key-box button, :root[data-skin][data-theme="dark"] .key-box button{ color:var(--skin-ink-soft-blue) !important; } /* ── 9. 其它页面（dashboard / plans / tickets / releases / customers）── 全量扫描（6 页 × 6 皮肤 × 明暗）新增命中，与前面同一批根因： ① .btn-sm.primary 是**另一套主按钮类**（.op-btn 之外），同样被皮肤刷白后仍配白字 ⇒ 1:1； ② .dash-hero 的 h2 / .dh-chip small 用了 on-accent 白/浅灰，但底色被皮肤改成浅色； ③ 软蓝底上的主色文字（.lg-act / .release-ver）与硬编码 color:var(--ui-primary) 的 .head-act。 */ :root[data-skin] .btn-sm.primary, :root[data-skin] .ui2 .btn-sm.primary{ background-color:var(--skin-fill-primary) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .dash-hero h2, :root[data-skin] .dash-hero .dh-chip b{ color:var(--skin-ink-primary) !important; } :root[data-skin] .dh-chip small, :root[data-skin] .dash-hero small{ color:var(--skin-ink-primary) !important; opacity:.85; } :root[data-skin] .lg-act, :root[data-skin] .release-ver, :root[data-skin] .flt-clear, :root[data-skin] .head-act{ color:var(--skin-ink-soft-blue) !important; } /* ── 10. 交互状态修正（STATE_CONTRAST_FIX · 2026-10-21）─────────────── 运行时抽验（tools/verify-state-runtime.cjs）发现： `.admin-nav a:hover` 的底色被皮肤改成 `--skin-hairline`（明色皮肤下是浅色）， 而我上一版把 hover 文字写成 #FFFFFF ⇒ 白字配浅底：k3 明色 **1.18:1**、k1 明色 2.86:1。 修法：hover 底色统一改回"侧栏深底 + 10% 白"（侧栏底色恒为 --navy，不随皮肤变）， 文字继续用深底专用色 ⇒ 任何皮肤/主题下 hover 都保持高对比。 */ :root[data-skin] .admin-nav a:hover, :root[data-skin] .admin-nav .nav-group-head:hover, :root[data-skin] .admin-sidebar-foot a:hover{ background-color:rgba(255,255,255,.10) !important; color:var(--skin-ink-on-dark) !important; } :root[data-skin] .admin-nav a:hover span, :root[data-skin] .admin-nav .nav-group-head:hover span{ color:var(--skin-ink-on-dark) !important; } /* 基础样式里 3 处状态态对比度不足（与皮肤无关，默认皮肤亦然）： · .op-btn.green:hover 白字 on #059669 = 3.77:1 · .modal-close:hover 红字 on #FEE2E2 = 3.95:1 · .login-error.show 红字 on #FEE2E2 = 3.95:1 修法：加深底色/字色（保持色相），不改变组件形态。 */ .op-btn.green:hover{ background:#047857 !important; } /* 白字 → 4.83:1 */ .modal-close:hover{ background:#DC2626 !important; color:#FFFFFF !important; } /* 悬停反转为红底白字 4.83:1 */ /* 🔴 登录错误提示的字色必须是「浅色加深红 / 深色跟随皮肤」两套（2026-10-21 实测： 原写法是无作用域 `.login-error.show{color:#991B1B !important}`，把深色皮肤一起压掉了 —— 深色底下 --skin-danger-soft 是深底、--skin-danger 是浅红，本已达标； 被换成深褐 #991B1B 后落到 1.52–1.80:1（k5/dark 最低 1.52），几乎不可见。 为什么不用 `:root:not([data-theme="dark"])` 这种"按属性排除"的写法： `data-theme` 是**属性**，不等于"深色令牌真的生效"。无皮肤时 `data-theme="dark"` 并不改变 admin.css 的硬编码底色，页面其实仍是浅色 —— 按属性排除会**漏掉**这一档（实测残留 3.95:1）。 ⇒ 改为**单令牌驱动**：默认加深红，仅当「有皮肤 且 深色」时才跟随皮肤令牌。 */ :root{ --pe-danger-strong:#991B1B; } :root[data-skin][data-theme="dark"]{ --pe-danger-strong:var(--skin-danger,#991B1B); } .login-error.show{ color:var(--pe-danger-strong) !important; } /* 浅色 #991B1B on #FEF2F2 → 7.9:1 / on #FEE2E2 → 7.4:1 */ /* ── 11. hover 态按"按钮是否实心"分别给色（避免修 A 坏 B）────────────── 实测教训：把 `.op-btn:hover` 一律改成软底文字色后，**实心主按钮**也被命中 —— 它 hover 时底色仍是主色填充（`--skin-fill-primary`），浅字配深底只剩 1.09–2.56:1。 ⇒ 必须用 :not() 把"实心按钮"排除，两类分别给色： · 实心（primary/green/red/orange）：底=fill，字=on-accent · 描边/次按钮（其余）：底=软色，字=软底专用 ink · ghost：底=--skin-bg（不透明），字=ink-primary */ :root[data-skin] .op-btn:hover:not(.primary):not(.green):not(.red):not(.orange):not(.ghost), :root[data-skin] .ui2 .op-btn:hover:not(.primary):not(.green):not(.red):not(.orange):not(.ghost){ color:var(--skin-ink-soft-blue) !important; } :root[data-skin] .op-btn.primary:hover, :root[data-skin] .ui2 .op-btn.primary:hover{ background-color:var(--skin-fill-primary) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .op-btn.green:hover, :root[data-skin] .ui2 .op-btn.green:hover{ background-color:var(--skin-fill-ok) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .op-btn.red:hover, :root[data-skin] .ui2 .op-btn.red:hover{ background-color:var(--skin-fill-danger) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .op-btn.orange:hover, :root[data-skin] .ui2 .op-btn.orange:hover{ background-color:var(--skin-fill-warn) !important; color:var(--skin-on-accent) !important; } :root[data-skin] .op-btn.ghost:hover, :root[data-skin] .ui2 .op-btn.ghost:hover{ background-color:var(--skin-bg) !important; color:var(--skin-ink-soft-blue) !important; } /* ══ 12. 控件边界令牌（WCAG 1.4.11 · 非文本 3:1）────────────────────────────── 背景：`--border`(#e2e8f0 / 各皮肤近白) 对白底仅 **1.23:1**，此前被同时用在 **输入框 / 搜索框 / 描边按钮 / 翻页按钮 / 验证码图 / 开关项** 上 —— 这些是"必须能被识别出来的 UI 控件"，1.4.11 要求 3:1，属真实缺陷，不能按装饰豁免。 ⇒ 把控件边界拆成独立令牌，`--border` 只留给卡片/面板/表格线等**容器**。 值：浅色 #7B8A9F（对 #FFFFFF 3.51 / 对 #F4F6FA 3.25）； 深色 #5A6E96（对 #111C34 3.31 / 对 #0B1220 3.66）。与 Kotlin 端 BORDER_CONTROL 同口径。 */ :root{ --border-control:#7B8A9F; } :root[data-skin][data-theme="dark"]{ --border-control:#5A6E96; }