/**
 * 登录壳与 thin 网关：**body:has(> header)** + main → mid → page；主内容 **main article**。
 * 顶栏固定、html 滚动、header 内 nav/品牌链等**只写本文件**；品牌表仅提供 :root 令牌与 **body:has** 背景渐变，避免与公共表重复选择器导致后载覆盖跳动。
 */

/* mid 的 display 勿在此与页面表抢层叠：单列见下方 :has(>header)，双栏由 navnova 等写 flex */
page,
waterfall,
lazyloadlist,
countdown-display {
  display: block;
  box-sizing: border-box;
}

mid {
  box-sizing: border-box;
}

body:not(:has(> header)) main > mid {
  display: block;
}

body {
  margin: 0;
}

/* 顶栏壳：与品牌表分工——此处统一定义，避免 html/body/header 在品牌与公共表各写一遍导致后载覆盖引发跳动 */
html:has(body:has(> header)) {
  scroll-behavior: smooth;
  color-scheme: light;
  height: auto;
  min-height: 100dvh;
  max-height: none;
  overflow-x: hidden;
  /* thin.css 设 html 14px Arial，会导致 rem 与正文与壳层不一致 */
  font-size: 16px;
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
}

/* thin.css 全局规则在壳层上的残留：aside 浮动、任意 header 30px 高、label 定宽等（本文件在 thin.css 之后） */
body:has(> header) main aside {
  float: none;
  clear: none;
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  max-width: none;
}

body:has(> header) main header {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  border: none;
  border-bottom: none;
  font-size: inherit;
  width: auto;
  box-sizing: border-box;
}

body:has(> header) main header nav {
  display: flex;
  margin: 0;
}

body:has(> header) main header nav > a {
  display: inline-flex;
  margin: 0;
}

body:has(> header) main article form label {
  display: inline-block;
  width: auto;
  max-width: none;
  min-width: 0;
  color: inherit;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

body:has(> header) main article form textarea,
body:has(> header) main article form select {
  font-family: var(--font, system-ui, sans-serif);
}

body:has(> header) {
  display: flex;
  flex-direction: column;
  --login-page-header-offset: calc(40px + 1.5rem + max(0.75rem, env(safe-area-inset-top, 0px)));
  width: 100%;
  min-height: 100dvh;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text, #0f172a);
}

/* 顶栏须为 body 直接子级，勿用「后代 header」以免 section 内卡片头误套 fixed */
body:has(> header) > header {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap, 1rem);
  flex-wrap: wrap;
  padding: 0.75rem max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
  padding-top: max(0.75rem, env(safe-area-inset-top));
  background: var(--header-bar-bg, rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.1));
}

body:has(> header) > header > a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: var(--header-brand-font-size, 1.35rem);
  letter-spacing: -0.02em;
  color: var(--text, #0f172a);
  min-width: 0;
}

body:has(> header) > header > a > span:not([aria-hidden="true"]) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body:has(> header) > header > a > span[aria-hidden="true"] {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent, #0b6fa4), var(--header-mark-gradient-end, #0ea5e9));
  display: grid;
  place-items: center;
  font-size: var(--header-mark-font-size, 0.75rem);
  font-weight: 800;
  color: #ffffff;
}

body:has(> header) > header nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin: 0;
}

