:root{ --paper:#F4EFE4; --paper2:#EDE6D7; --card:#FFFDF8; --ink:#2B2620; --ink2:#59513F; --ink3:#8B8272; --ink4:#A89F8E; --line:#E7E0D2; --line2:#DCD3C1; --zhu:#B03A2E; --zhu-deep:#8E2D24; --zhu-t:#F7E7E3; --dai:#3E736C; --dai-deep:#2C504C; --dai-t:#E4EFEC; --gold:#B57F22; --gold-deep:#8A5D12; --gold-t:#F6EDD8; --side:#211D18; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; --kai:"LXGW WenKai","Kaiti SC","STKaiti",KaiTi,"Songti SC",serif; /* --ui 之前被三处引用却没定义（密钥输入框、角标数字、表单行）， 声明失效后回落到正文字体，等于白写。补上：等宽栈，读密钥与数字都更齐。 */ --ui:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace; --sh:0 1px 2px rgba(43,33,24,.04),0 6px 18px rgba(43,33,24,.05); --r:12px; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.65; -webkit-font-smoothing:antialiased} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} .num{font-variant-numeric:tabular-nums} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:rgba(43,38,32,.16);border-radius:6px;border:3px solid transparent;background-clip:content-box} /* 登录 */ .login{position:fixed;inset:0;z-index:200;display:flex;padding:22px 16px;overflow:auto; background:radial-gradient(1200px 600px at 20% 0%,#2B261F,#191510 70%)} .login.hide{display:none} .lg-card{width:414px;margin:auto;background:var(--card);border-radius:16px;padding:26px 30px 22px;box-shadow:0 24px 60px rgba(0,0,0,.4)} .lg-head{display:flex;align-items:center;gap:12px} .lg-seal{width:46px;height:46px;border-radius:11px;background:var(--zhu);color:#fff;font-family:var(--kai); font-size:26px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 18px rgba(176,58,46,.3)} .lg-card h1{font-family:var(--kai);font-size:19px;letter-spacing:.06em} .lg-card .lg-sub{font-size:9.5px;letter-spacing:.18em;color:var(--ink4);margin-top:4px} .lg-field{margin-top:15px} /* 验证码默认不占用版面：只在「密码输错过」之后才出现，出现时带一句原因 */ .lg-field.off{display:none} .lg-cap-why{font-weight:400;color:var(--ink4);font-size:10px;letter-spacing:0;margin-left:4px} .lg-field label{display:block;font-size:11px;color:var(--ink2);font-weight:600;letter-spacing:.04em} .lg-input{margin-top:7px;display:flex;align-items:center;gap:8px;height:42px;padding:0 12px; border:1px solid var(--line2);border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s} .lg-input:focus-within{border-color:var(--dai);box-shadow:0 0 0 3px rgba(62,115,108,.12)} .lg-input input{flex:1;border:none;outline:none;background:none;font-size:14px;letter-spacing:.1em;min-width:0} .lg-input input::placeholder{letter-spacing:0;color:var(--ink4)} .lg-eye{width:24px;height:24px;flex:none;border:none;background:none;display:flex;align-items:center; justify-content:center;color:var(--ink4);border-radius:6px} .lg-eye:hover{color:var(--ink2);background:var(--paper2)} .lg-eye.on{color:var(--dai)} .lg-row{display:flex;gap:8px;align-items:flex-start} .lg-row .lg-input{flex:1;min-width:0} .lg-cap{width:104px;height:42px;margin-top:7px;flex:none;padding:0;border:1px solid var(--line2);border-radius:10px; background:#F3EEE3;overflow:hidden;display:flex;align-items:center;justify-content:center} .lg-cap svg{display:block} .lg-refresh{width:30px;height:42px;margin-top:7px;flex:none;border:none;background:none;color:var(--ink3); font-size:15px;border-radius:8px;line-height:1} .lg-refresh:hover{background:var(--paper2);color:var(--ink)} .lg-remember{display:flex;align-items:center;gap:7px;margin-top:15px;font-size:11.5px;color:var(--ink2);user-select:none} .cb{width:14px;height:14px;border-radius:4px;border:1px solid var(--line2);background:#fff;flex:none;position:relative} .cb.on{background:var(--dai);border-color:var(--dai)} .cb.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px; border:1.6px solid #fff;border-top:none;border-left:none;transform:rotate(40deg)} .lg-btn{width:100%;height:44px;margin-top:16px;border-radius:10px;background:var(--zhu);color:#fff; font-size:13.5px;font-weight:600;box-shadow:0 6px 16px rgba(176,58,46,.26);transition:transform .14s} .lg-btn:active{transform:scale(.99)} .lg-btn:disabled{opacity:.5;box-shadow:none;cursor:not-allowed} .lg-fine{margin-top:11px;font-size:10px;color:var(--ink3);line-height:1.7} .lg-err{color:var(--zhu);font-size:11px;margin-top:7px;display:none} .lg-err.show{display:block} .lg-alert{display:none;margin-top:12px;padding:9px 11px;border-radius:9px;font-size:11px;line-height:1.7; background:rgba(176,58,46,.07);color:#8E2F26;border:1px solid rgba(176,58,46,.22)} .lg-alert.show{display:block} .lg-alert b{font-weight:600} .lg-tip{margin-top:13px;padding:8px 11px;border:1px dashed var(--line2);border-radius:9px; font-size:10.5px;color:var(--ink3);line-height:1.8;background:rgba(62,115,108,.045)} .lg-tip b{color:var(--ink2);font-weight:600;letter-spacing:.02em} .lg-tip code{font-family:ui-monospace,monospace;font-size:10px;color:var(--ink2)} .lg-sec{margin-top:11px;padding-top:10px;border-top:1px solid var(--line); display:grid;grid-template-columns:1fr 1fr;gap:4px 12px} .lg-sec div{display:flex;gap:5px;font-size:10px;color:var(--ink3);line-height:1.6} .lg-sec i{color:var(--dai);font-style:normal;flex:none} .sess{font-size:9.5px;color:var(--ink3);margin-left:6px;letter-spacing:.02em} /* 骨架 */ .app{display:grid;grid-template-columns:238px 1fr;height:100vh;overflow:hidden} .side{background:var(--side);color:#C9BFAC;display:flex;flex-direction:column;padding:18px 12px 12px} .brand{display:flex;align-items:center;gap:10px;padding:0 8px 16px} .brand .bs{width:34px;height:34px;border-radius:9px;background:var(--zhu);color:#fff;font-family:var(--kai); font-size:20px;display:flex;align-items:center;justify-content:center;flex:none} .brand b{display:block;color:#F6EFE0;font-size:13.5px;font-weight:600;letter-spacing:.06em} .brand em{display:block;font-style:normal;font-size:9.5px;color:#8A8070;letter-spacing:.1em;margin-top:1px} .nav{display:flex;flex-direction:column;gap:2px;margin-top:2px} .nav-t{font-size:9.5px;letter-spacing:.16em;color:#6F6656;padding:12px 10px 6px} .nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:12.5px; color:#B9AF9C;position:relative;transition:background .15s,color .15s} .nav a:hover{background:rgba(255,255,255,.04);color:#EDE5D5} .nav a.on{background:rgba(255,255,255,.07);color:#FFF9EC;font-weight:600} .nav a.on::before{content:"";position:absolute;left:0;top:9px;width:3px;height:14px;border-radius:2px;background:#D6A24A} .nav a i{font-style:normal;width:16px;text-align:center;opacity:.85;font-size:13px} .side-foot{margin-top:auto;padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.07);font-size:9.5px; color:#7A7161;line-height:1.9} .side-foot b{color:#A79C88;font-weight:500} .main{display:flex;flex-direction:column;min-width:0;overflow:hidden} .top{height:56px;flex:none;display:flex;align-items:center;gap:14px;padding:0 24px; border-bottom:1px solid var(--line);background:rgba(255,253,248,.9);backdrop-filter:blur(8px);z-index:10} .crumb{font-size:12px;color:var(--ink3)} .crumb b{color:var(--ink);font-weight:600} .top-right{margin-left:auto;display:flex;align-items:center;gap:10px} .demo-tag{font-size:9.5px;letter-spacing:.1em;color:var(--gold-deep);background:var(--gold-t); border:1px solid rgba(181,127,34,.28);border-radius:5px;padding:2px 7px;font-weight:600} .top .who{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink2)} .sess{color:var(--ink3)} .who i{width:24px;height:24px;border-radius:50%;background:var(--dai-t);color:var(--dai-deep); font-family:var(--kai);font-size:12px;display:flex;align-items:center;justify-content:center;font-style:normal} .body{flex:1;overflow-y:auto;padding:22px 24px 40px} .wrap{max-width:1240px;margin:0 auto} /* 通用组件 */ .page-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px} .page-head h2{font-family:var(--kai);font-size:21px;letter-spacing:.04em;line-height:1.2} .page-head p{font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.7} .page-head .act{margin-left:auto;display:flex;gap:8px;flex:none;align-items:center} .btn{height:32px;padding:0 13px;border-radius:8px;font-size:12px;font-weight:600;display:inline-flex; align-items:center;gap:6px;border:1px solid var(--line2);background:#fff;color:var(--ink2); transition:transform .14s,background .15s,border-color .15s;white-space:nowrap} .btn:hover{background:var(--paper)} .btn:active{transform:scale(.98)} .btn.primary{background:var(--zhu);border-color:var(--zhu);color:#fff;box-shadow:0 3px 10px rgba(176,58,46,.22)} .btn.dai{background:var(--dai);border-color:var(--dai);color:#fff} .btn.ghost{background:transparent} .btn.danger{color:var(--zhu-deep);border-color:rgba(176,58,46,.35);background:var(--zhu-t)} .btn.sm{height:27px;padding:0 10px;font-size:11px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)} .card-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)} .card-h h3{font-size:12.5px;font-weight:600;letter-spacing:.02em} .card-h .sub{font-size:10.5px;color:var(--ink3)} .card-h .r{margin-left:auto;display:flex;gap:6px;align-items:center} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px; box-shadow:var(--sh);position:relative;overflow:hidden} .kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px} .kpi.k1::after{background:var(--zhu)}.kpi.k2::after{background:var(--dai)} .kpi.k3::after{background:var(--gold)}.kpi.k4::after{background:var(--ink3)} .kpi .lab{font-size:10.5px;color:var(--ink3);letter-spacing:.04em} .kpi .val{font-size:27px;font-weight:700;line-height:1.2;margin-top:6px;letter-spacing:-.01em} .kpi .val small{font-size:12px;font-weight:500;color:var(--ink3);margin-left:3px} .kpi .foot{font-size:10px;color:var(--ink3);margin-top:5px} /* 主体门槛横幅：说清「为什么开不了」，而不只是灰掉开关 */ .subj-bar{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;padding:11px 13px; background:#FBF6E9;border:1px solid #E9DEC2;border-radius:10px} .sb-tag{flex:none;font-size:10px;font-weight:600;letter-spacing:.04em;color:#8A6A1F; background:#F2E6C6;border-radius:5px;padding:3px 7px;white-space:nowrap;margin-top:1px} .sb-txt{font-size:11.5px;line-height:1.75;color:var(--ink2)} .sb-txt b{font-weight:600;color:var(--ink)} /* 样例标注：数字是「开通后长什么样」，不是今天的账 */ .demo-mark{margin:-2px 0 12px;padding:7px 11px;border-left:2px solid #C9A227;background:rgba(246,237,216,.42); font-size:10.5px;line-height:1.7;color:var(--ink3);border-radius:0 6px 6px 0} /* —— v27：渠道 / 广告 / 派生字段 —— */ .kpi.k0::after{background:#9C2F24} .kpi.k0 .val{color:var(--zhu-deep)} .chstat{display:flex;gap:6px} .chs{font-size:10px;padding:2px 8px;border-radius:20px;background:var(--paper2);color:var(--ink3)} .chs.on{background:var(--dai-t);color:var(--dai-deep)} .chs.wait{background:var(--gold-t);color:var(--gold-deep)} .ch2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px 4px} .ch-col{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff} .ch-h{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;margin-bottom:6px} .cd{width:7px;height:7px;border-radius:50%;flex:none} .cd.wx{background:#3E736C} .ch-r{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--ink3);padding:3px 0} .ch-r b{font-size:13px;color:var(--ink);font-weight:600} .ch-r b.off{color:var(--ink4);font-weight:500;font-size:11px} .lamps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px} .lamp{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)} .lamp i{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center; justify-content:center;font-style:normal;font-size:11px;font-weight:700} .lamp.ok i{background:var(--dai-t);color:var(--dai-deep)} .lamp.warn i{background:var(--gold-t);color:var(--gold-deep)} .lamp .ln{font-size:10.5px;color:var(--ink3)} .lamp .lv{font-size:17px;font-weight:700;line-height:1.25;margin-top:2px} .lamp .ls{font-size:9.5px;color:var(--ink4);margin-top:2px} .lamp.off i{background:var(--paper2);color:var(--ink4)} .lamp.off .lv{color:var(--ink4)} .chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 10px} .chip{font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--line2); color:var(--ink3);background:#fff;transition:.14s} .chip.on{background:var(--zhu-t);border-color:#E0BCB6;color:var(--zhu-deep);font-weight:600} .ro{display:flex;align-items:center;gap:8px;height:34px;padding:0 11px;border-radius:8px; background:var(--paper2);font-size:12px;font-weight:600;color:var(--ink)} .ro span{font-size:9.5px;color:var(--ink4);font-weight:400} .ckline{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:11.5px;color:var(--ink2); line-height:1.6;cursor:pointer} .warnnum{color:var(--zhu-deep);font-weight:600} .alrow{cursor:pointer} .row.grp{padding:7px 16px 5px;background:var(--paper2);border-top:1px solid var(--line);letter-spacing:.06em} .tier.pend{border-color:#E0BCB6;background:#FDF8F4} .meter.gray i{background:var(--line2)} .grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:12px} .grid2.even{grid-template-columns:1fr 1fr} .rows{display:flex;flex-direction:column} .row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line);font-size:12px} .row:first-child{border-top:none} .row:hover{background:rgba(247,243,234,.6)} .row .grow{flex:1;min-width:0} .muted{color:var(--ink3)} .tiny{font-size:10px} .pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 7px; border-radius:5px;letter-spacing:.02em;white-space:nowrap} .pill.on{background:var(--dai-t);color:var(--dai-deep)} .pill.wait{background:var(--gold-t);color:var(--gold-deep)} .pill.bad{background:var(--zhu-t);color:var(--zhu-deep)} .pill.off{background:var(--paper2);color:var(--ink3)} .pill.gray{background:#F0ECE3;color:var(--ink3)} .pill.gold{background:var(--gold-t);color:var(--gold-deep)} .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75} /* 表格 */ table{width:100%;border-collapse:collapse} th{font-size:10px;letter-spacing:.08em;color:var(--ink3);font-weight:600;text-align:left; padding:9px 16px;border-bottom:1px solid var(--line);background:rgba(247,243,234,.5);white-space:nowrap} td{padding:10px 16px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:rgba(247,243,234,.55)} th.r,td.r{text-align:right} td .ch{font-family:var(--kai);font-size:17px;color:var(--zhu-deep)} td .ch.xu{color:var(--dai-deep)} td.pos{white-space:nowrap} td.eg{color:var(--ink2);font-family:var(--kai);font-size:12.5px;letter-spacing:.02em} .rowacts{display:flex;gap:2px;justify-content:flex-end} /* 行内操作：默认淡到几乎看不见，鼠标落在这一行才显形。 一屏几十个实心按钮会让人以为每个都能点，反而找不到真正要点的那个。 键盘 Tab 聚焦时也会显形（无障碍不能靠鼠标）。 */ .rowacts .iconbtn{opacity:.42;transition:opacity .15s,background .15s,color .15s,transform .1s} tr:hover .rowacts .iconbtn,tr:focus-within .rowacts .iconbtn{opacity:1} .rowacts .iconbtn:focus-visible{opacity:1} .iconbtn{width:27px;height:27px;border-radius:6px;color:var(--ink3);font-size:12px; display:inline-flex;align-items:center;justify-content:center;transition:background .14s,color .14s} .iconbtn:hover{background:var(--paper);color:var(--ink)} .iconbtn.danger:hover{background:var(--zhu-t);color:var(--zhu-deep)} /* 工具条 / tabs */ .toolbar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap} .seg{display:inline-flex;background:var(--paper2);border-radius:8px;padding:2px} .seg button{height:26px;padding:0 11px;border-radius:6px;font-size:11.5px;color:var(--ink2)} .seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(43,33,24,.1)} .search{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line2); border-radius:8px;background:#fff;min-width:200px} .search input{border:none;outline:none;background:none;font-size:12px;width:100%} .spacer{flex:1} .tabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--line)} .tabs button{height:38px;padding:0 12px;font-size:12px;color:var(--ink3);border-bottom:2px solid transparent; margin-bottom:-1px;transition:color .15s,border-color .15s} .tabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--zhu)} .note{display:flex;gap:8px;padding:11px 16px;background:rgba(246,237,216,.5);border-top:1px solid var(--line); font-size:11px;color:var(--ink2);line-height:1.75} .note .ic{color:var(--gold-deep);flex:none;font-weight:700} .note.dai{background:rgba(228,239,236,.55)} .note.dai .ic{color:var(--dai-deep)} .empty{padding:38px;text-align:center;color:var(--ink3);font-size:12px} /* 表单 */ .field{margin-bottom:14px} .field label{display:block;font-size:11px;color:var(--ink2);font-weight:600;margin-bottom:6px} .field label em{font-style:normal;color:var(--zhu);margin-left:2px} .inp,.sel,.ta{width:100%;border:1px solid var(--line2);border-radius:8px;background:#fff; font-size:12.5px;padding:8px 10px;outline:none;transition:border-color .15s,box-shadow .15s} .inp:focus,.sel:focus,.ta:focus{border-color:var(--dai);box-shadow:0 0 0 3px rgba(62,115,108,.10)} .inp.ro{background:var(--paper);border-style:dashed;color:var(--ink2);cursor:default} .ta{min-height:86px;resize:vertical;line-height:1.9;font-family:var(--kai);font-size:13px} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} .hint{font-size:10px;color:var(--ink3);margin-top:5px;line-height:1.7} .switch{position:relative;width:36px;height:20px;border-radius:20px;background:var(--line2); transition:background .18s;flex:none;display:inline-block} .switch.on{background:var(--dai)} .switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%; background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.2)} .switch.on::after{transform:translateX(16px)} .switch-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line); border-radius:9px;background:#fff} .switch-row .txt{font-size:12px} /* 趋势 / 进度 */ .chart{padding:14px 16px 6px} .bars{display:flex;align-items:flex-end;gap:10px;height:128px} .bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%} .bar .b{width:100%;max-width:34px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#4F8680,#3E736C); min-height:4px;position:relative} .bar:hover .b{background:linear-gradient(180deg,#5D968F,#356561)} .bar .b span{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--ink2); font-variant-numeric:tabular-nums;opacity:0;transition:opacity .15s;white-space:nowrap} .bar:hover .b span{opacity:1} .bar.today .b span{opacity:1;color:var(--zhu-deep);font-weight:600} .bar em{font-size:9.5px;font-style:normal;color:var(--ink3)} .bar.today .b{background:linear-gradient(180deg,#C6554A,#B03A2E)} .meter{display:block;width:100%;height:6px;border-radius:3px;background:var(--paper2);overflow:hidden} .meter i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#4F8680,#3E736C)} .meter.zhu i{background:linear-gradient(90deg,#C6554A,#B03A2E)} .meter.gold i{background:linear-gradient(90deg,#D6A24A,#B57F22)} .mline{display:flex;align-items:center;gap:10px;padding:9px 16px} .mline .n{width:88px;flex:none;font-size:11.5px;color:var(--ink2)} .mline .m{flex:1} .mline .v{width:84px;text-align:right;flex:none;font-size:11px;color:var(--ink3)} /* 弹层 */ .mask{position:fixed;inset:0;background:rgba(33,29,24,.42);backdrop-filter:blur(2px);z-index:100; display:none;align-items:center;justify-content:center;padding:28px} .mask.show{display:flex;animation:fade .16s} @keyframes fade{from{opacity:0}to{opacity:1}} .modal{width:620px;max-width:100%;max-height:calc(100vh - 56px);background:var(--card);border-radius:14px; box-shadow:0 30px 70px rgba(20,16,12,.34);display:flex;flex-direction:column;overflow:hidden; animation:pop .2s cubic-bezier(.16,1,.3,1)} .modal.wide{width:880px} @keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}} .m-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)} .m-h h3{font-size:13.5px;font-weight:600} .m-h .sub{font-size:10.5px;color:var(--ink3)} .m-h .x{margin-left:auto;width:26px;height:26px;border-radius:7px;color:var(--ink3);font-size:16px} .m-h .x:hover{background:var(--paper)} .m-body{padding:18px;overflow:auto} .m-foot{display:flex;gap:8px;align-items:center;padding:13px 18px;border-top:1px solid var(--line); background:rgba(247,243,234,.5)} .m-foot .spacer{flex:1} .del-card{padding:22px 20px 18px;text-align:center} .del-seal{width:44px;height:44px;border-radius:50%;background:var(--zhu-t);color:var(--zhu-deep); display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px} .del-card h3{font-size:14px;font-weight:600} .del-card p{font-size:11.5px;color:var(--ink3);line-height:1.9;margin-top:7px} /* 预览 */ .preview{display:grid;grid-template-columns:300px 1fr;gap:18px} .phone{width:300px;border-radius:18px;background:var(--paper);border:1px solid var(--line2);padding:13px; box-shadow:inset 0 0 0 6px #fff} .ph-card{background:var(--card);border-radius:12px;padding:18px 14px;text-align:center;box-shadow:var(--sh)} .ph-char{font-family:var(--kai);font-size:60px;line-height:1.1;color:var(--dai-deep)} .ph-py{font-size:11px;color:var(--ink3);margin-top:4px} .ph-tags{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap} .ph-tag{font-size:9.5px;padding:2px 8px;border-radius:20px;background:var(--dai-t);color:var(--dai-deep);font-weight:600} .ph-tag.zhu{background:var(--zhu-t);color:var(--zhu-deep)} .ph-sec{margin-top:12px;text-align:left} .ph-sec h4{font-size:10.5px;color:var(--ink3);font-weight:600;letter-spacing:.06em;margin-bottom:6px} .ph-sec p{font-size:11.5px;line-height:1.95;color:var(--ink2)} .ph-chain{display:flex;flex-direction:column;gap:7px} .ph-node{display:flex;gap:8px;font-size:11.5px;line-height:1.7} .ph-node i{width:6px;height:6px;border-radius:50%;background:var(--dai);flex:none;margin-top:6px} .meta-list{display:flex;flex-direction:column} .meta-list .mi{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11.5px} .meta-list .mi:last-child{border-bottom:none} .meta-list .k{width:78px;color:var(--ink3);flex:none} /* 勋章 / 档位 */ .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px} .bd{border:1px solid var(--line);border-radius:11px;padding:13px;background:#fff;position:relative} .bd .seal{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#F6DCA6,#E9C07C); color:#7A5210;font-family:var(--kai);font-size:21px;display:flex;align-items:center;justify-content:center; box-shadow:0 3px 10px rgba(217,145,42,.28)} .bd.seal .seal{background:linear-gradient(135deg,#F9E5BB,#DDB05F)} .bd h4{font-size:12.5px;font-weight:600;margin-top:10px;display:flex;align-items:center;gap:6px} .bd .k{font-size:10.5px;color:var(--ink3);margin-top:5px;line-height:1.75;min-height:36px} .bd .foot{margin-top:9px;display:flex;align-items:center;gap:6px} .bd.off{opacity:.55} .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px} .tier{border:1px solid var(--line);border-radius:11px;padding:14px;background:#fff} .tier .amt{font-size:22px;font-weight:700;color:var(--gold-deep);line-height:1.2} .tier .nm{font-size:12px;font-weight:600;margin-top:4px} .tier .ln{font-size:10.5px;color:var(--ink3);margin-top:3px;min-height:32px} .tier .foot{display:flex;align-items:center;gap:6px;margin-top:8px} .tier.off{opacity:.55} .kv{display:grid;grid-template-columns:140px 1fr} .kv .k,.kv .v{padding:9px 16px;border-top:1px solid var(--line);font-size:11.5px} .kv .k{color:var(--ink3);border-right:1px solid var(--line)} .kv .v code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;background:var(--paper); padding:1px 5px;border-radius:4px} .log{font-size:11.5px;display:flex;gap:12px;padding:9px 16px;border-top:1px solid var(--line)} .log:first-child{border-top:none} .log time{color:var(--ink3);font-variant-numeric:tabular-nums;flex:none;font-size:10.5px;width:104px} .log .who2{color:var(--ink3);flex:none;width:60px} .toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(10px);background:rgba(33,29,24,.94); color:#fff;font-size:12px;padding:10px 18px;border-radius:9px;opacity:0;pointer-events:none; transition:all .22s;z-index:300;box-shadow:0 10px 26px rgba(0,0,0,.24);max-width:72%} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .foot-note{padding:16px 2px 0;font-size:10.5px;color:var(--ink3);line-height:1.9} @media (max-width:1180px){ .kpis{grid-template-columns:repeat(2,1fr)} .grid2{grid-template-columns:1fr} .preview{grid-template-columns:1fr} .badges,.tiers{grid-template-columns:repeat(2,1fr)} } /* ===================================================================== * v29 设计系统（覆盖层） * 上一版的问题不是「不好看」，是「像小店的记账本」： * 纸色底 + 楷体标题 + 13px 密排 + 每个数字旁边一条彩色竖杠。 * 后台是工具，不是宣传页。这一层做四件事： * 1. 中性灰底 + 纯白卡 + 一个品牌色，收起所有装饰性彩色 * 2. 标题改无衬线（楷体只留给「字」本身，那是内容不是界面） * 3. 尺寸整体放大一档：正文 14、控件 34、表格行 48、卡片内距 20 * 4. 补齐控制台的「结构件」：可折叠侧栏、全局搜索、通知、用户菜单 * ===================================================================== */ :root{ --paper:#F5F5F3; --paper2:#F0EFEB; --card:#FFFFFF; --ink:#17181B; --ink2:#4F5057; --ink3:#6A6C74; --ink4:#8E8F96; --line:#E8E7E3; --line2:#DCDBD6; --zhu:#B3352C; --zhu-deep:#8E2A23; --zhu-t:#FAEAE8; --dai:#2F6F63; --dai-deep:#245A50; --dai-t:#E7F0EE; --gold:#9A6F1E; --gold-deep:#7C5813; --gold-t:#F7EEDC; --side:#121316; --side2:#191A1E; --sh:0 1px 2px rgba(18,19,22,.04),0 6px 16px rgba(18,19,22,.045); --sh-lift:0 2px 4px rgba(18,19,22,.05),0 14px 34px rgba(18,19,22,.09); --r:10px; --r-sm:7px; --ring:0 0 0 3px rgba(179,53,44,.14); } body{font-size:14px;line-height:1.6;background:var(--paper)} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-thumb{background:rgba(23,24,27,.14);border-radius:8px;border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:rgba(23,24,27,.24);background-clip:content-box} /* ---------- 骨架 ---------- */ .app{grid-template-columns:264px 1fr;transition:grid-template-columns .18s cubic-bezier(.4,0,.2,1)} .side{padding:16px 12px 10px;background:var(--side);border-right:1px solid #000} .brand{padding:6px 8px 18px;gap:11px} .brand .bs{width:36px;height:36px;border-radius:9px;font-size:21px; background:linear-gradient(150deg,#C2453A,#9B2B23);box-shadow:0 4px 12px rgba(0,0,0,.35)} .brand b{font-size:14.5px;letter-spacing:.04em;color:#F4F3F0} .brand em{font-size:9px;letter-spacing:.14em;color:#6E7078;margin-top:2px} .brand .fold{margin-left:auto;width:26px;height:26px;border-radius:6px;color:#7E8088; display:flex;align-items:center;justify-content:center;flex:none} .brand .fold:hover{background:rgba(255,255,255,.07);color:#E7E6E2} .nav{gap:1px} .nav-t{font-size:10px;letter-spacing:.14em;color:#63656D;padding:16px 10px 7px;font-weight:600} .nav a{padding:0 10px;height:38px;border-radius:7px;font-size:13.5px;color:#A2A4AC;gap:10px} .nav a svg{width:17px;height:17px;flex:none;opacity:.9} .nav a:hover{background:rgba(255,255,255,.055);color:#EFEEEA} .nav a.on{background:rgba(255,255,255,.09);color:#FFF;font-weight:600} .nav a.on::before{left:-12px;top:11px;height:16px;width:2.5px;background:#D2544A;border-radius:0 2px 2px 0} .nav a .cnt{margin-left:auto;font-size:10.5px;color:#9A9CA4;background:rgba(255,255,255,.07); border-radius:20px;padding:1px 6px;font-weight:500} .nav a.on .cnt{background:rgba(255,255,255,.14);color:#E8E7E3} .nav a .cnt.hot{background:var(--zhu);color:#fff;font-weight:600} .side-foot{padding:12px 10px 8px;font-size:10.5px;color:#61636B;line-height:2} .side-foot b{color:#8E9099} .app.collapsed{grid-template-columns:68px 1fr} .app.collapsed .brand{padding:6px 4px 18px;justify-content:center} .app.collapsed .brand>div:not(.bs),.app.collapsed .nav-t, .app.collapsed .nav a span,.app.collapsed .nav a .cnt, .app.collapsed .side-foot,.app.collapsed .brand .fold{display:none} .app.collapsed .nav a{justify-content:center;padding:0} .app.collapsed .nav a.on::before{left:-12px} .app.collapsed .side-foot-mini{display:block} .main{background:var(--paper)} .top{height:60px;padding:0 26px;gap:16px;background:#fff;border-bottom:1px solid var(--line); backdrop-filter:none;box-shadow:0 1px 0 rgba(18,19,22,.02)} .crumb{font-size:13px;color:var(--ink3);display:flex;align-items:center;gap:7px} .crumb b{color:var(--ink);font-weight:600;font-size:13.5px} .crumb .sl{color:var(--ink4)} .top-right{gap:6px} .body{padding:22px 26px 60px} .wrap{max-width:1420px} /* 顶栏：搜索 / 通知 / 用户 */ .top-search{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 11px;width:248px; border:1px solid var(--line2);border-radius:8px;background:var(--paper2);color:var(--ink3); font-size:12.5px;transition:border-color .15s,background .15s} .top-search:hover{background:#fff;border-color:#C9C8C2} .top-search svg{flex:none;opacity:.75} .top-search .kbd{margin-left:auto;font-size:10px;color:var(--ink3);border:1px solid var(--line2); border-radius:4px;padding:0 4px;line-height:15px;background:#fff} .top-ico{width:34px;height:34px;border-radius:8px;color:var(--ink2);display:flex;align-items:center; justify-content:center;position:relative} .top-ico:hover{background:var(--paper2);color:var(--ink)} .top-ico .dotn{position:absolute;top:6px;right:6px;min-width:15px;height:15px;border-radius:8px; background:var(--zhu);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center; justify-content:center;padding:0 3px;border:1.5px solid #fff;line-height:1} .top-sep{width:1px;height:22px;background:var(--line);margin:0 6px} .user-btn{display:flex;align-items:center;gap:9px;height:38px;padding:0 9px 0 4px;border-radius:8px} .user-btn:hover{background:var(--paper2)} .who i{width:28px;height:28px;font-size:13px;background:#EDEAE2;color:#6B5A3E;border-radius:8px} .who .un{display:block;font-size:12.5px;color:var(--ink);font-weight:600;line-height:1.25} .who .sess{margin:0;font-size:10px;color:var(--ink3);display:block} .dd{position:fixed;top:66px;right:22px;width:250px;background:#fff;border:1px solid var(--line); border-radius:10px;box-shadow:var(--sh-lift);padding:6px;z-index:120;display:none} .dd.show{display:block;animation:pop .16s cubic-bezier(.16,1,.3,1)} .dd-h{padding:10px 10px 9px;border-bottom:1px solid var(--line);margin-bottom:5px} .dd-h b{font-size:13px} .dd-h span{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px} .dd a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;font-size:13px; color:var(--ink2)} .dd a:hover{background:var(--paper2);color:var(--ink)} .dd a.danger{color:var(--zhu-deep)} .dd a svg{width:15px;height:15px;opacity:.7} .dd .dd-f{padding:8px 10px 4px;font-size:10px;color:var(--ink3);border-top:1px solid var(--line);margin-top:4px} /* 通知面板 */ .notif{position:fixed;top:66px;right:22px;width:352px;background:#fff;border:1px solid var(--line); border-radius:10px;box-shadow:var(--sh-lift);z-index:120;display:none;overflow:hidden} .notif.show{display:block;animation:pop .16s cubic-bezier(.16,1,.3,1)} .notif-h{display:flex;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600} .notif-h span{margin-left:auto;font-size:11.5px;color:var(--ink3);font-weight:400} .notif .row{padding:11px 15px;gap:9px} .notif-f{padding:9px 15px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink3);text-align:center} /* ---------- 页头 / 按钮 ---------- */ .page-head{align-items:center;margin-bottom:18px;gap:14px} .page-head h2{font-family:var(--sans);font-size:22px;font-weight:650;letter-spacing:-.01em} .page-head p{font-size:12.5px;color:var(--ink3);margin-top:5px;max-width:760px} .page-head .act{gap:8px} .btn{height:34px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:500;gap:6px; border-color:var(--line2);color:var(--ink2);box-shadow:0 1px 1px rgba(18,19,22,.03)} .btn:hover{background:var(--paper2);border-color:#C9C8C2;color:var(--ink)} .btn.primary{background:var(--zhu);border-color:var(--zhu);color:#fff;font-weight:600; box-shadow:0 1px 2px rgba(142,42,35,.24)} .btn.primary:hover{background:#A02E26;border-color:#A02E26} .btn.dai{background:var(--dai);border-color:var(--dai)} .btn.dai:hover{background:#276055;border-color:#276055} .btn.danger{color:var(--zhu-deep);border-color:#EBC7C2;background:#fff} .btn.danger:hover{background:var(--zhu-t);border-color:#DFB2AC} .btn.sm{height:28px;padding:0 11px;font-size:12px;border-radius:7px} .btn.ghost{border-color:transparent;background:transparent;box-shadow:none} .btn.ghost:hover{background:var(--paper2);border-color:transparent} .btn:active{transform:translateY(.5px)} .btn[disabled]{opacity:.45;pointer-events:none} /* ---------- 卡片 / KPI ---------- */ .card{border-color:var(--line);border-radius:var(--r);box-shadow:var(--sh)} .card-h{padding:15px 20px;gap:9px;border-bottom-color:var(--line);min-height:52px} .card-h h3{font-size:14px;font-weight:600;letter-spacing:0} .card-h .sub{font-size:11.5px;color:var(--ink3)} .card-h .r{gap:7px} .kpis{gap:14px;margin-bottom:14px} .kpi{padding:18px 20px 16px;border-radius:var(--r);box-shadow:var(--sh);border-color:var(--line)} .kpi::after{display:none} .kpi .lab{font-size:12px;color:var(--ink3);letter-spacing:0;display:flex;align-items:center;gap:6px} .kpi .lab .q{width:14px;height:14px;border-radius:50%;border:1px solid var(--line2);color:var(--ink4); font-size:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:600} .kpi .val{font-size:30px;font-weight:680;letter-spacing:-.02em;margin-top:9px;line-height:1.15} .kpi .val small{font-size:12.5px;font-weight:500;color:var(--ink3);margin-left:4px;letter-spacing:0} .kpi .foot{font-size:11px;color:var(--ink3);margin-top:7px;display:flex;align-items:center;gap:6px} .kpi.k0 .val{color:var(--zhu-deep)} .trend{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600; padding:1px 6px;border-radius:5px;letter-spacing:0} .trend.up{background:#FAEAE8;color:#A02E26} .trend.dn{background:#E7F0EE;color:#245A50} .trend.flat{background:var(--paper2);color:var(--ink3)} .spark{margin-top:10px;display:block;width:100%;height:26px;overflow:visible} /* ---------- 表格 ---------- */ th{font-size:11px;letter-spacing:.04em;color:var(--ink3);padding:0 20px;height:40px; background:#FAFAF8;border-bottom:1px solid var(--line);font-weight:600} td{padding:0 20px;height:50px;font-size:13px;border-bottom:1px solid #F1F0EC} tbody tr:hover{background:#FCFCFA} tbody tr.sel{background:#FDF6F5} td .ch{font-size:19px} th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--ink)} th .arw{font-size:9px;margin-left:3px;color:var(--ink3)} th.sorted{color:var(--ink)} th.sorted .arw{color:var(--zhu)} .rowacts{gap:3px} .iconbtn{width:28px;height:28px;border-radius:6px;font-size:12.5px;color:var(--ink3)} .iconbtn:hover{background:var(--paper2);color:var(--ink)} .iconbtn.danger:hover{background:var(--zhu-t);color:var(--zhu-deep)} .cbx{width:15px;height:15px;border-radius:4px;border:1.5px solid #C7C6C0;background:#fff; display:inline-block;position:relative;flex:none;cursor:pointer;transition:.12s} .cbx:hover{border-color:var(--ink4)} .cbx.on{background:var(--zhu);border-color:var(--zhu)} .cbx.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px; border:1.6px solid #fff;border-top:none;border-left:none;transform:rotate(40deg)} .cbx.all{background:#fff} .cbx.all.on{background:var(--zhu)} tr.sel .cbx{border-color:#D8B7B2} .batchbar{display:none;align-items:center;gap:10px;padding:9px 20px;background:#FDF6F5; border-bottom:1px solid #F0DCD9;font-size:12.5px} .batchbar.show{display:flex} .batchbar b{color:var(--zhu-deep)} .pager{display:flex;align-items:center;gap:8px;padding:11px 20px;border-top:1px solid var(--line); font-size:12px;color:var(--ink3)} .pager .spacer{flex:1} .pgsz{display:inline-flex;align-items:center;gap:4px;margin-left:10px} .pgsz select{height:26px;padding:0 4px;border-radius:6px;border:1px solid var(--line2); background:var(--card);color:var(--ink2);font-size:12px;font-family:inherit;cursor:pointer} .pgsz select:focus{outline:none;border-color:var(--zhu)} /* 红色提示条：用于「会影响用户」的一类说明（付了钱没章、档位停用等），与中性 note 区分 */ .note.bad{background:var(--bad-bg,#FBEDEA);border-color:var(--bad-line,#F2D3CD)} .note.bad .ic{background:#B03A2E;color:#fff} .bad-txt{color:#B03A2E} .pg{min-width:28px;height:28px;padding:0 8px;border-radius:6px;border:1px solid var(--line2); background:#fff;font-size:12px;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center} .pg:hover{border-color:#C9C8C2} /* 当前页码：底色用 --ink 在浅色下是对的（深底白字），但暗色下 --ink 是浅文字色， 直接拿来当底就变成「浅底浅字」。这里统一用 --paper 当底、--ink 当字， 两个主题下都是「深底浅字/浅底深字」，对比度都过。 */ .pg.on{background:var(--paper);border-color:var(--ink);color:var(--ink);font-weight:700} .pg[disabled]{opacity:.4;pointer-events:none} /* ---------- 工具条 / 状态 ---------- */ .toolbar{padding:11px 20px;gap:9px} .seg{padding:3px;border-radius:8px;background:var(--paper2)} .seg button{height:26px;padding:0 11px;border-radius:6px;font-size:12.5px;color:var(--ink3)} .seg button:hover{color:var(--ink)} .seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(18,19,22,.09)} .tabs{padding:0 20px;gap:2px} .tabs button{height:46px;padding:0 13px;font-size:13.5px;color:var(--ink3);border-bottom-width:2px} .tabs button:hover{color:var(--ink)} .tabs button.on{color:var(--ink);border-bottom-color:var(--zhu)} .search{height:34px;border-radius:8px;background:#fff;min-width:236px;padding:0 11px} .search input{font-size:13px} .pill{font-size:11px;font-weight:600;padding:2.5px 8px;border-radius:6px} .pill.gray{background:#F2F1ED;color:var(--ink3)} .note{padding:12px 20px;font-size:11.5px;line-height:1.75;gap:9px} .empty{padding:56px 20px;font-size:13px} .empty .ic{font-size:26px;opacity:.3;display:block;margin-bottom:8px} .row{padding:13px 20px;font-size:13px;border-top-color:#F1F0EC} .row.grp{padding:8px 20px 7px;font-size:10.5px;letter-spacing:.1em;background:#FAFAF8; color:var(--ink4);font-weight:600} .alrow:hover{background:#FCFCFA} .mline{padding:10px 20px} .mline .n{width:96px;font-size:12.5px} .mline .v{font-size:12px;width:90px} .meter{height:6px;border-radius:20px;background:#F0EFEB} .ch2{padding:16px 20px 6px;gap:12px} .ch-col{border-color:var(--line);border-radius:9px;padding:13px 14px;background:#FCFCFA} .ch-h{font-size:12.5px;margin-bottom:8px} .ch-r{font-size:12px;padding:4px 0} .ch-r b{font-size:13.5px} .lamps{gap:14px;margin-bottom:14px} .lamp{padding:14px 16px;border-radius:var(--r);gap:11px} .lamp i{width:22px;height:22px;font-size:12px} .lamp .ln{font-size:11.5px} .lamp .lv{font-size:19px} .lamp .ls{font-size:10.5px} /* 提示条：去装饰，只留结构与一句人话 */ .subj-bar{padding:12px 16px;border-radius:9px;background:#FBFAF6;border-color:#E6E1D2;gap:11px} .sb-tag{background:#F1ECDC;color:#7B6435;font-size:10.5px;border-radius:5px;padding:3px 8px} .sb-txt{font-size:12.5px;line-height:1.72;color:var(--ink2)} .demo-mark{padding:9px 14px;border-left:2px solid #D3C29A;background:#FBFAF6;font-size:11.5px; border-radius:0 6px 6px 0;margin:0 0 14px} /* ---------- 表单 / 弹层 ---------- */ .field{margin-bottom:16px} .field label{font-size:12px;margin-bottom:7px;color:var(--ink2)} .inp,.sel,.ta{padding:9px 11px;border-radius:8px;font-size:13.5px;border-color:var(--line2)} .inp:focus,.sel:focus,.ta:focus{border-color:var(--dai);box-shadow:0 0 0 3px rgba(47,111,99,.12)} .ro{height:38px;border-radius:8px;font-size:13px;background:var(--paper2);padding:0 12px} .hint{font-size:11px;color:var(--ink3);margin-top:6px} .ta{min-height:96px} .switch{width:38px;height:22px} .switch::after{width:18px;height:18px} .switch.on::after{transform:translateX(16px)} .switch-row{padding:10px 13px;border-radius:8px} .modal{width:720px;border-radius:12px;box-shadow:0 32px 80px rgba(18,19,22,.32)} .modal.wide{width:960px} .m-h{padding:17px 22px;gap:11px} .m-h h3{font-size:15px} .m-body{padding:22px} .m-foot{padding:14px 22px;gap:9px} .mask{background:rgba(18,19,22,.44);backdrop-filter:blur(3px)} .del-card{padding:26px 22px 20px} .del-card h3{font-size:15px} .del-card p{font-size:12.5px} .fgrid{gap:0 16px} /* ---------- 图表 ---------- */ .chart{padding:16px 20px 8px} .bars{height:150px;gap:12px} .bar .b{border-radius:5px 5px 2px 2px;max-width:40px} .bar em{font-size:10.5px} .bar .b span{font-size:10.5px;top:-19px} /* ---------- 命令面板 ---------- */ .cmdk{position:fixed;inset:0;z-index:260;display:none;background:rgba(18,19,22,.42); backdrop-filter:blur(3px);padding:12vh 20px 20px;justify-content:center} .cmdk.show{display:flex;animation:fade .14s} .cmdk-box{width:600px;max-width:100%;max-height:66vh;background:#fff;border-radius:12px; box-shadow:0 40px 90px rgba(18,19,22,.4);display:flex;flex-direction:column;overflow:hidden; animation:pop .18s cubic-bezier(.16,1,.3,1)} .cmdk-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)} .cmdk-in input{flex:1;border:none;outline:none;font-size:15px;background:none} .cmdk-in .esc{font-size:10px;color:var(--ink3);border:1px solid var(--line2);border-radius:4px; padding:1px 5px;background:#FAFAF8} .cmdk-list{overflow:auto;padding:7px} .cmdk-g{font-size:10px;letter-spacing:.12em;color:var(--ink3);padding:9px 11px 5px;font-weight:600} .cmdi{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:7px;font-size:13.5px; color:var(--ink2);cursor:pointer} .cmdi .k{font-family:var(--kai);font-size:16px;width:20px;text-align:center;color:var(--zhu-deep);flex:none} .cmdi .sub{margin-left:auto;font-size:11px;color:var(--ink3)} .cmdi.on{background:var(--paper2);color:var(--ink)} .cmdi.on .sub{color:var(--ink3)} .cmdk-f{padding:9px 16px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink3); display:flex;gap:14px} .cmdk-f kbd{font-family:inherit;border:1px solid var(--line2);border-radius:4px;padding:0 4px; background:#FAFAF8;font-size:9.5px} /* ---------- 锚点列表 / 导入 ---------- */ .anchor-list{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px} .an-row{display:block;padding:10px 12px;border-top:1px solid var(--line);font-size:12.5px} .an-row:first-child{border-top:none} .an-row .an-head{display:flex;align-items:center;gap:8px} .an-row .nm{flex:1;min-width:0;font-weight:600} .an-row .vol{font-size:10.5px;color:var(--ink4);margin-left:6px;font-weight:400} .an-row .an-s,.an-row .an-m{width:100%;margin-top:6px;font-size:12px;height:30px} .an-row .an-m{color:var(--ink2)} .an-row.done{background:#F5FAF8} .an-row.done .nm::after{content:"";} .tiny-pill{font-size:9.5px;padding:1px 6px} /* ===== 用户详情 · 勋章墙 ===== */ .ubadge-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:2px 0} .ubw{border:1px solid var(--line);border-radius:10px;padding:13px 8px 11px;text-align:center;background:#fff} .ubw b{display:block;font-size:11.5px;font-weight:600;margin-top:8px;color:var(--ink)} .ubw .tiny{display:block;margin-top:3px} .ubw .tiny.gift{color:#B03A2E;font-weight:600} /* ===== 小程序样式预览（后台内嵌真机壳）===== 外框按主流真机：375×812 逻辑分辨率（19.5:9，与 iPhone 15 Pro 的 393×852 同比例）， 黑钛边框 + 灵动岛 + 侧键 + Home 指示条 + 屏幕斜向高光。 内容区仍是 375 宽的小程序版式；所有类加 mpv- 前缀，不与后台样式互相污染。 */ .mpv-wrap{background:#E9E3D4;display:flex;justify-content:center;padding:4px 10px 10px} html.dark .mpv-wrap{background:#222327} /* 预览弹窗贴合手机壳：宽度取内容实际宽（含 zoom 缩放后的宽度）， 不再固定 620/720——两侧只留壳外 10px 呼吸位，侧键不裁不挤。 openModal 检测到 mpv-wrap 时给 .modal 挂 .narrow。 */ .modal.narrow,html.dark .modal.narrow{width:max-content;max-width:100%} .modal.narrow .m-h,.modal.narrow .m-foot{flex-wrap:wrap} /* 窄弹窗放不下「预览只读」提示 + 两个按钮，提示语与按钮语义重复，直接收起 */ .modal.narrow .m-foot .tiny{display:none} /* zoom 档位下手机壳布局宽 = 399×zoom，弹窗宽跟着卡到壳 + 两侧 10px */ @media (max-height: 1060px){ .mpv-device{zoom:.84} .modal.narrow,html.dark .modal.narrow{width:356px} } @media (max-height: 900px){ .mpv-device{zoom:.72} .modal.narrow,html.dark .modal.narrow{width:306px} } .mpv-device{position:relative;flex:none;width:399px;padding:12px;border-radius:56px; background:linear-gradient(160deg,#414449,#151619 32%,#0B0C0E 72%,#2C2E33); box-shadow:0 26px 64px rgba(20,15,8,.4),0 4px 14px rgba(20,15,8,.25), inset 0 0 3px rgba(255,255,255,.22),inset 0 0 1px 2px rgba(0,0,0,.9)} /* 侧键：左音量两枚（用 box-shadow 复制第二枚）、右电源一枚，贴在框外沿 */ .mpv-device::before{content:"";position:absolute;left:-3px;top:176px;width:3px;height:56px; border-radius:2px 0 0 2px;background:#26282C;box-shadow:0 72px 0 0 #26282C} .mpv-device::after{content:"";position:absolute;right:-3px;top:216px;width:3px;height:92px; border-radius:0 2px 2px 0;background:#26282C} .mpv-screen{position:relative;height:812px;border-radius:45px;overflow:hidden;background:#F7F3EA; display:flex;flex-direction:column} /* 屏幕高光：极淡斜向反光，不挡滚动 */ .mpv-screen::after{content:"";position:absolute;inset:0;border-radius:45px;pointer-events:none;z-index:9; background:linear-gradient(118deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 30%)} .mpv-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:122px;height:34px; border-radius:20px;background:#000;z-index:6} .mpv-homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px; border-radius:3px;background:rgba(28,25,18,.3);z-index:8;pointer-events:none} /* 视口放不下整机（812 + 边框）时整壳等比缩小——比例不变，只是整只手机变小。 zoom 连布局尺寸一起缩，不用负 margin 找补；不支持 zoom 的浏览器回落为弹层内滚动。 zoom 档位与 .modal.narrow 的贴合定宽写在上方 mpv-wrap 一段，同一档位一处定义。 */ .mpv{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column; font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif} .mpv-status{flex:none;display:flex;justify-content:space-between;align-items:center; padding:17px 30px 5px;font-size:13.5px;font-weight:600;color:#2C2822;font-variant-numeric:tabular-nums} .mpv-status .sig{display:flex;gap:5px;align-items:center} .mpv-nav{flex:none;text-align:center;font-size:13px;font-weight:600;color:#2C2822;padding:6px 0 9px; border-bottom:1px solid #EAE2D0;background:#F7F3EA} .mpv-body{flex:1;min-height:0;overflow-y:auto;padding:13px 13px 30px} .mpv-hero{background:#fff;border-radius:16px;padding:22px 16px 16px;text-align:center;position:relative; box-shadow:0 3px 14px rgba(60,50,30,.08)} .mpv-stamp{position:absolute;top:12px;right:12px;font-family:"Kai Display","KaiTi","STKaiti",serif; font-size:10px;font-weight:700;color:#B03A2E;border:1.5px solid #B03A2E;border-radius:6px; padding:2px 6px;transform:rotate(6deg);opacity:.85} .mpv-stamp.wait{color:#A89F8E;border-color:#C9BFAE;transform:rotate(-4deg)} .mpv-hero .big{font-family:"Kai Display","KaiTi","STKaiti",serif;font-weight:700;line-height:1.05;color:#2C2822} .mpv-hero .py{color:#A89F8E;font-size:13px;margin-top:7px;letter-spacing:.1em} .mpv-hero .meta{margin-top:11px;display:flex;gap:8px;justify-content:center;align-items:center; font-size:11px;color:#6E675C;flex-wrap:wrap} .mpv .wc{padding:2px 10px;border-radius:20px;font-size:10.5px;font-weight:600} .mpv .wc.xu{background:#EBF2F0;color:#3F6E68} .mpv .wc.shi{background:#F9EFEC;color:#B03A2E} .mpv .acts{margin-top:15px;display:flex;gap:8px;justify-content:center} .mpv .acts span{font-size:11px;padding:6px 13px;border:1px solid #E8E0CD;border-radius:20px; color:#6E675C;background:#fff;cursor:default} .mpv .acts span.p{background:#B03A2E;color:#fff;border-color:#B03A2E} .mpv .sec{background:#fff;border-radius:14px;padding:13px 15px;margin-top:10px; box-shadow:0 2px 10px rgba(60,50,30,.06)} .mpv .sec h5{font-size:12px;margin:0 0 8px;display:flex;align-items:center;gap:7px;color:#2C2822;font-weight:600} .mpv .sec h5::before{content:"";width:3px;height:12px;border-radius:2px;background:#B03A2E;flex:none} .mpv .sec.xu h5::before{background:#3F6E68} .mpv .sec p{margin:0;font-size:12.5px;line-height:1.9;color:#4A443A} .mpv .sec .wctip{margin-top:8px;background:#F7F3EA;border-radius:10px;padding:8px 11px;font-size:11.5px;color:#6E675C} .mpv .chain{list-style:none;margin:0;padding:0} .mpv .chain li{display:flex;gap:9px;font-size:12.5px;padding:7px 0;border-bottom:1px dashed #EFE9DB; color:#4A443A;line-height:1.7} .mpv .chain li:last-child{border:0} .mpv .chain .no{flex:none;width:18px;height:18px;border-radius:50%;background:#F6F1E7;color:#B03A2E; font-size:10.5px;display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:3px} .mpv .an{background:#FBF8F1;border-radius:10px;padding:10px 12px;margin-top:8px} .mpv .an .s{font-family:"Kai Display","KaiTi","STKaiti",serif;font-size:13.5px;color:#2C2822;line-height:1.8} .mpv .an .m{font-size:11px;color:#3F6E68;margin-top:5px} .mpv .an .m b{font-weight:600} .mpv .an .t{font-size:10px;color:#A89F8E;margin-top:3px} .mpv .mpv-empty{color:#A89F8E;font-size:12px} .mpv .tipbar{font-size:10px;color:#A89F8E;text-align:center;padding:12px 0 2px} /* —— 篇目阅读页预览 —— */ .mpv .t-title{font-family:"Kai Display","KaiTi","STKaiti",serif;font-size:24px;font-weight:700; color:#2C2822;line-height:1.3} .mpv .bei{padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:600;background:#FBF3E2;color:#996410} .mpv .tp{font-family:"Kai Display","KaiTi","STKaiti",serif;font-size:14px;line-height:2.05;color:#2C2822; text-indent:2em;margin:0 0 10px} .mpv .tp:last-child{margin-bottom:0} .mpv .chips{display:flex;flex-wrap:wrap;gap:7px} .mpv .tchip{display:inline-flex;align-items:baseline;gap:4px;padding:5px 10px;border:1px solid #E8E0CD; border-radius:9px;background:#FBF8F1;font-size:12px;color:#6E675C} .mpv .tchip b{font-family:"Kai Display","KaiTi","STKaiti",serif;font-size:15px;color:#B03A2E;font-weight:700} /* ===== 参数配置（系统配置页）===== */ .conf-group{font-size:11px;font-weight:700;color:var(--ink2);letter-spacing:.08em; padding:16px 0 8px;border-top:1px dashed var(--line);margin-top:6px} .conf-group:first-child{border-top:0;margin-top:0;padding-top:4px} .conf-k{font-family:ui-monospace,SFMono-Regular,monospace;font-size:9.5px;font-weight:400; color:var(--ink3);background:var(--paper2,#F3EEE3);border-radius:4px;padding:1px 5px;margin-left:4px; letter-spacing:0;text-transform:none} .an-add{display:flex;gap:8px;margin-top:9px} .an-add select{flex:1} .imp-prev{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-top:10px} .imp-line{display:flex;gap:10px;padding:8px 12px;border-top:1px solid var(--line);font-size:12px} .imp-line:first-child{border-top:none} .imp-line .ok{color:var(--dai-deep);flex:none} .imp-line .bad{color:var(--zhu-deep);flex:none} /* ---------- 登录：左右分栏（品牌区 + 表单区） ---------- */ .login{padding:0;background:#0F1013;align-items:stretch} .login.hide{display:none} .lg-wrap{display:grid;grid-template-columns:1.06fr .94fr;width:100%;max-width:1120px;margin:auto; min-height:620px;border-radius:16px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);background:var(--card)} .lg-side{position:relative;padding:44px 46px;background: radial-gradient(700px 420px at 12% 0%,#26241F,#15161A 68%);color:#EFEDE7;display:flex; flex-direction:column;overflow:hidden} .lg-side::after{content:"";position:absolute;right:-70px;bottom:-90px;width:320px;height:320px; border-radius:50%;border:1px solid rgba(255,255,255,.06)} .lg-mark{display:flex;align-items:center;gap:11px} .lg-mark .bs{width:40px;height:40px;border-radius:10px;background:linear-gradient(150deg,#C2453A,#9B2B23); font-family:var(--kai);font-size:23px;color:#fff;display:flex;align-items:center;justify-content:center} .lg-mark b{font-size:15px;letter-spacing:.06em} .lg-mark em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.16em;color:#7C7E86;margin-top:2px} .lg-promo{margin-top:auto} .lg-promo h2{font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.5} .lg-promo h2 em{font-family:var(--kai);font-style:normal;color:#D8665B} .lg-promo p{font-size:13px;color:#9A9CA4;line-height:1.9;margin-top:14px;max-width:340px} .lg-stats{display:flex;gap:26px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09)} .lg-stats div b{display:block;font-size:21px;font-weight:650;letter-spacing:-.01em} .lg-stats div span{font-size:10.5px;color:#7C7E86;letter-spacing:.04em} .lg-form{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;background:#fff} .lg-card{width:100%;max-width:376px;margin:0 auto;background:transparent;box-shadow:none;padding:0;border-radius:0} .lg-card h1{font-family:var(--sans);font-size:22px;font-weight:650;letter-spacing:-.01em} .lg-card .lg-sub{font-size:11.5px;letter-spacing:0;color:var(--ink3);margin-top:6px} .lg-head{align-items:flex-start;margin-bottom:26px} .lg-head .lg-seal{display:none} .lg-field{margin-top:16px} .lg-field label{font-size:12px} .lg-input{height:44px;border-radius:9px;border-color:var(--line2)} .lg-input input{font-size:14px;letter-spacing:.04em} .lg-cap{height:44px;width:106px;border-radius:9px} .lg-refresh{height:44px} .lg-btn{height:46px;margin-top:20px;border-radius:9px;font-size:14px;background:var(--zhu)} .lg-btn:hover{background:#A02E26} .lg-btn:focus-visible{outline:none;box-shadow:var(--ring)} .lg-remember{margin-top:14px} .lg-sec{grid-template-columns:1fr;gap:3px;margin-top:14px} .lg-tip{background:#FAFAF8;border-color:var(--line2);margin-top:16px} .lg-fine{margin-top:12px} @media (max-width:900px){ .lg-wrap{grid-template-columns:1fr;min-height:0;max-width:460px} .lg-side{display:none} .lg-form{padding:32px 24px} } /* 品牌区在窄屏 / 短屏的收口 */ /* ---- v29.1 细节修正（截图复查后加）---- */ td,th{white-space:nowrap} .kpi .val{font-size:32px} .subj-bar .sb-txt{max-width:1060px} .kpi.dim{background:#FCFCFA;border-style:dashed;box-shadow:none} .badge-demo{position:absolute;top:14px;right:15px;font-size:9.5px;letter-spacing:.02em; color:#7C5813;background:#F7EEDC;border-radius:4px;padding:1px 5px;font-weight:600} .kpi{position:relative} .bars .bar .b{max-width:56px} .nav a.on::before{left:0;border-radius:0 2px 2px 0} /* 主体能力：四格横排，比四个大输入框省一半高度，也更像事实而不是表单 */ .subject-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .subject-cell{background:#fff;padding:15px 20px} .subject-cell .k{font-size:11.5px;color:var(--ink3)} .subject-cell .v{font-size:13.5px;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:6px} @media (max-width:1180px){.subject-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:1420px){ .wrap{max-width:100%} } @media (max-width:1180px){ .kpis{grid-template-columns:repeat(2,1fr)} .grid2{grid-template-columns:1fr} .preview{grid-template-columns:1fr} .badges,.tiers{grid-template-columns:repeat(2,1fr)} .lamps{grid-template-columns:1fr} .top-search{width:170px} } /* ---- v30 字号与密度：对齐主流后台（Ant Design / 飞书）的阅读尺度 ---- * 之前的问题：正文 14 上下浮动、辅助文字 10px——屏上看像「缩小的传单」。 * 这一层只动字号/行高/控件高度，不动布局与颜色： * 正文 15 → 表格 14 → 辅助 12；辅助类 .tiny 从 10 提到 12。 * 控件统一 36 高；表格行 56；KPI 大数 36；页标题 26。 */ .tiny{font-size:12px !important} .muted{color:var(--ink3)} body{font-size:15px} .page-head h2{font-size:26px;font-weight:680} .page-head p{font-size:14px;max-width:860px} .card-h h3{font-size:15.5px} .card-h .sub{font-size:12.5px} .kpi{padding:20px 22px 18px} .kpi .lab{font-size:13px} .kpi .val{font-size:36px;font-weight:700} .kpi .val small{font-size:13px} .kpi .foot{font-size:12px;margin-top:9px} th{font-size:12.5px;height:46px;padding:0 20px} td{font-size:14px;height:56px} td .ch{font-size:21px} .btn{height:36px;padding:0 16px;font-size:14px} .btn.sm{height:30px;padding:0 12px;font-size:12.5px} .iconbtn{width:30px;height:30px;font-size:13.5px} .seg button{height:28px;padding:0 13px;font-size:13px} .tabs button{height:50px;font-size:14.5px} .search{height:36px;min-width:250px} .search input{font-size:14px} .inp,.sel,.ta{font-size:14px;padding:10px 12px} .field label{font-size:13px} .hint{font-size:12px} .note{font-size:12.5px;padding:13px 20px} .row{font-size:14px;padding:14px 20px} .pill{font-size:12px;padding:3px 9px} .mline .n{font-size:13.5px;width:110px} .mline .v{font-size:13px} .lamp .ln{font-size:12.5px} .lamp .lv{font-size:20px} .lamp .ls{font-size:11.5px} .log{font-size:13px;padding:11px 20px} .log time{font-size:11.5px;width:110px} .kv .k,.kv .v{font-size:13px;padding:11px 18px} .subj-bar .sb-txt{font-size:13.5px} .toast{font-size:13px} .pager{font-size:13px;padding:13px 20px} .pg{min-width:32px;height:32px;font-size:13px} .pg-gap{min-width:18px;text-align:center;color:var(--ink4)} .crumbs,.crumb{font-size:13.5px} .crumb b{font-size:14px} .nav a{font-size:14.5px;height:42px} .nav-t{font-size:10.5px} .dd a{font-size:13.5px} .notif-h{font-size:14px} .notif-f{font-size:12px} .top-search{font-size:13px} .empty{font-size:14px;padding:64px 20px} .demo-mark{font-size:12.5px} /* 用户页组件 */ .uava{width:34px;height:34px;border-radius:9px;background:#EDEAE2;color:#6B5A3E; font-family:var(--kai);font-size:16px;display:inline-flex;align-items:center; justify-content:center;flex:none;margin-right:9px;vertical-align:middle} .uava.minor{background:var(--dai-t);color:var(--dai-deep)} td .un{display:inline-flex;flex-direction:column;line-height:1.35;vertical-align:middle} td .un b{font-size:14px;font-weight:600} .user-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:16px} .ucard{background:#fff;padding:14px 16px} .ucard .k{font-size:12px;color:var(--ink3)} .ucard .v{font-size:22px;font-weight:680;margin-top:6px;letter-spacing:-.01em} .ucard .v small{font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:0} .ubadges{display:flex;gap:6px;flex-wrap:wrap} /* 勋章设计图（v31 接入）：图优先，楷体字印只是无图时的退化态 */ .bd .bd-img{object-fit:contain;display:block;margin-bottom:2px;filter:drop-shadow(0 2px 4px rgba(60,40,20,.18))} .bd.off .bd-img{filter:grayscale(1) opacity(.45);filter:grayscale(1) opacity(.45) drop-shadow(none)} .ubadge{display:inline-flex;align-items:center;gap:5px;padding-left:4px} .ubadge .bd-img{filter:none} .badge-edit-img{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#FBFAF7} .badge-edit-img .bd-img{filter:drop-shadow(0 2px 4px rgba(60,40,20,.18))} /* 勋章获得规则构造器：指标 + 阈值 + 事件描述，一行排开 */ .rule-build{display:flex;align-items:center;gap:8px} .rule-build .sel{min-width:170px;flex:1} .rule-build .inp.num{text-align:center} /* 配置页步进器：精确数字 + 单位 + 合法区间 */ .stepper{display:inline-flex;align-items:center;gap:4px} .stepper .inp.num{width:58px;text-align:center;height:30px;padding:0 4px} .st-btn{width:26px;height:30px;border:1px solid var(--line2);background:#fff;border-radius:7px; font-size:14px;color:var(--ink2);line-height:1;flex:none;cursor:pointer} .st-btn:hover{border-color:var(--ink3);color:var(--ink)} .st-btn:disabled{opacity:.4;cursor:default} .st-unit{font-size:11px;color:var(--ink-info);white-space:nowrap} .st-range{font-size:10px;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:2px} .quiet-row{display:inline-flex;align-items:center;gap:6px} .quiet-row .inp{width:104px} .conf-seg button{height:28px;padding:0 12px} /* 渠道=仅后台时，飞书对接参数行降权（仍可见——告诉后来人这里曾配过什么） */ .field.dim{opacity:.45} .field.dim .btn{pointer-events:none} /* 告警通知规则行（v31） */ .rules{display:flex;flex-direction:column} .rule-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line)} .rule-row:first-child{border-top:none} .rule-row .pill{flex:none;width:34px;justify-content:center} .rule-row b{font-size:13px;display:block} .rule-row span{font-size:12px;color:var(--ink3);display:block;margin-top:2px} /* 搜索无结果 Top（v31） */ .misses{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .miss{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px; background:#fff;padding:9px 12px;cursor:pointer;font-family:var(--ui);text-align:left} .miss:hover{border-color:var(--zhu)} .miss .m-c{font-family:var(--kai);font-size:22px;color:var(--zhu-deep);width:26px;flex:none} .miss .m-n{font-size:13px;font-weight:600} .miss .m-act{font-size:10.5px;color:var(--ink3);margin-left:auto;line-height:1.5;text-align:right} @media (max-width:1100px){.misses{grid-template-columns:repeat(2,1fr)}} .u-lk{background:none;border:none;padding:0;color:var(--zhu);cursor:pointer;font:inherit;text-decoration:underline dotted rgba(0,0,0,.35);text-underline-offset:2px} html.dark .u-lk{text-decoration-color:rgba(255,255,255,.35)} @media (max-width:900px){ .app{grid-template-columns:68px 1fr} .app .brand>div:not(.bs),.app .nav-t,.app .nav a span,.app .side-foot{display:none} .app .nav a{justify-content:center;padding:0} .badges,.tiers{grid-template-columns:1fr} .kpis{grid-template-columns:1fr} .user-cards{grid-template-columns:repeat(2,1fr)} } /* ---- v33 体验层：页面过渡 / toast 撤销 / 今日字条 / 继续上次 / 深色主题 ---- */ #view.vin{animation:viewIn .18s ease both} @keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .toast .tk{margin-left:10px;height:24px;padding:0 10px;border-radius:6px;border:1px solid rgba(255,255,255,.4); background:transparent;color:#fff;font-size:11.5px;font-weight:600;cursor:pointer} .toast .tk:hover{background:rgba(255,255,255,.14)} .dailybar{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--sh);padding:10px 16px;margin-bottom:12px;font-size:13.5px} .dailybar .db-k{font-family:var(--kai);font-size:20px;color:var(--zhu-deep);width:26px;text-align:center;flex:none} .miss .btn{flex:none} /* 深色主题：变量层整体换肤，写死白底的组件在这里拨回来 */ html.dark{ --paper:#141518; --paper2:#1B1C20; --card:#1F2126; --ink:#E9E7E2; --ink2:#C4C2BB; --ink3:#9A9890; --ink4:#78766F; --line:#2B2D32; --line2:#383A40; --zhu:#C4523F; --zhu-deep:#DB7261; --zhu-t:#3A2521; --dai:#4E9384; --dai-deep:#78B8A9; --dai-t:#1D2C29; --gold:#C9A15C; --gold-deep:#DBB87C; --gold-t:#38301F; --sh:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.28); --sh-lift:0 2px 4px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.4); --ring:0 0 0 3px rgba(196,82,63,.22); } html.dark ::-webkit-scrollbar-thumb{background:rgba(233,231,226,.16);background-clip:content-box} html.dark .top,html.dark .dd,html.dark .notif,html.dark .cmdk-box{background:#1F2126} html.dark .inp,html.dark .sel,html.dark .ta,html.dark .search,html.dark .btn, html.dark .seg button.on,html.dark .iconbtn,html.dark .cb,html.dark .cbx,html.dark .cbx.all, html.dark .bd,html.dark .tier,html.dark .ch-col,html.dark .miss,html.dark .ucard, html.dark .badge-edit-img,html.dark .imp-prev,html.dark .del-card,html.dark .ph-card,html.dark kbd,html.dark .st-btn{background:#26282D} html.dark .btn:hover{background:#2B2D33} html.dark thead tr{background:#232529} html.dark th{background:#232529;border-bottom-color:var(--line)} html.dark td{border-bottom-color:#2A2C31} html.dark .note{background:#232529;border-top-color:var(--line)} html.dark .note.dai{background:#1D2C29} html.dark .pill.on{background:var(--dai-t);color:var(--dai-deep)} html.dark .pill.wait{background:var(--gold-t);color:var(--gold-deep)} html.dark .ucard{background:#26282D} html.dark tbody tr:hover{background:#24262B} html.dark tbody tr.sel,html.dark .batchbar{background:#2A211F} html.dark .btn.danger{background:#2A1F1E;color:#E2937F;border-color:rgba(196,82,63,.45)} html.dark .pill.gray{background:#2B2D32;color:var(--ink3)} html.dark .toast{background:#2C2E34;box-shadow:0 10px 26px rgba(0,0,0,.5)} html.dark .trend.up{background:var(--zhu-t);color:var(--zhu-deep)} html.dark .trend.dn{background:var(--dai-t);color:var(--dai-deep)} html.dark .lamp .lv{color:var(--gold-deep)} #theme-btn .ic-sun{display:none} html.dark #theme-btn .ic-moon{display:none} html.dark #theme-btn .ic-sun{display:block} html.dark .m-h .x,html.dark .modal .x{color:var(--ink3)} /* ===================================================================== * v34 视觉升级层 * 前面几轮把「能用」和「看得清」解决了；这一层解决「看着像不像一个成熟产品」。 * 改动全部落在观感层（阴影、层次、对齐、留白、焦点反馈），不动信息结构、 * 不动任何数字口径、不改任何交互语义。 * ===================================================================== */ /* ---------- 表格：粘性表头 + 斑马 + 数字等宽 ---------- */ .card{overflow:hidden} thead th{position:sticky;top:0;z-index:5; background:#FCFCFA;box-shadow:inset 0 -1px 0 var(--line)} html.dark thead th{background:#232529} /* 斑马：只给偶数行一层极淡的底，分组读起来有节奏，又不脏 */ tbody tr:nth-child(even){background:#FCFCFB} tbody tr:nth-child(even):hover{background:#F7F7F4} tbody tr:nth-child(odd):hover{background:#FCFCFA} html.dark tbody tr:nth-child(even){background:#1C1E22} html.dark tbody tr:nth-child(even):hover{background:#24262B} html.dark tbody tr:nth-child(odd):hover{background:#222429} /* 行分隔减淡，靠斑马而不是一排横线来分组 */ td{border-bottom-color:#F3F2EE} html.dark td{border-bottom-color:#26282C} /* 数字列统一等宽，竖向对齐成一条线（后台最影响「专业感」的一处） */ .num,td.num,td.r,.num,.meter+.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} td.r{text-align:right} /* ---------- KPI：顶部品牌色细条 + 悬停浮起 ---------- */ .kpi{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s} .kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:.85} .kpi.k0::before{background:linear-gradient(90deg,var(--zhu),#D2776A)} .kpi.k1::before{background:linear-gradient(90deg,var(--dai),#63A697)} .kpi.k2::before{background:linear-gradient(90deg,var(--gold),#D9B368)} .kpi.k3::before{background:linear-gradient(90deg,var(--ink3),#A9AAB2)} .kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)} .kpi .val{letter-spacing:-.025em} .kpi .val small{letter-spacing:0} html.dark .kpi.k3::before{background:linear-gradient(90deg,#9A9890,#B4B2AA)} html.dark .kpi:hover{box-shadow:0 2px 4px rgba(0,0,0,.4),0 16px 38px rgba(0,0,0,.45)} /* ---------- 空状态：两段式 + 印记图形 ---------- */ .empty{padding:56px 24px;color:var(--ink3);font-size:13.5px;line-height:1.9} /* 空状态图形：一方印。比空心圆有品牌感，也比插画轻—— 后台是工具页，不是内容页。 */ .empty .ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px; margin:0 auto 14px;border-radius:9px;background:var(--zhu-t);color:var(--zhu-deep); font-family:var(--kai);font-size:22px;font-weight:600;opacity:.9;line-height:1; border:1px solid rgba(176,58,46,.16)} html.dark .empty .ic{background:var(--zhu-t);color:var(--zhu-deep);border-color:rgba(196,82,63,.28)} .empty b{display:block;color:var(--ink2);font-size:14.5px;font-weight:600;margin-bottom:5px} .empty em{display:block;font-style:normal;font-size:12.5px;color:var(--ink3);max-width:420px;margin:0 auto} html.dark .empty b{color:var(--ink2)} /* ---------- 键盘焦点：后台是高频键盘界面，必须看得见焦点 ---------- */ a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible, textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--dai);outline-offset:2px;border-radius:5px} html.dark a:focus-visible,html.dark button:focus-visible,html.dark select:focus-visible, html.dark input:focus-visible,html.dark textarea:focus-visible{outline-color:#78B8A9} /* ---------- 按下反馈：所有可点元素有一点点回弹 ---------- */ .btn:active,.iconbtn:active,.seg button:active,.pg:active{transform:translateY(1px)} .btn{transition:background .15s,box-shadow .15s,transform .1s,border-color .15s} .iconbtn{transition:background .15s,color .15s,transform .1s} .seg button{transition:background .15s,color .15s,transform .1s} /* ---------- 卡片层级：阴影再分一档，滚动时更利落 ---------- */ .card{box-shadow:var(--sh);transition:box-shadow .18s} .card:hover{box-shadow:var(--sh-lift)} /* ---------- 侧栏当前项：左侧指示条改成渐隐的短条，更精致 ---------- */ .nav a.on::before{background:linear-gradient(180deg,#D2544A,#A63A32);height:18px;top:10px} /* ---------- 表格工具条与内容之间的呼吸 ---------- */ .card-h{padding:16px 20px} .card-h h3{letter-spacing:.01em} /* —— v34 暗色补漏：这些组件在浅色下写死了浅底，暗色下变成纸片浮在深色上， 其中分页按钮与侧栏计数是「白底白字」（对比度 1.0，等于没有）。逐个拨回来。 —— */ html.dark .pg{background:#26282D;border-color:var(--line2);color:var(--ink2)} html.dark .pg:hover{background:#2F3137;border-color:var(--line2);color:var(--ink)} html.dark .pg.on{background:var(--ink);border-color:var(--ink);color:var(--paper)} html.dark .pg.on{background:#E9E7E2;border-color:#E9E7E2;color:#17181B} html.dark .uava{background:#33302A;color:#D9C79A} html.dark .uava.minor{background:var(--dai-t);color:var(--dai-deep)} html.dark .who i{background:#2B2D33;color:var(--ink)} html.dark .kbd{background:#26282D;border-color:var(--line2);color:var(--ink3)} html.dark .badge-demo{background:var(--gold-t);color:var(--gold-deep);border-color:rgba(201,161,92,.4)} html.dark .sb-tag{background:var(--gold-t);color:var(--gold-deep)} html.dark .demo-mark{background:#232529;border-left-color:var(--gold);color:var(--ink2)} html.dark .m-foot{background:#232529;border-top-color:var(--line)} html.dark .imp-prev{background:#26282D;border-color:var(--line2)} html.dark .kpi.dim{background:#232529;border-style:dashed} html.dark .note.dai{background:#1D2C29} html.dark tbody tr:hover{background:#24262B} html.dark .meter i{background:linear-gradient(90deg,#4E9384,#2F6F63)} html.dark .meter.zhu i{background:linear-gradient(90deg,#C4523F,#8E2A23)} html.dark .meter.gold i{background:linear-gradient(90deg,#C9A15C,#7C5813)} html.dark .bar .b{background:linear-gradient(180deg,#5C9B92,#356561)} html.dark .bar.today .b{background:linear-gradient(180deg,#C4523F,#8E2A23)} html.dark .chart .bars{background:transparent} html.dark .switch{background:#3A3D44} html.dark .switch.on{background:var(--dai)} /* switch-row 是系统配置开关的外框，浅色下白底；暗色不换肤就是浮在深卡上的白纸片 */ html.dark .switch-row{background:#26282D;border-color:#3A3D44} html.dark .lg-seal{box-shadow:0 6px 18px rgba(0,0,0,.5)} html.dark .cmdk-box,html.dark .dd,html.dark .notif{border-color:var(--line2)} html.dark .u-lk{color:var(--zhu-deep)} html.dark .u-lk:hover{color:var(--zhu)} html.dark .row.grp{background:#1B1C20;color:var(--ink3)} html.dark .subj-bar{background:#232529;border-color:#3B3D43} html.dark .subj-bar .sb-txt{color:var(--ink2)} html.dark .subj-bar .sb-pill{background:#2B2D32;color:var(--gold-deep)} html.dark tbody tr.sel{background:#2A211F} html.dark .meter{background:#26282D} html.dark .empty{color:var(--ink3)} /* ============================================================ * 组件补齐（视图里在用、但 demo 的样式表里没有的类） * 这些缺失的症状很具体：卡片内容贴边、胶囊角标挤在一起、筛选条点了没反应。 * ============================================================ */ /* 卡片内边距：几乎所有页面的「卡片正文」都套在 .card-pad 里。 没有它，表单与表格直接压在卡片边框上，看起来像排版坏了。 */ .card-pad{padding:16px 20px} .card > .card-pad:last-child{padding-bottom:18px} .card-pad + .card-pad{border-top:1px solid var(--line)} /* 胶囊里右上角的小角标（虚词卡片的义项条数）。 不能用 vertical-align:super —— 会把汉字顶出行框，字被切掉一截； 绝对定位既不影响行高，也不会挤动胶囊宽度。 */ .chip{position:relative;text-decoration:none;padding-right:16px} .cpy{position:absolute;right:4px;top:-1px;font-size:9px;line-height:1;font-weight:600;color:var(--ink3)} .chip.on .cpy{color:var(--zhu-deep)} /* 小标题（编辑弹层里的分节标题） */ .mpv-sec-h{font-size:12px;font-weight:600;color:var(--ink2);margin:16px 0 8px;letter-spacing:.01em} /* KPI 卡片可点：整块是筛选入口 */ a.kpi{display:block;text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .16s} a.kpi:hover{border-color:var(--line2);box-shadow:var(--sh)} a.kpi:focus-visible{outline:2px solid var(--zhu);outline-offset:2px} /* 分段选择器：视图里用的是 （要保留其它查询参数），样式与