* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100dvh;
  height: 100vh;
  background:
    radial-gradient(120% 60% at 50% -15%, rgba(186, 210, 238, .32) 0%, transparent 68%),
    radial-gradient(120% 50% at 50% 115%, rgba(170, 194, 224, .24) 0%, transparent 70%),
    linear-gradient(180deg, #f8fbff 0%, #eef3fa 55%, #e7edf6 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #1f2937;
  overflow: hidden;
}

#app {
  width: 100vw;
  height: 100dvh;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.device {
  width: 100vw;
  height: 100dvh;
  height: 100vh;
  background:
    radial-gradient(120% 50% at 50% -10%, rgba(204, 220, 241, .22) 0%, transparent 70%),
    linear-gradient(180deg, #f9fbff 0%, #f1f5fb 100%);
  border-radius: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.title { font-size: 17px; font-weight: 700; }
.main-scroll {
  flex: 1;
  overflow: auto;
  padding: 0;
  min-height: 0;
  background:
    radial-gradient(130% 62% at 50% -16%, rgba(180, 206, 236, .20) 0%, transparent 72%),
    radial-gradient(120% 42% at 50% 112%, rgba(162, 188, 220, .20) 0%, transparent 70%),
    linear-gradient(180deg, #f8fbff 0%, #f1f6fd 55%, #edf3fb 100%);
}

.tabbar {
  height: 58px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #e3e8f1;
  background: rgba(255, 255, 255, 0.88);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 -10px 28px rgba(22, 34, 58, .08);
  position: relative;
  overflow: hidden;
}
.tabbar::before{
  content:"";
  position:absolute;
  left:8px; right:8px; top:2px; height:38%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  pointer-events:none;
}
.tabbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(140,166,204,.45), transparent);
  pointer-events:none;
}
.tabbar a {
  text-decoration: none;
  color: #7b8799;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  position: relative;
  transition: color .16s ease, transform .16s ease;
}
.tabbar a span:last-child{
  font-weight: 500;
  letter-spacing: .2px;
}
.tab-i {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  transition: transform .16s ease, filter .16s ease;
}
.tab-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c7cbd2' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5L12 3l9 7.5'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
}
.tab-kb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23c7cbd2'%3E%3Cpath d='M3 5.5A2.5 2.5 0 0 1 5.5 3H12v18H5.5A2.5 2.5 0 0 1 3 18.5v-13z'/%3E%3Cpath d='M21 5.5A2.5 2.5 0 0 0 18.5 3H12v18h6.5a2.5 2.5 0 0 0 2.5-2.5v-13z'/%3E%3Crect x='6.5' y='8' width='3.5' height='1.4' fill='white'/%3E%3Crect x='6.5' y='11' width='3.5' height='1.4' fill='white'/%3E%3Crect x='6.5' y='14' width='3.5' height='1.4' fill='white'/%3E%3Crect x='14' y='8' width='3.5' height='1.4' fill='white'/%3E%3Crect x='14' y='11' width='3.5' height='1.4' fill='white'/%3E%3Crect x='14' y='14' width='3.5' height='1.4' fill='white'/%3E%3C/svg%3E");
}
.tab-me {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c7cbd2' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.2' r='3.6'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3Ccircle cx='15.8' cy='15.8' r='1.2' fill='%23c7cbd2' stroke='none'/%3E%3C/svg%3E");
}
.tabbar a.router-link-exact-active { color: #1557e9; font-weight: 700; }
.tabbar a.router-link-exact-active{
  transform: translateY(-1px);
}
.tabbar a.router-link-exact-active span:last-child{
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.tabbar a.router-link-exact-active::before{
  content:"";
  position:absolute;
  top:4px;
  left:50%;
  transform: translateX(-50%);
  width: 52px;
  height: 26px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(52,123,227,.18), rgba(52,123,227,0) 72%);
  pointer-events:none;
}
.tabbar a.router-link-exact-active .tab-i{
  transform: scale(1.06);
  filter: drop-shadow(0 3px 6px rgba(44,106,196,.28));
}
.tabbar a.router-link-exact-active .tab-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231557e9' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5L12 3l9 7.5'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
}
.tabbar a.router-link-exact-active .tab-kb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%231557e9'%3E%3Cpath d='M3 5.5A2.5 2.5 0 0 1 5.5 3H12v18H5.5A2.5 2.5 0 0 1 3 18.5v-13z'/%3E%3Cpath d='M21 5.5A2.5 2.5 0 0 0 18.5 3H12v18h6.5a2.5 2.5 0 0 0 2.5-2.5v-13z'/%3E%3Crect x='6.5' y='8' width='3.5' height='1.4' fill='white'/%3E%3Crect x='6.5' y='11' width='3.5' height='1.4' fill='white'/%3E%3Crect x='6.5' y='14' width='3.5' height='1.4' fill='white'/%3E%3Crect x='14' y='8' width='3.5' height='1.4' fill='white'/%3E%3Crect x='14' y='11' width='3.5' height='1.4' fill='white'/%3E%3Crect x='14' y='14' width='3.5' height='1.4' fill='white'/%3E%3C/svg%3E");
}
.tabbar a.router-link-exact-active .tab-me {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231557e9' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.2' r='3.6'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3Ccircle cx='15.8' cy='15.8' r='1.2' fill='%231557e9' stroke='none'/%3E%3C/svg%3E");
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,251,255,.9) 100%);
  border: 1px solid #e6eaf2;
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow:
    0 10px 24px rgba(28, 44, 70, .07),
    inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(6px);
  position: relative;
}
.card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 30%);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
}
.btn.primary { background: #10b981; color: #fff; border-color: #0f9e70; }
.input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 14px;
}
.muted { color: #94a3b8; font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; }
.list-item { padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.list-item:last-child { border-bottom: none; }

.home-page { min-height: 100%; background: transparent; padding-top: 0; }
.home-head {
  background:
    radial-gradient(140% 120% at 50% -20%, rgba(182, 207, 244, .24) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-bottom: 1px solid #e8edf6;
  padding: 10px 12px 10px;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 14px 30px rgba(24, 52, 96, .12);
  position: relative;
  overflow: hidden;
}
.home-head::after{
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(120, 174, 255, .18) 0%, rgba(120,174,255,0) 70%);
  pointer-events: none;
}
.home-head-line{
  width: 68px;
  height: 4px;
  border-radius: 6px;
  background: #e8edf5;
  margin: 2px auto 8px;
}
.home-title-main {
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  color: #1f3f70;
  letter-spacing: .8px;
  margin-bottom: 10px;
  text-shadow: 0 2px 10px rgba(52, 98, 168, .16);
}
.home-search-wrap {
  margin-top: 8px;
  padding: 0 12px;
}
.home-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2f93d5 0%, #53b1ec 100%);
  border: 1px solid #79c0ea;
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 14px 28px rgba(33, 111, 169, .28);
  position: relative;
}
.home-search::before{
  content:"";
  position:absolute;
  left:8px;right:8px;top:4px;height:40%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events:none;
}
.home-search-input {
  background: #ffffff;
  color: #1f2937;
  border-radius: 13px;
  border: 0;
  font-size: 16px;
  font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(27, 62, 110, .08);
}
.home-search-input::placeholder{
  color:#9aa6b6;
}
.home-search-btn {
  width: 74px;
  border-radius: 13px;
  background: transparent !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  font-weight: 800;
  letter-spacing: .5px;
}
.home-banner{
  margin: 12px 12px 0;
  height: 132px;
  min-height: 132px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid #dfe6f2;
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(68, 133, 226, .3) 0%, transparent 60%),
    linear-gradient(145deg, #061634 0%, #0a274f 45%, #0c3d73 100%);
  box-shadow: 0 18px 34px rgba(8, 24, 48, .28);
  overflow: hidden;
  position: relative;
}
.home-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  pointer-events:none;
}
.home-banner-empty{
  width:100%;
  height: 132px;
  min-height: 132px;
}
.home-banner-img{
  width:100%;
  height: 132px;
  min-height: 132px;
  object-fit:cover;
  display:block;
}
.home-services {
  margin: 12px 12px 0;
  background: #ffffff;
  border-color: #e5ebf4;
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(20, 44, 82, .10);
}
.home-grid { gap: 10px; }
.svc-btn {
  border: 1px solid #e6ecf3;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 16px;
  min-height: 102px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 10px 18px rgba(30, 60, 110, .09);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.svc-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(21, 72, 148, .12);
}
.svc-btn:hover {
  border-color: #d5dfec;
  box-shadow: 0 14px 24px rgba(30, 60, 110, .14);
}
.svc-ico {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f1f7ff 0%, #dfeaff 100%);
  color: #3870dc;
  font-size: 21px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 8px rgba(40,84,150,.12);
}
.svc-ico-img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.svc-t { font-size: 14px; font-weight: 700; color: #223754; letter-spacing:.2px; }

.home-recent {
  margin: 12px 12px 0;
  background: #ffffff;
  border-color: #e7edf5;
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(20, 44, 82, .09);
}
.home-card-title { font-weight: 800; font-size: 18px; margin-bottom: 8px; }
.home-card-title::before{
  content:"• ";
  color:#2f78c8;
}
.recent-item {
  border-top: 1px dashed #d7e1ef;
  padding: 12px 0;
}
.recent-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.recent-line1 strong { font-size: 13px; color:#355997; }
.recent-line1::after{
  content:"实时";
  margin-left:auto;
  font-size:11px;
  color:#2d6fc0;
  background:#edf3ff;
  border-radius:10px;
  padding:1px 7px;
}
.badge {
  background: #e8f5ec;
  color: #2f8759;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}
.status {
  margin-left: 8px;
  font-size: 12px;
  color: #2f8759;
  background: #e8f5ec;
  border-radius: 999px;
  padding: 2px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.recent-line2 {
  margin-top: 7px;
  color: #5d697c;
  font-size: 12px;
  line-height: 1.45;
}

.kb-page { padding: 8px 8px 12px; }
.kb-head {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e9f0;
  margin-bottom: 8px;
}
.kb-title { font-size: 20px; font-weight: 700; color: #2a2f3a; }
.kb-actions {
  position: absolute;
  right: 8px;
  display: flex;
  gap: 6px;
}
.kb-dot {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid #dde3ed;
  background: #fff;
  color: #222;
  font-size: 12px;
}
.kb-search { margin-bottom: 8px; }
.kb-search-input {
  border-radius: 12px;
  background: #f5f8fc;
  border: 1px solid #dde6f1;
}
.kb-search-btn {
  border-radius: 12px;
  min-width: 74px;
  background: #1fc07a !important;
  border-color: #1ab06f !important;
  color: #fff;
}
.kb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.kb-item {
  min-height: 88px;
  border-radius: 12px;
  border: 1px solid #dce4ef;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
}
.kb-item-txt { flex: 1; }
.kb-zh { font-size: 15px; font-weight: 700; color: #273043; line-height: 1.2; }
.kb-ug { margin-top: 4px; font-size: 11px; color: #6c7689; line-height: 1.2; }
.kb-icon-wrap {
  width: 44px; height: 44px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85);
}
.kb-icon-img { width: 28px; height: 28px; object-fit: contain; }
.kb-icon-fallback { font-weight: 800; color: #348ce3; font-size: 20px; }
.kb-bg-0 { background: #f7f4ec; }
.kb-bg-1 { background: #f7f4ec; }
.kb-bg-2 { background: #edf4fb; }
.kb-bg-3 { background: #f3eefb; }
.kb-bg-4 { background: #f7f4ec; }
.kb-bg-5 { background: #eef8f0; }
.kb-hot-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: #2c3448; }

.me-page { min-height: 100%; background: #edf0f4; padding-bottom: 16px; }
.me-header {
  height: 176px;
  background: linear-gradient(180deg, #78a4e8 0%, #8db4f0 100%);
  border-radius: 0 0 18px 18px;
  padding: 10px 14px;
  position: relative;
  color: #12233e;
}
.me-header-actions {
  position: absolute;
  right: 14px;
  top: 14px;
  display: flex;
  gap: 8px;
}
.me-dot {
  width: 38px;
  height: 28px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.92);
  color: #111;
}
.me-setting {
  position: absolute;
  right: 20px;
  top: 84px;
  color: #283c62;
  font-weight: 600;
}
.me-profile {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.me-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 3px solid rgba(255,255,255,.82);
  background: rgba(255,255,255,.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.me-name { font-size: 38px; font-weight: 800; color: #12233e; line-height: 1.1; }
.me-uid { font-size: 22px; color: #2b4a79; margin-top: 3px; }

.me-order-btn {
  margin: 10px 12px;
  width: calc(100% - 24px);
  height: 44px;
  border-radius: 22px;
  border: 0;
  background: #1a1f2a;
  color: #fff;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.me-order-left { font-weight: 700; font-size: 16px; }
.me-go {
  min-width: 56px;
  height: 32px;
  border-radius: 18px;
  background: #ffe03d;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.me-menu {
  margin: 0 12px 10px;
  background: #fff;
  border-radius: 12px;
}
.me-menu-row {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #edf1f6;
  color: #283244;
  font-size: 16px;
}
.me-menu-row:last-child { border-bottom: 0; }
.me-menu-row .arrow { color: #99a3b3; font-size: 20px; }
.me-menu-row .dot {
  width: 8px; height: 8px; border-radius: 8px;
  display: inline-block; margin-right: 8px;
  background: #45b8ff;
}
.me-menu-row.danger .dot { background: #ff4d63; }

@media (min-width: 768px) {
  body { background: #dfe9f4; }
  #app {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    overflow: auto;
  }
  .device {
    max-width: 480px;
    border-radius: 14px;
    margin: 12px auto;
    border: 1px solid #dbe7f1;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    width: min(480px, 100vw - 24px);
    height: calc(100dvh - 24px);
    height: calc(100vh - 24px);
  }
}