/* ═══════════════════════════════════════════════════════════════ ZipPay / Paylaya 运营协作平台 · Clay 设计系统 基准来自用户给的参考图：软陶瓷质感。体积感全靠双向投影 （左上亮、右下暗），不靠描边；深浅两套主题，右上角弧形开关切换。 层级只有三层，别加第四层： 地 --pane 整个视口的底，冷瓷灰 / 蓝板岩 台 .main 从地上抬起来的大圆角面板，一屏只有这一块是「凸」的 纸 .card 等 台上的内容卡，微微浮起，靠淡影不靠边框 台上再放凸起的大块就会满屏鼓包——那种「每个卡都是枕头」的 neumorphism 恰恰是要避开的。凸只给台、给控件（按钮/旋钮/胶囊），内容一律是纸。 ═══════════════════════════════════════════════════════════════ */ :root{ --pane:#E7E8EE; --pane-2:#DFE1E8; --surface-hi:#F3F4F8; --surface-lo:#E4E6EC; --surface:#F7F8FB; --field:#EEF0F4; --ui-soft:#F0F1F5; --ui-hover:#E9EBF1; --ink:#252B39; --ink-2:#565E6F; --ink-3:#8A91A3; --line:rgba(90,98,128,.15); --line-2:rgba(90,98,128,.09); --sh-dark:rgba(76,82,106,.20); --sh-dark2:rgba(76,82,106,.12); --sh-lite:rgba(255,255,255,.92); --sh-lite2:rgba(255,255,255,.66); --edge-hi:rgba(255,255,255,.66); --edge-lo:rgba(76,82,106,.10); --groove:#D9DBE4; --card-sh:0 1px 1.5px rgba(60,66,90,.10),0 3px 7px -2px rgba(60,66,90,.07), 0 14px 30px -14px rgba(60,66,90,.22); --acc:#8B5CF6; --acc-hover:#7C4DEF; --acc-deep:#7C3AED; --acc-bg:#EFEAFD; --acc-line:#D8CBFA; --acc-lite:#C4B5FD; --ok:#1F8A5D; --ok-bg:#E7F5EE; --bad:#CC4437; --bad-bg:#FBEDEA; --warn:#A87A16; --warn-bg:#F9F3E4; --pend:#B9C0C9; --led-ok:#2FD376; --led-bad:#FF5347; --chrome:#E7E8EE; --chrome-2:#DDDFE8; --chrome-3:#D3D6E0; --nav-txt:#565E6F; --txt-invert:#FFFFFF; --txt-invert-2:#F2F3F7; /* 图表。深浅两套都要能读：轴、网格、纸面全走令牌 */ --c1:#4E6FD8; --c2:#8B5CF6; --c3:#1F8A5D; --c4:#B95D8E; --c5:#C06A3D; --c6:#3E8D9C; --c7:#9AA3AD; --c8:#8A6D3B; --c-axis:#AAB1C2; --c-grid:#E3E5EC; --paper:#F7F8FB; --sans:-apple-system,"SF Pro Display","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif; --serif:"Noto Serif CJK SC","Songti SC",serif; --mono:"SF Mono","Cascadia Mono",Consolas,monospace; --nav-w:216px; --top-h:60px; --r-sm:10px; --r-md:14px; --r-lg:22px; } [data-theme="dark"]{ --pane:#262B37; --pane-2:#20242F; --surface-hi:#3A4252; --surface-lo:#2B3140; --surface:#323949; --field:#272C38; --ui-soft:#2C3341; --ui-hover:#39414F; --ink:#E9ECF4; --ink-2:#AEB6C8; --ink-3:#727C92; --line:rgba(197,208,235,.13); --line-2:rgba(197,208,235,.07); --sh-dark:rgba(8,11,19,.55); --sh-dark2:rgba(8,11,19,.36); --sh-lite:rgba(151,166,203,.10); --sh-lite2:rgba(151,166,203,.06); --edge-hi:rgba(255,255,255,.06); --edge-lo:rgba(0,0,0,.28); --groove:#1D212B; --card-sh:0 1px 1.5px rgba(0,0,0,.3),0 3px 8px -2px rgba(0,0,0,.22), 0 16px 34px -14px rgba(0,0,0,.5); --acc:#A78BFA; --acc-hover:#B79DFC; --acc-deep:#8B5CF6; --acc-bg:#332C4F; --acc-line:#4E4478; --acc-lite:#7C6BC9; --ok:#4CC08A; --ok-bg:#1D3229; --bad:#F07A6C; --bad-bg:#3A2523; --warn:#D9A94F; --warn-bg:#37301D; --led-ok:#3DDC84; --led-bad:#FF6157; --pend:#4A5468; --chrome:#262B37; --chrome-2:#2E3442; --chrome-3:#39404F; --nav-txt:#AEB6C8; --txt-invert:#FFFFFF; --txt-invert-2:#E4E7F0; --c1:#7C97F2; --c2:#B49BFB; --c3:#4CC08A; --c4:#D98BB4; --c5:#DB8A5E; --c6:#5FB4C4; --c7:#8B95A4; --c8:#C0A067; --c-axis:#6B768E; --c-grid:#404A5E; --paper:#323949; } *{box-sizing:border-box} /* 原生控件（checkbox/radio/日期选择/滚动条）跟着主题走。 不写这条的话，深色模式里没被自绘覆盖的原生控件全是刺眼的白底方块。 */ :root{color-scheme:light} [data-theme="dark"]{color-scheme:dark} html,body{height:100%;margin:0} body{font-family:var(--sans);background:var(--pane);color:var(--ink);font-size:14px;line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .4s ease,color .4s ease} button,input,select,textarea{font-family:inherit;font-size:inherit} button{cursor:pointer;border:none;background:none;color:inherit} a{color:var(--acc);text-decoration:none} :focus-visible{outline:2px solid var(--acc);outline-offset:2px} ::selection{background:var(--acc);color:#fff} /* 自绘滚动条：系统那根灰杠在 clay 底上像个补丁 */ *{scrollbar-width:thin;scrollbar-color:var(--pane-2) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--pane-2);border-radius:99px; border:2.5px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--ink-3);border:2.5px solid transparent;background-clip:content-box} /* ---------- 登录 ---------- */ .login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--pane)} .login-card{width:360px;border-radius:var(--r-lg);padding:36px 32px; background:linear-gradient(150deg,var(--surface-hi),var(--surface-lo)); box-shadow:12px 14px 30px var(--sh-dark),-8px -8px 18px var(--sh-lite),inset 0 1px 0 var(--edge-hi)} .login-card h1{font-family:var(--serif);font-size:19px;letter-spacing:.06em;margin:0 0 4px} .login-card .sub{font-size:12px;color:var(--ink-3);letter-spacing:.1em;margin-bottom:24px} .fld{margin-bottom:14px} .fld label{display:block;font-size:11px;letter-spacing:.14em;color:var(--ink-3);font-weight:600;margin-bottom:6px} .fld input{width:100%;padding:11px 14px;border:none;border-radius:var(--r-sm);background:var(--pane-2);color:var(--ink); box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2)} .fld input:focus{outline:none;box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2),0 0 0 2px var(--acc)} .btn-main{width:100%;padding:12px;border-radius:var(--r-sm);color:#fff;font-weight:600;letter-spacing:.06em; background:linear-gradient(145deg,var(--acc),var(--acc-deep)); box-shadow:5px 7px 16px rgba(124,58,237,.35),-3px -3px 9px var(--sh-lite),inset 0 1px 0 rgba(255,255,255,.3)} .btn-main:hover{filter:brightness(1.06)} .btn-main:active{box-shadow:inset 3px 4px 9px rgba(70,20,160,.45)} .login-err{background:var(--bad-bg);color:var(--bad);font-size:12.5px;padding:9px 11px;border-radius:8px;margin-bottom:14px} .login-hint{font-size:11.5px;color:var(--ink-3);margin-top:16px;line-height:1.8;text-align:center} /* ---------- 外壳：地 → 台 ---------- */ .shell{display:grid;grid-template-columns:var(--nav-w) 1fr;grid-template-rows:var(--top-h) 1fr; grid-template-areas:"brand top" "nav main";height:100vh} .brand{grid-area:brand;display:flex;align-items:center;padding:0 22px;gap:9px;color:var(--ink)} .brand b{font-family:var(--serif);font-size:14.5px;letter-spacing:.07em} .brand em{font-style:normal;color:var(--acc)} /* 顶栏三段：左＝你在哪（面包屑＋范围），中＝全局搜索居中，右＝动作簇。 中间那块之前是空的——三段网格让每一段都有主人，搜索居中撑住版面。 */ .topbar{grid-area:top;display:grid;grid-template-columns:auto minmax(160px,1fr) auto;align-items:center; gap:14px;padding:0 190px 0 6px} .tb-left{display:flex;align-items:center;gap:12px;flex:none;white-space:nowrap} .tb-mid{display:flex;justify-content:center;min-width:0} .tb-mid .search{width:100%;max-width:300px} .tb-mid .search input{width:100%} .tb-mid .search input:focus{width:100%} .tb-right{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex:none;white-space:nowrap} .scope{flex:none} /* 面包屑：分组淡、页名实，中间一粒小点 */ .crumb{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap;min-width:0} .crumb i{font-style:normal;color:var(--ink-3);letter-spacing:.06em} .crumb u{width:4px;height:4px;border-radius:50%;background:var(--acc);text-decoration:none; box-shadow:0 0 5px rgba(139,92,246,.5);flex:none} .crumb b{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis} /* 工单三件套只在用得上的页面出现 */ body:not([data-route="overview"]):not([data-route="dash"]):not([data-route="issues"]) .scope, body:not([data-route="overview"]):not([data-route="dash"]):not([data-route="issues"]) #btnNew, body:not([data-route="overview"]):not([data-route="dash"]):not([data-route="issues"]) .tb-mid .search{ display:none} .search{position:relative} .search input{width:240px;padding:9px 12px 9px 32px;border:none;border-radius:99px;background:var(--pane-2);color:var(--ink); box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2);transition:width .25s ease} .search input:focus{outline:none;width:290px; box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2),0 0 0 2px var(--acc)} .search::before{content:"";position:absolute;left:12px;top:50%;width:13px;height:13px;margin-top:-8px; border:2px solid var(--ink-3);border-radius:50%;transform:scale(.82)} .search::after{content:"";position:absolute;left:22px;top:50%;width:6px;height:2px;margin-top:3px; background:var(--ink-3);border-radius:2px;transform:rotate(45deg)} /* 按钮：凸起的 clay，按下去变凹——手感即层级 */ .btn{padding:8px 15px;border-radius:var(--r-sm);color:var(--ink-2);font-size:13px;white-space:nowrap; background:linear-gradient(150deg,var(--surface-hi),var(--surface-lo)); box-shadow:4px 5px 11px var(--sh-dark2),-3px -3px 8px var(--sh-lite),inset 0 1px 0 var(--edge-hi); border:none;transition:box-shadow .18s ease,transform .18s ease,filter .18s ease} .btn:hover{transform:translateY(-1px);color:var(--ink); box-shadow:6px 7px 14px var(--sh-dark2),-4px -4px 9px var(--sh-lite),inset 0 1px 0 var(--edge-hi)} .btn:active{transform:none;box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -2px -2px 6px var(--sh-lite2)} .btn.primary{color:#fff;font-weight:600;background:linear-gradient(145deg,var(--acc),var(--acc-deep)); box-shadow:4px 6px 14px rgba(124,58,237,.35),-3px -3px 8px var(--sh-lite),inset 0 1px 0 rgba(255,255,255,.28)} .btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px)} .btn.primary:active{filter:none;transform:none;box-shadow:inset 3px 4px 9px rgba(70,20,160,.45)} .btn.sm{padding:5px 10px;font-size:12px;border-radius:8px} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .who{display:flex;align-items:center;gap:9px;font-size:13px;padding:4px 6px 4px 4px; border-radius:99px;background:linear-gradient(150deg,var(--surface-hi),var(--surface-lo)); box-shadow:3px 4px 9px var(--sh-dark2),-3px -3px 7px var(--sh-lite),inset 0 1px 0 var(--edge-hi)} .who .av{width:28px;height:28px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600; background:linear-gradient(145deg,var(--acc),var(--acc-deep)); box-shadow:2px 3px 7px rgba(124,58,237,.35),inset 0 1px 0 rgba(255,255,255,.3)} .who{flex:none} .who .who-t{line-height:1.25;padding-right:2px;white-space:nowrap} .who .rl{font-size:10.5px;color:var(--ink-3)} .who .out{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3); background:var(--pane-2); box-shadow:inset 2px 3px 6px var(--sh-dark2),inset -2px -2px 5px var(--sh-lite2); transition:color .15s ease} .who .out:hover{color:var(--bad)} /* ---------- 导航：地上的一列胶囊 ---------- */ .nav{grid-area:nav;overflow-y:auto;padding:6px 12px 30px} .nav .grp{font-size:10.5px;letter-spacing:.22em;color:var(--ink-2);padding:14px 10px 6px;font-weight:700} .nav .grp:not(:first-child){margin-top:6px;position:relative} .nav .grp:not(:first-child)::before{content:"";position:absolute;top:2px;left:12px;right:22px;height:1px; background:linear-gradient(90deg,var(--line),transparent)} .nav a{position:relative;display:flex;align-items:center;gap:10px;padding:9px 13px;margin:2px 0; color:var(--ink);font-size:13.5px;border-radius:12px;cursor:pointer; transition:background .16s ease,color .16s ease,box-shadow .16s ease} .nav a:hover{background:var(--ui-hover);color:var(--ink)} /* 选中态：凹槽 + 左侧一粒紫灯。凹下去=「你在这儿」，和按钮按下同一个隐喻 */ .nav a.on{color:var(--ink);font-weight:600;background:var(--pane-2); box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2)} .nav a.on::before{content:"";position:absolute;left:-6px;top:50%;width:5px;height:18px;margin-top:-9px; border-radius:99px;background:linear-gradient(180deg,var(--acc),var(--acc-deep)); box-shadow:0 0 8px rgba(139,92,246,.65)} .nav a .ic{opacity:.75} .nav a.on .ic{opacity:1;color:var(--acc)} /* ---------- 主区：台 ---------- */ .main{grid-area:main;overflow-y:auto;padding:26px 30px 60px;margin:4px 42px 18px 8px; border-radius:26px; background:linear-gradient(160deg,var(--surface-hi),var(--surface-lo)); box-shadow:0 2px 4px var(--sh-dark2),16px 20px 44px var(--sh-dark), -10px -10px 22px var(--sh-lite),inset 0 1.5px 0 var(--edge-hi),inset 0 -1px 0 var(--edge-lo); transition:background .4s ease,box-shadow .4s ease} .page-h{display:flex;align-items:flex-end;gap:12px;margin-bottom:22px} .page-h h2{font-family:var(--serif);font-size:21px;margin:0;letter-spacing:.02em; padding-bottom:2px;border-bottom:2px solid transparent; border-image:linear-gradient(90deg,var(--acc) 0,var(--acc-lite) 60%,transparent) 1} .page-h .desc{font-size:12.5px;color:var(--ink-3);padding-bottom:3px} .page-h .spacer{flex:1} /* ---------- 指标瓦片：纸上打的仪表 ---------- */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:22px} .tile{position:relative;background:var(--surface);border-radius:var(--r-md);padding:14px 16px 14px 19px; box-shadow:var(--card-sh);overflow:hidden} /* 左侧一根语义色沿——比整块染色安静，比小圆点醒目 */ .tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 4px 4px 0; background:var(--pane-2)} .tile.ok::before{background:linear-gradient(180deg,var(--led-ok),var(--ok))} .tile.warn::before{background:linear-gradient(180deg,#F5C554,var(--warn))} .tile.bad::before{background:linear-gradient(180deg,var(--led-bad),var(--bad))} .tile .k{font-size:11px;letter-spacing:.16em;color:var(--ink-3);font-weight:600} .tile .v{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1.2;margin-top:4px; font-variant-numeric:tabular-nums} .tile .s{font-size:11.5px;color:var(--ink-3);margin-top:2px} .tile.bad .v{color:var(--bad)} .tile.warn .v{color:var(--warn)} .tile.ok .v{color:var(--ok)} /* ---------- 卡：纸 ---------- */ .card{background:var(--surface);border-radius:var(--r-md);margin-bottom:20px;box-shadow:var(--card-sh)} /* 卡内所有直子内容共享一条 18px 左基线——标题、提示、表格首列、底部链接 全部从同一条线起笔。之前四种元素四条左缘（26/16/14/0），一眼望去就是乱。 */ .card > h3{position:relative;font-size:13.5px;font-weight:600;margin:0;padding:14px 18px; border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:8px} .card > h3::before{content:"";position:absolute;left:7px;top:50%;width:4px;height:15px;margin-top:-7.5px; border-radius:99px;background:linear-gradient(180deg,var(--acc-lite),var(--acc)); box-shadow:0 0 5px rgba(139,92,246,.35)} .card > h3 .spacer{flex:1} .card-b{padding:15px 18px} .empty{padding:32px;text-align:center;color:var(--ink-3);font-size:13px} table.grid{width:100%;border-collapse:collapse;font-size:13px} table.grid th{text-align:left;font-size:11px;letter-spacing:.1em;color:var(--ink-3);font-weight:600; padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap} table.grid th:first-child,table.grid td:first-child{padding-left:18px} table.grid td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle; font-variant-numeric:tabular-nums} table.grid tr:last-child td{border-bottom:none} table.grid tbody tr{transition:background .12s ease} table.grid tbody tr:hover{background:var(--ui-soft);cursor:pointer} table.grid .mono{font-family:var(--mono);font-size:12px;color:var(--ink-3)} table.grid .ttl{font-weight:500} /* ---------- 状态胶囊：一粒会发光的 LED + 文字 ---------- 颜色弱视者靠灯的位置也能读：灯亮在左，色只是辅助。 */ .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px; border-radius:99px;white-space:nowrap;background:var(--ui-hover);color:var(--ink-2)} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pend);flex:none} .pill.g{background:var(--ok-bg);color:var(--ok)} .pill.g::before{background:var(--led-ok);box-shadow:0 0 5px var(--led-ok)} .pill.o{background:var(--acc-bg);color:var(--acc)} .pill.o::before{background:var(--acc);box-shadow:0 0 5px var(--acc)} .pill.w{background:var(--warn-bg);color:var(--warn)} .pill.w::before{background:#E9B949;box-shadow:0 0 5px #E9B949} .pill.r{background:var(--bad-bg);color:var(--bad)} .pill.r::before{background:var(--led-bad);box-shadow:0 0 5px var(--led-bad)} .st-open{background:var(--ui-hover);color:var(--ink-2)} .st-doing{background:var(--acc-bg);color:var(--acc)} .st-doing::before{background:var(--acc);box-shadow:0 0 5px var(--acc)} .st-blocked{background:var(--warn-bg);color:var(--warn)} .st-blocked::before{background:#E9B949} .st-verify{background:var(--acc-bg);color:var(--acc-deep)} .st-verify::before{background:var(--acc)} .st-closed{background:var(--ok-bg);color:var(--ok)} .st-closed::before{background:var(--led-ok)} .lv{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:6px;letter-spacing:.04em} .lv-P0{background:linear-gradient(145deg,#E25A4B,var(--bad));color:#fff;box-shadow:0 2px 6px rgba(204,68,55,.4)} .lv-P1{background:var(--bad-bg);color:var(--bad)} .lv-P2{background:var(--warn-bg);color:var(--warn)} .lv-P3{background:var(--ui-hover);color:var(--ink-3)} .tag-over{background:var(--bad);color:#fff;font-size:10.5px;padding:1px 7px;border-radius:6px;font-weight:600} .tag-ext{background:var(--acc-bg);color:var(--acc);font-size:10.5px;padding:1px 7px;border-radius:6px} /* ---------- 详情抽屉 ---------- */ .drawer{position:fixed;inset:0;background:rgba(14,17,26,.45);display:none;z-index:60; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .drawer.on{display:block} .drawer .panel{position:absolute;right:10px;top:10px;bottom:10px;width:min(680px,92vw); background:linear-gradient(160deg,var(--surface-hi),var(--surface-lo)); border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden; box-shadow:-16px 0 50px rgba(0,0,0,.3),inset 0 1px 0 var(--edge-hi); animation:drawer-in .28s cubic-bezier(.3,1.2,.5,1)} @keyframes drawer-in{from{transform:translateX(46px);opacity:0}to{transform:none;opacity:1}} .drawer .dh{border-bottom:1px solid var(--line-2);padding:16px 20px;display:flex;align-items:flex-start;gap:10px} .drawer .dh h3{margin:0;font-size:16px;line-height:1.4;flex:1} .drawer .db{flex:1;overflow-y:auto;padding:16px 20px 40px} .meta{display:grid;grid-template-columns:78px 1fr;gap:7px 12px;font-size:13px;align-items:center} .meta .k{font-size:11.5px;color:var(--ink-3);letter-spacing:.08em} .tl{list-style:none;margin:0;padding:0} .tl li{position:relative;padding:0 0 14px 20px;border-left:1px solid var(--line);margin-left:5px} .tl li:last-child{border-left-color:transparent} .tl li::before{content:"";position:absolute;left:-4.5px;top:5px;width:8px;height:8px;border-radius:50%; background:var(--pane-2);border:1.5px solid var(--surface)} .tl li.hi::before{background:var(--acc);box-shadow:0 0 6px rgba(139,92,246,.6)} .tl .w{font-size:12px;color:var(--ink-3)} .tl .c{font-size:13px;margin-top:2px;white-space:pre-wrap} .actbar{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0} textarea.cm{width:100%;min-height:64px;padding:10px 13px;border:none;border-radius:var(--r-sm); background:var(--field);color:var(--ink);resize:vertical; box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2)} textarea.cm:focus{outline:none;box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2),0 0 0 2px var(--acc)} /* ---------- 弹窗 ---------- */ .modal{position:fixed;inset:0;background:rgba(14,17,26,.45);display:none;place-items:center;z-index:70; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .modal.on{display:grid} .modal .box{width:min(560px,94vw);max-height:88vh;display:flex;flex-direction:column;border-radius:var(--r-lg); background:linear-gradient(160deg,var(--surface-hi),var(--surface-lo)); box-shadow:0 24px 70px rgba(0,0,0,.35),inset 0 1px 0 var(--edge-hi); animation:modal-in .26s cubic-bezier(.3,1.25,.5,1)} @keyframes modal-in{from{transform:translateY(14px) scale(.985);opacity:0}to{transform:none;opacity:1}} .modal .mh{padding:17px 22px;border-bottom:1px solid var(--line-2);font-weight:600;font-size:15px;flex:none} .modal .mb{padding:18px 22px;overflow-y:auto;flex:1 1 auto;min-height:0} .modal .mf{padding:14px 22px;border-top:1px solid var(--line-2);display:flex;gap:8px;justify-content:flex-end;flex:none} /* ---------- 表单字段（结构规则原样保留，只换观感） ---------- */ label:has(> input), label:has(> textarea), label:has(> select), label:has(> .sel){ display:block;margin-bottom:14px;min-width:0; font-size:11px;letter-spacing:.14em;color:var(--ink-3);font-weight:600} label > .sel{display:block;margin-top:6px} label > input, label > textarea, label > select, .fld input, .fld select, .fld textarea{ display:block;width:100%;margin-top:6px; font-family:inherit;font-size:13.5px;letter-spacing:0;font-weight:400;color:var(--ink); padding:10px 13px;border:none;border-radius:var(--r-sm);background:var(--field); box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2); transition:box-shadow .18s ease} label > textarea, .fld textarea{resize:vertical;min-height:64px;line-height:1.7} label > input:focus, label > textarea:focus, label > select:focus{outline:none; box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2),0 0 0 2px var(--acc)} input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.8} label:has(> input[type=checkbox]):not(.knob), label:has(> input[type=radio]):not(.knob){ display:flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:0; color:var(--ink-2);font-weight:400} label:has(> input[type=checkbox]):not(.knob) > input, label:has(> input[type=radio]):not(.knob) > input{ display:inline-block;width:auto;margin-top:0;flex:none;accent-color:var(--acc);box-shadow:none} .two{display:flex;gap:12px;align-items:flex-start} .two > *{flex:1 1 0;min-width:0} .three{display:flex;gap:12px;align-items:flex-start} .three > *{flex:1 1 0;min-width:0} .two > .wide, .three > .wide{flex:2 1 0} label.full, .full{width:100%;flex-basis:100%} label > em, .req{display:inline;font-style:normal;font-size:10px;letter-spacing:.06em;font-weight:700; color:var(--bad);background:var(--bad-bg);border-radius:5px;padding:1px 5px;margin-left:5px} label > .tip, .fldtip{display:block;font-size:11.5px;letter-spacing:0;font-weight:400;color:var(--ink-3); line-height:1.65;margin-top:5px} .fld select,.fld textarea{width:100%} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} span.bad, b.bad, i.bad, em.bad, td.bad, li.bad, strong.bad{color:var(--bad)} span.good, b.good, i.good, em.good, td.good, strong.good{color:var(--ok)} span.warn, b.warn, i.warn, em.warn, td.warn{color:var(--warn)} span.dim, b.dim, i.dim, em.dim, div.dim, small.dim{color:var(--ink-3)} span.mono, b.mono, i.mono, td.mono, div.mono, code.mono{font-family:var(--mono)} .spacer{flex:1 1 auto;min-width:0} .bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px} a.btn{display:inline-flex;align-items:center;text-decoration:none} /* ---------- 提示条 ---------- */ .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200; color:var(--txt-invert);padding:11px 20px;border-radius:99px;font-size:13px;display:none; background:linear-gradient(150deg,#39414F,#252B39); box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1)} [data-theme="dark"] .toast{background:linear-gradient(150deg,#464F61,#323949)} .toast.on{display:flex;align-items:center;gap:8px;animation:toast-in .3s cubic-bezier(.3,1.4,.5,1)} .toast.on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--led-ok); box-shadow:0 0 6px var(--led-ok);flex:none} .toast.bad{background:linear-gradient(150deg,#D4574A,#B23A2E)} .toast.bad::before{background:#FFD7D2;box-shadow:0 0 6px rgba(255,215,210,.8)} @keyframes toast-in{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}} .soon-box{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-md);padding:40px;text-align:center} .soon-box h3{margin:0 0 8px;font-size:16px} .soon-box p{margin:0;color:var(--ink-3);font-size:13px;line-height:1.9} /* ---------- 弧形日夜开关（挂在台的右上角） ---------- 一段短而厚的 L 形轨悬在主面板角外。默认整条轨里躺着一层**淡紫**， 鼠标靠近时一团更亮的光斑液态地追过来；切到深色，整条被走过的流光点亮。 z-index 压在所有弹层之下——装饰永远不能挡住内容（上一版遮住了通知弹窗）。 */ .arc-toggle{position:fixed;z-index:30;width:150px;height:150px;-webkit-user-select:none;user-select:none; pointer-events:none} .arc-toggle svg{position:absolute;inset:0;overflow:visible} /* 槽的立体感靠三层叠：上暗边（凹进去的影）、槽体、下亮边（凹槽的反光唇） */ .arc-toggle .groove-lo{fill:none;stroke:var(--edge-lo);stroke-width:19;stroke-linecap:round; transform:translate(0,2px)!important} .arc-toggle .groove{fill:none;stroke:var(--groove);stroke-width:17;stroke-linecap:round} .arc-toggle .groove-hi{fill:none;stroke:var(--edge-hi);stroke-width:15;stroke-linecap:round} /* 彗星尾：宽的辉光层 + 细的亮芯，跟在胶囊身后；停下缓缓熄灭 */ .arc-toggle .trail-glow{fill:none;stroke-width:15;stroke-linecap:round; filter:blur(6px);opacity:0;transition:opacity .9s ease} .arc-toggle .trail-core{fill:none;stroke-width:6;stroke-linecap:round; filter:blur(1.2px);opacity:0;transition:opacity .9s ease} .arc-pill{position:absolute;left:0;top:0;width:46px;height:30px;margin:-15px 0 0 -23px;pointer-events:auto; border-radius:16px;display:grid;place-items:center;cursor:pointer;overflow:hidden; background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,255,255,.45) 45%,var(--surface-lo)); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow:0 2px 3px var(--sh-dark2),6px 9px 16px var(--sh-dark),-3px -3px 9px var(--sh-lite), inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 var(--edge-lo), inset 1.5px 0 2px rgba(255,255,255,.5); transition:background .4s ease,box-shadow .4s ease} /* 移动时从尾侧透出来的暖芯（浅色橙、深色紫）——视频里胶囊内那一抹颜色 */ .arc-pill .mglow{position:absolute;inset:-6px;border-radius:20px;pointer-events:none;opacity:var(--mg,0); background:radial-gradient(circle at 22% 55%,rgba(255,138,61,.75),rgba(255,138,61,0) 62%); transition:opacity .5s ease} .arc-pill.back .mglow{background:radial-gradient(circle at 78% 55%,rgba(255,138,61,.75),rgba(255,138,61,0) 62%)} [data-theme="dark"] .arc-pill .mglow{background:radial-gradient(circle at 22% 55%,rgba(168,85,247,.7),rgba(168,85,247,0) 62%)} [data-theme="dark"] .arc-pill.back .mglow{background:radial-gradient(circle at 78% 55%,rgba(168,85,247,.7),rgba(168,85,247,0) 62%)} /* 转轮：移动时转，停下即止 */ @keyframes arcspin{to{transform:rotate(360deg)}} .arc-pill .spin{transition:color .4s ease} .arc-pill.moving .spin{animation:arcspin .9s linear infinite} [data-theme="dark"] .arc-pill{ background:linear-gradient(155deg,rgba(120,128,160,.34),rgba(52,58,78,.22) 60%); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); box-shadow:0 2px 3px rgba(8,11,19,.4),6px 9px 16px rgba(8,11,19,.5),-3px -3px 8px rgba(151,166,203,.07), inset 0 1.5px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.25)} .arc-pill svg.ic{position:absolute;left:50%;top:50%;width:15px;height:15px; margin:-7.5px 0 0 -7.5px;color:var(--ink-2)} [data-theme="dark"] .arc-pill .spin{color:#D9DEF0} .arc-pill:active{transform:scale(.94)} @media (prefers-reduced-motion:reduce){ .arc-pill,.arc-pill *{transition:none!important} } /* ---------- 旋钮开关（勾选框的正经替身） ---------- 结构：label.knob > input[checkbox] + span.k-socket > span.k-cap > i.k-led 开=盖归位、绿灯亮在右下；关=盖逆时针扭 120°、红灯被带到上方。 厚重感的配方（上一版被点名「太塑料」，每一层都是冲着这个改的）： 底座 凹坑 + 外圈一道斜面环，像从面板上铣出来的 盖 三层叠光：大弧面的顶光、绕一圈的环形光泽（conic）、边缘亮唇 投影 两层——贴地的锐影给「接触感」，散开的远影给「高度」 按下 整个盖缩 4% 且投影收紧，是「按进去」不是「变小」 */ .knob{position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:none} .knob input{position:absolute;opacity:0;pointer-events:none} .knob .k-socket{position:relative;display:grid;place-items:center;border-radius:50%; width:var(--kd,52px);height:var(--kd,52px);background:var(--pane-2); box-shadow:inset 3px 5px 9px var(--sh-dark),inset -3px -4px 8px var(--sh-lite2), 0 2px 3px var(--sh-dark2),6px 9px 18px var(--sh-dark),-4px -5px 11px var(--sh-lite); transition:background .4s ease,box-shadow .4s ease} /* 底座外圈的斜面环：一圈极细的明暗交替，铣削痕迹 */ .knob .k-socket::before{content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none; background:conic-gradient(from 320deg, var(--sh-lite) 0 12%,transparent 22% 48%,var(--sh-dark2) 55% 72%,transparent 80% 100%); -webkit-mask:radial-gradient(circle,transparent calc(50% - 3.5px),#000 calc(50% - 2.5px)); mask:radial-gradient(circle,transparent calc(50% - 3.5px),#000 calc(50% - 2.5px)); filter:blur(1px)} .knob .k-cap{position:relative;width:78%;height:78%;border-radius:50%; background: radial-gradient(circle at 33% 26%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 42%), conic-gradient(from 210deg,var(--surface-lo),var(--surface-hi) 22%,var(--surface-lo) 46%, var(--pane-2) 62%,var(--surface-lo) 82%,var(--surface-lo)), radial-gradient(circle at 50% 45%,var(--surface-hi) 30%,var(--surface-lo) 78%,var(--pane-2) 100%); border:1px solid rgba(45,52,70,.42); box-shadow:0 1.5px 2px var(--sh-dark),0 7px 14px var(--sh-dark2), inset 0 2px 3px var(--edge-hi),inset 0 -4px 7px var(--edge-lo), inset 2px 0 4px rgba(255,255,255,.14),inset -2px 0 4px var(--sh-dark2); transform:rotate(-120deg); transition:transform .6s cubic-bezier(.3,1.35,.45,1),background .4s ease,box-shadow .4s ease} [data-theme="dark"] .knob .k-cap{border-color:rgba(6,9,16,.9); background: radial-gradient(circle at 33% 26%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 44%), conic-gradient(from 210deg,#333B4B,#48516A 22%,#333B4B 46%,#272D3B 62%,#333B4B 82%,#333B4B), radial-gradient(circle at 50% 45%,#3E4658 30%,#313848 78%,#272D3B 100%); box-shadow:0 1.5px 2px rgba(5,8,14,.6),0 7px 14px rgba(5,8,14,.45), inset 0 2px 3px rgba(255,255,255,.12),inset 0 -4px 7px rgba(0,0,0,.4), inset 2px 0 4px rgba(255,255,255,.05),inset -2px 0 4px rgba(0,0,0,.3)} /* 盖心：一小片更亮的凸起圆顶，中心一点高光——真实旋钮的抓握面 */ .knob .k-cap::before{content:"";position:absolute;inset:22%;border-radius:50%; background:radial-gradient(circle at 40% 32%,rgba(255,255,255,.5),rgba(255,255,255,0) 55%), radial-gradient(circle at 50% 55%,rgba(0,0,0,.05),rgba(255,255,255,.06) 80%); box-shadow:inset 0 1px 2px var(--edge-hi),inset 0 -2px 4px var(--sh-dark2), 0 1px 2px var(--sh-lite2)} [data-theme="dark"] .knob .k-cap::before{ background:radial-gradient(circle at 40% 32%,rgba(255,255,255,.14),rgba(255,255,255,0) 55%), radial-gradient(circle at 50% 55%,rgba(0,0,0,.2),rgba(255,255,255,.04) 80%); box-shadow:inset 0 1px 2px rgba(255,255,255,.1),inset 0 -2px 4px rgba(0,0,0,.35)} .knob .k-led{position:absolute;right:10%;bottom:23%;width:17%;height:9.5%;border-radius:99px; transform:rotate(42deg);background:var(--led-bad); box-shadow:0 0 4px var(--led-bad),0 0 11px rgba(255,83,71,.65),0 0 22px rgba(255,83,71,.3), inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 2px rgba(120,10,0,.4); transition:background .3s ease,box-shadow .3s ease} .knob input:checked ~ .k-socket .k-cap{transform:rotate(0deg)} .knob input:checked ~ .k-socket .k-led{background:var(--led-ok); box-shadow:0 0 4px var(--led-ok),0 0 12px rgba(61,220,132,.7),0 0 24px rgba(61,220,132,.32), inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,90,40,.4)} .knob:hover .k-cap{filter:brightness(1.035)} .knob:active .k-cap{transition-duration:.14s;transform:rotate(-120deg) scale(.955); box-shadow:0 1px 1.5px var(--sh-dark),0 3px 7px var(--sh-dark2), inset 0 2px 3px var(--edge-hi),inset 0 -4px 7px var(--edge-lo)} .knob input:checked ~ .k-socket:active .k-cap, .knob:active input:checked ~ .k-socket .k-cap{transform:rotate(0deg) scale(.955)} .knob input:focus-visible ~ .k-socket{outline:2px solid var(--acc);outline-offset:3px} .knob.lg{--kd:72px} .knob.mini{--kd:36px} .knob.mini .k-socket::before{inset:-3px;filter:blur(.7px)} @media (prefers-reduced-motion:reduce){ .knob .k-cap{transition:none} } /* 行内小旋钮 + 文案（替代 .tgl 勾选框那种「一行一开关」） */ label.tglk{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2); cursor:pointer;letter-spacing:0;font-weight:400} /* 旋钮 + 文案的成行组合 */ .knob-row{display:flex;align-items:center;gap:14px;padding:10px 0} .knob-row .kr-t b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)} .knob-row .kr-t span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px} /* ---------- 流光进度条（发送公告等长任务用） ---------- */ .flowbar{position:relative;height:8px;border-radius:99px;background:var(--pane-2);overflow:hidden; box-shadow:inset 2px 3px 6px var(--sh-dark2),inset -2px -2px 5px var(--sh-lite2)} .flowbar > i{position:absolute;inset:0;width:var(--p,0%);border-radius:99px; background:linear-gradient(90deg,var(--acc-deep),var(--acc),#E879F9); box-shadow:0 0 10px rgba(168,85,247,.5);transition:width .3s ease} .flowbar > i::after{content:"";position:absolute;inset:0;border-radius:99px; background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); background-size:200% 100%;animation:flow-sheen 1.6s linear infinite} @keyframes flow-sheen{from{background-position:200% 0}to{background-position:-200% 0}} /* ---------- 加载：参考图胶囊里那颗八芒星，转起来 ---------- */ .spin8{display:inline-block;width:16px;height:16px;position:relative;animation:spin8 1s steps(8) infinite} .spin8::before{content:"";position:absolute;inset:0; background: radial-gradient(circle 1.6px,currentColor 95%,transparent) 50% 0/4px 4px no-repeat, radial-gradient(circle 1.6px,currentColor 95%,transparent) 100% 50%/4px 4px no-repeat, radial-gradient(circle 1.6px,currentColor 95%,transparent) 50% 100%/4px 4px no-repeat, radial-gradient(circle 1.6px,currentColor 95%,transparent) 0 50%/4px 4px no-repeat, radial-gradient(circle 1.4px,currentColor 60%,transparent) 85% 15%/4px 4px no-repeat, radial-gradient(circle 1.4px,currentColor 60%,transparent) 85% 85%/4px 4px no-repeat, radial-gradient(circle 1.4px,currentColor 60%,transparent) 15% 85%/4px 4px no-repeat, radial-gradient(circle 1.4px,currentColor 60%,transparent) 15% 15%/4px 4px no-repeat} @keyframes spin8{to{transform:rotate(1turn)}} @media (max-width:1180px){ .kanban{grid-template-columns:repeat(3,minmax(200px,1fr))} } @media (max-width:900px){ .shell{grid-template-columns:0 1fr} .nav{position:fixed;left:0;top:var(--top-h);bottom:0;width:var(--nav-w);z-index:50;transform:translateX(-100%); transition:transform .18s;background:var(--pane);box-shadow:8px 0 30px rgba(0,0,0,.15)} .nav.open{transform:none} .brand{grid-area:brand} .kanban{grid-template-columns:1fr} .search input{width:140px} .main{margin:2px 10px 12px 8px} .topbar{padding-right:12px} .arc-toggle{display:none} } /* ---------- 每日检查 ---------- */ .cl-list{padding:0} .cl-row{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:flex-start} .cl-row:last-child{border-bottom:none} .cl-row.ok{background:linear-gradient(90deg,var(--ok-bg) 0,transparent 60%)} .cl-row.bad{background:linear-gradient(90deg,var(--bad-bg) 0,transparent 60%)} .cl-ix{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--acc);width:22px;padding-top:2px} .cl-main{flex:1;min-width:0} .cl-t{font-size:13.8px;line-height:1.5;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cl-scope{font-size:12px;color:var(--ink-2);margin-top:4px} .cl-scope span{font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);background:var(--acc-bg); border:1px solid var(--acc-line);color:var(--acc);border-radius:3px;padding:1px 6px;margin-right:7px} .cl-pts{font-size:12px;color:var(--ink-2);margin-top:4px;display:flex;flex-direction:column;gap:2px} .cl-pts i{font-style:normal;color:var(--acc);font-weight:700;margin-right:5px} .cl-rm{width:100%;margin-top:7px;padding:6px 9px;border:1px solid var(--bad);border-radius:4px; background:var(--surface);font-size:12.5px} .cl-rmk{font-size:12px;color:var(--ink-2);margin-top:5px} .cl-by{font-size:11px;color:var(--ink-3);margin-top:5px} .cl-act{display:flex;align-items:center;gap:0;flex-shrink:0;padding-top:2px} /* 三态按钮组：凹槽里三粒，选中的凸出来并染语义色。 外层容器没有独立类名，凹槽感放在按钮自身：未选=平，选中=凸。 */ .stbtn{padding:5px 13px;font-size:12px;border:none;background:var(--pane-2);color:var(--ink-3); box-shadow:inset 2px 3px 6px var(--sh-dark2),inset -2px -2px 5px var(--sh-lite2); transition:background .15s ease,color .15s ease,box-shadow .15s ease} .stbtn:first-of-type{border-radius:99px 0 0 99px;padding-left:15px} .stbtn:nth-of-type(3){border-radius:0 99px 99px 0;padding-right:15px} .stbtn:hover{color:var(--ink)} .stbtn.on.p{background:linear-gradient(150deg,var(--surface-hi),var(--surface-lo));color:var(--ink); box-shadow:2px 3px 6px var(--sh-dark),-2px -2px 4px var(--sh-lite);font-weight:600} .stbtn.on.o{background:linear-gradient(145deg,var(--led-ok),var(--ok));color:#fff; box-shadow:0 3px 9px rgba(31,138,93,.4);font-weight:600} .stbtn.on.b{background:linear-gradient(145deg,var(--led-bad),var(--bad));color:#fff; box-shadow:0 3px 9px rgba(204,68,55,.4);font-weight:600} /* ---------- 排班与交接 ---------- */ table.grid.shift td{padding:7px 9px;vertical-align:top;min-width:96px} table.grid.shift td.sl{background:var(--ui-soft);font-size:12.5px;font-weight:600;white-space:nowrap;min-width:auto} table.grid.shift td.sl i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);font-weight:400} table.grid.shift th.tdy,table.grid.shift td.tdy{background:var(--acc-bg)} table.grid.shift tbody tr:hover{background:none} .shp{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:var(--acc-bg);color:var(--c1); border:1px solid var(--acc-line);border-radius:11px;padding:2px 8px;margin:0 4px 4px 0} .shp b{cursor:pointer;font-weight:400;opacity:.5} .shp b:hover{opacity:1;color:var(--bad)} .addsh{width:20px;height:20px;border:1px dashed var(--line);border-radius:4px;color:var(--ink-3);font-size:13px;line-height:1} .addsh:hover{border-color:var(--acc);color:var(--acc)} .hv-list{padding:14px 16px;display:flex;flex-direction:column;gap:11px} .hv{border:1px solid var(--line);border-left:3px solid var(--c1);border-radius:5px;padding:10px 13px;background:var(--field)} .hv-h{display:flex;align-items:center;gap:10px;font-size:12.5px;margin-bottom:6px;color:var(--ink-2)} .hv-h .tm{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)} .hv-r{display:flex;gap:9px;font-size:12.5px;line-height:1.6;margin-top:3px} .hv-r .k{font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);background:var(--ui-hover); border-radius:3px;padding:1px 6px;height:fit-content;white-space:nowrap;margin-top:2px} /* ---------- 统一人员组件 ---------- */ .pchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;vertical-align:middle} .pchip i{font-style:normal;width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,var(--acc),var(--acc-deep)); color:var(--txt-invert);display:inline-grid;place-items:center;font-size:10px;font-weight:600;flex-shrink:0} .pchip b{font-weight:500;color:var(--ink)} .pchip em{font-style:normal;font-size:11px;color:var(--c1);background:var(--acc-bg);border:1px solid var(--acc-line); border-radius:3px;padding:0 5px} .pchip u{text-decoration:none;font-size:11px;color:var(--ink-3)} .pchip.sm{font-size:12px;gap:5px} .pchip.sm i{width:18px;height:18px;font-size:9px} .pchip.sm em{font-size:10px;padding:0 4px} .pchip.none{color:var(--ink-3);font-size:12px} /* ---------- 范围切换：凹槽 + 凸起的滑块 ---------- 选中的那格「从槽里凸出来」——和按钮按下去变凹是同一套触觉语言的反面。 */ .scope{display:inline-flex;gap:3px;padding:4px;border-radius:99px;background:var(--pane-2); box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2)} .scope button{padding:5px 14px;font-size:12.5px;color:var(--ink-3);border-radius:99px; transition:color .15s ease,background .15s ease,box-shadow .15s ease} .scope button:hover{color:var(--ink)} .scope button.on{color:var(--ink);font-weight:600; background:linear-gradient(150deg,var(--surface-hi),var(--surface-lo)); box-shadow:2px 3px 7px var(--sh-dark),-2px -2px 5px var(--sh-lite),inset 0 1px 0 var(--edge-hi)} /* ---------- 工作台：任务导向 ---------- */ .todo{display:flex;flex-direction:column;gap:9px;margin-bottom:20px} .todo-item{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line); border-left:3px solid var(--c1);border-radius:6px;padding:13px 16px} .todo-item.urgent{border-left-color:var(--bad);background:linear-gradient(90deg,var(--bad-bg) 0,var(--surface) 40%)} .todo-item .ic{width:30px;height:30px;border-radius:6px;background:var(--ui-soft);display:grid;place-items:center; font-size:15px;color:var(--c1);flex-shrink:0} .todo-item.urgent .ic{background:var(--bad-bg);color:var(--bad)} .todo-item .tx{flex:1} .todo-item .t{font-size:14px;font-weight:500} .todo-item .s{font-size:11.5px;color:var(--ink-3);margin-top:1px} .todo-done{background:var(--ok-bg);border-color:#CBE4D6;border-left-color:var(--ok); padding:16px;text-align:center;color:var(--ok);font-size:13.5px;border-radius:6px;border:1px solid #CBE4D6; border-left-width:3px;margin-bottom:20px} .sec-h{font-size:11px;letter-spacing:.2em;color:var(--ink-3);font-weight:700;margin:22px 0 10px} /* ---------- 设置页 ---------- */ .stabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap} .stabs button{padding:9px 15px;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent; border-radius:4px 4px 0 0} .stabs button:hover{background:var(--ui-soft);color:var(--ink)} .stabs button.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:600;background:var(--acc-bg)} .hint2{font-size:11.5px;color:var(--ink-3);line-height:1.8;padding:12px 18px;border-top:1px solid var(--line); background:var(--ui-soft)} .sec-h2{font-size:11px;letter-spacing:.16em;color:var(--ink-3);font-weight:700;margin:14px 0 8px} .muted{color:var(--ink-3);font-size:12px} .lnk{font-size:11.5px;color:var(--c1);padding:2px 6px;border-radius:3px} .lnk:hover{background:var(--ui-hover)} .lnk.del:hover{color:var(--bad)} .warnbox{background:var(--warn-bg);border:1px solid var(--acc-line);border-radius:5px;padding:9px 12px; font-size:12px;color:var(--warn);margin-bottom:12px;line-height:1.7} /* 部门 */ .deptbox{border:1px solid var(--line);border-radius:6px;margin-bottom:11px;overflow:hidden} .deptbox .dh{display:flex;align-items:center;gap:9px;padding:10px 13px;background:var(--ui-soft); border-bottom:1px solid var(--line);font-size:13.5px} .deptbox .dh .n{font-size:11.5px;color:var(--ink-3)} .deptbox .tms{padding:11px 13px;display:flex;flex-wrap:wrap;gap:7px} .tmc{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;background:var(--acc-bg);color:var(--c1); border:1px solid var(--acc-line);border-radius:12px;padding:3px 10px} .tmc i{font-style:normal;font-size:10.5px;opacity:.7} .tmc b{cursor:pointer;font-weight:400;opacity:.5} .tmc b:hover{opacity:1;color:var(--bad)} /* 角色 */ .rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px} .rolecard{border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:var(--field)} .rolecard.sys{border-color:var(--acc-line);background:var(--acc-bg)} .rc-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px} .rc-h b{font-size:14px} .rc-h code{font-size:11px;color:var(--ink-3);background:var(--ui-hover);border-radius:3px;padding:1px 5px} .sysbadge{font-size:10px;background:var(--acc);color:#fff;border-radius:3px;padding:1px 5px} .rc-m{font-size:11.5px;color:var(--ink-3);margin-bottom:7px} .rc-p{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;min-height:20px} .rc-p i{font-style:normal;font-size:10.5px;background:var(--surface);border:1px solid var(--line); border-radius:3px;padding:1px 5px;color:var(--ink-2)} .rc-p i.more{color:var(--ink-3)} .rc-a{display:flex;gap:6px} .permwrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;max-height:52vh;overflow-y:auto} .permwrap.locked{opacity:.55} .permgrp{border:1px solid var(--line);border-radius:5px;padding:9px 11px} .pg-h{font-size:11.5px;letter-spacing:.1em;color:var(--ink-3);font-weight:700;margin-bottom:7px; display:flex;align-items:center;justify-content:space-between} .pm{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 0;cursor:pointer} .pm input{accent-color:var(--acc);width:14px;height:14px} .pm code{margin-left:auto;font-size:10px;color:var(--ink-3);opacity:.7} .modal .box.wide{width:min(860px,96vw)} .evwrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 10px; border:1px solid var(--line);border-radius:4px;padding:9px 11px} /* 人员 */ .posc{font-size:11px;color:var(--c1);background:var(--acc-bg);border:1px solid var(--acc-line);border-radius:3px;padding:0 5px} /* 渠道 */ .chbox{border:1px solid var(--line);border-radius:6px;padding:11px 13px;margin-bottom:9px} .chbox.off{opacity:.6} .ch-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px} .ch-h .kind{font-size:11px;color:var(--ink-3);background:var(--ui-hover);border-radius:3px;padding:1px 6px} .on-b{font-size:10.5px;background:var(--ok-bg);color:var(--ok);border:1px solid #CBE4D6;border-radius:3px;padding:1px 6px} .off-b{font-size:10.5px;background:var(--ui-hover);color:var(--ink-3);border-radius:3px;padding:1px 6px} .ch-e{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .ch-e i{font-style:normal;font-size:10.5px;background:var(--acc-bg);color:var(--c1);border:1px solid var(--acc-line); border-radius:3px;padding:1px 6px} .ch-e .lvl{margin-left:auto;font-size:11px;color:var(--ink-3)} .rppre{background:#252B39;color:#D5DAE0;padding:14px 16px;border-radius:6px;font-family:var(--mono); font-size:12px;line-height:1.75;white-space:pre-wrap;margin-top:12px;max-height:340px;overflow-y:auto} /* 通知铃铛 */ .bell{position:relative;width:36px;height:36px;border-radius:50%;font-size:15px;color:var(--ink-2); display:grid;place-items:center; background:linear-gradient(150deg,var(--surface-hi),var(--surface-lo)); box-shadow:3px 4px 9px var(--sh-dark2),-3px -3px 7px var(--sh-lite),inset 0 1px 0 var(--edge-hi)} .bell:hover{color:var(--ink)} .bell:active{box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -2px -2px 6px var(--sh-lite2)} .bell b{position:absolute;top:1px;right:2px;background:var(--bad);color:#fff;font-size:9px; min-width:14px;height:14px;border-radius:7px;display:grid;place-items:center;padding:0 3px;font-weight:600} .notifpop{position:absolute;right:16px;top:50px;width:330px;max-height:420px;overflow-y:auto; background:linear-gradient(160deg,var(--surface-hi),var(--surface-lo)); border:none;border-radius:var(--r-md); box-shadow:0 18px 50px rgba(10,14,26,.3),inset 0 1px 0 var(--edge-hi);z-index:90;display:none} .notifpop.on{display:block} .notifpop .nh{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;font-size:13px;font-weight:600} .nitem{padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.6} .nitem:last-child{border-bottom:none} .nitem.unread{background:var(--acc-bg)} .nitem .nt{font-weight:500} .nitem .nb{color:var(--ink-2);font-size:12px;margin-top:2px;white-space:pre-wrap;max-height:60px;overflow:hidden} .nitem .nm2{font-size:10.5px;color:var(--ink-3);margin-top:3px} /* ---------- 素材库 ---------- */ .tagbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .tagbar button{padding:5px 12px;font-size:12.5px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink-2)} .tagbar button:hover{border-color:var(--acc)} .tagbar button.on{background:linear-gradient(145deg,var(--acc),var(--acc-deep));color:#fff;border-color:transparent;box-shadow:0 4px 12px -4px rgba(124,58,237,.45)} .tagbar button i{font-style:normal;opacity:.6;font-size:11px} .libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px} .libcard{border:none;border-radius:var(--r-md);overflow:hidden;background:var(--surface);cursor:pointer; position:relative;box-shadow:var(--card-sh);transition:transform .15s ease,box-shadow .15s ease} .libcard:hover{transform:translateY(-2px); box-shadow:0 3px 6px rgba(60,66,90,.08),0 16px 34px -12px rgba(60,66,90,.28)} .lc-img{height:130px;background:var(--pane-2);display:grid;place-items:center;overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-2)} /* contain 不裁字：这里放的多是聊天截图，cover 会把首行文字拦腰切成半个字。 letterbox 出来的边让 .lc-img 的底色收掉。 */ .lc-img img{width:100%;height:100%;object-fit:contain} .lc-file{font-size:12px;color:var(--ink-3);padding:10px;text-align:center} .lc-b{padding:9px 11px} .lc-cap{font-size:12.5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lc-m{font-size:10.5px;color:var(--ink-3);margin-top:3px} .lc-m .tg{background:var(--acc-bg);color:var(--acc);border-radius:99px;padding:1px 8px;margin-left:5px} .lc-a{position:absolute;top:6px;right:6px;display:none;gap:4px} .libcard:hover .lc-a{display:flex} .lc-a button{font-size:10.5px;padding:3px 9px;border:none;border-radius:99px;color:var(--ink-2); background:linear-gradient(150deg,var(--surface-hi),var(--surface-lo)); box-shadow:2px 3px 7px var(--sh-dark),-2px -2px 4px var(--sh-lite)} .lc-a button:hover{color:var(--acc)} .uppreview{font-size:12px;color:var(--ink-3);line-height:1.8;max-height:120px;overflow-y:auto} .slideshow{position:fixed;inset:0;background:rgba(15,20,26,.96);z-index:300;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px} .slideshow img{max-width:92vw;max-height:76vh;object-fit:contain;border-radius:4px} .ss-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:14px 20px; color:#D5DAE0;font-size:13px} .ss-top .ss-cap{flex:1;text-align:center;font-size:14px;color:#fff} .ss-top button{color:#D5DAE0;font-size:13px;padding:5px 11px;border:1px solid rgba(255,255,255,.2);border-radius:4px} .ss-top button:hover{background:rgba(255,255,255,.1)} .ss-nav{display:flex;gap:12px} .ss-nav button{color:#D5DAE0;font-size:13px;padding:8px 18px;border:1px solid rgba(255,255,255,.2);border-radius:5px} .ss-nav button:hover{background:rgba(255,255,255,.1);color:#fff} /* ---------- 工单流转 ---------- */ .submitter{display:flex;align-items:center;gap:10px;background:var(--ui-soft);border:1px solid var(--line); border-radius:5px;padding:9px 12px;margin-bottom:14px;font-size:12px;color:var(--ink-3)} .submitter .tm{margin-left:auto;font-family:var(--mono);font-size:11px} .chain{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:10px} .chain .cn{border:1px solid var(--line);border-radius:5px;padding:6px 10px;background:var(--field);min-width:86px} .chain .cn.done{border-color:var(--ok);background:var(--ok-bg)} .chain .cn b{display:block;font-size:12.5px} .chain .cn i{font-style:normal;display:block;font-size:10.5px;color:var(--ink-3)} .chain .cn u{text-decoration:none;display:inline-block;font-size:10px;background:var(--ui-hover); border-radius:3px;padding:0 5px;margin-top:3px;color:var(--ink-2)} .chain .cn.done u{background:var(--ok);color:#fff} .chain .cn em{font-style:normal;display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px; max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chain .ar{color:var(--acc);font-weight:700;font-size:15px} .reads{font-size:11.5px;color:var(--ink-3);padding-top:9px;border-top:1px dashed var(--line)} .reads span{display:inline-block;background:var(--ui-hover);border-radius:9px;padding:1px 8px;margin:0 4px 4px 0; font-size:11px;color:var(--ink-2)} .reads.none{color:var(--warn)} .work .wbox{border:1px solid var(--line);border-left:3px solid var(--c1);border-radius:5px;padding:9px 12px; margin-bottom:9px;font-size:13px;line-height:1.75;white-space:pre-wrap;background:var(--field)} .work .wbox.b{border-left-color:var(--c1);background:var(--acc-bg)} .work .wbox.r{border-left-color:var(--bad);background:var(--bad-bg)} .work .wbox.y{border-left-color:var(--warn);background:var(--warn-bg)} .work .wk{display:inline-block;font-size:10.5px;letter-spacing:.12em;color:var(--ink-3);font-weight:600; background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:1px 6px;margin-right:8px; vertical-align:1px} .work .wnone{font-size:12.5px;color:var(--ink-3);padding:6px 0} .actbar a.btn{text-decoration:none;display:inline-flex;align-items:center} .pushbar{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line); border-radius:6px;padding:11px 15px;margin-bottom:16px} .pushbar .pb-t{font-size:13px;color:var(--ink-2)} .pushbar .pb-t b{color:var(--warn)} .pushbar a.btn{text-decoration:none} .pushbar .btn:disabled{opacity:.45;cursor:default} .btn.pulse{animation:pulse 2.2s ease-in-out infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(184,117,46,.4)}50%{box-shadow:0 0 0 6px rgba(184,117,46,0)}} /* ---------- 分析报告 ---------- */ .kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .kgrid .kcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left; padding:14px 15px 15px;border:none;border-radius:var(--r-md);background:var(--surface); box-shadow:var(--card-sh);cursor:pointer;font-family:inherit; transition:transform .15s ease,box-shadow .15s ease,background .15s ease} .kgrid .kcard:hover{transform:translateY(-2px);background:var(--acc-bg); box-shadow:0 3px 6px rgba(60,66,90,.08),0 14px 30px -12px rgba(60,66,90,.24)} .kgrid .ki{font-size:17px;color:var(--acc);line-height:1} .kgrid .kn{font-size:14px;font-weight:600;color:var(--ink);margin-top:4px} .kgrid .ks{font-size:11.5px;color:var(--ink-3);line-height:1.5} .ki2{color:var(--acc);font-size:13px} .segf{display:inline-flex;gap:3px;padding:3px;border-radius:99px;background:var(--pane-2); box-shadow:inset 2px 3px 6px var(--sh-dark2),inset -2px -2px 5px var(--sh-lite2)} .segf button{font-size:11.5px;padding:4px 12px;border:0;border-radius:99px; background:transparent;color:var(--ink-2);cursor:pointer;font-family:inherit; transition:color .15s ease,background .15s ease,box-shadow .15s ease} .segf button:last-child{border-right:0} .segf button.on{color:var(--ink);font-weight:600; background:linear-gradient(150deg,var(--surface-hi),var(--surface-lo)); box-shadow:2px 3px 6px var(--sh-dark),-2px -2px 4px var(--sh-lite),inset 0 1px 0 var(--edge-hi)} .arow{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:3px;background:var(--field)} .arow .ac{flex:1;min-width:130px;padding:11px 14px;border-right:1px solid var(--line)} .arow .ac:last-child{border-right:0} .ack{font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);font-weight:600} .acv{font-size:19px;font-weight:600;color:var(--ink);margin-top:3px;line-height:1.2; font-variant-numeric:tabular-nums} .acn{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.5} .acv .bad{color:var(--bad)}.acv .ok{color:var(--ok)}.acv .dim{color:var(--ink-3);font-size:14px} .form2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 16px} .form2 label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2)} .form2 label.wide{grid-column:1/-1} .form2 label em{font-style:normal;color:var(--bad);margin-left:2px} .form2 input,.form2 select,.form2 textarea{font-family:inherit;font-size:13px;padding:7px 9px; border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--ink);width:100%} .form2 textarea{resize:vertical;line-height:1.7} .rowt-h{display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px} table.tight th,table.tight td{padding:4px 5px} table.tight input,table.tight select{font-family:inherit;font-size:12px;padding:5px 6px; border:1px solid var(--line);border-radius:2px;width:100%;background:var(--surface);color:var(--ink)} .xrow{border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-size:15px;line-height:1;padding:2px 5px} .xrow:hover{color:var(--bad)} .picgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .pic{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--field)} .pic img{width:100%;display:block;background:#fff;max-height:200px;object-fit:contain;object-position:top} .pic-b{padding:8px 10px 9px;border-top:1px solid var(--line)} .pic-c{font-size:12px;line-height:1.6;color:var(--ink)} .pic-m{font-size:10.5px;color:var(--ink-3);margin-top:4px} .pic-m a{color:var(--bad)} .warnbar{border:none;background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px var(--line-2); padding:9px 13px;border-radius:3px;font-size:12.5px;margin-bottom:14px} tr.clk{cursor:pointer} tr.clk:hover{background:var(--acc-bg)} tr.clk .go{color:var(--acc);font-size:11.5px;white-space:nowrap} td.dim{color:var(--ink-3);font-size:11.5px} .ta-r{text-align:right} /* ---------- 交接 ---------- */ .hv-in{border-color:var(--acc-line);background:var(--acc-bg)} .hv-wait{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--acc-line); border-radius:3px;background:var(--surface);margin-bottom:8px;cursor:pointer;font-size:13px} .hv-wait:hover{border-color:var(--acc)} .hv-wait:last-child{margin-bottom:0} .hv{cursor:pointer} .hv:hover{border-color:var(--acc-line)} .hv .go{color:var(--acc);font-size:11.5px} .hv-r.bad{color:var(--bad)} .hvsum{font-size:12.5px;color:var(--ink-2);background:var(--field);border:1px solid var(--line); border-radius:3px;padding:9px 12px;margin-bottom:12px;line-height:1.8} .hvsum b{color:var(--ink)} .hvlist{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:3px} .hvi{padding:8px 10px;border-bottom:1px solid var(--line)} .hvi:last-child{border-bottom:0} .hvi-h{font-size:12.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .hvi-a{font-size:11.5px;color:var(--ink-2);margin-top:4px;padding-left:2px} .hvi-a.bad{color:var(--bad)} .hva{width:100%;margin-top:5px;font-family:inherit;font-size:12px;padding:5px 7px; border:1px solid var(--line);border-radius:2px;background:var(--field);color:var(--ink)} .hvnote{font-size:12.5px;line-height:1.7;white-space:pre-wrap;background:var(--field); border:1px solid var(--line);border-radius:3px;padding:8px 10px} .form2 .ro{font-size:13px;line-height:1.7;color:var(--ink);white-space:pre-wrap; background:var(--field);border:1px solid var(--line);border-radius:3px;padding:7px 9px;min-height:34px} .form2 .ro i{color:var(--ink-3);font-style:normal} /* ---------- 全平台总览 ---------- */ .lights{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:18px} .lt{position:relative;border:none;border-radius:var(--r-md);padding:12px 14px 12px 18px; background:var(--surface);box-shadow:var(--card-sh);overflow:hidden} .lt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; border-radius:0 4px 4px 0;background:var(--pane-2)} .lt-k{font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);font-weight:600} .lt-t{font-size:16px;font-weight:600;color:var(--ink);margin-top:4px;line-height:1.35} .lt-n{font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.6} .lt.ok::before{background:linear-gradient(180deg,var(--led-ok),var(--ok))} .lt.ok .lt-t{color:var(--ok)} .lt.warn::before{background:linear-gradient(180deg,#F5C554,var(--warn))} .lt.warn .lt-t{color:var(--warn)} .lt.bad::before{background:linear-gradient(180deg,var(--led-bad),var(--bad))} .lt.bad .lt-t{color:var(--bad)} .lt.none .lt-t{color:var(--ink-3)} /* 值守欠账行。之前是七条满宽的粉底大胶囊贴死卡缘—— 全都是最高警报＝没有警报，粉色只留给徽标；行与卡缘留出 18px 呼吸。 标题占固定列宽，后面的徽标群才能上下成列对齐。 */ .ov-pend{display:flex;flex-direction:column;gap:8px;padding:12px 18px 16px} .pd{position:relative;border:none;border-radius:var(--r-sm);overflow:hidden; background:var(--surface);box-shadow:var(--card-sh)} .pd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pane-2)} .pd.bad::before{background:linear-gradient(180deg,var(--led-bad),var(--bad))} .pd-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 14px 11px 17px; cursor:pointer;font-size:13px;transition:background .14s ease} .pd-h > b{flex:none;min-width:118px} .pd-h:hover{background:var(--ui-soft)} .pd-h .go{color:var(--acc);font-size:11.5px;display:inline-flex;align-items:center;gap:4px; padding:4px 10px;border-radius:99px;background:var(--acc-bg);flex:none} .pd-h .caret{display:inline-block;width:7px;height:7px;border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-1px); transition:transform .2s ease} .pd-h .caret.up{transform:rotate(-135deg) translateY(-2px)} .pd-b{border-top:1px solid var(--line-2);background:var(--ui-soft);max-height:260px;overflow-y:auto} .pd-i{display:flex;align-items:center;gap:10px;padding:6px 12px;font-size:12px; border-bottom:1px solid var(--line-2)} .pd-i:last-child{border-bottom:0} .pd-i .mono{font-family:"SF Mono",Consolas,monospace;color:var(--ink-2)} .ov2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:0 16px} .card > .ov-more,.card .ov-more{padding:2px 18px 14px;margin-top:6px;font-size:12px} .ov-more a{color:var(--acc);margin-right:14px;text-decoration:none} .ov-more a:hover{text-decoration:underline} .tri-mini{margin-top:10px;border:1px solid var(--line);border-radius:3px} .tm-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 10px;font-size:12.5px; border-bottom:1px solid var(--line)} .tm-r:last-child{border-bottom:0} .tm-n{font-family:"SF Mono",Consolas,monospace;color:var(--bad);font-weight:600;min-width:12px} .tm-r .mono{font-family:"SF Mono",Consolas,monospace;font-size:11.5px;color:var(--ink-2)} .acv.warn{color:var(--warn)} i.pos{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin-top:1px} /* ---------- 报告模板 / 节拍 ---------- */ .blkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px} .blk{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--line); border-radius:3px;background:var(--field);cursor:pointer;font-size:13px} .blk:hover{border-color:var(--acc-line)} .blk.off{opacity:.5} .blk input{margin-top:2px;flex:none} .blk b{display:block;font-weight:600;color:var(--ink)} .blk i{display:block;font-style:normal;font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.5} tr.off td{opacity:.5} .stabs{flex-wrap:wrap} /* ---------- 自绘对勾 / 叉（字符 ✓✗ 是系统字形，各平台不一致，全站禁用） ---------- */ i.ck,i.cx{display:inline-block;width:12px;height:12px;position:relative;vertical-align:-1px} i.ck::before{content:"";position:absolute;left:1px;top:2px;width:8px;height:4px; border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)} i.cx::before,i.cx::after{content:"";position:absolute;left:5px;top:1px;width:2px;height:10px; background:currentColor;border-radius:1px} i.cx::before{transform:rotate(45deg)} i.cx::after{transform:rotate(-45deg)} /* ---------- 自绘下拉 ---------- 原生 select 的弹出列表由系统绘制，CSS 管不到。这里把真 select 藏起来只留值， 外面盖一层自己画的。 */ /* 默认跟原生 select 一样按内容宽，不撑满—— 否则筛选条、页头里的窄下拉会被拉成整行。需要满宽的地方下面单独指定。 */ .sel{position:relative;display:inline-block;max-width:100%;min-width:96px;vertical-align:middle} /* 表单类容器里才占满 */ .form2 label > .sel, .fld > .sel, .row2 .fld > .sel, table.tight td > .sel, .modal .sel, #modalBox .sel{display:block;width:100%} .sel > select{ position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;pointer-events:none; } .sel-btn{ display:flex;align-items:center;gap:8px;width:100%;font-family:inherit;font-size:13px; padding:8px 12px;border:none;border-radius:var(--r-sm);background:var(--field); color:var(--ink);cursor:pointer;text-align:left;line-height:1.5;min-height:36px; box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2); transition:box-shadow .18s ease; } .sel-btn:hover:not(:disabled){box-shadow:inset 3px 4px 8px var(--sh-dark2), inset -3px -3px 7px var(--sh-lite2),0 0 0 1.5px var(--acc-line)} .sel-btn:disabled{background:var(--ui-soft);color:var(--ink-3);cursor:not-allowed} .sel.on .sel-btn{box-shadow:inset 3px 4px 8px var(--sh-dark2), inset -3px -3px 7px var(--sh-lite2),0 0 0 2px var(--acc)} .sel-btn:focus-visible{outline:2px solid var(--acc);outline-offset:1px} .sel-lb{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sel-btn.ph .sel-lb{color:var(--ink-3)} .sel-ar{ flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid var(--ink-3);transition:transform .12s; } .sel.on .sel-ar{transform:rotate(180deg)} /* 弹出列表：从台上再抬一层的小板，带出场动画 */ .sel-pop{ position:fixed;z-index:400;max-height:280px;overflow-y:auto; background:linear-gradient(160deg,var(--surface-hi),var(--surface-lo)); border-radius:var(--r-md);border:none; box-shadow:0 14px 40px rgba(10,14,26,.28),inset 0 1px 0 var(--edge-hi); padding:5px;min-width:130px; animation:pop-in .16s cubic-bezier(.3,1.3,.5,1); } @keyframes pop-in{from{transform:translateY(-5px) scale(.98);opacity:0}to{transform:none;opacity:1}} .sel-op{ position:relative;padding:7px 30px 7px 11px;font-size:13px;line-height:1.5;color:var(--ink); cursor:pointer;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sel-op.hl{background:var(--acc-bg)} .sel-op.on{font-weight:600;color:var(--acc)} /* 自绘对勾：短边+长边的直角折线转 45°。字符 ✓ 是系统字形，各平台长得不一样 */ .sel-op.on::after{content:"";position:absolute;right:12px;top:50%; width:9px;height:5px;margin-top:-4px; border-left:2px solid var(--acc);border-bottom:2px solid var(--acc); transform:rotate(-45deg)} .sel-op.dis{color:var(--ink-3);cursor:not-allowed} .sel-op.dis.hl{background:transparent} /* 表格里的行内下拉更紧凑 */ table.tight .sel-btn{padding:5px 6px;font-size:12px;min-height:28px} /* 页头、筛选条里的下拉按内容宽即可 */ .page-h .sel, .bar .sel, .card h3 .sel{min-width:110px} /* ---------- 工单看板 ---------- 卡片要能一眼回答「这单要不要我现在管」：挂了多久、受理没有、 对方看没看、卡在谁那儿。空列压低存在感，让眼睛落到有活的地方。 */ .kanban{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start} @media (max-width:1180px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:680px){.kanban{grid-template-columns:1fr}} .kcol{background:var(--pane-2);border:none;border-radius:var(--r-md); padding:10px 10px 12px;min-height:96px; box-shadow:inset 3px 4px 8px var(--sh-dark2),inset -3px -3px 7px var(--sh-lite2)} .kcol.hot{background:var(--bad-bg)} .kcol.void{background:transparent;box-shadow:none;border:1px dashed var(--line);opacity:.62} .kchead{display:flex;align-items:center;gap:6px} .kchead .kn{font-family:"SF Mono",Consolas,monospace;font-size:15px;font-weight:600;color:var(--ink)} .kcol.void .kchead .kn{color:var(--ink-3);font-weight:400} .kchint{font-size:10.5px;color:var(--ink-3);margin:3px 0 9px;line-height:1.5;min-height:16px} .kbody{display:flex;flex-direction:column;gap:8px} .kempty{text-align:center;color:var(--ink-3);font-size:16px;padding:6px 0 2px;letter-spacing:.2em} .kmore{font-size:10.5px;color:var(--ink-3);text-align:center;margin-top:8px} .kcard{background:var(--surface);border:none;border-left:3px solid var(--line);box-shadow:var(--card-sh); border-radius:var(--r-sm);padding:9px 10px 10px;cursor:pointer; transition:transform .14s ease,box-shadow .14s ease} .kcard:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(60,66,90,.08),0 12px 26px -10px rgba(60,66,90,.26)} .kcard.lv-P0{border-left-color:#C0392B} .kcard.lv-P1{border-left-color:#D9822B} .kcard.lv-P2{border-left-color:#B8752E} .kcard.lv-P3{border-left-color:#B9C0C9} .kcard.od{background:var(--bad-bg)} .kh{display:flex;align-items:center;gap:6px;margin-bottom:5px} .kcode{font-family:"SF Mono",Consolas,monospace;font-size:10.5px;color:var(--ink-3)} .kage{font-family:"SF Mono",Consolas,monospace;font-size:10.5px;color:var(--ink-3);white-space:nowrap} .kage.bad{color:var(--bad);font-weight:600} .kt{font-size:13px;line-height:1.5;color:var(--ink);font-weight:500;margin-bottom:6px} .kflags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px} .kf{font-size:10px;line-height:1.6;padding:0 5px;border-radius:2px;white-space:nowrap; border:1px solid var(--line);background:var(--field);color:var(--ink-2)} .kf.bad{border-color:var(--bad-bg);background:var(--bad-bg);color:var(--bad);font-weight:600} .kf.warn{border-color:var(--warn-bg);background:var(--warn-bg);color:var(--warn);font-weight:600} .kb{font-size:11px;line-height:1.6;color:var(--ink-2);background:var(--field); border-left:2px solid var(--line);padding:4px 7px;border-radius:0 2px 2px 0;margin-bottom:7px} .kb b{color:var(--bad)} .kfoot{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .kno{font-size:11px;color:var(--bad);border:1px dashed var(--bad-bg);border-radius:2px;padding:1px 6px} .kstage{font-size:10.5px;color:var(--acc);margin-left:auto;white-space:nowrap} /* ---------- 导出命名 ---------- */ .nmrow{border:1px solid var(--line);border-radius:3px;padding:12px 14px;margin-bottom:10px;background:var(--field)} .nmh{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px} .nmtpl{width:100%;font-family:"SF Mono",Consolas,monospace;font-size:12.5px;padding:7px 9px; border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--ink)} .nmtpl:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)} .nmprev{font-size:12px;color:var(--ink-2);margin-top:7px} .nmprev code{font-family:"SF Mono",Consolas,monospace;background:var(--surface);border:1px solid var(--line); padding:2px 7px;border-radius:2px;color:var(--ink)} .nmvars{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px} .nmv{font-family:"SF Mono",Consolas,monospace;font-size:10.5px;padding:3px 7px;cursor:pointer; border:1px solid var(--line);border-radius:2px;background:var(--surface);color:var(--acc)} .nmv:hover{border-color:var(--acc);background:var(--acc-bg)} .nmv i{font-style:normal;color:var(--ink-3);margin-left:5px;font-family:inherit} label.nmnum{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-2)} label.nmnum input{font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:3px;background:var(--surface)} /* ---------- 指标看板 ---------- */ table.kpi th{font-size:10.5px;padding:5px 6px;text-align:center;white-space:nowrap} /* 子表头（第二行）跟数值一起右对齐——居中的列头压右对齐的数字，整表看着错位 */ table.kpi thead tr:last-child th{text-align:right} table.kpi thead th:first-child{text-align:left} table.kpi tr.sub th{font-weight:400;color:var(--ink-3);border-top:1px solid var(--line)} table.kpi td{padding:7px 6px} table.kpi td.n{text-align:right;font-family:"SF Mono",Consolas,monospace;font-size:12px; font-variant-numeric:tabular-nums} table.kpi td.n.bad{color:var(--bad);font-weight:600} table.kpi td.n.dim{color:var(--ink-3)} table.kpi td.n i{font-style:normal;font-size:10px;margin-left:3px} ul.gaps{margin:0;padding-left:18px;font-size:13px;line-height:1.9;color:var(--ink-2)} ul.gaps li.bad{color:var(--bad)} ul.gaps b{color:var(--ink)} /* ---------- 自绘图标 ---------- */ .ic{flex:none;vertical-align:-.18em} #nav a{display:flex;align-items:center;gap:9px} #nav a .ic{opacity:.72;transition:opacity .12s} #nav a:hover .ic,#nav a.on .ic{opacity:1} #nav a .lb{flex:1;min-width:0} .bell{display:inline-flex;align-items:center;justify-content:center;position:relative} .bell .ic{opacity:.8} .bell:hover .ic{opacity:1} .kgrid .kcard .ic{color:var(--acc);margin-bottom:2px} .kico{display:inline-flex;vertical-align:-.2em;color:var(--acc);margin-right:3px} /* 展开/收起的小三角，自绘不用字符 */ i.caret{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle; border-left:3.5px solid transparent;border-right:3.5px solid transparent; border-top:4.5px solid currentColor;transition:transform .12s} i.caret.up{transform:rotate(180deg)} /* ---------- 公告群发 ---------- */ .tone-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0} .pv{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start} @media (max-width:860px){.pv{grid-template-columns:1fr}} .pv-h{font-size:11px;letter-spacing:.14em;color:var(--ink-3);font-weight:600;margin-bottom:8px} .pv-h i{font-style:normal;font-family:"SF Mono",Consolas,monospace;color:var(--acc);margin-left:5px} .tgm{background:#CFD9E3;border:1px solid var(--line);border-radius:5px;padding:12px 10px;width:324px} .tgm.big{width:auto} .tgm-b{background:#fff;border-radius:8px;max-width:300px;box-shadow:0 1px 1px rgba(16,35,47,.16);padding:6px 9px} .tgm-b.media{padding:3px 3px 6px} .tgm-b img{display:block;width:100%;border-radius:6px} .tgm-txt{font-family:"Open Sans","PingFang SC",sans-serif;font-size:13px;line-height:1.45;white-space:pre-wrap;color:#000} /* Telegram 的引用块：左侧竖线 + 竖线颜色 10~12% 的淡色圆角底 + 引文本身与正文同色同字号。 竖线颜色是「发送者的 Telegram 颜色索引」，红橙紫绿青蓝粉都可能，还随明暗主题变—— 这里用中性的强调色示意，不代表实际会是哪个颜色。 */ .tgm-txt blockquote{margin:4px 0;padding:4px 8px 4px 9px;border-left:3px solid var(--acc); background:color-mix(in srgb, var(--acc) 11%, transparent); border-radius:0 4px 4px 0;color:inherit;font-size:inherit} .tgm-cap{font-family:"Open Sans","PingFang SC",sans-serif;font-size:13px;line-height:1.45;padding:5px 7px 0;color:#000} .pv-big{max-width:100%;border:1px solid var(--line);border-radius:4px;display:block} .reh{font-size:13px} .reh-sum{font-size:14px;padding:10px 12px;background:var(--field);border:1px solid var(--line); border-radius:3px;margin-bottom:8px} .reh-sum b{color:var(--ink);font-size:16px} .reh-list{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:3px;margin-top:8px} .reh-i{display:flex;align-items:center;gap:7px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:12.5px} .reh-i:last-child{border-bottom:0} .reh-bad{margin-top:12px;border:1px solid var(--bad-bg);border-radius:3px;background:var(--bad-bg);padding:8px 10px} .reh-bad>b{font-size:12.5px;color:var(--bad);display:block;margin-bottom:5px} .reh-bad .reh-i{border-bottom-color:#EFD5CF;padding:4px 0} .codebox{font-family:"SF Mono",Consolas,monospace;font-size:20px;letter-spacing:.08em;text-align:center; padding:18px;background:var(--field);border:2px dashed var(--acc-line);border-radius:4px; color:var(--acc);font-weight:600;user-select:all} /* ============================================================ 商户运营三件套 三个页面刻意长得不一样：名单 / 时间线 / 台账。 套同一个表格的话，三件事就会被当成同一件事看。 ============================================================ */ /* ---- 健康分：分段计数 ---- */ .hb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} .hb{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px; border-left:4px solid var(--pend);position:relative} .hb-n{font-family:var(--serif);font-size:30px;line-height:1;letter-spacing:-.02em} .hb-k{font-size:12.5px;font-weight:600;margin-top:7px;letter-spacing:.06em} .hb-s{font-size:11px;color:var(--ink-3);margin-top:2px;font-family:var(--mono)} .hb.g{border-left-color:var(--ok)} .hb.g .hb-n{color:var(--ok)} .hb.o{border-left-color:var(--acc)} .hb.o .hb-n{color:var(--acc)} .hb.w{border-left-color:var(--warn)} .hb.w .hb-n{color:var(--warn)} .hb.r{border-left-color:var(--bad)} .hb.r .hb-n{color:var(--bad)} .hb.zero{opacity:.5}.hb.zero .hb-n{color:var(--ink-3)} /* ---- 健康分：名单。一行是一个结论，不是一行数据 ---- */ .hl{display:flex;flex-direction:column} .hrow{border-bottom:1px solid var(--line)} .hrow:last-child{border-bottom:none} /* 商户名是这一行的主语，不能被截断成「诚诚…」。 给它固定的最小宽度并让结论列去吸收剩余空间——结论本来就是可以省略号的。 */ .hr-h{display:grid;grid-template-columns:76px minmax(186px,auto) repeat(4,minmax(58px,64px)) minmax(180px,1fr) 72px; gap:14px;align-items:center;padding:13px 16px;cursor:pointer} .hr-h:hover{background:var(--ui-soft)} .hrow.open .hr-h{background:var(--ui-soft)} /* 分数：数字 + 一条底衬。底衬是给「一眼扫过去看谁矮」用的 */ .hr-score{position:relative;height:32px;display:flex;align-items:center} .hr-score b{font-family:var(--serif);font-size:24px;line-height:1;letter-spacing:-.02em; width:100%;text-align:left} .hr-score i{position:absolute;left:0;bottom:0;height:3px;border-radius:2px;background:var(--pend)} .hrow.g .hr-score b{color:var(--ok)} .hrow.g .hr-score i{background:var(--ok)} .hrow.o .hr-score b{color:var(--acc)}.hrow.o .hr-score i{background:var(--acc)} .hrow.w .hr-score b{color:var(--warn)} .hrow.w .hr-score i{background:var(--warn)} .hrow.r .hr-score b{color:var(--bad)} .hrow.r .hr-score i{background:var(--bad)} .hr-m{display:flex;align-items:center;gap:8px;min-width:0} .hr-m b{font-weight:600;white-space:nowrap} .hr-f{display:flex;flex-direction:column;gap:2px;min-width:0} .hr-f .k{font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;white-space:nowrap} .hr-f .v{font-family:var(--mono);font-size:13px;white-space:nowrap} .hr-f .v.bad{color:var(--bad)}.hr-f .v.good{color:var(--ok)} .hr-why{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hr-why b{color:var(--ink);font-weight:600} /* 展开：扣分明细。做成账单的样子——起评、逐项扣、得分 */ .hr-b{padding:2px 16px 16px 98px;background:var(--ui-soft)} .hr-cuts{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden} .cut{display:grid;grid-template-columns:110px 58px 1fr;gap:12px;padding:9px 14px;font-size:12.5px; border-bottom:1px solid var(--line)} .cut:last-child{border-bottom:none} .cut .cn{font-weight:600} .cut .cv{font-family:var(--mono);text-align:right;color:var(--bad)} .cut .cw{color:var(--ink-3)} .cut.base{background:var(--ui-soft)}.cut.base .cv{color:var(--ink-3)} .cut.final{background:var(--ui-soft);border-top:2px solid var(--ink)} .cut.final .cv{color:var(--ink);font-weight:700} .hr-more{display:flex;gap:20px;align-items:center;margin-top:10px;font-size:12px;color:var(--ink-3)} .hr-more b{color:var(--ink);font-family:var(--mono)} .hr-more b.bad{color:var(--bad)} .hrule p{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.85} .hrule table{margin-bottom:12px} .hrule .dim{font-size:12px;line-height:1.8} /* ---- 通道切换：决策库 ---- */ .pbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:12px;padding:14px 16px} .pb{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--field)} .pb-h{display:flex;align-items:center;gap:8px;margin-bottom:10px} .pb-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line)} .pb-bar i{display:block} .pb-bar i.g{background:var(--ok)}.pb-bar i.o{background:var(--pend)}.pb-bar i.r{background:var(--bad)} .pb-l{display:flex;gap:12px;margin-top:6px;font-size:11px;font-family:var(--mono)} .pb-l .g{color:var(--ok)}.pb-l .o{color:var(--ink-3)}.pb-l .r{color:var(--bad)} .pb-a{margin-top:9px;font-size:12.5px;color:var(--ink-2);line-height:1.7; border-top:1px dashed var(--line);padding-top:9px} /* 通道名做成小胶囊，箭头是自己画的，不用字符 */ .ch{font-family:var(--mono);font-size:12.5px;background:var(--ui-soft);border:none; border-radius:99px;padding:2px 10px;white-space:nowrap; box-shadow:inset 0 0 0 1px var(--line-2)} .ch.to{border-color:var(--acc-line);background:var(--acc-bg);color:var(--acc)} .arw{width:20px;height:8px;flex:none;position:relative} .arw::before{content:"";position:absolute;left:0;top:3.5px;width:16px;height:1.4px;background:var(--ink-3)} .arw::after{content:"";position:absolute;right:1px;top:1px;width:6px;height:6px; border-top:1.4px solid var(--ink-3);border-right:1.4px solid var(--ink-3);transform:rotate(45deg)} /* ---- 通道切换：时间线 ---- */ .swl{padding:4px 0} .sw{display:grid;grid-template-columns:104px 1fr;gap:0;position:relative} .sw-t{padding:18px 12px 18px 16px;text-align:right;border-right:1px solid var(--line);position:relative} .sw-t b{display:block;font-family:var(--mono);font-size:12.5px} .sw-t span{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px} /* 时间线上的点，颜色跟判定走 */ .sw-t::after{content:"";position:absolute;right:-4.5px;top:22px;width:8px;height:8px;border-radius:50%; background:var(--pend);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)} .sw.g .sw-t::after{background:var(--ok)} .sw.o .sw-t::after{background:var(--acc)} .sw.r .sw-t::after{background:var(--bad)} .sw.pend .sw-t::after{background:var(--surface);box-shadow:0 0 0 1.5px var(--bad)} .sw-body{padding:16px 16px 18px 20px;border-bottom:1px solid var(--line)} .sw:last-child .sw-body{border-bottom:none} .sw-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .sw-why{margin-top:10px;font-size:13.5px;line-height:1.8;color:var(--ink); border-left:3px solid var(--acc-line);padding-left:12px} .sw-link{margin-top:8px;font-size:12px;color:var(--ink-3)} .sw-link b{font-family:var(--mono);color:var(--c1)} /* 前后对照：两块并排，中间一个箭头。这是这个页面的主角 */ .sw-cmp{display:flex;align-items:stretch;gap:0;margin-top:14px;position:relative} .cmpc{flex:1;border:1px solid var(--line);border-radius:6px;padding:11px 14px;background:var(--field); max-width:280px} .cmpc.empty{display:flex;flex-direction:column;justify-content:center;gap:8px;align-items:flex-start} .cc-k{font-size:10.5px;letter-spacing:.12em;color:var(--ink-3);font-weight:600} .cc-r{font-family:var(--serif);font-size:26px;line-height:1.1;margin-top:4px;letter-spacing:-.02em} .cc-r.bad{color:var(--bad)} .cc-s{font-size:10.5px;color:var(--ink-3);margin-top:-2px} .cc-m{font-family:var(--mono);font-size:12px;margin-top:6px;color:var(--ink-2)} .cc-d{font-size:10.5px;color:var(--ink-3);margin-top:5px;line-height:1.5} .cc-e{font-size:12.5px;color:var(--ink-3)} .cmp-arw{width:34px;flex:none;position:relative} .cmp-arw::before{content:"";position:absolute;left:8px;top:50%;width:18px;height:1.4px;background:var(--line)} .cmp-arw::after{content:"";position:absolute;right:8px;top:calc(50% - 3px);width:7px;height:7px; border-top:1.4px solid var(--line);border-right:1.4px solid var(--line);transform:rotate(45deg)} .sw-delta{margin-left:16px;display:flex;flex-direction:column;justify-content:center;align-items:center; padding:0 16px;border-left:1px dashed var(--line)} .sw-delta b{font-family:var(--serif);font-size:28px;line-height:1;letter-spacing:-.02em} .sw-delta span{font-size:10.5px;color:var(--ink-3);margin-top:3px} .sw-delta.g b{color:var(--ok)}.sw-delta.o b{color:var(--ink-3)}.sw-delta.r b{color:var(--bad)} .sw-jd{margin-top:10px;font-size:12.5px;color:var(--ink-2);font-family:var(--mono)} .sw-note{margin-top:8px;font-size:12.5px;color:var(--ink-3);line-height:1.75; background:var(--ui-soft);border-radius:5px;padding:8px 12px} /* ---- 对账争议：先总账 ---- */ .dsum{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} /* 语义色沿和 .tile 一致走**内嵌左条**——描边式的顶边会沿着大圆角弯下来， 看起来像给卡加了半圈框。 */ .ds{position:relative;background:var(--surface);border:none;border-radius:var(--r-md); box-shadow:var(--card-sh);padding:15px 17px 15px 20px;overflow:hidden} .ds::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; border-radius:0 4px 4px 0;background:var(--pane-2)} .ds-k{font-size:10.5px;letter-spacing:.12em;color:var(--ink-3);font-weight:600} .ds-v{font-family:var(--serif);font-size:28px;line-height:1.15;margin-top:8px;letter-spacing:-.02em} .ds-s{font-size:11.5px;color:var(--ink-3);margin-top:4px} .ds.g::before{background:linear-gradient(180deg,var(--led-ok),var(--ok))} .ds.g .ds-v{color:var(--ok)} .ds.r::before{background:linear-gradient(180deg,var(--led-bad),var(--bad))} .ds.r .ds-v{color:var(--bad)} .ds.o::before{background:linear-gradient(180deg,var(--acc-lite),var(--acc))} .ds.o .ds-v{color:var(--acc)} /* 责任方条形：我方的两项加重，因为那才是能改的部分 */ .fbars{padding:14px 16px;display:flex;flex-direction:column;gap:11px} .fb{display:grid;grid-template-columns:76px 1fr 108px 96px;gap:12px;align-items:center;font-size:12.5px} .fb-k{font-weight:600;white-space:nowrap} .fb-t{height:9px;background:var(--ui-hover);border-radius:5px;overflow:hidden} .fb-t i{display:block;height:100%;background:#CDD3DA;border-radius:5px;position:relative} /* 里面这一段是「真赔出去的」。浅色是争议了多少，深色是最后自己吃下多少。 */ .fb-t i b{position:absolute;left:0;top:0;height:100%;background:var(--bad);border-radius:5px} .fb.own .fb-t i{background:#F1C9BE} .fb.own .fb-k{color:var(--bad)} .fb-v{font-family:var(--mono);text-align:right} .fb-v span{display:block;font-size:10.5px;color:var(--ink-3)} .fb-l{font-size:11.5px;color:var(--ink-3);text-align:right} .fb-l.bad{color:var(--bad);font-weight:600} .dtb td.dtl{font-size:12px;color:var(--ink-2);line-height:1.6; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dtb .sub{font-size:10.5px;color:var(--ink-3);margin-top:2px;font-family:var(--sans)} .dmeta{font-size:12px;color:var(--ink-3);margin-bottom:14px;padding-bottom:10px; border-bottom:1px solid var(--line)} .req{font-size:10.5px;color:var(--bad);font-weight:600;letter-spacing:.05em} .tip{font-size:12px;color:var(--ink-3);line-height:1.7;background:var(--ui-soft); border-radius:5px;padding:9px 12px;margin-top:12px} .chk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);cursor:pointer;font-weight:400} .chk input{margin:0;accent-color:var(--acc)} /* 窄屏按重要性砍列，不是等比缩小——挤成一团比少几列更糟。 nth-of-type 在这里没用：这一行的孩子全是 div，它会把分数格和商户格一起数进去。 */ @media (max-width:1180px){ .hr-h{grid-template-columns:70px minmax(120px,1fr) repeat(3,minmax(58px,1fr)) 64px} .hr-h > .hr-f:nth-child(n+5){display:none} /* 砍掉「成功率」「敞口」 */ .hr-why{display:none} .hr-b{padding-left:16px} .hb-row,.dsum{grid-template-columns:repeat(2,1fr)} .sw-cmp{flex-wrap:wrap;gap:10px}.cmp-arw{display:none} .sw-delta{margin-left:0;border-left:none;border-top:1px dashed var(--line);padding:8px 0} .cmpc,.cmpc.muted{max-width:none;min-width:150px} } /* 卡片标题右侧那句说明，窄屏挤在标题旁边会把标题压成两行。 让它换到下一行占满宽度，标题就还是一行。 */ @media (max-width:1000px){ .card > h3{flex-wrap:wrap} .card > h3 .hint2{flex-basis:100%;padding:8px 0 0;border-top:none;order:9} .card > h3 .spacer{display:none} } @media (max-width:820px){ .hr-h{grid-template-columns:60px 1fr minmax(56px,auto) 60px;gap:10px;padding:11px 12px} .hr-h > .hr-f:nth-child(n+4){display:none} /* 只剩「当日量」 */ .cut{grid-template-columns:92px 46px 1fr;gap:8px} .fb{grid-template-columns:64px 1fr 90px;gap:8px} .fb-l{display:none} .sw{grid-template-columns:84px 1fr} .sw-t{padding:14px 8px 14px 10px} .sw-body{padding:14px 12px 16px 14px} .dtb col{width:auto!important} .dtb td.dtl,.dtb th:nth-child(7){display:none} } /* ---- 健康分趋势弹窗 ---- */ .trh{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .trh b{font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-.02em} .trh b.g{color:var(--ok)}.trh b.o{color:var(--acc)}.trh b.w{color:var(--warn)}.trh b.r{color:var(--bad)} .trh span{font-size:12.5px;color:var(--ink-3)} .trh .trd{margin-left:auto;font-family:var(--mono);font-size:12px} .trh .trd.good{color:var(--ok)}.trh .trd.bad{color:var(--bad)} .trs{width:100%;height:150px;display:block;background:var(--field);border:1px solid var(--line); border-radius:6px} .trx{display:flex;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin:5px 2px 14px} .trx .spacer{flex:1} .cmpc.muted{background:transparent;border-style:dashed;max-width:190px} .cmpc.muted .cc-r{font-size:20px;color:var(--ink-3)} .cmpc.muted .cc-m,.cmpc.muted .cc-d{color:var(--ink-3)} /* 总览里的商户风险条：健康分分段 + 未了结争议，点进去看细节 */ .mrisk{border-top:1px solid var(--line);margin-top:2px;padding:11px 14px 2px} .mr-b{display:flex;gap:8px;flex-wrap:wrap} .mr-x{display:inline-flex;align-items:baseline;gap:5px;font-size:11.5px;color:var(--ink-3); background:var(--ui-soft);border:1px solid var(--line);border-radius:5px;padding:3px 9px} .mr-x b{font-family:var(--mono);font-size:14px;color:var(--ink)} .mr-x.g b{color:var(--ok)}.mr-x.o b{color:var(--acc)} .mr-x.w b{color:var(--warn)}.mr-x.r b{color:var(--bad)} .mr-x.zero{opacity:.45}.mr-x.zero b{color:var(--ink-3)} .mr-w{font-size:12px;color:var(--ink-2);line-height:1.8;margin-top:8px} .mr-w b{font-family:var(--mono);color:var(--ink)} .mr-w b.bad{color:var(--bad)} /* 预演里的平台横幅：发之前最后一次把"用谁的号、发给哪个平台"摆到眼前 */ .reh-plat{background:var(--acc-bg);border:1px solid var(--acc-line);border-radius:5px; padding:8px 12px;font-size:12.5px;color:var(--warn);line-height:1.7;margin-bottom:10px} .reh-plat b{color:var(--ink)} /* 阈值与限速：每一项都带一句「为什么有这个数」。 配置项最怕的是只有名字没有解释——人不敢改，等于没做。 */ .cfrows{padding:4px 0} .cfrow{padding:13px 16px;border-bottom:1px solid var(--line)} .cfrow:last-child{border-bottom:none} .cfk{display:flex;align-items:center;gap:8px;font-size:13px} .cfkey{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);background:var(--ui-soft); border-radius:3px;padding:1px 6px} .cfv{display:flex;align-items:center;gap:10px;margin-top:7px} .cfv input{width:120px;font-family:var(--mono);font-size:13px;padding:6px 9px; border:1px solid var(--line);border-radius:5px;background:var(--field)} .cfv input:focus{border-color:var(--acc);outline:none} .cfrange{font-family:var(--mono);font-size:11px;color:var(--ink-3)} .cfw{font-size:12px;color:var(--ink-2);line-height:1.75;margin-top:7px; border-left:2px solid var(--line);padding-left:10px} /* 改稿记录：存的是改之前的原文，不是改之后的。 出争议时唯一能拿出来的东西，所以要显示得像证据，不像动态流水。 */ .vers{padding:4px 0} .ver{padding:12px 16px;border-bottom:1px solid var(--line)} .ver:last-child{border-bottom:none} .ver-h{display:flex;align-items:center;gap:9px;font-size:12.5px} .ver-why{font-size:12.5px;color:var(--ink-2);margin-top:7px; border-left:2px solid var(--acc-line);padding-left:10px;line-height:1.7} .ver-snap{margin-top:9px;background:var(--ui-soft);border:1px solid var(--line);border-radius:5px; padding:10px 13px;font-size:12.5px;line-height:1.8} .ver-snap b{display:block;margin-bottom:4px} /* ============================================================ 健康分 v2：疑似问题卡 版面主张——先说今天该干什么，再说分数怎么来的。 一条问题必须能一路点到表名和主键：说不清来历的数字不该出现在这一页。 ============================================================ */ .card-todo > h3{background:var(--acc-bg);border-bottom-color:var(--acc-line)} .fds{display:flex;flex-direction:column} .fds.inner{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface)} .fd{border-bottom:1px solid var(--line);padding:13px 16px;cursor:pointer;position:relative} .fd:last-child{border-bottom:none} .fd:hover{background:var(--ui-soft)} .fd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pend)} .fd.o::before{background:var(--acc)} .fd.r::before{background:var(--bad)} .fd.done{opacity:.55} .fd-h{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);margin-bottom:6px} .fd-code{font-size:10px;letter-spacing:.06em;background:var(--ui-soft);border:1px solid var(--line); border-radius:3px;padding:1px 6px;color:var(--ink-3)} .fd-ex{font-family:var(--mono)} .fd-conf{font-family:var(--mono);cursor:help} .fd-t{font-size:13.5px;line-height:1.75;color:var(--ink)} .fd-a{margin-top:8px;font-size:12.5px;line-height:1.7;color:var(--ink-2); background:var(--ui-soft);border-radius:5px;padding:7px 11px} .fd-a b{display:inline-block;font-size:10.5px;letter-spacing:.1em;color:var(--acc);margin-right:8px} /* 展开区：默认收起，点整条展开。默认摊开的话，六条问题就没法扫了。 */ .fd-b{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)} .fd.open .fd-b{display:block} .fd-s,.fd-e{margin-bottom:9px} .fd-s > b,.fd-e > b{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:5px} .sp{display:flex;gap:8px;font-size:12.5px;line-height:1.75;margin-bottom:5px} .sp .n{flex:none;width:16px;height:16px;border-radius:50%;background:var(--ink-3);color:#fff; font-size:10px;display:flex;align-items:center;justify-content:center;margin-top:4px} .sp i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3)} .ev{font-size:12px;line-height:1.7;color:var(--ink-2);padding:5px 0;border-bottom:1px dotted var(--line)} .ev:last-child{border-bottom:none} .ev .src{display:inline-block;font-size:10px;color:var(--ink-3);background:var(--ui-soft); border-radius:3px;padding:1px 5px;margin-left:6px} .fd-w{font-size:11px;color:var(--ink-3);line-height:1.7} .fd-more{padding:10px 16px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line)} .warnbar.plat{background:var(--acc-bg);border-color:var(--acc-line);color:var(--c1)} .hr-gaps{margin-top:12px;background:var(--surface);border:1px dashed var(--line); border-radius:6px;padding:11px 14px} .hr-gaps > b{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:6px} .gp{font-size:12.5px;line-height:1.75;color:var(--ink-2);margin-bottom:5px} .gp i{display:block;font-style:normal;font-size:11.5px;color:var(--acc)} .hr-gaps .dim{font-size:11px;margin-top:6px} .hrule tr.off{opacity:.5} .ready{font-size:11.5px;color:var(--acc);margin-top:4px;line-height:1.6} .fd-div{padding:9px 16px;font-size:11.5px;color:var(--ink-3);background:var(--ui-soft); border-top:1px solid var(--line);border-bottom:1px solid var(--line);letter-spacing:.02em} /* 健康分规则配置 */ .hrs{padding:4px 0} .hrx{padding:14px 16px;border-bottom:1px solid var(--line)} .hrx:last-child{border-bottom:none} .hrx.off{background:var(--ui-soft);opacity:.75} .hrx.notready{background:var(--warn-bg)} .hrx-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .hrx-h b{font-size:13.5px} .hrx-n{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3)} .hrx-n input{width:62px;font-family:var(--mono);font-size:12.5px;padding:5px 8px; border:1px solid var(--line);border-radius:5px;background:var(--field)} .hrx-note{font-size:12.5px;color:var(--ink-2);line-height:1.75;margin-top:8px; border-left:2px solid var(--line);padding-left:10px} .hrx-ready{font-size:12px;color:var(--warn);line-height:1.7;margin-top:7px} .hrx-ps{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 14px;margin-top:11px} .hrx-p{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3)} .hrx-p span{flex:1;min-width:0} .hrx-p input{width:74px;font-family:var(--mono);font-size:12px;padding:4px 7px; border:1px solid var(--line);border-radius:4px;background:var(--field);text-align:right} .hrx-p input:focus{border-color:var(--acc);outline:none} .hrs-foot{padding:14px 16px;border-top:1px solid var(--line);background:var(--ui-soft)} .hprev{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 14px} .hprev > b{display:block;font-size:12.5px;margin-bottom:8px} .hprev .dim{font-size:11.5px;margin-top:6px} /* 表单分组。字段一多就必须分段—— 平铺十几个字段时，人看不出「哪些是一起的」，也不知道从哪开始填。 */ .fgrp{border:1px solid var(--line);border-radius:7px;padding:14px 16px 4px;margin-bottom:14px; background:var(--field)} .fgrp-h{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--ink-3);margin-bottom:12px} .fgrp label{margin-bottom:12px} .fgrp > .two:last-child label:last-child, .fgrp > label:last-child{margin-bottom:10px} /* 「会发给几个群」实时回显。发送是不可逆的动作， 在建的时候就把目标摆出来，比发之前才第一次看到强得多。 */ .aud{background:var(--surface);border:1px solid var(--line);border-radius:5px; padding:9px 12px;margin-bottom:12px;font-size:12.5px;line-height:1.7} .aud b{color:var(--ink)} .aud .dim{margin-left:6px} .aud-bad{color:var(--bad);margin-left:8px;cursor:help} .aud-l{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.6} /* 长解释收进折叠里。它是有用的，但不该占掉半个弹窗。 */ .fnote{font-size:12px;color:var(--ink-2);margin:-4px 0 12px} .fnote > summary{cursor:pointer;color:var(--ink-3);font-size:11.5px;list-style:none; display:inline-flex;align-items:center;gap:5px;padding:3px 0} .fnote > summary::-webkit-details-marker{display:none} .fnote > summary::before{content:"";width:5px;height:5px;border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;transform:rotate(-45deg);transition:transform .15s} .fnote[open] > summary::before{transform:rotate(45deg)} .fnote > summary:hover{color:var(--acc)} .fnote p{margin:6px 0 0;line-height:1.8} /* 详情页顶部的「发给谁」横条：一眼看清这条公告的去向。 以前要点进预演才知道，而预演是发送流程的一部分—— 只是想确认一下去向，却得走进一个不可逆动作的入口。 */ .aud-bar{display:flex;align-items:center;gap:9px;background:var(--surface); border:1px solid var(--line);border-radius:6px;padding:9px 14px;margin-bottom:14px;font-size:12.5px} /* 表格里商户名旁边的内部代号：小、灰、次要。 人认中文名，但对账、导出、跟技术沟通时要的是代号，两个都得在。 */ .mcode{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3); font-family:var(--mono);margin-top:1px} /* ============================================================ 发送对象选择器 两条线的选法完全不同，所以先用一个大的二选一分开， 而不是塞成一个下拉里的三个选项——那样人看不出「商户群」和 「ZipPay 用户群」是两种性质的东西。 ============================================================ */ /* 受众三选一：一行放平。选中的那张微微抬起 + 紫描边， 没选的贴在纸上——哪张「活着」一眼可辨。 */ .segbig{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px} .segbig button{display:flex;flex-direction:column;align-items:flex-start;gap:3px; padding:12px 14px;border:1.5px solid transparent;border-radius:var(--r-md);background:var(--ui-soft); cursor:pointer;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s} .segbig button:hover{background:var(--acc-bg)} .segbig button.on{border-color:var(--acc);background:var(--acc-bg);transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(124,58,237,.35)} .segbig button svg{color:var(--ink-3);margin-bottom:2px} .segbig button.on svg{color:var(--acc)} .segbig button span{font-size:13.5px;font-weight:600;color:var(--ink)} .segbig button i{font-style:normal;font-size:11.5px;color:var(--ink-3);line-height:1.5} .pk-h{font-size:11.5px;line-height:1.7;margin-bottom:10px} .pk-h2{margin-bottom:4px} .pk-load,.pk-empty{padding:16px;text-align:center;font-size:12.5px;color:var(--ink-3); background:var(--surface);border:1px dashed var(--line);border-radius:6px;line-height:1.8} .pk-empty.bad{color:var(--bad);border-color:#F1C9BE} /* 分组：点一下把这组能发的都加进来，再点一下去掉。 做成「只选这一组」的话，想发给两个组就得反复切换。 */ .pk-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px} .pk-tl{font-size:10.5px;letter-spacing:.12em;color:var(--ink-3);font-weight:600;margin-right:2px} .pkt{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 10px; border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;color:var(--ink-2)} .pkt:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-bg)} .pkt i{font-style:normal;font-size:10.5px;color:var(--ink-3);font-family:var(--mono)} .pk-list{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:6px; background:var(--surface)} .pk-i{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line); font-size:12.5px;cursor:pointer;margin-bottom:0;letter-spacing:0;font-weight:400;color:var(--ink)} .pk-i:last-child{border-bottom:none} .pk-i:hover{background:var(--ui-soft)} .pk-i.off{opacity:.5;cursor:not-allowed;background:var(--ui-soft)} .pk-i > input{width:auto;margin:0;flex:none;accent-color:var(--acc)} .pk-t{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%} .pk-g{font-size:10.5px;color:var(--ink-3);background:var(--ui-soft);border:1px solid var(--line); border-radius:3px;padding:0 5px;flex:none} .pk-n{font-family:var(--mono);font-size:11px;color:var(--ink-3);flex:none} .pk-why{font-size:11px;color:var(--bad);flex:none;max-width:46%;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .pk-sum{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:9px 2px 2px} .pk-sum b{font-family:var(--mono);font-size:15px;color:var(--acc)} /* 发送前确认：把「发给谁、几个群、用哪个号」摆在最上面。 这是不可逆动作前的最后一屏，不该让人再去别处找这些信息。 */ .rehead{display:flex;gap:12px;background:var(--acc-bg);border:1px solid var(--acc-line); border-radius:6px;padding:11px 14px;margin-bottom:12px} .rh-k{font-size:10.5px;letter-spacing:.12em;color:var(--acc);font-weight:700;flex:none;padding-top:2px} .rh-v{font-size:13px;line-height:1.7;color:var(--ink)} /* ============================================================ 基础工具类 ------------------------------------------------------------ 这一整块是补的。之前 .dim / .hint / .mono / .bad / .good / .go 这些类在 JS 里到处写，CSS 里却只有「带祖先限定」的版本 （.acv .dim、table.grid .mono、.hr-f .v.bad …）， 裸着用一律不生效——次要说明按 14px 正文黑字渲染， 亏损金额和涨跌幅全是灰的，颜色编码等于没做。 和裸