:root{
  --bg:#050500;
  --panel:#0b0900;
  --panel-2:#0d0b02;
  --gold:#f2d45a;
  --gold-soft:#d7bc56;
  --gold-dim:#746426;
  --line:#4c420f;
  --line-soft:#302a0b;
  --text:#f2ecd8;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.page-shell{width:min(100%,590px);margin:0 auto;padding:20px 24px 34px;background:var(--bg)}

.route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px;margin-bottom:34px}
.route-card{position:relative;display:flex;flex-direction:column;justify-content:center;height:129px;padding:25px 22px 21px;border:1px solid var(--line);border-radius:27px;background:linear-gradient(145deg,#0d0b02 0%,#080700 100%);box-shadow:inset 0 0 20px rgba(255,224,80,.015);transition:transform .15s ease,border-color .15s ease}
.route-card:active{transform:scale(.985);border-color:#8b7822}
.route-name{font-size:22px;font-weight:900;line-height:1.15;letter-spacing:-.5px;color:#f6f1df;text-shadow:0 1px 0 rgba(255,255,255,.05)}
.route-bottom{display:flex;align-items:flex-end;margin-top:18px;min-width:0}
.latency{font-size:22px;line-height:1;font-weight:850;color:#f1d555;white-space:nowrap}
.arrow{margin-left:auto;color:#9f8b30;font-size:36px;line-height:.72;font-family:Arial,sans-serif;transform:translateY(-1px)}
.bars{display:inline-flex;align-items:flex-end;gap:4px;height:25px;margin-left:19px;margin-bottom:0}
.bars i{display:block;width:6px;border-radius:1px;background:#f1d555}
.bars i:nth-child(1){height:7px}.bars i:nth-child(2){height:11px}.bars i:nth-child(3){height:17px}.bars i:nth-child(4){height:23px}
.bars.dim i:nth-child(4){background:#2b260b}.bars.dim i:nth-child(3){height:15px}.bars.dim i:nth-child(2){height:10px}
.badge{position:absolute;top:12px;right:13px;display:inline-flex;align-items:center;justify-content:center;height:35px;padding:0 14px;border-radius:22px;font-size:18px;font-weight:900;white-space:nowrap}
.badge.hot{color:#fff7dc;background:linear-gradient(180deg,#ff8c40 0%,#df4c17 100%);box-shadow:0 0 15px rgba(255,111,40,.72)}
.badge.recommend{color:#171000;background:linear-gradient(180deg,#e4c654 0%,#a98826 100%);box-shadow:0 0 17px rgba(236,198,72,.57)}

.featured{margin-top:0}
.section-title{position:relative;margin:0 0 21px;padding-left:16px;font-size:25px;line-height:1.2;font-weight:900;color:#e4c951;letter-spacing:-.7px}
.section-title::before{content:"";position:absolute;left:0;top:1px;width:4px;height:24px;border-radius:3px;background:#e7cb55;box-shadow:0 0 8px rgba(230,202,82,.15)}
.nav-group{margin:0 0 30px}
.group-title{margin:0 0 14px 5px;font-size:18px;line-height:1.25;font-weight:760;color:#746427;letter-spacing:-.2px}
.nav-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.nav-card{height:111px;border:1px solid var(--line-soft);border-radius:19px;background:#0c0a02;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px 8px;transition:transform .15s ease,border-color .15s ease}
.nav-card:active{transform:scale(.97);border-color:#6d5e1c}
.nav-icon{display:flex;align-items:center;justify-content:center;width:49px;height:49px;border-radius:12px;color:#fff;font-size:25px;line-height:1;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.nav-name{display:block;width:100%;margin-top:10px;text-align:center;color:#d9ca91;font-size:16px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:480px){
  .page-shell{padding:16px 14px 30px}
  .route-grid{gap:14px;margin-bottom:30px}
  .route-card{height:118px;border-radius:23px;padding:22px 16px 18px}
  .route-name{font-size:20px}.latency{font-size:20px}.bars{margin-left:12px;gap:3px}.bars i{width:5px}.arrow{font-size:31px}
  .badge{font-size:16px;height:31px;padding:0 12px}
  .nav-grid{gap:8px}.nav-card{height:102px;border-radius:16px}.nav-icon{width:44px;height:44px;font-size:23px}.nav-name{font-size:14px}
}
@media (max-width:360px){
  .page-shell{padding-left:10px;padding-right:10px}
  .route-grid{gap:10px}.route-card{padding-left:13px;padding-right:13px}.route-name{font-size:18px}.latency{font-size:18px}.bars{margin-left:8px}.bars i{width:4px}
  .nav-grid{gap:6px}.nav-name{font-size:13px}
}