/* ============================================================
   LTE_DOC_CLEANER_V1.css  —  v2.0
   Design System: "Classified Documents"
   Aesthetic: Precision-instrument meets editorial archive
   Doc-type theming: each type gets its own color identity
   ============================================================ */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@600;700&display=swap');

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — BASE
   ════════════════════════════════════════════════════════════ */
:root {
  /* ── Surface ─────────────────────────────────────────────── */
  --dc-bg:            #f5f6f8;
  --dc-bg-deep:       #eceef2;
  --dc-surface:       #ffffff;
  --dc-surface-2:     #f9fafb;
  --dc-border:        #e4e7ed;
  --dc-border-light:  #eef0f4;

  /* ── Text ────────────────────────────────────────────────── */
  --dc-text:          #111827;
  --dc-text-2:        #374151;
  --dc-subtext:       #6b7280;
  --dc-muted:         #9ca3af;
  --dc-inverse:       #ffffff;

  /* ── Primary (Blue — neutral, not doc-specific) ──────────── */
  --dc-primary:       #2563eb;
  --dc-primary-hover: #1d4ed8;
  --dc-primary-soft:  #eff6ff;
  --dc-primary-glow:  rgba(37,99,235,.15);

  /* ── Semantic ────────────────────────────────────────────── */
  --dc-green:         #16a34a;
  --dc-green-soft:    #f0fdf4;
  --dc-red:           #dc2626;
  --dc-red-soft:      #fef2f2;
  --dc-yellow:        #d97706;
  --dc-yellow-soft:   #fffbeb;

  /* ── Typography ──────────────────────────────────────────── */
  --dc-font-sans:     'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --dc-font-cond:     'IBM Plex Sans Condensed', sans-serif;
  --dc-mono:          'IBM Plex Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Radii ───────────────────────────────────────────────── */
  --dc-radius-xs:     4px;
  --dc-radius-sm:     8px;
  --dc-radius:        12px;
  --dc-radius-lg:     16px;
  --dc-radius-pill:   999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --dc-shadow-xs:     0 1px 2px rgba(0,0,0,.05);
  --dc-shadow:        0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --dc-shadow-md:     0 4px 16px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.06);
  --dc-shadow-lg:     0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

  /* ── Motion ──────────────────────────────────────────────── */
  --dc-ease:          cubic-bezier(.4,0,.2,1);
  --dc-ease-out:      cubic-bezier(0,0,.2,1);
  --dc-ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --dc-dur-fast:      .15s;
  --dc-dur:           .22s;
  --dc-dur-slow:      .35s;

  /* ── Layout ──────────────────────────────────────────────── */
  --dc-sidebar-w:     300px;
  --dc-gap:           20px;

  /* ── Active Doc Type accent (overridden by JS / chip class) ─ */
  --dc-accent:        #2563eb;
  --dc-accent-soft:   #eff6ff;
  --dc-accent-border: #bfdbfe;
  --dc-accent-text:   #1e40af;
}

/* ════════════════════════════════════════════════════════════
   DOC-TYPE DESIGN TOKENS
   Each document type has its own named palette.
   Usage: wrap .dc-main (or .dc-layout) with [data-doc-type="X"]
   to shift the entire panel's accent colour.
   ════════════════════════════════════════════════════════════ */

/* ── INVOICE — warm amber ────────────────────────────────────── */
[data-doc-type="INVOICE"] {
  --dc-accent:        #d97706;
  --dc-accent-soft:   #fffbeb;
  --dc-accent-border: #fde68a;
  --dc-accent-text:   #92400e;
  --dc-accent-glow:   rgba(217,119,6,.12);
}

/* ── CATHAYBK_EXP — rose / credit-card pink ──────────────────── */
[data-doc-type="CATHAYBK_EXP"] {
  --dc-accent:        #e11d48;
  --dc-accent-soft:   #fff1f2;
  --dc-accent-border: #fecdd3;
  --dc-accent-text:   #9f1239;
  --dc-accent-glow:   rgba(225,29,72,.12);
}

/* ── MBL — ocean blue ────────────────────────────────────────── */
[data-doc-type="MBL"] {
  --dc-accent:        #0284c7;
  --dc-accent-soft:   #f0f9ff;
  --dc-accent-border: #bae6fd;
  --dc-accent-text:   #0c4a6e;
  --dc-accent-glow:   rgba(2,132,199,.12);
}

/* ── HBL — indigo / house bill ───────────────────────────────── */
[data-doc-type="HBL"] {
  --dc-accent:        #4f46e5;
  --dc-accent-soft:   #eef2ff;
  --dc-accent-border: #c7d2fe;
  --dc-accent-text:   #312e81;
  --dc-accent-glow:   rgba(79,70,229,.12);
}

/* ── CREDIT_NOTE — emerald ───────────────────────────────────── */
[data-doc-type="CREDIT_NOTE"] {
  --dc-accent:        #059669;
  --dc-accent-soft:   #ecfdf5;
  --dc-accent-border: #a7f3d0;
  --dc-accent-text:   #064e3b;
  --dc-accent-glow:   rgba(5,150,105,.12);
}

/* ── POD — magenta ───────────────────────────────────────────── */
[data-doc-type="POD"] {
  --dc-accent:        #c026d3;
  --dc-accent-soft:   #fdf4ff;
  --dc-accent-border: #e9d5ff;
  --dc-accent-text:   #701a75;
  --dc-accent-glow:   rgba(192,38,211,.12);
}

