/* 管理后台 / 前台编辑弹层共用样式（深色，与站点一致） */
:root {
  --ad-bg: #070A12;
  --ad-panel: #111726;
  --ad-panel-2: #0D1320;
  --ad-line: #232C40;
  --ad-text: #E8EDF7;
  --ad-text-2: #96A2B8;
  --ad-text-3: #64708A;
  --ad-brand: #4A9EFD;
  --ad-ok: #35D07F;
  --ad-slow: #FFB020;
  --ad-down: #F0524B;
}
.ad-page { background: var(--ad-bg); color: var(--ad-text); min-height: 100vh; }
.ad-wrap { max-width: 1320px; margin: 0 auto; padding: 22px 22px 80px; }
.ad-top {
  display: flex; align-items: center; gap: 14px; padding: 14px 0 20px;
  border-bottom: 1px solid var(--ad-line); margin-bottom: 22px;
}
.ad-logo { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 16px; color: var(--ad-text); text-decoration: none; }
.ad-logo img { height: 22px; width: auto; display: block; }
.ad-top .sp { flex: 1; }
.ad-user { font-size: 13px; color: var(--ad-text-2); }
.ad-link { color: var(--ad-brand); text-decoration: none; font-size: 13px; }
.ad-btn {
  height: 34px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--ad-line);
  background: var(--ad-panel); color: var(--ad-text-2); font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s; font-family: inherit;
}
.ad-btn:hover { color: var(--ad-text); border-color: #33405C; }
.ad-btn.pri { background: var(--ad-brand); border-color: var(--ad-brand); color: #fff; font-weight: 700; }
.ad-btn.pri:hover { filter: brightness(1.08); }
.ad-btn.danger { color: #F0524B; border-color: #4A272B; }
.ad-btn.sm { height: 28px; padding: 0 11px; font-size: 12px; }
.ad-btn:disabled { opacity: .5; cursor: not-allowed; }

.ad-auth { max-width: 400px; margin: 9vh auto 0; }
.ad-card {
  background: var(--ad-panel); border: 1px solid var(--ad-line); border-radius: 16px; padding: 26px;
}
.ad-card h1 { font-size: 20px; margin: 0 0 6px; }
.ad-card .sub { color: var(--ad-text-3); font-size: 13px; margin-bottom: 20px; line-height: 1.7; }
.ad-field { margin-bottom: 14px; }
.ad-field label { display: block; font-size: 12px; color: var(--ad-text-2); margin-bottom: 7px; }
.ad-input {
  width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--ad-line);
  background: var(--ad-panel-2); color: var(--ad-text); padding: 0 12px; font-size: 14px;
  outline: none; font-family: inherit;
}
.ad-input:focus { border-color: var(--ad-brand); }
textarea.ad-input { height: 74px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.ad-error { color: #FF7A72; font-size: 12.5px; min-height: 18px; margin: 8px 0; }
.ad-hint { color: var(--ad-text-3); font-size: 12px; line-height: 1.7; }

.ad-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 980px) { .ad-layout { grid-template-columns: 1fr; } }

.ad-panel {
  background: var(--ad-panel); border: 1px solid var(--ad-line); border-radius: 14px; padding: 18px;
}
.ad-panel h2 { font-size: 15px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.ad-panel h2 .n { color: var(--ad-text-3); font-weight: 500; font-size: 12px; }
.ad-cat-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ad-cat {
  border: 1px solid var(--ad-line); border-radius: 10px; padding: 10px 12px;
  background: var(--ad-panel-2);
}
.ad-cat-top { display: flex; align-items: center; gap: 8px; }
.ad-cat-name { font-size: 13.5px; font-weight: 700; }
.ad-cat-key { color: var(--ad-text-3); font-size: 11px; font-family: ui-monospace, monospace; }
.ad-cat-count { margin-left: auto; color: var(--ad-text-3); font-size: 11.5px; }
.ad-cat-acts { display: flex; gap: 6px; margin-top: 8px; }
.ad-cat.hidden { opacity: .55; }
.ad-badge { font-size: 10.5px; padding: 2px 6px; border-radius: 999px; background: #1B2437; color: var(--ad-text-3); }
.ad-add { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ad-line); }

.ad-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ad-toolbar .ad-input { width: 240px; height: 36px; }
.ad-toolbar select.ad-input { width: 130px; }
.ad-toolbar .sp { flex: 1; }

.ad-sites { display: flex; flex-direction: column; gap: 9px; }
.ad-site {
  background: var(--ad-panel); border: 1px solid var(--ad-line); border-radius: 12px;
  padding: 13px 15px;
}
.ad-site-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ad-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ad-text-3); flex: none; }
.ad-dot.ok { background: var(--ad-ok); } .ad-dot.slow { background: var(--ad-slow); }
.ad-dot.down { background: var(--ad-down); }
.ad-site-name { font-weight: 700; font-size: 14px; }
.ad-site-slug { color: var(--ad-text-3); font-size: 11.5px; font-family: ui-monospace, monospace; }
.ad-site-cats { display: flex; gap: 5px; flex-wrap: wrap; margin-left: 4px; }
.ad-chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #172033; color: #AFC4E6; border: 1px solid #22304A; }
.ad-site .sp { flex: 1; }
.ad-editor { margin-top: 12px; border-top: 1px solid var(--ad-line); padding-top: 13px; display: none; }
.ad-editor.open { display: block; }
.ad-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.ad-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ad-text-2); cursor: pointer; }
.ad-check input { accent-color: var(--ad-brand); width: 15px; height: 15px; }
.ad-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ad-editor .ad-field { margin-bottom: 10px; }
.ad-editor .ad-input { height: 34px; font-size: 13px; }

