:root {
  color-scheme: light;
  --text:#182646; --muted:#596983; --accent:#244af1; --edge:#cfdcf6;
  --panel:#f9fbffdf; --card:#fff; --chip:#eaf0ff; --back:#dce8ff;
  --hero-start:#ddeaff; --hero-end:#a6c4ff; --shadow:#314b8d24;
  --ok:#168257; --bad:#cb3e54; --checking:#c68422;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --text:#eef3ff; --muted:#b1c0dc; --accent:#a9beff; --edge:#32466c;
  --panel:#17233bf5; --card:#202f4d; --chip:#263c65; --back:#111b31;
  --hero-start:#253c6e; --hero-end:#293c68; --shadow:#050c1e6e;
  --ok:#69dda8; --bad:#ff8d9d; --checking:#efb459;
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; padding:28px 16px;
  font:14px/1.5 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text); background:
    radial-gradient(ellipse at 15% 0%,var(--hero-start),transparent 63%),
    radial-gradient(ellipse at 95% 75%,var(--hero-end),transparent 65%),var(--back);
}
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; font:inherit; cursor:pointer; }
button:disabled { opacity:.65; cursor:wait; }
button:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.panel {
  width:min(100%,620px); margin:0 auto; padding:32px 26px 20px;
  border:1px solid var(--edge); border-radius:28px; background:var(--panel);
  box-shadow:0 20px 80px var(--shadow);
}
header { text-align:center; }
.banner {
  position:relative; overflow:hidden; height:168px; border-radius:23px;
  text-align:left; padding:18px 20px; font-size:10px; font-weight:800;
  color:var(--accent); letter-spacing:.23em;
  background:linear-gradient(116deg,var(--hero-start),var(--hero-end));
}
.banner::after {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(125deg,transparent 0 22px,#fff2 23px 24px,transparent 25px 46px);
  mask-image:linear-gradient(100deg,transparent,#000);
}
.banner-mark {
  position:absolute; right:56px; top:-31px; font-size:172px; font-weight:850;
  line-height:1.15; letter-spacing:0; opacity:.24;
}
.theme {
  position:absolute; z-index:1; top:14px; right:15px; width:34px; height:34px;
  border:1px solid var(--edge); border-radius:50%; background:var(--panel); font-size:19px;
}
.logo-chip {
  position:relative; display:grid; place-items:center; width:158px; min-height:65px;
  margin:-32px auto 0; border:2px solid var(--edge); border-radius:24px; background:var(--card);
  box-shadow:0 9px 26px var(--shadow);
}
.logo-chip img { display:block; object-fit:contain; }
.logo-chip .logo-dark, [data-theme="dark"] .logo-chip .logo-light { display:none; }
[data-theme="dark"] .logo-chip .logo-dark { display:block; }
h1 { margin:17px 0 4px; font-size:25px; line-height:1.25; }
header p { margin:0 0 25px; color:var(--muted); }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.section-heading h2 { margin:0; font-size:14px; }
.section-heading h2::before {
  content:""; display:inline-block; width:7px; height:7px; margin-right:8px;
  vertical-align:2px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--chip);
}
.pill { padding:4px 12px; color:var(--muted); background:var(--card); border:1px solid var(--edge); border-radius:999px; font-size:12px; }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.card {
  min-width:0; display:flex; align-items:center; gap:8px; min-height:84px;
  padding:12px; background:var(--card); border:1px solid var(--edge);
  border-radius:18px; box-shadow:0 5px 13px var(--shadow);
}
.card:hover { border-color:var(--accent); }
.entry { min-width:0; flex:1; display:flex; gap:10px; align-items:center; color:inherit; text-decoration:none; }
.entry-icon {
  flex:none; display:grid; place-items:center; width:39px; height:39px;
  border-radius:12px; background:var(--chip); color:var(--accent); font-size:23px; font-weight:650;
}
.entry-copy { min-width:0; display:grid; }
.entry-copy strong { font-size:14px; }
.entry-copy small { color:var(--muted); font-size:11px; }
.host { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:10px/1.6 ui-monospace,monospace; }
.swap { flex:none; width:26px; height:26px; border:1px solid var(--edge); border-radius:50%; background:var(--card); color:var(--muted); padding:0; }
.swap:hover { color:var(--accent); border-color:var(--accent); }
.dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--checking); box-shadow:0 0 0 3px var(--chip); }
.dot[data-state="online"] { background:var(--ok); }
.dot[data-state="offline"] { background:var(--bad); }
.legend { color:var(--muted); font-size:11px; margin:15px 0 0; }
footer { display:flex; justify-content:space-between; gap:12px; margin-top:19px; padding-top:13px; border-top:1px solid var(--edge); color:var(--muted); font-size:11px; }
dialog { width:min(calc(100% - 32px),360px); border:1px solid var(--edge); border-radius:24px; padding:27px; background:var(--card); color:var(--text); text-align:center; box-shadow:0 16px 55px var(--shadow); }
dialog::backdrop { background:#101e4675; backdrop-filter:blur(6px); }
.welcome-icon { margin:0 auto 10px; width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--chip); color:var(--accent); font-size:28px; }
dialog h2 { margin:0; font-size:19px; }
dialog p { color:var(--muted); margin:12px 0 20px; }
dialog button { width:100%; border:0; border-radius:999px; padding:10px 18px; background:#244af1; color:#fff; font-weight:700; }
@media (max-width:520px) { .panel { padding:19px 14px 16px; } .banner { height:136px; } .cards { grid-template-columns:1fr; gap:8px; } .card { min-height:70px; } }