body:has(> header) > header nav a {
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm, 8px);
  color: var(--text-muted, #64748b);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

body:has(> header) > header nav a:hover {
  color: var(--text, #0f172a);
  background: rgba(15, 23, 42, 0.06);
}

body:has(> header) a {
  color: var(--accent, #0b6fa4);
  text-decoration: none;
}

body:has(> header) a:hover {
  color: var(--accent-hover, #095a86);
}

body:has(> header) > main {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  margin-left: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: calc(var(--login-page-header-offset) + 0.75rem) 1rem 2.5rem;
}

/* 单列 mid（网关登录等）：块级。含右侧 aside 的首页双栏由后载页面表（如 navnova.css）的 mid { display:flex } 生效，此处勿把这类 mid 压成 block */
body:has(> header) > main > mid:not(:has(> aside)) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: visible;
}

body:has(> header) > main > mid > page {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: visible;
}

/* ---------- main article 白底卡片（顶栏页统一宽度） ---------- */

/* thin 尚未灌入时不画空壳，避免刷新先闪白框再出表单 */
body:has(> header) main article:not(:has(*)) {
  display: none;
}

main article {
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius, 12px);
  background: var(--bg-elevated, #ffffff);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 12px 40px rgba(15, 23, 42, 0.08);
  padding: 1.75rem 1.75rem 2rem;
  box-sizing: border-box;
  min-height: 4rem;
}

body:has(> header) main article {
  max-width: 56rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 接口目录等：article 限高 + 纵向 flex，列表占剩余视口高度并在 lazyloadlist 内滚动（勿再整页拖长表格） */
body:has(> header) main article:has(lazyloadlist) {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--login-page-header-offset) - 0.75rem - 2.5rem);
  overflow: hidden;
}

body:has(> header) main article:has(lazyloadlist) > h2,
body:has(> header) main article:has(lazyloadlist) > p {
  flex-shrink: 0;
}

/* ---------- 登录表单（声明式 UI 渲染于 article 内） ---------- */

body:has(> header) main article form {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
  box-sizing: border-box;
}

body:has(> header) main article form h2 {
  margin: 0 0 1.25rem;
  font-family: var(--font, system-ui, sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #0f172a);
}

body:has(> header) main article form fieldset {
  border: none;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

body:has(> header) main article form fieldset:last-of-type {
  margin-bottom: 0;
}

body:has(> header) main article form input[type="text"],
body:has(> header) main article form input[type="tel"],
body:has(> header) main article form input[type="email"] {
  height: 2.75rem;
  padding: 0 0.75rem;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.9375rem;
  color: var(--text, #0f172a);
  background: var(--bg-card, #f8fafc);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  border-radius: var(--radius-sm, 8px);
  transition: border-color 0.15s, box-shadow 0.15s;
}

body:has(> header) main article form fieldset input[type="text"],
body:has(> header) main article form fieldset input[type="email"] {
  flex: 1;
  min-width: 0;
  width: auto;
}

body:has(> header) main article form input[type="text"]:focus,
body:has(> header) main article form input[type="tel"]:focus,
body:has(> header) main article form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent, #0d9488);
  box-shadow: 0 0 0 3px var(--accent-dim, rgba(13, 148, 136, 0.2));
}

body:has(> header) main article form fieldset button[type="button"],
body:has(> header) main article form fieldset button[type="submit"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

body:has(> header) main article form fieldset button[type="button"] {
  width: 7.5rem;
  flex-shrink: 0;
  background: var(--bg-elevated, #fff);
  color: var(--text-muted, #64748b);
  border-color: var(--border, rgba(15, 23, 42, 0.15));
}

body:has(> header) main article form fieldset button[type="button"]:hover {
  color: var(--text, #0f172a);
  border-color: rgba(15, 23, 42, 0.22);
  background: rgba(15, 23, 42, 0.04);
}

body:has(> header) main article form fieldset button[type="submit"] {
  width: 100%;
  margin-top: 0.25rem;
  background: var(--accent, #0d9488);
  color: #ffffff;
  border-color: var(--accent, #0d9488);
}

body:has(> header) main article form fieldset button[type="submit"]:hover {
  background: var(--accent-hover, #0f766e);
  border-color: var(--accent-hover, #0f766e);
}

body:has(> header) main article form fieldset countdown-display {
  width: 7.5rem;
  flex-shrink: 0;
  background: var(--bg-card, #f8fafc);
  color: var(--text-muted, #64748b);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  font-variant-numeric: tabular-nums;
  display: none;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  border-radius: var(--radius-sm, 8px);
}

/* 登录错误页（article 根级 h1，与 API 页的 h2 结构不同） */
body:has(> header) main article > h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font, system-ui, sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text, #0f172a);
}

body:has(> header) main article:has(> h1) > p {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}

body:has(> header) main article:has(> h1) > a {
  font-weight: 600;
}

/* ---------- article 主标题与导语（脚本页 h2；登录表单的 h2 在 form 内） ---------- */

body:has(> header) main article > h2 {
  margin: 0 0 1.25rem;
  font-family: var(--font, system-ui, sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #0f172a);
}

body:has(> header) main article > h2 + p {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-muted, #64748b);
  line-height: 1.55;
}

body:has(> header) main article > p:last-child:not([role]) {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted, #64748b);
}

/* lazyloadlist：thin.css 为 position:fixed + margin；抬特异性确保顶栏壳内必覆盖 */
body:has(> header) main article lazyloadlist {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0.25rem 0 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body:has(> header) main article lazyloadlist thead input[type="text"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-card, #f8fafc);
}

body:has(> header) main article lazyloadlist tbody tr {
  cursor: pointer;
}

/* 顶栏面包屑（存在则匹配；登录等页无此 nav） */
body:has(> header) > header nav[aria-label="当前位置"] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.15rem;
  padding: 0 0.5rem;
}

body:has(> header) > header nav[aria-label="当前位置"] > span[aria-hidden="true"] {
  color: var(--text-muted, #64748b);
  font-size: 0.875rem;
  font-weight: 500;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

body:has(> header) > header nav[aria-label="当前位置"] a {
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  text-decoration: none;
  flex-shrink: 1;
  min-width: 0;
  max-width: min(48vw, 22rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(> header) > header nav[aria-label="当前位置"] a:hover {
  color: var(--text, #0f172a);
  background: rgba(15, 23, 42, 0.06);
}

body:has(> header) > header nav[aria-label="当前位置"] > strong {
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  max-width: min(50vw, 24rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 数据表：article 直挂 table 与 lazyloadlist 内 table 共用单元格规则 */
main article > table {
  margin-top: 0.25rem;
  width: 100%;
}

main article > table,
body:has(> header) main article lazyloadlist table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

body:has(> header) main article lazyloadlist table {
  width: 100%;
  table-layout: auto;
}

main article table thead th,
body:has(> header) main article lazyloadlist thead th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card, #f8fafc);
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
}

main article table tbody td,
body:has(> header) main article lazyloadlist tbody td {
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
  color: var(--text);
  vertical-align: top;
}

main article table tbody tr:hover td,
body:has(> header) main article lazyloadlist tbody tr:hover td {
  background: var(--bg-card, #f8fafc);
}

main article table a {
  font-weight: 600;
  color: var(--accent, #0d9488);
  text-decoration: none;
}

main article table a:hover {
  text-decoration: underline;
}

/* article 内文档块（登录 article 仅有 form，不命中） */

main article section,
main article aside {
  margin-bottom: 1.25rem;
  padding: 1rem 1.05rem;
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-card, #f8fafc);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  box-sizing: border-box;
}

main article section h2,
main article aside h2 {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

main article section > div {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--text, #0f172a);
  font-size: 0.9375rem;
}

main article section pre,
main article aside pre {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-elevated, #ffffff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  line-height: 1.45;
  overflow-x: auto;
}

main article section > small {
  display: inline;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted, #64748b);
}

main article p[role="status"],
main article p[role="alert"] {
  margin: 0;
  font-size: 0.9375rem;
}

main article p[role="alert"] {
  color: #b91c1c;
}