/* 页面框架：48px 顶栏 + 200px 浅灰侧栏（可收成 52px 图标栏）+ 内容区 + 可选右侧面板。 */
.shell {
  min-height: 100dvh;
}

.skip-link {
  position: absolute;
  left: var(--距-2);
  top: -3rem;
  z-index: var(--层-提示);
  padding: var(--距-2) var(--距-3);
  border-radius: var(--角-中);
  background: var(--色-表面);
  box-shadow: var(--影-中);
}

.skip-link:focus {
  top: var(--距-2);
}

/* 顶栏 */
.shell-top {
  position: sticky;
  top: 0;
  z-index: var(--层-顶栏);
  display: flex;
  align-items: center;
  gap: var(--距-4);
  height: var(--高-顶栏);
  padding: 0 var(--距-4) 0 var(--距-3);
  border-bottom: 1px solid var(--色-边线);
  background: var(--色-表面);
}

.shell-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--距-2);
  color: var(--色-文字);
  font-size: var(--字号-中);
  font-weight: var(--字重-粗);
  text-decoration: none;
  white-space: nowrap;
}

.shell-brand:hover {
  color: var(--色-文字);
}

.shell-brandmark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--角-中);
  background: var(--色-品牌-浅);
  color: var(--色-品牌-文字);
}

.shell-brandmark .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.shell-account {
  display: flex;
  align-items: center;
  gap: var(--距-3);
  margin-left: auto;
  min-width: 0;
}

.shell-quota {
  display: flex;
  align-items: center;
  gap: var(--距-2);
  font-size: var(--字号-小);
  color: var(--色-文字-次);
  white-space: nowrap;
}

.shell-user {
  display: inline-flex;
  align-items: center;
  gap: var(--距-1);
  padding: 0 var(--距-2);
  min-height: var(--高-控件-小);
  border-radius: var(--角-中);
  color: var(--色-文字);
  font-weight: var(--字重-中);
  text-decoration: none;
  white-space: nowrap;
}

.shell-user:hover {
  background: var(--色-表面-悬停);
  color: var(--色-文字);
}

.shell-user .icon {
  width: 1rem;
  height: 1rem;
  color: var(--色-文字-弱);
}

.shell-account .shell-signout {
  padding-left: var(--距-3);
  border-left: 1px solid var(--色-边线);
}

/* 主体网格 */
.shell-frame {
  display: grid;
  grid-template-columns: var(--宽-侧栏) minmax(0, 1fr);
  min-height: calc(100dvh - var(--高-顶栏));
}

.shell-frame--aside {
  grid-template-columns: var(--宽-侧栏) minmax(0, 1fr) 18rem;
}

.shell-frame--icons {
  grid-template-columns: var(--宽-侧栏-图标) minmax(0, 1fr);
}

.shell-frame--icons.shell-frame--aside {
  grid-template-columns: var(--宽-侧栏-图标) minmax(0, 1fr) 18rem;
}

/* 侧栏 */
.shell-side {
  position: sticky;
  top: var(--高-顶栏);
  display: flex;
  flex-direction: column;
  gap: var(--距-1);
  height: calc(100dvh - var(--高-顶栏));
  padding: var(--距-3) var(--距-2);
  overflow-y: auto;
  border-right: 1px solid var(--色-边线);
  background: var(--色-表面-凹);
}

.nav-group + .nav-group {
  margin-top: var(--距-2);
}

.nav-group-title {
  padding: var(--距-2) var(--距-3) var(--距-1);
  font-size: var(--字号-极小);
  font-weight: var(--字重-中);
  color: var(--色-文字-弱);
}

.nav-list {
  display: grid;
  gap: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--距-2);
  min-height: var(--高-控件);
  padding: 0 var(--距-3);
  border-radius: var(--角-中);
  color: var(--色-文字-次);
  font-weight: var(--字重-中);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--时-快) var(--缓动), color var(--时-快) var(--缓动);
}

.nav-link .icon {
  width: 1rem;
  height: 1rem;
  color: var(--色-文字-弱);
}

.nav-link:hover {
  background: var(--色-边线-弱);
  color: var(--色-文字);
}

.nav-link[aria-current="page"] {
  background: var(--色-品牌-浅);
  color: var(--色-品牌-浅上文字);
  font-weight: var(--字重-粗);
}

.nav-link[aria-current="page"] .icon {
  color: var(--色-品牌-文字);
}

