:root{ --brand:#1F4E78; --brand-2:#2E6DA4; --brand-soft:#EAF2F9; --ok:#1B8A5A; --ok-bg:#E7F6EE; --warn:#B7791F; --warn-bg:#FDF4E3; --danger:#C0392B; --danger-bg:#FCEDEB; --info:#2C6FB5; --info-bg:#E9F1FA; --gray-bg:#F5F7FA; --ink:#1A2432; --ink-2:#48566B; --ink-3:#7B8899; --line:#E3E8EF; --line-2:#EEF2F7; --white:#fff; --radius:8px; --sh:0 1px 3px rgba(20,40,70,.07),0 6px 18px rgba(20,40,70,.05); --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--gray-bg);color:var(--ink);font-size:13px;-webkit-font-smoothing:antialiased; } button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} button{cursor:pointer;border:none;background:none} svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} table{border-collapse:collapse;width:100%} a{color:var(--brand-2);text-decoration:none} #app{display:flex;height:100vh;overflow:hidden} /* ---------- Sidebar ---------- */ .sidebar{ width:212px;flex:none;background:#13293F;color:#C4D4E4;display:flex;flex-direction:column; transition:width .18s;overflow:hidden; } .sidebar.mini{width:56px} .brand{display:flex;align-items:center;gap:10px;padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.07);white-space:nowrap} .brand-logo{ width:30px;height:30px;flex:none;border-radius:7px;background:linear-gradient(135deg,#3B82C4,#1F4E78); color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px } .brand-txt{display:flex;flex-direction:column;line-height:1.25} .brand-txt b{color:#fff;font-size:14px;letter-spacing:.5px} .brand-txt span{font-size:10px;color:#6D87A1;letter-spacing:.4px} .sidebar.mini .brand-txt{display:none} .nav{flex:1;overflow-y:auto;padding:8px 0} .nav::-webkit-scrollbar{width:4px} .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px} .nav-group{padding:12px 14px 5px;font-size:10.5px;color:#5D7691;letter-spacing:1px;font-weight:600} .sidebar.mini .nav-group{text-align:center;padding:10px 0 4px;font-size:9px;overflow:hidden} /* ---------- 侧栏置顶卡片（反馈中心） ---------- */ /* 需求反馈是全员入口，必须第一眼可见，但配色收敛在品牌蓝体系内避免喧宾夺主 */ .nav-pinned{padding:10px 10px 2px;flex:none} .sidebar.mini .nav-pinned{padding:8px 6px 0} .pinned-card{ display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;cursor:pointer; background:linear-gradient(135deg,#1F4E78,#2E6DA4);color:#fff;position:relative; box-shadow:0 2px 8px rgba(15,45,75,.35);transition:.14s;border:1px solid rgba(255,255,255,.12) } .pinned-card:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(15,45,75,.45)} .pinned-card.on{outline:2px solid #7FB8E8;outline-offset:-2px} .pc-ico{position:relative;flex:none;display:flex} .pc-ico svg{width:19px;height:19px} .pc-ico em{ position:absolute;top:-7px;right:-9px;background:#E8543F;color:#fff;border-radius:9px; font-size:10px;font-style:normal;min-width:17px;height:17px;padding:0 4px;display:flex; align-items:center;justify-content:center;font-weight:700;border:1.5px solid #1F4E78 } .pc-txt{flex:1;min-width:0;line-height:1.3;white-space:nowrap;overflow:hidden} .pc-txt b{display:block;font-size:13px;font-weight:600;letter-spacing:.2px} .pc-txt span{font-size:10.5px;opacity:.82} .pc-p0,.pc-new{ flex:none;font-size:10px;font-weight:700;border-radius:9px;padding:1px 6px;letter-spacing:.2px } .pc-p0{background:#FF6B55;color:#fff} .pc-new{background:rgba(255,255,255,.22);color:#fff} .sidebar.mini .pinned-card{justify-content:center;padding:10px 0} .sidebar.mini .pc-txt,.sidebar.mini .pc-p0,.sidebar.mini .pc-new{display:none} .sidebar.mini .pc-ico em{right:-6px} .nav-item{ display:flex;align-items:center;gap:9px;padding:8px 14px;color:#B7C9DB;font-size:12.5px; cursor:pointer;border-left:2.5px solid transparent;white-space:nowrap;transition:.12s } .nav-item:hover{background:rgba(255,255,255,.05);color:#fff} .nav-item.active{background:rgba(59,130,196,.18);color:#fff;border-left-color:#4A9BE0;font-weight:600} .nav-item .nb{margin-left:auto;font-size:10px;background:#3B82C4;color:#fff;border-radius:9px;padding:1px 6px;font-weight:600} .sidebar.mini .nav-item{justify-content:center;padding:9px 0} .sidebar.mini .nav-item span,.sidebar.mini .nav-item .nb{display:none} .sidebar-foot{border-top:1px solid rgba(255,255,255,.07);padding:10px 12px} .tenant{display:flex;align-items:center;gap:8px;font-size:11px;white-space:nowrap} .tenant .dot{width:7px;height:7px;border-radius:50%;background:#3FBF7F;flex:none;box-shadow:0 0 0 3px rgba(63,191,127,.18)} .tenant b{display:block;color:#D6E3EF;font-weight:500;font-size:11.5px} .tenant small{color:#6D87A1;font-size:10px} .sidebar.mini .sidebar-foot{display:none} /* ---------- Topbar ---------- */ .main{flex:1;display:flex;flex-direction:column;min-width:0}.topbar{ height:48px;flex:none;background:#fff;border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;padding:0 14px;gap:12px } .tb-left,.tb-right{display:flex;align-items:center;gap:8px} .icon-btn{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--ink-3)} .icon-btn:hover{background:var(--gray-bg);color:var(--ink)} .pn-search{position:relative;display:flex;align-items:center;gap:7px;background:var(--gray-bg);border:1px solid transparent;border-radius:7px;padding:0 10px;height:30px;width:300px;transition:.15s} .pn-search:focus-within{background:#fff;border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)} .pn-search svg{color:var(--ink-3)} .pn-search input{border:none;background:none;outline:none;flex:1;font-size:12.5px} .pn-result{position:absolute;top:34px;left:0;width:460px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh);max-height:440px;overflow-y:auto;display:none;z-index:60} .pn-result.show{display:block} .pn-grp{border-bottom:1px solid var(--line-2)} .pn-grp:last-child{border:none} .pn-grp h5{padding:7px 12px;font-size:11px;color:var(--ink-3);background:#FAFCFE;font-weight:600;letter-spacing:.3px} .pn-row{padding:7px 12px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px} .pn-row:hover{background:var(--brand-soft)} .pn-row .pn{font-family:var(--mono);font-weight:600;color:var(--brand)} .pn-row .meta{color:var(--ink-3);font-size:11px;margin-left:auto;font-family:var(--mono)} /* v1.8.2：hidden 必须真的隐藏。 * 坑：.tb-btn 自带 display:flex，作者样式优先级高于 UA 的 [hidden]{display:none}， * 于是 `hidden` 形同虚设——后台入口对非管理员"藏"不掉。这条兜底一次管全站。 */ [hidden]{display:none !important} .tb-btn{ display:flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:6px; color:var(--ink-2);font-size:12px;border:1px solid transparent;position:relative;white-space:nowrap } .tb-btn:hover{background:var(--gray-bg);color:var(--ink)} /* 快捷键提示（v1.6.7）：小号 kbd，让「F」这个能力被看见而不是藏在 tooltip 里 */ .tb-kbd{ font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:1; padding:2px 4px;border-radius:3px;background:#fff;border:1px solid #C3D8EC;border-bottom-width:2px; color:var(--brand);opacity:.85 } .tb-btn:hover .tb-kbd{border-color:var(--brand-2);opacity:1} /* 风格切换按钮（v1.6.5）：图标 + 当前风格名，做成白底描边控件，明确是可点的开关而不是装饰图标 */ .tb-btn.theme-btn{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600} .tb-btn.theme-btn:hover{border-color:var(--brand-2);color:var(--brand);background:var(--brand-soft)} .tb-btn.theme-btn[aria-expanded="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)} /* 后台管理入口（v1.8.2）：只对 R01 显示，做成描边按钮——比业务按钮"重"一档， 但比「我要反馈」克制，避免管理入口抢走业务注意力 */ .tb-btn.admin-entry{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600} .tb-btn.admin-entry:hover{border-color:var(--brand-2);color:var(--brand);background:var(--brand-soft)} .tb-btn.admin-entry svg{color:var(--brand)} /* 反馈按钮：顶栏常驻显眼位，与待办同级但配色更醒目 */ .tb-btn.fb{color:var(--brand);font-weight:600;background:var(--brand-soft);border:1px solid #C5DCF0} .tb-btn.fb:hover{background:#DCEAFA;color:var(--brand-2);border-color:var(--brand-2)} .tb-btn.fb.clean{background:var(--gray-bg);border-color:transparent;color:var(--ink-2);font-weight:400} .tb-btn.fb em{ font-style:normal;background:var(--danger);color:#fff;border-radius:9px;font-size:10px; min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:700 } .tb-btn.fb.clean em{background:var(--ink-3)} .badge-btn em{ font-style:normal;background:var(--danger);color:#fff;border-radius:9px;font-size:10px; min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600;margin-left:1px } .role-switch select{height:30px;border:1px solid var(--line);border-radius:6px;padding:0 8px;background:#fff;font-size:12px;outline:none;cursor:pointer;max-width:190px} /* ---------- Tabs ---------- */ .tabbar{height:34px;flex:none;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;padding:0 8px;gap:3px;overflow-x:auto} .tabbar::-webkit-scrollbar{height:0} .tab{ display:flex;align-items:center;gap:7px;height:26px;padding:0 9px;border-radius:6px 6px 0 0; font-size:12px;color:var(--ink-3);cursor:pointer;white-space:nowrap;border:1px solid transparent;border-bottom:none;margin-bottom:-1px } .tab:hover{background:var(--gray-bg);color:var(--ink-2)} .tab.active{background:var(--gray-bg);color:var(--brand);border-color:var(--line);font-weight:600} .tab .x{width:14px;height:14px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1} .tab .x:hover{background:#D5DCE4;color:var(--danger)} /* ---------- Content ---------- */ .content{flex:1;overflow-y:auto;padding:14px;min-height:0} .page-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;gap:12px;flex-wrap:wrap} .page-title h2{font-size:16px;font-weight:600;letter-spacing:.2px} .page-title p{font-size:11.5px;color:var(--ink-3);margin-top:3px} .page-actions{display:flex;gap:7px;flex-wrap:wrap} .btn{ height:28px;padding:0 12px;border-radius:6px;background:#fff;border:1px solid var(--line); color:var(--ink-2);font-size:12px;display:inline-flex;align-items:center;gap:5px;transition:.12s;font-weight:500 } .btn:hover{border-color:#B9C6D5;color:var(--ink);background:#FBFCFE} .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff} .btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2)} .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff} .btn.ok:hover{filter:brightness(1.08)} .btn.danger{background:var(--danger);border-color:var(--danger);color:#fff} .btn.danger:hover{filter:brightness(1.08)} .btn.ghost{background:transparent;border-color:transparent;color:var(--ink-3)} .btn.ghost:hover{background:var(--gray-bg);color:var(--ink)} .btn.sm{height:24px;padding:0 9px;font-size:11.5px} .btn:disabled{opacity:.45;cursor:not-allowed} /* Cards */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh)} .card-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line-2)} .card-head h4{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px} .card-head .sub{font-size:11px;color:var(--ink-3);font-weight:400} .card-body{padding:12px 14px} .card-body.flush{padding:0} /* KPI */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px} .kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--sh);position:relative;overflow:hidden} .kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-2)} .kpi.ok::after{background:var(--ok)} .kpi.warn::after{background:var(--warn)} .kpi.danger::after{background:var(--danger)} .kpi .k-label{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px} .kpi .k-val{font-size:22px;font-weight:650;margin-top:5px;letter-spacing:-.3px;font-variant-numeric:tabular-nums} .kpi .k-val small{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:2px} .kpi .k-extra{font-size:11px;color:var(--ink-3);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap} /* Filter bar */ .filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px;box-shadow:var(--sh)} .filter-grid{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end} .field{display:flex;flex-direction:column;gap:3px;min-width:0} .field label{font-size:11px;color:var(--ink-3);font-weight:500} .field input,.field select,.field textarea{ height:28px;border:1px solid var(--line);border-radius:6px;padding:0 8px;background:#fff; outline:none;font-size:12px;min-width:130px;transition:.12s } .field textarea{height:auto;padding:6px 8px;resize:vertical;line-height:1.5} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)} .field input:read-only{background:#F7F9FB;color:var(--ink-3)} .field.w-sm input,.field.w-sm select{min-width:100px} .filter-actions{display:flex;gap:6px;margin-left:auto} .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2)} .chip{ display:inline-flex;align-items:center;gap:5px;background:var(--brand-soft);color:var(--brand); border-radius:12px;padding:2px 9px;font-size:11px } .chip b{font-weight:600;font-family:var(--mono)} .chip button{color:var(--brand);opacity:.6;font-size:13px;line-height:1} .chip button:hover{opacity:1;color:var(--danger)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.danger{background:var(--danger-bg);color:var(--danger)} .chip.ok{background:var(--ok-bg);color:var(--ok)} /* Table */ .tbl-wrap{overflow-x:auto} .tbl{font-size:12px;min-width:100%} .tbl th{ text-align:left;padding:8px 10px;background:#F7F9FB;color:var(--ink-2);font-weight:600;font-size:11.5px; border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2 } .tbl th.sortable{cursor:pointer;user-select:none} .tbl th.sortable:hover{color:var(--brand)} .tbl td{padding:7px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle;white-space:nowrap} .tbl tbody tr:hover{background:#FAFCFE} .tbl tbody tr.sel{background:var(--brand-soft)} .tbl tbody tr.clickable{cursor:pointer} .tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)} .tbl .mono{font-family:var(--mono);font-size:11.5px} .tbl .strong{font-weight:600} .tbl tfoot td{background:#F7F9FB;font-weight:600;border-top:1.5px solid var(--line);border-bottom:none} .tbl .col-chk{width:34px} .tbl .col-act{width:1%;white-space:nowrap} .tbl-empty{padding:44px 20px;text-align:center;color:var(--ink-3)} .tbl-empty svg{width:34px;height:34px;opacity:.3;margin-bottom:8px} .tbl-empty p{font-size:12px;margin-bottom:4px;color:var(--ink-2)} .tbl-empty span{font-size:11px} .pager{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--ink-3)} .pager .pg-btns{display:flex;gap:4px;align-items:center} .pg-btns button{width:24px;height:24px;border-radius:5px;border:1px solid var(--line);background:#fff;font-size:11.5px;color:var(--ink-2)} .pg-btns button:hover:not(:disabled){border-color:var(--brand-2);color:var(--brand)} .pg-btns button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} .pg-btns button:disabled{opacity:.4;cursor:not-allowed} /* Badges */ .tag{ display:inline-flex;align-items:center;gap:4px;border-radius:4px;padding:1.5px 7px;font-size:11px; font-weight:500;white-space:nowrap;line-height:1.6 } .tag::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} .tag.plain::before{display:none} .tag-gray{background:#F0F3F7;color:var(--ink-2)} .tag-blue{background:var(--info-bg);color:var(--info)} .tag-green{background:var(--ok-bg);color:var(--ok)} .tag-orange{background:var(--warn-bg);color:var(--warn)} .tag-red{background:var(--danger-bg);color:var(--danger)} .tag-solid-red{background:var(--danger);color:#fff} .tag-solid-red::before{background:#fff} .tag-purple{background:#F3EEFB;color:#6B4FBB} /* Layout grids */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .grid-21{display:grid;grid-template-columns:2fr 1fr;gap:10px} .grid-12{display:grid;grid-template-columns:1fr 2fr;gap:10px} @media(max-width:1180px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.grid-21,.grid-12{grid-template-columns:1fr}} @media(max-width:820px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* Desc list */ .desc{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px} .desc dt{color:var(--ink-3);white-space:nowrap} .desc dd{color:var(--ink)} .desc dd.mono{font-family:var(--mono)} /* Progress / bar */ .bar{height:6px;border-radius:3px;background:var(--line-2);overflow:hidden;display:flex} .bar i{display:block;height:100%;background:var(--brand-2)} .bar i.g{background:var(--ok)} .bar i.o{background:var(--warn)} .bar i.r{background:var(--danger)} .bar-legend{display:flex;gap:12px;font-size:11px;color:var(--ink-3);margin-top:6px;flex-wrap:wrap} .bar-legend span{display:flex;align-items:center;gap:4px} .bar-legend u{width:8px;height:8px;border-radius:2px;text-decoration:none;display:inline-block} /* Flow / steps */ .steps{display:flex;align-items:center;gap:0;margin:4px 0 2px;flex-wrap:wrap} .step{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);padding-right:8px} .step i{ width:19px;height:19px;border-radius:50%;background:#E7ECF2;color:var(--ink-3);display:flex; align-items:center;justify-content:center;font-size:10.5px;font-weight:600;font-style:normal;flex:none } .step.done i{background:var(--ok-bg);color:var(--ok)} .step.done{color:var(--ink-2)} .step.cur i{background:var(--brand);color:#fff} .step.cur{color:var(--brand);font-weight:600} .step-line{width:22px;height:1.5px;background:var(--line);margin-right:8px} /* Drawer */ .drawer-mask{position:fixed;inset:0;background:rgba(18,32,48,.42);opacity:0;pointer-events:none;transition:.2s;z-index:90} .drawer-mask.show{opacity:1;pointer-events:auto} .drawer{ position:fixed;top:0;right:0;bottom:0;width:880px;max-width:96vw;background:#fff;z-index:91; transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.12) } .drawer.wide{width:1120px} .drawer.show{transform:translateX(0)} .drawer-head{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);flex:none} .drawer-head h3{font-size:14.5px;font-weight:600} .drawer-head p{font-size:11.5px;color:var(--ink-3);margin-top:2px} .drawer-body{flex:1;overflow-y:auto;padding:14px 16px;background:#FAFBFD} .drawer-foot{padding:10px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:#fff;flex:none;flex-wrap:wrap} .drawer-foot .left{margin-right:auto} /* Modal */ .modal-mask{position:fixed;inset:0;background:rgba(18,32,48,.46);display:none;align-items:center;justify-content:center;z-index:95;padding:22px;backdrop-filter:blur(2px)} .modal-mask.show{display:flex} .modal{background:#fff;border-radius:12px;width:520px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 22px 60px rgba(12,26,42,.26);overflow:hidden} .modal.wide{width:840px} /* xl：表单类弹窗专用，宽到足以平铺字段而不必反复滚动 */ .modal.xl{width:1060px} .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);flex:none} .modal-head .mh-txt{min-width:0} .modal-head h3{font-size:15px;font-weight:600;letter-spacing:.2px} .modal-head p{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.5} .modal-body{padding:14px 18px;overflow-y:auto;flex:1;background:#FAFBFD} .modal-foot{padding:10px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex:none} /* Toast */ .toast-wrap{position:fixed;top:56px;right:16px;z-index:120;display:flex;flex-direction:column;gap:8px} .toast{ background:#22303F;color:#fff;padding:9px 14px;border-radius:7px;font-size:12.5px;min-width:230px;max-width:440px; box-shadow:0 6px 20px rgba(0,0,0,.2);display:flex;align-items:flex-start;gap:8px;animation:slideIn .22s } .toast.err{background:#B33A2B} .toast.ok{background:#1B7A50} .toast.warn{background:#A9701A} .toast svg{margin-top:1px;flex:none} .toast .tt{font-weight:600;display:block;margin-bottom:1px} .toast .td{font-size:11.5px;opacity:.92;line-height:1.5;white-space:pre-line} @keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}} /* Alert */ .alert{display:flex;gap:9px;padding:9px 12px;border-radius:7px;font-size:12px;line-height:1.6;margin-bottom:10px;align-items:flex-start} .alert svg{margin-top:1px} .alert b{font-weight:600} .alert-info{background:var(--info-bg);color:#245C90} .alert-warn{background:var(--warn-bg);color:#8C5D14} .alert-danger{background:var(--danger-bg);color:#983328} .alert-ok{background:var(--ok-bg);color:#156B47} .alert-gray{background:#F0F3F7;color:var(--ink-2)} .alert ul{margin:4px 0 0 15px} /* Formula box (rule calc) */ .formula{background:#1B2735;border-radius:8px;padding:12px 14px;color:#D6E4F0;font-size:12.5px;line-height:1.9;font-family:var(--mono)} .formula .fx{color:#8FC3F0} .formula .hl{color:#7FDB9C;font-weight:600} .formula .cn{color:#8B9AAB;font-family:inherit;font-size:11.5px} .calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px} .calc-cell{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 10px} .calc-cell label{font-size:10.5px;color:var(--ink-3);display:block} .calc-cell input,.calc-cell select{width:100%;border:1px solid var(--line);border-radius:5px;height:26px;padding:0 7px;outline:none;font-size:12px;font-family:var(--mono)} .calc-cell input:focus{border-color:var(--brand-2);box-shadow:0 0 0 2px var(--brand-soft)} .calc-out{margin-top:10px;background:var(--brand-soft);border:1px solid #C5DCF0;border-radius:7px;padding:11px 13px;font-size:13px} .calc-out .val{font-size:20px;font-weight:650;color:var(--brand);font-family:var(--mono)} .calc-out .exp{font-size:11.5px;color:var(--ink-2);margin-top:5px;line-height:1.7} /* Timeline */ .tl{position:relative;padding-left:20px} .tl::before{content:'';position:absolute;left:6px;top:5px;bottom:5px;width:1.5px;background:var(--line)} .tl-item{position:relative;padding-bottom:13px} .tl-item::before{content:'';position:absolute;left:-17px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--brand-2);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--brand-2)} .tl-item.done::before{background:var(--ok);box-shadow:0 0 0 1.5px var(--ok)} .tl-item.warn::before{background:var(--warn);box-shadow:0 0 0 1.5px var(--warn)} .tl-item.pend::before{background:#C4CDD8;box-shadow:0 0 0 1.5px #C4CDD8} .tl-t{font-size:12px;font-weight:600} .tl-m{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.6} /* Split / tree */ .split{display:flex;gap:10px} .split-l{flex:1.4} .split-r{flex:1} .split-line{border-left:1.5px solid var(--line);padding-left:10px;margin-left:8px} /* Code */ .code{background:#1B2735;color:#C6E3F7;padding:9px 11px;border-radius:6px;font-family:var(--mono);font-size:11.5px;line-height:1.75;overflow-x:auto;white-space:pre} .code .c{color:#6D8496} .code .k{color:#7FC7FF} .code .s{color:#9BE8A8} /* Misc */ .mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px} .mb8{margin-bottom:8px}.mb12{margin-bottom:12px} .flex{display:flex}.fc{display:flex;flex-direction:column} .gap6{gap:6px}.gap10{gap:10px}.gap14{gap:14px} .aic{align-items:center}.jcb{justify-content:space-between} .wrap{flex-wrap:wrap}.grow{flex:1} .right{text-align:right}.center{text-align:center} .fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px} .muted{color:var(--ink-3)}.dim{color:var(--ink-2)} .strong{font-weight:600}.up{color:var(--ok)}.down{color:var(--danger)} .mono{font-family:var(--mono)} .nowrap{white-space:nowrap} .hr{height:1px;background:var(--line-2);margin:10px 0} .link{color:var(--brand-2);cursor:pointer} .link:hover{text-decoration:underline} .trunc{max-width:280px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom} .inline-input{border:1px solid transparent;background:transparent;height:24px;border-radius:4px;padding:0 5px;width:100%;font-size:12px;outline:none} .inline-input:hover{border-color:var(--line)} .inline-input:focus{border-color:var(--brand-2);background:#fff;box-shadow:0 0 0 2px var(--brand-soft)} .inline-input:read-only{color:var(--ink-3)} .tbl .inline-input{font-family:var(--mono)} /* ---------- 反馈中心 ---------- */ .fb-item{ background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px; cursor:pointer;transition:.12s;border-left:3px solid transparent } .fb-item:hover{border-color:var(--brand-2);box-shadow:var(--sh)} .fb-item.p0{border-left-color:var(--danger)} .fb-item.p1{border-left-color:var(--warn)} .fb-item.done{opacity:.72} .fb-item.done:hover{opacity:1} .fb-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px} .fb-title{font-size:13.5px;font-weight:600;line-height:1.5;flex:1} .fb-body{font-size:12.5px;color:var(--ink-2);line-height:1.85;white-space:pre-wrap} .fb-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2);font-size:11.5px;color:var(--ink-3)} .fb-meta b{color:var(--ink-2);font-weight:500} .fb-anchor{ display:inline-flex;align-items:center;gap:4px;background:var(--brand-soft);color:var(--brand); border-radius:4px;padding:1px 7px;font-size:11px;font-family:var(--mono) } /* 注：v1.3 曾用 .fb-thumb 承载「固定 104px 高的文件块」，v1.9.1 改为 网格缩略图后复用了同名类，旧规则（width:100%;height:104px;flex 居中） 会把缩略图压扁，故整块删除——.fb-thumb 的定义现在只在文件末尾一处。 */ .fb-file{ display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line); border-radius:6px;cursor:pointer;transition:.12s } .fb-file:hover{border-color:var(--brand-2);background:#FAFCFE} .fb-reply{ border-left:2px solid var(--line);padding:2px 0 2px 12px;margin-bottom:12px } .fb-reply:last-child{margin-bottom:0} .fb-status-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin:2px 0 10px} .fb-sf{ display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);padding-right:10px;white-space:nowrap } .fb-sf i{ width:18px;height:18px;border-radius:50%;background:#EDF1F5;color:var(--ink-3);font-style:normal; display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex:none } .fb-sf.done i{background:var(--ok-bg);color:var(--ok)} .fb-sf.cur i{background:var(--brand);color:#fff} .fb-sf.cur{color:var(--brand);font-weight:600} .fb-sf-line{width:16px;height:1.5px;background:var(--line);margin-right:10px} /* 列表列宽约束：避免长标题把相邻列压变形 */ .fb-cellwrap{max-width:340px;line-height:1.55} .fb-cellwrap b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fb-2line{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin-top:2px;line-height:1.45 } /* ---------- 可选折叠区块（定位信息） ---------- */ .fb-optional{border:1px dashed var(--line);border-radius:7px;background:#FCFDFE} /* 平铺 chip 单选（v1.4.1：分类/优先级不再用下拉） */ .fb-chiprow{display:flex;align-items:flex-start;gap:10px} .fb-chiplabel{flex:none;width:64px;font-size:12px;font-weight:600;color:var(--ink);padding-top:5px} .fb-chiplabel i{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--ink-3)} .fb-chips{display:flex;flex-wrap:wrap;gap:6px} .fb-chip{ border:1px solid var(--line);background:#fff;color:var(--ink); border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer; transition:all .14s;line-height:1.5; } .fb-chip:hover{border-color:var(--brand-2);color:var(--brand)} .fb-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} .fb-chip.tone-red.on{background:#C0392B;border-color:#C0392B} .fb-chip.tone-orange.on{background:#B7791F;border-color:#B7791F} .fb-chip.tone-blue.on{background:#2C6FB5;border-color:#2C6FB5} .fb-chip.tone-gray.on{background:#64748B;border-color:#64748B} .fb-opt-toggle{ display:flex;align-items:center;gap:7px;width:100%;padding:8px 11px;text-align:left; color:var(--ink-2);font-size:12.5px;transition:.12s } .fb-opt-toggle:hover{background:var(--gray-bg);color:var(--brand)} .fb-opt-toggle.on{color:var(--brand);font-weight:600} .fb-opt-toggle svg{width:15px;height:15px;transition:transform .16s;flex:none;color:var(--ink-3)} .fb-opt-toggle.on svg{color:var(--brand)} .fb-opt-toggle em{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:400;margin-left:auto;text-align:right} .fb-opt-body{padding:0 11px 11px} /* ---------- 粘贴 / 拖拽上传区（v1.6.3：粘贴升为主视觉） ---------- */ /* 整块用品牌色描边 + 渐变头，把「截图直接粘进来」当成一等公民，而不是灰色小字 */ .fb-attach{border:1px solid #C6D8EA;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(22,50,76,.05)} .fb-attach-head{ display:flex;align-items:center;gap:11px;padding:11px 14px; background:linear-gradient(96deg,#EAF2FA,#F5FAFE 58%,#fff);border-bottom:1px solid #DCE8F4 } .fba-ic{ width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center; background:var(--brand);color:#fff;box-shadow:0 2px 6px rgba(31,78,120,.28) } .fba-ic svg{width:18px;height:18px} .fba-txt{flex:1;min-width:0} .fba-txt b{display:block;font-size:13.5px;color:var(--ink);letter-spacing:.2px} .fba-txt span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.6} /* 键盘键位：白底 + 下沉边框 + 加粗，用来承载「⌘V 就能粘」这一核心信息 */ .fb-attach kbd,.fb-empty kbd{ display:inline-block;min-width:21px;text-align:center;background:#fff;border:1px solid #AEC3D6;border-bottom-width:2px; border-radius:5px;padding:0 6px;font-size:11.5px;line-height:1.55;font-family:var(--mono);font-weight:700; color:var(--brand);margin:0 1px;box-shadow:0 1px 0 rgba(22,50,76,.07) } .fb-drop{ margin:11px 14px 14px;border:1.5px dashed #BCCFE0;border-radius:9px;background:#FBFDFF; transition:.14s;padding:10px;min-height:108px } .fb-drop.over{background:var(--brand-soft);border-color:var(--brand-2);border-style:solid;box-shadow:inset 0 0 0 2px rgba(46,109,164,.12)} .fb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 12px 14px;text-align:center} .fb-empty-kbd{display:flex;align-items:center;gap:6px;margin-bottom:4px;color:#9DB2C5;font-size:12px} .fb-empty-kbd kbd{font-size:16px;padding:3px 10px;color:var(--brand)} .fb-empty p{font-size:13.5px;font-weight:600;color:var(--ink)} .fb-empty span{font-size:12px;color:var(--ink-2);line-height:1.65;max-width:460px} .fb-filecell{padding:8px 9px} .fb-pv{ height:104px;margin:4px 0 6px;border:1px solid var(--line);border-radius:6px;overflow:hidden; background:var(--gray-bg);display:flex;align-items:center;justify-content:center;cursor:zoom-in } .fb-pv img{width:100%;height:100%;object-fit:cover;object-position:top center} .fb-pv-no{color:var(--ink-3);opacity:.4} .fb-filebar{display:flex;align-items:center;gap:5px} .fb-filebar .trunc{flex:1;min-width:0;font-size:11px} .fb-pv-file{flex-direction:column;gap:6px;color:var(--brand);cursor:pointer} .fb-pv-file svg{width:26px;height:26px} .fb-pv-file:hover{background:var(--brand-soft);border-color:var(--brand-2)} /* 缩略图放大：独立浮层。不能复用 #modal —— 反馈表单本身就在 #modal 里，复用会把表单清空 */ .fb-zoom-mask{ position:fixed;inset:0;z-index:110;background:rgba(12,22,34,.78);display:none; align-items:center;justify-content:center;padding:32px } .fb-zoom-mask.show{display:flex} .fb-zoom{max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:9px;align-items:center} .fb-zoom img{max-width:100%;max-height:calc(100vh - 130px);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.4);background:#fff} .fb-zoom-bar{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.86);font-size:12px} .fb-zoom-bar button{ background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff; border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer } .fb-zoom-bar button:hover{background:rgba(255,255,255,.26)} /* ============================================================ * 登录页（v1.5.0） * ============================================================ */ .login{display:grid;grid-template-columns:minmax(420px,1.05fr) 1fr;min-height:100vh;background:var(--bg)} .login-side{ position:relative;padding:48px 56px;display:flex;flex-direction:column; background:linear-gradient(150deg,#16324C 0%,#1F4E78 52%,#2E6DA4 100%);color:#fff;overflow:hidden; } .login-side::after{ content:'';position:absolute;right:-140px;bottom:-160px;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.16),rgba(255,255,255,0) 62%); } .lg-brand{display:flex;align-items:center;gap:12px} .lg-logo{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28); display:grid;place-items:center;font-weight:700;font-size:19px} .lg-brand b{display:block;font-size:17px;letter-spacing:.5px} .lg-brand span{font-size:11px;opacity:.72} .login-side h1{font-size:29px;line-height:1.42;margin:52px 0 14px;font-weight:600;letter-spacing:.5px} .lg-sub{font-size:13px;line-height:1.9;opacity:.78;max-width:420px} .lg-points{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;max-width:440px} .lg-points li{position:relative;padding-left:26px} .lg-points li::before{content:'';position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5)} .lg-points li::after{content:'';position:absolute;left:4px;top:10px;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)} .lg-points b{display:block;font-size:13px;margin-bottom:3px} .lg-points span{font-size:12px;opacity:.72;line-height:1.7} .lg-foot{margin-top:auto;padding-top:36px;font-size:11px;opacity:.55;letter-spacing:.4px} .login-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px} .login-card{width:100%;max-width:392px;background:#fff;border:1px solid var(--line);border-radius:14px; padding:34px 34px 26px;box-shadow:0 12px 34px rgba(26,36,50,.08)} .login-card h2{font-size:22px;margin:0 0 6px;letter-spacing:1px} .login-hint{font-size:12px;color:var(--ink-3);line-height:1.7;margin:0 0 22px} .lg-field{display:block;margin-bottom:14px} .lg-field>span{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px} .lg-field input{width:100%;height:40px;border:1px solid var(--line);border-radius:7px;padding:0 12px;font-size:13px;background:#FCFDFE} .lg-field input:focus{outline:none;border-color:var(--brand-2);background:#fff;box-shadow:0 0 0 3px rgba(46,109,164,.12)} .lg-pwd{position:relative} .lg-pwd input{padding-right:40px} .lg-eye{position:absolute;right:6px;top:6px;width:28px;height:28px;border:0;background:transparent;cursor:pointer; color:var(--ink-3);border-radius:6px;display:grid;place-items:center} .lg-eye:hover{background:var(--gray-bg)} .lg-eye svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round} .lg-eye.on{color:var(--brand)} .lg-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 16px} .lg-check{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px;cursor:pointer} .lg-link{font-size:12px;color:var(--brand-2);text-decoration:none} .lg-link:hover{text-decoration:underline} .lg-err{background:#FDECEA;border:1px solid #F5C6C0;color:#C0392B;border-radius:7px; padding:8px 11px;font-size:12px;margin-bottom:12px;line-height:1.6} .lg-submit{width:100%;height:42px;font-size:14px;letter-spacing:3px} .lg-demo{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line)} .lg-demo-t{font-size:11px;color:var(--ink-3);margin-bottom:9px} .lg-demo-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .lg-acct-chip{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 6px;cursor:pointer;text-align:left;transition:.14s} .lg-acct-chip:hover{border-color:var(--brand-2);background:var(--brand-soft)} .lg-acct-chip b{display:block;font-size:12px;color:var(--ink)} .lg-acct-chip span{display:block;font-size:10px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lg-demo-note{font-size:11px;color:var(--ink-3);margin-top:10px;line-height:1.7} .lg-demo-note b{color:var(--ink-2)} .login-copy{margin-top:20px;font-size:11px;color:var(--ink-3)} @keyframes lgshake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-4px)}} .login-card.shake{animation:lgshake .36s} @media(max-width:980px){ .login{grid-template-columns:1fr} .login-side{display:none} .login-main{padding:32px 16px} } @media(max-width:1180px){ .login-side{padding:40px 34px} .login-side h1{font-size:24px} } /* ============================================================ * 顶栏用户区（v1.6.2） * 顶栏只留头像 + 姓名 + 岗位；身份明细、个人中心、后台管理、 * 演示视角、退出登录全部收进弹出菜单，不再各占一格。 * ============================================================ */ .user-menu{position:relative;display:flex} .user-chip{ display:flex;align-items:center;gap:7px;padding:3px 9px 3px 3px;border:1px solid var(--line); border-radius:999px;background:#fff;max-width:190px;height:30px;transition:.14s;text-align:left } .user-chip:hover{border-color:var(--brand-2);background:var(--brand-soft)} .user-chip[aria-expanded="true"]{border-color:var(--brand);background:var(--brand-soft)} .uc-av{width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand); display:grid;place-items:center;font-size:12px;font-weight:700;flex:none} .user-chip:hover .uc-av,.user-chip[aria-expanded="true"] .uc-av{background:#fff} .uc-txt{display:flex;flex-direction:column;line-height:1.25;overflow:hidden} .uc-txt b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .uc-txt i{font-style:normal;font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .uc-caret{width:13px;height:13px;color:var(--ink-3);flex:none;margin-left:1px;transition:transform .16s} .user-chip[aria-expanded="true"] .uc-caret{transform:rotate(180deg)} .role-switch{display:flex;align-items:center;gap:6px} .rs-label{font-size:10px;color:var(--ink-3);white-space:nowrap} /* 弹出菜单 */ .user-pop{ position:absolute;top:38px;right:0;width:286px;background:#fff;border:1px solid var(--line); border-radius:12px;box-shadow:0 14px 40px rgba(20,40,70,.16);padding:7px;z-index:88;display:none } .user-pop.show{display:block} .up-head{display:flex;align-items:flex-start;gap:10px;padding:9px 9px 7px} .up-av{width:38px;height:38px;border-radius:12px;flex:none;background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;display:grid;place-items:center;font-size:16px;font-weight:700} .up-id{min-width:0;line-height:1.35} .up-id b{display:block;font-size:14px} .up-id>span{font-size:11.5px;color:var(--ink-3)} .up-roles{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px} .up-meta{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;padding:2px 9px 9px;font-size:11px} .up-meta>div{display:flex;justify-content:space-between;gap:6px;min-width:0} .up-meta span{color:var(--ink-3);flex:none} .up-meta b{font-weight:500;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .up-sep{height:1px;background:var(--line-2);margin:5px 3px} .up-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 9px;border-radius:9px; font-size:12.5px;color:var(--ink);text-align:left;transition:.12s} .up-item svg{width:16px;height:16px;color:var(--ink-3);flex:none} .up-item:hover{background:var(--gray-bg)} .up-item em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--ink-3);white-space:nowrap} .up-item.danger{color:var(--danger)} .up-item.danger svg{color:var(--danger)} .up-item.danger:hover{background:var(--danger-bg)} .up-view{padding:4px 9px 8px} .up-view>label{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--ink-2);font-weight:600;margin-bottom:6px} .up-view>label em{font-style:normal;font-weight:400;font-size:10.5px;color:var(--ink-3);line-height:1.4} .up-view select{width:100%;height:30px;border:1px solid var(--line);border-radius:8px;padding:0 8px; background:#fff;font-size:12px;cursor:pointer;outline:none} .up-view select:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)} @media(max-width:1280px){ .user-chip{max-width:150px} } /* ============================================================ * 个人中心（v1.6.2） * ============================================================ */ .pf-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .pf-av{width:56px;height:56px;border-radius:16px;flex:none;background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;display:grid;place-items:center;font-size:24px;font-weight:700} .pf-id{min-width:0} .pf-id h3{font-size:18px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pf-id p{font-size:12px;color:var(--ink-3);margin-top:4px} .pf-roles{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px} .pf-mini{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap} .pf-mini>div{text-align:right} .pf-mini b{display:block;font-size:21px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.3px} .pf-mini span{font-size:11px;color:var(--ink-3)} .pf-perm h5{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:7px} .pf-chips{display:flex;flex-wrap:wrap;gap:5px} .pf-note{font-size:11px;color:var(--ink-3);line-height:1.7;margin-top:7px} .pf-work{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .pf-work-item{border:1px solid var(--line);border-radius:9px;padding:10px 8px;text-align:center;transition:.12s;background:#fff} .pf-work-item:hover{border-color:var(--brand-2);background:var(--brand-soft)} .pf-work-item b{display:block;font-size:20px;font-weight:650;color:var(--brand);font-variant-numeric:tabular-nums} .pf-work-item span{display:block;font-size:11px;color:var(--ink-2);margin-top:2px} .pf-work-item em{display:block;font-style:normal;font-size:10px;color:var(--ink-3);margin-top:3px} .pf-fbrow{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px dashed var(--line-2);cursor:pointer} .pf-fbrow:last-child{border-bottom:none} .pf-fbrow:hover .pf-fbtitle{color:var(--brand)} .pf-fbtitle{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pf-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line-2)} .pf-sec:last-child{border-bottom:none;padding-bottom:0} .pf-sec b{display:block;font-size:12.5px} .pf-sec span{display:block;margin-top:2px} /* ============================================================ * 后台管理 * ============================================================ */ .ad-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:4px} .ad-tab{border:0;background:transparent;padding:9px 16px;font-size:13px;color:var(--ink-2);cursor:pointer; border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px} .ad-tab:hover{color:var(--brand)} .ad-tab.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600} .ad-tab em{font-style:normal;font-size:10px;background:var(--gray-bg);border-radius:999px;padding:1px 6px;color:var(--ink-3)} .ad-tab.on em{background:var(--brand-soft);color:var(--brand)} .ad-filters{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:10px;align-items:end} .ad-f-actions{display:flex;gap:8px;justify-content:flex-end} .ad-user{display:flex;align-items:center;gap:9px} .ad-av{width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand); display:grid;place-items:center;font-size:12px;font-weight:700;flex:none} .ad-user b{display:block;font-size:13px} .ad-user i{font-style:normal;font-size:11px;color:var(--ink-3)} .ad-split{display:grid;grid-template-columns:280px 1fr;gap:12px;align-items:start} .ad-rolelist{display:flex;flex-direction:column;gap:6px} .ad-role{text-align:left;border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 11px;cursor:pointer;transition:.14s} .ad-role:hover{border-color:var(--brand-2);background:var(--brand-soft)} .ad-role.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)} .ad-role b{display:block;font-size:13px;color:var(--ink)} .ad-role i{display:block;font-style:normal;font-size:10px;color:var(--ink-3);margin-top:2px} .ad-role span{display:flex;gap:8px;margin-top:6px} .ad-role em{font-style:normal;font-size:10px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 6px} .ad-permgroup{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden} .ad-permhead{display:flex;align-items:center;gap:10px;padding:7px 11px;background:#F7FAFD;border-bottom:1px solid var(--line)} .ad-permhead b{font-size:12px} .ad-permhead em{font-style:normal;font-size:10px;color:var(--ink-3)} .ad-permhead .btn{margin-left:auto} .ad-permgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px;padding:8px} .ad-perm{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--ink-2)} .ad-perm:hover{background:var(--gray-bg)} .ad-perm.on{color:var(--ink);font-weight:600} .ad-perm input{accent-color:var(--brand);width:14px;height:14px} .ad-perm i{font-style:normal;font-size:10px;color:var(--ink-3);margin-left:auto} .ad-matrix th{white-space:nowrap;font-size:12px} .ad-cb{display:inline-flex;cursor:pointer} .ad-cb input{accent-color:var(--brand);width:15px;height:15px} @media(max-width:1100px){ .ad-split{grid-template-columns:1fr} .ad-filters{grid-template-columns:1fr 1fr} } /* ---- 后台 v1.7.0：操作日志 / 数据分析 / 系统配置 / 开发者配置 ---- */ /* 高风险操作行：左侧红条 + 淡红底，扫一眼能定位到权限/账号类动作 */ tr.ad-risk{background:#FDF3F2;box-shadow:inset 3px 0 0 var(--danger)} tr.ad-risk:hover{background:#FBEAE8} /* 纯 CSS 条形图（数据分析）：零依赖，跟随主题 token */ .ab{display:flex;flex-direction:column;gap:7px} .ab-row{display:flex;align-items:center;gap:9px} .ab-label{width:96px;flex:none;font-size:11.5px;color:var(--ink-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ab-track{flex:1;height:16px;background:var(--gray-bg);border-radius:5px;overflow:hidden} .ab-track i{display:block;height:100%;background:var(--brand);border-radius:5px;min-width:2px;transition:width .3s} .ab-track i.hot{background:var(--brand-2)} .ab-track i.warn{background:#E69B00} .ab-n{width:40px;flex:none;font-size:11.5px;font-weight:700;color:var(--ink);font-family:var(--mono)} /* 配置页的整行勾选项 */ .ad-line{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer} .ad-line input{accent-color:var(--brand);width:15px;height:15px} /* 开发者配置的键值行 */ .ad-kv{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line-2);font-size:12px} .ad-kv span{color:var(--ink-3)} .ad-kv:last-of-type{border-bottom:none} @media(max-width:900px){ .ab-label{width:76px} } /* ============================================================ * 界面风格切换器（v1.6.0） * 结构与配色全部走 token，因此两套风格共用同一份标记， * 不需要为 geek 风格复制一套组件样式。 * ============================================================ */ .theme-wrap{position:relative;display:flex} .theme-pop{ position:absolute;top:36px;right:0;width:258px;background:#fff;border:1px solid var(--line); border-radius:12px;box-shadow:0 10px 30px rgba(20,24,40,.14);padding:7px;z-index:85;display:none } .theme-pop.show{display:block} .tp-title{font-size:11px;color:var(--ink-3);padding:5px 8px 7px;letter-spacing:.3px} .tp-opt{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:9px;text-align:left;transition:.12s} .tp-opt:hover{background:var(--gray-bg)} .tp-opt.on{background:var(--brand-soft)} .tp-sw{width:46px;height:32px;flex:none;border-radius:8px;overflow:hidden;border:1px solid var(--line);display:block} .tp-sw svg{width:100%;height:100%;display:block} .tp-txt{flex:1;min-width:0;line-height:1.35} .tp-txt b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)} .tp-txt i{font-style:normal;font-size:10.5px;color:var(--ink-3)} .tp-ck{width:16px;height:16px;flex:none;color:var(--brand);opacity:0} .tp-opt.on .tp-ck{opacity:1} .tp-note{font-size:10.5px;color:var(--ink-3);padding:6px 8px 3px;border-top:1px solid var(--line-2);margin-top:5px;line-height:1.6} /* ============================================================ * 演示视角（v1.6.12：从用户菜单的