/* ============================================================================
   huanxx 控制台 —— 页面层
   ----------------------------------------------------------------------------
   组件（按钮、面板、表格、表单、弹窗…）全部来自 endfield.css，这里只写：
     1. 外壳：左侧栏目条 + 右侧内容列
     2. 页头、面板栅格
     3. app.js 生成的旧类名（.mono / .kv / .pill / .hint …）的对应样式
   颜色一律走 --ef-* 令牌。
   ========================================================================== */

/* [hidden] 的兜底：作者样式里的 display 会盖掉 UA 的 display:none，
   登录框 / 标签页都靠 hidden 属性切换，这里必须写死 */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- 外壳 */

.ef-shell {
  display: flex;
  min-height: 100svh;
}

/* 左侧栏目条：品牌、四个栏目、底部系统状态 */
.appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 12.5rem;
  flex: none;
  height: 100svh;
  padding: 1.25rem 0.75rem 1rem;
  border-right: 1px solid var(--ef-line);
  background: var(--ef-surface);
}

.appbar__brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-inline: 0.5rem;
}

.appbar__mark {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--ef-surface-inverse);
  color: var(--ef-ink-inverse);
  font-family: var(--font-tech);
  font-size: var(--text-sm);
  line-height: 1;
  align-self: center;
}

.appbar__word {
  font-family: var(--font-tech);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
}

.appbar__sub {
  font-family: var(--font-tech);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ef-ink-tertiary);
}

.appbar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.appbar__nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.5rem;
  padding-inline: 0.625rem;
  border-left: 3px solid transparent;
  color: var(--ef-ink-secondary);
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.appbar__nav button:hover {
  background: var(--ef-surface-sunken);
  color: var(--ef-ink);
}

.appbar__nav button.active {
  background: var(--ef-surface-muted);
  border-left-color: var(--ef-ink);
  color: var(--ef-ink);
  font-weight: 500;
}

.appbar__nav .n {
  font-family: var(--font-tech);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  color: var(--ef-ink-tertiary);
}

.appbar__nav .t { font-size: var(--text-sm); }

.appbar__foot {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.75rem 0.5rem 0;
  border-top: 1px solid var(--ef-line);
}

.sys {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-tech);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ef-ink-secondary);
}

.sys .dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: var(--ef-success);
}

/* 栏目切换：只有 .active 那一个显示；换栏目时整块淡入（200ms） */
.tab { display: none; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 2rem); }
.tab.active {
  display: flex;
  animation: ef-in-fade var(--duration-fast) var(--ease-exit) both;
}

/* 面板入场：每次显示出来都播一次，块与块之间错开 60ms（整组 ≤ 600ms） */
.panels > * {
  animation: ef-in-up var(--duration-base) var(--ease-exit) both;
}

.panels > :nth-child(2) { animation-delay: 60ms; }
.panels > :nth-child(3) { animation-delay: 120ms; }
.panels > :nth-child(n + 4) { animation-delay: 180ms; }

/* 活体指示灯：呼吸 */
.sys .dot,
.ef-topbar__status::before {
  animation: ef-breathe 2s var(--ease-emphasis) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tab.active,
  .panels > *,
  .sys .dot,
  .ef-topbar__status::before {
    animation: none;
  }
}

/* ---------------------------------------------------------------- 页头 */

.pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block-end: 1rem;
  border-bottom: 1px solid var(--ef-line);
}

.pagehead__main { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }

.pagehead__desc {
  max-width: 42rem;
  color: var(--ef-ink-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.pagehead__idx {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  color: var(--ef-surface-muted);
  font-weight: 700;
  letter-spacing: -0.02em;
  user-select: none;
}

/* ---------------------------------------------------------------- 面板栅格 */

.panels {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.panels > .span-5 { grid-column: span 5; }
.panels > .span-7 { grid-column: span 7; }
.panels > .span-12 { grid-column: 1 / -1; }

@media (max-width: 62rem) {
  .panels > .span-5,
  .panels > .span-7,
  .panels > .span-12 { grid-column: 1 / -1; }
}

/* 表格铺满面板：正文那块不要内边距 */
.panel-flush { padding: 0 !important; }

/* 表单：两列，跨列用 .span-all */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin-top: 1.25rem;
}

.form-grid .span-all { grid-column: 1 / -1; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 40rem) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

.log-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* ---------------------------------------------------------------- 登录 */

.auth {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: var(--ef-surface);
}

.auth__card {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  width: min(52rem, 100%);
  border: 1px solid var(--ef-line);
  background: var(--ef-surface);
  box-shadow: var(--shadow-md);
}

.auth__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--ef-surface-inverse);
  color: var(--ef-ink-inverse);
  overflow: hidden;
}

