/* ==========================================================================
   管理站布局 + 组件
   --------------------------------------------------------------------------
   和用户站的区别：
     · 左侧分组导航（常驻），右侧内容区
     · 内容用「panel」分块，而不是无限叠卡片
     · 没有顶部大标题，标题在内容区顶部
   ========================================================================== */

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

.admin-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

/* ---------- 侧边栏 ---------- */

.admin-side {
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #12121a);
  border-right: 1px solid var(--border, #26263a);
  position: sticky;
  top: 0;
  height: 100vh;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--border, #26263a);
}

.admin-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.admin-brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.admin-brand-sub {
  font-size: 11px;
  color: var(--text-mute, #6b6b80);
  margin-top: 1px;
}

/* ---------- 导航 ---------- */

.admin-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-dim, #a0a0b8);
  font-size: 13.5px;
  text-decoration: none;
  transition: background .14s, color .14s;
}
.admin-nav-item:hover {
  background: rgba(255, 255, 255, .04);
  color: var(--text, #e8e8f0);
}
.admin-nav-item.active {
  background: rgba(124, 58, 237, .14);
  color: var(--neon-light, #c4b5fd);
  font-weight: 500;
}

.admin-nav-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  opacity: .8;
  flex-shrink: 0;
}

/* ---------- 侧边栏底部 ---------- */

.admin-side-foot {
  padding: 12px 12px 16px;
  border-top: 1px solid var(--border, #26263a);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-back {
  font-size: 12px;
  color: var(--text-mute, #6b6b80);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .14s, background .14s;
}
.admin-back:hover {
  color: var(--neon-light, #c4b5fd);
  background: rgba(255, 255, 255, .04);
}

.admin-wallet-btn {
  width: 100%;
  padding: 9px 12px;
  background: rgba(124, 58, 237, .14);
  border: 1px solid rgba(124, 58, 237, .35);
  border-radius: 8px;
  color: var(--neon-light, #c4b5fd);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .14s;
}
.admin-wallet-btn:hover { background: rgba(124, 58, 237, .24); }

.admin-wallet-info {
  padding: 8px 10px;
  background: rgba(255, 255, 255, .03);
  border-radius: 8px;
}
.admin-wallet-addr {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--text-dim, #a0a0b8);
  word-break: break-all;
}
/* 反解出主名称时改用普通字体 —— 域名不该像地址那样等宽 */
.admin-wallet-addr.has-name {
  font-family: inherit;
  font-size: 13px;
  color: var(--text, #e8e8f0);
  font-weight: 500;
  word-break: normal;
}
.admin-wallet-tag {
  font-size: 10.5px;
  margin-top: 3px;
  letter-spacing: .03em;
}
.admin-wallet-tag.ok { color: var(--ok, #22c55e); }
.admin-wallet-tag.bad { color: var(--err, #ef4444); }

/* ---------- 内容区 ---------- */

.admin-main {
  padding: 28px 32px 60px;
  max-width: 920px;
}

.admin-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.admin-sub {
  font-size: 13px;
  color: var(--text-mute, #6b6b80);
  margin: 4px 0 0;
}

.admin-content {
  margin-top: 24px;
}

/* ==========================================================================
   面板（替代无限叠卡片）
   ========================================================================== */

.panel {
  background: var(--bg-card, #12121a);
  border: 1px solid var(--border, #26263a);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-step {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(124, 58, 237, .16);
  color: var(--neon-light, #c4b5fd);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.panel-desc {
  font-size: 12.5px;
  color: var(--text-mute, #6b6b80);
  margin-top: 2px;
}

.panel-note {
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.75;
  margin-bottom: 14px;
}
.panel-note.info {
  background: rgba(124, 58, 237, .07);
  border: 1px solid rgba(124, 58, 237, .2);
  color: var(--text-dim, #a0a0b8);
}
.panel-note.warn {
  background: rgba(234, 179, 8, .07);
  border: 1px solid rgba(234, 179, 8, .22);
  color: #e8d9a0;
}

/* ==========================================================================
   小组件
   ========================================================================== */

/* 概览格子 */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.ov-item {
  padding: 12px 14px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border, #26263a);
  border-radius: 9px;
}
.ov-item.ok  { border-left: 2px solid var(--ok, #22c55e); }
.ov-item.err { border-left: 2px solid var(--err, #ef4444); }
.ov-item.warn { border-left: 2px solid #eab308; }

.ov-label {
  font-size: 11.5px;
  color: var(--text-mute, #6b6b80);
  margin-bottom: 5px;
}
.ov-value {
  font-size: 13px;
  color: var(--text, #e8e8f0);
  word-break: break-all;
}
.ov-value.mono {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
}

/* 键值行 */
.kv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  font-size: 12.5px;
}
.kv-row:last-child { border-bottom: none; }

/* 标签 */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
}
.tag.ok   { background: rgba(34, 197, 94, .14);  color: #4ade80; }
.tag.bad  { background: rgba(239, 68, 68, .14);  color: #f87171; }
.tag.warn { background: rgba(234, 179, 8, .14);  color: #facc15; }
.tag.dim  { background: rgba(255, 255, 255, .05); color: var(--text-mute, #6b6b80); }

/* 域名行 */
.dom-row {
  padding: 11px 14px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border, #26263a);
  border-radius: 9px;
  margin-bottom: 8px;
}
.dom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

/* 授权行 */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.auth-row:last-child { border-bottom: none; }
.auth-name { font-size: 12.5px; }
.auth-state { font-size: 12px; }
.auth-state.ok  { color: #4ade80; }
.auth-state.bad { color: #f87171; }

/* 开关行 */
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 13.5px;
  cursor: pointer;
}
.switch-row input { width: auto; }

/* 日志框 */
.log-box {
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 12px;
  background: #0a0a0f;
  border: 1px solid var(--border, #26263a);
  border-radius: 8px;
  font-size: 12px;
}
.log-box:empty { display: none; }

.log-line {
  color: var(--text-dim, #a0a0b8);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
}

/* NFT 预览 */
.nft-preview svg {
  display: block;
  border-radius: 18px;
  max-width: 100%;
  height: auto;
}

/* 危险按钮 */
.btn-danger {
  background: rgba(239, 68, 68, .14);
  border: 1px solid rgba(239, 68, 68, .35);
  color: #f87171;
}
.btn-danger:hover { background: rgba(239, 68, 68, .24); }

/* ==========================================================================
   表单控件
   --------------------------------------------------------------------------
   ⚠️ 两个坑，都踩过：

   1. base.css 里的选择器是 input[type='text'] 之类，
      而管理站的输入框常常不带 type 属性 —— 于是完全没样式。
      这里用更宽的匹配兜住（排除 checkbox/radio 这类）。

   2. 输入框在竖直堆叠里要 width:100%，在 flex 行里要 flex:1 ——
      两种场景的 min-width 诉求**正好相反**：
        · 竖直：min-width:0  （否则 <input> 内置最小宽度撑破面板）
        · 横向：min-width:140px（否则被 flex 压成一条线，点不进去）
      所以下面分成两个独立规则，靠 .row 直接子元素来区分。
   ========================================================================== */

.admin-main input:not([type='checkbox']):not([type='radio']),
.admin-main textarea,
.admin-main select {
  width: 100%;
  /* 默认（竖直堆叠）允许收缩到容器宽度以内 */
  min-width: 0;
  background: var(--bg-input, #0c0c14);
  border: 1px solid var(--border, #26263a);
  border-radius: var(--radius-sm, 8px);
  color: var(--text, #e8e8f0);
  font-size: 13.5px;
  font-family: inherit;
  padding: 10px 13px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.admin-main input:not([type='checkbox']):not([type='radio']):focus,
.admin-main textarea:focus,
.admin-main select:focus {
  border-color: var(--neon, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

.admin-main input::placeholder,
.admin-main textarea::placeholder {
  color: var(--text-mute, #6b6b80);
  opacity: .7;
}

/* 等宽输入（地址之类） */
.admin-main input.mono,
.admin-main textarea.mono {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12.5px;
}

/* textarea */
.admin-main textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.7;
}

/* 复选框行 */
.admin-main input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--neon, #7c3aed);
  cursor: pointer;
  flex-shrink: 0;
}

/* 字段标签 */
.admin-main .field {
  margin-bottom: 14px;
}
.admin-main .field label {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim, #a0a0b8);
  margin-bottom: 6px;
}

/* 横向排列（输入 + 按钮） */
.admin-main .row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   增长因子
   --------------------------------------------------------------------------
   原来这些位置写的是行内 style="flex:1" / style="flex:2"。
   行内样式的麻烦在于：它会把 min-width 一起接管，
   而下面那条 [style*='flex'] 规则又会把保底宽度降到 100px ——
   几处叠加后就出现了「输入框被压到几乎为零」。

   改成类名，宽度逻辑全部集中在 CSS 里，视图代码不再操心布局。
   -------------------------------------------------------------------------- */

.admin-main .row > .row-grow { flex: 1 1 auto; min-width: 140px; }
.admin-main .row > .grow-1   { flex: 1 1 0; }
.admin-main .row > .grow-2   { flex: 2 2 0; }

/*
 * ⚠️ 这里踩过坑：
 *   输入框有 width:100%（用于竖直堆叠的场景），
 *   但放进 flex 行里就成了「基准宽度 100%」，
 *   再配合 min-width:0，flex 会把它压到几乎为零 ——
 *   表现就是「输入框被挤成一条线，没法输入」。
 *
 * 正确做法：
 *   flex: 1 1 auto    → 允许伸展，也允许收缩
 *   width: auto       → 覆盖竖直场景的 100%
 *   min-width: 140px  → 但**不低于可用宽度**，否则点不进去
 *
 * 另外聚焦时那圈 box-shadow 会占 3px，窄行里容易把宽度挤没，
 * 所以行内输入的聚焦光晕收窄到 2px。
 */
.admin-main .row > input:not([type='checkbox']):not([type='radio']),
.admin-main .row > textarea,
.admin-main .row > select {
  flex: 1 1 auto;
  width: auto;          /* 覆盖竖直场景的 100% */
  min-width: 140px;
}

.admin-main .row > input:not([type='checkbox']):not([type='radio']):focus,
.admin-main .row > textarea:focus,
.admin-main .row > select:focus {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, .15);
}

/* 明确标了 flex 的就尊重行内样式（历史遗留，视图里已改用 .row-grow / .grow-N） */
.admin-main .row > input[style*='flex'],
.admin-main .row > textarea[style*='flex'] {
  min-width: 100px;
}

/* 窄屏下行内布局改为竖直堆叠，避免挤成一团 */
@media (max-width: 620px) {
  .admin-main .row {
    flex-wrap: wrap;
  }
  .admin-main .row > input:not([type='checkbox']):not([type='radio']),
  .admin-main .row > textarea,
  .admin-main .row > select {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* 下拉框 */
.admin-main select {
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
                    linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* ---------- 窄屏 ---------- */

@media (max-width: 760px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border, #26263a);
  }
  .admin-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
  }
  .admin-nav-item { white-space: nowrap; }
  .admin-side-foot { flex-direction: row; align-items: center; }
  .admin-main { padding: 20px 18px 48px; }
}