*{border:0;margin:0;padding:0;outline:none;list-style:outside none;box-sizing:border-box}

body{
  background:#f6f8fa url(https://rba.kanostar.top/adapt) center top/cover no-repeat fixed; /* 保持原API */
  color:#3f4347;
  font-size:12px;
  font-family:sans-serif;
  line-height:1;
  position:relative;
  min-height:100vh; /* 新增 */
}

a{text-decoration:none;color:inherit}

.container{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  padding:0 10px
}

#app{
  padding-top:75px
}

/* 头部保持原样 */
#header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background: hsla(0, 0%, 100%, 0.5);
  box-shadow:0 1px 10px rgba(0,0,0,.05);
  border-bottom:1px solid #e3e4e6;
  z-index:10
}

#header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:55px
}

#header .logo{
  font-size:18px;
  font-weight:700;
  color:#319848
}

#header .navi{
  font-size:14px
}

#header .navi a{
  color:#838b90;
  transition:color .3s ease-out;
  margin-left:15px
}

#header .navi a:hover{
  color:#4b9b5d
}

/* 状态卡片保持原样 */
#uptime{
  background: hsla(0, 0%, 100%, 0.5);
  border:1px solid #e3e4e6;
  border-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  overflow:hidden
}

#uptime .item{
  padding:18px 20px;
  border-bottom:1px solid #e7e8e9
}

#uptime .item:last-child{
  border-bottom:none
}

#uptime .loading{
  background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZmlsbD0iI0Q2RDhEOCIgZD0iTTE5LjUyIDQyLjcxMmM5Ljg5NyAyLjkxNiAyMC4yODUtMi43NDMgMjMuMjAxLTEyLjY0bC0zLjkwMi0xLjE1Yy0yLjI4MSA3Ljc0Mi0xMC40MDcgMTIuMTctMTguMTUgOS44ODhsLTEuMTUgMy45MDJ6Ij48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDI1IDI1IiB0bz0iMzYwIDI1IDI1IiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjwvc3ZnPg==) 50%/40px 40px no-repeat;
  height:100px
}

#uptime .item:hover{
  background-color:#fffdf5
}

#uptime .meta{
  justify-content:space-between;
  margin-bottom:8px
}

#uptime .meta,#uptime .meta .info{
  display:flex;
  align-items:center
}

#uptime .meta .name{
  font-size:16px;
  line-height:20px;
  color:#5a606b
}

#uptime .meta .link{
  background:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMzYgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjAwLjgxOCA2OTcuNmMtNzAuNCAwLTEzNC40LTI1LjYtMTkyLTc2LjgtMjUuNi0yNS42LTI1LjYtNjQtNi40LTg5LjYgMjUuNi0yNS42IDY0LTI1LjYgODkuNi02LjQgNTcuNiA1MS4yIDE0Ny4yIDUxLjIgMTk4LjQgMGwxNjYuNC0xNjYuNGMyNS42LTI1LjYgMzguNC02NCAzOC40LTEwMi40IDAtMjUuNi02LjQtNjQtMzguNC05Ni01Ny42LTUxLjItMTQ3LjItNTEuMi0xOTguNCAwbC02NCA3Ni44Yy0yNS42IDI1LjYtNjQgMjUuNi04OS42IDAtMjUuNi0yNS42LTI1LjYtNjQgMC04OS42bDcwLjQtNzAuNGMxMDIuNC0xMDIuNCAyNjguOC0xMDIuNCAzNzcuNiAwIDUxLjIgNTEuMiA4My4yIDExNS4yIDgzLjIgMTkyIDAgNzAuNC0yNS42IDEzNC40LTc2LjggMTkybC0xNjYuNCAxNjYuNGMtNTcuNiA0NC44LTEyMS42IDcwLjQtMTkyIDcwLjR6IiBmaWxsPSIjODQ5MkE2Ii8+PHBhdGggZD0iTTI3NC40MTggMTAyNGMtNzAuNCAwLTEzNC40LTI1LjYtMTkyLTc2LjgtMTA4LjgtOTYtMTA4LjgtMjYyLjQtNi40LTM3Ny42bDE2Ni40LTE2Ni40YzEwOC44LTEwMi40IDI3NS4yLTEwMi40IDM3Ny42IDAgMjUuNiAyNS42IDI1LjYgNjQgMCA4OS42cy02NCAyNS42LTg5LjYgMGMtNTEuMi01MS4yLTE0MC44LTUxLjItMTk4LjQgMGwtMTY2LjQgMTY2LjRjLTQ0LjggNTEuMi02NCAxNDAuOCAwIDE5OC40IDU3LjYgNTEuMiAxNDcuMiA1MS4yIDE5OC40IDBsNzAuNC03MC40YzI1LjYtMjUuNiA2NC0yNS42IDg5LjYgMHMyNS42IDY0IDAgODkuNmwtNzAuNCA3MC40Yy00NC44IDUxLjItMTA4LjggNzYuOC0xNzkuMiA3Ni44eiIgZmlsbD0iIzg0OTJBNiIvPjwvc3ZnPg==) 50%/100% 100% no-repeat;
  width:13px;
  height:13px;
  margin-left:6px;
  opacity:.6;
  text-indent:-99999px;
  transition:opacity .3s ease-out
}