/* ── PACKING_LIST — teal ─────────────────────────────────────── */
[data-doc-type="PACKING_LIST"] {
  --dc-accent:        #0d9488;
  --dc-accent-soft:   #f0fdfa;
  --dc-accent-border: #99f6e4;
  --dc-accent-text:   #134e4a;
  --dc-accent-glow:   rgba(13,148,136,.12);
}

/* ── CUSTOMS — orange ────────────────────────────────────────── */
[data-doc-type="CUSTOMS"] {
  --dc-accent:        #ea580c;
  --dc-accent-soft:   #fff7ed;
  --dc-accent-border: #fed7aa;
  --dc-accent-text:   #7c2d12;
  --dc-accent-glow:   rgba(234,88,12,.12);
}

/* ── PURCHASE_ORDER — slate ──────────────────────────────────── */
[data-doc-type="PURCHASE_ORDER"] {
  --dc-accent:        #475569;
  --dc-accent-soft:   #f8fafc;
  --dc-accent-border: #cbd5e1;
  --dc-accent-text:   #1e293b;
  --dc-accent-glow:   rgba(71,85,105,.10);
}

/* ── CONTRACT — violet ───────────────────────────────────────── */
[data-doc-type="CONTRACT"] {
  --dc-accent:        #7c3aed;
  --dc-accent-soft:   #f5f3ff;
  --dc-accent-border: #ddd6fe;
  --dc-accent-text:   #4c1d95;
  --dc-accent-glow:   rgba(124,58,237,.12);
}

/* ── BANK_TXN_CHASE — Chase blue ────────────────────────────── */
[data-doc-type="BANK_TXN_CHASE"] {
  --dc-accent:        #117aca;
  --dc-accent-soft:   #eff6ff;
  --dc-accent-border: #93c5fd;
  --dc-accent-text:   #1e3a5f;
  --dc-accent-glow:   rgba(17,122,202,.12);
}

/* ── BANK_TXN_CITI — Citi blue/gold ─────────────────────────── */
[data-doc-type="BANK_TXN_CITI"] {
  --dc-accent:        #003b70;
  --dc-accent-soft:   #f0f4fa;
  --dc-accent-border: #93aec8;
  --dc-accent-text:   #002147;
  --dc-accent-glow:   rgba(0,59,112,.12);
}

/* ── BANK_TXN_CATHAYBK — Cathay red ─────────────────────────── */
[data-doc-type="BANK_TXN_CATHAYBK"] {
  --dc-accent:        #c8102e;
  --dc-accent-soft:   #fff1f2;
  --dc-accent-border: #fca5a5;
  --dc-accent-text:   #7f1d1d;
  --dc-accent-glow:   rgba(200,16,46,.12);
}

/* ── BANK_TXN — generic green ────────────────────────────────── */
[data-doc-type="BANK_TXN"] {
  --dc-accent:        #0f766e;
  --dc-accent-soft:   #f0fdfa;
  --dc-accent-border: #99f6e4;
  --dc-accent-text:   #134e4a;
  --dc-accent-glow:   rgba(15,118,110,.12);
}

/* ── EMAIL — neutral slate ───────────────────────────────────── */
[data-doc-type="EMAIL"] {
  --dc-accent:        #4f46e5;
  --dc-accent-soft:   #eef2ff;
  --dc-accent-border: #c7d2fe;
  --dc-accent-text:   #312e81;
  --dc-accent-glow:   rgba(79,70,229,.12);
}

/* ── RECEIPT — lime ──────────────────────────────────────────── */
[data-doc-type="RECEIPT"] {
  --dc-accent:        #65a30d;
  --dc-accent-soft:   #f7fee7;
  --dc-accent-border: #d9f99d;
  --dc-accent-text:   #365314;
  --dc-accent-glow:   rgba(101,163,13,.12);
}

/* ── OTHER — neutral ─────────────────────────────────────────── */
[data-doc-type="OTHER"],
:root {
  --dc-accent-glow:         rgba(37,99,235,.10);
  --dc-upload-zone-bg:      var(--dc-bg);
  --dc-upload-zone-hover-bg: var(--dc-accent-soft);
}


/* ════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════ */
body.dark-mode {
  --dc-bg:            #0d0f14;
  --dc-bg-deep:       #090b0f;
  --dc-surface:       #161920;
  --dc-surface-2:     #1c1f28;
  --dc-border:        #252932;
  --dc-border-light:  #1e2230;
  --dc-text:          #f1f3f8;
  --dc-text-2:        #d1d5e0;
  --dc-subtext:       #8b92a4;
  --dc-muted:         #4a5068;
  --dc-shadow:        0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --dc-shadow-md:     0 4px 16px rgba(0,0,0,.45);
  --dc-shadow-lg:     0 12px 40px rgba(0,0,0,.55);
  --dc-primary-soft:  rgba(37,99,235,.12);
}

/* Dark-mode base: upload zone is colourless by default */
body.dark-mode {
  --dc-upload-zone-bg:       transparent;
  --dc-upload-zone-hover-bg: rgba(255,255,255,.03);
}

