.jdh-cr { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px; text-align:left; }
.jdh-cr-pane { display:flex; flex-direction:column; gap:14px; min-width:0; padding:20px; border:1px solid var(--jd-line); border-radius:20px;
  background:#fff; box-shadow:0 18px 40px -32px rgba(24,27,41,.35); }
.jdh-cr-out { min-height:440px; }
.jdh-cr-input { width:100%; min-height:180px; padding:12px 14px; border:1px solid var(--jd-line); border-radius:14px; background:#FBFCFE; resize:vertical;
  font:inherit; font-size:15px; line-height:24px; color:var(--jd-ink); outline:0; }
.jdh-cr-input:focus { border-color:rgba(46,116,131,.6); box-shadow:0 0 0 3px rgba(46,116,131,.12); background:#fff; }
.jdh-cr-input--tall { min-height:280px; }
.jdh-cr-group { display:flex; flex-direction:column; gap:8px; }
.jdh-cr-chips { display:flex; flex-wrap:wrap; gap:8px; }
.jdh-cr-chip { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border:1px solid var(--jd-line); border-radius:100px;
  background:#fff; font:inherit; font-size:14px; font-weight:500; color:var(--jd-ink); cursor:pointer; }
.jdh-cr-chip:hover { border-color:rgba(46,116,131,.45); }
.jdh-cr-chip[aria-pressed="true"] { border-color:var(--jd-teal); background:#E3EFF2; color:var(--jd-teal-deep); }
.jdh-cr-chip:focus-visible, .jdh-cr-swatch:focus-visible { outline:2px solid var(--jd-teal); outline-offset:2px; }
.jdh-cr-ratio { display:inline-block; border:1.5px solid currentColor; border-radius:2px; }
.jdh-cr-select { height:38px; padding:0 10px; border:1px solid var(--jd-line); border-radius:100px; background:#fff; font:inherit; font-size:14px; color:var(--jd-ink); }
.jdh-cr-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--jd-line); }
.jdh-cr-hint { font-size:13px; color:var(--jd-muted); }
.jdh-cr-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.jdh-cr-mock { padding:10px 12px; border-radius:12px; background:var(--jd-plag-bg); color:#7A4A12; font-size:13px; line-height:20px; }
.jdh-cr-note { font-size:13px; line-height:20px; color:var(--jd-muted); }
.jdh-cr-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.jdh-cr-grid--one { grid-template-columns:minmax(0,1fr); }
.jdh-cr-shot { position:relative; overflow:hidden; border-radius:14px; background:#F3F5F8; border:1px solid var(--jd-line); }
.jdh-cr-shot img { display:block; width:100%; height:100%; object-fit:cover; }
.jdh-cr-shot-dl { position:absolute; right:8px; bottom:8px; }
.jdh-cr-pending { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--jd-muted); font-size:13px; }
.jdh-cr-swatches { display:flex; gap:8px; }
.jdh-cr-swatch { width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--jd-line); cursor:pointer; padding:0; }
.jdh-cr-swatch[aria-pressed="true"] { box-shadow:0 0 0 2px var(--jd-teal); }
.jdh-cr-preview { max-height:720px; overflow:auto; border-radius:14px; border:1px solid var(--jd-line); background:#F7F8FA; }
.jdh-cr-preview img { display:block; width:100%; height:auto; }
.jdh-cr-actions { display:flex; flex-wrap:wrap; gap:8px; }
.jdh-cr-frames { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-height:820px; overflow:auto; }
.jdh-cr-frame { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--jd-line); border-radius:16px; background:#fff; }
.jdh-cr-frame .jdh-cr-shot { aspect-ratio:16/9; }
.jdh-cr-frame-meta { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--jd-teal-deep); }
.jdh-cr-frame-n { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--jd-teal); color:#fff; font-size:12px; }
.jdh-cr-frame p { font-size:14px; line-height:21px; color:var(--jd-ink); }
.jdh-cr-frame .jdh-cr-dlg { color:var(--jd-body); font-style:italic; }
.jdh-cr-frame .jdh-cr-cam { font-size:13px; color:var(--jd-muted); }
.jdh-cr-sb-title { font-size:20px; line-height:28px; font-weight:600; color:var(--jd-ink); }
.jdh-cr-sb-log { font-size:14px; line-height:21px; color:var(--jd-muted); }
@media (max-width: 900px) {
  .jdh-cr { grid-template-columns:minmax(0,1fr); }
  .jdh-cr-out { min-height:0; }
  .jdh-cr-frames { grid-template-columns:minmax(0,1fr); max-height:none; }
}
@media (max-width: 480px) { .jdh-cr-grid { grid-template-columns:minmax(0,1fr); } .jdh-cr-pane { padding:16px; } }