/* 指向旧页面的入口（NS-1.5b）：文字后一个小标签；图标栏形态随 .nav-text 一起隐去，仍留在无障碍树里 */
.nav-badge {
  margin-left: auto;
  padding: 0 var(--距-1);
  border-radius: var(--角-小);
  background: var(--色-中性-浅);
  color: var(--色-中性-文字);
  font-size: var(--字号-极小);
  font-weight: var(--字重-中);
  line-height: 1.5;
}

.nav-toggle {
  margin-top: auto;
  font-size: var(--字号-小);
}

/* 图标栏形态（偏好，或 900–1199px 自动） */
.shell-frame--icons .nav-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.shell-frame--icons .nav-link {
  justify-content: center;
  padding: 0;
}

.shell-frame--icons .nav-group-title {
  height: 1px;
  margin: var(--距-2) var(--距-2);
  padding: 0;
  background: var(--色-边线);
}

/* 内容区 */
.shell-main {
  min-width: 0;
  padding: var(--距-4) var(--距-6) var(--距-8);
}

.shell-main:focus {
  outline: none;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--距-2) var(--距-4);
  margin-bottom: var(--距-3);
}

.page-heading {
  display: flex;
  align-items: baseline;
  gap: var(--距-3);
  min-width: 0;
}

.page-title {
  font-size: var(--字号-标题);
}

.page-desc {
  font-size: var(--字号-小);
  color: var(--色-文字-弱);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--距-2);
}

/* 右侧面板 */
.shell-aside {
  position: sticky;
  top: var(--高-顶栏);
  height: calc(100dvh - var(--高-顶栏));
  padding: var(--距-4);
  overflow-y: auto;
  border-left: 1px solid var(--色-边线);
  background: var(--色-表面);
}

/* 窄屏菜单：默认隐藏 */
.shell-menu {
  display: none;
}

.shell-menu-trigger {
  list-style: none;
}

.shell-menu-trigger::-webkit-details-marker {
  display: none;
}

@media (min-width: 900px) and (max-width: 1199px) {
  body.shell .shell-frame {
    grid-template-columns: var(--宽-侧栏-图标) minmax(0, 1fr);
  }

  body.shell .shell-frame--aside {
    grid-template-columns: var(--宽-侧栏-图标) minmax(0, 1fr) 16rem;
  }

  .shell-side .nav-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .shell-side .nav-link {
    justify-content: center;
    padding: 0;
  }

  .shell-side .nav-group-title {
    height: 1px;
    margin: var(--距-2);
    padding: 0;
    background: var(--色-边线);
  }

  .nav-toggle {
    display: none;
  }
}

@media (max-width: 899px) {
  body.shell .shell-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-side,
  .shell-account {
    display: none;
  }

  .shell-menu {
    display: block;
    margin-left: auto;
  }

  .shell-menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    gap: var(--距-3);
    max-height: calc(100dvh - var(--高-顶栏));
    padding: var(--距-3);
    overflow-y: auto;
    border-bottom: 1px solid var(--色-边线);
    background: var(--色-表面-凹);
    box-shadow: var(--影-中);
  }

  .shell-menu-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--距-2) var(--距-3);
    padding-top: var(--距-3);
    border-top: 1px solid var(--色-边线);
  }

  .shell-menu-account .shell-signout {
    margin-left: auto;
  }

  .shell-main {
    padding: var(--距-3) var(--距-4) var(--距-6);
  }

  .shell-aside {
    position: static;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--色-边线);
  }
}

/* 简洁框架（登录、注册） */
.bare {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: var(--距-6) var(--距-4);
}

.bare-main {
  display: grid;
  gap: var(--距-5);
  width: min(100%, 22.5rem);
}

.bare-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--距-2);
  color: var(--色-品牌-文字);
  font-size: var(--字号-大);
  font-weight: var(--字重-粗);
}

.bare-brand span {
  color: var(--色-文字);
}

.bare-brand .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.bare-card {
  display: grid;
  gap: var(--距-4);
  padding: var(--距-6);
  border: 1px solid var(--色-边线);
  border-radius: var(--角-大);
  background: var(--色-表面);
  box-shadow: var(--影-小);
}

.bare-card h1 {
  font-size: var(--字号-大);
}

.bare-foot {
  font-size: var(--字号-小);
  color: var(--色-文字-次);
  text-align: center;
}