/* Dark-mode doc-type overrides — accent-soft for surfaces, hover gets a whisper of colour */
body.dark-mode [data-doc-type="INVOICE"]         { --dc-accent-soft: rgba(217,119,6,.10);  --dc-upload-zone-hover-bg: rgba(217,119,6,.07);  }
body.dark-mode [data-doc-type="CATHAYBK_EXP"]    { --dc-accent-soft: rgba(225,29,72,.10);  --dc-upload-zone-hover-bg: rgba(225,29,72,.07);  }
body.dark-mode [data-doc-type="MBL"]             { --dc-accent-soft: rgba(2,132,199,.10);  --dc-upload-zone-hover-bg: rgba(2,132,199,.07);  }
body.dark-mode [data-doc-type="HBL"]             { --dc-accent-soft: rgba(79,70,229,.10);  --dc-upload-zone-hover-bg: rgba(79,70,229,.07);  }
body.dark-mode [data-doc-type="CREDIT_NOTE"]     { --dc-accent-soft: rgba(5,150,105,.10);  --dc-upload-zone-hover-bg: rgba(5,150,105,.07);  }
body.dark-mode [data-doc-type="POD"]             { --dc-accent-soft: rgba(192,38,211,.10); --dc-upload-zone-hover-bg: rgba(192,38,211,.07); }
body.dark-mode [data-doc-type="PACKING_LIST"]    { --dc-accent-soft: rgba(13,148,136,.10); --dc-upload-zone-hover-bg: rgba(13,148,136,.07); }
body.dark-mode [data-doc-type="CUSTOMS"]         { --dc-accent-soft: rgba(234,88,12,.10);  --dc-upload-zone-hover-bg: rgba(234,88,12,.07);  }
body.dark-mode [data-doc-type="PURCHASE_ORDER"]  { --dc-accent-soft: rgba(71,85,105,.08);  --dc-upload-zone-hover-bg: rgba(71,85,105,.06);  }
body.dark-mode [data-doc-type="CONTRACT"]        { --dc-accent-soft: rgba(124,58,237,.10); --dc-upload-zone-hover-bg: rgba(124,58,237,.07); }
body.dark-mode [data-doc-type="RECEIPT"]         { --dc-accent-soft: rgba(101,163,13,.10); --dc-upload-zone-hover-bg: rgba(101,163,13,.07); }


/* ════════════════════════════════════════════════════════════
   RESET / BASE
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--dc-font-sans);
  font-size: 14px;
  color: var(--dc-text);
  background: var(--dc-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dc-dur) var(--dc-ease),
              color      var(--dc-dur) var(--dc-ease);
}


/* ════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════ */
.dc-layout {
  display: grid;
  grid-template-columns: var(--dc-sidebar-w) 1fr;
  gap: var(--dc-gap);
  align-items: start;
  min-height: calc(100vh - 120px);
}


/* ════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════ */
.dc-sidebar {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 20px;
  box-shadow: var(--dc-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 16px;
  transition: background var(--dc-dur) var(--dc-ease),
              border-color var(--dc-dur) var(--dc-ease),
              box-shadow   var(--dc-dur) var(--dc-ease);
  overflow: hidden;
}

/* Subtle top accent strip */
.dc-sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dc-primary) 0%, #818cf8 100%);
  border-radius: var(--dc-radius-lg) var(--dc-radius-lg) 0 0;
  transition: background var(--dc-dur-slow) var(--dc-ease);
}