.ad-pager { display: flex; justify-content: center; gap: 7px; margin-top: 18px; flex-wrap: wrap; }
.ad-pg {
  min-width: 32px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ad-line);
  background: var(--ad-panel); color: var(--ad-text-2); font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-family: inherit;
}
.ad-pg.on { background: var(--ad-brand); border-color: var(--ad-brand); color: #fff; font-weight: 700; }
.ad-pg:disabled { opacity: .4; cursor: default; }

.ad-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #162034; border: 1px solid #2A3856; color: var(--ad-text);
  padding: 10px 18px; border-radius: 999px; font-size: 13px; opacity: 0;
  pointer-events: none; transition: all .22s; z-index: 50;
}
.ad-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ad-toast.err { border-color: #5B2B30; color: #FFB4AE; }

.ad-loading { color: var(--ad-text-3); font-size: 13px; padding: 30px 0; text-align: center; }

/* 前台详情页的「编辑分类」按钮 / 弹层 */
.ad-edit-btn {
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px dashed #3A4E75;
  background: transparent; color: #AFC4E6; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.ad-edit-btn:hover { border-color: var(--ad-brand); color: #fff; }
.ad-modal-mask {
  position: fixed; inset: 0; background: rgba(3, 6, 12, .72); z-index: 80;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.ad-modal-mask.open { display: flex; }
.ad-modal {
  width: 100%; max-width: 520px; background: var(--ad-panel); border: 1px solid var(--ad-line);
  border-radius: 16px; padding: 22px; max-height: 86vh; overflow: auto;
}
.ad-modal h3 { margin: 0 0 4px; font-size: 17px; }
.ad-modal .sub { color: var(--ad-text-3); font-size: 12px; margin-bottom: 14px; }
.ad-modal .ad-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* 详情页的分类 chip 是可点击链接 */
.d-cats a.tag { text-decoration: none; }
.d-cats a.tag:hover { color: var(--text-1); border-color: #33405C; }

/* 顶部标签页（站点管理 / 收录审核） */
.ad-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.ad-tab {
  height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ad-line);
  background: var(--ad-panel); color: var(--ad-text-2); font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.ad-tab:hover { color: var(--ad-text); }
.ad-tab.on { background: #17243C; border-color: #2F4670; color: var(--ad-text); font-weight: 700; }
.ad-tab-n { color: var(--ad-slow); font-size: 12px; }

/* 收录审核卡片 */
.ad-sub {
  background: var(--ad-panel-2); border: 1px solid var(--ad-line);
  border-radius: 12px; padding: 12px 14px;
}
.ad-badge.ok { background: #123326; color: #6FE3A5; }
.ad-badge.no { background: #34191B; color: #FF9A93; }

/* ================= 运行监控：全流程周期进度 ================= */
.ad-pipe-overview {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin-top: 14px;
}
@media (max-width: 860px) { .ad-pipe-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-ov {
  background: var(--ad-panel-2); border: 1px solid var(--ad-line);
  border-radius: 12px; padding: 11px 13px; min-width: 0;
}
.ad-ov .k { color: var(--ad-text-3); font-size: 11.5px; }
.ad-ov .v { font-size: 14px; font-weight: 700; margin-top: 5px; display: flex; align-items: center; gap: 7px; }
.ad-ov .v small { font-size: 11.5px; font-weight: 500; color: var(--ad-text-3); }
.ad-ov.ok .v { color: #6FE3A5; }
.ad-ov.warn .v { color: var(--ad-slow); }
.ad-ov.bad .v { color: #FF9A93; }
.ad-ov.run .v { color: var(--ad-brand); }

.ad-pipe-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ad-pipe-run {
  background: var(--ad-panel-2); border: 1px solid var(--ad-line);
  border-radius: 12px; padding: 13px 15px;
}
.ad-pipe-run.is-running { border-color: #2F4670; }
.ad-pipe-run.is-fail { border-color: #4A272B; }
.ad-pipe-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-pipe-when { font-size: 13.5px; font-weight: 700; font-family: ui-monospace, monospace; }
.ad-pipe-when small { font-weight: 500; color: var(--ad-text-3); font-size: 11.5px; margin-left: 6px; font-family: inherit; }
.ad-pipe-meta { color: var(--ad-text-3); font-size: 11.5px; }
.ad-pipe-head .sp { flex: 1; }

/* 六个环节串成一条线 */
.ad-flow { display: flex; align-items: stretch; gap: 0; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
.ad-node {
  flex: 1 1 0; min-width: 96px; position: relative; padding: 9px 10px 9px 12px;
  border: 1px solid var(--ad-line); border-radius: 10px; background: #0B1020;
  display: flex; flex-direction: column; gap: 3px;
}
.ad-node + .ad-node { margin-left: 10px; }
.ad-node + .ad-node::before {
  content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 1px;
  background: var(--ad-line);
}
.ad-node .nm { font-size: 12px; font-weight: 700; color: var(--ad-text-2); display: flex; align-items: center; gap: 5px; }
.ad-node .ms { font-size: 11px; color: var(--ad-text-3); line-height: 1.5; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-node .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ad-text-3); }
.ad-node.ok { border-color: #1E4335; background: #0C1A16; }
.ad-node.ok .dot { background: var(--ad-ok); }
.ad-node.ok .nm { color: #6FE3A5; }
.ad-node.empty { border-color: #22304A; background: #0C1220; }
.ad-node.empty .dot { background: #55708F; }
.ad-node.empty .nm { color: #8FA6C4; }
.ad-node.skipped { opacity: .6; }
.ad-node.failed { border-color: #4A272B; background: #1A0F11; }
.ad-node.failed .dot { background: var(--ad-down); }
.ad-node.failed .nm { color: #FF9A93; }
.ad-node.running, .ad-node.stuck { border-color: #4A3A16; background: #1A1509; }
.ad-node.running .dot, .ad-node.stuck .dot { background: var(--ad-slow); animation: adpulse 1.1s infinite; }
.ad-node.running .nm, .ad-node.stuck .nm { color: var(--ad-slow); }
.ad-node.pending .nm { color: var(--ad-text-3); }
@keyframes adpulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* 运行历史色带：左旧 → 右新，一格一轮 */
.ad-pipe-history { margin-top: 12px; }
.ad-pipe-his-title {
  font-size: 11.5px; color: var(--ad-text-3); margin-bottom: 7px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ad-pipe-his-row { display: flex; gap: 3px; align-items: stretch; }
.ad-his-cell {
  flex: 1 1 0; min-width: 0; height: 22px; border-radius: 4px;
  background: #1A2233; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.ad-his-cell:hover { transform: translateY(-2px); filter: brightness(1.35); }
.ad-his-cell.ok { background: #1E4335; border-color: #2C5E49; }
.ad-his-cell.partial { background: #3A2E12; border-color: #5C4A1E; }
.ad-his-cell.failed, .ad-his-cell.interrupted { background: #3A1A1D; border-color: #5C2A2F; }
.ad-his-cell.running { background: #16294A; border-color: #2F4670; animation: adpulse 1.2s infinite; }
.ad-his-cell.legend { flex: 0 0 auto; width: auto; padding: 0 10px; cursor: default;
  display: flex; align-items: center; font-size: 11px; color: var(--ad-text-3); }
.ad-his-cell.legend:hover { transform: none; filter: none; }

/* 运行中：环节进度条 */
.ad-prog { height: 5px; border-radius: 3px; background: #131A28; overflow: hidden; margin-top: 10px; }
.ad-prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2F6FD0, #4A9EFF); transition: width .5s ease; }

/* 每轮耗时分布条：按环节占比着色 */
.ad-gantt {
  display: flex; height: 6px; border-radius: 4px; overflow: hidden;
  background: #131A28; margin-top: 10px;
}
.ad-gantt i { display: block; height: 100%; min-width: 2px; }
.ad-gantt i.ok { background: #2C8F65; }
.ad-gantt i.empty { background: #3D5375; }
.ad-gantt i.skipped { background: #2A3346; }
.ad-gantt i.failed { background: #C94B47; }
.ad-gantt i.running, .ad-gantt i.stuck { background: #C79A3D; }
.ad-gantt i.pending { background: #1A2233; }
.ad-gantt-cap { font-size: 11px; color: var(--ad-text-3); margin-top: 5px; }
.ad-gantt-cap b { color: var(--ad-text-2); font-weight: 600; }

.ad-pipe-detail { display: none; margin-top: 12px; border-top: 1px dashed var(--ad-line); padding-top: 11px; }
.ad-pipe-detail.open { display: block; }
.ad-pipe-detail table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ad-pipe-detail th {
  text-align: left; color: var(--ad-text-3); font-weight: 500; padding: 5px 8px;
  border-bottom: 1px solid var(--ad-line); white-space: nowrap;
}
.ad-pipe-detail td { padding: 6px 8px; border-bottom: 1px solid #19202F; color: var(--ad-text-2); vertical-align: top; }
.ad-pipe-detail tr:last-child td { border-bottom: none; }
.ad-pipe-detail .err { color: #FF9A93; font-family: ui-monospace, monospace; word-break: break-all; }
.ad-pipe-detail .ok-t { color: #6FE3A5; }
.ad-pipe-empty { color: var(--ad-text-3); font-size: 13px; padding: 26px 0; text-align: center; }

/* ================= 系统设置 ================= */
.ad-set-panel { max-width: 780px; }
.ad-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ad-presets button {
  height: 30px; padding: 0 12px; border-radius: 999px; border: 1px dashed #3A4E75;
  background: transparent; color: #AFC4E6; font-size: 12px; cursor: pointer; font-family: inherit;
}
.ad-presets button:hover { border-color: var(--ad-brand); color: #fff; border-style: solid; }
.ad-set-acts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.ad-set-acts .ad-hint { flex: 1 1 220px; min-width: 0; }
.ad-key-ok { color: #6FE3A5; }
.ad-badge.warn { background: #3A2E12; color: #FFC861; }
.ad-badge.run { background: #12203A; color: #7FB6FF; }
.ad-pipe-detail td:last-child { width: 46%; }
