/* 公共组件：跨页复用的 UI 单元（头 / 页脚 / 按钮 / 标签 / 卡片 / 菜单）。
   页面级样式放各自的 page css；新组件追加到对应分区末尾。 */

/* ── 全局头（门户版） ── */
.g-header {
  height: 64px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--p-line-soft);
  position: sticky;
  top: 0;
  z-index: 40;
}
.g-header-left { display: flex; align-items: center; gap: 32px; }
.g-brand { display: flex; align-items: center; gap: 10px; }
.g-brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(29deg, #0062FF, #8F17FF);
}
.g-brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--p-ink);
  letter-spacing: 0.01em;
}
.g-nav { display: flex; gap: 24px; }
.g-nav a {
  font-size: 14px;
  color: var(--text-primary);
  padding: 6px 2px;
  border-radius: var(--r-sm);
  transition: color var(--dur);
}
.g-nav a:hover { color: var(--p-link); }
.g-nav a.is-active { color: var(--p-link); font-weight: 600; }
.g-console-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 6px 16px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--p-link);
  font-size: 14px;
  font-weight: 600;
  transition: filter var(--dur), transform var(--dur);
}
.g-console-btn:hover { filter: brightness(0.97); }
.g-console-btn:active { transform: translateY(1px); }

/* ── 页脚 ── */
.g-footer {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--p-foot);
  font-size: 12px;
}

/* ── 按钮 ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: filter var(--dur), transform var(--dur), background var(--dur), border-color var(--dur);
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; font-weight: 600; }
.btn-primary { background: var(--p-link); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.btn-ghost { background: #fff; border-color: var(--border-primary); color: var(--text-primary); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-secondary); }
.btn-danger { background: #fff; border-color: rgba(220, 38, 38, 0.4); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: #FEF2F2; }

/* ── 标签 ── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 11px;
  background: var(--p-tag-bg);
  color: var(--p-eyebrow);
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
}
.tag.is-ok { background: #E8F7F0; color: #18A779; }

/* ── 卡片 ── */
.card {
  background: #fff;
  border: 1px solid var(--p-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* ── 下拉菜单 ── */
.menu {
  position: absolute;
  min-width: 124px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.menu-caption { padding: 4px 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.menu-divider { height: 1px; margin: 2px 0; background: var(--border-subtle); }
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  width: 100%;
  text-align: left;
}
.menu-item:hover { background: var(--surface-secondary); }
.menu-item.is-danger { color: var(--danger); }

/* ── 徽标（状态 pill） ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.badge-ok { background: #E9F8F0; color: #14804D; }
.badge-ok .dot { background: #19A463; }
.badge-live { background: #FFF3EB; color: var(--c-orange); }
.badge-live .dot { background: var(--c-orange); animation: pulse 1.6s ease-in-out infinite; }
.badge-info { background: var(--accent-soft); color: var(--p-link); }
.badge-info .dot { background: var(--p-link); }
.badge-warn { background: #FFF8E8; color: #B45309; }
.badge-warn .dot { background: var(--warning); }
.badge-danger { background: #FEF2F2; color: var(--danger); }
.badge-danger .dot { background: var(--danger); }
.badge-muted { background: #F1F5FA; color: #64748B; }
.badge-muted .dot { background: #94A3B8; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── 按钮加载态 ── */
.spin {
  width: 14px; height: 14px; flex: none;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-ghost .spin, .btn-danger .spin { border-color: rgba(23, 32, 51, 0.2); border-top-color: currentColor; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 对话框（Confirm Dialog 画板） ── */
.dlg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 140ms ease;
}
.dlg {
  width: 400px;
  max-width: calc(100vw - 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 32px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-dialog);
  animation: popIn 160ms ease;
}
.dlg-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.dlg-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px;
  background: #FFF7ED;
  color: var(--warning);
}
.dlg-icon.is-danger { background: #FEF2F2; color: var(--danger); }
.dlg-icon.is-info { background: var(--accent-soft); color: var(--p-link); }
.dlg-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.dlg-desc { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.dlg-btns { display: flex; gap: 12px; }
.dlg-btns .btn { flex: 1; height: 40px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.96) translateY(6px); } }

/* ── 骨架 ── */
.skel {
  border-radius: 6px;
  background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 50%, #EEF1F6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── 空态 ── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--c-muted);
  font-size: 13px;
}
.empty .ic { color: #B6C2D2; }
.empty .t { font-size: 14px; font-weight: 600; color: var(--c-ink); }

/* ── 置信度滑块（demo-run / 试用 / 任务详情共用） ── */
.cs { display: flex; flex-direction: column; gap: 10px; }
.cs-read { display: flex; align-items: baseline; justify-content: space-between; }
.cs-read .t { font-size: 14px; color: #64748B; }
.cs-read .v { font-family: var(--font-data); font-size: 14px; font-weight: 600; color: #203454; }
.cs-rail { position: relative; height: 22px; display: flex; align-items: center; }
.cs input[type="range"] {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--p-link) var(--p, 50%), #E2E8F2 var(--p, 50%));
  outline: none;
  margin: 0;
}
.cs input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--p-link);
  box-shadow: 0 1px 4px rgba(20, 33, 58, 0.25);
  cursor: pointer;
  transition: transform var(--dur);
}
.cs input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.cs input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--p-link);
  box-shadow: 0 1px 4px rgba(20, 33, 58, 0.25);
  cursor: pointer;
}
.cs:focus-within input[type="range"]::-webkit-slider-thumb { box-shadow: var(--ring); }
.cs-ticks { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: 11px; color: #91A0B4; }
.cs-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ── 字段行小芯片（参数展示） ── */
.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #D3DDEB;
  border-radius: 8px;
  font-size: 14px;
}
.field .k { color: #64748B; flex: none; }
.field .v { font-family: var(--font-data); color: #203454; text-align: right; word-break: break-all; }

/* ── 代码块 ── */
.code {
  position: relative;
  background: #F6F8FB;
  border: 1px solid #E0E6EF;
  border-radius: 6px;
  padding: 12px 44px 12px 16px;
}
.code pre {
  margin: 0;
  font-family: var(--font-data);
  font-size: 11px;
  line-height: 1.55;
  color: #2A5DB8;
  white-space: pre-wrap;
  word-break: break-all;
}
.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--accent);
  transition: background var(--dur);
}
.code-copy:hover { background: rgba(0, 98, 255, 0.08); }

.code-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.code-lang { font-family: var(--font-data); font-size: 12px; color: #9DB7D8; }