* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  background: transparent;   /* 鹈鹕动画垫底(10-08 用户:内容直接盖在动画上,容器底色放行) */
}
.page {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 48px;
}
.page-title { font-size: 20px; color: #666; letter-spacing: 2px; transition: filter .25s ease, opacity .25s ease; }
.row { display: flex; gap: 40px; }
.grid6 {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(2, 140px);
  gap: 32px;
}
.card {
  width: 200px; height: 140px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600;
  background: #fff; color: #333;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  user-select: none;
}
.card.enabled { cursor: pointer; transition: box-shadow .2s, transform .2s; }
.card.enabled:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0, 0, 0, .14); }
.card.disabled { background: #ececec; color: #b8b8b8; cursor: default; box-shadow: none; }

/* ===== 版面舞台与膨胀块 ===== */
.stage { display: flex; gap: 20px; width: min(1920px, 96vw); height: min(820px, 82vh); }
.board { position: relative; flex: 1; min-width: 0; }
.block {
  position: absolute; border-radius: 16px; background: #fff;
  border: 2px dashed #d5d8de;
  display: flex; flex-direction: column; overflow: hidden;
  cursor: pointer; user-select: none;
  transition: left .45s cubic-bezier(.22,.9,.3,1), top .45s cubic-bezier(.22,.9,.3,1),
              width .45s cubic-bezier(.22,.9,.3,1), height .45s cubic-bezier(.22,.9,.3,1),
              box-shadow .3s, border-color .3s, background .3s,
              filter .25s ease, opacity .25s ease;   /* 模糊/透明渐变,防快速开关时清晰↔模糊突变抖动 */
}
.block.active {
  z-index: 10; cursor: default;
  border-style: solid; border-color: #9db9e8;
  box-shadow: 0 12px 36px rgba(26, 102, 224, .18);
  background: #fff;   /* 10-08 用户定:焦点块纯白不透明,去掉原 .93+磨砂(动画背景下会透色) */
}
/* 聚焦时:焦点块以外的一切(标题/返回/搭建详情/其他块)整体模糊且不可点 */
.page.focusing .page-title,
.page.focusing .title-actions,
.page.focusing .user-corner,
.page.focusing .back,
.page.focusing .quad.detail,
.block.squeezed {
  border-color: #e8eaef;
  filter: blur(5px); opacity: .65;
  pointer-events: none;
}
.block-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; flex: none; }
.block-title { font-size: 16px; font-weight: 700; color: #333; }
.block-body { flex: 1; overflow: hidden; padding: 0 8px 8px; }
.block.active .block-body { overflow-y: auto; scrollbar-gutter: stable; }
.block-empty { padding: 10px 8px; font-size: 13px; color: #999; }
.block.active .camp-name { display: block; -webkit-line-clamp: unset; }
.block:not(.active) .block-body { pointer-events: none; }   /* 未聚焦:内容只读,点块=展开 */

/* ===== 通用小件 ===== */
.count { font-size: 12px; font-weight: 400; color: #999; margin-left: 6px; }
.gray-note { font-size: 12px; line-height: 24px; color: #9aa0a8; }
.spin { width: 14px; height: 14px; flex: none; border: 2px solid #d0d3da; border-top-color: #1a66e0; border-radius: 50%; animation: cre-spin .8s linear infinite; }
@keyframes cre-spin { to { transform: rotate(360deg); } }
.cre-more { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: 12px; color: #999; }
.radio { display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 20px; color: #444; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #c8ccd4; border-radius: 12px; transition: .2s; }
.switch span::before { content: ''; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .2s; border: 1px solid #d5d8de; box-sizing: border-box; }
.switch input:checked + span { background: #1a66e0; }
.switch input:checked + span::before { transform: translateX(18px); }
.num-in { width: 64px; border: 1px solid #d0d3da; border-radius: 6px; padding: 4px 8px; font-size: 13px; outline: none; }
.num-in:focus { border-color: #7ea4e8; }
.base-warn { color: #e04b4b; font-size: 12.5px; margin: 4px 0; }

/* 两套按钮:opt-btn=表单大按钮(焦点态=蓝底);op-btn=行内小按钮(焦点态=白底蓝字粗体) */
.opt-btn {
  border: 1px solid #d0d3da; background: #fff; border-radius: 8px;
  padding: 6px 14px; font-size: 13px; line-height: 20px; color: #444; cursor: pointer;
}
.opt-btn:hover { border-color: #7ea4e8; }
.opt-btn.on { background: #e8f0fe; border-color: #e8f0fe; color: #1a66e0; font-weight: 600; }
.op-btn {
  flex: none; border: 1px solid #d0d3da; background: #fff; border-radius: 8px;
  padding: 4px 10px; font-size: 12px; color: #888; cursor: pointer;
}
.op-btn:hover { border-color: #1a66e0; color: #1a66e0; }
.op-btn.on { background: #fff; color: #1a66e0; font-weight: 600; }
.op-btn:disabled { opacity: .45; cursor: not-allowed; }
.op-btn:disabled:hover { border-color: #d0d3da; color: #888; }
.cre-red { border-color: #eec7c7; color: #e04b4b; }
.cre-red:hover { border-color: #e04b4b; }

/* ===== 行条目:活动/账户(camp-item) 与 分组(grp) ===== */
.camp-list { flex: 1; overflow-y: auto; padding: 8px; }
.camp-item {
  padding: 9px 12px; border-radius: 10px;
  font-size: 13px; line-height: 1.45; color: #444; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  content-visibility: auto; contain-intrinsic-size: auto 42px;   /* 长列表跳过屏外渲染 */
}
.camp-name {
  flex: 1; min-width: 0; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.camp-side { flex: none; font-size: 12px; color: #9aa0a8; }
.camp-item:hover { background: #f2f6ff; }
.camp-item.active { background: #e8f0fe; color: #1a66e0; font-weight: 600; }
.camp-item.dim .camp-name, .camp-item.dim .camp-side { filter: blur(3.5px); opacity: .5; }
/* OE 账户行(10-07):名称+数字ID 左对齐成簇(名字不撑满,ID 紧跟其右);余额推到行末。
   ID 用 .camp-side 类 → 失焦时随 .dim 一同模糊(ADQ 同款"选中置顶其余模糊"规则) */
.camp-item.oe-row .camp-name { flex: 0 1 auto; }
.camp-item.oe-row .camp-bal { margin-left: auto; }
.grp {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
}
.grp:hover { background: #f7f8fa; }
.grp.on { background: #e8f0fe; }
.grp.on .grp-title { color: #1a66e0; }
.grp.bound { background: #e8f0fe; }
.grp.bound .grp-title { color: #1a66e0; }
.grp-main { min-width: 0; }
.grp-btns { display: flex; gap: 8px; flex: none; align-items: center; }
.grp-title { font-size: 13px; font-weight: 600; color: #333; word-break: break-all; }
.grp-sub { font-size: 12px; color: #888; margin-top: 2px; word-break: break-all; }
.grp-count { font-size: 12px; color: #aaa; margin-top: 2px; }
/* 失焦态:组合行压缩,隐藏条数 */
.block:not(.active) .grp { padding: 4px 10px; gap: 8px; }
.block:not(.active) .grp-count { display: none; }
.cre-name { color: #333; font-size: 12.5px; }
.cre-id { margin-left: auto; color: #9aa0a8; font-size: 12px; }
.dd-row { display: flex; gap: 10px; align-items: center; padding: 8px 12px; font-size: 12.5px; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 36px; }
.dd-row:hover { background: #f5f8ff; }
.dd-row.sel { background: #e8f0fe; }
.dd-row.sel .cre-name { color: #1a66e0; font-weight: 600; }
.dd-row.sel .op-btn { margin-left: auto; }
.dd-row.sel .cre-id { margin-left: 0; }
.dd-name { color: #333; flex: none; max-width: 55%; }
.dd-addr { flex: 1; min-width: 0; color: #9aa0a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 单元设置表单 ===== */
.form-row { display: flex; gap: 14px; padding: 10px 6px; border-bottom: 1px dashed #eef0f3; }
.form-row:last-child { border-bottom: none; }
.form-label { flex: none; width: 96px; font-size: 13px; font-weight: 700; color: #333; padding-top: 5px; }
.form-label em { color: #e04b4b; font-style: normal; margin-left: 2px; }
.form-field { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dd-search { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid #eee; padding: 9px 12px; font-size: 13px; outline: none; }
.dd-toolbar { display: flex; gap: 12px; align-items: center; padding: 7px 12px; border-bottom: 1px solid #f0f0f2; font-size: 12px; color: #666; }
.dd-prov { border: 1px solid #dcdfe6; border-radius: 6px; padding: 3px 6px; font-size: 12px; color: #555; background: #fff; }
.dd-all { display: flex; gap: 5px; align-items: center; cursor: pointer; }
.dd-count { margin-left: auto; color: #1a66e0; }
.dd-list { max-height: 240px; overflow-y: auto; }

/* ===== 模态弹窗(场景/创意/定向/定向包/地域共用骨架) ===== */
.scene-modal-mask { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.scene-modal-mask .scene-modal { transform: scale(1); transition: transform .28s cubic-bezier(.34,1.4,.5,1); }
.scene-enter-active .scene-modal, .scene-leave-active .scene-modal { transition: transform .28s cubic-bezier(.34,1.4,.5,1); }
.scene-enter-from .scene-modal, .scene-leave-to .scene-modal { transform: scale(.86); }
.scene-enter-from, .scene-leave-to { opacity: 0; }
.scene-enter-active, .scene-leave-active { transition: opacity .25s ease; }
.scene-modal { width: min(920px, 94vw); height: min(780px, 90vh); background: #fff; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.scene-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; }
.scene-title { font-size: 16px; font-weight: 700; color: #333; }
.scene-x { border: none; background: none; font-size: 18px; color: #999; cursor: pointer; }
.scene-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.scene-sec { border: 1px solid #eef0f3; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.scene-sec-row { display: flex; gap: 16px; }
.scene-label { flex: none; width: 100px; font-size: 13px; color: #555; line-height: 1.5; }
.scene-radio { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.scene-box { background: #f7f8fa; border-radius: 8px; padding: 12px 14px; margin-top: 10px; }
.scene-hint { display: flex; align-items: center; gap: 8px; background: #fdf0ef; border: 1px solid #f5c6c2; color: #c0392b; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 12px; }
.hint-i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #e04b4b; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; font-style: normal; }
.chk-grid { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; cursor: pointer; }
.chk.disabled { color: #c0c4cc; cursor: not-allowed; }
.chk-scroll { max-height: 220px; overflow-y: auto; border: 1px solid #eef0f3; border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.scene-sub-title { font-size: 13px; font-weight: 600; color: #555; margin: 12px 0 8px; }
.scene-foot { flex: none; display: flex; justify-content: flex-end; gap: 12px; padding: 12px 20px; border-top: 1px solid #eee; }
.btn-cancel { padding: 8px 22px; border-radius: 20px; border: 1px solid #d0d3da; background: #fff; cursor: pointer; font-size: 14px; color: #444; }
.btn-ok { padding: 8px 26px; border-radius: 20px; border: none; background: #1a66e0; color: #fff; cursor: pointer; font-size: 14px; }

/* ===== 人群定向:折叠行+已选标签+人群表格 ===== */
.acc-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.acc-row:hover { background: #f5f8ff; }
.acc-row.open { background: #eef1f6; font-weight: 600; }
.acc-arrow { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #3a3f4a; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.acc-row.open .acc-arrow { transform: rotate(90deg); }
.acc-hint { color: #9aa0a8; }
.sel-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 6px; font-size: 13px; }
.sel-tag { border: 1px solid #d9def0; background: #fff; border-radius: 16px; padding: 4px 10px 4px 14px; font-size: 13px; color: #333; position: relative; }
.tag-x { display: inline-block; margin-left: 6px; width: 16px; height: 16px; line-height: 15px; text-align: center; border-radius: 50%; color: #9aa0a8; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.sel-tag:hover .tag-x { opacity: 1; }
.tag-x:hover { background: #eef1f6; color: #e04b4b; }
.sel-clear { color: #1a66e0; cursor: pointer; font-size: 13px; }
.aud-tbl { border: 1px solid #eef0f3; border-radius: 8px; overflow-y: auto; max-height: 300px; font-size: 12.5px; }
.aud-tr { display: grid; grid-template-columns: 34px minmax(0,1fr) 88px 86px 50px 68px; align-items: center; border-top: 1px solid #f2f4f7; content-visibility: auto; contain-intrinsic-size: auto 34px; }
.aud-tr:first-child { border-top: none; }
.aud-tr > * { padding: 7px 8px; min-width: 0; white-space: nowrap; }
.aud-tr .aud-name { white-space: normal; }
.aud-tr.head { background: #f7f8fa; color: #555; font-weight: 600; position: sticky; top: 0; z-index: 1; }
.aud-name { word-break: break-all; }
.aud-id { color: #333; }
.aud-count { color: #333; }
.aud-st.on { color: #1a66e0; }
.aud-st.off { color: #b8b8b8; }

/* ===== 地域模块:双分组标题+地域级联选择 ===== */
.area-sec-title { font-size: 13px; font-weight: 700; color: #556; padding: 10px 10px 2px; }
.geo-sel-head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; margin-bottom: 6px; }
.geo-cascade { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; }
.geo-col { flex: 0 0 208px; min-width: 0; border: 1px solid #eef0f3; border-radius: 8px; display: flex; flex-direction: column; max-height: 260px; overflow: hidden; }
.geo-col-head { flex: none; display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid #f0f0f2; background: #f7f8fa; }
.geo-col-title { font-size: 13px; font-weight: 600; color: #333; }
.geo-list { overflow-y: auto; }
.geo-row { display: flex; gap: 8px; align-items: center; padding: 7px 10px; font-size: 13px; border-top: 1px solid #f5f6f8; cursor: pointer; }
.geo-row:first-child { border-top: none; }
.geo-row.sel { background: #f5f8ff; }
.geo-name { flex: 1; min-width: 0; }
.geo-arrow { flex: none; color: #c0c4cc; padding: 0 2px; font-size: 14px; }
.geo-arrow:hover { color: #1a66e0; }

/* ===== 搭建详情列 ===== */
.detail { width: 340px; flex: none; }   /* 10-05 用户定稿:恒定原尺寸,不再随搭建态延展(逐行信息改悬停展开) */
.quad {
  border: 2px dashed #d5d8de;
  border-radius: 16px;
  background: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.quad-head.detail-head { display: flex; align-items: center; justify-content: space-between; }
.quad-head.detail-head .op-btn { font-size: 12px; padding: 4px 10px; }
.quad-head {
  padding: 14px 16px 10px;
  font-size: 18px; font-weight: 700; color: #333;
  border-bottom: 1px solid #eee;
  flex: none;
}
/* 条件看板 */
.cond-row { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; align-items: flex-start; }
.cond-row:hover { background: #f7f8fa; }
.cond-dot { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #cfd4dc; color: #9aa0a8; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.cond-row.ok .cond-dot { background: #1fa45b; border-color: #1fa45b; color: #fff; }
.cond-main { min-width: 0; }
.cond-label { font-size: 13px; color: #333; font-weight: 600; }
.cond-row.ok .cond-label { color: #1fa45b; }
.cond-hint { font-size: 12px; color: #e04b4b; margin-top: 2px; }
.btn-build { width: 100%; padding: 10px; border: none; border-radius: 10px; background: #1fa45b; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 12px; }
.btn-build:hover:not(:disabled) { background: #178a4c; }
.btn-build:disabled { opacity: .45; cursor: not-allowed; }   /* 10-06 修:禁用态视觉不可见导致用户困惑 */
.cond-progress { text-align: center; color: #999; font-size: 12px; margin-top: 10px; }

/* 返回上级按钮(10-08 用户:做显眼——白底蓝字药丸+投影浮在动画背景上) */
.back {
  position: fixed; top: 18px; left: 22px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px 8px 13px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #1a66e0;
  background: #fff; border: 1.5px solid #cfe0f7;
  box-shadow: 0 6px 18px rgba(26, 102, 224, .18);
  text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s,
              filter .25s ease, opacity .25s ease;
}
.back:hover { background: #f2f7ff; border-color: #9db9e8; transform: translateY(-1px);
              box-shadow: 0 10px 26px rgba(26, 102, 224, .28); }

/* ---- 搭建进度看板 ---- */
.build-panel { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.build-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1a66e0; flex-wrap: wrap; }
.build-head.done { color: #1fa45b; }
.build-head.abort { color: #d33; flex-direction: column; align-items: flex-start; gap: 2px; }
.build-count { font-variant-numeric: tabular-nums; }
.build-counts { font-weight: 400; color: #8a8f99; font-size: 12px; }
.build-err-line { font-weight: 400; font-size: 12px; }
.build-bar { height: 8px; background: #e8edf3; border-radius: 4px; overflow: hidden; }
.build-fill { height: 100%; width: 0; background: #1fa45b; border-radius: 4px; transition: width .4s; }
.build-list { max-height: 300px; overflow-y: auto; border: 1px solid #eceff3; border-radius: 10px; padding: 4px 8px; }
.build-row { display: flex; gap: 6px; align-items: baseline; padding: 4px 2px; font-size: 12px; border-bottom: 1px dashed #f0f2f5; transition: background-color .15s ease; }
.build-row:last-child { border-bottom: none; }
.build-st { flex: none; font-weight: 700; }
.build-row.ok .build-st { color: #1fa45b; }
.build-row.fail .build-st { color: #d33; }
.build-row.running .build-st { color: #1a66e0; }
/* 搭建行悬停展开(10-05 用户要求,无需点击):完整广告名+成功/失败原因两行,移开自动收起;
   焦点背景+渐入动画(10-05 二次细化:背景要显眼、展开不生硬) */
.build-hover { display: none; }
.build-row:hover { background: #e8f2fd; border-radius: 6px; }
.build-row:hover .build-st, .build-row:hover .build-nm, .build-row:hover .build-err { display: none; }
.build-row:hover .build-hover {
  display: block; line-height: 1.5; padding: 2px 0;
  animation: build-hover-in .18s ease-out;
}
@keyframes build-hover-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
.build-hover .bh-name { color: #333; word-break: break-all; }
.build-hover .bh-msg { margin-top: 2px; }
.build-hover .bh-msg.ok { color: #1fa45b; }
.build-hover .bh-msg.fail { color: #d33; word-break: break-all; }
.build-hover .bh-msg.exc { color: #8a8f99; }
/* 失败行剔除(10-05):「取消」按钮只在悬停展开态出现(原因行末尾),紧凑态不放防位置跳变 */
.bh-line { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.bh-line .bh-msg { flex: 1; min-width: 0; margin-top: 0; }
.build-x { flex: none; border: 1px solid #f0c4c4; background: #fff; cursor: pointer;
           color: #d33; font-size: 12px; line-height: 16px; padding: 2px 9px; border-radius: 5px; }
.build-x:hover { background: #fdeaea; border-color: #d33; }
.build-restore { flex: none; border: 1px solid #bcd3f5; background: #fff; cursor: pointer;
                 color: #1a66e0; font-size: 12px; line-height: 16px; padding: 2px 9px; border-radius: 5px; }
.build-restore:hover { background: #e8f2fd; border-color: #1a66e0; }
/* 已剔除行:⊘灰显留痕 */
.build-row.excluded .build-st { color: #8a8f99; font-weight: 400; }
.build-row.excluded .build-nm { color: #b6bac3; }
.build-nm { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.build-err { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d33; }

/* ---- 自绘确认弹窗(替代原生 confirm/alert,不露 127.0.0.1) ---- */
.confirm-mask { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.28); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
.confirm-box { background: #fff; border-radius: 14px; padding: 28px 30px 22px; min-width: 320px; max-width: 460px; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.confirm-text { font-size: 15px; color: #222; line-height: 1.6; white-space: pre-wrap; word-break: break-all; text-align: center; margin-bottom: 22px; max-height: 46vh; overflow-y: auto; }
.confirm-btns { display: flex; gap: 12px; justify-content: center; }
.btn-okk, .btn-wait { min-width: 110px; padding: 9px 18px; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; line-height: 20px; }
.btn-okk { background: #1fa45b; color: #fff; }
.btn-okk:hover { background: #178a4c; }
.btn-wait { background: #e5484d; color: #fff; }
.btn-wait:hover { background: #c73a3f; }

/* ---- 搭建完成态双按钮 ---- */
.build-actions { display: flex; gap: 10px; margin-top: 2px; }
.build-actions .btn-build { flex: 1; margin-top: 0; }
.btn-build.red { background: #e5484d; }
.btn-build.red:hover { background: #c73a3f; }
.btn-build.gray { background: #8a8f98; }   /* 全量取消(10-07):中性灰 */
.btn-build.gray:hover { background: #767b84; }

/* ---- 条件6:名称长度校验 ---- */
.name-check { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.name-input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid #d5d9e0; border-radius: 8px; font-size: 13px; line-height: 18px; }
.name-input:focus { outline: none; border-color: #1a66e0; }
.name-warn { color: #d33; font-size: 12px; margin-top: 6px; line-height: 1.5; }

/* ---- 置灰不可选按钮(定向包顶层互斥等) ---- */
.op-btn:disabled { color: #b6bac3 !important; background: #f2f3f6 !important; border-color: #e4e6eb !important; cursor: not-allowed; font-weight: 400; }

/* ---- 播报文案富文本:红色加粗(账户ID等) ---- */
.confirm-text .em-red { color: #d33; font-weight: 700; }

/* ---- 搭建期间锁定六块模块 ----
   进入搭建状态(S.build.status 非空)即锁:遮罩层挡点击+not-allowed 光标;
   仅「重试/重新创建」或撤销完成(看板归零)才释放;上传Media 不释放。 */
.board { position: relative; }
.page.building .board::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 60;
  cursor: not-allowed;
  background: rgba(255, 255, 255, .35);
  border-radius: 12px;
}

/* ---- 标题行:清空选项按钮(活动模块上方) ---- */
.page-title { display: flex; align-items: center; gap: 12px; }
.title-clear { margin-left: auto; padding: 5px 14px; border: 1px solid #d5d9e0; border-radius: 8px;
               background: #fff; color: #666; font-size: 12px; cursor: pointer; line-height: 18px; }
.title-clear:hover { color: #d33; border-color: #d33; }
.page.building .title-clear { pointer-events: none; opacity: .45; }

/* ---- 绑定RTA 黄色按钮 ---- */
.btn-build.yellow { background: #f5a623; }
.btn-build.yellow:hover { background: #d98f14; }

/* ---- 标题下按钮组:位于大标题与模块之间垂直居中 ---- */
.page-title { display: block; }
.title-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-start;
                 padding: 8px 0; margin: 0 auto; }
.title-actions .title-clear { margin-left: 0; }
.title-rta { padding: 6px 16px; border: none; border-radius: 8px; background: #f5a623;
             color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; line-height: 18px; }
.title-rta:hover { background: #d98f14; }
/* 10-06 用户定稿:uploaded 态两个录入RTA按钮不锁(配置可能还没设完,要去录入);只锁清空选项 */
.page.building .title-actions button { pointer-events: none; opacity: .45; }   /* 绑定/搭建锁定全屏蔽(10-08:原豁免.title-rta=漏洞) */

/* ---- 登录页 ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
/* 登录页全屏渐变底色已放行(10-08):它是全屏不透明板,会把底部鹈鹕动画整层盖住;
   登录卡自身白底保留=正常浮在动画上 */
.login-card { background: #fff; border-radius: 16px; padding: 36px 40px 30px; width: 320px;
              box-shadow: 0 16px 44px rgba(30, 60, 120, .14); text-align: center; }
.login-logo { display: flex; justify-content: center; margin-bottom: 2px; }
.login-logo svg { width: 262px; max-width: 88%; height: auto; }
.login-sub { font-size: 12px; color: #8a8f99; margin: 6px 0 22px; }
.login-input { width: 100%; box-sizing: border-box; margin-bottom: 14px; padding: 10px 12px;
               border: 1px solid #d5d9e0; border-radius: 10px; font-size: 14px; line-height: 20px; }
.login-input:focus { outline: none; border-color: #1a66e0; }
.login-err { color: #d33; font-size: 12px; margin-bottom: 12px; line-height: 1.5; }
.login-btn { width: 100%; padding: 10px; border: none; border-radius: 10px; background: #1a66e0;
             color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.login-btn:hover { background: #1457b8; }
.login-btn:disabled { background: #a8c4ee; cursor: not-allowed; }

/* ---- 右上角用户区+登出 ---- */
.app-root { height: 100%; }
.user-corner { position: fixed; top: 12px; right: 16px; z-index: 1500; display: flex;
               align-items: center; gap: 10px; }
.user-name { font-size: 13px; color: #555; background: rgba(255,255,255,.85);
             padding: 4px 10px; border-radius: 8px; }
.logout-btn { padding: 5px 14px; border: 1px solid #d5d9e0; border-radius: 8px;
              background: #fff; color: #666; font-size: 12px; cursor: pointer; line-height: 18px; }
.logout-btn:hover { color: #d33; border-color: #d33; }

/* ---- 标题/按钮组/舞台间距收紧(不出滚动条) ---- */
.page:has(.title-actions) { gap: 10px; }
.title-actions { padding: 2px 0; }
.stage { height: min(820px, calc(100vh - 150px)); }

/* ---- 聚焦模糊的过渡(标题按钮组/右上角用户区与其他元素一致) ---- */
.title-actions, .user-corner { transition: filter .25s ease, opacity .25s ease; }

/* ---- 录入RTA人群ID 弹窗 ---- */
.rta-modal { width: min(860px, 92vw); }
.rta-meta { font-size: 12px; font-weight: 400; color: #8a8f99; margin-left: 12px; }
.rta-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.btn-rta-upload { padding: 8px 18px; border: none; border-radius: 10px; background: #f5a623;
                  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 18px; }
.btn-rta-upload:hover { background: #d98f14; }
.btn-rta-upload:disabled { background: #f3d9ab; cursor: not-allowed; }
.rta-progress { font-size: 12px; color: #1a66e0; display: flex; align-items: center; gap: 6px; }
.rta-tbl { border: 1px solid #eceff3; border-radius: 10px; overflow-y: auto; max-height: 46vh; }
/* (列布局已由 .rta-tr 独立 grid 接管,见下方布局修正段) */
.rta-tagid { color: #333; font-variant-numeric: tabular-nums; }
.rta-none { color: #d98f14; } .rta-na { color: #b6bac3; }
.rta-input { width: 90%; padding: 6px 8px; border: 1px solid #d5d9e0; border-radius: 6px; font-size: 13px; }
.rta-input:focus { outline: none; border-color: #1a66e0; }
.btn-rta-save { flex: 1; padding: 11px; border: none; border-radius: 10px; background: #1fa45b;
                color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.btn-rta-save:hover { background: #178a4c; }
.btn-rta-save:disabled { background: #a8d9be; cursor: not-allowed; }

/* ---- 录入RTA人群ID 弹窗布局修正(10-03):独立四列grid/内容居中/底部双按钮 ---- */
.rta-tr { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, .9fr) minmax(0, 1.1fr) 76px;
          align-items: center; border-top: 1px solid #f2f4f7; }
.rta-tr:first-child { border-top: none; }
.rta-tr.head { background: #f7f8fa; color: #555; font-weight: 600; position: sticky; top: 0; z-index: 1; }
.rta-tr .rta-td { padding: 9px 10px; font-size: 13px; min-width: 0; }
.rta-tr .w-name { white-space: normal; word-break: break-all; }
.rta-tr .w-op { text-align: right; }
.rta-tr.na .rta-td { color: #b6bac3; }
.rta-modal .scene-body { display: flex; flex-direction: column; justify-content: center; }   /* 垂直居中 */
.rta-toolbar { justify-content: center; min-height: 20px; }                                  /* 水平居中 */
.rta-foot { justify-content: center; }
.rta-btns { display: flex; gap: 14px; width: 66%; }                                          /* 双按钮合计 2/3 宽 */
.rta-btns .btn-rta-upload, .rta-btns .btn-rta-save { flex: 1; max-width: 50%; }

/* ---- 未完成批次:红字横幅 + 选择性锁定(活动/账户/清空) ---- */
.retry-banner { color: #d33; font-size: 13px; font-weight: 700; margin-bottom: 8px;
                padding: 8px 10px; background: #fdecec; border-radius: 8px; text-align: center; }
.page.batch-open .block[data-id="camp"],
.page.batch-open .block[data-id="account"] {
  pointer-events: none; filter: blur(3px) opacity(.65);
}
.page.batch-open .title-clear { pointer-events: none; opacity: .45; }

/* ===== RTA 三级选择器 / 四级新建 / 配置ID二级(10-05) ===== */
.scene-modal-mask.up { z-index: 220; }    /* 三级盖二级 */
.scene-modal-mask.up2 { z-index: 240; }   /* 四级盖三级 */
.rta-picker { width: min(720px, 92vw); height: min(560px, 84vh); }
.rta-picker .scene-body { display: flex; flex-direction: column; }
.pk-toolbar { flex: none; display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.pk-search { flex: 1; border: 1px solid #dcdfe6; border-radius: 6px; padding: 7px 10px; font-size: 13px; outline: none; }
.pk-search:focus { border-color: #1a66e0; }
.pk-tbl { flex: 1; min-height: 0; border: 1px solid #eceff3; border-radius: 10px; overflow-y: auto; }
.pk-grid { display: grid; align-items: center; }
.pk-grid.pk3 { grid-template-columns: minmax(0,2.4fr) minmax(0,.9fr) minmax(0,1.3fr); }   /* 单选:无checkbox列 */
.pk-grid.pk4 { grid-template-columns: 34px minmax(0,2.2fr) minmax(0,.8fr) minmax(0,1.2fr); } /* 多选:行首checkbox */
.pk-grid .w-chk { display: flex; justify-content: center; }
.rta-picker .pk-grid .w-chk { grid-column: auto; }
.pk-row { cursor: pointer; }
.pk-row:hover { background: #f5f8fd; }
.pk-spin { display: inline-block; width: 12px; height: 12px; border-width: 2px; margin-right: 5px; vertical-align: -2px; }
.pk_done { color: #1fa45b; }
.rta-create { width: min(500px, 92vw); height: auto; }
.fc-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fc-label { flex: none; width: 96px; color: #555; font-size: 13px; }
.fc-name { flex: 1; border: 1px solid #dcdfe6; border-radius: 6px; padding: 8px 10px; font-size: 13px; outline: none; }
.fc-name:focus { border-color: #1a66e0; }
.fc-num { width: 70px; }
.fc-unit { color: #555; font-size: 13px; }
.fc-hint { color: #999; font-size: 12px; line-height: 1.6; margin-top: 4px; }
.cfg-tbl { max-height: none; }
.cfg-sec-title { font-weight: 600; color: #555; padding: 8px 4px 6px; }
.cfg-divider { border-top: 1px solid #eceef2; margin: 12px 0 4px; }
.rta-tr.cfg-row { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1.5fr) auto; align-items: center; }
.cfg-ops { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.op-btn.dft { background: #f0f7ff; border-color: #bcd3f5; color: #1a66e0; }
.op-btn.dft:hover { background: #e8f2fd; border-color: #1a66e0; }
.pk-sel { margin-bottom: 8px; flex: none; }
/* 10-05 用户定稿:整行不可点,仅「编辑」按钮开三级选择器 */
.cfg-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

/* ===== 超级用户设置 + 配置ID保存居中 + 默认选项清除(10-06) ===== */
.cfg-save-row { display: flex; justify-content: center; width: 100%; }
.cfg-save-row .btn-rta-save { flex: none; min-width: 220px; }
.dft-grp { display: inline-flex; align-items: center; gap: 2px; }
.dft-x { color: #b6bac3; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.dft-x:hover { color: #d33; background: #fdeaea; }
.super-btn { padding: 5px 12px; border: 1px solid #c9dcf7; border-radius: 8px; background: #f0f7ff;
             color: #1a66e0; font-size: 12px; cursor: pointer; }
.super-btn:hover { background: #e8f2fd; border-color: #1a66e0; }
.su-sec-title { font-weight: 600; color: #555; font-size: 13px; margin-bottom: 8px; }
.su-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px dashed #f0f2f5; }
.su-row:last-of-type { border-bottom: none; }
.su-email { flex: 1; min-width: 0; color: #333; font-size: 13px; word-break: break-all; }
.su-root { color: #8a8f99; font-size: 12px; border: 1px solid #e4e6eb; border-radius: 5px; padding: 2px 7px; }
.su-divider { border-top: 1px solid #eceef2; margin: 14px 0 12px; }
.su-add { display: flex; align-items: center; gap: 8px; }
.su-input { border: 1px solid #dcdfe6; border-radius: 6px; padding: 7px 10px; font-size: 13px; outline: none; width: 200px; }
.su-input:focus { border-color: #1a66e0; }
.su-domain { color: #555; font-size: 13px; }

/* ===== 体检补漏(10-06):此前模板引用但无样式定义的类 ===== */
.build-head-sub { font-size: 12px; color: #8a8f99; margin-top: 2px; font-weight: 400; }
.build-title { font-size: 13px; }
.aud-search-bar { padding: 6px 0; }
.aud-panel { padding: 4px 0 8px; }

/* ===== 绑定RTA流水(10-06) ===== */
.bind-flow { margin-top: 10px; border: 1px solid #eceff3; border-radius: 10px; padding: 8px 12px;
             font-size: 13px; }
.bind-step { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #8a8f99; }
.bind-step.ok { color: #1fa45b; font-weight: 600; }
.bind-step.skip { color: #b6bac3; }
.bind-step.pend .bs-ico::after { content: ''; display: inline-block; width: 11px; height: 11px;
  border: 2px solid #c9d3e0; border-top-color: #1a66e0; border-radius: 50%;
  animation: cre-spin .8s linear infinite; }
.bind-step .bs-ico { flex: none; width: 20px; text-align: center; }
.bind-sync-list { margin: 2px 0 4px 28px; border-left: 2px dashed #e4e8ef; padding-left: 10px; }
.bind-sync-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: #556070; }
.bind-sync-row .bind-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                          white-space: nowrap; font-size: 12px; }
.bind-sync-row.ok { color: #1fa45b; }
.bind-sync-row.fail { color: #d33; }   /* 订单项同步失败态(10-07) */
.bind-sync-row:not(.ok):not(.fail) .bs-ico::after { content: ''; display: inline-block; width: 10px; height: 10px;
  border: 2px solid #c9d3e0; border-top-color: #1a66e0; border-radius: 50%;
  animation: cre-spin .8s linear infinite; }
.bind-note { color: #d98f14; font-size: 12px; padding: 4px 0; }
.bind-err { color: #d33; font-size: 12px; padding: 6px 0 2px; display: flex; gap: 8px; align-items: center;
            flex-wrap: wrap; word-break: break-all; }
.bind-err .btn-build { width: auto; flex: none; padding: 8px 24px; font-size: 14px; margin-top: 0; }

/* 绑定RTA失败步(10-06):红✕+截断原因,悬停展开全文+取消按钮(参考广告报错行) */
.bind-step.fail { color: #d33; font-weight: 600; position: relative; cursor: default; }
.bind-step .bind-step-err { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; font-weight: 400; color: #d33; }
.bind-step .bind-hover { display: none; }
.bind-step.fail:hover { background: #fdf0f0; border-radius: 6px; }
.bind-step.fail:hover .bind-step-err { display: none; }
.bind-step.fail:hover .bind-hover { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px;
  animation: build-hover-in .18s ease-out; }
.bind-step .bind-hover .bh-msg { flex: 1; min-width: 0; margin-top: 0; word-break: break-all; }

/* ===== 巨量(OE)模块样式(10-07):分段按钮/落地页两列/定向面板/地域 tab ===== */
.seg { display: flex; gap: 8px; }
.seg-btn { padding: 6px 14px; border: 1px solid transparent; border-radius: 8px;
  background: #f2f4f7; color: #556070; font-size: 13px; cursor: pointer; }
.seg-btn:hover { background: #e9edf3; }
.seg-btn.on { background: #fff; color: #1a66e0; border-color: #1a66e0; font-weight: 600; }
.oe-land-cols { display: flex; align-items: stretch; }
.oe-land-col { flex: 1; min-width: 0; padding: 0 12px; }
.oe-land-col + .oe-land-col { border-left: 1px dashed #d8dde6; }
.oe-land-head { font-weight: 700; color: #333; padding: 4px 2px 8px; }
.oe-land-list { max-height: 46vh; overflow-y: auto; }
.oe-sec { margin-bottom: 14px; }
.oe-sec-head { font-weight: 700; color: #333; font-size: 13px; margin-bottom: 8px; }
.oe-sec-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oe-chk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oe-link { color: #1a66e0; cursor: pointer; font-size: 12px; }
.oe-link:hover { text-decoration: underline; }
.oe-search { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid #e2e6ee;
  border-radius: 8px; margin-bottom: 8px; font-size: 13px; outline: none; }
.oe-search:focus { border-color: #1a66e0; }
.oe-aud-wrap { display: flex; gap: 12px; margin-top: 4px; }
.oe-aud-left { flex: 1.7; min-width: 0; }
.oe-aud-right { flex: 1; min-width: 0; border-left: 1px solid #eef1f5; padding-left: 12px;
  display: flex; flex-direction: column; }
.oe-aud-body { max-height: 34vh; overflow-y: auto; border: 1px solid #eef1f5; border-radius: 8px; }
.oe-aud-head { display: flex; gap: 8px; padding: 6px 10px; color: #8a94a6; font-size: 12px;
  border-bottom: 1px solid #eef1f5; position: sticky; top: 0; background: #fff; }
.oe-aud-head span:nth-child(1) { flex: 1; }
.oe-aud-head span:nth-child(2) { width: 56px; flex: none; }
.oe-aud-head span:nth-child(3) { width: 64px; flex: none; }
.oe-aud-head span:nth-child(4) { width: 70px; flex: none; }
.oe-aud-row { display: flex; gap: 8px; align-items: center; padding: 7px 10px;
  border-bottom: 1px solid #f5f7fa; font-size: 13px; }
.oe-aud-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: #333; }
.oe-aud-src { width: 56px; color: #8a94a6; font-size: 12px; flex: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-aud-ops { width: 70px; flex: none; display: flex; gap: 8px; }
.oe-aud-ops a { color: #1a66e0; cursor: pointer; font-size: 12px; }
.oe-aud-ops a.on { color: #e04b4b; font-weight: 600; }
.oe-aud-tabs { display: flex; gap: 14px; font-size: 13px; color: #556070;
  border-bottom: 1px solid #eef1f5; padding-bottom: 6px; margin-bottom: 6px; }
.oe-aud-tabs span { cursor: pointer; }
.oe-aud-tabs span.on { color: #1a66e0; font-weight: 600; border-bottom: 2px solid #1a66e0; }
.oe-aud-sel { flex: 1; overflow-y: auto; max-height: 30vh; }
.oe-sel-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px;
  font-size: 13px; color: #333; }
.oe-sel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-empty-box { color: #b8bfc9; font-size: 12px; text-align: center; padding: 22px 0;
  border: 1px dashed #e4e8ef; border-radius: 8px; margin-right: 6px; }
.oe-pkg-list { max-height: 52vh; overflow-y: auto; }
.oe-geo-tabs { display: flex; gap: 18px; font-size: 13px; color: #556070;
  border-bottom: 1px solid #eef1f5; padding-bottom: 6px; margin-bottom: 8px; }
.oe-geo-tabs span { cursor: pointer; }
.oe-geo-tabs span.on { color: #1a66e0; font-weight: 600; border-bottom: 2px solid #1a66e0; }
.oe-tier-list { border: 1px solid #eef1f5; border-radius: 8px; max-height: 40vh; overflow-y: auto; }
.oe-tier-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid #f5f7fa; font-size: 13px; }
.oe-tier-name { font-weight: 600; color: #333; width: 56px; }
.rta-input { width: 110px; padding: 5px 8px; border: 1px solid #d8dde6; border-radius: 6px;
  font-size: 12px; outline: none; }
.rta-input:focus { border-color: #1a66e0; }
.oe-geo-row { cursor: pointer; }
.oe-tier-panes { display: flex; border: 1px solid #eef1f5; border-radius: 8px; max-height: 42vh; }
.oe-tier-left { width: 40%; border-right: 1px solid #eef1f5; overflow-y: auto; }
.oe-tier-right { flex: 1; overflow-y: auto; }
.oe-tier-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid #f5f7fa; font-size: 13px; color: #333; cursor: pointer; }
.oe-tier-item:hover { background: #f7f9fc; }
.oe-tier-item.act { background: #f2f6ff; color: #1a66e0; }
.oe-tier-item.head { color: #556070; font-weight: 600; position: sticky; top: 0;
  background: #fff; z-index: 1; }
.rta-wrap { display: inline-flex; flex-direction: column; gap: 2px; }
.rta-input.bad { border-color: #e04b4b; background: #fdf0f0; }
.rta-err { color: #e04b4b; font-size: 11px; white-space: nowrap; }
.op-btn:disabled { opacity: .45; cursor: not-allowed; }
.oe-chk-row .chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #444; }
.oe-aud-tabs-head { display: flex; gap: 14px; font-size: 13px; color: #556070;
  border-bottom: 1px solid #eef1f5; padding-bottom: 6px; margin-bottom: 8px; }
.oe-aud-tabs-head span { cursor: pointer; }
.oe-aud-tabs-head span.on { color: #1a66e0; font-weight: 600; border-bottom: 2px solid #1a66e0; }
.oe-age-pop { position: relative; }
.oe-age-panel { position: absolute; left: 0; top: 100%; z-index: 30; margin-top: 4px;
  width: 260px; max-height: 240px; overflow-y: auto; background: #fff;
  border: 1px solid #e2e6ee; border-radius: 10px; box-shadow: 0 8px 24px rgba(20,40,90,.14); }
.oe-age-panel-head { padding: 8px 12px; font-weight: 700; color: #333; font-size: 13px;
  border-bottom: 1px solid #eef1f5; position: sticky; top: 0; background: #fff; }
.oe-age-panel-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  font-size: 13px; color: #333; cursor: pointer; }
.oe-age-panel-row:hover { background: #f2f6ff; }
.oe-sel-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 8px; border: 1px solid #e2e6ee; border-radius: 6px; background: #f7f9fc;
  font-size: 12px; color: #333; margin: 3px; }
.oe-sel-pill .p-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-sel-pill .p-kind { color: #1a66e0; flex: none; }
.oe-sel-pill .p-x { color: #98a1af; cursor: pointer; flex: none; font-size: 14px; line-height: 1; }
.oe-sel-pill .p-x:hover { color: #e04b4b; }
.oe-age-box { margin-top: 8px; border: 1px solid #eef1f5; border-radius: 10px; background: #fbfcfe; }
.oe-age-box-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px;
  font-weight: 700; color: #333; font-size: 13px; }
.bh-msg.run { color: #556070; }

/* SVG 图标(10-08):随文字色,统一对齐 */
.ico { flex: none; }
.op-btn .ico, .btn-build .ico, .title-rta .ico, .title-clear .ico,
.super-btn .ico, .logout-btn .ico, .btn-ok .ico, .btn-cancel .ico,
.build-restore .ico, .rta-btn .ico { vertical-align: -2px; margin-right: 5px; }


/* 鹈鹕骑自行车成品背景(10-08,iframe 版;用户定稿:不透明) */
/* 全屏背景层叠定稿(10-08):背景 teleport 到 body(pelican-bg.js),与 #app 平级——
   .pelican-bg 是定位(fixed)元素而页面内容是 static,同层叠上下文里定位恒压 static,
   故背景必须待在 #app 之外;z-index:0 与 #app{position:relative;z-index:1} 配对,
   整个应用(全部模块/卡片)整体压动画之上。
   两个禁踩的坑:①背景留 #app 内→定位压 static,动画盖住所有模块;
   ②负 z-index 的 fixed iframe 在 Chromium 不绘制(实测白屏,勿用)。 */
.pelican-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; }
.pelican-bg iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== 页面切换动画(10-08 用户定):方块从四周聚拢入场 / 向四周散开退场 =====
   实现=router-view 外包 <transition name="fly" mode="out-in">(app.js,显式时长 640/500ms,
   与下方"基础时长+错峰延迟"成对,任一端要改需同步);方向与错峰靠逐格 CSS 变量:
   --fx/--fy=起飞/落点偏移矢量, --d=错峰延迟。
   入场 fill backwards(结束即释放样式,不碍 .card:hover 的 transform);
   退场 fill both(保持散开态直到组件卸载)。 */
@keyframes blk-in {
  from { transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes blk-out {
  from { transform: none; opacity: 1; }
  to   { transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(.9); opacity: 0; }
}
.fly-enter-active .card,
.fly-enter-active .board > .block,
.fly-enter-active .detail { animation: blk-in .44s cubic-bezier(.22,.9,.3,1) var(--d, 0ms) backwards; }
.fly-leave-active .card,
.fly-leave-active .board > .block,
.fly-leave-active .detail { animation: blk-out .3s ease-in var(--d, 0ms) both; }
.fly-leave-active { pointer-events: none; }   /* 散开途中整页禁点:防误触已离场页面发起二次跳转 */
/* 首页三卡(单行):左 / 上 / 右 */
.fly-enter-active .row > .card:nth-child(1), .fly-leave-active .row > .card:nth-child(1) { --fx: -170px; --fy: 0;      --d: 0ms; }
.fly-enter-active .row > .card:nth-child(2), .fly-leave-active .row > .card:nth-child(2) { --fx: 0;      --fy: -150px; --d: 32ms; }
.fly-enter-active .row > .card:nth-child(3), .fly-leave-active .row > .card:nth-child(3) { --fx: 170px;  --fy: 0;      --d: 64ms; }
/* 媒体选择六卡 / 版面六块(3×2):四角斜向 + 中列中行直向 */
.fly-enter-active .grid6 > .card:nth-child(1), .fly-leave-active .grid6 > .card:nth-child(1),
.fly-enter-active .board > .block:nth-child(1), .fly-leave-active .board > .block:nth-child(1) { --fx: -170px; --fy: -120px; --d: 0ms; }
.fly-enter-active .grid6 > .card:nth-child(2), .fly-leave-active .grid6 > .card:nth-child(2),
.fly-enter-active .board > .block:nth-child(2), .fly-leave-active .board > .block:nth-child(2) { --fx: 0;      --fy: -170px; --d: 32ms; }
.fly-enter-active .grid6 > .card:nth-child(3), .fly-leave-active .grid6 > .card:nth-child(3),
.fly-enter-active .board > .block:nth-child(3), .fly-leave-active .board > .block:nth-child(3) { --fx: 170px;  --fy: -120px; --d: 64ms; }
.fly-enter-active .grid6 > .card:nth-child(4), .fly-leave-active .grid6 > .card:nth-child(4),
.fly-enter-active .board > .block:nth-child(4), .fly-leave-active .board > .block:nth-child(4) { --fx: -170px; --fy: 120px;  --d: 96ms; }
.fly-enter-active .grid6 > .card:nth-child(5), .fly-leave-active .grid6 > .card:nth-child(5),
.fly-enter-active .board > .block:nth-child(5), .fly-leave-active .board > .block:nth-child(5) { --fx: 0;      --fy: 170px;  --d: 128ms; }
.fly-enter-active .grid6 > .card:nth-child(6), .fly-leave-active .grid6 > .card:nth-child(6),
.fly-enter-active .board > .block:nth-child(6), .fly-leave-active .board > .block:nth-child(6) { --fx: 170px;  --fy: 120px;  --d: 160ms; }
/* 搭建详情列:从右侧来 / 向右散 */
.fly-enter-active .detail, .fly-leave-active .detail { --fx: 200px; --fy: 30px; --d: 190ms; }

/* ===== 顶部元素与右上角随页面过渡(10-08 用户定) =====
   标题/按钮排/返回 = 随 .fly 过渡类淡入淡出(回合内容体与方块聚散同拍);
   右上角(超级用户设置/邮箱/退出)不在路由内,由 app.js 的 cornerHidden 计时协同(560ms≈leave500+上帧)。 */
@keyframes chrome-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes chrome-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
.fly-enter-active .page-title,
.fly-enter-active .title-actions,
.fly-enter-active .back { animation: chrome-in .36s ease-out 80ms backwards; }
.fly-leave-active .page-title,
.fly-leave-active .title-actions,
.fly-leave-active .back { animation: chrome-out .22s ease-in both; }
.corner-enter-active { transition: opacity .34s ease, transform .34s ease; }
.corner-leave-active { transition: opacity .2s ease, transform .2s ease; }
.corner-enter-from, .corner-leave-to { opacity: 0; transform: translateY(-12px); }