[data-doc-type="INVOICE"]        .dc-sidebar::before { background: linear-gradient(90deg,#d97706,#f59e0b); }
[data-doc-type="CATHAYBK_EXP"]   .dc-sidebar::before { background: linear-gradient(90deg,#e11d48,#f43f5e); }
[data-doc-type="MBL"]            .dc-sidebar::before { background: linear-gradient(90deg,#0284c7,#38bdf8); }
[data-doc-type="HBL"]            .dc-sidebar::before { background: linear-gradient(90deg,#4f46e5,#818cf8); }
[data-doc-type="CREDIT_NOTE"]    .dc-sidebar::before { background: linear-gradient(90deg,#059669,#34d399); }
[data-doc-type="POD"]            .dc-sidebar::before { background: linear-gradient(90deg,#c026d3,#e879f9); }
[data-doc-type="PACKING_LIST"]   .dc-sidebar::before { background: linear-gradient(90deg,#0d9488,#2dd4bf); }
[data-doc-type="CUSTOMS"]        .dc-sidebar::before { background: linear-gradient(90deg,#ea580c,#fb923c); }
[data-doc-type="PURCHASE_ORDER"] .dc-sidebar::before { background: linear-gradient(90deg,#475569,#94a3b8); }
[data-doc-type="CONTRACT"]       .dc-sidebar::before { background: linear-gradient(90deg,#7c3aed,#a78bfa); }
[data-doc-type="RECEIPT"]        .dc-sidebar::before { background: linear-gradient(90deg,#65a30d,#a3e635); }


/* ════════════════════════════════════════════════════════════
   UPLOAD ZONE
   ════════════════════════════════════════════════════════════ */
.dc-upload-zone {
  border: 2px dashed var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--dc-dur) var(--dc-ease),
    background   var(--dc-dur) var(--dc-ease),
    box-shadow   var(--dc-dur) var(--dc-ease),
    transform    var(--dc-dur) var(--dc-ease-spring);
  background: var(--dc-upload-zone-bg, var(--dc-bg));
  position: relative;
  overflow: hidden;
}

.dc-upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.dc-upload-zone:hover {
  border-color: var(--dc-accent);
  background: var(--dc-upload-zone-hover-bg, var(--dc-accent-soft));
  transform: translateY(-1px);
}

.dc-upload-zone.drag-over {
  border-color: var(--dc-accent);
  background: var(--dc-upload-zone-hover-bg, var(--dc-accent-soft));
  transform: scale(1.01);
  box-shadow: 0 0 0 4px var(--dc-accent-glow, rgba(37,99,235,.12));
}

.dc-upload-icon {
  font-size: 32px;
  color: var(--dc-accent);
  margin-bottom: 10px;
  transition: color var(--dc-dur) var(--dc-ease),
              transform var(--dc-dur-slow) var(--dc-ease-spring);
}

.dc-upload-zone:hover .dc-upload-icon {
  transform: translateY(-3px) scale(1.08);
}

.dc-upload-zone p {
  font-size: 13px;
  color: var(--dc-subtext);
  line-height: 1.5;
}

.dc-upload-zone strong {
  color: var(--dc-text);
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

/* ── Type Pills ─────────────────────────────────────────────── */
.dc-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 12px;
}

.dc-pill {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-pill);
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 600;
  color: var(--dc-subtext);
  font-family: var(--dc-mono);
  letter-spacing: .5px;
  transition: border-color var(--dc-dur) var(--dc-ease),
              color         var(--dc-dur) var(--dc-ease),
              background    var(--dc-dur) var(--dc-ease);
}

.dc-upload-zone:hover .dc-pill {
  border-color: var(--dc-accent-border);
  color: var(--dc-accent-text);
  background: var(--dc-upload-zone-hover-bg, var(--dc-accent-soft));
}


/* ════════════════════════════════════════════════════════════
   SECTION LABEL
   ════════════════════════════════════════════════════════════ */
.dc-section-label {
  font-family: var(--dc-font-cond);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--dc-muted);
  margin: 12px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dc-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--dc-border);
}


/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--dc-radius-sm);
  border: 1px solid transparent;
  font-family: var(--dc-font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background    var(--dc-dur-fast) var(--dc-ease),
    border-color  var(--dc-dur-fast) var(--dc-ease),
    color         var(--dc-dur-fast) var(--dc-ease),
    opacity       var(--dc-dur-fast) var(--dc-ease),
    box-shadow    var(--dc-dur)      var(--dc-ease),
    transform     var(--dc-dur-fast) var(--dc-ease-spring);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  letter-spacing: .1px;
  position: relative;
  overflow: hidden;
}

.dc-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.0);
  transition: background var(--dc-dur-fast) var(--dc-ease);
}

.dc-btn:active::after { background: rgba(0,0,0,.06); }

.dc-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}

/* Primary */
.dc-btn-primary {
  background: var(--dc-accent);
  color: #fff;
  border-color: var(--dc-accent);
  width: 100%;
  font-size: 13.5px;
  letter-spacing: .2px;
}

.dc-btn-primary:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--dc-accent-glow, rgba(37,99,235,.25));
}

.dc-btn-primary:not(:disabled):active {
  transform: translateY(0);
  filter: brightness(.95);
}

/* Ghost */
.dc-btn-ghost {
  background: transparent;
  color: var(--dc-subtext);
  border-color: var(--dc-border);
  font-size: 12.5px;
}

.dc-btn-ghost:hover {
  background: var(--dc-bg);
  color: var(--dc-text);
  border-color: var(--dc-text-2);
}

.dc-btn-ghost:active {
  transform: scale(.98);
}


/* ════════════════════════════════════════════════════════════
   FIELD
   ════════════════════════════════════════════════════════════ */
.dc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dc-field label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--dc-muted);
  font-family: var(--dc-font-cond);
}

.dc-field input[type="text"] {
  background: var(--dc-surface-2);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--dc-text);
  width: 100%;
  transition:
    border-color var(--dc-dur-fast) var(--dc-ease),
    background   var(--dc-dur-fast) var(--dc-ease),
    box-shadow   var(--dc-dur-fast) var(--dc-ease);
  outline: none;
  font-family: var(--dc-font-sans);
}

.dc-field input[type="text"]:focus {
  border-color: var(--dc-accent);
  background: var(--dc-surface);
  box-shadow: 0 0 0 3px var(--dc-accent-glow, rgba(37,99,235,.12));
}

.dc-field input.mono {
  font-family: var(--dc-mono);
  font-size: 12px;
}

/* ── Fields Grid ────────────────────────────────────────────── */
.dc-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}


/* ════════════════════════════════════════════════════════════
   MAIN PANEL
   ════════════════════════════════════════════════════════════ */
.dc-main {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 24px 28px;
  box-shadow: var(--dc-shadow);
  min-height: 400px;
  transition:
    background    var(--dc-dur) var(--dc-ease),
    border-color  var(--dc-dur) var(--dc-ease),
    box-shadow    var(--dc-dur) var(--dc-ease);
  overflow: hidden;
  position: relative;
}

/* Accent left border — shifts with doc type */
.dc-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--dc-accent);
  border-radius: var(--dc-radius-lg) 0 0 var(--dc-radius-lg);
  opacity: 0;
  transition: opacity var(--dc-dur-slow) var(--dc-ease),
              background var(--dc-dur-slow) var(--dc-ease);
}

/* Show the accent strip once a doc type is active */
.dc-main[data-active="true"]::before,
[data-doc-type]:not([data-doc-type="OTHER"]) .dc-main::before {
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.dc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 340px;
  color: var(--dc-muted);
  text-align: center;
}

.dc-empty-icon {
  font-size: 52px;
  opacity: .25;
  animation: dc-float 4s var(--dc-ease) infinite alternate;
}

@keyframes dc-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

.dc-empty p {
  font-size: 13.5px;
  max-width: 280px;
  line-height: 1.65;
  color: var(--dc-subtext);
}

/* ── Loader ─────────────────────────────────────────────────── */
.dc-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 340px;
  color: var(--dc-subtext);
}

.dc-loader p {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3px;
  animation: dc-pulse 1.4s var(--dc-ease) infinite;
}

@keyframes dc-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .45; }
}

.dc-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--dc-border);
  border-top-color: var(--dc-accent);
  border-radius: 50%;
  animation: dc-spin .75s linear infinite;
  transition: border-top-color var(--dc-dur-slow) var(--dc-ease);
}

@keyframes dc-spin {
  to { transform: rotate(360deg); }
}


/* ════════════════════════════════════════════════════════════
   CONFIRM HEADER
   ════════════════════════════════════════════════════════════ */
.dc-confirm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dc-border);
  animation: dc-fade-in var(--dc-dur-slow) var(--dc-ease-out) both;
}

