:root {
  --bg: #070d19;
  --panel: #101b2e;
  --panel-2: #0b1423;
  --border: rgba(148, 163, 184, .13);
  --text: #f4f7fb;
  --muted: #8495ab;
  --subtle: #52647b;
  --blue: #60a5fa;
  --cyan: #2dd4bf;
  --green: #34d399;
  --yellow: #fbbf24;
  --red: #fb7185;
  --violet: #a78bfa;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--bg); }
body { color: var(--text); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button, input { font: inherit; }
[hidden] { display: none !important; }

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% -20%, rgba(37, 99, 235, .22), transparent 38%),
    radial-gradient(circle at 110% 70%, rgba(45, 212, 191, .1), transparent 32%),
    var(--bg);
}

.login-card {
  width: min(100%, 390px);
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(17, 29, 49, .98), rgba(10, 18, 32, .98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.login-card .logo,
.brand > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: white;
  background: linear-gradient(135deg, #2563eb, #0f766e);
  box-shadow: 0 12px 30px rgba(37, 99, 235, .25);
  font: 800 14px ui-monospace, monospace;
}
.login-card > small { display: block; margin-top: 13px; color: var(--cyan); font: 700 8px ui-monospace, monospace; letter-spacing: .16em; }
.login-card h1 { margin: 12px 0 8px; font-size: 26px; }
.login-card p { margin: 0 0 22px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.login-card label { color: #a8b6c7; font-size: 10px; font-weight: 600; }
.login-card input { width: 100%; height: 42px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; outline: 0; color: white; background: #08111f; }
.login-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(96, 165, 250, .12); }
.login-card button { width: 100%; height: 42px; margin-top: 16px; border: 0; border-radius: 9px; color: white; background: #2563eb; cursor: pointer; }
.login-card em { display: block; min-height: 16px; margin-top: 9px; color: var(--red); font-size: 9px; font-style: normal; text-align: center; }

.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
aside { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; height: 100vh; border-right: 1px solid var(--border); background: rgba(8, 15, 29, .97); }
.brand { display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.brand > span { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
.brand b, .brand small { display: block; }
.brand b { font-size: 14px; }
.brand small { margin-top: 3px; color: #53677f; font: 600 8px ui-monospace, monospace; letter-spacing: .13em; }
.scope { display: flex; align-items: center; gap: 10px; margin: 16px 14px 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #0d1728; }
.scope > i, .live i, .aside-foot > span > i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.scope b, .scope small { display: block; }
.scope b { color: #c7d4e2; font-size: 10px; }
.scope small { margin-top: 3px; color: #52647b; font-size: 8px; }
nav { flex: 1; overflow: auto; padding: 3px 12px 18px; }
nav > small { display: block; margin: 18px 9px 8px; color: #4c5e75; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
nav button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 39px; margin: 3px 0; padding: 0 10px; border: 0; border-radius: 8px; color: #8596ab; background: transparent; cursor: pointer; text-align: left; font-size: 11px; }
nav button:hover { color: #d6e2ee; background: rgba(148, 163, 184, .055); }
nav button.active { color: #eff7ff; background: linear-gradient(90deg, rgba(37, 99, 235, .24), rgba(45, 212, 191, .05)); }
nav button.active::before { content: ""; position: absolute; left: -12px; width: 3px; height: 20px; border-radius: 0 4px 4px 0; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
nav button > i { color: #50637b; font: 600 8px ui-monospace, monospace; font-style: normal; }
nav button.active > i { color: var(--blue); }
nav button > b { min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border-radius: 9px; color: white; background: #e11d48; font-size: 8px; line-height: 18px; text-align: center; }
nav button > b[hidden] { display: none; }
.aside-foot { padding: 14px; border-top: 1px solid var(--border); }
.aside-foot > span { display: grid; grid-template-columns: 7px 1fr; gap: 2px 8px; align-items: center; padding: 9px; border-radius: 8px; background: rgba(148, 163, 184, .035); }
.aside-foot > span > i { grid-row: span 2; }
.aside-foot b { color: #a1b1c3; font-size: 9px; }
.aside-foot small { color: #52647b; font-size: 7px; }
.aside-foot button { width: 100%; margin-top: 10px; border: 0; color: #5b6e86; background: transparent; cursor: pointer; font-size: 8px; }
.aside-foot .account-shortcut { min-height: 32px; border: 1px solid rgba(96, 165, 250, .25); border-radius: 7px; color: #c7e1ff; background: rgba(37, 99, 235, .12); font-weight: 700; }

main { min-width: 0; }
header { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 24px; border-bottom: 1px solid var(--border); background: rgba(7, 13, 25, .94); backdrop-filter: blur(18px); }
header > div, .header-actions { display: flex; align-items: center; gap: 10px; }
header span { color: #52647b; font-size: 10px; }
header b { color: #cbd8e6; font-size: 11px; }
.mobile-menu { display: none; border: 0; color: #b7c5d6; background: transparent; }
.live, .clock { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(148, 163, 184, .035); }
.time-range-bar { position: sticky; top: 64px; z-index: 11; display: flex; align-items: center; gap: 12px; min-height: 55px; padding: 10px 24px; border-bottom: 1px solid var(--border); background: rgba(10, 20, 35, .97); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.time-range-bar > b { flex: 0 0 auto; color: #9db6d0; font-size: 10px; }
.time-range-buttons { display: flex; gap: 8px; min-width: 0; overflow-x: auto; padding: 1px 1px 4px; scrollbar-width: thin; }
.time-range-buttons button { flex: 0 0 auto; min-height: 32px; padding: 0 12px; border: 1px solid rgba(148, 163, 184, .17); border-radius: 8px; color: #aebed0; background: rgba(148, 163, 184, .04); cursor: pointer; font-size: 10px; font-weight: 650; white-space: nowrap; }
.time-range-buttons button:hover { border-color: rgba(96, 165, 250, .55); color: #e2f0ff; background: rgba(37, 99, 235, .14); }
.time-range-buttons button.active { border-color: rgba(45, 212, 191, .62); color: #d8fff3; background: rgba(45, 212, 191, .13); box-shadow: 0 0 0 1px rgba(45, 212, 191, .08); }
.pair-header, .install-header, .account-header, .primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 8px;
  color: #e4f1ff;
  background: rgba(37, 99, 235, .2);
  cursor: pointer;
  font-size: 9px;
  white-space: nowrap;
}
.install-header { border-color: rgba(69, 242, 162, .3); color: #8ff8bd; background: rgba(20, 92, 67, .14); }
.primary-action.full { width: 100%; margin-top: 16px; }
.live { border-color: rgba(52, 211, 153, .16); color: #8fa4ba; }
.live b { color: #c9ffe8; }
.clock { color: #8497ad; font: 600 9px ui-monospace, monospace; }
.content { max-width: 1760px; margin: auto; padding: 26px; }
.view { display: none; }
.view.active { display: block; }

.hero, .page-head { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 120px; margin-bottom: 15px; padding: 25px 28px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: radial-gradient(circle at 86% -30%, rgba(45, 212, 191, .14), transparent 37%), radial-gradient(circle at 32% 130%, rgba(37, 99, 235, .16), transparent 42%), linear-gradient(120deg, #101d31, #0c1627); box-shadow: 0 18px 45px rgba(0, 0, 0, .16); }
.hero small, .page-head small { color: var(--cyan); font: 700 8px ui-monospace, monospace; letter-spacing: .15em; }
.hero h1, .page-head h1 { margin: 7px 0 5px; font-size: clamp(25px, 2.8vw, 35px); line-height: 1; }
.hero p, .page-head p { margin: 0; color: #8192a8; font-size: 10px; line-height: 1.7; }
.score { min-width: 118px; padding-left: 24px; border-left: 1px solid var(--border); text-align: right; }
.score span, .score em { display: block; color: #687b92; font-size: 8px; font-style: normal; }
.score b { display: block; margin: 3px 0; font: 750 38px ui-monospace, monospace; }
.today-total { display: flex; align-items: baseline; gap: 8px; min-width: 190px; padding: 18px 22px; border: 1px solid rgba(45, 212, 191, .16); border-radius: 13px; background: rgba(45, 212, 191, .055); }
.today-total span { color: #91a5ba; font-size: 11px; }
.today-total b { color: #c9ffe8; font: 750 44px ui-monospace, monospace; line-height: 1; }
.today-total em { color: #91a5ba; font-size: 12px; font-style: normal; }
.page-head { min-height: 102px; }
.page-head h1 { font-size: 28px; }
.page-head > span { color: #8193a9; font-size: 9px; }
.page-head > span b { margin-right: 4px; color: white; font: 700 24px ui-monospace, monospace; }

.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.metrics.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metrics article, .panel { min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, rgba(17, 29, 49, .95), rgba(11, 20, 35, .95)); box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 16px 36px rgba(0, 0, 0, .12); }
.metrics article { min-height: 112px; padding: 17px; }
.metrics article > span { color: #7d8da3; font-size: 9px; }
.metrics article > b { display: block; margin: 13px 0 8px; overflow: hidden; color: #f7fbff; font: 730 clamp(22px, 2vw, 31px) ui-monospace, monospace; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.metrics article > small { display: block; overflow: hidden; color: #5d6e86; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.metrics article > small.up { color: var(--green); }
.metrics article > small.down { color: var(--red); }
.metrics .positive b, .metrics .live-card b { color: #bafbe2; }
.metrics .danger b { color: #fda4af; }

.insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.insights article { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: rgba(14, 25, 43, .82); }
.insights article > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); }
.insights article.warning > i { background: var(--yellow); }
.insights article.danger > i { background: var(--red); }
.insights article.positive > i { background: var(--green); }
.insights b, .insights small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insights b { color: #c9d7e7; font-size: 9px; }
.insights small { margin-top: 3px; color: #61738b; font-size: 7px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.panel { min-height: 250px; padding: 18px; }

.hero, .page-head, .metrics article, .panel, .project-card, .server-card, .insights article, .scope, .visitor-card, .topology > div { position: relative; }
.hero, .page-head, .visitor-card { overflow: visible; }
.help-tip {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 9;
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 50%;
  color: #9bcfff;
  background: rgba(37, 99, 235, .14);
  cursor: help;
  font-size: 10px;
  font-weight: 700;
}
.help-tip:hover, .help-tip:focus, .help-tip[aria-expanded="true"] { border-color: rgba(96, 165, 250, .75); color: #e0f1ff; background: rgba(37, 99, 235, .3); outline: 0; }
.help-popover { position: fixed; z-index: 1000; padding: 11px 12px; border: 1px solid rgba(96, 165, 250, .36); border-radius: 9px; color: #d6e3f0; background: #101d31; box-shadow: 0 18px 45px rgba(0, 0, 0, .48); font-size: 11px; font-weight: 500; line-height: 1.7; text-align: left; pointer-events: none; }
.account-panel { max-width: 720px; }
.account-form { display: grid; gap: 15px; max-width: 440px; padding-top: 20px; }
.account-form label { color: #9aacc0; font-size: 9px; font-weight: 600; }
.account-form input { width: 100%; height: 42px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; outline: 0; color: white; background: #081220; }
.account-form input:focus { border-color: var(--blue); }
.account-form > em { min-height: 18px; color: #8396ac; font-size: 8px; font-style: normal; }
.account-form > em.success { color: var(--green); }
.account-form > em.error { color: var(--red); }
.mobile-note { display: block; margin-top: 11px; color: #60758d !important; font-size: 8px !important; letter-spacing: 0 !important; text-align: center; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; min-height: 40px; padding-bottom: 12px; border-bottom: 1px solid rgba(148, 163, 184, .075); }
.panel-head b, .panel-head small { display: block; }
.panel-head b { color: #d9e5f2; font-size: 11px; }
.panel-head small { margin-top: 4px; color: #5b6d84; font-size: 7px; }
.panel-head em { color: #5a7490; font: 600 7px ui-monospace, monospace; font-style: normal; letter-spacing: .08em; }
.chart { height: 280px; padding-top: 12px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .grid-line { stroke: rgba(148, 163, 184, .09); stroke-width: 1; }
.chart text { fill: #4d6078; font: 8px ui-monospace, monospace; }
.chart .line { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.chart .pv { stroke: var(--blue); }
.chart .uv { stroke: var(--cyan); stroke-width: 1.7; }
.chart .conversion { stroke: var(--violet); stroke-width: 1.4; stroke-dasharray: 4 5; }

.health-orbit { display: grid; min-height: 156px; place-items: center; }
.health-orbit > div { --health: 0deg; position: relative; display: grid; width: 116px; height: 116px; place-items: center; border-radius: 50%; background: conic-gradient(var(--cyan) 0 var(--health), rgba(148, 163, 184, .08) var(--health)); }
.health-orbit > div::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #0d192b; }
.health-orbit b, .health-orbit small { position: relative; display: block; text-align: center; }
.health-orbit b { font: 730 28px ui-monospace, monospace; }
.health-orbit small { color: #53677e; font: 600 7px ui-monospace, monospace; }
.health-list > div { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 2px; border-top: 1px solid rgba(148, 163, 184, .06); }
.health-list i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.health-list i.warning { background: var(--yellow); }
.health-list i.critical { background: var(--red); }
.health-list b { overflow: hidden; color: #9eb0c4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.health-list span { color: #586b82; font-size: 7px; }

.bars { padding-top: 8px; }
.bar-row { padding: 9px 0; }
.bar-row > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.bar-row span { overflow: hidden; color: #91a3b8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.bar-row b { color: #d8e5f2; font: 600 8px ui-monospace, monospace; }
.bar-row b small { margin-left: 5px; color: #566981; font-size: 6px; }
.bar-row > i { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(148, 163, 184, .07); }
.bar-row > i > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, var(--cyan)); }
.ranking { padding-top: 7px; }
.rank-row { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; min-height: 34px; border-bottom: 1px solid rgba(148, 163, 184, .06); }
.rank-row i { color: #40526a; font: 600 7px ui-monospace, monospace; font-style: normal; }
.rank-row b { overflow: hidden; color: #91a4ba; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.rank-row span { color: #d1dfed; font: 600 8px ui-monospace, monospace; }

.event-stream { max-height: 260px; overflow: auto; padding-top: 6px; scrollbar-width: thin; scrollbar-color: #243750 transparent; }
.event-stream.tall { max-height: 590px; }
.event-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 3px; border-bottom: 1px solid rgba(148, 163, 184, .06); }
.event-row > i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.event-row > i.danger { background: var(--red); }
.event-row b, .event-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-row b { color: #acbdd0; font-size: 8px; }
.event-row small, .event-row em { color: #506178; font-size: 6px; font-style: normal; }
.event-row em { white-space: nowrap; }

.visitor-panel { min-height: 320px; }
.visitor-list { padding-top: 8px; }
.visitor-list.full { max-width: 1180px; }
.visitor-card { margin: 8px 0; overflow: hidden; border: 1px solid rgba(148, 163, 184, .09); border-radius: 11px; background: rgba(6, 13, 25, .36); }
.visitor-card summary { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 13px; cursor: pointer; list-style: none; }
.visitor-card summary::-webkit-details-marker { display: none; }
.visitor-card summary::after { content: "查看"; grid-column: 3; color: #647890; font-size: 7px; }
.visitor-card[open] summary::after { content: "收起"; }
.visitor-card[open] summary { border-bottom: 1px solid rgba(148, 163, 184, .075); background: rgba(96, 165, 250, .025); }
.visitor-number { display: grid; min-height: 34px; place-items: center; border-radius: 8px; color: #a9d5ff; background: rgba(96, 165, 250, .08); font-size: 9px; font-weight: 700; }
.visitor-main b, .visitor-main small { display: block; }
.visitor-main b { color: #d9e5f2; font-size: 10px; }
.visitor-main small { margin-top: 5px; color: #667a92; font-size: 7px; }
.visitor-state { grid-column: 3; grid-row: 1; margin-bottom: 17px; padding: 4px 7px; border-radius: 6px; color: #8294aa; background: rgba(148, 163, 184, .06); font-size: 7px; font-style: normal; white-space: nowrap; }
.visitor-state.online { color: #a9f3d1; background: rgba(52, 211, 153, .08); }
.visitor-detail { display: grid; gap: 13px; padding: 14px; }
.visitor-detail > div > b { display: block; margin-bottom: 8px; color: #73869d; font-size: 7px; }
.journey, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.journey > i, .actions > i { padding: 6px 8px; border-radius: 7px; color: #aabbd0; background: rgba(148, 163, 184, .055); font-size: 7px; font-style: normal; }
.journey > small { color: #52677f; font-size: 8px; }
.actions > i { color: #b8f2da; background: rgba(52, 211, 153, .06); }
.actions > i > small { margin-left: 3px; color: #648176; font-size: 6px; }
.visitor-summary { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, .065); color: #60738a; font-size: 7px; }
.visitor-summary b { color: #aebed0; }
.show-all-visitors { width: 100%; min-height: 36px; margin-top: 8px; border: 1px solid rgba(96, 165, 250, .16); border-radius: 8px; color: #9bcfff; background: rgba(96, 165, 250, .055); cursor: pointer; font-size: 8px; }

.server-list, .server-grid { display: grid; gap: 12px; padding-top: 10px; }
.server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.server-card { padding: 14px; border: 1px solid rgba(148, 163, 184, .09); border-radius: 11px; background: rgba(6, 13, 25, .42); }
.server-head { display: flex; justify-content: space-between; gap: 10px; }
.server-head b, .server-head small { display: block; }
.server-head b { color: #d8e5f3; font-size: 9px; }
.server-head small { margin-top: 3px; color: #52647b; font-size: 6px; }
.server-head > span { padding: 4px 7px; border-radius: 5px; color: #9bf0c9; background: rgba(52, 211, 153, .07); font-size: 6px; }
.server-head > span.offline { color: #fda4af; background: rgba(251, 113, 133, .07); }
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.gauge { min-width: 0; padding: 8px; border-radius: 7px; background: rgba(148, 163, 184, .03); }
.gauge > span { display: flex; justify-content: space-between; gap: 5px; color: #6c7f97; font-size: 6px; }
.gauge > span b { color: #c6d4e3; font: 600 7px ui-monospace, monospace; }
.gauge > i { display: block; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: rgba(148, 163, 184, .08); }
.gauge > i i { display: block; height: 100%; background: var(--cyan); }
.service-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.service-row i { padding: 3px 6px; border-radius: 4px; color: #81ddb8; background: rgba(52, 211, 153, .05); font-size: 6px; font-style: normal; }
.service-row i.down { color: #f98da0; background: rgba(251, 113, 133, .05); }
.compact .server-card { padding: 11px; }
.compact .gauges { grid-template-columns: repeat(3, 1fr); }
.compact .service-row { display: none; }

.alert-list { padding-top: 7px; }
.alert-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 5px; border-bottom: 1px solid rgba(148, 163, 184, .06); }
.alert-row > i { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; color: var(--yellow); background: rgba(251, 191, 36, .08); font: 700 9px ui-monospace, monospace; font-style: normal; }
.alert-row.critical > i { color: var(--red); background: rgba(251, 113, 133, .08); }
.alert-row b, .alert-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-row b { color: #bdccdc; font-size: 8px; }
.alert-row small, .alert-row em { color: #576981; font-size: 6px; font-style: normal; }
.alert-row em { white-space: nowrap; }
.all-clear { display: grid; min-height: 130px; place-items: center; align-content: center; color: #60758d; text-align: center; }
.all-clear i { color: var(--green); font-size: 22px; font-style: normal; }
.all-clear b { margin-top: 7px; font-size: 9px; }
.all-clear small { margin-top: 3px; font-size: 7px; }

.table { padding-top: 8px; overflow: auto; }
.table table { width: 100%; border-collapse: collapse; color: #91a4ba; font-size: 7px; }
.table th { padding: 10px 8px; border-bottom: 1px solid rgba(148, 163, 184, .12); color: #52657d; text-align: left; font-size: 6px; white-space: nowrap; }
.table td { max-width: 260px; padding: 11px 8px; border-bottom: 1px solid rgba(148, 163, 184, .06); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table code { padding: 2px 4px; border-radius: 4px; color: #8dc8ff; background: rgba(96, 165, 250, .07); font: 500 6px ui-monospace, monospace; }
.table button {
  padding: 4px 7px;
  border: 1px solid rgba(251, 113, 133, .18);
  border-radius: 5px;
  color: #fda4af;
  background: rgba(251, 113, 133, .06);
  cursor: pointer;
  font-size: 6px;
}
.table .device-active { color: #8de4bc; }
.table .device-revoked { color: #ef8da0; }
.risk { padding: 3px 6px; border-radius: 5px; color: #fde68a; background: rgba(251, 191, 36, .08); font: 600 6px ui-monospace, monospace; }
.risk.high { color: #fda4af; background: rgba(251, 113, 133, .09); }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.project-card { padding: 19px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, rgba(17, 29, 49, .95), rgba(11, 20, 35, .95)); }
.project-card > div:first-child { display: flex; justify-content: space-between; }
.project-card h2 { margin: 0; font-size: 14px; }
.project-card p { margin: 5px 0 0; color: #5e7189; font-size: 7px; }
.project-card .state { align-self: flex-start; padding: 4px 7px; border-radius: 5px; color: #9bf0c9; background: rgba(52, 211, 153, .07); font-size: 6px; }
.project-card .state.warning { color: #fde68a; background: rgba(251, 191, 36, .08); }
.project-card .state.critical { color: #fda4af; background: rgba(251, 113, 133, .08); }
.project-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 17px; }
.project-metrics div { padding: 10px; border-radius: 7px; background: rgba(148, 163, 184, .03); }
.project-metrics span, .project-metrics b { display: block; }
.project-metrics span { color: #5d7088; font-size: 6px; }
.project-metrics b { margin-top: 4px; color: #d2dfec; font: 650 12px ui-monospace, monospace; }
.project-foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, .07); color: #586b82; font-size: 7px; }

.topology { display: grid; grid-template-columns: 1fr .55fr 1fr .55fr 1fr; align-items: center; gap: 10px; margin-bottom: 12px; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, rgba(17, 29, 49, .94), rgba(11, 20, 35, .94)); }
.topology > div { display: grid; justify-items: center; padding: 17px; border: 1px solid rgba(148, 163, 184, .08); border-radius: 10px; background: rgba(6, 13, 25, .4); }
.topology > div i { display: grid; width: 36px; height: 36px; margin-bottom: 8px; place-items: center; border-radius: 10px; color: var(--blue); background: rgba(96, 165, 250, .08); font: 700 7px ui-monospace, monospace; font-style: normal; }
.topology > div b { color: #c6d4e2; font-size: 9px; }
.topology > div small { margin-top: 4px; color: #566981; font-size: 6px; }
.topology > span { color: #4d6179; font: 600 6px ui-monospace, monospace; text-align: center; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(2, 6, 15, .78);
  backdrop-filter: blur(12px);
}
.modal-card {
  position: relative;
  width: min(100%, 470px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: 16px;
  background: linear-gradient(145deg, #121f34, #0b1423);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .48);
}
.modal-close { position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border: 0; color: #788ba2; background: transparent; cursor: pointer; font-size: 20px; }
.modal-card > small { color: var(--cyan); font: 700 8px ui-monospace, monospace; letter-spacing: .14em; }
.modal-card h2 { margin: 8px 0 7px; font-size: 22px; }
.modal-card > p { margin: 0 0 18px; color: #74869d; font-size: 9px; line-height: 1.75; }
.modal-card label { display: block; color: #9aacc0; font-size: 9px; font-weight: 600; }
.modal-card select { width: 100%; height: 38px; margin-top: 7px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; color: #dce7f2; background: #081220; }
.pair-code { margin-top: 16px; padding: 20px; border: 1px solid rgba(45, 212, 191, .17); border-radius: 11px; background: rgba(45, 212, 191, .04); text-align: center; }
.pair-code span, .pair-code b, .pair-code small { display: block; }
.pair-code span { color: #6f8299; font-size: 8px; }
.pair-code b { margin: 10px 0 7px; color: #d9fff4; font: 750 32px ui-monospace, monospace; letter-spacing: .12em; }
.pair-code small { color: #5e7188; font-size: 7px; }
.pair-steps { margin-top: 15px; padding: 13px 15px; border-radius: 9px; background: rgba(148, 163, 184, .035); }
.pair-steps b { color: #b7c6d7; font-size: 9px; }
.pair-steps ol { margin: 8px 0 0 18px; padding: 0; color: #667990; font-size: 8px; line-height: 1.9; }
.modal-card > em { display: block; min-height: 14px; margin-top: 8px; color: var(--red); font-size: 8px; font-style: normal; text-align: center; }

@media (display-mode: standalone) {
  aside { padding-top: env(safe-area-inset-top); }
  header { padding-top: env(safe-area-inset-top); height: calc(64px + env(safe-area-inset-top)); }
  .time-range-bar { top: calc(64px + env(safe-area-inset-top)); }
  .content { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
}

@media (max-width: 1320px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
  .content { padding: 20px; }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .span-8, .span-6, .span-4 { grid-column: span 12; }
  .server-grid { grid-template-columns: 1fr; }
  .topology { grid-template-columns: 1fr; }
  .topology > span { padding: 14px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  aside { position: fixed; width: 248px; transform: translateX(-102%); box-shadow: 25px 0 70px rgba(0, 0, 0, .45); transition: transform .2s ease; }
  .app.menu-open aside { transform: translateX(0); }
  .mobile-menu { display: block; }
  header > div:first-child > span { display: none; }
  .insights { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .content { padding: 13px; }
  header { height: 56px; padding: 0 12px; }
  .clock { display: none; }
  .pair-header { display: none; }
  .live { display: none; }
  .account-header { height: 31px; padding: 0 9px; font-size: 9px; }
  .time-range-bar { top: 56px; gap: 8px; min-height: 53px; padding: 9px 12px; }
  .time-range-bar > b { font-size: 9px; }
  .time-range-buttons { gap: 7px; }
  .time-range-buttons button { min-height: 31px; padding: 0 10px; font-size: 9px; }
  .hero, .page-head { align-items: flex-start; flex-direction: column; padding: 19px; }
  .score { width: 100%; padding: 12px 0 0; border-top: 1px solid var(--border); border-left: 0; text-align: left; }
  .score span, .score b, .score em { display: inline-block; margin-right: 7px; }
  .metrics, .metrics.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics article { min-height: 100px; padding: 14px; }
  .panel { padding: 14px; }
  .chart { height: 220px; }
  .gauges { grid-template-columns: 1fr; }
  .today-total { width: 100%; min-width: 0; }
  .visitor-card summary { grid-template-columns: 68px minmax(0, 1fr); }
  .visitor-state, .visitor-card summary::after { display: none; }
}

@media (max-width: 620px) and (display-mode: standalone) {
  .time-range-bar { top: calc(56px + env(safe-area-inset-top)); }
}

/* 问号说明需要允许浮层超出卡片边缘。 */
.visitor-card { overflow: visible; }