* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #eef2f8; color: #1a2340; -webkit-font-smoothing: antialiased;
}
a { color: #3b5bfe; text-decoration: none; cursor: pointer; }
a:hover { color: #2f47d6; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
@keyframes dcfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dctyp { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.view-enter { animation: dcfade .35s ease; }

.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px;
  color: #98a3c4; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all .18s;
}
.nav-item:hover { color: #d6ddf2; background: rgba(255,255,255,.05); }
.nav-item.active { background: #283257; color: #fff; box-shadow: inset 3px 0 0 #4f6ef7; }

.card { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(20,30,55,.06); }

.modal-mask {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex;
  align-items: center; justify-content: center; z-index: 100; animation: dcfade .2s ease;
}