@keyframes dc-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dc-confirm-title {
  font-family: var(--dc-font-cond);
  font-size: 18px;
  font-weight: 700;
  color: var(--dc-text);
  margin-bottom: 4px;
  letter-spacing: -.1px;
}

.dc-confirm-file {
  font-size: 11.5px;
  color: var(--dc-subtext);
  font-family: var(--dc-mono);
  word-break: break-all;
  max-width: 380px;
}

.dc-confirm-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}


/* ════════════════════════════════════════════════════════════
   DOC TYPE CHIP  — v2 with icon + colour system
   ════════════════════════════════════════════════════════════ */
.dc-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px 4px 8px;
  border-radius: var(--dc-radius-pill);
  font-family: var(--dc-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  border: 1.5px solid transparent;
  transition:
    background   var(--dc-dur) var(--dc-ease),
    border-color var(--dc-dur) var(--dc-ease),
    color        var(--dc-dur) var(--dc-ease),
    box-shadow   var(--dc-dur) var(--dc-ease);
  cursor: default;
  white-space: nowrap;
}

/* Dot indicator */
.dc-doc-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}

/* ── Per-type chip colours ────────────────────────────────── */
.dc-doc-chip.INVOICE {
  background: #fffbeb; color: #92400e; border-color: #fde68a;
}
.dc-doc-chip.CATHAYBK_EXP {
  background: #fff1f2; color: #9f1239; border-color: #fecdd3;
}
.dc-doc-chip.MBL {
  background: #f0f9ff; color: #0c4a6e; border-color: #bae6fd;
}
.dc-doc-chip.HBL {
  background: #eef2ff; color: #312e81; border-color: #c7d2fe;
}
.dc-doc-chip.CREDIT_NOTE {
  background: #ecfdf5; color: #064e3b; border-color: #a7f3d0;
}
.dc-doc-chip.POD {
  background: #fdf4ff; color: #701a75; border-color: #e9d5ff;
}
.dc-doc-chip.PACKING_LIST {
  background: #f0fdfa; color: #134e4a; border-color: #99f6e4;
}
.dc-doc-chip.CUSTOMS {
  background: #fff7ed; color: #7c2d12; border-color: #fed7aa;
}
.dc-doc-chip.PURCHASE_ORDER {
  background: #f8fafc; color: #1e293b; border-color: #cbd5e1;
}
.dc-doc-chip.CONTRACT {
  background: #f5f3ff; color: #4c1d95; border-color: #ddd6fe;
}
.dc-doc-chip.RECEIPT {
  background: #f7fee7; color: #365314; border-color: #d9f99d;
}
.dc-doc-chip.OTHER {
  background: #f3f4f6; color: #374151; border-color: #e5e7eb;
}
/* ── EML sub-types ──────────────────────────────────────────── */
.dc-doc-chip.BANK_TXN_CHASE {
  background: #eff6ff; color: #1e3a5f; border-color: #93c5fd;
}
.dc-doc-chip.BANK_TXN_CITI {
  background: #f0f4fa; color: #002147; border-color: #93aec8;
}
.dc-doc-chip.BANK_TXN_CATHAYBK {
  background: #fff1f2; color: #7f1d1d; border-color: #fca5a5;
}
.dc-doc-chip.BANK_TXN {
  background: #f0fdfa; color: #134e4a; border-color: #99f6e4;
}
.dc-doc-chip.EMAIL {
  background: #eef2ff; color: #312e81; border-color: #c7d2fe;
}

