.bdt{
  --bg:#f5f5f2;--card:#fff;--text:#2C2C2A;--t2:#5F5E5A;--t3:#908F88;
  --border:#D3D1C7;--bl:#E8E6E0;
  --pass:#3B6D11;--pass-bg:#EAF3DE;--fail:#A32D2D;--fail-bg:#FCEBEB;
  --s1-bg:#E6F1FB;--s1-st:#185FA5;--s1-tx:#0C447C;--s1-lt:#85B7EB;
  --s2-bg:#EEEDFE;--s2-st:#534AB7;--s2-tx:#3C3489;--s2-lt:#AFA9EC;
  --s3-bg:#E1F5EE;--s3-st:#0F6E56;--s3-tx:#085041;--s3-lt:#5DCAA5;
  --s4-bg:#FAEEDA;--s4-st:#854F0B;--s4-tx:#633806;--s4-lt:#FAC775;
}
.bdt,.bdt *{margin:0;padding:0;box-sizing:border-box;}
.bdt{max-width:1400px;margin:0 auto;padding:16px 16px 40px;}
.bdt .header {text-align:center;margin-bottom:12px;}
.bdt .header h1 {font-size:20px;font-weight:800;}
.bdt .header p {font-size:11px;color:var(--t3);margin-top:4px;}
.bdt .brand-badge {
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(135deg,#2C2C2A,#5F5E5A);color:#fff;
  padding:2px 10px;border-radius:3px;margin-bottom:6px;
}

/* Main grid: 4 stage columns */
.bdt .stages {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;}

/* Stage column */
.bdt .col {display:flex;flex-direction:column;gap:4px;}
.bdt .col-header {
  padding:6px 10px;border-radius:6px;text-align:center;
}
.bdt .col-header .ch-name {font-size:12px;font-weight:800;}
.bdt .col-header .ch-desc {font-size:9px;opacity:0.7;margin-top:1px;}

/* Node card - compact */
.bdt .node {
  background:var(--card);border:1px solid var(--bl);border-radius:6px;
  padding:7px 9px;position:relative;scroll-margin-top:10px;
  transition:box-shadow .3s,transform .3s;
}
.bdt .node.gate {border-left:3px solid var(--t3);}
.bdt .node.step {border-left:3px solid var(--border);}
.bdt .node-top {display:flex;align-items:center;gap:5px;margin-bottom:3px;}
.bdt .node-id {font-size:13px;font-weight:800;}
.bdt .node-type {font-size:8px;padding:1px 5px;border-radius:2px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;}
.bdt .node-type.gate {background:#F1EFE8;color:var(--t2);}
.bdt .node-type.step {background:var(--bg);color:var(--t3);}
.bdt .node-q {flex:1;font-size:11px;font-weight:700;line-height:1.3;}
.bdt .node-cr {font-size:9px;color:var(--t2);line-height:1.35;margin-bottom:4px;}
.bdt .node-cr .clbl {font-weight:700;color:var(--t3);font-size:8px;text-transform:uppercase;letter-spacing:0.3px;}

/* Compact pass/fail */
.bdt .paths {display:flex;gap:4px;}
.bdt .path {flex:1;font-size:9px;padding:3px 5px;border-radius:3px;line-height:1.25;}
.bdt .path.pass {background:var(--pass-bg);color:var(--pass);}
.bdt .path.fail {background:var(--fail-bg);color:var(--fail);}
.bdt .path .pi {font-weight:800;margin-right:2px;}
.bdt .step-desc {font-size:9px;color:var(--t3);font-style:italic;}

/* Clickable nav links inside paths */
.bdt .nav-link {
  cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:2px;font-weight:700;
  transition:opacity .15s;
}
.bdt .nav-link:hover {opacity:0.6;}

/* Highlight animation when navigated to */
@keyframes pulse-highlight{
  0% {box-shadow:0 0 0 0 rgba(255,165,0,0.7);}
  50% {box-shadow:0 0 0 6px rgba(255,165,0,0.3);}
  100% {box-shadow:0 0 0 0 rgba(255,165,0,0);}
}
.bdt .node.highlighted {
  box-shadow:0 0 0 3px rgba(255,165,0,0.8),0 2px 12px rgba(255,165,0,0.3);
  transform:scale(1.02);
  z-index:10;
}
.bdt .node.pulsing {animation:pulse-highlight 1.2s ease-out 2;}

/* Connector arrow */
.bdt .conn {text-align:center;font-size:10px;color:var(--t3);line-height:1;padding:1px 0;}
.bdt .conn .arrow {color:var(--pass);font-weight:700;}

/* Stage output */
.bdt .s-out {
  padding:5px 8px;border-radius:5px;border:1px dashed;text-align:center;
}
.bdt .s-out .ol {font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;}
.bdt .s-out .oc {font-size:9px;font-weight:600;margin-top:1px;}

/* Diagnostic section */
.bdt .diag {margin-top:6px;}
.bdt .diag-title {text-align:center;font-size:13px;font-weight:800;margin-bottom:6px;}
.bdt .diag-title .sub {font-size:10px;color:var(--t3);font-weight:400;}

.bdt .diag-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.bdt .dg-item {
  border-radius:6px;padding:6px 8px;border:1px solid;text-align:center;
}
.bdt .dg-sym {font-size:11px;font-weight:800;margin-bottom:3px;}
.bdt .dg-arrow {font-size:10px;font-weight:700;margin-bottom:2px;}
.bdt .dg-tgt {font-size:9px;font-weight:700;margin-bottom:2px;}
.bdt .dg-fix {font-size:8px;opacity:0.75;line-height:1.25;}

/* Clickable in diagnostic */
.bdt .dg-arrow .nav-link, .bdt .dg-fix .nav-link {cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}
.bdt .dg-arrow .nav-link:hover, .bdt .dg-fix .nav-link:hover {opacity:0.6;}

/* Bottom note */
.bdt .bottom {
  margin-top:10px;text-align:center;padding:8px 12px;background:var(--card);
  border:1px solid var(--bl);border-radius:6px;
}
.bdt .bottom p {font-size:11px;font-weight:700;}
.bdt .bottom .sub {font-size:9px;color:var(--t3);margin-top:3px;font-weight:400;}

/* Legend */
.bdt .legend {display:flex;gap:12px;justify-content:center;margin-bottom:8px;flex-wrap:wrap;}
.bdt .li {display:flex;align-items:center;gap:4px;font-size:9px;color:var(--t3);}
.bdt .ld {width:10px;height:10px;border-radius:2px;}
.bdt .ll {width:16px;height:2px;border-radius:1px;}

/* Node clickable hint */
.bdt .node {cursor:pointer;}

/* Detail panel */
.bdt .detail-panel {
  margin-top:10px;background:var(--card);border:1px solid var(--bl);
  border-radius:8px;overflow:hidden;
}
.bdt .dp-header {
  padding:8px 12px;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:space-between;
}
.bdt .dp-close {
  cursor:pointer;font-size:16px;font-weight:400;opacity:0.5;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:4px;transition:opacity .15s,background .15s;
}
.bdt .dp-close:hover {opacity:1;background:rgba(0,0,0,0.06);}
.bdt .dp-body {padding:8px 12px 12px;}
.bdt .dp-hint {
  text-align:center;padding:20px;font-size:12px;color:var(--t3);
}
.bdt .dp-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.bdt .dp-item {
  padding:7px 10px;border-radius:5px;border:1px solid var(--bl);
  background:var(--bg);
}
.bdt .dp-kw {font-size:11px;font-weight:800;margin-bottom:3px;}
.bdt .dp-desc {font-size:10px;color:var(--t2);line-height:1.45;}

/* Stage output clickable */
.bdt .s-out {cursor:pointer;transition:transform .2s,box-shadow .2s;}
.bdt .s-out:hover {transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.12);}
.bdt .s-out .ol::after {content:' 📐';font-size:8px;}

/* Output deliverable panel */
.bdt .out-panel {
  margin-top:10px;background:var(--card);border:1px solid var(--bl);
  border-radius:8px;overflow:hidden;
}
.bdt .op-header {
  padding:8px 12px;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:space-between;
}
.bdt .op-close {
  cursor:pointer;font-size:16px;font-weight:400;opacity:0.5;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:4px;transition:opacity .15s,background .15s;
}
.bdt .op-close:hover {opacity:1;background:rgba(0,0,0,0.06);}
.bdt .op-body {padding:8px 12px 12px;}
.bdt .op-hint {text-align:center;padding:20px;font-size:12px;color:var(--t3);}

/* Deliverable item — framework card */
.bdt .deliverable {
  margin-bottom:8px;border:1px solid var(--bl);border-radius:6px;
  overflow:hidden;
}
.bdt .del-header {
  padding:5px 10px;font-size:11px;font-weight:800;
  display:flex;align-items:center;gap:6px;
}
.bdt .del-icon {font-size:13px;}
.bdt .del-body {padding:6px 10px;background:var(--bg);}
.bdt .del-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px;}
.bdt .del-cell {
  padding:4px 6px;border-radius:3px;background:var(--card);
  border:1px solid var(--bl);font-size:9px;text-align:center;
}
.bdt .del-cell .dc-label {font-weight:700;font-size:9px;display:block;}
.bdt .del-cell .dc-val {font-size:8px;color:var(--t3);margin-top:1px;}
.bdt .del-row {display:flex;gap:4px;margin-top:4px;align-items:stretch;}
.bdt .del-block {
  flex:1;padding:4px 6px;border-radius:3px;background:var(--card);
  border:1px solid var(--bl);font-size:9px;
}
.bdt .del-block .db-label {font-weight:700;font-size:9px;display:block;margin-bottom:1px;}
.bdt .del-block .db-val {font-size:8px;color:var(--t2);line-height:1.3;}
.bdt .del-template {
  padding:5px 8px;border-radius:3px;background:var(--card);
  border:1px dashed var(--bl);font-size:9px;color:var(--t2);
  font-family:monospace;line-height:1.4;margin-top:4px;
}
.bdt .del-list {font-size:9px;color:var(--t2);line-height:1.5;padding-left:14px;}
.bdt .del-list li {margin-bottom:1px;}
.bdt .del-note {font-size:8px;color:var(--t3);font-style:italic;margin-top:4px;}

