:root{
    --paper:#F7F6F2;
    --panel:#FFFFFF;
    --ink:#171A1C;
    --ink-soft:#4B5157;
    --navy:#1E0F10;
    --navy-deep:#1E0F10;
    --diagram-bg:#FFF6F7;
    --crimson:#D72E2F;
    --crimson-light:#F2898A;
    --crimson-bg:#FCEAEA;
    --signal:#D72E2F;
    --signal-bg:#FCEAEA;
    --teal:#D72E2F;
    --teal-bg:#FCEAEA;
    --line:#DEDBD3;
    --code-text:#F2898A;
    --code-dim:#B86B6C;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  }

  *{box-sizing:border-box;}

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }

  body.access-locked{
    overflow:hidden;
  }

  body.access-locked .app-shell,
  body.access-locked .mobile-toggle{
    filter:blur(10px);
    pointer-events:none;
    user-select:none;
  }

  .access-gate{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(30,15,16,0.66);
    backdrop-filter:blur(12px);
  }

  body.access-locked .access-gate{
    display:flex;
  }

  .access-card{
    width:min(430px,100%);
    padding:28px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--panel);
    color:var(--ink);
    box-shadow:0 24px 70px rgba(23,26,28,0.28);
  }

  .access-card-header{
    margin-bottom:22px;
  }

  .access-badge{
    display:inline-block;
    margin-bottom:12px;
    padding:4px 11px;
    border-radius:3px;
    background:var(--crimson);
    color:#fff;
    font-family:var(--mono);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }

  .access-card h1{
    margin:0 0 8px;
    color:var(--ink);
    font-family:var(--sans);
    font-size:30px;
    font-weight:700;
    line-height:1.15;
  }

  .access-card p{
    margin:0;
    color:var(--ink-soft);
    font-size:14.5px;
    line-height:1.6;
  }

  .access-card label{
    display:block;
    margin-bottom:8px;
    color:var(--ink);
    font-size:13.5px;
    font-weight:700;
  }

  .access-card input{
    width:100%;
    min-height:46px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:4px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    outline:none;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .access-card input:focus{
    border-color:var(--crimson);
    box-shadow:0 0 0 4px rgba(215,46,47,0.13);
  }

  .access-error{
    min-height:22px;
    margin:8px 0 12px !important;
    color:var(--crimson) !important;
    font-size:13px !important;
    font-weight:700;
  }

  .access-card button{
    width:100%;
    min-height:46px;
    border:0;
    border-radius:4px;
    background:var(--crimson);
    color:#fff;
    font-family:var(--mono);
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }

  .access-card button:hover{
    background:#b92425;
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(215,46,47,0.24);
  }

  .page{
    max-width:760px;
    margin:0 auto;
    padding:64px 24px 120px;
  }

  .kicker{
    font-family:var(--mono);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:#D72E2F;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .kicker::before{
    content:"";
    width:28px;
    height:2px;
    background:#D72E2F;
    display:inline-block;
  }

  h1.chapter-title{
    font-family:var(--sans);
    font-size:38px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.01em;
    margin:0 0 40px;
    color:var(--ink);
  }

  /* ---------- Callout boxes ---------- */
  .box{
    border-left:3px solid var(--navy);
    background:var(--panel);
    padding:22px 26px;
    margin:28px 0;
    border-radius:2px;
  }
  .box-title{
    font-family:var(--mono);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#D72E2F;
    margin-bottom:12px;
  }
  .box ul{ margin:0; padding-left:20px; }
  .box li{ margin-bottom:8px; }
  .box li:last-child{ margin-bottom:0; }

  .box.scope{
    border-left-color:var(--ink-soft);
    background:transparent;
    font-size:15px;
    color:var(--ink-soft);
    padding:18px 26px;
  }

  /* ---------- Section headings ---------- */
  h2.section{
    font-family:var(--sans);
    font-size:24px;
    font-weight:700;
    color:#D72E2F;
    margin:64px 0 20px;
    padding-bottom:12px;
    border-bottom:2px solid #D72E2F;
  }
  h2.section .num{
    font-family:var(--mono);
    font-weight:600;
    margin-right:10px;
  }

  h3.sub{
    font-size:18px;
    font-weight:700;
    margin:36px 0 14px;
    color:var(--ink);
  }

  p{ margin:0 0 18px; font-size:16px; }
  strong{ color:var(--ink); font-weight:600; }

  /* ---------- Terminal / code block ---------- */
  .terminal{
    background:#1E0F10;
    border-radius:8px;
    margin:24px 0;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(14,32,54,0.18);
  }
  .terminal-bar{
    display:flex;
    gap:6px;
    padding:10px 14px;
    background:rgba(255,255,255,0.04);
  }
  .terminal-bar span{
    width:10px; height:10px; border-radius:50%;
    background:rgba(255,255,255,0.18);
  }
  pre,
  .terminal pre,
  div.terminal pre {
    margin:0;
    padding:20px 22px 24px;
    font-family:var(--mono) !important;
    font-size:13.5px !important;
    line-height:1.7 !important;
    color:var(--code-text) !important;
    white-space:pre-wrap !important;
    word-break:break-word !important;
    overflow-x:hidden !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .terminal .comment{ color:var(--code-dim); }
  .terminal .req{ color:#E8C97A; }

  /* ---------- Threat actor cards ---------- */
  .actor-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:24px 0;
  }
  /* Automatically stack vertically in 1 column when container has 3 cards */
  .actor-grid:has(> .actor-card:nth-child(3):last-child) {
    grid-template-columns: 1fr !important;
  }
  .actor-card{
    background:var(--panel);
    border:1px solid var(--line);
    padding:18px 20px;
    border-radius:3px;
  }
  .actor-card h4{
    margin:0 0 10px;
    font-size:15px;
    font-weight:700;
    color:var(--ink);
  }
  .actor-card .tag{
    display:inline-block;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--teal);
    background:var(--teal-bg);
    padding:3px 8px;
    border-radius:3px;
    margin-bottom:10px;
  }
  .actor-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; }

  /* ---------- Comparison table ---------- */
  table.compare,
  table {
    width: 100%;
    table-layout: fixed !important;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 14.5px;
    box-sizing: border-box;
  }
  p + table, p + table.compare,
  h2 + table, h2 + table.compare,
  h3 + table, h3 + table.compare,
  .box + table, .box + table.compare {
    margin-top: 8px !important;
  }
  table.compare th,
  table th {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color:#D72E2F;
    border-bottom:2px solid #D72E2F;
    padding: 10px 14px;
    white-space: normal;
  }
  table.compare td,
  table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    color: var(--ink-soft);
    white-space: normal;
    line-height: 1.6;
  }
  table.compare td:first-child,
  table td:first-child {
    color: var(--ink);
    font-weight: 600;
    white-space: normal;
  }
  table.compare tr:last-child td,
  table tr:last-child td { border-bottom: none; }

  .analogy-line{
    font-size:14px;
    background:var(--teal-bg);
    border-left:3px solid var(--teal);
    padding:12px 16px;
    margin:18px 0;
    color:var(--ink);
  }

  /* ---------- Pitfall section title ---------- */
  .pitfall-title{
    font-family:var(--mono);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--signal);
    margin:56px 0 22px;
    padding-bottom:10px;
    border-bottom:2px solid var(--signal);
  }

  /* ---------- Callout system: danger / warning / tip / success ---------- */
  /* Dark card + colored left border + floating icon badge */
  .callout{
    position:relative;
    border-radius:10px;
    padding:20px 24px 20px 30px;
    margin:0 0 20px;
    color:#E7E9EC;
  }
  .callout .badge{
    position:absolute;
    top:-14px;
    left:22px;
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.35);
  }
  .callout .badge svg{ width:15px; height:15px; }
  .callout .title{
    font-family:var(--sans);
    font-weight:700;
    font-size:14.5px;
    margin:4px 0 8px;
  }
  .callout p{
    margin:0;
    font-size:13.5px;
    line-height:1.65;
    color:#C7CDD3;
  }
  .callout code{ color:inherit; background:rgba(255,255,255,0.08); }
  .callout strong,
  .callout-block strong { color:inherit !important; font-weight:700; }

  .callout.danger{ background:#2A1418; border-left:4px solid #B23A2E; }
  .callout.danger .badge{ background:#B23A2E; }
  .callout.danger .title{ color:#F2897D; }

  .callout.warning{ background:#2A2210; border-left:4px solid #C99A2E; }
  .callout.warning .badge{ background:#C99A2E; }
  .callout.warning .title{ color:#E3B44A; }

  .callout.tip{ background:#10202A; border-left:4px solid #2E6FC9; }
  .callout.tip .badge{ background:#2E6FC9; }
  .callout.tip .title{ color:#6FB3E0; }

  .callout.success{ background:#10241A; border-left:4px solid #2E8B57; }
  .callout.success .badge{ background:#2E8B57; }
  .callout.success .title{ color:#5CC98A; }

  .callout.variasi{ background:#241329; border-left:4px solid #8B2E9E; }
  .callout.variasi .badge{ background:#8B2E9E; }
  .callout.variasi .title{ color:#C88FD9; }

  .callout-block{ margin:28px 0; }

  /* ---------- SVG diagram wrapper ---------- */
  .diagram-wrap{
    margin:28px 0;
    padding: 16px 20px;
    border-radius:14px;
    overflow:hidden;
    background:var(--diagram-bg);
    border:1px solid rgba(215,46,47,0.15);
    box-shadow:0 8px 24px rgba(30,15,16,0.08);
  }
  .diagram-wrap svg{ display:block; width:100%; height:auto; }

  /* ---------- Summary checklist ---------- */
  .summary{
    margin-top:56px;
    background:#1E0F10;
    color:#EDEFF2;
    border-radius:8px;
    padding:30px 30px 34px;
  }
  .summary .box-title{ color:#F2898A; margin-bottom:16px;}
  .summary ul{ list-style:none; margin:0; padding:0; }
  .summary li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #EDEFF2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .summary li:last-child {
    border-bottom: none;
  }
  .summary .chk {
    position: absolute;
    left: 0;
    top: 12px;
    width: 16px;
    height: 16px;
    border:1.5px solid #D72E2F;
    border-radius: 3px;
    box-sizing: border-box;
  }

  @media (max-width:768px){
    .actor-grid{ grid-template-columns:1fr; }
    h1.chapter-title{ font-size:30px; }
  }

/* ---------- Part opener specific ---------- */
  .part-kicker{
    font-family:var(--mono);
    font-size:15px;
    font-weight:700;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:#D72E2F;
    margin-bottom:18px;
  }
  h1.part-title{
    font-family:var(--sans);
    font-size:44px;
    font-weight:700;
    line-height:1.12;
    letter-spacing:-0.01em;
    margin:0 0 18px;
    color:var(--ink);
  }
  .part-tagline{
    font-size:19px;
    font-style:italic;
    color:var(--ink-soft);
    margin:0 0 48px;
    line-height:1.5;
    border-left:3px solid var(--navy);
    padding-left:20px;
  }
  .part-section-label{
    font-family:var(--mono);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#D72E2F;
    margin:44px 0 20px;
  }
  .bab-list{ list-style:none; margin:0; padding:0; }
  .bab-item{
    display:flex;
    gap:20px;
    align-items:flex-start;
    padding:18px 0;
    border-bottom:1px solid var(--line);
  }
  .bab-item:last-child{ border-bottom:none; }
  .bab-item .bab-num{
    flex:0 0 auto;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#D72E2F;
    color:#fff;
    font-family:var(--mono);
    font-weight:700;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .bab-item .bab-text h4{
    margin:0 0 4px;
    font-size:16.5px;
    font-weight:700;
    color:var(--ink);
  }
  .bab-item .bab-text p{
    margin:0;
    font-size:14px;
    color:var(--ink-soft);
  }
  .dependency-note{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--ink-soft);
    background:var(--panel);
    border:1px dashed var(--line);
    padding:14px 18px;
    border-radius:6px;
    margin-top:44px;
  }
  .dependency-note strong{ color:#D72E2F; }

/* ---------- Career cards ---------- */
  .career-card{
    border-radius:10px;
    overflow:hidden;
    margin:28px 0;
    box-shadow:0 8px 24px rgba(14,32,54,0.14);
  }
  .career-header{
    padding:20px 26px;
    display:flex;
    align-items:center;
    gap:16px;
  }
  .career-header .icon{
    width:44px; height:44px;
    border-radius:8px;
    background:rgba(255,255,255,0.14);
    display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;
    font-size:20px;
  }
  .career-header h3{ margin:0 0 4px; color:#fff; font-size:17px; font-weight:700; }
  .career-header p{ margin:0; color:rgba(255,255,255,0.75); font-size:13px; }
  .career-card.c1 .career-header{ background:#1E0F10; }
  .career-card.c2 .career-header{ background:#123425; }
  .career-card.c3 .career-header{ background:#4A3411; }
  .career-body{
    background:var(--panel);
    padding:24px 26px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:22px;
    border:1px solid var(--line);
    border-top:none;
  }
  .career-body h5{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#D72E2F;
    margin:0 0 10px;
  }
  .career-body ul{ margin:0; padding-left:18px; }
  .career-body li{ font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
  .career-fit{
    background:#1E0F10;
    color:#E5E9EE;
    padding:14px 26px;
    font-size:13.5px;
    border-radius:0 0 10px 10px;
  }
  .career-fit strong{ color:#F2898A; }
  @media (max-width:700px){ .career-body{ grid-template-columns:1fr; } }


/* ---------- Glossary ---------- */
  .glossary-cat{
    font-family:var(--mono);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#fff;
    background:#D72E2F;
    display:inline-block;
    padding:5px 12px;
    border-radius:4px;
    margin:52px 0 22px;
  }
  .gterm{
    border:1px solid var(--line);
    border-radius:8px;
    padding:20px 24px;
    margin-bottom:16px;
    background:var(--panel);
  }
  .gterm .gname{
    font-size:17px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:4px;
  }
  .gterm .gdef{
    font-size:14px;
    color:var(--ink-soft);
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .gterm .gcols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .gterm .gcol .glabel{
    font-family:var(--mono);
    font-size:10px;
    font-weight:700;
    letter-spacing:0.08em;
    color:#D72E2F;
    margin-bottom:6px;
  }
  .gterm .gcol.practice .glabel{ color:var(--teal); }
  .gterm .gcol p{
    font-size:13.5px;
    color:var(--ink);
    margin:0;
    line-height:1.6;
  }
  @media (max-width:640px){
    .gterm .gcols{ grid-template-columns:1fr; }
  }


/* ============ GITBOOK-STYLE LAYOUT ============ */
*{box-sizing:border-box;}
html,body{margin:0; padding:0; height:100%;}
body{overflow:hidden;}

.app-shell{
  display:flex;
  height:100vh;
  width:100vw;
}

/* ---- Sidebar ---- */
.sidebar{
  width:300px;
  flex:0 0 300px;
  background:#1E0F10;
  color:#E5E9EE;
  height:100vh;
  overflow-y:auto;
  border-right:1px solid rgba(215,46,47,0.15);
}
.sidebar-header{
  padding:22px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky;
  top:0;
  background:#1E0F10;
  z-index:5;
}
.sidebar-header .title{
  font-family:var(--sans);
  font-weight:700;
  font-size:15.5px;
  color:#fff;
  line-height:1.3;
}
.sidebar-header .subtitle{
  font-family:var(--mono);
  font-size:10.5px;
  color:#F2898A;
  margin-top:4px;
  letter-spacing:0.03em;
}
.nav-tree{ padding:14px 10px 40px; }

.nav-item{
  display:block;
  padding:8px 12px;
  border-radius:6px;
  color:#D6C2C3;
  text-decoration:none;
  font-size:13.5px;
  line-height:1.4;
  cursor:pointer;
  transition:background 0.12s ease, color 0.12s ease;
}
.nav-item:hover{ background:rgba(215,46,47,0.15); color:#fff; }
.nav-item.active{
  background:#4A1A1B;
  color:#ffffff !important;
  font-weight:600;
  border-left:3px solid #D72E2F;
}
.nav-item.nav-top{
  font-weight:700;
  font-size:14px;
  color:#fff;
  margin:4px 0;
}
.nav-item.nav-bab{
  font-size:12.5px;
  padding:7px 12px 7px 30px;
  color:#B89B9C;
}
.nav-item.nav-bab.active{
  color:#ffffff !important;
  background:rgba(215,46,47,0.22);
  font-weight:600;
}

.nav-group{ margin:2px 0; }
.nav-group-header{
  display:flex;
  align-items:center;
  gap:6px;
  border-radius:6px;
}
.nav-group-header:hover{ background:rgba(215,46,47,0.12); }
.nav-group-header .nav-item.nav-part{ flex:1; margin:0; }
.nav-caret{
  width:26px;
  flex:0 0 26px;
  text-align:center;
  color:#F2898A;
  font-size:11px;
  cursor:pointer;
  user-select:none;
  transition:transform 0.15s ease;
}
.nav-group.open .nav-caret{ transform:rotate(90deg); }
.nav-children{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.2s ease;
}
.nav-group.open .nav-children{ max-height:600px; }

.nav-divider{
  height:1px;
  background:rgba(255,255,255,0.08);
  margin:14px 10px;
}
.nav-section-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#F2898A;
  padding:10px 12px 6px;
}

/* ---- Content area ---- */
.content-area{
  flex:1;
  height:100vh;
  overflow-y:auto;
  background:var(--paper);
  position:relative;
}
.content-section{
  max-width:900px;
  margin:0 auto;
  padding:56px 64px 100px;
}
.content-section .page{ display:block; }
.content-section a{
  color:#D72E2F;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color 0.15s ease;
}
.content-section a:hover{
  color:#9E1F20;
}

/* Mobile toggle */
.mobile-toggle{
  display:none;
  position:fixed;
  top:14px;
  left:14px;
  z-index:50;
  background:#D72E2F;
  color:#fff;
  border:none;
  width:40px;
  height:40px;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
/* ================================================================
   MOBILE RESPONSIVE SYSTEM (Complete Optimization)
   ================================================================ */
@media (max-width: 860px) {
  /* Layout Shell & Navigation */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.22s ease-in-out;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    width: 280px;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 110;
    background:#D72E2F;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }

  .content-area {
    height: 100vh;
    overflow-y: auto;
    background: var(--paper);
  }

  .content-section {
    padding: 68px 16px 80px !important;
    max-width: 100% !important;
  }

  .page {
    max-width: 100% !important;
  }

  /* Typography */
  h1.chapter-title {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin-bottom: 24px !important;
  }
  h1.part-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }
  .part-tagline {
    font-size: 15.5px !important;
    margin-bottom: 32px !important;
    padding-left: 14px !important;
  }
  h2.section {
    font-size: 19px !important;
    margin: 40px 0 16px !important;
    padding-bottom: 8px !important;
  }
  h3, h3.sub {
    font-size: 16.5px !important;
    margin: 28px 0 12px !important;
  }
  h4 {
    font-size: 14.5px !important;
  }
  p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
  }

  /* Scoped Lists */
  .content-section ul:not(.bab-list):not(.summary ul):not(.career-body ul):not(.nav-tree ul),
  .content-section ol {
    padding-left: 18px !important;
  }
  .content-section ul:not(.bab-list):not(.summary ul):not(.career-body ul):not(.nav-tree ul) li,
  .content-section ol li {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 6px !important;
  }

  /* ---------- Tables on Mobile (Clean Proportional HTML Column Widths) ---------- */
  table.compare,
  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    font-size: 13px !important;
    margin: 16px 0 20px !important;
    box-sizing: border-box !important;
  }

  table.compare th, table th,
  table.compare td, table td {
    padding: 8px 10px !important;
    vertical-align: top !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }

  table.compare td:first-child,
  table td:first-child {
    font-weight: 600 !important;
  }

  /* Callout Boxes on Mobile */
  .callout {
    padding: 16px 16px 16px 20px !important;
    margin: 16px 0 !important;
    border-radius: 8px !important;
  }
  .callout .badge {
    top: -12px !important;
    left: 16px !important;
    width: 26px !important;
    height: 26px !important;
  }
  .callout .badge svg {
    width: 13px !important;
    height: 13px !important;
  }
  .callout .title {
    font-size: 13.5px !important;
    margin: 2px 0 6px !important;
  }
  .callout p, .callout li {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* Pre & Code Terminal Blocks on Mobile */
  .terminal {
    margin: 18px 0 !important;
    border-radius: 6px !important;
  }
  .terminal-bar {
    padding: 8px 12px !important;
  }
  pre,
  .terminal pre,
  .terminal-window pre,
  div.terminal pre {
    padding: 14px 14px 16px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-x: hidden !important;
  }

  /* SVG Diagrams on Mobile (100% Fluid Fit, No Cut Off, Crisp Text) */
  .diagram-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--diagram-bg) !important;
    border: 1px solid rgba(215, 46, 47, 0.15) !important;
    box-shadow: 0 8px 24px rgba(30, 15, 16, 0.08) !important;
    box-sizing: border-box !important;
  }

  .diagram-wrap svg,
  svg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .diagram-wrap svg text {
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-rendering: geometricPrecision !important;
  }

  /* Career Cards & Actor Cards on Mobile */
  .actor-grid,
  .actor-grid.cols-3,
  .actor-grid.cols-2,
  .actor-grid.cols-1 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .actor-card {
    padding: 14px 16px !important;
  }

  .career-card {
    margin: 20px 0 !important;
    border-radius: 8px !important;
  }
  .career-header {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .career-header .icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 17px !important;
  }
  .career-header h3 {
    font-size: 15.5px !important;
  }
  .career-header p {
    font-size: 12.5px !important;
  }
  .career-body {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    gap: 14px !important;
  }
  .career-fit {
    padding: 12px 16px !important;
    font-size: 12.5px !important;
  }

  /* Glossary Items on Mobile */
  .gterm {
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
  }
  .gterm .gname {
    font-size: 15.5px !important;
  }
  .gterm .gdef {
    font-size: 13.5px !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }
  .gterm .gcols {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Summary Checklist on Mobile */
  .summary {
    margin-top: 40px !important;
    padding: 20px 18px 24px !important;
    border-radius: 8px !important;
  }
  .summary li {
    font-size: 13.5px !important;
    padding: 7px 0 7px 24px !important;
  }
  .summary .chk {
    top: 10px !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* Boxes & Scope */
  .box {
    padding: 16px 18px !important;
    margin: 18px 0 !important;
  }
  .box-title {
    font-size: 11px !important;
  }
}

/* Progress-style top bar on content (subtle) */

/* ---------- Role matrix comparison (Pembuka) ---------- */
.role-matrix {
  margin: 28px 0;
  background:#1E0F10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(14, 32, 54, 0.15);
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.role-card {
  background:#2A1617;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

.role-card.se {
  border-top:3px solid #D72E2F;
}
.role-card.sysadmin {
  border-top: 3px solid #E3B44A;
}
.role-card.itsupport {
  border-top: 3px solid #8996A3;
}

.role-card-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.role-card-title {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.02em;
}

.role-card.se .role-card-title { color:#F2898A; }
.role-card.sysadmin .role-card-title { color: #F5D075; }
.role-card.itsupport .role-card-title { color: #C5D0DC; }

.role-card-body {
  flex: 1;
}

.role-section-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:#F2898A;
  margin-bottom: 6px;
  font-weight: 700;
}

.role-card-list {
  margin: 0 0 14px;
  padding-left: 16px !important;
  list-style-type: disc;
}

.role-card-list li {
  font-size: 13px !important;
  color: #D1D9E0 !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}

.role-card-output {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  color: #AEE3C3;
  line-height: 1.4;
}
.role-card-output strong {
  color:#F2898A;
}

.role-divider {
  text-align: center;
  position: relative;
  margin: 18px 0;
}
.role-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.role-divider span {
  position: relative;
  background:#1E0F10;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  color:#F2898A;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-card.secpro {
  background: #0F2D25;
  border: 1px solid rgba(159, 216, 207, 0.25);
  border-left: 4px solid #22C55E;
  padding: 20px 22px;
}

.role-card.secpro .role-card-title {
  color: #6EE7B7;
  font-size: 16px;
  margin-bottom: 4px;
}

.role-card-subtitle {
  font-size: 13px;
  color: #AEE3C3;
  font-style: italic;
  margin-bottom: 14px;
}

@media (max-width: 860px) {
  .role-matrix {
    padding: 16px !important;
    margin: 20px 0 !important;
  }
  .role-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }
  .role-card {
    padding: 14px 16px !important;
  }
}