/* Dark-mode chips */
body.dark-mode .dc-doc-chip.INVOICE      { background:#451a03; color:#fde68a; border-color:#78350f; }
body.dark-mode .dc-doc-chip.CATHAYBK_EXP { background:#4c0519; color:#fda4af; border-color:#9f1239; }
body.dark-mode .dc-doc-chip.MBL          { background:#082f49; color:#7dd3fc; border-color:#0369a1; }
body.dark-mode .dc-doc-chip.HBL          { background:#1e1b4b; color:#a5b4fc; border-color:#3730a3; }
body.dark-mode .dc-doc-chip.CREDIT_NOTE  { background:#052e16; color:#86efac; border-color:#14532d; }
body.dark-mode .dc-doc-chip.POD          { background:#3b0764; color:#e879f9; border-color:#6b21a8; }
body.dark-mode .dc-doc-chip.PACKING_LIST { background:#042f2e; color:#5eead4; border-color:#0f766e; }
body.dark-mode .dc-doc-chip.CUSTOMS      { background:#431407; color:#fdba74; border-color:#9a3412; }
body.dark-mode .dc-doc-chip.PURCHASE_ORDER{ background:#1e293b; color:#94a3b8; border-color:#334155; }
body.dark-mode .dc-doc-chip.CONTRACT     { background:#2e1065; color:#c4b5fd; border-color:#5b21b6; }
body.dark-mode .dc-doc-chip.RECEIPT           { background:#1a2e05; color:#bef264; border-color:#365314; }
body.dark-mode .dc-doc-chip.OTHER             { background:#1f2937; color:#9ca3af; border-color:#374151; }
body.dark-mode .dc-doc-chip.BANK_TXN_CHASE    { background:#0c1e30; color:#7dd3fc; border-color:#0369a1; }
body.dark-mode .dc-doc-chip.BANK_TXN_CITI     { background:#071525; color:#93aec8; border-color:#1e3a5f; }
body.dark-mode .dc-doc-chip.BANK_TXN_CATHAYBK { background:#2d0a0f; color:#fca5a5; border-color:#7f1d1d; }
body.dark-mode .dc-doc-chip.BANK_TXN          { background:#042f2e; color:#5eead4; border-color:#0f766e; }
body.dark-mode .dc-doc-chip.EMAIL             { background:#1e1b4b; color:#a5b4fc; border-color:#3730a3; }
/* ── Dark-mode EML soft backgrounds ──────────────────────── */
body.dark-mode [data-doc-type="BANK_TXN_CHASE"]    { --dc-accent-soft: rgba(17,122,202,.10);  --dc-upload-zone-hover-bg: rgba(17,122,202,.07);  }
body.dark-mode [data-doc-type="BANK_TXN_CITI"]     { --dc-accent-soft: rgba(0,59,112,.12);    --dc-upload-zone-hover-bg: rgba(0,59,112,.07);    }
body.dark-mode [data-doc-type="BANK_TXN_CATHAYBK"] { --dc-accent-soft: rgba(200,16,46,.10);   --dc-upload-zone-hover-bg: rgba(200,16,46,.07);   }
body.dark-mode [data-doc-type="BANK_TXN"]          { --dc-accent-soft: rgba(15,118,110,.10);  --dc-upload-zone-hover-bg: rgba(15,118,110,.07);  }
body.dark-mode [data-doc-type="EMAIL"]             { --dc-accent-soft: rgba(79,70,229,.10);   --dc-upload-zone-hover-bg: rgba(79,70,229,.07);   }


/* ════════════════════════════════════════════════════════════
   ALERT
   ════════════════════════════════════════════════════════════ */
.dc-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--dc-radius-sm);
  font-size: 13px;
  line-height: 1.55;
  animation: dc-fade-in var(--dc-dur-slow) var(--dc-ease-out) both;
}

.dc-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

body.dark-mode .dc-alert-error {
  background: rgba(185,28,28,.1);
  border-color: rgba(185,28,28,.3);
  color: #fca5a5;
}


/* ════════════════════════════════════════════════════════════
   TABLE SYSTEM
   ════════════════════════════════════════════════════════════ */
.dc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  margin-bottom: 18px;
  transition: border-color var(--dc-dur) var(--dc-ease);
  box-shadow: var(--dc-shadow-xs);
}

/* Accent-coloured top border on table header */
.dc-table-wrap::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--dc-accent);
  transition: background var(--dc-dur-slow) var(--dc-ease);
}

.dc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 480px;
  font-family: var(--dc-font-sans);
}

.dc-table th {
  background: var(--dc-surface-2);
  color: var(--dc-muted);
  font-family: var(--dc-font-cond);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--dc-border);
  white-space: nowrap;
  transition: background var(--dc-dur) var(--dc-ease);
}

.dc-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--dc-border-light);
  color: var(--dc-text-2);
  vertical-align: middle;
  transition: background var(--dc-dur-fast) var(--dc-ease);
}

.dc-table tr:last-child td { border-bottom: none; }

.dc-table tbody tr {
  transition: background var(--dc-dur-fast) var(--dc-ease);
}

.dc-table tbody tr:hover td {
  background: var(--dc-accent-soft);
}

.dc-table tfoot td {
  border-top: 2px solid var(--dc-accent-border);
  font-weight: 700;
  color: var(--dc-text);
  background: var(--dc-accent-soft);
  font-family: var(--dc-mono);
  font-size: 12px;
  transition: background var(--dc-dur-slow) var(--dc-ease),
              border-color var(--dc-dur-slow) var(--dc-ease);
}

.dc-table .num {
  text-align: right;
  font-family: var(--dc-mono);
  font-size: 12.5px;
}

.dc-table .mono {
  font-family: var(--dc-mono);
  font-size: 12px;
}

/* ── Row animation (applied by JS via .dc-row-animate class) ── */
.dc-table tbody tr {
  animation: dc-row-in var(--dc-dur-slow) var(--dc-ease-out) both;
}
.dc-table tbody tr:nth-child(1)  { animation-delay:  .04s; }
.dc-table tbody tr:nth-child(2)  { animation-delay:  .07s; }
.dc-table tbody tr:nth-child(3)  { animation-delay:  .10s; }
.dc-table tbody tr:nth-child(4)  { animation-delay:  .13s; }
.dc-table tbody tr:nth-child(5)  { animation-delay:  .16s; }
.dc-table tbody tr:nth-child(6)  { animation-delay:  .19s; }
.dc-table tbody tr:nth-child(7)  { animation-delay:  .22s; }
.dc-table tbody tr:nth-child(8)  { animation-delay:  .25s; }
.dc-table tbody tr:nth-child(9)  { animation-delay:  .28s; }
.dc-table tbody tr:nth-child(n+10) { animation-delay: .30s; }

@keyframes dc-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ════════════════════════════════════════════════════════════
   MARKDOWN / PRE CODE
   ════════════════════════════════════════════════════════════ */
#mdContent {
  background: var(--dc-bg);
  border: 1px solid var(--dc-border);
  border-left: 3px solid var(--dc-accent);
  border-radius: var(--dc-radius-sm);
  padding: 16px 18px;
  font-family: var(--dc-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--dc-text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 520px;
  overflow-y: auto;
  transition:
    background    var(--dc-dur) var(--dc-ease),
    border-color  var(--dc-dur-slow) var(--dc-ease),
    border-left-color var(--dc-dur-slow) var(--dc-ease);
}


/* ════════════════════════════════════════════════════════════
   ARRAY DUMP
   ════════════════════════════════════════════════════════════ */
.dc-array-dump {
  background: #f4f6f9;
  color: #2d3748;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-sm);
  padding: 14px 18px;
  font-family: var(--dc-mono);
  font-size: 12px;
  line-height: 1.75;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  max-height: 380px;
  overflow-y: auto;
  transition:
    background   var(--dc-dur) var(--dc-ease),
    color        var(--dc-dur) var(--dc-ease),
    border-color var(--dc-dur) var(--dc-ease);
}

body.dark-mode .dc-array-dump {
  background: #0d1117;
  color: #7ee787;
  border-color: #2d3748;
}


/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
#dc-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #1a202c;
  color: #fff;
  padding: 10px 20px 10px 14px;
  border-radius: var(--dc-radius-pill);
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dc-dur) var(--dc-ease),
              transform var(--dc-dur) var(--dc-ease-spring);
  z-index: 9999;
  white-space: nowrap;
  box-shadow: var(--dc-shadow-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .1px;
}

#dc-toast::before {
  content: '✓';
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

#dc-toast.error::before { content: '✕'; }

#dc-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#dc-toast.success { background: #16a34a; }
#dc-toast.error   { background: #dc2626; }

body.dark-mode #dc-toast            { background: #e2e8f0; color: #1a202c; }
body.dark-mode #dc-toast.success    { background: #22c55e; color: #052e16; }
body.dark-mode #dc-toast.error      { background: #ef4444; color: #fff; }


/* ════════════════════════════════════════════════════════════
   SCROLLBARS
   ════════════════════════════════════════════════════════════ */
.dc-array-dump::-webkit-scrollbar,
#mdContent::-webkit-scrollbar,
.dc-table-wrap::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

.dc-array-dump::-webkit-scrollbar-track,
#mdContent::-webkit-scrollbar-track,
.dc-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.dc-array-dump::-webkit-scrollbar-thumb,
#mdContent::-webkit-scrollbar-thumb,
.dc-table-wrap::-webkit-scrollbar-thumb {
  background: var(--dc-border);
  border-radius: var(--dc-radius-pill);
}

.dc-array-dump::-webkit-scrollbar-thumb:hover,
#mdContent::-webkit-scrollbar-thumb:hover,
.dc-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--dc-muted);
}


/* ════════════════════════════════════════════════════════════
   DETAILS / SUMMARY
   ════════════════════════════════════════════════════════════ */
details > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--dc-subtext);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border-radius: var(--dc-radius-xs);
  transition: color var(--dc-dur-fast) var(--dc-ease);
}

details > summary::-webkit-details-marker { display: none; }

details > summary::before {
  content: '▶';
  font-size: 9px;
  transition: transform var(--dc-dur) var(--dc-ease-spring);
  color: var(--dc-muted);
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details > summary:hover {
  color: var(--dc-text);
}


/* ════════════════════════════════════════════════════════════
   SUMMARY CHIPS ROW
   ════════════════════════════════════════════════════════════ */
#cathaybkSummaryChips,
.dc-chips-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  animation: dc-fade-in var(--dc-dur-slow) var(--dc-ease-out) both;
  animation-delay: .08s;
}


/* ════════════════════════════════════════════════════════════
   RESULT BOX ANIMATION
   ════════════════════════════════════════════════════════════ */
#resultBox {
  animation: dc-fade-in var(--dc-dur-slow) var(--dc-ease-out) both;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* ── XL (≥1400px) ───────────────────────────────────────────── */
@media (min-width: 1400px) {
  :root { --dc-sidebar-w: 320px; }
  .dc-main { padding: 28px 36px; }
  .dc-fields-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ── LG (1024–1399px) ───────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1399px) {
  :root { --dc-sidebar-w: 270px; }
}

/* ── MD (768–1023px) ─────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --dc-sidebar-w: 230px; }

  .dc-layout { gap: 14px; }
  .dc-sidebar { padding: 16px; }
  .dc-upload-zone { padding: 20px 12px; }
  .dc-main { padding: 20px; }
  .dc-fields-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ── SM (below 768px): stack ─────────────────────────────────── */
@media (max-width: 767px) {
  .dc-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dc-sidebar {
    position: static;
    padding: 16px;
  }

  .dc-upload-zone { padding: 20px 14px; }
  .dc-upload-icon { font-size: 26px; }
  .dc-upload-zone p { font-size: 12px; }

  .dc-main { padding: 16px 18px; min-height: unset; }

  .dc-confirm-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .dc-confirm-actions { justify-content: flex-start; }
  .dc-btn-ghost { flex: 1; justify-content: center; }

  .dc-fields-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  #mdContent { font-size: 11.5px; max-height: 360px; }
  .dc-array-dump { font-size: 11px; max-height: 260px; }

  .dc-empty,
  .dc-loader { min-height: 200px; }

  #dc-toast {
    bottom: 16px;
    width: calc(100% - 32px);
    text-align: center;
    border-radius: 14px;
    white-space: normal;
    justify-content: center;
  }
}

/* ── XS (below 480px) ────────────────────────────────────────── */
@media (max-width: 479px) {
  .dc-sidebar { padding: 12px; gap: 12px; }
  .dc-main { padding: 12px 14px; }
  .dc-confirm-title { font-size: 16px; }

  .dc-fields-grid { grid-template-columns: 1fr; }

  .dc-confirm-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dc-confirm-actions .dc-btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .dc-type-pills { gap: 4px; }
  .dc-pill { font-size: 10px; padding: 2px 7px; }

  .dc-upload-zone { padding: 16px 10px; }
  .dc-upload-icon { font-size: 22px; margin-bottom: 6px; }
  .dc-section-label { font-size: 9px; }

  #mdContent { max-height: 280px; }
  .dc-array-dump { max-height: 200px; font-size: 10.5px; }

  .dc-table { min-width: 380px; }
  .dc-table th,
  .dc-table td { padding: 8px 10px; }
  .dc-btn { padding: 8px 12px; font-size: 12px; }
}

/* ── Touch ───────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .dc-btn { min-height: 44px; }
  .dc-upload-zone input[type="file"] { font-size: 16px; }
  .dc-doc-chip { padding: 5px 12px 5px 9px; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .dc-sidebar,
  .dc-confirm-actions,
  #dc-toast { display: none !important; }

  .dc-layout { grid-template-columns: 1fr; }

  .dc-main {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .dc-main::before { display: none; }

  #mdContent,
  .dc-array-dump {
    max-height: none;
    overflow: visible;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LTE_DOC_CLEANER_V1.css — MULTI-FILE ADDITIONS
   Append these rules to the existing LTE_DOC_CLEANER_V1.css file
   ══════════════════════════════════════════════════════════════════════════ */

/* Upload hint text */
.dc-upload-hint {
  font-size: 11px;
  color: var(--dc-muted);
  margin: -6px 0 4px;
}

/* ── File Queue ──────────────────────────────────────────────────────────── */
.dc-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--dc-subtext);
  margin: 12px 0 6px;
  padding: 0 2px;
}