.auth__side .ef-micro { color: color-mix(in srgb, var(--ef-ink-inverse) 65%, transparent); }

.auth__ghost {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ef-ink-inverse) 40%, transparent);
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
  margin-block: 1.5rem;
  overflow: hidden;
}

.auth__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.auth__desc { color: var(--ef-ink-secondary); font-size: var(--text-sm); margin-bottom: 0.5rem; }

@media (max-width: 46rem) {
  .auth__card { grid-template-columns: minmax(0, 1fr); }
  .auth__side { flex-direction: row; align-items: center; justify-content: space-between; }
  .auth__ghost { display: none; }
}

/* ---------------------------------------------------------------- 窄屏：栏目条改成顶部横条 */

@media (max-width: 62rem) {
  .ef-shell { display: block; }

  .appbar {
    position: sticky;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--ef-line);
    overflow-x: auto;
  }

  .appbar__brand { padding-inline: 0; }

  .appbar__nav { flex-direction: row; gap: 0.25rem; }

  .appbar__nav button {
    height: 2rem;
    flex: none;
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
    padding-inline: 0.625rem;
  }

  .appbar__brand,
  .appbar__nav,
  .appbar__foot { flex: none; }

  /* 横条上一行放得下：编号让位，只留栏目名 */
  .appbar__nav .n { display: none; }
  .appbar__nav button { font-size: var(--text-sm); }

  .appbar__nav button.active { border-bottom-color: var(--ef-ink); }

  .appbar__foot {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    padding: 0;
    border-top: 0;
  }
}

@media (max-width: 34rem) {
  .appbar__sub,
  .appbar__word,
  .sys { display: none; }
}

/* ---------------------------------------------------------------- app.js 生成的旧类名 */

/* 等宽数值 */
.mono {
  font-family: var(--font-tech);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.muted { color: var(--ef-ink-secondary); }

.hint {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ef-ink-secondary);
}

.err {
  font-size: var(--text-sm);
  color: var(--ef-danger);
}

.warn {
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  color: var(--ef-warning);
}

/* 面板里的小标题 */
.sub {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--font-tech);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ef-ink-secondary);
}

/* 名 / 值列表：app.js 写的是 class="ef-kv"，这里兜底旧的 "kv" */
.kv {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
  margin: 0;
}

.kv dt,
.kv dd {
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--ef-line);
  font-size: var(--text-sm);
  min-width: 0;
}

.kv dt { color: var(--ef-ink-secondary); padding-right: 1rem; }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* 短状态胶囊 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--ef-line-strong);
  border-radius: 999px;
  font-family: var(--font-tech);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ef-ink-secondary);
}

.pill::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
}

.pill.on,
.pill.pub { color: var(--ef-success); border-color: color-mix(in srgb, var(--ef-success) 45%, transparent); }
.pill.off,
.pill.loop { color: var(--ef-ink-secondary); }

/* 代码块与横向滚动的表格容器 */
.code {
  margin: 0;
  padding: 1rem;
  max-height: 22rem;
  overflow: auto;
  background: var(--ef-surface-sunken);
  border-left: 2px solid var(--ef-line-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

.code.tall { max-height: 34rem; }

.tscroll { overflow-x: auto; }

/* 表格里的小按钮：app.js 里是 .ghost / .danger */
.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--ef-surface-sunken);
  color: var(--ef-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.ghost:hover { background: var(--ef-surface-muted); }
.ghost:active { background: var(--ef-line); }

.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-alert-fill);
  color: var(--ef-ink-inverse);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.danger:hover { background: var(--color-alert-fill-hover); }
.danger:active { background: var(--color-alert-fill-pressed); }

.ghost:disabled,
.danger:disabled {
  cursor: not-allowed;
  background: var(--ef-disabled);
  color: var(--ef-on-disabled);
}

/* 面板里的表格不再描外框；列多的时候把字与留白收一档 */
.panel-flush table.ef-table { border: 0; }

.panel-flush .ef-table th,
.panel-flush .ef-table td { padding-inline: 0.625rem; font-size: var(--text-sm); }

/* 日志工具条：下拉定宽，别把一行撑满 */
.log-bar .ef-select { width: 16rem; flex: 0 1 16rem; }

/* ---------------------------------------------------------------- 轻提示 */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  max-width: min(34rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  background: var(--ef-surface-inverse);
  color: var(--ef-ink-inverse);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  box-shadow: var(--shadow-md);
  animation: ef-shift-in var(--duration-base) var(--ease-exit) both;
}

.toast.ok::before,
.toast.bad::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  vertical-align: 0.05em;
  background: var(--ef-success);
}

.toast.bad::before { background: var(--ef-danger); }