/* Diagram layout for deliverables with visual */
.bdt .del-with-diagram {display:flex;gap:8px;align-items:stretch;}
.bdt .del-text-side {flex:1;min-width:0;}
.bdt .del-diagram-side {
  flex:0 0 45%;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--bl);border-radius:5px;padding:4px;
}
.bdt .del-diagram-side svg {width:100%;height:auto;}

@media(max-width:900px){
  .bdt .stages {grid-template-columns:repeat(2,1fr);}
  .bdt .diag-grid {grid-template-columns:repeat(3,1fr);}
  .bdt .dp-grid {grid-template-columns:1fr;}
  .bdt .del-grid {grid-template-columns:repeat(2,1fr);}
  .bdt .cta-body {grid-template-columns:1fr;}
}
@media(max-width:600px){
  .bdt .stages {grid-template-columns:1fr;}
  .bdt .diag-grid {grid-template-columns:repeat(2,1fr);}
  .bdt .del-grid {grid-template-columns:1fr;}
  .bdt .del-with-diagram {flex-direction:column;}
  .bdt .del-diagram-side {width:100%;max-width:460px;margin:0 auto;}
  .bdt .cta-bottom {flex-direction:column;text-align:center;}
}

/* Contact CTA section */
.bdt .contact-cta {
  margin-top:14px;border-radius:10px;overflow:hidden;
  border:1px solid var(--bd);
}
.bdt .cta-banner {
  padding:14px 18px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
  color:#fff;
}
.bdt .cta-icon {font-size:22px;flex-shrink:0;}
.bdt .cta-title {font-size:14px;font-weight:800;line-height:1.3;}
.bdt .cta-sub {font-size:10px;opacity:.7;margin-top:2px;}
.bdt .cta-body {
  padding:14px 18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
  background:var(--bg2);
}
.bdt .cta-item {
  padding:10px 12px;border-radius:8px;background:#FCE9EC;border:1.5px solid #E11D2E;
  display:flex;flex-direction:column;gap:4px;transition:all .2s ease;
}
.bdt .cta-item:hover {background:#E11D2E;transform:translateY(-3px);}
.bdt .cta-item:hover .cta-item-title,.bdt .cta-item:hover .cta-item-desc {color:#fff;}
.bdt .cta-item:hover .cta-item-label {color:#fff;background:rgba(255,255,255,.22);}
.bdt .cta-item-label {
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:#E11D2E;background:#fff;display:inline-block;width:fit-content;padding:1px 8px;border-radius:3px;
}
.bdt .cta-item-title {font-size:12px;font-weight:700;color:var(--t1);}
.bdt .cta-item-desc {font-size:9px;color:var(--t3);line-height:1.5;}
.bdt .cta-bottom {
  padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg2);border-top:1px solid var(--bd);
}
.bdt .cta-contact {display:flex;align-items:center;gap:8px;font-size:10px;color:var(--t2);}
.bdt .cta-contact .ct-label {font-weight:700;color:var(--t3);font-size:9px;}
.bdt .cta-contact .ct-val {font-weight:700;color:var(--t1);}
.bdt .cta-qr {
  width:54px;height:54px;border-radius:6px;background:#fff;border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  position:relative;
}
.bdt .cta-qr svg {width:42px;height:42px;}
.bdt .cta-qr-label {font-size:7px;color:var(--t3);text-align:center;margin-top:2px;line-height:1.2;}

/* Copyright footer */
.bdt .copyright {
  margin-top:12px;text-align:center;padding:8px 12px;
  font-size:9px;color:var(--t3);line-height:1.5;
}
.bdt .copyright .cp-brand {font-weight:800;color:var(--t2);}