.dc-btn-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--dc-muted);
  padding: 0;
  transition: color .15s;
}
.dc-btn-link:hover { color: var(--dc-accent); }

.dc-queue-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.dc-queue-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--dc-bg);
  border: 1px solid var(--dc-border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  transition: border-color .15s, background .15s;
}
.dc-queue-item.qi-processing {
  border-color: var(--dc-accent);
  background: color-mix(in srgb, var(--dc-accent) 6%, transparent);
}
.dc-queue-item.qi-done    { border-color: #81c784; }
.dc-queue-item.qi-error   { border-color: #e57373; background: color-mix(in srgb, #c62828 5%, transparent); }

.dc-queue-ext {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--dc-mono);
  background: var(--dc-border);
  color: var(--dc-subtext);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
  letter-spacing: .04em;
}

.dc-queue-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dc-text);
}

.dc-queue-status { flex-shrink: 0; font-size: 13px; }

.dc-queue-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dc-muted);
  font-size: 11px;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color .15s;
}
.dc-queue-remove:hover { color: #c62828; }

/* ── Overall Progress Bar ────────────────────────────────────────────────── */
.dc-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--dc-subtext);
  margin: 10px 0 4px;
}

.dc-progress-bar-wrap {
  height: 6px;
  background: var(--dc-border);
  border-radius: 99px;
  overflow: hidden;
}

