/* ============================================================
 * D 切片（M2 素材体系深化 / M4 参数模板库扩展 / M5 成片版本 / M11 分享预览）
 * 浅蓝白体系，零深色；仅新增 .d-* 命名空间；不改动他人样式
 * ============================================================ */

/* ---------- 通用工具条 / 卡片 ---------- */
.d-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.d-btn {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid #f5f7fa; border-radius:12px; padding:8px 15px;
  font-size:13px; font-weight:600; background:#fff; color:#1d2129;
  transition:all .18s;
}
.d-btn:hover { background:#e6f4ff; border-color:#38BDF8; }
.d-btn-primary { background:linear-gradient(90deg,#38BDF8,#38BDF8); color:#fff; border-color:transparent; }
.d-btn-primary:hover { filter:brightness(1.07); background:linear-gradient(90deg,#38BDF8,#38BDF8); }
.d-btn-danger { background:#ffece8; color:#f53f3f; border-color:#F3C2C2; }
.d-btn-ghost { background:#e6f4ff; color:#1d2129; }
.d-btn:disabled { opacity:.55; cursor:not-allowed; }
.d-hint { font-size:12px; color:#606266; line-height:1.7; }
.d-chip {
  display:inline-block; font-size:12px; border-radius:999px; padding:2px 10px;
  background:#e6f4ff; color:#1d2129; border:1px solid #f5f7fa;
}
.d-chip.ok { background:#E8F6EE; color:#2E7D5B; border-color:#C6E8D6; }
.d-chip.bad { background:#ffece8; color:#f53f3f; border-color:#F3C2C2; }
.d-chip.warn { background:#FFF4E0; color:#B07A1E; border-color:#F5E0B0; }

/* ---------- 资产卡增强（叠加在 .v10-card 上，不改其结构） ---------- */
.d-augpos { position:absolute; top:8px; left:8px; z-index:3; }
.d-augpos input[type=checkbox] { width:16px; height:16px; cursor:pointer; accent-color:#38BDF8; }
.d-augbadge {
  position:absolute; top:8px; right:8px; z-index:3; font-size:12px; font-weight:700;
  padding:2px 8px; border-radius:999px; background:#E8F6EE; color:#2E7D5B;
  border:1px solid #C6E8D6;
}
.d-augbadge.bad { background:#ffece8; color:#f53f3f; border-color:#F3C2C2; }
.d-augbadge.idle { background:#e6f4ff; color:#909399; border-color:#f5f7fa; }
.d-cardwrap { position:relative; }
.d-draghandle {
  position:absolute; bottom:8px; right:8px; z-index:3; font-size:12px;
  color:#909399; background:rgba(255,255,255,.85); border:1px dashed #C9DCF3;
  border-radius:8px; padding:2px 7px; cursor:grab; user-select:none;
}
.v10-card.d-dup { outline:2px solid #E8B4B4; background:#FDF3F3; }
.v10-card.d-badref { outline:2px dashed #E8B4B4; }

/* ---------- 浮动离线包条 ---------- */
.d-offbar {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  z-index:80; background:#fff; border:1px solid #f5f7fa; border-radius:12px;
  box-shadow:0 12px 36px rgba(29,33,41,.22); padding:10px 16px;
  display:flex; gap:12px; align-items:center; opacity:0; pointer-events:none;
  transition:all .22s;
}
.d-offbar.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.d-offbar b { color:#1d2129; }

/* ---------- 主面板（镜头参数 / 风格包） ---------- */
.d-host { margin-top:26px; display:flex; flex-direction:column; gap:22px; }
.d-panel {
  background:#fff; border:1px solid rgba(56,189,248,.16); border-radius:16px;
  padding:18px; box-shadow:0 6px 22px rgba(29,33,41,.08);
}
.d-panel-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.d-panel-head h2 { font-size:16px; font-weight:700; color:#1d2129; }
.d-panel-sub { font-size:13px; color:#606266; line-height:1.7; margin:6px 0 14px; }

.d-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:900px){ .d-grid { grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .d-grid { grid-template-columns:1fr;} }

.d-item {
  border:1px solid #f5f7fa; border-radius:13px; padding:13px 14px;
  background:linear-gradient(160deg,#ffffff 0%,#F2F8FE 100%);
  display:flex; flex-direction:column; gap:7px; transition:box-shadow .18s, transform .18s;
}
.d-item:hover { box-shadow:0 8px 20px rgba(91,138,200,.16); transform:translateY(-2px); }
.d-item-top { display:flex; align-items:center; gap:8px; }
.d-ic {
  width:30px; height:30px; border-radius:8px; flex:0 0 30px;
  background:linear-gradient(135deg,#38BDF8,#38BDF8); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.d-name { font-weight:700; font-size:14px; color:#1d2129; }
.d-meta { display:flex; gap:6px; flex-wrap:wrap; }
.d-prompt {
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px;
  color:#1d2129; background:#e6f4ff; border-radius:8px; padding:7px 9px;
  line-height:1.5; word-break:break-word;
}
.d-prompt.neg { color:#A05A5A; background:#FDF0F0; }
.d-ops { display:flex; gap:7px; margin-top:auto; padding-top:4px; flex-wrap:wrap; }
.d-op {
  flex:1; text-align:center; cursor:pointer; border:0; border-radius:8px;
  padding:6px 8px; font-size:12px; font-weight:600; transition:filter .15s, background .15s;
}
.d-op-copy { background:#e6f4ff; color:#1d2129; }
.d-op-copy:hover { background:#DFEBF9; }
.d-op-go { background:linear-gradient(90deg,#38BDF8,#38BDF8); color:#fff; }
.d-op-go:hover { filter:brightness(1.07); }
.d-op-share { background:#FFF4E0; color:#B07A1E; }
.d-op-shared { background:#E8F6EE; color:#2E7D5B; }

/* ---------- 弹窗（复用 v10-mask 外壳，内部 d-* 内容） ---------- */
.d-modal-title { font-size:16px; font-weight:700; margin-bottom:4px; color:#1d2129; }
.d-list { max-height:340px; overflow:auto; }
.d-group {
  border:1.5px solid #E8B4B4; background:#FDF6F6; border-radius:12px;
  padding:10px; margin-bottom:10px;
}
.d-group.clean { border-color:#C6E8D6; background:#F5FBF7; }
.d-row { display:flex; gap:10px; align-items:center; }
.d-empty { text-align:center; padding:30px 16px; color:#606266; font-size:14px; }
.d-field { display:block; font-size:13px; color:#606266; margin:12px 0 6px; }
.d-inp {
  width:100%; padding:10px 13px; border:1px solid #f5f7fa; border-radius:12px;
  font-size:14px; outline:none; background:#ffffff; color:#1d2129;
}
.d-inp:focus { border-color:#38BDF8; box-shadow:0 0 0 3px rgba(56,189,248,.15); }

/* ---------- M5 成片版本 ---------- */
.d-ver-wrap { display:flex; flex-direction:column; gap:10px; }
.d-ver-card {
  border:1px solid #f5f7fa; border-radius:13px; padding:12px 14px;
  background:linear-gradient(160deg,#ffffff 0%,#F2F8FE 100%);
  display:flex; gap:12px; align-items:center;
}
.d-ver-card.picked { border-color:#38BDF8; box-shadow:0 0 0 3px rgba(56,189,248,.18); }
.d-ver-thumb {
  width:84px; height:54px; border-radius:8px; flex:0 0 84px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:12px; font-weight:700; overflow:hidden;
}
.d-ver-thumb img { width:100%; height:100%; object-fit:cover; }
.d-ver-info { flex:1; min-width:0; }
.d-ver-time { font-size:13px; font-weight:700; color:#1d2129; }
.d-ver-note { font-size:12px; color:#606266; margin-top:2px; }
.d-ver-ops { display:flex; gap:6px; flex-wrap:wrap; }
.d-ver-pick {
  font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px;
  background:#E8F6EE; color:#2E7D5B; border:1px solid #C6E8D6;
}

/* ---------- M11 分享 ---------- */
.d-share-row {
  display:flex; gap:10px; align-items:center; border:1px solid #f5f7fa;
  border-radius:12px; padding:10px 12px; margin-bottom:8px; background:#ffffff;
}
.d-share-link { font-size:12px; color:#1d2129; word-break:break-all; flex:1; }
.d-toggle { display:flex; align-items:center; gap:8px; font-size:13px; color:#1d2129; margin:8px 0; }
.d-toggle input { width:16px; height:16px; accent-color:#38BDF8; }

/* ---------- preview_share 访客页 ---------- */
.dpv-wrap { max-width:1160px; margin:0 auto; padding:26px 20px 60px; }
.dpv-banner {
  background:linear-gradient(90deg,#f7f9fc,#D8E7FA); border:1px solid rgba(56,189,248,.25);
  border-radius:12px; padding:10px 14px; font-size:13px; color:#1d2129; margin-bottom:18px;
  display:flex; gap:8px; align-items:center;
}
.dpv-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
@media (max-width:900px){ .dpv-grid { grid-template-columns:1fr;} }
.dpv-sec {
  background:#fff; border:1px solid rgba(56,189,248,.16); border-radius:16px;
  padding:18px; box-shadow:0 6px 22px rgba(29,33,41,.08);
}
.dpv-sec h3 { font-size:16px; font-weight:700; color:#1d2129; margin-bottom:10px; }
.dpv-shot { border:1px solid #f5f7fa; border-radius:12px; padding:10px 12px; margin-bottom:8px; background:#ffffff; }
.dpv-shot .l { font-size:13px; font-weight:700; color:#1d2129; }
.dpv-shot .d { font-size:12px; color:#606266; margin-top:3px; line-height:1.6; }
.dpv-placeholder {
  border:2px dashed #C9DCF3; border-radius:12px; padding:26px; text-align:center;
  color:#909399; font-size:13px; background:#F6FAFE;
}
.dpv-bad {
  max-width:520px; margin:80px auto; background:#fff; border-radius:16px;
  border:1px solid #F3C2C2; box-shadow:0 16px 50px rgba(120,80,80,.15);
  padding:34px 28px; text-align:center;
}
.dpv-bad .ic { font-size:40px; }
.dpv-bad h2 { font-size:20px; color:#1d2129; margin:10px 0 6px; }
.dpv-bad p { font-size:14px; color:#606266; line-height:1.8; }

/* toast */
.d-toast {
  position:fixed; top:16px; right:16px; z-index:3000; color:#fff;
  background:#1d2129; padding:10px 16px; border-radius:12px; font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; transform:translateY(-6px);
  transition:all .22s; pointer-events:none;
}
.d-toast.show { opacity:1; transform:translateY(0); }
.d-toast.err { background:#f53f3f; }