/* Add by MHY, 终末地官网的黑灰亮黄与工程几何语言，运维信息保持可读与真实 */
:root {
  --bg:#e9e9e6; --card:#f8f8f5; --ink:#191919; --muted:#666963;
  --accent:#756f00; --border:#c9cbc3; --soft:#e9e8c7; --red:#b3392c;
  --signal:#fffa00; --carbon:#191919; --paper:#f5f5f1; --line:#bfc2b8;
  --chart-primary:#777200; --chart-secondary:#536675; --chart-grid:#dadcd3; --chart-text:#65685f;
  --ease:cubic-bezier(.2,.7,.25,1);
}
html { scroll-behavior:smooth; scrollbar-color:#9b9e91 var(--bg); }
body { background:var(--bg); color:var(--ink); font-family:"Bahnschrift","DIN Alternate",system-ui,"Microsoft YaHei",sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(#19191904 1px,transparent 1px),linear-gradient(90deg,#19191904 1px,transparent 1px); background-size:2.25rem 2.25rem; }
::selection { background:var(--signal); color:var(--carbon); }
button,input,select,textarea { border-radius:0; }
button { transition:background-color .18s,color .18s,border-color .18s,transform .18s var(--ease),box-shadow .18s; }
button:active:not(:disabled) { transform:translateY(1px); }
button:disabled { cursor:wait; }
button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible { outline:2px solid var(--carbon); outline-offset:0.25rem; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--carbon); outline-offset:2px; border-color:var(--carbon); box-shadow:none; }
input,select,textarea { background:#fafaf7; border-color:var(--line); color:var(--ink); }
label { color:#53574e; }
h1,h2,h3 { color:var(--carbon); }
h1 { font-weight:750; letter-spacing:-1.3px; font-size:2.25rem; }
h2 { font-weight:700; letter-spacing:.1px; }
.eyebrow { color:#666963; letter-spacing:0.14375rem; font-size:0.625rem; font-weight:650; }
.primary { background:var(--signal); color:var(--carbon); border:1px solid var(--carbon); border-radius:0; box-shadow:0.1875rem 0.1875rem 0 var(--carbon); position:relative; }
.primary:hover { background:var(--carbon); color:var(--signal); box-shadow:0.3125rem 0.3125rem 0 #898b7e; transform:translate(-1px,-1px); }
.primary:active:not(:disabled) { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--carbon); }
.secondary { border-color:#9ea296; background:transparent; color:var(--carbon); border-radius:0; }
.secondary:hover { background:var(--carbon); color:var(--signal); border-color:var(--carbon); }
.textButton { color:#62665c; }
.textButton:hover { color:var(--carbon); background:#dfe1d6; }
.sidebar { width:15.25rem; padding:2rem 1.375rem 1.625rem; background:var(--carbon); color:var(--paper); border-right:0; overflow:hidden; }
.sidebar::before { content:""; position:absolute; top:0; left:0; right:0; height:0.3125rem; background:var(--signal); }
.sidebar::after { content:""; position:absolute; right:0; bottom:0; width:4.125rem; height:4.125rem; background:repeating-linear-gradient(135deg,transparent 0 0.4375rem,#fffa002b 0.4375rem 0.5625rem); pointer-events:none; }
.brand { color:#f4f4ef; gap:0.75rem; font-size:1.0625rem; }
.brand .accent { color:var(--signal); }
.brand small { color:#b3b5a9; font-size:0.4375rem; letter-spacing:2px; margin-top:0.375rem; }
.brandIcon { border-radius:0; background:var(--signal); color:var(--carbon); font-size:1.5rem; font-weight:800; position:relative; }
.brandIcon::after { content:""; position:absolute; right:0; bottom:0; width:0.5rem; height:0.5rem; background:linear-gradient(135deg,transparent 48%,var(--carbon) 49%); }
.navLabel { margin:3rem 0 1rem; padding:0 0.875rem; color:#9ea296; font-size:0.5625rem; letter-spacing:2px; display:flex; gap:0.75rem; align-items:center; }
.navLabel::after { content:""; height:1px; background:#484a42; flex:1; }
.sidebar nav { counter-reset:module; }
.navItem { position:relative; border-radius:0; color:#c5c8ba; margin:0.375rem 0; padding:0.875rem 0.8125rem; gap:0.6875rem; font-size:0.75rem; counter-increment:module; }
.navItem::after { content:"0" counter(module); margin-left:auto; color:#7e8375; font:0.625rem/1 ui-monospace,monospace; }
.navItem.active { background:var(--signal); color:var(--carbon); font-weight:700; }
.navItem.active::after { color:#646200; }
.navItem:hover:not(.active) { background:#30322b; color:var(--signal); }
.navItem span { font-size:1.25rem; width:1.25rem; text-align:center; }
.sidebar .navItem:focus-visible,.sidebar .brand:focus-visible { outline-color:var(--signal); outline-offset:2px; }
.sidebarBottom { padding:1.25rem 0.25rem 0; border-top:1px solid #484b41; color:#dedfd6; font-size:0.6875rem; }
.sidebarBottom p { color:#a0a594; font-size:0.5625rem; margin:0.5rem 0 1.0625rem; }
.sidebarBottom .textButton { color:#c5c8ba; font-size:0.625rem; padding-left:0; }
.sidebarBottom .textButton:hover { color:var(--signal); background:transparent; }
.sidebar .statusDot { background:var(--signal); }
main { padding:1.75rem 2.375rem 1.25rem; }
.shellMast { display:flex; justify-content:space-between; gap:1.25rem; border-bottom:1px solid #a7aa9e; color:#65695d; font:0.5rem/1.4 ui-monospace,monospace; letter-spacing:1.6px; padding-bottom:0.75rem; margin-bottom:1.75rem; }
.shellMast span:last-child { color:#454a3e; }
main .pageDeck>header { border-bottom:2px solid var(--carbon); padding-bottom:1.5625rem; gap:1.375rem; align-items:flex-end; margin-bottom:1.625rem; position:relative; }
main .pageDeck>header::after { content:""; position:absolute; width:3.875rem; height:0.375rem; bottom:-2px; right:0; background:var(--signal); border-left:0.375rem solid var(--carbon); }
#pageEyebrow { color:#5a5f53; display:flex; align-items:center; gap:0.625rem; }
#pageEyebrow::before { content:""; width:0.4375rem; height:0.4375rem; background:var(--carbon); transform:rotate(45deg); }
#pageSubtitle { font-size:0.75rem; margin-bottom:0; }
.headerRight { gap:0.9375rem; align-items:center; font-size:0.625rem; }
#updateTime { color:#666b5d; font-family:ui-monospace,monospace; font-size:0.5625rem; }
.headerRight .secondary { background:var(--paper); font-size:0.6875rem; padding:0.5625rem 0.875rem; }
.headerRight .secondary:hover { background:var(--carbon); }
.summary { gap:0.875rem; margin-bottom:1.875rem; }
.summaryItem { border-radius:0; position:relative; padding:1.25rem 1.375rem 1.1875rem; background:var(--card); border:1px solid #c2c6b8; border-top:0.1875rem solid var(--carbon); }
.summaryItem:first-child { background:var(--signal); border-color:var(--carbon); }
.summaryItem:first-child .label,.summaryItem:first-child .caption,.summaryItem:first-child .number span { color:#555500; }
.summaryItem .label { font-size:0.625rem; font-weight:600; letter-spacing:.8px; }
.summaryItem .number { font-size:2.125rem; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-1.5px; margin:0.75rem 0 0.5rem; }
.summaryItem .caption { font-size:0.5625rem; }
.summaryItem::after { content:""; position:absolute; width:0.875rem; height:0.875rem; bottom:0; right:0; border-right:0.1875rem solid #6f7365; border-bottom:0.1875rem solid #6f7365; }
.sectionHeading h2 { font-size:0.9375rem; }
.sectionHeading>span { font-size:0.625rem; }
.hostGrid { gap:0.875rem; }
.card,.hostCard { border-radius:0; background:var(--card); border:1px solid #c2c6b8; padding:1.375rem; box-shadow:0 2px 0 #19191904; }
.hostCard { position:relative; border-top:2px solid var(--carbon); transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s; }
.hostCard::before { content:""; position:absolute; top:0; right:0; width:1.125rem; height:1.125rem; background:linear-gradient(45deg,transparent 48%,#c2c6b8 49% 53%,var(--bg) 54%); pointer-events:none; }
.hostCard:hover { background:#fffff8; border-color:#838b70; box-shadow:0.25rem 0.25rem 0 #19191917; transform:translateY(-0.1875rem); }
.hostCardLink::after { border-radius:0; }
.hostCard:has(.hostCardLink:focus-visible) { outline-color:var(--carbon); }
.hostTop { margin-bottom:1.25rem; gap:0.625rem; }
.hostIcon { border-radius:0; background:#e6e8dc; color:#33382c; border:1px solid #bfc4b1; font-size:1.25rem; }
.hostName { font-size:0.8125rem; font-weight:700; }
.hostKind { font:0.5625rem/1.5 ui-monospace,monospace; color:#666d5b; }
.pill { border-radius:0; background:#e5e8d8; color:#454c36; border:1px solid #b2ba9f; font-size:0.5625rem; padding:0.1875rem 0.4375rem; }
.pill.offline { background:#e6e7e1; color:#656b5c; border-color:#c0c4b6; }
.hostTop .pill { border-color:#a7b186; }
.resourceLine { font-size:0.625rem; color:#636a59; }
.resourceLine strong { font:0.6875rem/1.5 ui-monospace,monospace; color:var(--ink); }
.meter { height:0.25rem; border-radius:0; background:#d9ddce; }
.meter span { background:#777200; border-radius:0; transition:width .45s var(--ease); }
.meter.mem span { background:#536675; }
.meter.disk span { background:#8a887b; }
.hostBottom { font-size:0.5625rem; color:#636b58; }
.hostBottom .textButton { font-size:0.5625rem; color:#5b6450; }
.hostTrendHint { border-color:#d7dbca; color:#4e5940; font-size:0.625rem; margin-top:0.9375rem; }
.hostTrendHint>span { transition:transform .2s; }
.hostCard:hover .hostTrendHint>span { transform:translate(2px,-2px); }
.hostGridHint { font-size:0.625rem; }
.bottomGrid { gap:0.875rem; }
.bottomGrid>.card { border-top:0.1875rem solid var(--carbon); }
.bigValue,.historyStats strong,.serviceDetailMetrics strong { font-variant-numeric:tabular-nums; }
.notice { border-radius:0; border:1px solid #b9b77c; border-left:0.25rem solid #756f00; background:#efeed1; color:#44440e; }
table { border-color:var(--line); }
th { color:#565d4e; background:#e9ecdf; font-weight:650; }
td { border-color:#d5d9c9; }
tbody tr { transition:background .16s; }
tbody tr:hover { background:#eeeed4; }
.tableWrap { border-radius:0; }
.tableWrap table { font-size:0.75rem; }
.tableWrap .textButton { font-size:0.625rem; }
.tableWrap td strong { font-weight:650; }
.historyNavigation { border-bottom:1px solid #b6bda6; padding-bottom:1.125rem; }
.historyNavigation .historyFilters select,.historyNavigation select { border-radius:0; }
.hostDetail { border-color:#bbc2ab; }
.hostDetail h2 { font-size:1.5625rem; font-weight:700; }
.hostDetailStatus { color:#5b6550; }
.resourceGauges { gap:0.875rem; }
.gaugeCard { border-top:0.1875rem solid var(--carbon); }
.gauge { width:7rem; height:7rem; }
.gaugeTrack { stroke:#dadfcd; stroke-width:7; }
.gaugeFill { stroke:#777200; stroke-width:7; }
.memGauge .gaugeFill { stroke:#536675; }
.diskGauge .gaugeFill { stroke:#8a887b; }
.gaugeCritical .gaugeFill { stroke:var(--red); }
.gaugeValue { font:600 1.625rem/1 "Bahnschrift",system-ui,sans-serif; }
.gauge::after { content:""; position:absolute; inset:0; border:1px dashed #b2bca2; border-radius:50%; pointer-events:none; }
.networkArrow { border-radius:0; background:#e9e7b6; color:#625d00; }
.uploadArrow { background:#dce1e5; color:#4a6376; }
.liveNetwork strong { font-family:"Bahnschrift",system-ui,sans-serif; }
.legendDot { background:#777200; border-radius:0; }
.memoryDot,.uploadDot { background:#536675; }
.cpuDot { background:#777200; }
.chartTooltip { border-radius:0; background:var(--carbon); color:#f3f4ea; border-color:var(--carbon); box-shadow:0.1875rem 0.1875rem 0 #19191922; }
.chartTooltip b { color:var(--signal); }
.chartLegend { color:#5d6651; }
.chartCard { border-top:2px solid var(--carbon); }
.chartTitle h2 { font-size:0.9375rem; }
.historyStats { color:#5d6553; }
.historyStats strong { color:var(--ink); }
.serviceProvider,.securitySummary { background:var(--carbon); color:#f2f2e9; border-color:var(--carbon); border-left:0.3125rem solid var(--signal); }
.serviceProvider h2,.securitySummary h2 { color:#fff; font-size:1.4375rem; }
.serviceProvider .muted,.securitySummary .muted { color:#b9bea9; }
.serviceProvider .eyebrow,.securitySummary .eyebrow { color:var(--signal); }
.serviceProviderSummary strong { color:var(--signal); }
.serviceProviderSummary small { color:#c1c5b4; }
.serviceTabs button,.ruleTabs button { border-radius:0; }
.serviceTabs button.active,.ruleTabs button.active { background:var(--signal); color:var(--carbon); border-color:#a4a06e; }
.serviceTabs button:hover,.ruleTabs button:hover { color:var(--carbon); background:#e4e5d9; }
.serviceIcon { border-radius:0; background:#e0e4e5; color:#3e5966; }
.serviceIcon.network { background:#ebe9bd; color:#696400; }
.serviceIcon.script { background:#e6e2d6; color:#6b6553; }
.serviceCard { border-top:2px solid var(--carbon); transition:transform .18s,box-shadow .18s; }
.serviceCard:hover { box-shadow:0.1875rem 0.1875rem 0 #19191916; }
.serviceName { color:var(--carbon); font-size:1.0625rem; font-weight:700; }
.serviceCardActions { border-color:#c9d0bc; }
.servicePolicy { border-radius:0; background:#efefe8; border-color:var(--line); }
.serviceCheck input,.servicePolicy input { accent-color:#756f00; }
.serviceLog { border-radius:0; background:#191c17; color:#dae0cc; border-left:0.1875rem solid var(--signal); font-size:0.6875rem; }
.routingCard { border-top:0.1875rem solid var(--carbon); }
.routingSummary { border-color:#bfc6b0; }
.routingTableWrap { overflow-x:auto; max-width:100%; }
.routingTable th,.routingTable td { white-space:normal; overflow-wrap:anywhere; }
.routingNode img,.routingGroupHead img { border-radius:0; filter:grayscale(1); }
.routingNode img { background:var(--carbon); }
.routingSummary strong { font-weight:700; }
.routingGroups { gap:0.625rem; }
.routingGroup { border-radius:0; background:#f8f8f2; border-color:#bdc4ad; position:relative; }
.routingGroup:hover,.routingGroup.selected { background:#f4f2ca; border-color:#777200; }
.routingGroup.selected { box-shadow:inset 0.1875rem 0 var(--carbon); }
.routingGroupHead strong { font-size:0.75rem; }
.routePolicy { color:#726c00; }
.routePolicy.direct { color:#496676; }
.routingGroupFoot>span { color:#625d00; }
.inspectDomainForm,.domainResult { border-radius:0; background:#ededdf; border-color:#bebf8a; }
.domainResult { border-left:0.1875rem solid #777200; }
.ruleToolbar,.ruleCatalogue { border-color:#bcc4ad; }
.ruleTabs button { background:#f0f1e6; border-color:#bfc6b0; color:#5b6450; }
.editorShell,.rulePreview,.recoveryCodes { border-radius:0; background:#eef0e5; border-color:#b7c1a5; }
.editorShell { border:1px solid var(--line); }
#ruleLineNumbers { background:#dee4d2; color:#727d63; }
#ruleEditor { background:#f5f6ed; color:var(--ink); }
.ruleCatalogue summary { color:#414a35; }
.securityGrid code { border-radius:0; background:#edefdf; }
.securitySession { border-color:#c9d0bc; }
.securitySummary .pill { background:#383d2e; border-color:#8c936e; color:#e3e6d2; }
.securitySummary .pill:not(.offline) { background:var(--signal); border-color:var(--signal); color:var(--carbon); }
dialog { border-radius:0; border:1px solid var(--carbon); border-top:0.3125rem solid var(--signal); background:var(--paper); box-shadow:0.5rem 0.5rem 0 #19191955; padding:1.625rem; }
dialog[open] { animation:hubDialogIn .22s var(--ease) both; }
dialog::backdrop { background:#1919198c; backdrop-filter:blur(0.1875rem); animation:hubBackdropIn .18s ease-out; }
dialog h2 { font-size:1.1875rem; }
.dialogActions { border-top:1px solid #bdc5ad; padding-top:1.125rem; }
footer { color:#676e5b; border-top:1px solid #b3bca3; font:0.5625rem/1.5 ui-monospace,monospace; letter-spacing:.6px; padding-top:1.0625rem; margin-top:1.75rem; }
.login { background:var(--bg); position:relative; min-height:100svh; padding:3.125rem max(6vw,1.875rem); gap:6vw; justify-content:center; align-items:center; display:flex; overflow:hidden; }
.login::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 64%,#cdd0c2 64% 64.1%,transparent 64.1%),repeating-linear-gradient(0deg,transparent 0 3.6875rem,#19191907 3.6875rem 3.75rem),repeating-linear-gradient(90deg,transparent 0 3.6875rem,#19191907 3.6875rem 3.75rem); pointer-events:none; }
.loginArt { max-width:38.125rem; flex:1; min-width:0; position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:2.5rem 0; }
.loginArt .eyebrow { border-left:0.25rem solid var(--carbon); padding-left:0.875rem; margin-bottom:1.375rem; color:#434b37; }
.loginTitle { font-size:clamp(2.875rem,6.2vw,6.25rem); line-height:.96; letter-spacing:-0.3125rem; font-weight:850; color:var(--carbon); margin-bottom:1.5rem; }
.loginTitle span { display:block; }
.loginTitle .titleSignal { display:inline-block; background:var(--signal); padding:0.25rem 0.75rem 0.5rem 0; }
.loginArtText { font-size:0.75rem; color:#626c54; max-width:23.75rem; line-height:1.9; }
.loginDiagram { width:min(22.5rem,90%); height:auto; margin:1.25rem 0 1.5rem; }
.loginArtMeta { display:flex; align-items:center; gap:0.75rem; color:#59664a; font:0.5625rem/1.5 ui-monospace,monospace; letter-spacing:1.4px; }
.loginArtMeta::before { content:""; width:1.875rem; height:0.625rem; background:repeating-linear-gradient(135deg,var(--carbon) 0 2px,transparent 2px 0.3125rem); }
.loginCard { width:25.625rem; flex-shrink:0; border-radius:0; border:1px solid var(--carbon); border-top:0.375rem solid var(--carbon); padding:2.25rem; box-shadow:0.625rem 0.625rem 0 #19191915; position:relative; background:var(--paper); }
.loginCard::after { content:""; position:absolute; top:-0.375rem; right:0; height:0.375rem; width:4.25rem; background:var(--signal); }
.loginCard .brandIcon { margin-bottom:1.875rem; width:2.625rem; height:2.625rem; }
.loginCard .eyebrow { font-size:0.5rem; margin-bottom:0.5625rem; letter-spacing:1.4px; }
.loginCard h1 { font-size:1.6875rem; letter-spacing:-.7px; line-height:1.35; }
.loginCard>.muted { font-size:0.6875rem; }
.loginCard form { margin-top:1.625rem; }
.loginCard label { font-size:0.6875rem; }
.loginCard input { padding:0.75rem 0.8125rem; }
.loginCard .primary { margin-top:0.375rem; width:100%; }
#toggleRecovery { margin:0.875rem 0 0; padding:0.25rem 0; font-size:0.625rem; }
.loginFoot { font-size:0.5625rem; color:#5b684b; border-color:#c2ccb5; }
.themeEntering>:not([hidden]) { animation:hubModuleIn .38s var(--ease) both; animation-delay:calc(var(--entry-index,0)*35ms); }
.themeBoot .shellMast,.themeBoot main .pageDeck>header { animation:hubHeaderIn .45s var(--ease) both; }
.themeBoot .sidebar { animation:hubSidebarIn .45s var(--ease) both; }
.themeLoginEnter .loginCard { animation:hubModuleIn .5s var(--ease) both; }
.themeLoginEnter .loginTitle span { animation:hubModuleIn .48s var(--ease) both; }
.themeLoginEnter .loginTitle span:nth-child(2) { animation-delay:70ms; }
.themeLoginEnter .loginTitle span:nth-child(3) { animation-delay:140ms; }
.refreshing #refresh { background:var(--signal); color:var(--carbon); border-color:var(--carbon); }
.refreshing main .pageDeck>header::after { animation:hubRefresh .8s linear infinite; }
@keyframes hubModuleIn { from { opacity:0; transform:translateY(0.8125rem); } to { opacity:1; transform:translateY(0); } }
@keyframes hubDialogIn { from { opacity:0; transform:translateY(0.625rem) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes hubBackdropIn { from { opacity:0; } to { opacity:1; } }
@keyframes hubHeaderIn { from { opacity:0; transform:translateY(-0.5rem); } to { opacity:1; transform:translateY(0); } }
@keyframes hubSidebarIn { from { opacity:0; transform:translateX(-0.75rem); } to { opacity:1; transform:translateX(0); } }
@keyframes hubRefresh { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@media(max-width:1150px) {
  main { padding:1.625rem 1.625rem 1.125rem; }
  .summaryItem { padding:1.125rem; }
  .shellMast { font-size:0.4375rem; letter-spacing:1px; }
  .login { gap:5vw; padding:2.25rem; }
  .loginCard { width:23.75rem; padding:1.875rem; }
  .loginTitle { letter-spacing:-0.1875rem; }
}
@media(max-width:900px) {
  .sidebar { width:12.5rem; padding:1.75rem 1rem; }
  .brand { font-size:0.875rem; }
  .brandIcon { width:2.125rem; height:2.125rem; flex-shrink:0; }
  .brand small { font-size:0.375rem; letter-spacing:1px; }
  main { margin-left:12.5rem; padding:1.5rem 1.375rem 1.125rem; }
  .shellMast span:nth-child(2) { display:none; }
  h1 { font-size:1.8125rem; }
  .headerRight { gap:0.625rem; }
  #updateTime { max-width:8.125rem; }
  .loginArt { max-width:21.875rem; }
  .loginCard { width:21.25rem; padding:1.625rem; }
  .login { padding:1.875rem; gap:1.875rem; }
}
@media(max-width:600px) {
  .sidebar { position:relative; width:100%; padding:1.375rem 1.125rem 1.0625rem; overflow:visible; }
  .sidebar::after { display:none; }
  .navLabel,.sidebarBottom { display:none; }
  .brand { font-size:1.0625rem; }
  .brand small { font-size:0.375rem; }
  .sidebar nav { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.375rem; margin-top:1.25rem; }
  .navItem { margin:0; padding:0.6875rem 0.3125rem; justify-content:center; gap:0.3125rem; font-size:0.625rem; }
  .navItem::after { display:none; }
  .navItem span { width:auto; font-size:0.9375rem; }
  main { margin-left:0; padding:1.25rem 1rem 1.125rem; }
  .shellMast { margin-bottom:1.25rem; padding-bottom:0.625rem; font-size:0.4375rem; letter-spacing:.8px; }
  main .pageDeck>header { padding-bottom:1.3125rem; align-items:flex-start; flex-wrap:wrap; gap:1rem; margin-bottom:1.375rem; }
  #pageEyebrow { font-size:0.5rem; letter-spacing:1.6px; }
  h1 { font-size:1.8125rem; }
  #pageSubtitle { font-size:0.6875rem; }
  .headerRight { width:100%; justify-content:flex-end; gap:0.75rem; }
  #updateTime { display:block; margin-right:auto; max-width:11.875rem; font-size:0.5rem; }
  .headerRight .secondary { padding:0.4375rem 0.75rem; font-size:0.625rem; }
  .mobileLogout { font-size:0.625rem; }
  .summary { gap:0.625rem; }
  .summaryItem { padding:1rem; }
  .summaryItem .number { font-size:1.875rem; }
  .card,.hostCard { padding:1.125rem; }
  .sectionHeading h2 { font-size:0.875rem; }
  .hostName { font-size:0.8125rem; }
  .hostGrid { gap:0.75rem; }
  .resourceGauges { gap:0.625rem; }
  .gaugeCard { padding:1rem; }
  .gauge { width:6.125rem; height:6.125rem; }
  .gaugeValue { font-size:1.4375rem; }
  .serviceProvider h2,.securitySummary h2 { font-size:1.3125rem; }
  .securitySummary { align-items:flex-start; }
  .routingGroup { padding:0.875rem; }
  .routingGroupHead strong { font-size:0.75rem; }
  .routingCard { padding:1.125rem; }
  dialog { width:calc(100vw - 1.75rem); max-width:calc(100vw - 1.75rem); padding:1.375rem; box-shadow:0.3125rem 0.3125rem 0 #19191955; }
  .serviceDialog { padding:1.25rem; }
  .serviceDialog .sectionHeading h2 { font-size:1.125rem; }
  footer { font-size:0.5rem; letter-spacing:0; align-items:flex-start; }
  .login { min-height:100svh; padding:1.75rem 1.375rem; flex-direction:column; justify-content:flex-start; gap:1.625rem; overflow:visible; }
  .loginArt { padding:0; width:100%; max-width:25.625rem; align-self:center; flex:none; }
  .loginArt .eyebrow { font-size:0.5rem; margin:0 0 0.9375rem; }
  .loginTitle { font-size:3rem; letter-spacing:-2px; line-height:.92; margin-bottom:0.875rem; }
  .loginTitle span { display:inline-block; }
  .loginTitle .titleSignal { margin-top:0.25rem; padding:0.1875rem 0.375rem; }
  .loginArtText { font-size:0.625rem; max-width:none; margin:0; }
  .loginDiagram,.loginArtMeta { display:none; }
  .loginCard { width:100%; max-width:25.625rem; padding:1.625rem; margin-bottom:1rem; }
  .loginCard .brandIcon { display:none; }
  .loginCard h1 { font-size:1.5625rem; }
  .loginCard form { margin-top:1.4375rem; }
}
@media(hover:none) {
  .hostCard:hover { transform:none; box-shadow:0 2px 0 #19191904; }
}
/* 偏好减少动态效果时，CSS和JS一起停用；不会隐藏数据或等动画才接受操作。 */
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .hostCard:hover,.primary:hover,.primary:active,.hostCard:hover .hostTrendHint>span { transform:none; }
  dialog::backdrop { backdrop-filter:none; }
}

/* Add by MHY, 大屏排版缩放与截图中的条纹大字、彩色标尺、侧边模块色块 */
:root { --ui-scale:1; font-size:calc(100% * var(--ui-scale)); }
main { max-width:none; margin-right:4.25rem; }
.colorTrack { height:.25rem; background:linear-gradient(90deg,#f618dd 0 26%,var(--signal) 26% 50%,#00e4a3 50% 100%); margin-bottom:1.5rem; position:relative; }
.colorTrack::after { content:""; position:absolute; top:100%; right:0; width:17%; height:.7rem; background:repeating-linear-gradient(135deg,#fffa0070 0 2px,transparent 2px .45rem); }
main .pageDeck>header { flex-wrap:wrap; row-gap:1.1rem; }
.headerInformation { flex:1; min-width:0; }
.moduleMast { position:relative; display:flex; align-items:baseline; gap:1rem; width:100%; min-width:0; max-width:100%; overflow:hidden; font-size:clamp(3.5rem,7.5vw,7.5rem); font-weight:900; line-height:.98; letter-spacing:-.07em; padding:.1rem 0 .35rem; white-space:nowrap; }
.moduleGhostWord { position:absolute; right:0; top:0; font-size:9rem; line-height:.9; color:transparent; opacity:.3; background:repeating-linear-gradient(135deg,#565d4a 0 1px,transparent 1px .25rem); background-clip:text; -webkit-background-clip:text; pointer-events:none; }
.modulePrefix { letter-spacing:-.15em; transform:skew(-14deg); margin-right:.25rem; }
#moduleDisplayTitle { min-width:0; position:relative; z-index:1; }
.moduleRail { position:fixed; z-index:1; right:0; top:0; bottom:0; width:3.5rem; background:var(--signal); border-left:1px solid var(--carbon); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:3rem 0 1.5rem; pointer-events:none; }
.moduleRail::before { content:""; position:absolute; bottom:0; right:0; width:100%; height:5rem; background:repeating-linear-gradient(135deg,transparent 0 .4rem,#1919192b .4rem .46rem); }
#moduleRailTitle { writing-mode:vertical-rl; font-size:1.5rem; font-weight:900; line-height:1; letter-spacing:-.02em; }
.railCode { writing-mode:vertical-rl; font:.6rem/1 ui-monospace,monospace; letter-spacing:.12em; z-index:1; }
.displayControl { display:flex; align-items:center; gap:.5rem; margin:0; color:#525b46; white-space:nowrap; font-size:.7rem; }
.displayControl select { margin:0; padding:.45rem .6rem; width:auto; min-width:7.7rem; font-size:.75rem; background:var(--paper); }
.headerRight { flex-wrap:wrap; justify-content:flex-end; }
.loginDisplay { margin-top:1.4rem; }
.loginDisplay .displayControl { justify-content:space-between; }
.loginFoot { margin-top:1.5rem; }
.loginArt { isolation:isolate; }
.stripeWord { position:absolute; z-index:-1; top:2rem; left:-2rem; font-size:19rem; font-weight:900; line-height:1; letter-spacing:-.08em; opacity:.32; pointer-events:none; color:transparent; background:repeating-linear-gradient(135deg,#54594d 0 1px,transparent 1px .25rem); background-clip:text; -webkit-background-clip:text; }
.sidebarStripeWord { position:absolute; bottom:9rem; left:.75rem; font-size:9rem; line-height:1; font-weight:900; letter-spacing:-.1em; color:transparent; opacity:.26; pointer-events:none; background:repeating-linear-gradient(135deg,var(--signal) 0 1px,transparent 1px .25rem); background-clip:text; -webkit-background-clip:text; }
.sidebar .brand,.sidebar nav,.sidebar .sidebarBottom,.sidebar .navLabel { position:relative; z-index:1; }
.login::after { content:""; position:absolute; right:0; top:0; bottom:0; width:2.5rem; background:linear-gradient(180deg,#f618dd 0 1%,#00e4a3 1% 2%,var(--signal) 2% 100%); }
#pageSubtitle,.resourceLine,.hostBottom { font-size:.75rem; }
.hostKind,.hostTrendHint,.summaryItem .caption,.pill { font-size:.6875rem; }
.summaryItem .label,.navItem { font-size:.8125rem; }
.navItem::after { font-size:.6875rem; }

/* 断点由实际排版可用宽度计算，手动放大后同样能重流。 */
:root[data-ui-columns="4"] .hostGrid { grid-template-columns:repeat(4,minmax(0,1fr)); }
:root[data-ui-columns="3"] .hostGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
:root[data-ui-columns="2"] .hostGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
:root:is([data-ui-layout="compact"],[data-ui-layout="medium"]) .resourceGauges { grid-template-columns:repeat(2,minmax(0,1fr)); }
:root:is([data-ui-layout="compact"],[data-ui-layout="medium"]) .historyChartGrid { grid-template-columns:1fr; }
:root:is([data-ui-layout="compact"],[data-ui-layout="medium"]) .routingGroups { grid-template-columns:repeat(2,minmax(0,1fr)); }
:root:is([data-ui-layout="compact"],[data-ui-layout="medium"]) .summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
:root[data-ui-layout="compact"] .sidebar { width:var(--sidebar-width); padding:1.5rem 1rem; }
:root[data-ui-layout="compact"] main { margin-left:var(--sidebar-space); }
:root[data-ui-layout="compact"] .brand { font-size:.875rem; }
:root[data-ui-layout="compact"] .securityGrid { grid-template-columns:1fr; }
:root[data-ui-layout="compact"] .loginArt { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar { position:relative; inset:auto; width:100%; padding:1.25rem 1rem 1rem; display:block; overflow:visible; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; margin-top:1.1rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebarStripeWord,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .navLabel,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebarBottom,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar::after { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .brand { font-size:1rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .brand>span:last-child { min-width:0; overflow-wrap:anywhere; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .brand small { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .navItem { margin:0; padding:.65rem .3rem; justify-content:center; gap:.3rem; font-size:.625rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .navItem span { font-size:.9rem; width:auto; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .navItem::after { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) main { margin:0; padding:1.25rem 1rem 1rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .moduleRail { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .moduleMast { font-size:clamp(2rem,10vw,3.5rem); gap:.5rem; margin-bottom:.2rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .moduleGhostWord { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) main .pageDeck>header { gap:.8rem; align-items:flex-start; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .headerInformation { flex-basis:100%; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .headerRight { width:100%; gap:.6rem; align-items:center; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .displayControl { margin-right:auto; font-size:.65rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .displayControl select { min-width:6.3rem; padding:.4rem; font-size:.65rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) #updateTime { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .mobileLogout { display:block; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .hostGrid { grid-template-columns:1fr; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .summary,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .resourceGauges { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .securityGrid,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .historyChartGrid,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .routingGroups { grid-template-columns:1fr; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .gaugeCard:not(.networkGauge) { flex-direction:column; align-items:flex-start; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .serviceProvider,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .securitySummary { align-items:flex-start; flex-direction:column; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .serviceProviderSummary { align-items:flex-start; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .serviceGrid { grid-template-columns:1fr; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .inspectDomainForm,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .routingRuleHeading { flex-direction:column; align-items:stretch; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .routingRuleHeading label { max-width:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .historyNavigation { flex-wrap:wrap; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .historyFilters { width:100%; flex-wrap:wrap; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .historyFilters label { min-width:0; flex:1; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .hostDetail { align-items:flex-start; flex-wrap:wrap; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .login { flex-direction:column; padding:1.5rem 1.25rem; gap:1.5rem; overflow:visible; justify-content:flex-start; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .loginArt { width:100%; max-width:26rem; flex:none; padding:0; align-self:center; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .loginTitle { font-size:clamp(2rem,12vw,3rem); letter-spacing:-.1rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .loginTitle span { display:inline-block; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .loginCard { width:100%; max-width:26rem; padding:1.5rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .loginDiagram,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .loginArtMeta,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .stripeWord,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .loginCard .brandIcon,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .login::after { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) dialog { width:calc(100vw - 1.5rem); max-width:calc(100vw - 1.5rem); padding:1.25rem; }
:root[data-ui-layout="tiny"] .sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
:root[data-ui-layout="tiny"] .summary,:root[data-ui-layout="tiny"] .resourceGauges,:root[data-ui-layout="tiny"] .securityCredentialRow { grid-template-columns:1fr; }
:root[data-ui-layout="tiny"] .headerRight { justify-content:flex-start; }
:root[data-ui-layout="tiny"] .displayControl { width:100%; }
:root[data-ui-layout="tiny"] .displayControl select { margin-left:auto; }
:root[data-ui-layout="tiny"] .card,:root[data-ui-layout="tiny"] .hostCard { padding:1rem; }
:root[data-ui-layout="tiny"] .hostCard { min-width:0; }
:root[data-ui-layout="tiny"] .hostTop,:root[data-ui-layout="tiny"] .hostBottom,:root[data-ui-layout="tiny"] .resourceLine { flex-wrap:wrap; gap:.4rem; }
:root[data-ui-layout="tiny"] .hostTop>div:nth-child(2) { min-width:0; flex:1; }
:root[data-ui-layout="tiny"] .hostName { overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] .securitySession { flex-direction:column; }
:root[data-ui-layout="tiny"] .historyFilters label { flex-basis:100%; }
:root[data-ui-layout="tiny"] .sectionHeading { flex-wrap:wrap; }
:root[data-ui-layout="tiny"] .loginArt { display:none; }
:root[data-ui-layout="tiny"] .loginCard { padding:1rem; }
:root[data-ui-layout="tiny"] .serviceDialog form { flex-wrap:wrap; }
:root[data-ui-layout="tiny"] .serviceDialog form label { flex-basis:100%; }
@media print { .displayControl,.moduleRail,.colorTrack,.sidebarStripeWord,.stripeWord { display:none; } }

/* Add by MHY, 标题右入左出与等高线底纹，悬浮栏只保留小页眉以免挤占操作空间 */
body { background:#efefeb; }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url('/contours.svg') center / 100% 100% no-repeat; opacity:.09; }
.floatingMast { position:sticky; top:0; z-index:5; padding:.75rem 1rem; margin-bottom:2rem; background:#f5f5f1ed; border:1px solid #bfc2b8; box-shadow:.25rem .3rem 0 #19191912,0 .5rem 1.25rem #19191908; backdrop-filter:blur(8px); }
.floatingMast .colorTrack { margin:-.75rem -1rem .85rem; }
.floatingMast .colorTrack::after { height:.4rem; }
.floatingMast .shellMast { border:0; padding:0; margin:0; }
html { scroll-padding-top:5.5rem; }
.moduleMast { display:block; height:1.45em; padding:.1em 0 .35em; }
.moduleTitleCurrent,.moduleTitleOutgoing { width:max-content; display:flex; align-items:baseline; gap:1rem; position:relative; z-index:1; }
.moduleTitleOutgoing { position:absolute; top:.1em; left:0; z-index:0; pointer-events:none; }
.modulePushing .moduleTitleCurrent { animation:hubTitlePushIn .75s cubic-bezier(.22,.7,.2,1) both; }
.modulePushing .moduleTitleOutgoing { animation:hubTitlePushOut .75s cubic-bezier(.22,.7,.2,1) both; }
@keyframes hubTitlePushIn { from { transform:translateX(var(--title-entry-x)); } to { transform:translateX(0); } }
@keyframes hubTitlePushOut { 0% { transform:translateX(0); opacity:1; } 85% { opacity:.75; } 100% { transform:translateX(var(--title-exit-x)); opacity:0; } }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .floatingMast { top:0; padding:.65rem .75rem; margin-bottom:1.25rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .floatingMast .colorTrack { margin:-.65rem -.75rem .65rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .moduleTitleCurrent,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .moduleTitleOutgoing { gap:.5rem; }
:root[data-ui-layout="tiny"] .floatingMast .shellMast span:last-child { display:none; }
@media(prefers-reduced-motion:reduce) { .floatingMast { backdrop-filter:none; } }
@media print { body::after,.floatingMast { display:none; } }

/* Modify by MHY, 桌面预留展开宽度，窄屏推动正文，始终不遮挡功能内容 */
html { scrollbar-gutter:stable; }
:root { --sidebar-width:4.5rem; --sidebar-expanded:15.25rem; --sidebar-space:var(--sidebar-expanded); }
:root .sidebar { position:fixed; inset:0 auto 0 0; z-index:10; width:var(--sidebar-width); padding:1.5rem .95rem 1rem; display:flex; flex-direction:column; overflow:hidden; transition:width .24s var(--ease),box-shadow .24s; }
:root .sidebar:is(:hover,.sidebarPinned,:has(.navItem:focus-visible,.brand:focus-visible,#logout:focus-visible)) { width:var(--sidebar-expanded); box-shadow:.4rem 0 1.5rem #19191922; }
:root main { margin-left:var(--sidebar-space); }
:root .sidebar .brand { white-space:nowrap; min-height:2.375rem; flex-shrink:0; }
:root .sidebar .brandIcon { flex-shrink:0; }
:root .sidebar .brand>span:last-child,:root .sidebar .navText { opacity:0; transition:opacity .15s; }
:root .sidebar .brand>span:last-child { min-width:10rem; }
:root .sidebar .navLabel { display:none; }
:root .sidebar nav { display:flex; flex:1; min-height:0; flex-direction:column; justify-content:center; gap:.3rem; margin:1rem 0; }
:root .sidebar .navItem { display:flex; flex:0 1 3rem; min-height:2rem; justify-content:flex-start; white-space:nowrap; padding:.6rem .45rem; gap:.7rem; margin:0; }
:root .sidebar .navIcon { width:1.7rem; flex-shrink:0; font-size:1.25rem; text-align:center; }
:root .sidebar .navText { width:auto; flex-shrink:0; font-size:.8125rem; }
:root .sidebar .navItem::after { display:none; }
:root .sidebar .sidebarBottom { display:block; white-space:nowrap; margin:0; padding:1rem 0 0; opacity:0; pointer-events:none; transition:opacity .15s; flex-shrink:0; }
:root .sidebar:is(:hover,.sidebarPinned,:has(.navItem:focus-visible,.brand:focus-visible,#logout:focus-visible)) :is(.brand>span:last-child,.navText,.sidebarBottom) { opacity:1; pointer-events:auto; }
.sidebarToggle { flex-shrink:0; display:grid; place-items:center; width:2.375rem; height:2rem; margin-top:1rem; border:1px solid #56594b; color:var(--signal); background:transparent; font-size:1.15rem; padding:0; }
.sidebarToggle:hover,.sidebarToggle:focus-visible { background:var(--signal); color:var(--carbon); outline-color:var(--signal); }
.navItem.navPending { box-shadow:inset 3px 0 var(--signal); color:var(--signal); }
.pageDeck { min-height:calc(100dvh - 8rem); }
.pageNavigating { overflow:hidden; }
.pageNavigating .pageDeck { pointer-events:none; }
.stripeWord,.sidebarStripeWord,.moduleGhostWord { background:none; --glyph-stripe:repeating-linear-gradient(135deg,#565d4a 0 1px,transparent 1px .25rem); }
.sidebarStripeWord { --glyph-stripe:repeating-linear-gradient(135deg,var(--signal) 0 1px,transparent 1px .25rem); }
.signalGlyph { display:inline-block; background:var(--glyph-stripe); background-clip:text; -webkit-background-clip:text; }
.signalBurst .signalGlyph:nth-child(2),.signalBurst .moduleGhostWord .signalGlyph:last-child { animation:hubGlyphDoubleFlash .65s steps(1,end) both; }
.signalBurst .sidebarStripeWord .signalGlyph:nth-child(2) { animation-delay:.12s; }
.signalBurst .moduleGhostWord .signalGlyph:last-child { animation-delay:.22s; }
.railSignalBurst #moduleRailTitle { animation:hubGlyphDoubleFlash .65s steps(1,end) both; }
@keyframes hubGlyphDoubleFlash { 0%,15%,33%,52%,100% { opacity:1; } 16%,32%,53%,69% { opacity:.12; } 70% { opacity:1; } }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) { --sidebar-width:3rem; --sidebar-expanded:max(var(--sidebar-width),min(11rem,32vw)); --sidebar-space:var(--sidebar-width); }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]):has(.sidebar:is(.sidebarPinned,:has(.navItem:focus-visible,.brand:focus-visible,#logout:focus-visible))) { --sidebar-space:var(--sidebar-expanded); }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar { position:fixed; inset:0 auto 0 0; display:flex; overflow:hidden; width:var(--sidebar-width); padding-left:.5rem; padding-right:.5rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar nav { display:flex; flex-direction:column; margin:1rem 0; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) main { margin-left:var(--sidebar-space); transition:margin-left .24s var(--ease); }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .brand>span:last-child { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .navItem { display:grid; grid-template-columns:1fr; align-content:center; justify-items:center; gap:.15rem; padding-top:.2rem; padding-bottom:.2rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .navText { display:none; white-space:normal; min-width:0; max-width:100%; text-align:center; font-size:.6875rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar:is(:hover,.sidebarPinned,:has(.navItem:focus-visible,.brand:focus-visible,#logout:focus-visible)) .navText { display:block; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .sidebarBottom { white-space:normal; font-size:0; padding-top:.4rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .sidebarBottom>span,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .sidebarBottom>p { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .summary { grid-template-columns:minmax(0,1fr); }
:root[data-ui-layout="tiny"] .summaryItem .number { font-size:1.4rem; overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] .routingNode { flex-wrap:wrap; min-width:0; }
:root[data-ui-layout="tiny"] .routingNode>div { min-width:0; max-width:100%; overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] .providerFilters { flex-direction:column; }
:root[data-ui-layout="tiny"] .providerFilters label { min-width:0; max-width:100%; width:100%; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) footer { flex-wrap:wrap; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .historyStats,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .routingGroupHead { flex-wrap:wrap; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .navItem { padding-left:.15rem; padding-right:.15rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .navIcon { width:1.7rem; font-size:1rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebarToggle { width:2rem; }
:root[data-ui-layout="tiny"] .displayControl { flex-wrap:wrap; white-space:normal; }
:root[data-ui-layout="tiny"] .displayControl select { width:100%; max-width:100%; min-width:0; margin-left:0; }
:root[data-ui-layout="tiny"] #pageEyebrow { display:block; position:relative; padding-left:1.2rem; overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] #pageEyebrow::before { position:absolute; top:.4rem; left:0; }
:root[data-ui-layout="tiny"] .historyStats { flex-wrap:wrap; gap:1rem; }
:root[data-ui-layout="tiny"] .liveNetwork>div,:root[data-ui-layout="tiny"] .chartTitle,:root[data-ui-layout="tiny"] .chartLegend { flex-wrap:wrap; }
:root[data-ui-layout="tiny"] .liveNetwork strong { white-space:normal; overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] .hostDetail>div { min-width:0; max-width:100%; overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] .serviceProvider>div,:root[data-ui-layout="tiny"] .securitySummary>div { min-width:0; max-width:100%; overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] .eyebrow { overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] .serviceTabs { flex-wrap:wrap; }
:root[data-ui-layout="tiny"] .routingGroupHead { flex-wrap:wrap; }
:root[data-ui-layout="tiny"] .routePolicy { margin-left:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] .routingGroupHead strong { max-width:100%; overflow-wrap:anywhere; }
:root[data-ui-layout="tiny"] .event { overflow-wrap:anywhere; }
@media(hover:none) {
 :root .sidebar:not(.sidebarPinned):not(:has(.navItem:focus-visible,.brand:focus-visible,#logout:focus-visible)) { width:var(--sidebar-width); box-shadow:none; }
 :root .sidebar:not(.sidebarPinned):not(:has(.navItem:focus-visible,.brand:focus-visible,#logout:focus-visible)) :is(.brand>span:last-child,.navText,.sidebarBottom) { opacity:0; pointer-events:none; }
 :root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar:not(.sidebarPinned):not(:has(.navItem:focus-visible,.brand:focus-visible,#logout:focus-visible)) .navText { display:none; }
}
@media(hover:hover) { :root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]):has(.sidebar:hover) { --sidebar-space:var(--sidebar-expanded); } }
@media(max-height:700px) {
 :root .sidebar { padding-top:.65rem; padding-bottom:.65rem; }
 :root .sidebar .brand,:root .sidebar .sidebarBottom>span,:root .sidebar .sidebarBottom>p { display:none; }
 :root .sidebar .sidebarBottom { padding-top:.4rem; font-size:0; }
 :root .sidebar .sidebarBottom .textButton { font-size:min(.625rem,3.5dvh); }
 :root .sidebar nav { margin:.6rem 0; gap:.2rem; }
 :root .sidebar .navItem { min-height:0; flex:1; padding-top:.1rem; padding-bottom:.1rem; }
 :root .sidebar .navItem .navIcon { font-size:min(1.25rem,4.5dvh); }
 :root .sidebar .navItem .navText { font-size:min(.8125rem,4dvh); }
 :root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar { padding-top:.45rem; padding-bottom:.45rem; }
 :root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar nav { margin:.35rem 0; gap:.1rem; }
 :root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .navItem { grid-template-columns:1fr; gap:.1rem; }
 :root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .navText { font-size:min(.5rem,2.5dvh); }
 .sidebarToggle { margin-top:0; height:min(2rem,8dvh); font-size:min(1.15rem,4.5dvh); }
}
@media print { .sidebar { display:none!important; } :root main { margin-left:0; } }
/* Add by MHY, 发饰标识以矢量适配缩放；角色独立构图，不压在表单或监控数据前 */
.brandIcon { display:inline-flex; align-items:center; justify-content:center; }
.brandIcon img { width:85%; height:85%; object-fit:contain; }
.login { gap:clamp(1.5rem,3vw,4rem); }
.loginArt { max-width:22rem; }
.administratorScene { flex:0 1 22rem; min-width:0; width:22rem; margin:0; position:relative; }
.administratorStage { height:min(72svh,42rem); min-height:28rem; position:relative; overflow:hidden; border-bottom:1px solid var(--carbon); isolation:isolate; }
.administratorStage::before { content:""; position:absolute; inset:15% 10% 0; background:linear-gradient(135deg,transparent 0 18%,#1919190b 18% 19%,transparent 19%),linear-gradient(0deg,#fffa002b,transparent 80%); border:1px solid #1919191a; clip-path:polygon(0 3rem,3rem 0,100% 0,100% 100%,0 100%); z-index:-1; }
.administratorStage::after { content:""; position:absolute; bottom:0; right:0; width:3rem; height:8rem; background:repeating-linear-gradient(135deg,transparent 0 .35rem,#19191925 .35rem .4rem); z-index:-1; }
.administratorArt { position:absolute; max-width:none; height:113.5%; width:auto; left:50%; top:-6.8%; transform:translateX(-50%); pointer-events:none; }
.administratorScene[data-look="work"] .administratorArt { top:0; height:100%; width:100%; object-fit:contain; }
.administratorIndex { position:absolute; left:0; top:.5rem; z-index:1; font:.5rem/1.5 ui-monospace,monospace; letter-spacing:.09em; background:var(--bg); padding:.25rem; border-left:3px solid var(--signal); }
.administratorStageWord { position:absolute; left:.25rem; bottom:1rem; writing-mode:vertical-rl; font-size:.625rem; font-weight:800; letter-spacing:.25em; }
.administratorScene figcaption { padding-top:.875rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.administratorName { font:.625rem/1.5 ui-monospace,monospace; font-weight:700; letter-spacing:.04em; }
.administratorName small { display:block; font-size:.625rem; color:var(--muted); letter-spacing:.06em; margin-top:.125rem; }
.administratorLooks { display:flex; gap:.25rem; }
.administratorLooks button { font-size:.625rem; padding:.4rem .6rem; border:1px solid #19191940; background:transparent; color:var(--carbon); }
.administratorLooks button[aria-pressed="true"] { background:var(--carbon); color:var(--signal); }
.administratorIdentity { display:flex; align-items:center; gap:.625rem; margin-bottom:.75rem; font-size:.75rem; }
.administratorIdentity small { display:block; font:.4375rem/1.7 ui-monospace,monospace; letter-spacing:.06em; color:#a0a594; }
.administratorAvatar { display:block; width:2.5rem; height:2.5rem; flex-shrink:0; background:var(--paper); border-left:3px solid var(--signal); overflow:hidden; clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%); }
.administratorAvatar img { width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.administratorAccount { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1rem; border-left:.25rem solid var(--carbon); background:#19191905; margin-bottom:1rem; }
.administratorAccount .administratorIdentity { margin:0; }
.administratorAccount small { color:var(--muted); }
.administratorAccount>img { width:2rem; height:2rem; opacity:.4; }
.themeLoginEnter .administratorScene { animation:hubModuleIn .5s var(--ease) both; }
:root[data-ui-layout="medium"] .login { flex-wrap:wrap; }
:root[data-ui-layout="medium"] .loginArt { max-width:18rem; }
:root[data-ui-layout="medium"] .administratorScene { flex-basis:16rem; width:16rem; }
:root[data-ui-layout="medium"] .loginCard { flex-basis:100%; max-width:36rem; }
:root[data-ui-layout="compact"] .administratorScene { flex-basis:18rem; width:18rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .administratorScene { width:100%; max-width:25.625rem; flex:none; display:grid; grid-template-columns:6rem minmax(0,1fr); align-items:center; gap:1rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .administratorStage { min-height:0; height:8rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .administratorScene figcaption { padding:0; display:block; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .administratorLooks { margin-top:.5rem; flex-wrap:wrap; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .administratorIndex,:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .administratorStageWord { display:none; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .sidebar .administratorIdentity { display:none; }
:root[data-ui-layout="tiny"] .administratorScene { grid-template-columns:4rem minmax(0,1fr); gap:.5rem; }
:root[data-ui-layout="tiny"] .administratorStage { height:6rem; }
:root[data-ui-layout="tiny"] .administratorName { font-size:.5rem; overflow-wrap:anywhere; }
@media(max-height:800px) { .sidebar .administratorIdentity { display:none; } }
@media(prefers-reduced-motion:reduce) { .themeLoginEnter .administratorScene { animation:none; } }
/* Modify by MHY, 手机200%时账户铭牌也随正文重流，装饰不占用标签的阅读空间 */
.administratorIdentity>span:last-child { min-width:0; }
.administratorAccount .administratorIdentity { min-width:0; }
.administratorAccount small { overflow-wrap:anywhere; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .administratorAccount { padding:.75rem; gap:.5rem; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .administratorAccount>img { display:none; }

/* Modify by MHY, 登录长字纹保留，主界面背景字下移后仍与标题部分叠合 */
.stripeWord { white-space:nowrap; font-size:clamp(5rem,9vw,14rem); letter-spacing:-.075em; top:2rem; opacity:.22; }
.moduleMast { --watermark-size:clamp(3rem,8.5vw,12rem); min-height:calc(var(--watermark-size)*1.4); }
.moduleGhostWord { white-space:nowrap; font-size:var(--watermark-size); letter-spacing:-.075em; right:0; top:.4em; opacity:.23; }
:root:is([data-ui-layout="mobile"],[data-ui-layout="tiny"]) .moduleMast { min-height:0; }