.jdh-dt { background:#fff; border-radius:24px; border:1px solid rgba(24,27,41,.06); text-align:left; padding:22px 24px;
  box-shadow:0 40px 90px -50px rgba(24,27,41,.45), 0 2px 8px rgba(24,27,41,.04); min-width:0; }
.jdh-dt-tabs { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:100px; background:#F2F5FD; margin-bottom:14px; max-width:100%; }
.jdh-dt-tab { height:34px; padding:0 14px; border:0; border-radius:100px; background:transparent; font:inherit; font-size:14px; font-weight:600;
  color:var(--jd-muted); cursor:pointer; white-space:nowrap; }
.jdh-dt-tab:is([aria-selected="true"],[aria-checked="true"]) { background:#fff; color:var(--jd-ink); box-shadow:0 1px 3px rgba(24,27,41,.12); }
.jdh-dt-tab:focus-visible { outline:2px solid var(--jd-teal); outline-offset:2px; }
.jdh-dt-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px; }
.jdh-dt-src { display:flex; flex-direction:column; gap:8px; }
.jdh-dt-src textarea { min-height:170px; }
.jdh-dt-up { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--jd-muted); }
.jdh-dt-count { margin-left:auto; font-size:13px; color:var(--jd-muted); }

.jdh-dt-progress { display:flex; flex-direction:column; gap:12px; padding:28px 8px; }
.jdh-dt-progress-t { font-size:17px; font-weight:600; color:var(--jd-ink); }
.jdh-dt-bar { height:10px; border-radius:100px; background:#EEF1F6; overflow:hidden; }
.jdh-dt-bar > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--jd-teal-deep),var(--jd-mint));
  transition:width .35s var(--jd-ease); }
.jdh-dt-stages { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--jd-muted); }
.jdh-dt-stages li { display:inline-flex; align-items:center; gap:6px; }
.jdh-dt-stages li.is-done { color:var(--jd-teal-deep); font-weight:600; }
.jdh-dt-stages li.is-now { color:var(--jd-ink); font-weight:600; }
.jdh-dt-label { font-size:14px; color:var(--jd-body); min-height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.jdh-dt-mock { margin-bottom:12px; padding:10px 12px; border-radius:12px; background:var(--jd-plag-bg); color:#7A4A12; font-size:13px; line-height:20px; }
.jdh-dt-bar-top { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--jd-line); }
.jdh-dt-bar-top .jdh-dt-spacer { flex:1; }
.jdh-dt-themes { display:inline-flex; gap:6px; flex-wrap:wrap; }
.jdh-dt-theme { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px 0 6px; border-radius:100px; border:1px solid var(--jd-line);
  background:#fff; font:inherit; font-size:13px; font-weight:500; color:var(--jd-ink); cursor:pointer; }
.jdh-dt-theme[aria-pressed="true"] { border-color:var(--jd-teal); box-shadow:0 0 0 2px rgba(46,116,131,.18); }
.jdh-dt-sw { width:22px; height:22px; border-radius:50%; border:1px solid rgba(24,27,41,.12); }
.jdh-dt-dl { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 16px; border:0; border-radius:100px; background:var(--jd-teal);
  color:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.jdh-dt-dl:hover:not(:disabled) { background:var(--jd-teal-deep); }
.jdh-dt-dl:disabled { opacity:.5; cursor:wait; }
.jdh-dt-dl:focus-visible, .jdh-dt-theme:focus-visible { outline:2px solid var(--jd-teal); outline-offset:2px; }

.jdh-dt-editor { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start; }
.jdh-dt-stage svg, .jdh-dt-thumb svg, .jdh-dt-page svg { display:block; width:100%; height:auto; }
.jdh-dt-stage { border-radius:12px; overflow:hidden; box-shadow:0 12px 32px -18px rgba(24,27,41,.4); border:1px solid var(--jd-line); }
.jdh-dt-fields { display:flex; flex-direction:column; gap:12px; }
.jdh-dt-fields .jdh-tt-field textarea { min-height:96px; }
.jdh-dt-kind { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--jd-teal); }
.jdh-dt-note { font-size:13px; line-height:19px; color:var(--jd-muted); }
.jdh-dt-preview { margin-bottom:12px; padding:10px 12px; border-radius:12px; background:#E8F6F4; color:#024F5F; font-size:13px; line-height:20px; font-weight:500; }
.jdh-dt-lock { margin-top:18px; }
.jdh-dt-outline { width:100%; max-width:520px; margin:0; padding:0 0 0 24px; text-align:left; font-size:14px; line-height:22px; color:var(--jd-muted); }
.jdh-dt-notes-read { margin:0; font-size:14px; line-height:21px; color:var(--jd-muted); white-space:pre-wrap; }
.jdh-dt-row { display:flex; flex-wrap:wrap; gap:8px; }
.jdh-dt-strip { display:flex; gap:10px; margin-top:16px; padding:4px 2px 10px; overflow-x:auto; scroll-snap-type:x proximity; }
.jdh-dt-thumb { flex:0 0 150px; padding:0; border:2px solid transparent; border-radius:10px; background:none; cursor:pointer; scroll-snap-align:start;
  text-align:left; font:inherit; }
.jdh-dt-thumb > span { display:block; border-radius:8px; overflow:hidden; border:1px solid var(--jd-line); }
.jdh-dt-thumb small { display:block; margin-top:4px; padding:0 2px; font-size:12px; color:var(--jd-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jdh-dt-thumb[aria-current="true"] { border-color:var(--jd-teal); }
.jdh-dt-thumb:focus-visible { outline:2px solid var(--jd-teal); outline-offset:2px; }

.jdh-dt-pages { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; max-height:720px; overflow:auto; padding:4px; }
.jdh-dt-page { margin:0; }
.jdh-dt-page > span { display:block; border-radius:4px; overflow:hidden; border:1px solid var(--jd-line); box-shadow:0 10px 24px -16px rgba(24,27,41,.45); }
.jdh-dt-page figcaption { margin-top:6px; font-size:12px; color:var(--jd-muted); text-align:center; }
.jdh-dt-seg { display:inline-flex; gap:4px; padding:4px; border-radius:100px; background:#F2F5FD; }
.jdh-dt-stat { font-size:13px; color:var(--jd-muted); }

@media (max-width: 900px) {
  .jdh-dt { padding:16px; border-radius:18px; }
  .jdh-dt-grid { grid-template-columns:1fr 1fr; }
  .jdh-dt-editor { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .jdh-dt-grid { grid-template-columns:1fr; }
  .jdh-dt-thumb { flex-basis:120px; }
  .jdh-dt-pages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .jdh-dt-bar-top .jdh-dt-spacer { display:none; }
}