.dc-progress-bar {
  height: 100%;
  background: var(--dc-accent);
  border-radius: 99px;
  transition: width .35s ease;
}

/* ── Result Cards ────────────────────────────────────────────────────────── */
.dc-result-card {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
  animation: dc-card-in .25s ease both;
}

.dc-result-card.dc-result-error {
  border-color: #e57373;
}

@keyframes dc-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Structured block spacing inside cards */
.dc-structured-block { margin-top: 16px; }
.dc-structured-block:empty { display: none; }

pre.dc-md-content,
#mdContent {
  background : var(--dc-bg, #f4f6f9);
  color      : var(--dc-text, #1a1a2e);
  border     : 1px solid var(--dc-border, #dde1e7);
  border-radius : 8px;
  padding    : 16px;
  font-family: var(--dc-mono, 'Courier New', monospace);
  font-size  : 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break : break-word;
  overflow-x : auto;
}
 
/* Dark mode override — AdminLTE adds .dark-mode on <body> */
body.dark-mode pre.dc-md-content,
body.dark-mode #mdContent {
  background : #1e2129;
  color      : #cdd6f4;
  border-color: #313244;
}
 
/* Also fix dc-array-dump pre in dark mode */
body.dark-mode pre.dc-array-dump {
  background : #1e2129;
  color      : #a6e3a1;
  border-color: #313244;
}