#uptime .meta .link:hover{
  opacity:1
}

#uptime .meta .status{
  background:0/14px auto no-repeat;
  padding-left:20px;
  font-size:14px
}

#uptime .meta .status.ok{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAybC04IDgtNC00IDEuNS0xLjVMNCA3IDEwLjUuNSAxMiAyeiIgZmlsbD0iIzI4YTc0NSIvPjwvc3ZnPg==);
  color:#28a745
}

#uptime .meta .status.down{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTA2NCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yMDUuMDkgOTU5LjM3M2wzMjcuODItMzI3LjgzIDMyNy44MjcgMzI3LjgzTDk4MS4zMSA4MzguNzkgNjUzLjQ5IDUxMC45N2wzMjcuODItMzI3LjgxNEw4NjAuNzM3IDYyLjU4IDUzMi45MSAzOTAuNCAyMDUuMDkgNjIuNTgxIDg0LjUyNyAxODMuMTU1bDMyNy44MiAzMjcuODE0LTMyNy44MiAzMjcuODJ6IiBmaWxsPSIjRDk1MzRGIi8+PC9zdmc+);
  color:#d9534f
}

#uptime .meta .status.unknow{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik01MjEuMjE2IDE2NC44NjRjMTYxLjc5MiAwIDE5OS42OCAxNDkuNTA0IDEwNi40OTYgMjQyLjY4OEM1MjMuMjY0IDUxMiA0NDEuMzQ0IDUzMi40OCA0NDEuMzQ0IDc0OS41NjhoMTU4LjcyYzEuMDI0LTEyMy45MDQgNjIuNDY0LTE4yLjI3MiAxMjUuOTUyLTIzOS42MTYgNTguMzY4LTUzLjI0OCAxMjAuODMyLTk5LjMyOCAxMjAuODMyLTIwNi44NDggMC0xNzEuMDA4LTE1OS43NDQtMjkyLjg2NC0zMjUuNjMyLTI5Mi44NjQtMTg3LjM5MiAwLTM0NC4wNjQgMTMyLjA5Ni0zNDQuMDY0IDMxNi40MTZoMTU4LjcyYzAtOTIuMTYgOTIuMTYtMTYxLjc5MiAxODUuMzQ0LTE2MS43OTJNNDQxLjM0NCA4NTUuMDRoMTU4LjcydjE1OC43MmgtMTU4LjcyVjg1NS4wNHoiIGZpbGw9IiM2QTczN0QiLz48L3N2Zz4=);
  color:#6a737d
}

#uptime .timeline{
  height:35px;
  display:flex;
  justify-content:space-between;
  margin-bottom:10px
}

#uptime .timeline i{
  flex-grow:1;
  margin:0 1px;
  cursor:pointer
}

#uptime .timeline i:hover{
  opacity:.6
}

#uptime .timeline i.ok{
  background:#9fd8ac
}

#uptime .timeline i.none{
  background:#f3f3f3
}

#uptime .timeline i.down{
  background:#f29571
}

#uptime .tooltip{
  font-size:12px!important;
  padding:6px 9px!important;
  border-radius:4px!important
}

#uptime .foot{
  display:flex;
  justify-content:space-between;
  line-height:15px;
  color:#999fa6
}

#footer{
  text-align:center;
  font-size:12px;
  line-height:1.8;
  color:#999fa6;
  padding:20px 0
}

#footer a{
  color:#58ad6a;
  font-weight:700
}

/* 新增移动端优化 */
@media (max-width: 768px) {
  body {
    background-attachment: scroll; /* 修复移动端显示不全 */
    background-position: center top; /* 保持顶部对齐 */
  }
  
  #header .container {
    height: 45px;
    padding: 0 8px;
  }
  
  #header .logo {
    font-size: 16px;
  }
  
  #header .navi a {
    margin-left: 10px;
    font-size: 13px;
  }
  
  #app {
    padding-top: 65px; /* 缩小顶部间距 */
  }
  
  #uptime .item {
    padding: 15px;
  }
}