* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background: linear-gradient(180deg, #f8fafd 0%, var(--bg) 34%, #f1f5fa 100%);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app { display: flex; min-height: 100vh; }

/* ---------- 侧边导航 ---------- */
.sidebar {
  width: 246px;
  flex-shrink: 0;
  background: rgba(255,255,255,.94);
  border-right: 1px solid var(--border);
  box-shadow: 8px 0 24px rgba(21,59,101,.035);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
  backdrop-filter: saturate(130%) blur(12px);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 15px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255,255,255,.78);
}
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  padding: 5px;
  box-shadow: 0 6px 16px rgba(21,59,101,.06);
  flex-shrink: 0;
}
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand-text { min-width: 0; }
.brand-title { font-size: 14.5px; font-weight: 720; color: var(--text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { padding: 12px 11px 16px; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px 9px 11px;
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13.2px;
  margin-bottom: 3px;
  user-select: none;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-item:hover {
  background: #f5f8fc;
  color: var(--text);
  border-color: #e1e9f2;
  transform: translateX(1px);
}
.nav-item:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.nav-item.active {
  background: var(--primary-50);
  color: var(--primary);
  border-color: #d7e4f1;
  box-shadow: none;
  font-weight: 680;
}
.nav-item.active::before {
  content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);
  transform-origin:center; animation:kyNavRailIn .22s ease-out both;
}
.nav-ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
.nav-ico svg { display: block; transition: transform .16s ease, color .16s ease; }
.nav-item:hover .nav-ico { color: var(--text-2); }
.nav-item:hover .nav-ico svg { transform: translateX(1px); }
.nav-item.active .nav-ico { color: var(--primary); }
.nav-sep { height: 1px; background: var(--border-soft); margin: 10px 12px; }
.nav-group-title {
  font-size: 10px; font-weight: 760; letter-spacing: 1.7px;
  color: #8090a3; padding: 12px 12px 6px; margin: 12px 0 4px;
  user-select: none; text-transform: uppercase;
}
.nav-group-title:first-child { margin-top: 0; padding-top: 4px; }
@keyframes kyNavRailIn { from { opacity:0; transform:scaleY(.18); } to { opacity:1; transform:scaleY(1); } }

.sidebar-foot {
  padding: 12px 17px 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.75;
  background: rgba(248,250,252,.72);
}
.sidebar-foot:empty { display:none; }

/* ---------- 主体 ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.90);
  -webkit-backdrop-filter: saturate(135%) blur(12px);
  backdrop-filter: saturate(135%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 30px 13px;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.topbar-heading { position:relative; min-width:0; padding-bottom:7px; }
.topbar-title {
  font-size: 18px;
  font-weight: 740;
  white-space: nowrap;
  color:var(--text);
}
.topbar-subtitle {
  margin-top:2px;font-size:9.5px;font-weight:700;line-height:1.2;color:var(--text-3);letter-spacing:1.15px;
}
.topbar-subtitle[hidden] { display:none; }
.topbar-heading::after {
  content: '';
  position:absolute;left:0;bottom:0;width:34px;height:7px;
  border-top:2px solid rgba(78,125,170,.62);border-radius:50%;
  transform-origin:left center;
}
.topbar-heading.is-entering { animation:kyTitleIn .28s ease-out both; }
.topbar-heading.is-entering::after { animation:kyTitleRail .26s ease-out both; }
.topbar-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.topbar-filters:empty { display:none; }
.content { padding: 26px 32px 60px; max-width: var(--content-max); width: 100%; margin:0 auto; min-width:0; }
.content > * { min-width:0; animation: kyPageFade .32s ease both; }
.content > *:nth-child(2) { animation-delay:.04s; }
.content > *:nth-child(3) { animation-delay:.08s; }
@keyframes kyPageFade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@keyframes kyTitleIn { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:none; } }
@keyframes kyTitleRail { from { opacity:0; transform:scaleX(0); } to { opacity:1; transform:scaleX(1); } }

/* ---------- 通用栅格 ---------- */
.grid { display: grid; gap: var(--gap); min-width:0; }
.grid > *, .section-head > *, .topbar > *, .toolbar > * { min-width:0; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.section { margin-bottom: 24px; }
.section-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 4px 2px 14px;
}
.section-title { font-size: 15.5px; font-weight: 720; letter-spacing: .1px; }
.section-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.section-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

@media (max-width: 1180px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  #app { display:block; }
  .sidebar { position:relative;top:auto;width:100%;height:auto;box-shadow:none;border-right:0;border-bottom:1px solid var(--border); }
  .brand { padding:10px 14px; }
  .brand-mark { width:34px;height:34px; }
  .brand-title { font-size:13.5px; }
  .nav { display:flex;gap:5px;padding:8px 10px 9px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none; }
  .nav::-webkit-scrollbar { display:none; }
  .nav-group-title { display:none; }
  .nav-item { flex:0 0 auto;margin:0;padding:8px 11px;white-space:nowrap; }
  .nav-item.active::before { left:9px;right:9px;top:auto;bottom:-1px;width:auto;height:3px;border-radius:3px 3px 0 0;animation:kyNavRailHorizontal .22s ease-out both; }
  @keyframes kyNavRailHorizontal { from { opacity:0;transform:scaleX(.2); } to { opacity:1;transform:scaleX(1); } }
  .main { width:100%; }
  .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .topbar { padding: 12px 16px; }
}
@media (max-width: 560px) {
  .topbar { align-items:flex-start;gap:10px 12px; }
  .topbar-heading { flex:1 1 auto; }
  .topbar-title { font-size:17px; }
  .topbar-subtitle { font-size:9px; }
  .content { padding:14px 12px 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .nav-item:hover { transform: none; }
  .nav-item:hover .nav-ico svg { transform: none; }
  .nav-item.active::before, .topbar-heading.is-entering, .topbar-heading.is-entering::after { animation: none !important; }
  .content > * { animation: none !important; }
}