.dr-page {
  --dr-panel: #23182f;
  --dr-border: #705187;
  --dr-muted: #cdbbdf;
  --dr-accent: #c897f5;
  color: #f7efff;
  font: 15px/1.6 'Segoe UI', system-ui, sans-serif;
  max-width: 1580px;
  margin: auto;
  overflow-wrap: anywhere;
}
.dr-page * { box-sizing: border-box; }
.dr-page [hidden] { display: none !important; }
.dr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 28px;
  align-items: center;
  padding: 28px 32px;
  border: 1px solid #8963a4;
  border-radius: 20px;
  background: radial-gradient(ellipse at 95% 0, #8052ac50, transparent 70%), linear-gradient(120deg, #2c1b3c, #21182d);
  margin-bottom: 24px;
}
.dr-eyebrow { color: #ddbbff; font-size: 11px; font-weight: 750; letter-spacing: 1.8px; }
.dr-hero h1 { color: white; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; margin: 10px 0 13px; letter-spacing: -.6px; }
.dr-hero p { color: #decee9; margin: 0; max-width: 90ch; }
.dr-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.dr-tags span { font-size: 12px; padding: 4px 11px; background: #26162f; border: 1px solid #79588c; border-radius: 18px; }
.dr-art { padding: 28px 10px; text-align: center; border: 1px solid #926ab0; border-radius: 17px; background: linear-gradient(130deg, #b886e325, #47265f44); transform: rotate(-3deg); }
.dr-art b { display: block; font: 35px/1.4 ui-monospace, monospace; color: #e5c9ff; }
.dr-art small { display: block; font-size: 9px; letter-spacing: 2px; color: #efd48b; margin-top: 10px; }
.dr-workspace {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(700px, 83vh, 1000px);
  min-height: 600px;
  border: 1px solid #8961a5;
  border-radius: 17px;
  background: #160e20;
  overflow: hidden;
  box-shadow: 0 12px 40px #0002;
}
.dr-toolbar, .dr-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid #5f426f; background: #2d1d3b; }
.dr-toolbar { justify-content: space-between; }
.dr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dr-page button, .dr-file {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 39px;
  padding: 8px 13px;
  font: 600 12px/1.4 'Segoe UI', system-ui, sans-serif;
  color: #f7eaff;
  background: #382444;
  border: 1px solid #9067a9;
  border-radius: 8px;
  cursor: pointer;
  max-width: 100%;
}
.dr-page button:hover:not(:disabled), .dr-file:hover { background: #533166; border-color: #d9aef8; }
.dr-page button.dr-primary, .dr-file.dr-primary { background: linear-gradient(120deg, #c28df1, #a66fd2); color: #21112f; border-color: #d9b1fb; font-weight: 750; }
.dr-page button:disabled { opacity: .45; cursor: not-allowed; }
.dr-file { position: relative; overflow: hidden; margin: 0; }
.dr-file input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; cursor: pointer; }
.dr-page :is(button, input, select, textarea, a, summary):focus-visible, .dr-file:focus-within { outline: 3px solid #f2cf7b; outline-offset: 3px; }
.dr-tabs { display: flex; gap: 5px; flex: 1; }
.dr-tabs button { background: transparent; border-color: transparent; min-width: 86px; }
.dr-tabs button[aria-selected=true] { background: #6b3a93; border-color: #b782df; box-shadow: inset 0 -2px #e0bbff; }
.dr-body { display: grid; grid-template-columns: 205px minmax(0, 1fr) 285px; min-height: 0; flex: 1; overflow: hidden; position: relative; }
.dr-nav { border-right: 1px solid #5c3e70; background: #20142b; min-width: 0; overflow: auto; padding: 15px 12px; }
.dr-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.dr-panel-heading h2 { font-size: 13px; margin: 0; color: #ecdcfa; }
.dr-panel-close { display: none !important; }
.dr-doc { border: 1px solid #584068; border-radius: 11px; background: #291b35; padding: 10px; margin-bottom: 10px; }
.dr-doc.dr-active { border-color: #bb8be1; background: #3a244c; }
.dr-doc .dr-doc-name { width: 100%; padding: 0; min-height: 30px; background: transparent; border: 0; justify-content: flex-start; text-align: left; font-size: 12px; overflow-wrap: anywhere; }
.dr-doc small { color: var(--dr-muted); font-size: 10px; display: block; margin: 4px 0 8px; }
.dr-doc-actions { display: flex; gap: 5px; }
.dr-doc-actions button { min-height: 27px; padding: 4px 8px; font-size: 10px; }
.dr-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #1b1125; }
.dr-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 14px 15px 9px; }
.dr-metrics > div { border: 1px solid #5d416d; border-radius: 9px; padding: 9px 12px; background: #2a1b36; }
.dr-metrics strong { display: block; color: #e1bdff; font-size: 22px; line-height: 1.2; }
.dr-metrics span { font-size: 10px; color: var(--dr-muted); }
.dr-review-controls { padding: 5px 15px 12px; border-bottom: 1px solid #4c335c; }
.dr-search-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.dr-search-row input { flex: 1; width: 100px; }
.dr-search-row select { max-width: 180px; }
.dr-row-count { color: var(--dr-muted); font-size: 11px; margin: 7px 0 0; }
.dr-batch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.dr-batch button { font-size: 10px; min-height: 29px; padding: 5px 8px; }
.dr-batch .dr-note { margin: 0; font-size: 11px; }
.dr-content { flex: 1; min-height: 0; overflow: auto; padding: 15px; scrollbar-color: #9264b4 #21172c; }
.dr-record-list { display: grid; gap: 9px; }
.dr-record { display: block !important; width: 100%; text-align: left; background: linear-gradient(115deg, #2b1c37, #22172c) !important; border-color: #60446f !important; padding: 13px 14px !important; border-radius: 11px !important; }
.dr-record.dr-selected { border-color: #d2a4f3 !important; background: #442855 !important; box-shadow: inset 3px 0 #ca95f0; }
.dr-record.dr-staged { border-left: 4px solid #8fcdb3 !important; }
.dr-record-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
.dr-record strong { font-size: 13px; font-weight: 700; }
.dr-record p { font: 12px/1.6 'Segoe UI', system-ui, sans-serif; font-weight: 400; color: #dbcce6; margin: 7px 0 5px; white-space: pre-wrap; }
.dr-record small { color: #b9a4cb; font-size: 10px; font-weight: 400; }
.dr-badge { font-size: 9px; font-weight: 600; color: #e1cbef; background: #3a2647; border: 1px solid #765289; border-radius: 14px; padding: 4px 8px; text-align: right; flex-shrink: 0; max-width: 53%; }
.dr-badge.dr-warning { color: #f7deb1; border-color: #9a774d; background: #3e3027; }
.dr-inspector { border-left: 1px solid #634776; background: #281a35; padding: 15px; min-width: 0; overflow: auto; }
.dr-inspector h3 { font-size: 16px; line-height: 1.35; margin: 0 0 12px; color: #f6eaff; }
.dr-inspector h4 { font-size: 12px; margin: 15px 0 7px; color: #d9b5f4; }
.dr-inspector p { font-size: 12px; color: #d6c3e5; white-space: pre-wrap; }
.dr-inspector-empty { color: #c3adD4; font-size: 13px; border: 1px dashed #7a588c; border-radius: 10px; padding: 18px; margin-bottom: 18px; }
.dr-inspector blockquote { border-left: 3px solid #bd8de0; padding: 11px 13px; margin: 10px 0; background: #1b1025; border-radius: 0 8px 8px 0; font-size: 12px; line-height: 1.7; color: #eadcf4; white-space: pre-wrap; }
.dr-page .dr-field { display: flex; flex-direction: column; margin: 12px 0; gap: 7px; font-size: 11px; font-weight: 650; color: #e8d5f5; }
.dr-page :is(input:not([type=file]):not([type=checkbox]), select, textarea) { font: 13px/1.5 'Segoe UI', system-ui, sans-serif; color: #faefff; background: #160d20; border: 1px solid #7c578f; border-radius: 8px; min-width: 0; min-height: 39px; max-width: 100%; padding: 9px 10px; }
.dr-field :is(input,select,textarea) { width: 100%; }
.dr-page textarea { resize: vertical; min-height: 72px; }
.dr-page .dr-check { flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: 9px; font-weight: 400; font-size: 12px; }
.dr-check input { accent-color: #c193e8; width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; }
.dr-settings { padding-top: 14px; margin-top: 19px; border-top: 1px solid #6b477e; }
.dr-settings summary { color: #d9b5f7; font-size: 13px; font-weight: 700; cursor: pointer; }
.dr-note { color: #c9b5d8; font-size: 11px; line-height: 1.75; margin: 11px 0; }
.dr-empty { padding: 42px 20px; text-align: center; max-width: 600px; margin: auto; }
.dr-empty h2 { font-size: 23px; line-height: 1.3; margin: 15px 0; color: #f0e1fa; }
.dr-empty p { font-size: 14px; color: #cbb7dd; margin: 12px 0 20px; }
.dr-empty-symbol { color: #c599e9; font: 45px/1.3 ui-monospace, monospace; }
.dr-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; background: #2a1b37; border-top: 1px solid #6d4b82; min-height: 49px; }
.dr-status { font-size: 11px; color: #dfcbed; white-space: pre-line; }
.dr-status[data-tone=error] { color: #ffd2ca; }
.dr-status[data-tone=success] { color: #bce6d2; }
.dr-footer small { font-size: 10px; color: #bca7ce; flex-shrink: 0; }
.dr-preview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: start; }
.dr-paper { background: #fffdfd; color: #261c2b; border-radius: 6px; padding: 20px; min-width: 0; }
.dr-paper h3 { color: #694485; font-size: 16px; border-bottom: 1px solid #dbcbe4; padding-bottom: 9px; margin: 0 0 16px; }
.dr-paragraph { padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px dashed #e0d4e6; }
.dr-paragraph small { display: block; font-size: 8px; color: #7b6589; }
.dr-paragraph p { font: 12px/1.7 system-ui; color: #302435; white-space: pre-wrap; margin: 4px 0; }
.dr-paragraph h3 { margin: 5px 0; font-size: 17px; color: #4e2d68; border: 0; padding: 0; }
.dr-paragraph mark { background: #f5dda0; color: #271a2c; }
.dr-export-panel h2 { color: #f4e4ff; font-size: 22px; margin: 0 0 9px; }
.dr-export-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin: 20px 0; }
.dr-export-card { border: 1px solid #6d4b7e; background: #2b1b38; border-radius: 12px; padding: 18px; }
.dr-export-card h3 { font-size: 16px; color: #ecd6ff; margin: 0 0 9px; }
.dr-export-card p { font-size: 12px; color: #c8b4d7; margin: 9px 0 14px; }
.dr-image-thumb { display: block; width: 100%; object-fit: contain; max-height: 200px; background: #1a1024; border: 1px solid #76528a; border-radius: 10px; padding: 10px; margin: 12px 0; }
.dr-more { margin-top: 14px; width: 100%; }
.dr-scope { margin: 20px 0 8px; padding: 17px 20px; border: 1px solid #624575; border-radius: 12px; color: #d0bbdf; background: #24182f; font-size: 12px; }
.dr-page dialog { max-width: min(520px,92vw); padding: 25px; color: #f7e9ff; background: #2c1b3b; border: 1px solid #bc8cdb; border-radius: 16px; }
.dr-page dialog::backdrop { background: #080510bd; }
.dr-page dialog h2 { font-size: 23px; color: #f5e4ff; margin: 0 0 14px; }
.dr-drag { outline: 4px solid #d9b1f3; outline-offset: 3px; }
.dr-notice { padding: 11px 15px; background: #492733; color: #ffe0d5; border-bottom: 1px solid #bc8292; font-size: 12px; }
.dr-workspace:fullscreen, .dr-workspace.dr-focus { width: 100vw; height: 100dvh; min-height: 0; max-height: 100dvh; border-radius: 0; background: #190f24; }
.dr-workspace.dr-focus { position: fixed; inset: 0; z-index: 999999; }
.dr-workspace::backdrop { background: #160e20; }
body.dr-focus-lock { overflow: hidden; }
@media(max-width:1200px) {
  .dr-body { grid-template-columns: 175px minmax(0,1fr) 260px; }
  .dr-toolbar { gap: 8px; }
  .dr-record-top { flex-direction: column; gap: 7px; }
  .dr-badge { max-width: 100%; text-align: left; }
  .dr-preview-grid { grid-template-columns: 1fr; }
}
@media(min-width:901px) { .dr-viewbar > [data-dr="files-toggle"] { display: none; } }
@media(max-width:900px) {
  .dr-hero { grid-template-columns: 1fr; padding: 24px; }
  .dr-art { display: none; }
  .dr-body { grid-template-columns: minmax(0,1fr); }
  .dr-nav,.dr-inspector { display: none; }
  .dr-workspace.dr-files-open .dr-nav,.dr-workspace.dr-inspector-open .dr-inspector { display: block; position: absolute; top: 0; bottom: 0; z-index: 10; width: min(88%,360px); box-shadow: 0 0 35px #000b; }
  .dr-workspace.dr-files-open .dr-nav { left: 0; }
  .dr-workspace.dr-inspector-open .dr-inspector { right: 0; }
  .dr-panel-close { display: inline-flex !important; min-height: 30px !important; padding: 4px 8px !important; }
  .dr-page :is(input:not([type=checkbox]),select,textarea) { font-size: 16px; }
  .dr-workspace { height: 780px; min-height: 600px; }
  .dr-toolbar,.dr-viewbar { padding: 10px; }
  .dr-preview-grid { grid-template-columns: 1fr; }
  .dr-part { max-width: 145px !important; }
}
@media(max-width:520px) {
  .dr-hero { padding: 20px; }
  .dr-toolbar { justify-content: flex-start; }
  .dr-toolbar button,.dr-file { font-size: 10px; min-height: 35px; padding: 7px 9px; }
  .dr-tabs { order: -1; flex-basis: 100%; }
  .dr-tabs button { flex: 1; min-width: 0; }
  .dr-metrics { padding: 10px; gap: 7px; }
  .dr-metrics > div { padding: 8px; }
  .dr-metrics strong { font-size: 20px; }
  .dr-review-controls { padding: 7px 10px; }
  .dr-content { padding: 10px; }
  .dr-export-grid { grid-template-columns: 1fr; }
  .dr-footer { align-items: flex-start; flex-direction: column; gap: 4px; padding: 9px 12px; }
  .dr-footer small { white-space: normal; }
  .dr-search-row select { max-width: 136px; }
  .dr-inspector h3 { padding-right: 20px; }
}