:root {
    --navy: #040919;
    --navy2: #031a30;
    --navy3: #09112d;
    --teal: #0f67dc;
    --teal-dim: #9fbcfc42;
    --teal-faint: rgb(0 0 0 / 8%);
    --teal-faint2: rgba(33, 33, 33, 0.08);
    --white: #ffffff;
    --off-white: #e8f0f7;
    --muted: #d6d6d6;
    --muted2: #d6d6d6;
    --border: #4169FF4D;
    --border2: #3f65ea;
    --success: #34d399;
    --warn: #fbbf24;
    --radius: 10px;
    --radius-sm: 6px;
    --sidebar-w: 260px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  .strongdm-101-trainging-guide {
    background:var(--navy);
    color:var(--white);
    display:flex;
    min-height:100vh;
    font-size:15px;
    line-height:1.65;
    position: relative;
  }

  /* ── Sidebar ── */
  .strongdm-101-trainging-guide .sidebar{
    width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;position:sticky;top:0;
    background:var(--navy2);border-right:1px solid var(--border);
    display:flex;flex-direction:column;overflow-y:auto;
  }

  .strongdm-101-trainging-guide .sidebar-logo{padding:28px 24px 20px;border-bottom:1px solid var(--border2);}
  .strongdm-101-trainging-guide .logo-mark{display:flex;align-items:center;gap:10px;}
  .strongdm-101-trainging-guide .logo-icon{width:32px;height:32px;background:var(--teal);border-radius:8px;display:flex;align-items:center;justify-content:center;}
  .strongdm-101-trainging-guide .logo-icon svg{width:20px;height:20px;}

  .strongdm-101-trainging-guide .logo-text{font-size:17px;font-weight:600;}
  .strongdm-101-trainging-guide .logo-sub{font-size:11px;color:var(--muted);margin-top:2px;text-transform:uppercase;}

  .strongdm-101-trainging-guide .sidebar-progress{padding:16px 24px;border-bottom:1px solid var(--border2);}
  .strongdm-101-trainging-guide .progress-label{font-size:11px;color:var(--muted);text-transform:uppercase;margin-bottom:8px;display:flex;justify-content:space-between;}
  .strongdm-101-trainging-guide .progress-bar{height:4px;background:#ffffff12;border-radius:2px;overflow:hidden;}
  .strongdm-101-trainging-guide .progress-fill{height:100%;background:var(--teal);border-radius:2px;transition:width 0.5s ease;width:0%;}

  .strongdm-101-trainging-guide .nav-section{padding:16px 16px 8px;}
  .strongdm-101-trainging-guide .nav-section-label{font-size:10px;color:var(--muted2);text-transform:uppercase;padding:0 8px;margin-bottom:6px;}
  .strongdm-101-trainging-guide .nav-item{
    display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);
    cursor:pointer;transition:all 0.15s;color:var(--muted);font-size:13.5px;
    border:none;background:none;width:100%;text-align:left;
  }
  .strongdm-101-trainging-guide .nav-item:hover{background:#141b40ed;color:var(--white);}
  .strongdm-101-trainging-guide .nav-item.active{background:#141b40;color:var(--teal);font-weight:500;}
  .strongdm-101-trainging-guide .nav-item .nav-num{width:22px;height:22px;border-radius:50%;background:var(--navy3);font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:500;}
  .strongdm-101-trainging-guide .nav-item.active .nav-num{background:var(--teal);color:var(--navy);}
  .strongdm-101-trainging-guide .nav-item.done .nav-num{background:var(--teal);color:var(--navy);}
  .strongdm-101-trainging-guide .nav-item.done{color:var(--muted);}

  .strongdm-101-trainging-guide .sidebar-footer{margin-top:auto;padding:16px 24px;border-top:1px solid var(--border2);}
  .strongdm-101-trainging-guide .cert-badge{background:#081227;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;text-align:center;}
  .strongdm-101-trainging-guide .cert-badge .cert-icon{font-size:24px;margin-bottom:4px;}
  .strongdm-101-trainging-guide .cert-badge p{font-size:11px;color:var(--muted);line-height:1.4;}
  .strongdm-101-trainging-guide .cert-badge strong{color:var(--teal);font-size:12px;}

  /* ── Main ── */
  .strongdm-101-trainging-guide .main{flex:1;overflow-y:auto;}
  .strongdm-101-trainging-guide .module{display:none;padding:48px 52px 80px;}
  .strongdm-101-trainging-guide .module.active{display:block;}

  .strongdm-101-trainging-guide .module-header{margin-bottom:40px;}
  .strongdm-101-trainging-guide .module-tag{display:inline-flex;align-items:center;gap:6px;background:#141b40;border:1px solid var(--border);color:var(--teal);font-size:11px;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:14px;}
  .strongdm-101-trainging-guide .module-tag .dot{width:5px;height:5px;background:var(--teal);border-radius:50%;}
  .strongdm-101-trainging-guide h1.module-title{font-size:34px;font-weight:600;line-height:1.2;margin-bottom:10px;}
  .strongdm-101-trainging-guide .module-desc{color:var(--muted);font-size:15px;max-width:580px;line-height:1.7;}

  /* Objectives */
  .strongdm-101-trainging-guide .objectives{background:#081227;border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-bottom:36px;}
  .strongdm-101-trainging-guide .objectives h3{font-size:12px;text-transform:uppercase;color:var(--teal);margin-bottom:14px;font-weight:500;}
  .strongdm-101-trainging-guide .obj-list{list-style:none;}
  .strongdm-101-trainging-guide .obj-list li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:14px;color:var(--off-white);border-bottom:1px solid var(--border2);}
  .strongdm-101-trainging-guide .obj-list li:last-child{border-bottom:none;}
  .strongdm-101-trainging-guide .obj-check{width:18px;height:18px;border-radius:50%;background:#081227;border:1px solid #3f65ea;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;}
  .strongdm-101-trainging-guide .obj-check svg{width:10px;height:10px;}

  /* Section heading */
  .strongdm-101-trainging-guide h2.section-title{font-size:20px;font-weight:600;margin-bottom:6px;margin-top:40px;display:flex;align-items:center;gap:10px;}
  .strongdm-101-trainging-guide h2.section-title:first-of-type{margin-top:0;}
  .strongdm-101-trainging-guide .section-divider{height:1px;background:var(--border2);margin-bottom:24px;}

  /* Cards grid */
  .strongdm-101-trainging-guide .cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:32px;}
  .strongdm-101-trainging-guide .card{background:#081227;border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color 0.15s;}
  .strongdm-101-trainging-guide .card:hover{border-color:var(--border2);}
  .strongdm-101-trainging-guide .card-icon{width:36px;height:36px;border-radius:8px;background:#081227;border:1px solid #3f65ea;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:16px;}
  .strongdm-101-trainging-guide .card h3{font-size:14px;font-weight:600;margin-bottom:6px;}
  .strongdm-101-trainging-guide .card p{font-size:13px;color:var(--muted);line-height:1.6;}

  /* Concept block */
  .strongdm-101-trainging-guide .concept{background:#081227;border-left:3px solid var(--teal);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 20px;margin-bottom:16px;}
  .strongdm-101-trainging-guide .concept h3{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--teal);}
  .strongdm-101-trainging-guide .concept p{font-size:13.5px;color:var(--off-white);line-height:1.7;}
 .strongdm-101-trainging-guide  .concept .tag{display:inline-block;background:#141b40;color:var(--teal);font-size:10px;text-transform:uppercase;padding:2px 8px;border-radius:3px;margin-bottom:8px;}

  /* Architecture diagram */
  .strongdm-101-trainging-guide .arch-diagram{background:#081227;border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-bottom:32px;}
  .strongdm-101-trainging-guide .arch-diagram h3{font-size:12px;text-transform:uppercase;color:var(--muted);margin-bottom:24px;font-weight:500;}
  .strongdm-101-trainging-guide .arch-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;}
  .strongdm-101-trainging-guide .arch-node{
    background:#3f65ea14;border:1px solid var(--border);border-radius:8px;
    padding:12px 18px;text-align:center;min-width:100px;
  }
  .strongdm-101-trainging-guide .arch-node .node-label{font-size:11px;color:var(--muted);margin-bottom:3px;text-transform:uppercase;}
  .strongdm-101-trainging-guide .arch-node .node-name{font-size:13px;font-weight:600;}
  .strongdm-101-trainging-guide .arch-node.highlight{border-color:#3560fc4d;background:#031a30ca;}
  .strongdm-101-trainging-guide .arch-node.highlight .node-name{color:var(--teal);}
  .strongdm-101-trainging-guide .arch-arrow{padding:0 10px;color:var(--teal);font-size:18px;flex-shrink:0;}
  .strongdm-101-trainging-guide .arch-label{font-size:10px;color:var(--muted);text-align:center;margin-top:4px;}
  .strongdm-101-trainging-guide .arch-group{display:flex;flex-direction:column;align-items:center;}
  .strongdm-101-trainging-guide .arch-bracket{display:flex;align-items:center;border:1px dashed var(--border);border-radius:8px;padding:12px 16px;gap:0;margin:0 8px;}
  .strongdm-101-trainging-guide .bracket-label{font-size:10px;color:var(--muted);text-align:center;margin-top:8px;text-transform:uppercase;}

  /* Reference table */
  .strongdm-101-trainging-guide .ref-table{width:100%;border-collapse:separate;border-spacing:0;background:#081227;border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden;margin-bottom:32px;}
  .strongdm-101-trainging-guide .ref-table thead tr{background:#0f67dc50;}
  .strongdm-101-trainging-guide .ref-table th{padding:12px 16px;font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;}
  .strongdm-101-trainging-guide .ref-table td{padding:13px 16px;font-size:13.5px;border-top:1px solid var(--border2);}
  .strongdm-101-trainging-guide .ref-table td a{color:var(--teal);text-decoration:none;font-size:12.5px;}
  .strongdm-101-trainging-guide .ref-table td a:hover{text-decoration:underline;}

  /* Callout */
  .strongdm-101-trainging-guide .callout{display:flex;gap:14px;background:rgba(251,191,36,0.07);border:1px solid rgba(251,191,36,0.25);border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:24px;}
  .strongdm-101-trainging-guide .callout-icon{font-size:16px;flex-shrink:0;margin-top:1px;}
  .strongdm-101-trainging-guide .callout p{font-size:13.5px;color:var(--off-white);line-height:1.65;}
  .strongdm-101-trainging-guide .callout strong{color:var(--warn);}

  .strongdm-101-trainging-guide .callout.info{background:#081227;border-color:var(--border);}
  .strongdm-101-trainging-guide .callout.info p strong{color:var(--teal);}

  /* Nav buttons */
  .strongdm-101-trainging-guide .module-nav{display:flex;gap:12px;margin-top:48px;padding-top:28px;border-top:1px solid var(--border2);}
  .strongdm-101-trainging-guide .btn{padding:10px 22px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.15s;border:none;}
  .strongdm-101-trainging-guide .btn-primary{background:var(--teal);color:var(--navy);font-weight:600;}
  .strongdm-101-trainging-guide .btn-primary:hover{background:#0f67dce0;}
  .strongdm-101-trainging-guide .btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border2);}
  .strongdm-101-trainging-guide .btn-ghost:hover{color:var(--white);border-color:var(--border);}

  /* Quiz */
  .strongdm-101-trainging-guide .quiz-block{background:#081227;border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:32px;}
  .strongdm-101-trainging-guide .quiz-block h3{font-size:13px;color:var(--teal);text-transform:uppercase;margin-bottom:14px;font-weight:500;}
  .strongdm-101-trainging-guide .quiz-q{font-size:15px;font-weight:500;margin-bottom:16px;line-height:1.5;}
  .strongdm-101-trainging-guide .quiz-options{display:flex;flex-direction:column;gap:8px;}
  .strongdm-101-trainging-guide .quiz-opt{
    padding:11px 16px;border-radius:var(--radius-sm);border:1px solid #3f65ea;
    font-size:13.5px;cursor:pointer;transition:all 0.15s;background:#0f67dc50;text-align:left;
    color:var(--off-white);
  }
  .strongdm-101-trainging-guide .quiz-opt:hover{border-color:var(--border);background:#141b40ed;}
  .strongdm-101-trainging-guide .quiz-opt.correct{border-color:var(--success);background:rgba(52,211,153,0.08);color:var(--success);}
  .strongdm-101-trainging-guide .quiz-opt.wrong{border-color:#ef4444;background:rgba(239,68,68,0.08);color:#ef4444;}
  .strongdm-101-trainging-guide .quiz-feedback{margin-top:12px;font-size:13px;line-height:1.6;display:none;}
  .strongdm-101-trainging-guide .quiz-feedback.show{display:block;}

  /* Steps */
  .strongdm-101-trainging-guide .steps{margin-bottom:28px;}
  .strongdm-101-trainging-guide .step{display:flex;gap:16px;margin-bottom:16px;}
  .strongdm-101-trainging-guide .step-num{width:28px;height:28px;border-radius:50%;background:var(--teal);color:var(--navy);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
  .strongdm-101-trainging-guide .step-body h4{font-size:14px;font-weight:600;margin-bottom:4px;}
  .strongdm-101-trainging-guide .step-body p{font-size:13px;color:var(--muted);line-height:1.65;}

  /* Responsive */
  @media(max-width:860px){
    .strongdm-101-trainging-guide .sidebar{display:none;}
    .strongdm-101-trainging-guide .module{padding:32px 24px 60px;}
    .strongdm-101-trainging-guide .cards{grid-template-columns:1fr;}
  }

  /* ── MOBILE SIDEBAR (OFF-CANVAS) ── */
  .strongdm-101-trainging-guide .mobile-topbar{
    display:none;
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:1;
    height:56px;
    padding:0 16px;
    background:#031a30;
    border-bottom:1px solid var(--border2);
    backdrop-filter:blur(12px);
    align-items:center;
    gap:12px;
  }
  .strongdm-101-trainging-guide .mobile-title{
    min-width:0;
    font-weight:600;
    font-size:14px;
    color:var(--off-white);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .strongdm-101-trainging-guide .menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    /* width:38px;
    height:34px; */
    border-radius:10px;
    background:transparent;
    border:1px solid var(--border2);
    color:var(--off-white);
    cursor:pointer;
    flex-shrink:0;
    transition:border-color .2s, background .2s, transform .2s;
  }
  .strongdm-101-trainging-guide .menu-btn:hover{border-color:var(--border);background:var(--teal-faint);}
  .strongdm-101-trainging-guide .menu-btn:active{transform:translateY(1px);}
  .strongdm-101-trainging-guide .menu-btn svg{width:18px;height:18px;}

  .strongdm-101-trainging-guide .sidebar-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:1;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  body.sidebar-open .sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  @media(max-width:860px){
    .strongdm-101-trainging-guide .mobile-topbar{display:flex;}
    .strongdm-101-trainging-guide .shell{padding-top:56px;}
    .strongdm-101-trainging-guide .sidebar{
      display:flex;
      position:absolute;
      top:56px;
      bottom:0;
      left:0;
      height:auto;
      width:min(320px, 86vw);
      transform:translateX(-110%);
      transition:transform .22s ease;
      z-index:1;
      box-shadow:0 12px 40px rgba(0,0,0,0.45);
    }
    body.sidebar-open .sidebar{transform:translateX(0);}
    body.sidebar-open{overflow:hidden;}
  }

  /* responsive helpers */
  img, video, canvas, svg { max-width: 100%; height: auto; }
  .strongdm-101-trainging-guide table { max-width: 100%; }
  @media (max-width: 720px) {
    .strongdm-101-trainging-guide .module-nav{flex-direction:column;align-items:stretch;gap:10px;}
    .strongdm-101-trainging-guide .module-nav .btn{width:100%;text-align:center;justify-content:center;}
    .strongdm-101-trainging-guide .ref-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .strongdm-101-trainging-guide .ref-table th,.strongdm-101-trainging-guide .ref-table td{white-space:nowrap;}
    .strongdm-101-trainging-guide .arch-flow{flex-direction:column;gap:10px;}
    .strongdm-101-trainging-guide .arch-arrow{transform:rotate(90deg);padding:6px 0;}
    .strongdm-101-trainging-guide .arch-bracket{flex-direction:column;gap:10px;padding:14px;}
    .strongdm-101-trainging-guide .arch-diagram{padding:20px;}
    .strongdm-101-trainging-guide .arch-diagram > div{flex-direction:column;gap:12px;}
    .strongdm-101-trainging-guide .arch-diagram > div > .arch-arrow{transform:rotate(90deg);padding:6px 0;}
    .strongdm-101-trainging-guide .arch-diagram > div > div[style*="dashed"]{flex-direction:column;gap:10px;align-items:center;padding:12px;}
    .strongdm-101-trainging-guide .arch-diagram > div > div[style*="dashed"] .arch-arrow{transform:rotate(90deg);padding:6px 0;}
    .strongdm-101-trainging-guide .arch-group{width:100%;}
    .strongdm-101-trainging-guide .arch-node{min-width:0;width:100%;}
    .strongdm-101-trainging-guide table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  }
  .strongdm-101-trainging-guide pre { max-width: 100%; overflow-x: auto; }

  /* Scrollbar */
  ::-webkit-scrollbar{width:6px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:#09112d;border-radius:3px;}