:root{--ink:#17212b;--muted:#667085;--line:#d5ddd7;--green:#08786d;--nav:#202a33}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif;background:#f4f6f3;color:var(--ink)}
body{display:grid;grid-template-rows:62px minmax(0,1fr);overflow:hidden}
.category-bar{display:grid;grid-template-columns:240px minmax(340px,1fr) 240px;align-items:center;gap:18px;padding:0 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(31,41,51,.07);z-index:2}
.system-name{display:flex;align-items:center;gap:10px;white-space:nowrap}.system-name span{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:#dff5ef;color:var(--green);font-size:18px;font-weight:900}.system-name strong{font-size:16px}
.category-tabs{height:100%;display:flex;justify-content:center;gap:28px}.category-tabs button{position:relative;border:0;background:transparent;color:var(--muted);padding:0 8px;font-weight:800;cursor:pointer}.category-tabs button.active{color:var(--green)}.category-tabs button.active::after{content:"";position:absolute;height:3px;left:4px;right:4px;bottom:0;background:var(--green)}
.category-bar small{text-align:right;color:var(--muted)}
#moduleFrame{width:100%;height:100%;border:0;background:#f4f6f3}
@media(max-width:760px){body{grid-template-rows:auto minmax(0,1fr)}.category-bar{grid-template-columns:1fr;padding:10px 14px;gap:8px}.category-tabs{height:42px;justify-content:flex-start;gap:18px}.category-bar small{text-align:left}.system-name strong{font-size:15px}}