/* Java interview questions pages */
:root {
  --interviewButtonTextColor: #fff;
}

html {
  scroll-behavior: auto !important;
}

.interview-question {
  scroll-margin-top: 64px !important;
}

.interview-page-nav a.active,
.interview-page-nav a.active:hover,
.interview-page-nav a.active:focus-visible {
  background: #ce3719 !important;
  border-color: #ce3719 !important;
  color: #fff !important;
}

.interview-page .page-nav{
  max-width:1120px;
}
.interview-pills{
  width:100%;
  margin:8px auto 30px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 14px;
}
.interview-pills a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 18px;
  border:1px solid var(--borderColor);
  border-radius:999px;
  background:#fff;
  color:var(--textColor);
  text-decoration:none;
  font-size:15px;
  line-height:1.15;

}
.interview-pills a.active{
  background:var(--firstColor);
  border-color:var(--firstColor);
  color:var(--interviewButtonTextColor);
}
@media(max-width:980px){
  .interview-pills{
    max-width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 12px 8px;
    margin:0 0 24px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .interview-pills::-webkit-scrollbar{display:none;width:0;height:0;}
  .interview-pills a{
    flex:0 0 auto;
    scroll-snap-align:center;
    font-size:14px;
    padding:9px 15px;
  }
  .section-title-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .qa-card{
    padding:15px 16px;
    border-radius:14px;
  }
  .qa-card h3{
    font-size:18px;
  }
  .qa-card p{
    font-size:15px;
  }
  .qa-tip{
    font-size:14px;
  }
}

/* Interview category pills: intentionally different from the main page navigation */
.interview-pills{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 12px;
    margin:0 auto 34px;
    padding:12px 14px;
    border:1px solid var(--borderColor);
    border-radius:18px;
    background:#f6f8fc;
}
.interview-pills a{
    padding:10px 16px;
    border:1px solid #cfd8e6;
    border-radius:12px;
    background:#fff;
    color:var(--textColor);
    text-decoration:none;
    font-size:15px;
    font-weight:400;

}
.interview-pills a:hover{background:#eef3f9;border-color:#b9c7dc;color:var(--textColor);}
.interview-pills a.active{background:var(--h1Color);border-color:var(--h1Color);color:var(--interviewButtonTextColor);}
.interview-pills a.active:hover{background:var(--h1Color);border-color:var(--h1Color);color:var(--interviewButtonTextColor);}
.interview-section .section-copy{margin-bottom:22px;}
.interview-resume-cta{width:80%;margin:42px auto 0;border:1px solid var(--borderColor);border-radius:18px;background:linear-gradient(135deg,#fbfcff,#f4f8ff);padding:26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;}
.interview-resume-cta h2{margin:0 0 8px;text-align:left;font-size:28px;color:var(--h1Color)}
.interview-resume-cta p{margin:0;color:var(--mutedTextColor);line-height:1.5;font-size:16px}
.interview-resume-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 20px;border-radius:999px;background:var(--firstColor);border:1px solid var(--firstColor);color:var(--interviewButtonTextColor);text-decoration:none;font-size:16px;white-space:nowrap}
@media(max-width:980px){
    .interview-pills{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:26px;max-width:100%;}
    .interview-pills::-webkit-scrollbar{display:none;}
    .interview-pills a{white-space:nowrap;flex:0 0 auto;}
    .interview-resume-cta{width:100%;grid-template-columns:1fr;padding:20px;}
    .interview-resume-cta h2{font-size:24px;}
}

/* Interview FAQ and common mistakes */
.mistakes-grid,
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}.followup-question{font-weight:800;color:var(--ink,#071b46);margin-bottom:3px}.followup-answer{color:var(--muted,#47597a);line-height:1.55}.interview-tip{margin-top:16px}

/* Mobile production fixes: selectors, data labels, and interview overflow */
@media (max-width: 980px) {
  .salary-level-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .salary-level-layout .level-pills {
    order: 1 !important;
  }
  .salary-level-layout .salary-level-main,
  .salary-level-layout .state-table {
    order: 2 !important;
  }
  .comparison-table .simple-head,
  .worldwide-table .simple-head {
    display: none !important;
  }
  .comparison-table .simple-row,
  .worldwide-table .simple-row {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .comparison-table .simple-row > div,
  .worldwide-table .simple-row > div {
    display: grid !important;
    grid-template-columns: minmax(120px, 42%) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--borderColor) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  .comparison-table .simple-row > div:last-child,
  .worldwide-table .simple-row > div:last-child {
    border-bottom: 0 !important;
  }
  .comparison-table .simple-row > div::before,
  .worldwide-table .simple-row > div::before {
    content: attr(data-label);
    color: var(--mutedTextColor);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
  }
  .worldwide-table .country-cell {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .worldwide-table .simple-row > div:first-child {
    margin-bottom: 0 !important;
  }
}

.interview-question {
  margin-top: 30px;
  overflow: hidden;
  max-width: 100%;
}
.interview-question pre,
.interview-question code,
.text-card.interview-question pre,
.text-card.interview-question code {
  max-width: 100%;
  box-sizing: border-box;
}
.interview-question pre,
.text-card.interview-question pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
  border-radius: 14px;
  padding: 16px;
}
.interview-question code,
.text-card.interview-question code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: block;
}
@media (max-width: 620px) {
  .interview-question pre,
  .text-card.interview-question pre {
    font-size: 10.5px;
    line-height: 1.5;
    padding: 14px;
  }
}

.interview-question-title,
.interview-question h3.interview-question-title {
    text-align: left !important;
}

.system-design-question .system-short-answer{margin:10px 0 18px;padding:14px 16px;border-left:4px solid var(--firstColor);background:#f8fbff;border-radius:12px;color:var(--textColor);}
.system-design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px;}
.system-design-box{padding:16px;border:1px solid var(--borderColor);border-radius:14px;background:#fff;font-size:12px;}
.system-design-box h4{margin:0 0 8px;font-size:17px;color:var(--textColor);}
.system-design-box p{margin:0;color:var(--mutedTextColor);font-size:12px;line-height:1.45;}
@media (max-width:760px){.system-design-grid{grid-template-columns:1fr}.flow-node{min-width:120px}.flow-arrow{min-width:76px}}

/* Improved interview answer and system design presentation */
.text-card.interview-question {
  padding: 28px 30px !important;
  border-radius: 20px !important;

}
.interview-question-title {
  margin-bottom: 18px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
}
.interview-answer-rich {
  color: var(--mutedTextColor);
  font-size: 18px;
  line-height: 1.65;
}
.interview-answer-rich p {
  margin: 0 0 14px;
}
.answer-point {
  margin: 14px 0;
  padding: 16px 18px;
  border: 1px solid var(--borderColor);
  border-left: 5px solid var(--firstColor);
  border-radius: 14px;
  background: #fbfcff;
  color: var(--mutedTextColor);
}
.answer-example {
  margin: 10px 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f5f7fb;
  color: var(--mutedTextColor);
}
.interview-code-block,
.interview-question pre.interview-code-block {
  margin: 14px 0 18px;
  padding: 18px 20px;
  border: 1px solid #d6deea;
  border-radius: 16px;
  background: #061a3f;
  color: #f8fbff;

}
.interview-code-block code {
  color: inherit;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.65;
}
.system-design-question {
  background: linear-gradient(180deg,#fff 0%,#fbfcff 100%) !important;
}
.system-design-question .system-short-answer {
  margin: 8px 0 22px !important;
  padding: 18px 20px !important;
  border: 1px solid #cfe7d4 !important;
  border-left: 6px solid var(--firstColor) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg,#f6fff6,#fbfcff) !important;
}
.system-design-question .system-short-answer .interview-answer-rich,
.system-design-question .system-short-answer p {
  margin: 0;
  color: var(--textColor);
}
.system-design-grid {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 16px !important;
  margin-top: 22px !important;
}
.system-design-box {
  position: relative;
  font-size: 12px;
  min-height: 180px;
  padding: 20px 18px 18px !important;
  border: 1px solid var(--borderColor) !important;
  border-radius: 18px !important;
  background: #fff !important;

}
.system-design-box h4 {
  margin: 0 0 8px !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  color: var(--textColor) !important;
}
.system-design-box .interview-answer-rich {
  font-size: 12px;
  line-height: 1.45;
}
.system-design-box .interview-answer-rich p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .system-design-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
  .text-card.interview-question { padding: 20px 16px !important; }
  .interview-question-title { font-size: 21px !important; }
  .interview-answer-rich { font-size: 15px; line-height: 1.6; }
  .system-design-grid { grid-template-columns: 1fr !important; }
  .flow-node { min-width: 104px !important; font-size: 15px !important; }
  .flow-arrow { min-width: 54px !important; }
}

/* Vertical system-design diagrams: mobile-first interview whiteboard layout */
.system-flow-wrap {
  overflow-x: visible !important;
  overflow-y: visible !important;
  background: radial-gradient(circle at top left, rgba(88,180,67,.10), transparent 34%), linear-gradient(180deg,#fbfcff,#fff) !important;
}

/* Polished HTML/CSS system architecture diagrams with parallel and branch paths */

.architecture-flow-wrap {
  padding: 24px !important;
  background: radial-gradient(circle at top left, rgba(88,180,67,.07), transparent 34%), linear-gradient(180deg,#fbfcff,#fff) !important;
}
.architecture-flow-wrap h4 {
  font-size: 28px !important;
  line-height: 1.12 !important;
  margin: 0 0 20px !important;
  color: var(--textColor) !important;
  font-weight: 900 !important;
}
.architecture-diagram-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(320px, .38fr);
  gap: 12px;
  align-items: start;
}
.architecture-diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}
.diagram-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;

}
.diagram-node {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  width: 70%;
  min-height: 84px;
  padding: 8px 12px;
  border: 2px solid #d7e3ef;
  border-radius: 16px;
  background: #fff;

  color: var(--textColor);
  text-align: left;
  margin: auto;
}
.diagram-node-copy { min-width: 0; }
.diagram-node strong {
  display: block;
  width: 100%;
  margin: 0 0 7px;
  font-size: 16px;
  line-height: 1.12;
  font-weight: 900;
  color: var(--textColor);
  text-align: left;
}
.diagram-node p {
  width: 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.38;
  color: var(--mutedTextColor);
  text-align: left;
}
.diagram-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: transparent;
  font-size: 60px;
  flex: 0 0 auto;
}
.diagram-node-icon-img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.diagram-node-num {
  position: absolute;
  left: -9px;
  top: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--firstColor);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;

  z-index: 3;
}
.diagram-node-client { border-color:#93c5fd; }
.diagram-node-edge, .diagram-node-cache, .diagram-icon-cdn, .diagram-icon-edge-cache { border-color:#86efac; }
.diagram-node-gateway, .diagram-node-security, .diagram-icon-api-gateway, .diagram-icon-gateway { border-color:#fdba74; }
.diagram-node-load-balancer { border-color:#c4b5fd; }
.diagram-node-service { border-color:#93c5fd; }
.diagram-node-database, .diagram-node-storage { border-color:#c4b5fd; }
.diagram-node-queue { border-color:#c4b5fd; }
.diagram-node-monitoring, .diagram-icon-logging, .diagram-icon-dashboard, .diagram-icon-analytics { border-color:#5eead4; }
.diagram-node-success { border-color:#86efac; }
.diagram-icon-retry, .diagram-node-error, .diagram-node-failure { border-color:#fdba74; }
.diagram-connector {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 30px;
}
.diagram-connector:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 3px solid #cbd8e6;
  transform: translateX(-50%);
}
.diagram-connector:after {
  content: '↓';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #4b5563;
  font-size: 25px;
  line-height: 1;
  background: #fff;
  padding: 0 7px;
}
.diagram-connector span {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 260px;
  padding: 3px 12px;
  border: 1px solid #dce5f0;
  border-radius: 999px;
  background: #fff;
  color: var(--mutedTextColor);
  font-size: 11px;
  font-weight: 800;
  text-align: center;

}
.diagram-parallel {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.diagram-parallel-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.diagram-parallel-row .diagram-node {
  width: 92%;
  height: 100%;
  min-height: 96px;
  grid-template-columns: 76px minmax(0, 1fr);
  padding: 10px 14px;
  margin: auto;
}
.diagram-parallel-row .diagram-node-icon-img { width: 56px; height: 56px; }
.diagram-parallel-row .diagram-node strong { font-size: 16.5px; }
.diagram-parallel-row .diagram-node p { font-size: 11.5px; line-height: 1.3; }
.diagram-branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  align-items: stretch;
  margin: 8px 0 4px;
}
.diagram-branch {
  padding: 12px 14px 12px;
  border: 1.5px dashed #b8c6d8;
  border-radius: 16px;
  background: rgba(255,255,255,.75);

}
.diagram-branch-title {
  display: block;
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--textColor);
}
.diagram-branch:first-child .diagram-branch-title { color:#138a3d; }
.diagram-branch:last-child .diagram-branch-title { color:#c2410c; }
.diagram-branch-desc {
  margin: 0 0 12px;
  font-size: 11.2px;
  line-height: 1.32;
  color: var(--mutedTextColor);
}
.diagram-branch-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.diagram-branch-flow .diagram-node {
  width: 92%;
  min-height: 70px;
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 8px 11px;
  border-width: 1.5px;
  border-radius: 11px;
  margin-left: auto;
  margin-right: auto;
}
.diagram-branch-flow .diagram-node strong { font-size: 13px; margin-bottom: 3px; }
.diagram-branch-flow .diagram-node p { font-size: 10.2px; line-height: 1.22; }
.diagram-branch-flow .diagram-node-icon-img { width: 42px; height: 42px; }
.diagram-branch-flow .diagram-node-num { width: 18px; height: 18px; font-size: 8.8px; left: -7px; top: -7px; }
.diagram-branch-flow .diagram-connector { min-height: 24px; }
.diagram-branch-flow .diagram-connector span { font-size: 9.5px; padding: 2px 8px; }
.diagram-branch-flow .diagram-connector:after { font-size: 20px; }

.diagram-parallel + .diagram-connector,
.diagram-node + .diagram-connector,
.diagram-branches + .diagram-connector {
  margin-top: 0;
}
.diagram-parallel-row { position: relative; }
.diagram-parallel-row:after,
.diagram-branches:before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.diagram-parallel-row:after {
  bottom: -16px;
  width: 50%;
  height: 16px;
  border-left: 3px solid #cbd8e6;
  border-bottom: 3px solid #cbd8e6;
  border-right: 3px solid #cbd8e6;
  border-radius: 0 0 10px 10px;
}
.diagram-branches:before {
  top: -16px;
  width: 50%;
  height: 16px;
  border-left: 3px solid #cbd8e6;
  border-top: 3px solid #cbd8e6;
  border-right: 3px solid #cbd8e6;
  border-radius: 10px 10px 0 0;
}

/* Keep nested graph branches readable when a node fans out into many small paths. */
.graph-branch .diagram-branches {
  grid-template-columns: 1fr;
  gap: 10px;
}
.graph-branch .diagram-branches:before {
  content: none;
}
.graph-branch .diagram-branch {
  padding: 11px 12px;
}
.graph-branch .diagram-branch-flow .diagram-node {
  width: 88%;
}

.diagram-explanations {
  padding: 15px 14px 7px;
  border: 1px solid #dbe7f3;
  border-radius: 18px;
  background: #fff;

}
.diagram-explanations h5 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.14;
  color: var(--textColor);
  font-weight: 900;
}
.diagram-explanation {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px solid #edf2f7;
}
.diagram-explanation:first-of-type { border-top: 0; padding-top: 0; }
.diagram-explanation span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--firstColor);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
}
.diagram-explanation strong {
  display: block;
  color: var(--textColor);
  font-size: 12.5px;
  line-height: 1.2;
}
.diagram-explanation p {
  margin: 4px 0 0;
  color: var(--mutedTextColor);
  font-size: 11.8px;
  line-height: 1.42;
}
@media (max-width: 980px) {
  .architecture-diagram-layout { grid-template-columns: 1fr; }
  .diagram-explanations { order: 2; }
}
@media (max-width: 760px) {
  .architecture-flow-wrap { padding: 18px 12px !important; }
  .architecture-flow-wrap h4 { text-align: center; font-size: 21px !important; }
  .diagram-node,
  .diagram-parallel-row .diagram-node,
  .diagram-branch-flow .diagram-node { width: 100%; min-height: 0; grid-template-columns: 64px minmax(0,1fr); padding: 14px; }
  .diagram-node-icon-img { width: 44px; height: 44px; }
  .diagram-node strong { font-size: 17px; margin-bottom: 6px; }
  .diagram-node p { font-size: 10.5px; line-height: 1.4; }
  .diagram-parallel-row, .diagram-branches, .interviewer-next-list { grid-template-columns: 1fr; }
  .diagram-connector span { max-width: 220px; }
}

.interviewer-next-card {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #f3c8c8;
  border-radius: 16px;
  background: linear-gradient(180deg,#fffafa,#fff);
}
.interviewer-next-card h4 {
  margin: 0 0 12px !important;
  color: #b91c1c !important;
  font-size: 20px !important;
}
.interviewer-next-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px 18px;
}
.interviewer-next-item {
  position: relative;
  padding-left: 30px;
  color: var(--textColor);
}
.interviewer-next-item:before {
  content: '?';
  position: absolute;
  left: 0;
  top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.interviewer-next-item strong {
  display: block;
  margin-bottom: 6px;
  color: var(--textColor);
  font-size: 15px;
  line-height: 1.35;
}
.interviewer-next-item .interview-answer-rich,
.interviewer-next-item .interview-answer-rich p {
  margin: 0;
  color: var(--mutedTextColor);
  line-height: 1.5;
}
@media (max-width: 980px) {
  .architecture-diagram-layout { grid-template-columns: 1fr; }
  .diagram-explanations { order: 2; }
}
@media (max-width: 760px) {
  .architecture-flow-wrap { padding: 18px 12px !important; }
  .architecture-flow-wrap h4 { text-align: center; font-size: 21px !important; }
  .diagram-node { width: 100%; min-height: 0; padding: 15px 14px 16px; }
  .diagram-node-icon { width: 52px; height: 52px; margin-bottom: 12px; font-size: 24px; }
  .diagram-node strong { font-size: 17px; margin-bottom: 9px; }
  .diagram-node p { font-size: 10.5px; line-height: 1.4; }
  .diagram-parallel-row, .diagram-branches, .interviewer-next-list { grid-template-columns: 1fr; }
  .diagram-connector span { max-width: 220px; }
}

/* Interview question sidebar: document-attached, collapsible */
.interview-question-layout{
  position:relative;
  display:grid;
  grid-template-columns:minmax(240px,320px) minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.interview-sidebar-rail{
  position:sticky;
  top:18px;
  align-self:start;
  max-height:calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:3;
  min-width:0;
}
.interview-question-sidebar{
  position:relative;
  align-self:start;
  max-height:calc(100vh - 128px);
  overflow:auto;
  background:#fff;
  border:1px solid var(--borderColor);
  border-radius:18px;

  padding:18px 16px;
}
.interview-sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  color:var(--h1Color);
  font-size:18px;
}
.interview-sidebar-toggle{
  width:32px;
  height:32px;
  border:1px solid var(--borderColor);
  background:#f7f9fd;
  color:var(--h1Color);
  border-radius:999px;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.interview-question-sidebar ol{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.interview-question-sidebar a{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  align-items:start;
  padding:1px 0px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--textColor);
  text-decoration:none;
  font-size:14px;
  line-height:1.35;
}
.interview-question-sidebar a:hover,
.interview-question-sidebar a.active{
  background:#f1f6ff;
  border-color:#d6e2f2;
  color:var(--h1Color);
}
.interview-question-sidebar a span{
  font-weight:800;
  color:var(--h1Color);
}
.interview-question-content{min-width:0;}
.interview-lazy-status{
  display:flex;
  min-height:56px;
  margin:18px 0 4px;
  align-items:center;
  justify-content:center;
  border:1px solid #dce5f1;
  border-radius:14px;
  background:#f8fafc;
  color:var(--mutedTextColor);
  font-size:14px;
  font-weight:700;
  text-align:center;
}
.interview-lazy-status.is-loading span::before{
  display:inline-block;
  width:14px;
  height:14px;
  margin-right:9px;
  border:2px solid #c9d5e6;
  border-top-color:#365f9d;
  border-radius:50%;
  content:"";
  vertical-align:-2px;
  animation:interview-lazy-spin .7s linear infinite;
}
.interview-lazy-status.is-error{border-color:#e8c8c3;background:#fff8f7;color:#8d2f22;}
@keyframes interview-lazy-spin{to{transform:rotate(360deg);}}
.interview-sidebar-handle{
  display:none;
  position:sticky;
  top:18px;
  align-self:start;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  border:1px solid var(--borderColor);
  background:#fff;
  color:var(--h1Color);
  border-radius:14px;

  padding:14px 8px;
  font-weight:800;
  cursor:pointer;
  z-index:3;
}
.interview-question-layout.sidebar-collapsed{
  grid-template-columns:48px minmax(0,1fr);
}
.interview-question-layout.sidebar-collapsed .interview-sidebar-rail,
.interview-question-layout.sidebar-collapsed .interview-question-sidebar{
  display:none;
}
.interview-question-layout.sidebar-collapsed .interview-sidebar-handle{
  display:block;
}
.interview-question{scroll-margin-top:24px;}
@media (max-width:900px){
  .interview-question-layout{
    grid-template-columns:1fr;
    gap:18px;
  }
  .interview-question-layout:not(.sidebar-mobile-expanded) .interview-sidebar-rail,
  .interview-question-layout:not(.sidebar-mobile-expanded) .interview-question-sidebar{
    display:none !important;
  }
  .interview-question-layout:not(.sidebar-mobile-expanded) > .interview-sidebar-handle{
    display:flex !important;
  }
  .interview-sidebar-rail{
    position:relative;
    top:auto;
    max-height:none;
  }
  .interview-question-sidebar{
    position:relative;
    top:auto;
    max-height:320px;
  }
  .interview-sidebar-handle{
    position:relative;
    top:auto;
    writing-mode:horizontal-tb;
    transform:none;
    width:max-content;
  }
  .interview-question-layout.sidebar-collapsed{
    grid-template-columns:1fr;
  }
}

/* Top-employer banner: first 10 mid-level US employer ranges and premiums. */
.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
}

.interview-resume-banner .interview-employer-range-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px !important;
  width: 100%;
}

.interview-employer-range-item {
  --salary-range-color: var(--firstColor);
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] a.interview-employer-range-item {
  display: block !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 10px 11px !important;
  overflow: hidden;
  border: 1px solid var(--borderColor);
  border-radius: 14px !important;
  background: #fff;
  color: var(--h1Color) !important;
  text-decoration: none !important;
  white-space: normal;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] a.interview-employer-range-item:is(:hover, :focus-visible) {
  border-color: var(--salary-range-color) !important;
  background: var(--occupation-control-hover, #f4fbf2) !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .interview-employer-range-heading {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin: 0 !important;
  color: var(--h1Color) !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.15 !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .interview-employer-range-heading > span {
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  font-size: inherit !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .interview-employer-range-heading small {
  flex: 0 0 auto;
  color: var(--salary-range-color);
  font-size: 11px;
  font-weight: 800;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .interview-employer-range-values {
  display: grid !important;
  grid-template-columns: max-content 26px max-content;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 8px !important;
  color: var(--h1Color) !important;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1 !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .interview-employer-range-track {
  position: relative;
  display: block;
  width: 26px;
  min-width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--salary-range-color);
}

.interview-employer-range-track::before,
.interview-employer-range-track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--salary-range-color);
  transform: translateY(-50%);
}

.interview-employer-range-track::before { left: 0; }
.interview-employer-range-track::after { right: 0; }

.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .salary-range-color-2 { --salary-range-color: #27863a; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .salary-range-color-3 { --salary-range-color: #16a6a1; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .salary-range-color-4 { --salary-range-color: #168fd2; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .salary-range-color-5 { --salary-range-color: #3867df; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .salary-range-color-6 { --salary-range-color: #8a45dc; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] .salary-range-color-7 { --salary-range-color: #a934d5; }

html.dark-theme body.theme-base .interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] a.interview-employer-range-item {
  background: var(--body-background-color) !important;
  border-color: var(--border-heavy) !important;
}

html.dark-theme body.theme-base .interview-employer-range-heading,
html.dark-theme body.theme-base .interview-employer-range-values {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

@media (max-width: 900px) {
  .interview-resume-banner[data-interview-resume-banner-variant="salary-by-top-employers"] {
    grid-template-columns: 1fr !important;
  }

  .interview-resume-banner .interview-employer-range-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Salary comparison banner: first 10 adjacent-role US ranges. */
.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
}

.interview-resume-banner .interview-comparison-range-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px !important;
  width: 100%;
}

.interview-comparison-range-item {
  --salary-range-color: var(--firstColor);
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] a.interview-comparison-range-item {
  display: block !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 10px 11px !important;
  overflow: hidden;
  border: 1px solid var(--borderColor);
  border-radius: 14px !important;
  background: #fff;
  color: var(--h1Color) !important;
  text-decoration: none !important;
  white-space: normal;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] a.interview-comparison-range-item:is(:hover, :focus-visible) {
  border-color: var(--salary-range-color) !important;
  background: var(--occupation-control-hover, #f4fbf2) !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .interview-comparison-range-heading {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin: 0 !important;
  color: var(--h1Color) !important;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1.15 !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .interview-comparison-range-heading > span {
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  font-size: inherit !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .interview-comparison-range-heading small {
  flex: 0 0 auto;
  color: var(--mutedTextColor);
  font-size: 9px;
  font-weight: 700;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .interview-comparison-range-values {
  display: grid !important;
  grid-template-columns: max-content 26px max-content;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 8px !important;
  color: var(--h1Color) !important;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1 !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .interview-comparison-range-track {
  position: relative;
  display: block;
  width: 26px;
  min-width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--salary-range-color);
}

.interview-comparison-range-track::before,
.interview-comparison-range-track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--salary-range-color);
  transform: translateY(-50%);
}

.interview-comparison-range-track::before { left: 0; }
.interview-comparison-range-track::after { right: 0; }

.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .salary-range-color-2 { --salary-range-color: #27863a; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .salary-range-color-3 { --salary-range-color: #16a6a1; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .salary-range-color-4 { --salary-range-color: #168fd2; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .salary-range-color-5 { --salary-range-color: #3867df; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .salary-range-color-6 { --salary-range-color: #8a45dc; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] .salary-range-color-7 { --salary-range-color: #a934d5; }

html.dark-theme body.theme-base .interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] a.interview-comparison-range-item {
  background: var(--body-background-color) !important;
  border-color: var(--border-heavy) !important;
}

html.dark-theme body.theme-base .interview-comparison-range-heading,
html.dark-theme body.theme-base .interview-comparison-range-values {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

html.dark-theme body.theme-base .interview-comparison-range-heading small {
  color: var(--text-tertiary) !important;
  -webkit-text-fill-color: var(--text-tertiary) !important;
}

@media (max-width: 900px) {
  .interview-resume-banner[data-interview-resume-banner-variant="salary-comparison"] {
    grid-template-columns: 1fr !important;
  }

  .interview-resume-banner .interview-comparison-range-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Worldwide salary banner: first 10 local median ranges with circular flags. */
.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
}

.interview-resume-banner .interview-worldwide-range-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px !important;
  width: 100%;
}

.interview-worldwide-range-item {
  --salary-range-color: var(--firstColor);
}

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] a.interview-worldwide-range-item {
  display: block !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 10px 11px !important;
  overflow: hidden;
  border: 1px solid var(--borderColor);
  border-radius: 14px !important;
  background: #fff;
  color: var(--h1Color) !important;
  text-decoration: none !important;
  white-space: normal;
}

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] a.interview-worldwide-range-item:is(:hover, :focus-visible) {
  border-color: var(--salary-range-color) !important;
  background: var(--occupation-control-hover, #f4fbf2) !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .interview-worldwide-range-heading {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin: 0 !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .interview-worldwide-country {
  display: flex !important;
  align-items: center;
  min-width: 0;
  gap: 7px;
  margin: 0 !important;
  color: var(--h1Color) !important;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1.15 !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .interview-worldwide-country span {
  min-width: 0;
  margin: 0 !important;
  font-size: inherit !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .country-flag {
  display: block;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .interview-worldwide-range-unit {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  color: var(--mutedTextColor);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .interview-worldwide-range-values {
  display: grid !important;
  grid-template-columns: max-content 26px max-content;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 8px !important;
  color: var(--h1Color) !important;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1 !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .interview-worldwide-range-track {
  position: relative;
  display: block;
  width: 26px;
  min-width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--salary-range-color);
}

.interview-worldwide-range-track::before,
.interview-worldwide-range-track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--salary-range-color);
  transform: translateY(-50%);
}

.interview-worldwide-range-track::before { left: 0; }
.interview-worldwide-range-track::after { right: 0; }

.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .salary-range-color-2 { --salary-range-color: #27863a; }
.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .salary-range-color-3 { --salary-range-color: #16a6a1; }
.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .salary-range-color-4 { --salary-range-color: #168fd2; }
.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .salary-range-color-5 { --salary-range-color: #3867df; }
.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .salary-range-color-6 { --salary-range-color: #8a45dc; }
.interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] .salary-range-color-7 { --salary-range-color: #a934d5; }

html.dark-theme body.theme-base .interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] a.interview-worldwide-range-item {
  background: var(--body-background-color) !important;
  border-color: var(--border-heavy) !important;
}

html.dark-theme body.theme-base .interview-worldwide-country,
html.dark-theme body.theme-base .interview-worldwide-range-values {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

html.dark-theme body.theme-base .interview-worldwide-range-unit {
  color: var(--text-tertiary) !important;
  -webkit-text-fill-color: var(--text-tertiary) !important;
}

@media (max-width: 900px) {
  .interview-resume-banner[data-interview-resume-banner-variant="worldwide-salary-ranges"] {
    grid-template-columns: 1fr !important;
  }

  .interview-resume-banner .interview-worldwide-range-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final interview page alignment and compact typography */
.interview-content-heading {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  text-align: center !important;
}
.interview-question-sidebar {
  margin-top: 0 !important;
}
.interview-question-title,
.interview-question h3.interview-question-title {
  margin-bottom: 18px !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}
.interview-answer-rich {
  color: var(--mutedTextColor);
  font-size: 15px !important;
  line-height: 1.65 !important;
}
.interview-answer-rich p {
  font-size: inherit !important;
  line-height: inherit !important;
}
.interview-code-block code {
  color: inherit;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.interviewer-next-card {
  border-color: #bfdbfe !important;
  background: linear-gradient(180deg,#f8fbff,#fff) !important;
}
.interviewer-next-card h4 {
  color: #1d4ed8 !important;
}
.interviewer-next-item:before {
  background: #2563eb !important;
}
.interviewer-next-item strong {
  color: var(--h1Color) !important;
}
.interviewer-next-item .interview-code-block,
.interviewer-next-item pre.interview-code-block {
  max-width: 100%;
  margin-top: 10px !important;
  padding: 14px 16px !important;
  overflow-x: auto;
}
.interviewer-next-item .interview-code-block code {
  font-size: 14px !important;
}
@media (max-width: 900px) {
  .interview-content-heading { text-align: center !important; }
}

/* Compact programming interview reviewer card */
.interview-reviewer-card{
  width:100%;
  margin:0 !important;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--borderColor);
  border-radius:18px;
  background:#fff;

  cursor:pointer;
}
@media (max-width:760px){
  .interview-reviewer-card{
    padding:12px 13px;
  }
  .reviewer-avatar{width:40px;height:40px;}
}

/* Final reviewer + question sidebar layout refinements */
.interview-question-layout{
  align-items:start !important;
}
.interview-sidebar-area{
  position:sticky;
  top:18px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  z-index:3;
}
.interview-sidebar-area .interview-sidebar-rail{
  position:relative !important;
  top:auto !important;
  max-height:none !important;
  display:block;
}
.interview-sidebar-area .interview-reviewer-card{
  width:100% !important;
  min-height:72px !important;
  margin:0 !important;
  padding:12px 16px !important;
  border-radius:20px !important;

}
.interview-sidebar-area .reviewer-avatar{
  width:42px !important;
  height:42px !important;
}
.interview-sidebar-area .reviewer-kicker{
  font-size:12px !important;
  line-height:1.1 !important;
}
.interview-sidebar-area .reviewer-name-btn{
  font-size:17px !important;
  line-height:1.05 !important;
}
.interview-sidebar-area .reviewer-trust{
  font-size:12px !important;
  line-height:1.2 !important;
}
.interview-question-sidebar{
  max-height:calc(100vh - 128px) !important;
}
.interview-question-layout.sidebar-collapsed{
  grid-template-columns:minmax(240px,320px) minmax(0,1fr) !important;
}
.interview-question-layout.sidebar-collapsed .interview-sidebar-rail,
.interview-question-layout.sidebar-collapsed .interview-question-sidebar{
  display:none !important;
}
.interview-question-layout.sidebar-collapsed .interview-sidebar-area{
  position:sticky;
  top:18px;
}
.interview-question-layout.sidebar-collapsed .interview-sidebar-handle{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:58px;
  padding:14px 18px;
  border-radius:18px;
  writing-mode:horizontal-tb !important;
  transform:none !important;
  font-size:18px;
}
.interview-sidebar-handle-arrow{
  font-size:18px;
  line-height:1;
}
@media (max-width:900px){
  .interview-question-layout{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .interview-sidebar-area{
    position:relative !important;
    top:auto !important;
    width:100%;
    max-width:520px;
    margin:0 auto 4px;
  }
  .interview-sidebar-area .interview-reviewer-card{
    min-height:64px !important;
    padding:10px 14px !important;
  }
  .interview-sidebar-area .reviewer-avatar{
    width:38px !important;
    height:38px !important;
  }
  .interview-sidebar-area .reviewer-name-btn{
    font-size:16px !important;
  }
  .interview-sidebar-area .reviewer-trust{
    font-size:11.5px !important;
  }
  .interview-question-sidebar{
    max-height:320px !important;
  }
  .interview-sidebar-handle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:58px;
    padding:14px 18px;
    border-radius:18px;
    writing-mode:horizontal-tb !important;
    transform:none !important;
    font-size:18px;
  }
  .interview-question-layout:not(.sidebar-collapsed) .interview-sidebar-handle{
    display:none !important;
  }
  .interview-question-layout.sidebar-collapsed{
    grid-template-columns:1fr !important;
  }
  .interview-question-content{
    width:100%;
  }
}

/* Final interview page requested updates */
.interview-question {
    margin-top: 0px !important;
    margin-bottom: 18px !important;
    overflow: hidden !important;
    max-width: 100% !important;
}
.interview-sidebar-area .reviewer-avatar {
    width: 62px !important;
    height: 62px !important;
}
.interview-sidebar-area .reviewer-trust {
    font-size: 11px !important;
    line-height: 1.2 !important;
}
.interview-sidebar-area .reviewer-kicker {
    font-size: 14px !important;
    line-height: 1.1 !important;
}
.interview-sidebar-area .reviewer-name-btn {
    font-size: 20px !important;
    line-height: 1.35 !important;
}

/* Final interview page SEO title, follow-up, and resume banner refinements */
.interviewer-next-card .answer-point {
  border-left: 5px solid var(--firstColor) !important;
}
.interview-resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 30px;
  padding: 18px 20px;
  border: 1px solid var(--borderColor);
  border-radius: 18px;
  background: linear-gradient(135deg,#fbfcff,#fff);

}
.interview-resume-banner strong {
  display: block;
  color: var(--h1Color);
  font-size: 20px;
  line-height: 1.2;
}
.interview-resume-banner span {
  display: block;
  margin-top: 4px;
  color: var(--mutedTextColor);
  line-height: 1.35;
}
.interview-resume-banner nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.interview-resume-banner a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--borderColor);
  border-radius: 999px;
  background: #fff;
  color: var(--h1Color);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.interview-resume-banner a:hover {
  border-color: var(--firstColor);
  background: #f4fbf2;
}
@media (max-width: 760px) {
  .interview-resume-banner {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
  }
  .interview-resume-banner nav {
    justify-content: flex-start;
  }
}

/* Final interview sidebar collapse, resume banner, and follow-up refinements */
.interviewer-next-card .answer-point {
  border-left: 5px solid var(--firstColor) !important;
}

.interview-resume-banner {
  position: relative;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 4px 0 34px !important;
  padding: 20px 22px !important;
  border: 1px solid #cfe0f5 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at top left, rgba(79,174,61,.14), transparent 34%),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #f4f9ff 100%) !important;

}
.interview-resume-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--firstColor), #0b4ea2);
}
.interview-resume-banner-copy {
  position: relative;
  z-index: 1;
}
.interview-resume-banner strong {
  display: block !important;
  margin: 0 !important;
  color: var(--h1Color) !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
}
.interview-resume-banner span:not(.resume-banner-kicker) {
  display: block !important;
  margin-top: 6px !important;
  color: var(--mutedTextColor) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
.interview-resume-banner nav {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}
.interview-resume-banner a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px !important;
  padding: 8px 15px !important;
  border: 1px solid #cfe0f5 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #0b4ea2 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap;

}
.interview-resume-banner a:hover {
  border-color: var(--firstColor) !important;
  background: #f4fbf2 !important;
  color: var(--h1Color) !important;
}

@media (min-width: 901px) {
  .interview-question-layout.sidebar-collapsed {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }
  .interview-question-layout.sidebar-collapsed .interview-sidebar-area {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    position: sticky !important;
    top: 18px !important;
    align-self: start !important;
  }
  .interview-question-layout.sidebar-collapsed .interview-reviewer-card,
  .interview-question-layout.sidebar-collapsed .interview-sidebar-rail,
  .interview-question-layout.sidebar-collapsed .interview-question-sidebar {
    display: none !important;
  }
  .interview-question-layout.sidebar-collapsed .interview-sidebar-handle {
    display: flex !important;
    width: 56px !important;
    min-height: 190px !important;
    padding: 16px 8px !important;
    border-radius: 18px !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: var(--h1Color) !important;
    background: #fff !important;
    border: 1px solid var(--borderColor) !important;

  }
  .interview-question-layout.sidebar-collapsed .interview-sidebar-handle-arrow {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .interview-resume-banner {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px 18px !important;
  }
  .interview-resume-banner nav {
    justify-content: flex-start !important;
  }
  .interview-sidebar-handle {
    line-height: 1 !important;
  }
  .interview-sidebar-handle-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transform: translateY(1px) !important;
  }
}

/* Final interview sidebar, banner, and follow-up requested refinements */
.interview-sidebar-handle-arrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:1em !important;
  line-height:1 !important;
  vertical-align:middle !important;
  transform:translateY(0) !important;
}
@media (min-width: 901px){
  .interview-question-layout{
    gap:28px !important;
  }
  .interview-question-layout.sidebar-collapsed{
    grid-template-columns:68px minmax(0,1fr) !important;
    gap:5px !important;
  }
}
.interview-resume-banner{
  grid-template-columns:minmax(620px, 620px) minmax(0, 1fr) !important;
}
.interviewer-next-card .answer-point{
  border-left:5px solid #2f65d8 !important;
}
@media (max-width: 900px){
  .interview-resume-banner{
    grid-template-columns:1fr !important;
  }
  .interview-sidebar-handle-arrow{
    margin-left:4px !important;
    transform:translateY(-1px) !important;
  }
}

/* Final reviewer eligibility + sidebar SVG/mobile alignment fixes */
.interview-sidebar-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.interview-collapse-icon{
  width:18px;
  height:18px;
  display:block;
}
.interview-sidebar-handle{
  display:flex;
  align-items:center !important;
  justify-content:center !important;
}
.interview-sidebar-handle-arrow{
  width:18px !important;
  height:18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 18px !important;
  margin-left:6px !important;
  transform:none !important;
  vertical-align:middle !important;
}
.interview-sidebar-handle-arrow svg,
.interview-sidebar-handle-arrow path{
  vector-effect:non-scaling-stroke;
}
.interview-resume-banner{
  grid-template-columns:minmax(420px, 420px) minmax(0, 1fr) !important;
}
@media (max-width:900px){
  .interview-sidebar-handle{
    min-height:58px !important;
    line-height:1 !important;
  }
  .interview-sidebar-handle-arrow{
    margin-left:8px !important;
    transform:none !important;
  }
  .interview-resume-banner{
    grid-template-columns:1fr !important;
  }
}
@media (min-width:901px){
  .interview-question-layout.sidebar-collapsed .interview-sidebar-handle-arrow{
    display:none !important;
  }
}

/* Sidebar duplicate-handle and centered question heading fix */
.interview-sidebar-head{
  position:relative !important;
  justify-content:center !important;
  text-align:center !important;
}
.interview-sidebar-head strong{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}
.interview-sidebar-toggle{
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}
.interview-question-layout:not(.sidebar-collapsed) .interview-sidebar-handle{
  display:none !important;
}
.interview-question-layout.sidebar-collapsed .interview-sidebar-handle{
  display:flex !important;
}
@media (max-width:900px){
  .interview-question-layout:not(.sidebar-collapsed) .interview-sidebar-handle{
    display:none !important;
  }
  .interview-question-layout.sidebar-collapsed .interview-sidebar-handle{
    display:flex !important;
  }
}

/* Interview PDF download card */
.interview-pdf-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px 12px;
  align-items:center;
  padding:14px 15px;
  margin-bottom:14px;
  border:1px solid #cfe0f5;
  border-radius:22px;
  background:linear-gradient(135deg,#f8fbff,#ffffff 70%,#f4f9ff);

}
.interview-pdf-icon{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--firstColor);background:rgba(79,174,61,.11);
}
.interview-pdf-icon svg{width:23px;height:23px;display:block;}
.interview-pdf-copy strong{display:block;font-size:15px;line-height:1.15;color:var(--textColor);}
.interview-pdf-copy span{display:block;margin-top:2px;font-size:12px;color:var(--mutedTextColor);line-height:1.25;}
.interview-pdf-link{
  display:flex;align-items:center;justify-content:center;
  padding:8px 10px;border-radius:999px;
  background:var(--firstColor);color:#fff !important;text-decoration:none;
  font-size:12px;font-weight:800;
}
.interview-pdf-link.bundle{background:#2563eb;}

/* Last updated + clearer PDF download card + sidebar collapse refinements */
.interview-sidebar-area > aside,
.interview-sidebar-area .interview-question-sidebar{
  position:relative;
}
.interview-sidebar-mini-toggle{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  width:30px !important;
  height:30px !important;
  border:1px solid var(--borderColor) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--h1Color) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;
  z-index:5 !important;
}
.interview-sidebar-mini-toggle svg{width:16px !important;height:16px !important;display:block !important;}
.interview-last-updated-card{
  padding:14px 48px 14px 16px;
  border:1px solid #cfe0f5;
  border-radius:20px;
  background:linear-gradient(135deg,#f8fbff,#ffffff 70%,#f3f8ff);

}
.interview-last-updated-card span{
  display:block;
  color:#2563eb;
  font-size:12px;
  line-height:1.15;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.interview-last-updated-card strong{
  display:block;
  margin-top:3px;
  color:var(--h1Color);
  font-size:16px;
  line-height:1.2;
}
.interview-pdf-card{
  grid-template-columns:42px minmax(0,1fr) !important;
  padding:16px 48px 16px 15px !important;
}
.interview-pdf-actions{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:4px;
}
.interview-pdf-link{
  min-height:44px;
  border-radius:14px !important;
  padding:8px 12px !important;
  flex-direction:column;
  gap:2px;
  text-align:left !important;
  align-items:flex-start !important;
}
.interview-pdf-link span{
  color:rgba(255,255,255,.82);
  font-size:10px;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.interview-pdf-link strong{
  color:#fff;
  font-size:13px;
  line-height:1.15;
}
.interview-question-layout.sidebar-collapsed .interview-last-updated-card,
.interview-question-layout.sidebar-collapsed .interview-pdf-card{
  display:none !important;
}
@media (max-width:900px){
  .interview-question-layout.sidebar-collapsed .interview-pdf-card,
  .interview-question-layout.sidebar-collapsed .interview-last-updated-card{
    display:grid !important;
  }
  .interview-question-layout.sidebar-collapsed .interview-sidebar-area{
    width:100% !important;
    max-width:520px !important;
  }
  .interview-question-layout.sidebar-collapsed .interview-sidebar-handle{
    margin-top:0 !important;
  }
}
.interviewer-next-card .interviewer-next-item + .interviewer-next-item{
  border-top:0 !important;
  margin-top:10px !important;
  padding-top:10px !important;
  position:relative;
}
.interviewer-next-card .interviewer-next-item + .interviewer-next-item::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(520px,80%);
  border-top:1px solid #dce9f9;
}

/* Final interview page layout cleanup: no left last-updated card; compact download card; h3 subheading. */
.interview-detail-heading{
  margin: 18px auto 18px !important;
  text-align: center !important;
  color: var(--h1Color) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}
.interview-detail-heading span{
  white-space: nowrap;
}
.interview-pdf-card{
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 16px 48px 16px 16px !important;
  border: 1px solid var(--borderColor) !important;
  border-radius: 20px !important;
  background: #fff !important;

}
.interview-pdf-card .interview-pdf-icon{
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #eaf8e5 !important;
  color: var(--firstColor) !important;
}
.interview-pdf-card .interview-pdf-icon svg{
  width: 22px !important;
  height: 22px !important;
  display:block !important;
}
.interview-pdf-copy strong{
  display:block !important;
  color: var(--h1Color) !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  margin: 0 0 3px !important;
}
.interview-pdf-copy span{
  display:block !important;
  color: var(--mutedTextColor) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
.interview-pdf-copy a{
  text-decoration: none !important;
}
.interview-pdf-copy b{
  color: #9aa8bd !important;
  font-weight: 700 !important;
  padding: 0 2px !important;
}
.interview-question-sidebar{
  padding: 18px 16px 16px !important;
}
.interview-sidebar-head{
  position: relative !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 34px !important;
  margin-bottom: 16px !important;
}
.interview-sidebar-head .interview-sidebar-toggle{
  position: absolute !important;
}
.interviewer-next-card .interviewer-next-list{
  gap: 12px 28px !important;
}
.interviewer-next-item strong{
  display:inline-block !important;
  width:auto !important;
  max-width:100% !important;
  padding:0 !important;
  background: transparent !important;
  border-radius:0 !important;
}
.interviewer-next-card .interviewer-next-item + .interviewer-next-item{
  margin-top:0 !important;
  padding-top:0 !important;
}
.interviewer-next-card .interviewer-next-item + .interviewer-next-item::before{
  display:none !important;
  content:none !important;
}
@media (max-width:900px){
  .interview-detail-heading{
    font-size: 14px !important;
    margin: 14px auto 14px !important;
  }
  .interview-pdf-card{
    display:grid !important;
  }
}

/* Final sidebar/download/follow-up/code polish */
.interview-pdf-card{
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  min-height:0 !important;
  padding:16px 24px 16px 16px !important;
  margin-bottom:0 !important;
  border:1px solid var(--borderColor) !important;
  border-radius:20px !important;
  background:#fff !important;

}
.interview-pdf-buttons{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin-top:8px !important;
}
.interview-pdf-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:1px solid #cfdaf0 !important;
  background:#fff !important;
  color:#1d4ed8 !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}
.interview-pdf-pill.pdf{
  background:var(--firstColor) !important;
  border-color:var(--firstColor) !important;
  color:#fff !important;
}
.interview-pdf-pill.bundle{
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#fff !important;
}
.interview-question-sidebar{position:relative !important;}
.interview-sidebar-head .interview-sidebar-toggle,
.interview-question-sidebar .interview-sidebar-toggle{
  position:absolute !important;
}
.interview-sidebar-head{
  padding-right:52px !important;
}
.interviewer-next-card .interviewer-next-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start !important;
  gap:18px 42px !important;
}
.interviewer-next-card .interviewer-next-item{
  position:relative !important;
  padding-left:38px !important;
  margin:0 !important;
}
.interviewer-next-card .interviewer-next-item::before{
  content:'?' !important;
  display:inline-flex !important;
  position:absolute !important;
  left:0 !important;
  top:2px !important;
  width:24px !important;
  height:24px !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#2563eb !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:14px !important;
}
.interviewer-next-card .interviewer-next-item + .interviewer-next-item{
  border-top:0 !important;
  padding-top:0 !important;
  margin-top:0 !important;
}
.interviewer-next-card .interviewer-next-item + .interviewer-next-item::before{
  content:'?' !important;
  display:inline-flex !important;
  border-top:0 !important;
}
.interviewer-next-card .interviewer-next-item strong{
  display:block !important;
  margin:0 0 10px !important;
  padding:0 !important;
  background:transparent !important;
  color:var(--h1Color) !important;
  font-size:16px !important;
  line-height:1.35 !important;
  border-radius:0 !important;
}
.interviewer-next-card .interviewer-next-item .interview-answer-rich,
.interviewer-next-card .interviewer-next-item .interview-answer-rich p{
  font-size:15px !important;
  line-height:1.65 !important;
}
.interview-code-block,
.interview-question pre.interview-code-block{
  max-width:100% !important;
  overflow-x:auto !important;
  white-space:pre-wrap !important;
  padding:18px 20px !important;
  border-radius:18px !important;
}
.interview-code-block code{
  display:block !important;
  white-space:pre-wrap !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  font-size:14px !important;
  line-height:1.55 !important;
}
@media (max-width:900px){
  .interviewer-next-card .interviewer-next-list{grid-template-columns:1fr !important;}
}

/* Final correction: download card uses plain nav-style pills on one centered line; follow-up icons align evenly; code blocks keep readable formatting. */
.interview-pdf-card{
  display:block !important;
  position:relative !important;
  padding:20px 56px 20px 22px !important;
  margin-bottom:0 !important;
  border:1px solid var(--borderColor) !important;
  border-radius:20px !important;
  background:#fff !important;

}
.interview-pdf-card .interview-pdf-icon{display:none !important;}
.interview-pdf-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  width:100% !important;
}
.interview-pdf-copy strong{
  display:block !important;
  margin:0 0 14px !important;
  color:var(--h1Color) !important;
  font-size:24px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
}
.interview-pdf-buttons{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  margin:0 !important;
}
.interview-pdf-pill,
.interview-pdf-pill.pdf,
.interview-pdf-pill.bundle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:10px 18px !important;
  border:1px solid var(--borderColor) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--textColor) !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:500 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}
.interview-pdf-pill:hover,
.interview-pdf-pill.pdf:hover,
.interview-pdf-pill.bundle:hover{
  background:#f5f7fb !important;
  border-color:#c7d2e3 !important;
  color:var(--textColor) !important;
  text-decoration:none !important;
}
.interviewer-next-card .interviewer-next-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px 52px !important;
  align-items:start !important;
}
.interviewer-next-card .interviewer-next-item{
  display:grid !important;
  grid-template-columns:40px minmax(0,1fr) !important;
  column-gap:18px !important;
  align-items:start !important;
  padding-left:0 !important;
  margin:0 !important;
  min-width:0 !important;
}
.interviewer-next-card .interviewer-next-item::before,
.interviewer-next-card .interviewer-next-item + .interviewer-next-item::before{
  content:'?' !important;
  position:static !important;
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  display:inline-flex !important;
  width:32px !important;
  height:32px !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#2563eb !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:18px !important;
  line-height:1 !important;
  border-top:0 !important;
  transform:none !important;
}
.interviewer-next-card .interviewer-next-item strong,
.interviewer-next-card .interviewer-next-item .interview-answer-rich{
  grid-column:2 !important;
}
.interviewer-next-card .interviewer-next-item strong{
  margin:0 0 12px !important;
}
.interviewer-next-card .interviewer-next-item + .interviewer-next-item{
  border-top:0 !important;
  margin-top:0 !important;
  padding-top:0 !important;
}
.interviewer-next-card .interviewer-next-item + .interviewer-next-item::after{display:none !important;content:none !important;}
.interview-code-block,
.interview-question pre.interview-code-block{
  max-width:100% !important;
  overflow-x:auto !important;
  white-space:pre !important;
  padding:18px 22px !important;
  border-radius:18px !important;
  tab-size:4 !important;
}
.interview-code-block code{
  display:block !important;
  white-space:pre !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  font-size:14px !important;
  line-height:1.55 !important;
}
@media (max-width:900px){
  .interview-pdf-card{padding:20px 54px 20px 20px !important;}
  .interview-pdf-copy strong{font-size:22px !important;}
  .interview-pdf-buttons{gap:10px !important;}
  .interview-pdf-pill{font-size:14px !important;padding:10px 14px !important;}
  .interviewer-next-card .interviewer-next-list{grid-template-columns:1fr !important;gap:18px !important;}
}

/* User-requested final sidebar card and follow-up spacing overrides. Do not override these below. */
.interview-sidebar-mini-toggle {
    position: absolute !important;
    top: 0px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    border: 1px solid var(--borderColor) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--h1Color) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    z-index: 5 !important;
}
.interview-sidebar-mini-toggle svg{
    width: 16px !important;
    height: 16px !important;
}
.interview-pdf-card {
    display: block !important;
    position: relative !important;
    padding: 20px 22px 20px 22px !important;
    margin-bottom: 0 !important;
    border: 1px solid var(--borderColor) !important;
    border-radius: 20px !important;
    background: #fff !important;

}
.interview-pdf-copy a {
    font-weight: 500 !important;
    text-decoration: none !important;
}
.interview-pdf-copy strong {
    display: block !important;
    margin: 0 0 18px !important;
    color: var(--h1Color) !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}
.interview-pdf-copy,
.interview-pdf-buttons{
    text-align: center !important;
}
.interview-pdf-buttons{
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
}
.interview-pdf-pill,
.interview-pdf-pill.pdf,
.interview-pdf-pill.bundle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border: 1px solid var(--borderColor) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--h1Color) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.interview-pdf-pill:hover,
.interview-pdf-pill.pdf:hover,
.interview-pdf-pill.bundle:hover{
    background: #f5f7fb !important;
    border-color: #c7d2e3 !important;
    color: var(--h1Color) !important;
    text-decoration: none !important;
}
.interview-question-sidebar{
    display: block !important;
    position: relative !important;
    padding: 20px 22px 20px 22px !important;
    border: 1px solid var(--borderColor) !important;
    border-radius: 20px !important;
    background: #fff !important;

}
.interview-sidebar-head{
    display: block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    min-height: 0 !important;
    text-align: center !important;
}
.interview-sidebar-head strong{
    display: block !important;
    color: var(--h1Color) !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}
.interview-question-sidebar ol{
    margin-top: 0 !important;
}
.interviewer-next-card .interviewer-next-item {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: start !important;
    padding-left: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* Keep the question list naturally sized; it may extend vertically with the
   page rather than using an internal scroll area. */
.interview-question-sidebar{
  max-height:none !important;
  overflow:visible !important;
}

/* Desktop sidebar cards must stay inside the first grid column. Long question
   text wraps inside the card instead of widening it over the answer column. */
@media (min-width:901px){
  .interview-sidebar-area,
  .interview-sidebar-area .interview-sidebar-rail,
  .interview-sidebar-area .interview-question-sidebar,
  .interview-sidebar-area .interview-pdf-card{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .interview-sidebar-area .interview-question-sidebar,
  .interview-sidebar-area .interview-pdf-card{
    overflow-wrap:anywhere;
  }
}
@media (max-width:900px){
    .interview-question-layout.sidebar-collapsed .interview-pdf-card{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        transform:none !important;
    }
    .interview-question-layout.sidebar-collapsed .interview-sidebar-area{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
        transform:none !important;
    }
    .interview-question-sidebar{
        max-height:none !important;
    }
}

/* Mobile: reviewer and PDF download cards stay visible, only the question list collapses. */
@media (max-width: 900px) {
  .interview-reviewer-card .interview-sidebar-mini-toggle,
  .interview-pdf-card .interview-sidebar-mini-toggle {
    display: none !important;
  }
}



.interview-code-shell{
  position:relative;
  margin:10px 0 16px;
}
.interview-code-shell .interview-code-block,
.interview-question .interview-code-shell pre.interview-code-block{
  margin:0 !important;
  padding-top:42px !important;
}
.interview-copy-code-button{
  position:absolute;
  top:10px;
  right:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:4px 10px;
  border:1px solid var(--borderColor);
  border-radius:9px;
  background:#f5f7fb;
  color:var(--textColor);
  font-size:12px;
  line-height:1.1;
  font-weight:800;
  cursor:pointer;

}
.interview-copy-code-button:hover{background:#eef3f9;}
.interview-copy-code-button.is-copied{color:#0f7a35;border-color:#bbf7d0;background:#f0fdf4;}

/* Final PDF/code/follow-up polish: light code blocks, readable code, compact follow-up spacing. */
.interview-code-block,
.interview-question pre.interview-code-block{
  background:#fff !important;
  color:var(--textColor) !important;
  border:1px solid var(--borderColor) !important;

}
.interview-code-block code{
  color:var(--textColor) !important;
  font-size:14px !important;
  line-height:1.6 !important;
}
.interview-code-block .hljs-keyword,
.interview-code-block .hljs-selector-tag,
.interview-code-block .hljs-tag{color:#0000ff !important}
.interview-code-block .hljs-title.function_,
.interview-code-block .hljs-function .hljs-title{color:#795e26 !important}
.interview-code-block .hljs-title.class_,
.interview-code-block .hljs-type,
.interview-code-block .hljs-built_in{color:#267f99 !important}
.interview-code-block .hljs-string,
.interview-code-block .hljs-attr,
.interview-code-block .hljs-regexp{color:#a31515 !important}
.interview-code-block .hljs-number,
.interview-code-block .hljs-literal{color:#098658 !important}
.interview-code-block .hljs-comment,
.interview-code-block .hljs-quote{color:#008000 !important;font-style:italic}
.interview-code-block .hljs-variable,
.interview-code-block .hljs-template-variable,
.interview-code-block .hljs-params{color:#001080 !important}
.interview-code-block .hljs-meta,
.interview-code-block .hljs-meta .hljs-keyword{color:#af00db !important}
.interview-code-block .hljs-symbol,
.interview-code-block .hljs-bullet{color:#0451a5 !important}
.interview-code-block::before,
.interview-question pre.interview-code-block::before{
  background:#f5f7fb !important;
  color:var(--mutedTextColor) !important;
}
.interviewer-next-card .interviewer-next-list{
  gap:18px 34px !important;
}
.interviewer-next-card .interviewer-next-item::before,
.interviewer-next-card .interviewer-next-item + .interviewer-next-item::before{
  content:'?' !important;
  border-top:0 !important;
}
.interviewer-next-card .interviewer-next-item .interview-answer-rich,
.interviewer-next-card .interviewer-next-item .interview-answer-rich p{
  margin:0 !important;
}
.interviewer-next-card .interviewer-next-item strong{
  margin:0 0 8px !important;
}

/* Interview 101 answer formatting */
.answer-section-heading{
  margin: 18px 0 10px;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--h1Color);
  font-weight: 800;
}
.short-answer-heading{
  padding: 10px 14px;
  border-left: 5px solid #4caf50;
  background: #f3fbf4;
  border-radius: 12px;
}
.detailed-answer-heading{
  padding-top: 8px;
  border-top: 1px solid #e4ebf5;
}
.algorithm-heading,
.complexity-heading{
  padding: 10px 14px;
  border-left: 5px solid #2563eb;
  background: #f5f8ff;
  border-radius: 12px;
}
.considerations-heading + .interview-answer-rich .answer-example,
.considerations-heading + .interview-answer-rich .answer-point{
  border-left-color: #7c3aed;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
}

/* Graph-based architecture diagram layout */
.architecture-graph-diagram .diagram-edge-split {
  position: relative;
  min-height: 20px;
  margin: -2px 0 0;
}
.architecture-graph-diagram .diagram-edge-split:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 20px;
  border-left: 3px solid #cbd8e6;
}
.architecture-graph-diagram .graph-branches {
  margin-top: 0;
}
.architecture-graph-diagram .graph-branch .diagram-branch-flow > .diagram-node:first-child {
  margin-top: 4px;
}
.diagram-explanation {
  display: block;
  gap: 0;
}
.diagram-explanation-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.diagram-explanation-head span,
.diagram-explanation > span {
  flex: 0 0 auto;
}
.diagram-explanation-head strong {
  display: block;
  color: var(--textColor);
  font-size: 12.5px;
  line-height: 1.2;
}
.diagram-explanation > p,
.diagram-explanation-head + p {
  margin: 0;
  color: var(--mutedTextColor);
  font-size: 11.8px;
  line-height: 1.42;
}


.diagram-node-side-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 4px 0 6px;
}
.diagram-node-side-row .diagram-side-source .diagram-node {
  width: 100%;
}
.diagram-node-side-row .diagram-side-links {
  width: 100%;
  margin: 0;
}
.diagram-node-side-row .diagram-side-link {
  position: relative;
  grid-template-columns: minmax(68px, auto) 26px minmax(0, 1fr);
}
.diagram-node-side-row .diagram-side-link:before {
  content: '';
  position: absolute;
  left: -14px;
  right: calc(100% - 70px);
  top: 50%;
  border-top: 2px solid #cbd8e6;
  transform: translateY(-50%);
  pointer-events: none;
}
.diagram-node-side-row .diagram-side-link .diagram-node {
  width: 100%;
}

/* Graph side edges: render logging/metrics/monitoring/alert edges as horizontal related arrows,
   so the main request/data path stays vertical and readable. */
.diagram-side-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 88%;
  margin: 8px auto 2px;
}
.diagram-side-link {
  display: grid;
  grid-template-columns: minmax(70px, auto) 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: 100%;
}
.diagram-side-label {
  justify-self: end;
  max-width: 120px;
  padding: 3px 9px;
  border: 1px solid #dce5f0;
  border-radius: 999px;
  background: #fff;
  color: var(--mutedTextColor);
  font-size: 10px;
  line-height: 1.12;
  font-weight: 900;
  text-align: center;

}
.diagram-side-arrow {
  color: #64748b;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.diagram-side-link .diagram-node {
  width: 100%;
  min-height: 62px;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 7px 9px;
  border-width: 1.5px;
  border-radius: 12px;
  margin: 0;
}
.diagram-side-link .diagram-node-icon-img {
  width: 34px;
  height: 34px;
}
.diagram-side-link .diagram-node strong {
  font-size: 12.5px;
  line-height: 1.12;
  margin-bottom: 3px;
}
.diagram-side-link .diagram-node p {
  font-size: 9.8px;
  line-height: 1.22;
}
.diagram-side-link .diagram-node-num {
  width: 17px;
  height: 17px;
  font-size: 8px;
  left: -7px;
  top: -7px;
}
.diagram-branch-flow > .diagram-side-links {
  width: 96%;
  margin-top: 7px;
}
.diagram-branch-flow > .diagram-side-links .diagram-side-link {
  grid-template-columns: minmax(56px, auto) 16px minmax(0, 1fr);
  gap: 5px;
}
.diagram-branch-flow > .diagram-side-links .diagram-side-label {
  max-width: 86px;
  font-size: 8.5px;
  padding: 2px 6px;
}
.diagram-branch-flow > .diagram-side-links .diagram-side-arrow {
  font-size: 15px;
}
.diagram-branch-flow > .diagram-side-links .diagram-node {
  min-height: 58px;
  grid-template-columns: 36px minmax(0, 1fr);
  padding: 7px 8px;
}
.diagram-branch-flow > .diagram-side-links .diagram-node-icon-img {
  width: 31px;
  height: 31px;
}
.diagram-branch-flow > .diagram-side-links .diagram-node strong {
  font-size: 11px;
}
.diagram-branch-flow > .diagram-side-links .diagram-node p {
  font-size: 8.8px;
  line-height: 1.14;
}
@media (max-width: 760px) {
  .diagram-side-link { grid-template-columns: 1fr; justify-items: center; }
  .diagram-side-arrow { transform: rotate(90deg); }
  .diagram-side-label { justify-self: center; }
}

/* v26: restore answer sizing and make architecture arrows/connectors more visible */
.interview-answer-rich,
.interview-answer-rich p {
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.system-design-box .interview-answer-rich,
.system-design-box .interview-answer-rich p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Clean PDF/diagram connector and answer typography overrides. */
.interview-answer-rich {
  color: var(--mutedTextColor) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}
.interview-answer-rich p {
  font-size: inherit !important;
  line-height: inherit !important;
}
.system-design-box .interview-answer-rich,
.system-design-box .interview-answer-rich p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.architecture-diagram,
.architecture-graph-diagram,
.diagram-step,
.diagram-branches,
.diagram-branch,
.diagram-branch-flow,
.diagram-parallel-row,
.diagram-connector,
.diagram-edge-split {
  overflow: visible !important;
}
.diagram-node {
  position: relative !important;
  z-index: 10 !important;
}
.diagram-connector {
  min-height: 46px !important;
  z-index: 20 !important;
}
.diagram-connector::before,
.diagram-connector:before {
  top: -2px !important;
  bottom: -2px !important;
  border-left: 2px solid #3a3b41 !important;
}
.diagram-connector::after,
.diagram-connector:after {
  top: 68% !important;
  z-index: 22 !important;
  font-size: 28px !important;
  background: #fbfcff !important;
  padding: 0 7px !important;
  color: #3a3b41 !important;
}
.diagram-connector span {
  z-index: 23 !important;
}
.diagram-branch-flow .diagram-connector {
  min-height: 38px !important;
}
.diagram-branch-flow .diagram-connector::after,
.diagram-branch-flow .diagram-connector:after {
  font-size: 24px !important;
}

/* Split junction: vertical stem only. The arrowheads belong to the left/right branch ends. */
.diagram-connector:has(+ .diagram-edge-split)::after,
.diagram-connector:has(+ .diagram-edge-split):after {
  content: none !important;
  display: none !important;
}
.architecture-graph-diagram .diagram-edge-split {
  position: relative !important;
  min-height: 54px !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 20 !important;
}
.architecture-graph-diagram .diagram-edge-split::before,
.architecture-graph-diagram .diagram-edge-split:before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: -2px !important;
  bottom: 16px !important;
  height: auto !important;
  border-left: 2px solid #3a3b41 !important;
  transform: translateX(-50%) !important;
  z-index: 28 !important;
}
.architecture-graph-diagram .diagram-edge-split::after,
.architecture-graph-diagram .diagram-edge-split:after {
  content: none !important;
  display: none !important;
}
.architecture-graph-diagram .diagram-edge-split span {
  display: none !important;
}

.diagram-branches,
.diagram-parallel-row {
  position: relative !important;
  overflow: visible !important;
}
.diagram-branches::before,
.diagram-branches:before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: -18px !important;
  width: 50% !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  border-left: 2px solid #3a3b41 !important;
  border-top: 2px solid #3a3b41 !important;
  border-right: 2px solid #3a3b41 !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  z-index: 25 !important;
}
.diagram-parallel-row::after,
.diagram-parallel-row:after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -18px !important;
  width: 50% !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  border-left: 2px solid #3a3b41 !important;
  border-bottom: 2px solid #3a3b41 !important;
  border-right: 2px solid #3a3b41 !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  z-index: 18 !important;
}
.diagram-branches > .diagram-branch {
  position: relative !important;
  overflow: visible !important;
}
.diagram-branches > .diagram-branch:first-child::before,
.diagram-branches > .diagram-branch:last-child::before {
  content: '' !important;
  position: absolute !important;
  top: -7px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 7px solid #3a3b41 !important;
  transform: translateX(-50%) !important;
  z-index: 45 !important;
  pointer-events: none !important;
}
.diagram-branches > .diagram-branch:first-child::before {
  left: 50% !important;
  left: 50% !important;
  transform: translateX(calc(-50% + 3px)) !important;
}
.diagram-branches > .diagram-branch:last-child::before {
  left: 50% !important;
  left: 50% !important;
  transform: translateX(calc(-50% - 3px)) !important;
}
.diagram-parallel-row > .diagram-node:first-child::after,
.diagram-parallel-row > .diagram-node:last-child::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -28px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 10px solid #3a3b41 !important;
  transform: translateX(-50%) !important;
  z-index: 45 !important;
  pointer-events: none !important;
}


/* v44 connector repair: use CSS triangles instead of text glyph arrows so HTML and PDF do not show stray @/a characters. */
.diagram-connector,
.diagram-edge-split,
.diagram-branches,
.diagram-parallel-row {
  overflow: visible !important;
}
.diagram-connector {
  position: relative !important;
  min-height: 40px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 20 !important;
}
.diagram-connector::before,
.diagram-connector:before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: -2px !important;
  bottom: -2px !important;
  width: 0 !important;
  height: auto !important;
  border-left: 2px solid #3a3b41 !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
}
.diagram-connector::after,
.diagram-connector:after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + 13px) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 9px solid #3a3b41 !important;
  background: transparent !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
.diagram-connector span {
  position: relative !important;
  z-index: 10 !important;
  background: #fff !important;
  border: 1px solid #dce5f0 !important;

}
.diagram-connector:has(+ .diagram-edge-split)::after,
.diagram-connector:has(+ .diagram-edge-split):after {
  content: none !important;
  display: none !important;
}
.diagram-branch-flow .diagram-connector::after,
.diagram-branch-flow .diagram-connector:after {
  border-left-width: 6px !important;
  border-right-width: 6px !important;
  border-top-width: 8px !important;
}

/* Terminal cache-hit response: render as an arrow out, not as another backend box. */
.diagram-terminal-response {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0 4px;
}
.diagram-terminal-arrow {
  position: relative;
  min-width: 72px;
  height: 2px;
  background: #4b5563;
}
.diagram-terminal-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #4b5563;
  border-right: 2px solid #4b5563;
  transform: translateY(-50%) rotate(45deg);
  background: transparent;
}
.diagram-terminal-arrow span {
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #d7e3ef;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
}
.diagram-terminal-pill {
  max-width: 190px;
  padding: 9px 12px;
  border: 2px solid #d7e3ef;
  border-radius: 14px;
  background: #fff;

  text-align: left;
}
.diagram-terminal-pill strong {
  display: block;
  color: #0b1f44;
  font-size: 13px;
  line-height: 1.15;
}
.diagram-terminal-pill small {
  display: block;
  margin-top: 4px;
  color: #526178;
  font-size: 11px;
  line-height: 1.25;
}
.graph-branch-terminal-response .diagram-branch-flow {
  align-items: center;
  min-height: 74px;
}

/* v51: cache-hit terminal responses are inline side exits from the cache node, not separate branch lanes. */
.diagram-terminal-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 10px 0 8px;
}
.diagram-terminal-row .diagram-terminal-response {
  width: auto;
  margin: 0;
}
.diagram-terminal-row + .diagram-connector {
  margin-top: 4px;
}
.graph-branch-terminal-response .diagram-branch-title,
.graph-branch-terminal-response .diagram-branch-desc {
  display: none !important;
}

/* Production diagram flow fixes: keep every branch visibly directional and align side panel numbering with visual order. */
.architecture-graph-diagram .graph-branch,
.architecture-graph-diagram .diagram-branch {
  position: relative;
  overflow: visible;
}
.architecture-graph-diagram > .diagram-branches > .graph-branch:before,
.architecture-graph-diagram .diagram-branches.graph-branches > .graph-branch:before {
  content: '▼';
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  color: #374151;
  font-size: 18px;
  line-height: 1;
  background: #fff;
  padding: 0 3px;
  z-index: 4;
}
.architecture-graph-diagram .diagram-edge-split:after {
  content: '▼';
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  color: #374151;
  font-size: 18px;
  line-height: 1;
  background: #fff;
  padding: 0 3px;
  z-index: 4;
}
.architecture-graph-diagram .diagram-branches:before {
  z-index: 1;
}
.architecture-graph-diagram .diagram-connector:after,
.architecture-graph-diagram .diagram-terminal-arrow:after {
  z-index: 3;
}

/* v101: production graph lanes.
   Multi-path system-design branches keep their lanes side-by-side instead of stacking,
   repeated/converged nodes render as small rejoin pills instead of consuming new numbers,
   and every branch lane receives a clear directional arrowhead. */
.architecture-graph-diagram .diagram-branches.branch-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.architecture-graph-diagram .diagram-branches.branch-count-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.architecture-graph-diagram .graph-branch .diagram-branches.branch-count-2,
.architecture-graph-diagram .graph-branch .diagram-branches.branch-count-3,
.architecture-graph-diagram .graph-branch .diagram-branches.branch-count-4 {
  grid-template-columns: repeat(var(--branch-lanes, 2), minmax(0, 1fr)) !important;
}
.architecture-graph-diagram .graph-branch .diagram-branches.branch-count-2 { --branch-lanes: 2; }
.architecture-graph-diagram .graph-branch .diagram-branches.branch-count-3 { --branch-lanes: 3; }
.architecture-graph-diagram .graph-branch .diagram-branches.branch-count-4 { --branch-lanes: 4; }
.architecture-graph-diagram .diagram-branches.branch-count-3::before,
.architecture-graph-diagram .diagram-branches.branch-count-4::before,
.architecture-graph-diagram .diagram-branches.branch-count-3:before,
.architecture-graph-diagram .diagram-branches.branch-count-4:before {
  width: calc(100% - 22%) !important;
  left: 50% !important;
}
.architecture-graph-diagram .diagram-branches > .diagram-branch::before {
  content: '' !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 9px solid #34363d !important;
  transform: translateX(-50%) !important;
  z-index: 45 !important;
  pointer-events: none !important;
}
.architecture-graph-diagram .graph-branch .diagram-branches::before,
.architecture-graph-diagram .graph-branch .diagram-branches:before {
  content: '' !important;
  display: block !important;
  top: -14px !important;
  height: 14px !important;
  width: calc(100% - 25%) !important;
  border-left: 1.5px solid #34363d !important;
  border-top: 1.5px solid #34363d !important;
  border-right: 1.5px solid #34363d !important;
  border-bottom: 0 !important;
  border-radius: 9px 9px 0 0 !important;
}
.architecture-graph-diagram .diagram-rejoin {
  width: 86%;
  margin: 8px auto 2px;
  padding: 7px 9px;
  border: 1px dashed #cbd8e6;
  border-radius: 999px;
  background: #fff;
  color: var(--mutedTextColor);
  font-size: 10px;
  line-height: 1.1;
  text-align: center;

}
.architecture-graph-diagram .diagram-rejoin span {
  display: inline;
  margin-right: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}
.architecture-graph-diagram .diagram-rejoin strong {
  font-weight: 900;
  color: var(--textColor);
}
.architecture-graph-diagram .diagram-branch-flow .diagram-terminal-response {
  margin: 8px auto 4px !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-terminal-arrow {
  transform: rotate(90deg) !important;
  min-width: 34px !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-terminal-arrow span {
  transform: rotate(-90deg) !important;
  white-space: nowrap !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-terminal-pill {
  width: 86% !important;
  max-width: none !important;
  padding: 8px 9px !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-terminal-pill strong {
  font-size: 12px !important;
  line-height: 1.12 !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-terminal-pill small {
  font-size: 9px !important;
  line-height: 1.15 !important;
}

/* v102: full-width diagrams with bottom explanation panel and compact vertical lane cards.
   The explanation panel is no longer a right rail. This gives parallel paths the full page width.
   Lane cards place icons above copy so narrow branches do not crush text. */
.architecture-diagram-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
.architecture-diagram-layout > .architecture-diagram,
.architecture-diagram-layout > .architecture-graph-diagram {
  min-width: 0 !important;
  width: 100% !important;
}
.architecture-diagram-layout > .diagram-explanations {
  width: 100% !important;
  max-width: none !important;
  order: 2 !important;
}
.diagram-explanations {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 18px !important;
  padding: 16px 18px 10px !important;
}
.diagram-explanations h5 {
  grid-column: 1 / -1 !important;
  margin-bottom: 10px !important;
}
.diagram-explanation {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: start !important;
  min-width: 0 !important;
}
.architecture-graph-diagram .diagram-branches.branch-count-3,
.architecture-graph-diagram .graph-branch .diagram-branches.branch-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.architecture-graph-diagram .diagram-branches.branch-count-4,
.architecture-graph-diagram .graph-branch .diagram-branches.branch-count-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.architecture-graph-diagram .diagram-branches {
  gap: 14px !important;
}
.architecture-graph-diagram .diagram-branch {
  min-width: 0 !important;
  overflow: visible !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-node,
.diagram-parallel-row .diagram-node {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  justify-items: center !important;
  align-items: start !important;
  gap: 7px !important;
  padding: 12px 12px !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-node-icon,
.diagram-parallel-row .diagram-node-icon {
  justify-self: center !important;
  margin: 0 auto 2px !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-node-icon-img,
.diagram-parallel-row .diagram-node-icon-img {
  width: 44px !important;
  height: 44px !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-node-copy,
.diagram-parallel-row .diagram-node-copy {
  width: 100% !important;
  min-width: 0 !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-node strong,
.diagram-parallel-row .diagram-node strong {
  font-size: 13.5px !important;
  line-height: 1.12 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-node p,
.diagram-parallel-row .diagram-node p {
  font-size: 10.6px !important;
  line-height: 1.22 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.architecture-graph-diagram .diagram-branch-flow .diagram-terminal-pill {
  width: 100% !important;
}
@media (max-width: 760px) {
  .diagram-explanations { grid-template-columns: 1fr !important; }
  .architecture-graph-diagram .diagram-branches.branch-count-3,
  .architecture-graph-diagram .diagram-branches.branch-count-4,
  .architecture-graph-diagram .graph-branch .diagram-branches.branch-count-3,
  .architecture-graph-diagram .graph-branch .diagram-branches.branch-count-4 {
    grid-template-columns: 1fr !important;
  }
}

/* v103: flow-diagram cache yes/no decisions and bottom explanations.
   Main diagram uses the full width; the explanation panel becomes a compact two-column block below. */
.architecture-diagram-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}
.diagram-explanations {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
  padding: 14px !important;
}
.diagram-explanations h5 {
  grid-column: 1 / -1 !important;
  margin-bottom: 2px !important;
}
.diagram-explanation {
  border-bottom: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #e2eaf4 !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.diagram-cache-decision {
  align-items: stretch !important;
}
.diagram-cache-decision .diagram-branch-title {
  line-height: 1.1 !important;
}
.diagram-cache-yes .diagram-branch-title {
  color: #138a3d !important;
}
.diagram-cache-no .diagram-branch-title {
  color: #0f1f3d !important;
}
.diagram-terminal-row-after {
  margin-top: 10px !important;
}
.diagram-cache-decision .diagram-branch-flow .diagram-node,
.graph-branches .diagram-branch-flow .diagram-node {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 11px 10px !important;
}
.diagram-cache-decision .diagram-node-icon,
.graph-branches .diagram-branch-flow .diagram-node-icon {
  margin: 0 auto 2px !important;
}
.diagram-cache-decision .diagram-node-copy,
.graph-branches .diagram-branch-flow .diagram-node-copy {
  width: 100% !important;
}
.diagram-cache-decision .diagram-node strong,
.diagram-cache-decision .diagram-node p,
.graph-branches .diagram-branch-flow .diagram-node strong,
.graph-branches .diagram-branch-flow .diagram-node p {
  text-align: center !important;
}

/* v104: cache hit/miss is one inline decision block, not two parallel lanes. */
.diagram-cache-gate {
  width: min(92%, 760px) !important;
  margin: 10px auto 12px !important;
  padding: 14px 16px !important;
  border: 2px solid #7ae39c !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fbfffd 0%, #ffffff 100%) !important;

  box-sizing: border-box !important;
}
.diagram-cache-gate-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}
.diagram-cache-gate-head strong {
  color: #138a3d !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
}
.diagram-cache-gate-head span {
  color: #4f5e76 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
.diagram-cache-gate-body {
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
}
.diagram-cache-gate-body > .diagram-node {
  width: min(100%, 520px) !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  text-align: left !important;
}
.diagram-cache-gate-body .diagram-terminal-row,
.diagram-cache-gate-body .diagram-terminal-row-after {
  width: min(100%, 520px) !important;
  margin: 8px auto 0 !important;
  justify-content: center !important;
}
.diagram-cache-gate-body .diagram-terminal-response {
  max-width: 520px !important;
}
.diagram-cache-gate-body .diagram-terminal-arrow {
  min-width: 112px !important;
}

/* v105: production flow cleanup - cache gates are inline decisions, async work is visually separate from user response path. */
.diagram-cache-gate-body {
  gap: 8px !important;
}
.diagram-cache-hit-row {
  width: min(100%, 560px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 4px auto 0 !important;
}
.diagram-cache-hit-row .diagram-terminal-response {
  transform: none !important;
  max-width: 560px !important;
}
.diagram-cache-hit-row .diagram-terminal-pill {
  min-width: 220px !important;
}
.diagram-async-section {
  width: 100% !important;
  margin: 12px 0 6px !important;
}
.diagram-async-section .diagram-branches {
  margin-top: 6px !important;
}
.diagram-async-branch {
  border-color: #d7e3ef !important;
  background: #fbfdff !important;
}
.diagram-async-branch .diagram-branch-title {
  color: #c2410c !important;
}
.diagram-async-connector span {
  color: #c2410c !important;
  border-color: #fed7aa !important;
  background: #fff7ed !important;
}
.diagram-terminal-row-after {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

/* Generated technical diagram images */
.generated-diagram-intro {
  margin: 14px 0 10px;
  color: #334155;
  font-size: 15px;
  line-height: 1.55;
}
.generated-diagram-link {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto 18px;
  cursor: zoom-in;
}
.generated-diagram-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 12px;
  border: 1px solid #e5edf5;
  background: #fff;
  cursor: zoom-in;
}
.generated-diagram-picture {
  display: block;
  width: 100%;
}
.diagram-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: transparent;
  overflow: hidden;
}
.diagram-lightbox.is-open {
  display: block;
}
.diagram-lightbox-open,
.diagram-lightbox-open body {
  overflow: hidden;
}
.diagram-lightbox-open .interview-back-to-top {
  display: none !important;
}
.diagram-lightbox-panel {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.diagram-lightbox-toolbar {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);

  backdrop-filter: blur(8px);
}
.diagram-zoom-btn,
.diagram-lightbox-close {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;

}
.diagram-zoom-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-size: 16px;
  line-height: 38px;
}
.diagram-zoom-reset {
  font-size: 13px;
}
.diagram-lightbox-close {
  width: 40px;
  height: 40px;
  font-size: 28px;
  line-height: 1;
}
.diagram-zoom-btn:hover,
.diagram-lightbox-close:hover {
  background: #eaf2ff;
}
.diagram-lightbox-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0) 0 0 / 26px 26px,
    rgba(36,43,51,.9);
}
.diagram-lightbox-stage.is-dragging {
  cursor: grabbing;
}
.diagram-lightbox-stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  background: #fff;

  transform-origin: center center;
  transition: transform .08s ease-out;
  cursor: inherit;
  will-change: transform;
  -webkit-user-drag: none;
  user-drag: none;
}
.diagram-lightbox-stage.is-dragging img {
  transition: none;
}
@media (max-width: 720px) {
  .diagram-lightbox-toolbar {
    top: 8px;
    right: 8px;
    gap: 5px;
    padding: 5px;
  }
  .diagram-zoom-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    line-height: 34px;
  }
  .diagram-lightbox-close {
    width: 36px;
    height: 36px;
  }
}

/* Interview quick navigation pills */
.interview-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 7px 0 12px;
}
.interview-quick-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 3px 11px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1.05;
  font-weight: 800;
  text-decoration: none;

}
.interview-quick-pill:hover {
  background: #dbeafe;
  color: #1e40af;
  text-decoration: none;
}
.generated-diagram-section {
  scroll-margin-top: 80px;
}


/* Interview question labels and topic filtering */
.interview-topic-filter-wrap{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:14px 0 18px;
  color:var(--textColor);
  font-size:14px;
  font-weight:700;
}
.interview-topic-filter-wrap label{
  margin:0;
  white-space:nowrap;
}
.interview-question-sidebar .interview-topic-filter-wrap{
  justify-content:flex-start;
  margin:12px 0 14px;
  gap:8px;
}
.interview-question-tool-tabs{
  display:inline-flex;
  align-items:center;
  gap:3px;
  min-height:42px;
  padding:3px;
  border:1px solid #d7e0ed;
  border-radius:14px;
  background:#f3f6fa;
}
.interview-question-tool-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:34px;
  padding:7px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#657188;
  font:inherit;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.interview-question-tool-tab.is-active{
  background:#fff;
  color:#0b1f44;
  box-shadow:0 1px 3px rgba(11,31,68,.12);
}
.interview-question-tool-control,
.interview-question-tool-panel{
  min-width:0;
  width:100%;
}
.interview-question-tool-panel{
  position:relative;
}
.interview-question-tool-panel[hidden]{
  display:none !important;
}
.interview-question-search-input{
  width:100%;
  min-height:42px;
  padding:9px 76px 9px 15px;
  border:1px solid var(--borderColor);
  border-radius:14px;
  background:#fff;
  color:var(--textColor);
  font:inherit;
  font-size:14px;
  font-weight:650;
  outline:none;
}
.interview-question-search-input::-webkit-search-cancel-button{
  display:none;
  appearance:none;
}
.interview-question-search-input::placeholder{
  color:#7a879b;
}
.interview-question-search-count{
  position:absolute;
  right:28px;
  top:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:25px;
  min-height:24px;
  padding:3px 7px;
  border-radius:999px;
  background:#edf3fb;
  color:#45546c;
  font-size:10px;
  font-weight:850;
  line-height:1;
  transform:translateY(-50%);
  pointer-events:none;
}
.interview-question-search-count:empty{
  display:none;
}
.interview-question-search-clear{
  position:absolute;
  right:2px;
  top:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#657188;
  font-size:20px;
  font-weight:500;
  line-height:1;
  transform:translateY(-50%);
  cursor:pointer;
}
.interview-question-search-clear:hover{
  background:#edf3fb;
  color:#0b1f44;
}
.interview-question-search-clear[hidden]{
  display:none !important;
}
.interview-search-empty{
  margin:0 0 18px;
  padding:22px;
  border:1px dashed #c9d5e5;
  border-radius:16px;
  background:#f8fafc;
  color:#536077;
  text-align:center;
}
.interview-search-empty[hidden]{
  display:none !important;
}
.interview-search-empty strong,
.interview-search-empty span{
  display:block;
}
.interview-search-empty strong{
  margin-bottom:5px;
  color:#0b1f44;
  font-size:15px;
}
.interview-search-empty span{
  font-size:13px;
  font-weight:600;
}
.interview-topic-filter-select{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--borderColor);
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23061a3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px 16px;
  color:var(--textColor);
  border-radius:14px;
  padding:10px 44px 10px 14px;
  min-width:100%;
  max-width:100%;
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;

}
.interview-topic-filter-select:focus,
.interview-topic-filter-select:focus-visible{
  outline:none !important;
  border-color:var(--borderColor) !important;

}
.interview-topic-filter-select:active{
  border-color:var(--borderColor) !important;

}
.interview-question-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 0;
}
.interview-question-title-text{
  display:inline;
}
.interview-question-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
}
.interview-question-tags.inline{
  display:inline-flex;
  vertical-align:baseline;
  margin:0 0 0 12px;
  gap:7px;
  flex:0 0 auto;
}
.interview-question-tags.compact{
  justify-content:flex-start;
  gap:6px;
  margin:8px 0 0;
  flex:0 1 auto;
  max-width:none;
}
.interview-question-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:5px 11px;
  border-radius:9px;
  border:1px solid #d7e2f0;
  background:#f6f9ff;
  color:#12366f;
  font-size:13px;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
}
.interview-question-tags.compact .interview-question-tag{
  min-height:24px;
  padding:4px 9px;
  font-size:11px;
  border-radius:8px;
}
.interview-question-tags.inline .interview-question-tag{
  min-height:24px;
  padding:4px 10px;
  font-size:12px;
  border-radius:8px;
  line-height:1.05;
}
.interview-question-tag.topic-coding{background:#edf9f1;border-color:#c8ebd2;color:#137a35;}
.interview-question-tag.topic-system-design{background:#eef5ff;border-color:#cfdef6;color:#1751a6;}
.interview-question-tag.topic-behavioral{background:#f4edff;border-color:#dfcdf8;color:#6b38b8;}
.interview-question-tag.topic-language-specific{background:#f0f7ff;border-color:#d2e6fb;color:#315c9c;}
.interview-question-tag.topic-debugging{background:#fff6e8;border-color:#ffe0b2;color:#9a5b00;}
.interview-question-tag.topic-api-design{background:#f0fbff;border-color:#cdeefa;color:#11647a;}
.interview-question-tag.new-question{background:#ecfdf3;border-color:#abefc6;color:#067647;letter-spacing:.03em;}
.interview-question-tag.difficulty-easy{background:#f1fbf4;border-color:#cdeed6;color:#167a38;}
.interview-question-tag.difficulty-medium{background:#fff7e8;border-color:#ffdba3;color:#a46100;}
.interview-question-tag.difficulty-hard{background:#fff0f0;border-color:#ffc7c7;color:#b42318;}
.interview-question-tag.company{background:#061a3f;border-color:#061a3f;color:#fff;}
.interview-sidebar-question-number{flex:0 0 auto;font-weight:800;line-height:1.35;}
.interview-sidebar-question-body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;}
.interview-sidebar-question-text{min-width:0;width:100%;}
.interview-question-sidebar a{display:flex !important;align-items:flex-start;gap:8px;}
.interview-question-sidebar li.is-hidden,
.interview-question.is-hidden{display:none !important;}
@media(max-width:760px){
  .interview-topic-filter-wrap{justify-content:flex-start;}
  .interview-topic-filter-select{min-width:100%;}
  .interview-question-tags.compact{width:100%;margin-top:8px;}
  .interview-question-tags.inline{margin-top:2px;}
  .interview-question-sidebar a{flex-wrap:nowrap;}
  .interview-sidebar-question-text{overflow-wrap:anywhere;}
}

/* v198 production typography/readability polish */
:root{
  --interviewBodyText:#404b5c;
  --interviewBodyMuted:#49566a;
  --interviewHeading:#0b1f44;
  --interviewBlue:#1d4ed8;
}
.interview-answer-rich,
.interview-answer-rich p,
.where-used-prose p,
.text-card.interview-question p{
  color:var(--interviewBodyText) !important;
  font-weight:450 !important;
  line-height:1.72 !important;
}
.interview-answer-rich p{margin:0 0 18px !important;}
.text-card.interview-question .interview-answer-rich{max-width:920px;}
.star-method-tip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  max-width:920px;
  margin:4px 0 24px;
  padding:12px 16px;
  border:1px solid #a7e6c0;
  border-left:4px solid #16a366;
  border-radius:10px;
  background:#effcf5;
  color:#344054;
  font-size:15px;
  font-weight:500;
  line-height:1.5;
}
.star-method-tip strong{
  color:#087443;
  font-weight:800;
}
.text-card.interview-question .star-method-tip p{
  margin:0 !important;
  color:#344054 !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
}
.text-card.interview-question h4,
.text-card.interview-question .answer-section-heading,
.text-card.interview-question .detailed-answer-heading{
  color:var(--interviewHeading) !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
}
.interview-question-title,
.interview-question h3.interview-question-title{
  letter-spacing:-.015em !important;
}
.interview-question-tags.inline{
  margin-left:14px !important;
  gap:8px !important;
  vertical-align:middle !important;
}
.interview-question-tags.inline .interview-question-tag{
  min-height:22px !important;
  padding:3px 9px !important;
  font-size:12px !important;
  line-height:1.05 !important;
}
.short-answer-heading,
.answer-section-heading.short-answer-heading,
.answer-section-heading.complexity-heading,
.answer-section-heading.considerations-heading,
.answer-section-heading.algorithm-heading{
  padding:14px 20px !important;
}
.interview-quick-pill,
.interview-question .interview-quick-pill,
.text-card a.interview-quick-pill{
  min-height:28px !important;
  padding:6px 14px !important;
  border-radius:10px !important;
  font-size:14px !important;
  line-height:1.05 !important;
}
.interview-code-shell{position:relative !important;}
.interview-copy-code-button{
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  z-index:3 !important;
  min-height:28px !important;
  padding:5px 10px !important;
  border:1px solid #d6deea !important;
  border-radius:10px !important;
  background:#f8fafc !important;
  color:#0b1f44 !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:pointer !important;

}
.interview-copy-code-button:hover{background:#eef3f9 !important;}
.interview-code-block,
.interview-question pre.interview-code-block{
  background:#fbfcfe !important;
  padding:22px 24px !important;
  border-color:#d6deea !important;
}
.interview-code-block code{
  font-family:SFMono-Regular,Menlo,Consolas,Monaco,monospace !important;
  line-height:1.55 !important;
  color:#071936 !important;
}
.interview-topic-filter-select{
  background-position:right 10px center !important;

  outline:none !important;
}
.interview-topic-filter-select:focus,
.interview-topic-filter-select:focus-visible,
.interview-topic-filter-select:active{
  border-color:var(--borderColor) !important;

  outline:none !important;
}
.interviewer-next-card{
  margin-top:26px !important;
  padding:22px 24px !important;
  border:1px solid #cfe0fb !important;
  border-radius:18px !important;
  background:#f8fbff !important;

}
.interviewer-next-card h4{
  margin:0 0 18px !important;
  color:#1d4ed8 !important;
  font-size:21px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
}
.interviewer-next-card .interviewer-next-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px 34px !important;
}
.interviewer-next-card .interviewer-next-item{
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) !important;
  column-gap:14px !important;
  row-gap:4px !important;
  align-items:start !important;
  padding:0 !important;
  margin:0 !important;
}
.interviewer-next-card .interviewer-next-item::before,
.interviewer-next-card .interviewer-next-item + .interviewer-next-item::before{
  content:'?' !important;
  position:static !important;
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:30px !important;
  height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  border:1px solid #bfdbfe !important;
  background:#eff6ff !important;
  color:#1d4ed8 !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1 !important;
  transform:none !important;
}
.interviewer-next-card .interviewer-next-item strong{
  grid-column:2 !important;
  display:block !important;
  margin:0 0 4px !important;
  padding:0 !important;
  color:#bbbbbb !important;
  background:transparent !important;
  font-size:17px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
}
.interviewer-next-card .interviewer-next-item .interview-answer-rich,
.interviewer-next-card .interviewer-next-item .interview-answer-rich p{
  grid-column:2 !important;
  margin:0 !important;
  color:#49566a !important;
  font-size:15px !important;
  line-height:1.7 !important;
  font-weight:400 !important;
}
@media(max-width:900px){
  .interviewer-next-card .interviewer-next-list{grid-template-columns:1fr !important;}
}


/* v199: prose paragraph compaction and list marker repair */
.interview-answer-rich{
  max-width:980px !important;
}
.text-card.interview-question .interview-answer-rich{
  max-width:980px !important;
}
.interview-answer-rich,
.interview-answer-rich p,
.where-used-prose p,
.text-card.interview-question p{
  line-height:1.55 !important;
}
.interview-answer-rich p{
  margin:0 0 12px !important;
}
.interview-answer-rich h3,
.interview-answer-rich h4,
.text-card.interview-question .answer-section-heading,
.text-card.interview-question .detailed-answer-heading{
  margin-bottom:8px !important;
}
.interview-answer-rich ol,
.interview-answer-rich .answer-numbered-steps,
.interview-answer-rich .answer-bullet-list{
  margin:12px 0 14px !important;
  padding-left:1.45rem !important;
}
.interview-answer-rich ol li,
.interview-answer-rich .answer-numbered-steps li,
.interview-answer-rich .answer-bullet-list li{
  display:list-item !important;
  list-style-position:outside !important;
  margin:0 0 8px !important;
  padding-left:2px !important;
  line-height:1.55 !important;
}
.interview-answer-rich .answer-bullet-list li{
  list-style-type:disc !important;
}
.interview-answer-rich .answer-list-intro{
  margin-bottom:6px !important;
  font-weight:700;
}
.interview-answer-rich ol li > p{
  display:inline !important;
  margin:0 !important;
}

.interview-explanation-reference{
  margin: -2px 0 12px;
  color: var(--mutedTextColor);
  line-height: 1.55;
  font-weight: 600;
}

.interview-explanation-reference a{
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;

  color: inherit !important;
  font: inherit !important;
  font-weight: inherit !important;
  text-align: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.interview-explanation-reference a:hover{
  text-decoration: underline !important;
}

/* Occupation WebP in interview detail heading */
.interview-detail-heading-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    width: fit-content;
}
.interview-detail-heading-wrap .interview-detail-heading{
  margin:0 !important;
}
.interview-detail-heading-icon-col{
  display:flex;
  align-items:center;
  justify-content:center;
}
.interview-detail-heading-icon {
    display:block;
    width:auto;
    height:2em;
    max-height:44px;
    object-fit:contain;
    object-position:center;
    flex-shrink:0;
    margin-top:-0.7em;
}
@media (max-width: 720px){
  .interview-detail-heading-wrap.has-icon{
    grid-template-columns:auto 1fr;
    align-items:center;
    justify-content:start;
    gap:12px;
  }
  .interview-detail-heading-icon-col{
    grid-row:1 / span 2;
    align-self:center;
  }
  .interview-detail-heading-wrap.has-icon .interview-detail-heading{
    text-align:left !important;
  }
  .interview-detail-heading-icon {
    display:block;
    width:auto;
    height:2em;
    max-height:44px;
    object-fit:contain;
    object-position:center;
    flex-shrink:0;
    margin-top:-0.7em;
}
}


.interview-detail-heading-icon {
    display:block;
    width:auto;
    height:2em;
    max-height:44px;
    object-fit:contain;
    object-position:center;
    flex-shrink:0;
    margin-top:-0.7em;
}

.interview-detail-heading-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    width: fit-content;
}

.interview-page {
  margin-top: 15px !important;
}

.interview-guide-disclaimer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--borderColor);
  color: var(--mutedTextColor);
  font-size: 12px;
  line-height: 1.6;
  width: 100%;
  clear: both;
}

.interview-guide-disclaimer p {
  margin: 0 0 10px;
}

.interview-guide-disclaimer p:last-child {
  margin-bottom: 0;
}

.interview-guide-disclaimer-company {
  font-weight: 700;
}

@media (max-width: 720px) {
    .interview-detail-heading-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    width: fit-content;
}

    .interview-detail-heading-icon {
    display:block;
    width:auto;
    height:2em;
    max-height:44px;
    object-fit:contain;
    object-position:center;
    flex-shrink:0;
    margin-top:-0.7em;
}
}
.interview-detail-heading{display:flex;justify-content:center;margin-bottom:10px;}


/* Final centered occupation SVG + interview detail heading layout. */
.interview-page {
  margin-top: 15px !important;
}

.interview-detail-heading {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto 12px !important;
  padding: 0 16px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.interview-detail-heading-inner {
  display: grid !important;
  grid-template-columns: auto minmax(0, auto) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.interview-detail-heading-icon-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.interview-detail-heading-icon {
  display: block !important;
  width: auto !important;
  height: 2em !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: center !important;
  flex-shrink: 0 !important;
  margin-top: -0.7em !important;
}

.interview-detail-heading-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.interview-detail-heading-title {
  margin: 0 !important;
  color: var(--h1Color) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.interview-detail-last-updated {
  color: var(--h1Color) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  .interview-detail-heading {
    padding: 0 12px !important;
    margin: 0 auto 12px !important;
  }

  .interview-detail-heading-inner {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .interview-detail-heading-icon-col {
    align-self: center !important;
  }

  .interview-detail-heading-icon {
    height: 3em !important;
    max-height: 64px !important;
    margin-top: -1.5em !important;
  }

  .interview-detail-heading-content {
    display: block !important;
    text-align: center !important;
    min-width: 0 !important;
  }

  .interview-detail-heading-title {
    white-space: normal !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .interview-detail-last-updated {
    display: block !important;
    margin-top: 4px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* Final page nav and centered interview heading adjustments. */
.page-nav {
    margin: 22px auto 26px !important;
    gap: 10px 14px !important;
}

@media (max-width: 900px) {
    .page-nav {
        margin: 20px -14px 14px !important;
        padding: 0 14px 10px !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
}

.interview-detail-heading-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, auto) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

@media (max-width: 720px) {
    .interview-detail-heading-inner {
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 5px !important;
        width: fit-content !important;
        max-width: 100% !important;
    }
}

/* Final centered heading logo badge. Keeps occupation/company SVGs visually consistent. */
.interview-detail-heading-icon-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.interview-detail-heading-icon-circle {
  width: 46px !important;
  height: 46px !important;
  border: 0px solid #bcd2ff !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.interview-detail-heading-icon-circle .interview-detail-heading-icon,
.interview-detail-heading-icon-col .interview-detail-heading-icon {
  display: block !important;
  width: 72% !important;
  height: 72% !important;
  max-width: 72% !important;
  max-height: 72% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

@media (max-width: 720px) {
  .interview-detail-heading-icon-circle {
    width: 58px !important;
    height: 58px !important;
  }

  .interview-detail-heading-icon-circle .interview-detail-heading-icon,
  .interview-detail-heading-icon-col .interview-detail-heading-icon {
    width: 72% !important;
    height: 72% !important;
    max-width: 72% !important;
    max-height: 72% !important;
    margin: 0 !important;
  }
}

.heading-mobile{display:none}.interview-detail-heading-content{display:flex;flex-direction:column;justify-content:center}@media (max-width:720px){.heading-desktop{display:none}.heading-mobile{display:inline}}
/* Final override: center interview heading logo + text and tighten heading/date spacing */
.interview-detail-heading {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto 12px !important;
  text-align: left !important;
}

.interview-detail-heading-inner,
.interview-detail-heading-inner.has-icon {
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 auto !important;
}

.interview-detail-heading-icon-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
}

.interview-detail-heading-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  align-self: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.interview-detail-heading-title,
.interview-detail-heading-content h3 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.05 !important;
}

.interview-detail-last-updated {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.05 !important;
}

@media (max-width: 720px) {
  .interview-detail-heading {
    justify-content: center !important;
    text-align: left !important;
  }

  .interview-detail-heading-inner,
  .interview-detail-heading-inner.has-icon {
    grid-template-columns: auto auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: fit-content !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto !important;
  }

  .interview-detail-heading-content {
    justify-content: center !important;
    align-items: flex-start !important;
    align-self: center !important;
    gap: 0 !important;
    line-height: 1 !important;
  }

  .interview-detail-heading-title,
  .interview-detail-heading-content h3,
  .interview-detail-last-updated {
    line-height: 1.05 !important;
    margin: 0 !important;
  }
}

/* Final heading spacing adjustment requested 2026-07-07. */
.interview-detail-heading-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    align-self: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

@media (max-width: 720px) {
    .interview-detail-heading-inner,
    .interview-detail-heading-inner.has-icon {
        align-items: center !important;
    }

    .interview-detail-heading-icon-col,
    .interview-detail-heading-icon-circle {
        align-self: center !important;
    }

    .interview-detail-heading-icon-circle {
        width: 48px !important;
        height: 48px !important;
    }

    .interview-detail-heading-content {
        justify-content: center !important;
        align-items: flex-start !important;
        align-self: center !important;
        gap: 4px !important;
        line-height: 1 !important;
    }
}


/* Mobile heading alignment override */
@media (max-width:720px){
  .interview-detail-heading-inner.has-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
  }
  .interview-detail-heading-content{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:4px !important;
    margin:0 !important;
    padding:0 !important;
  }
  .interview-detail-heading-content h3,
  .interview-detail-last-updated{
    margin:0 !important;
    padding:0 !important;
    line-height:1.1 !important;
  }
  .interview-detail-heading-icon-circle{
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* Final interview PDF/download controls polish */
.interview-pdf-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
}

/* The complete prompt belongs with the question, before answer content. */
.interview-question-details {
  max-width: 980px;
  margin: 2px 0 20px;
  padding: 15px 18px 14px;
  border: 1px solid #d8e4f4;
  border-left: 4px solid #4f7fd9;
  border-radius: 12px;
  background: #f7faff;

}
.interview-question-details-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  color: #17458f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.interview-question-details-label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: #e4edff;
  color: #2458b4;
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1;
  text-transform: none;
}
.text-card.interview-question .interview-question-details .interview-answer-rich,
.text-card.interview-question .interview-question-details .interview-answer-rich p {
  max-width: none !important;
  margin: 0 !important;
  color: #34445c !important;
  font-size: 16px !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
}
@media (max-width: 720px) {
  .interview-question-details {
    margin-bottom: 16px;
    padding: 13px 14px 12px;
  }
  .text-card.interview-question .interview-question-details .interview-answer-rich,
  .text-card.interview-question .interview-question-details .interview-answer-rich p {
    font-size: 15px !important;
  }
}

/* Desktop interview workspace: independently scrolling navigation and content. */
.interview-sidebar-scroll-controls {
  display: none;
}

@media screen and (min-width: 901px) {
  body.interview-page-body .wrap {
    width: 100% !important;
    max-width: 1760px !important;
  }

  body.interview-page-body .section.interview-page {
    width: 100% !important;
    max-width: 1720px !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  .interview-page .interview-question-layout {
    display: grid !important;
    grid-template-columns: minmax(320px, 360px) minmax(0, 1260px) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 1620px !important;
    height: calc(100vh - 32px) !important;
    min-height: 620px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  .interview-page .interview-sidebar-area {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 8px 78px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .interview-page .interview-sidebar-area::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card,
  .interview-page .interview-sidebar-area > .interview-pdf-card,
  .interview-page .interview-sidebar-area > .interview-sidebar-rail {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
  }

  .interview-page .interview-sidebar-area .interview-sidebar-rail {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
  }

  .interview-page .interview-sidebar-area .interview-question-sidebar {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .interview-page .interview-question-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 1260px !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 14px 40px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  .interview-page .interview-question-content > .interview-question,
  .interview-page .interview-question-content > .interview-resume-banner {
    width: 100% !important;
    max-width: 1260px !important;
  }

  .interview-page .interview-sidebar-scroll-controls {
    position: relative !important;
    z-index: 12 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: end !important;
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    width: max-content !important;
    margin: 0 20px 12px 0 !important;
    padding: 9px !important;
    border: 1px solid rgba(205, 216, 233, .92) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .94) !important;

    backdrop-filter: blur(8px) !important;
  }

  .interview-page .interview-sidebar-scroll-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 1px solid #d3deed !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #0b1f44 !important;

    cursor: pointer !important;
  }

  .interview-page .interview-sidebar-scroll-button:hover {
    border-color: #9eb8dd !important;
    background: #f3f7fd !important;
    transform: translateY(-1px) !important;
  }

  .interview-page .interview-sidebar-scroll-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .25) !important;
    outline-offset: 2px !important;
  }

  .interview-page .interview-sidebar-scroll-button svg {
    width: 19px !important;
    height: 19px !important;
  }

  .interview-page .interview-question-layout:not(.sidebar-collapsed) .interview-sidebar-handle {
    display: none !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed {
    grid-template-columns: 48px minmax(0, 1260px) !important;
    gap: 20px !important;
    max-width: 1300px !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area {
    display: block !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area > :not(.interview-sidebar-handle) {
    display: none !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed > .interview-sidebar-scroll-controls {
    display: none !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-handle {
    position: sticky !important;
    top: 16px !important;
    z-index: 12 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid #d3deed !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #0b1f44 !important;

    writing-mode: horizontal-tb !important;
    transform: none !important;
    cursor: pointer !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-handle span {
    display: none !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-handle-arrow {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    transform: rotate(-90deg) !important;
  }
}

/* Individual interview answers can be collapsed while keeping their question visible. */
.text-card.interview-question {
  position: relative !important;
}

.text-card.interview-question > .interview-question-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  padding-right: 0 !important;
}

.interview-question-title-main {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
}

.interview-question-collapse-toggle {
  position: static;
  z-index: 2;
  display: inline-grid;
  width: 40px;
  max-width: 40px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  align-self: start;
  place-items: center;
  border: 1px solid #d3deed;
  border-radius: 8px;
  background: #fff;
  color: #071226;

  cursor: pointer;
}

.interview-question-collapse-toggle:hover,
.interview-question-collapse-toggle:focus-visible {
  border-color: #9eb8dd;
  background: #f8fafc;

}

.interview-question-collapse-toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.interview-question-collapse-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  transition: transform .18s ease;
}

.text-card.interview-question.is-collapsed > :not(.interview-question-title):not(.interview-question-collapse-toggle) {
  display: none !important;
}

.text-card.interview-question.is-collapsed .interview-question-collapse-toggle svg {
  transform: rotate(180deg);
}

.text-card.interview-question.is-collapsed > .interview-question-title {
  margin-bottom: 0 !important;
}

@media (max-width: 620px) {
  .text-card.interview-question > .interview-question-title {
    padding-right: 0 !important;
  }

  .interview-question-collapse-toggle {
    width: 36px;
    max-width: 36px;
    height: 32px;
    min-height: 32px;
  }
}

/* Top-level desktop interview shell: full-height left navigation + scrolling page. */
@media screen and (min-width: 901px) {
  body.interview-page-body {
    overflow-x: hidden !important;
  }

  body.interview-page-body .wrap {
    width: calc(100% - 360px) !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 360px !important;
    padding-right: 32px !important;
    padding-left: 32px !important;
    transition: width .24s ease, margin-left .24s ease !important;
  }

  body.interview-page-body.interview-sidebar-collapsed .wrap {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.interview-page-body .hero,
  body.interview-page-body .page-nav,
  body.interview-page-body .section.interview-page {
    width: 100% !important;
    max-width: 1260px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.interview-page-body .section.interview-page {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .interview-page .interview-question-layout,
  .interview-page .interview-question-layout.sidebar-collapsed {
    display: block !important;
    width: 100% !important;
    max-width: 1260px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .interview-page .interview-sidebar-area,
  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area {
    position: fixed !important;
    z-index: 100 !important;
    inset: 0 auto 0 0 !important;
    display: block !important;
    width: 360px !important;
    min-width: 360px !important;
    height: 100vh !important;
    max-height: none !important;
    padding: 16px 12px 42px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    background: #f8fafc !important;
    border-right: 1px solid #e0e7f1 !important;
    transform: translateX(0) !important;
    transition: transform .24s ease !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .interview-page .interview-sidebar-area::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area {
    pointer-events: none !important;
    transform: translateX(-100%) !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area > :not(.interview-sidebar-handle) {
    display: block !important;
  }

  .interview-page .interview-sidebar-area > .reviewer-modal {
    display: none !important;
  }

  .interview-page .interview-sidebar-area > .reviewer-modal.is-open {
    display: block !important;
    pointer-events: auto !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card,
  .interview-page .interview-sidebar-area > .interview-pdf-card,
  .interview-page .interview-sidebar-area > .interview-sidebar-rail {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
  }

  .interview-page .interview-sidebar-area .interview-sidebar-rail,
  .interview-page .interview-sidebar-area .interview-question-sidebar {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .interview-page .interview-sidebar-area .interview-sidebar-mini-toggle {
    display: none !important;
  }

  .interview-page .interview-sidebar-area .interview-reviewer-card .interview-sidebar-mini-toggle,
  .interview-page .interview-sidebar-area:not(:has(.interview-reviewer-card)) .interview-pdf-card .interview-sidebar-mini-toggle {
    display: inline-grid !important;
    position: fixed !important;
    z-index: 118 !important;
    top: 16px !important;
    right: auto !important;
    left: 316px !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border: 1px solid #d3deed !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #061a3f !important;

  }

  .interview-page .interview-question-content {
    display: block !important;
    width: 100% !important;
    max-width: 1260px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 0 40px !important;
    overflow: visible !important;
  }

  .interview-page .interview-sidebar-scroll-controls,
  .interview-page .interview-question-layout.sidebar-collapsed > .interview-sidebar-scroll-controls {
    position: fixed !important;
    z-index: 112 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 360px !important;
    height: 36px !important;
    padding: 0 34px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid #e1e6ee !important;
    border-right: 1px solid #e0e7f1 !important;
    border-radius: 0 !important;
    background: #f8fafc !important;

    backdrop-filter: none !important;
    transition: transform .24s ease, opacity .18s ease !important;
  }

  .interview-page .interview-sidebar-scroll-controls .interview-sidebar-scroll-button {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;

    color: #061a3f !important;
    transform: none !important;
  }

  .interview-page .interview-sidebar-scroll-controls .interview-sidebar-scroll-button:hover:not(:disabled) {
    border: 0 !important;
    background: #e9edf3 !important;
    transform: none !important;
  }

  .interview-page .interview-sidebar-scroll-controls .interview-sidebar-scroll-button:disabled {
    color: #8793a5 !important;
    cursor: default !important;
    opacity: 1 !important;
  }

  .interview-page .interview-sidebar-scroll-controls .interview-sidebar-scroll-button svg {
    width: 23px !important;
    height: 23px !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed > .interview-sidebar-scroll-controls {
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateX(-380px) !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-handle {
    position: fixed !important;
    z-index: 115 !important;
    top: 16px !important;
    right: auto !important;
    left: 12px !important;
  }
}

/* Interview pages use flat surfaces without drop shadows. */
body.interview-page-body *,
body.interview-page-body *::before,
body.interview-page-body *::after {

}

/* Interview answer content follows the available container width. */
body.interview-page-body .interview-question-content .interview-question > *,
body.interview-page-body .interview-question-content .interview-answer-rich,
body.interview-page-body .interview-question-content .interview-question-details,
body.interview-page-body .interview-question-content .star-method-tip,
body.interview-page-body .interview-question-content .where-used-prose {
  width: 100% !important;
  max-width: none !important;
}

/* Unified interview sidebar: one navigation surface with section dividers. */
@media screen and (min-width: 901px) {
  .interview-page .interview-sidebar-area {
    padding-right: 30px !important;
    padding-left: 30px !important;
    background: #f8fafc !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card,
  .interview-page .interview-sidebar-area > .interview-pdf-card,
  .interview-page .interview-sidebar-area > .interview-sidebar-rail {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e1e7f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 1px !important;
    row-gap: 6px !important;
    padding: 14px 0 16px !important;
    border-bottom: 1px solid #dfe6ef !important;
    background: transparent !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card::before {
    content: "Reviewed by" !important;
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    color: #061a3f !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .interview-page .interview-sidebar-area .interview-reviewer-card .reviewer-kicker {
    display: none !important;
  }

  .interview-page .interview-sidebar-area .interview-reviewer-card .reviewer-photo-btn {
    grid-column: 1 !important;
  }

  .interview-page .interview-sidebar-area .interview-reviewer-card .reviewer-compact-copy {
    grid-column: 2 !important;
  }

  .interview-page .interview-sidebar-area .reviewer-avatar {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid #fff !important;
  }

  .interview-page .interview-sidebar-area .reviewer-kicker {
    margin-bottom: 2px !important;
    font-size: 13px !important;
  }

  .interview-page .interview-sidebar-area .reviewer-name-btn {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  .interview-page .interview-sidebar-area .reviewer-trust {
    margin-top: 3px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  .interview-page .interview-sidebar-area > .interview-pdf-card {
    padding: 16px 0 18px !important;
  }

  .interview-page .interview-sidebar-area .interview-pdf-copy {
    gap: 10px !important;
  }

  .interview-page .interview-sidebar-area .interview-pdf-copy > strong {
    font-size: 16px !important;
    text-align: center !important;
  }

  .interview-page .interview-sidebar-area .interview-pdf-buttons {
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .interview-page .interview-sidebar-area .interview-pdf-pill {
    min-height: 36px !important;
    padding: 8px 11px !important;
    font-size: 12px !important;
    background: #fff !important;
    border-color: #ced9e8 !important;
  }

  .interview-page .interview-sidebar-area > .interview-sidebar-rail {
    border-bottom: 0 !important;
  }

  .interview-page .interview-sidebar-area .interview-question-sidebar {
    padding: 16px 0 26px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .interview-page .interview-sidebar-area .interview-sidebar-head {
    justify-content: center !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  .interview-page .interview-sidebar-area .interview-sidebar-head strong {
    font-size: 16px !important;
    text-align: center !important;
  }

  .interview-page .interview-sidebar-area .interview-topic-filter-wrap {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 13px !important;
    padding: 0 0 13px !important;
    border-bottom: 1px solid #e4eaf2 !important;
  }

  .interview-page .interview-sidebar-area .interview-topic-filter-wrap label {
    display: block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: #536077 !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .045em !important;
    white-space: nowrap !important;
  }

  .interview-page .interview-sidebar-area .interview-question-tool-tabs {
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  .interview-page .interview-sidebar-area .interview-question-tool-tab {
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  .interview-page .interview-sidebar-area .interview-topic-filter-select {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 38px !important;
    padding: 8px 36px 8px 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23061a3f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    font-size: 14px !important;
  }

  .interview-page .interview-sidebar-area .interview-question-search-input {
    min-height: 38px !important;
    padding: 8px 52px 8px 15px !important;
    font-size: 14px !important;
  }

  .interview-page .interview-sidebar-area .interview-question-sidebar ol {
    gap: 3px !important;
  }

  .interview-page .interview-sidebar-area .interview-question-sidebar a {
    padding: 10px 8px !important;
    border: 0 !important;
    border-radius: 9px !important;
  }

  .interview-page .interview-sidebar-area .interview-question-sidebar a:hover,
  .interview-page .interview-sidebar-area .interview-question-sidebar a.active {
    background: #edf3fb !important;
  }
}

/* Desktop reviewer card and collapse control centered on the navigation edge. */
.interview-question-layout > .interview-sidebar-mini-toggle {
  display: none !important;
}

.reviewer-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #061a3f;
  font-weight: 800;
}

.reviewer-verified-icon {
  display: block;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  overflow: visible;
}

.reviewer-verified-icon circle {
  fill: #16a34a;
  stroke: #15803d;
  stroke-width: 1;
}

.reviewer-verified-icon path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media screen and (min-width: 901px) {
  .interview-page .interview-sidebar-area > .interview-reviewer-card {
    margin: 0 0 18px !important;
    padding: 22px 18px !important;
    grid-template-columns: 54px minmax(0, 196px) !important;
    justify-content: center !important;
    column-gap: 13px !important;
    border: 1px solid #d8e0eb !important;
    border-radius: 22px !important;
    background: #edf1f6 !important;

  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card::before {
    display: none !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-heading {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    color: #061a3f !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-verified-icon {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
    overflow: visible !important;
    filter: drop-shadow(0 2px 4px rgba(22, 163, 74, .28)) !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-verified-icon circle {
    fill: #16a34a !important;
    stroke: #15803d !important;
    stroke-width: 1 !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-verified-icon path {
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-name-btn {
    color: #061a3f !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-trust {
    color: #536077 !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-photo-btn {
    justify-self: center !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-compact-copy {
    width: 196px !important;
    justify-self: start !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-avatar {
    border-color: #fff !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .interview-sidebar-mini-toggle,
  .interview-page .interview-sidebar-area > .interview-pdf-card .interview-sidebar-mini-toggle,
  .interview-page .interview-sidebar-area .interview-question-sidebar .interview-sidebar-mini-toggle {
    display: none !important;
  }

  .interview-page .interview-question-layout:not(.sidebar-collapsed) > .interview-sidebar-mini-toggle {
    position: fixed !important;
    z-index: 118 !important;
    top: 118px !important;
    right: auto !important;
    left: 344px !important;
    display: inline-grid !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    border: 1px solid #d3deed !important;
    background: #f8fafc !important;
    color: #071226 !important;
    border-radius: 999px !important;
    /*  */
  }

  .interview-page .interview-question-layout.sidebar-collapsed > .interview-sidebar-mini-toggle {
    display: none !important;
  }

  .interview-page .interview-sidebar-area .interview-pdf-buttons {
    justify-content: center !important;
  }

  .interview-page .interview-sidebar-area .interview-pdf-copy > strong,
  .interview-page .interview-sidebar-area .interview-sidebar-head strong {
    font-size: 20px !important;
  }
}

.interview-pdf-pill .interview-download-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.interview-pdf-pill .interview-download-icon-pdf {
  color: #dc2626 !important;
}

.interview-pdf-pill .interview-download-icon-zip {
  color: #2563eb !important;
}

.interview-pdf-pill {
  align-items: center !important;
  gap: 7px !important;
}

.interview-page .interview-sidebar-area .interview-pdf-pill,
.interview-page .interview-sidebar-area .interview-pdf-pill:visited {
  border-color: #111827 !important;
  background: #0b1220 !important;
  color: var(--interviewButtonTextColor) !important;
  -webkit-text-fill-color: var(--interviewButtonTextColor) !important;
}

.interview-page .interview-sidebar-area .interview-pdf-pill:hover {
  border-color: #26364e !important;
  background: #1a2638 !important;
  color: var(--interviewButtonTextColor) !important;
  -webkit-text-fill-color: var(--interviewButtonTextColor) !important;
}

.interview-page .interview-sidebar-area .interview-pdf-pill > span {
  color: var(--interviewButtonTextColor) !important;
  -webkit-text-fill-color: var(--interviewButtonTextColor) !important;
}

.interview-page .interview-sidebar-area .interview-pdf-pill .interview-download-icon {
  color: var(--interviewButtonTextColor) !important;
}

.interview-page .interview-pills a.active,
.interview-page .interview-pills a.active:hover,
.interview-page .interview-pills a.active:visited,
.interview-page .interview-pdf-pill,
.interview-page .interview-pdf-pill:hover,
.interview-page .interview-pdf-pill:visited,
.interview-page .interview-resume-cta a,
.interview-page .interview-resume-cta a:hover,
.interview-page .interview-resume-cta a:visited {
  color: var(--interviewButtonTextColor) !important;
  -webkit-text-fill-color: var(--interviewButtonTextColor) !important;
}

.interview-page .interview-pills a.active *,
.interview-page .interview-pdf-pill *,
.interview-page .interview-resume-cta a * {
  color: var(--interviewButtonTextColor) !important;
  -webkit-text-fill-color: var(--interviewButtonTextColor) !important;
}

/* Reviewer summary: centered verification line, then avatar and trust proof. */
@media screen {
  .interview-page .interview-sidebar-area > .interview-reviewer-card {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 196px) !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 13px !important;
    row-gap: 8px !important;
    padding: 12px 18px !important;

  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card::before {
    display: none !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-heading {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    color: #061a3f !important;
    font-size: 16.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-heading .reviewer-name {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-heading-copy {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: .28em !important;
    white-space: nowrap !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-photo-btn {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-avatar {
    width: 48px !important;
    height: 48px !important;

  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-verified-icon {
    filter: none !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-compact-copy {
    grid-column: 2 !important;
    width: 196px !important;
    margin: 0 !important;
    justify-self: start !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-trust {
    margin: 0 !important;
    color: #1a202a !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }
}

@media screen and (max-width: 900px) {
  .interview-page .interview-sidebar-area > .interview-reviewer-card {
    grid-template-columns: 54px minmax(0, 196px) !important;
    padding: 12px 16px !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card .reviewer-avatar {
    width: 48px !important;
    height: 48px !important;
  }

}

/* Reviewer-adjacent guide information and support dialogs. */
.interview-page .interview-sidebar-area > .interview-reviewer-card {
  margin-bottom: 0 !important;
}

.interview-support-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  width: 100%;
  margin: 6px 0 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
}

.interview-page .interview-sidebar-area > .interview-support-links ~ .interview-pdf-card {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e1e7f0 !important;
}

.interview-page .interview-sidebar-area > .interview-support-links ~ .interview-pdf-card .interview-pdf-copy > strong {
  margin-bottom: 10px !important;
}

.interview-support-links button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 0;
  color: #40516d;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #a9b6c9;
  text-underline-offset: 3px;
  cursor: pointer;
}

.interview-support-links button:hover,
.interview-support-links button:focus-visible {
  color: #0b4ea2;
  text-decoration-color: currentColor;
}

.interview-info-modal .reviewer-modal-backdrop {
  --modal-backdrop-background-color: rgba(0, 14, 30, .75);
  background-color: var(--modal-backdrop-background-color);
  opacity: .6;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.interview-info-modal-card {
  width: min(620px, 100%) !important;
  max-height: min(760px, calc(100vh - 44px));
  overflow-y: auto;
}

.interview-disclaimer-modal-card {
  width: min(760px, 100%) !important;
  text-align: left !important;
}

.interview-info-modal-card > h3 {
  margin: 0 42px 18px !important;
  text-align: center;
}

.interview-info-modal-copy h4 {
  margin: 18px 0 6px;
  color: #061a3f;
  font-size: 16px;
  line-height: 1.3;
}

.interview-info-modal-copy h4:first-child {
  margin-top: 0;
}

.interview-info-modal-copy p,
.interview-info-modal-card > p {
  margin: 0 !important;
  color: #536077 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.interview-info-modal-card > p {
  text-align: center;
}

.interview-contact-actions {
  margin-top: 20px;
}

.interview-contact-actions a {
  min-height: 44px;
  padding: 10px 16px;
  border-color: #111827;
  background: #0b1220;
  color: #fff;
}

.interview-contact-actions a:hover {
  background: #1a2638;
  color: #fff;
}

.interview-contact-actions a[href*="reddit.com"] {
  border-color: #ff4500;
  background: #ff4500;
  color: #fff;
}

.interview-contact-actions a[href*="reddit.com"]:hover,
.interview-contact-actions a[href*="reddit.com"]:focus-visible {
  border-color: #dc3b00;
  background: #dc3b00;
  color: #fff;
}

@media (max-width: 620px) {
  .interview-info-modal {
    padding: 12px;
  }

  .interview-info-modal-card {
    max-height: calc(100vh - 24px);
    padding: 24px 18px;
    border-radius: 18px;
  }

  .interview-contact-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .interview-contact-actions a {
    width: 100%;
  }
}

/* Final interview shell alignment overrides. */
body.interview-page-body {
  background-color: transparent !important;
  background-image: none !important;
}

@media screen and (min-width: 901px) {
  .interview-page .interview-sidebar-area,
  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area {
    background: transparent !important;
    background-color: transparent !important;
    border-right: 0 !important;
  }

  .interview-page .interview-sidebar-area::after,
  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area::after {
    position: fixed !important;
    z-index: 1 !important;
    top: 40px !important;
    bottom: 0 !important;
    left: 359px !important;
    display: block !important;
    width: 1px !important;
    background: #e0e7f1 !important;
    content: "" !important;
    pointer-events: none !important;
  }

  .interview-page .interview-sidebar-area > .interview-reviewer-card {
    margin-top: 45px !important;
  }

  .interview-page .interview-question-layout:not(.sidebar-collapsed) > .interview-sidebar-mini-toggle {
    top: 58px !important;
    transform: none !important;
  }

  body.interview-page-body.interview-sidebar-collapsed .wrap {
    width: calc(100% - 40px) !important;
    margin-left: 40px !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area::after {
    left: 39px !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area > :not(.interview-sidebar-handle) {
    display: none !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .reviewer-modal,
  body.interview-page-body.interview-sidebar-collapsed .reviewer-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-handle {
    position: fixed !important;
    z-index: 118 !important;
    top: 58px !important;
    right: auto !important;
    left: 24px !important;
    display: inline-grid !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid #d3deed !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #071226 !important;

  }

  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-handle-arrow {
    position: static !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    transform: rotate(-90deg) !important;
    transform-origin: 50% 50% !important;
  }
}

/* Final desktop sidebar surface and question-list refinements. */
@media screen and (min-width: 901px) {
  .interview-page .interview-sidebar-area > .interview-reviewer-card {
    background: #fff !important;
  }

  .interview-page .interview-sidebar-area .interview-pdf-pill,
  .interview-page .interview-sidebar-area .interview-pdf-pill:visited,
  .interview-page .interview-sidebar-area .interview-pdf-pill:hover,
  .interview-page .interview-sidebar-area .interview-pdf-pill:focus-visible {
    background: #fff !important;
    color: #071226 !important;
    -webkit-text-fill-color: #071226 !important;
  }

  .interview-page .interview-sidebar-area .interview-pdf-pill > span,
  .interview-page .interview-sidebar-area .interview-pdf-pill *,
  .interview-page .interview-sidebar-area .interview-pdf-pill .interview-download-icon {
    color: #071226 !important;
    -webkit-text-fill-color: #071226 !important;
  }
}

.interview-page .interview-question-sidebar .interview-question-tag.company {
  display: none !important;
}

.interview-page .interview-sidebar-mini-toggle svg path,
.interview-page .interview-sidebar-handle-arrow path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media screen and (min-width: 901px) {
  .interview-page .interview-sidebar-area::after,
  .interview-page .interview-question-layout.sidebar-collapsed .interview-sidebar-area::after {
    display: none !important;
  }

  body.interview-page-body::after {
    position: fixed;
    z-index: 99;
    top: 40px;
    bottom: 0;
    left: 359px;
    width: 1px;
    background: #e0e7f1;
    content: "";
    pointer-events: none;
  }

  body.interview-page-body.interview-sidebar-collapsed::after {
    left: 39px;
  }
}

@media screen and (max-width: 719px) {
  .interview-page .interview-sidebar-area > .interview-reviewer-card {
    display: none !important;
  }

  .interview-page .interview-pills {
    margin-bottom: 6px !important;
  }
}

.interview-back-to-top,
.interview-back-to-top:visited {
  position: fixed;
  z-index: 10000;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  width: 54px;
  height: 54px;
  padding: 6px 5px 5px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid #d3deed;
  border-radius: 13px;
  background: rgb(255 255 255 / 92%);
  color: #52617a;
  text-decoration: none;

}

.interview-back-to-top[hidden] {
  display: none !important;
}

.interview-back-to-top:hover,
.interview-back-to-top:focus-visible {
  border-color: #9bacc2;
  background: #f2f5f9;
  color: #071a3f;
  outline: 3px solid rgb(83 105 136 / 14%);
  outline-offset: 2px;
}

.interview-back-to-top svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.interview-back-to-top span {
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

@media screen and (max-width: 719px) {
  .interview-back-to-top,
  .interview-back-to-top:visited {
    right: 12px;
    bottom: 12px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }
}

.interview-page .interview-sidebar-area {
  overscroll-behavior: none !important;
}

html {
  overscroll-behavior-y: none !important;
}

.interview-page .interview-pdf-pill:hover,
.interview-page .interview-pdf-pill:focus-visible,
.interview-page .interview-sidebar-area .interview-pdf-pill:hover,
.interview-page .interview-sidebar-area .interview-pdf-pill:focus-visible {
  border-color: #111827 !important;
  background: #e3e3e3 !important;
  color: #071226 !important;
  -webkit-text-fill-color: #071226 !important;
}

.interview-page .interview-pdf-pill:hover *,
.interview-page .interview-pdf-pill:focus-visible * {
  color: #071226 !important;
  -webkit-text-fill-color: #071226 !important;
}

@media screen and (max-width: 900px) {
  .interview-page .interview-pdf-pill,
  .interview-page .interview-pdf-pill:visited,
  .interview-page .interview-sidebar-area .interview-pdf-pill,
  .interview-page .interview-sidebar-area .interview-pdf-pill:visited {
    border-color: #111827 !important;
    background: #fff !important;
    color: #071226 !important;
    -webkit-text-fill-color: #071226 !important;
  }

  .interview-page .interview-pdf-pill *,
  .interview-page .interview-sidebar-area .interview-pdf-pill * {
    color: #071226 !important;
    -webkit-text-fill-color: #071226 !important;
  }

  .interview-page .interview-pdf-pill > span,
  .interview-page .interview-sidebar-area .interview-pdf-pill > span {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #071226 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #071226 !important;
  }

  .interview-page .interview-pdf-pill:hover,
  .interview-page .interview-pdf-pill:focus-visible,
  .interview-page .interview-sidebar-area .interview-pdf-pill:hover,
  .interview-page .interview-sidebar-area .interview-pdf-pill:focus-visible {
    background: #e3e3e3 !important;
  }
}

@media screen and (max-width: 719px) {
  .interview-page .interview-pdf-buttons,
  .interview-page .interview-sidebar-area .interview-pdf-buttons {
    width: 100% !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .interview-page .interview-pdf-pill,
  .interview-page .interview-sidebar-area .interview-pdf-pill {
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px 19px !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  .interview-page .interview-pdf-pill:first-child,
  .interview-page .interview-sidebar-area .interview-pdf-pill:first-child {
    flex-grow: 0 !important;
  }

  .interview-page .interview-pdf-pill:last-child,
  .interview-page .interview-sidebar-area .interview-pdf-pill:last-child {
    flex-grow: 0 !important;
  }

  .interview-page .interview-pdf-pill > span,
  .interview-page .interview-sidebar-area .interview-pdf-pill > span {
    font-size: 11.5px !important;
  }

  .interview-page .interview-pdf-pill .interview-download-icon,
  .interview-page .interview-sidebar-area .interview-pdf-pill .interview-download-icon {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }
}

/* Question provenance card above the technical reviewer. */
.interview-source-card {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 15px;
  border: 1px solid #cad9ec;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #f3f7fd 58%, #eefaf5 100%);
  color: #0b2349;
}

.interview-source-card-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  color: #536077;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

.interview-source-card-row-primary {
  color: #061a3f;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.22;
}

.interview-source-card-row-primary .interview-source-card-icon svg {
  width: 32px;
  height: 32px;
}

.interview-source-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #c7d8ee;
  border-radius: 10px;
  background: #fff;
  color: #ce3719;
}

.interview-source-card-row:nth-child(2) .interview-source-card-icon {
  color: #2563a8;
}

.interview-source-card-row:nth-child(3) .interview-source-card-icon {
  border-color: #bfe2cc;
  background: #f4fcf7;
  color: #159447;
}

.interview-source-card-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media screen and (min-width: 901px) {
  .interview-page .interview-sidebar-area > .interview-source-card {
    margin-top: 47px;
  }

  .interview-page .interview-sidebar-area > .interview-source-card + .interview-reviewer-card {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 719px) {
  .interview-page .interview-sidebar-area > .interview-source-card {
    display: none !important;
  }
}

/* Interactive interview-guide team summary. */
.interview-page .interview-sidebar-area > .interview-team-card {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 13px !important;
  padding: 17px 18px !important;
}

/* Keep the team panel after the final numbered question so it never consumes
   space above the question-navigation list. */
.interview-page .interview-question-sidebar > .interview-team-card-end {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 13px !important;
  width: 100%;
  max-width: none;
  margin: 22px 0 0 !important;
  padding: 17px 18px !important;
  cursor: default;
}

.interview-page .interview-question-sidebar > .interview-team-card-end .reviewer-heading {
  grid-column: 1 / -1 !important;
  display: flex !important;
  width: 100%;
  justify-content: center !important;
  padding-inline: 24px !important;
  font-size: 20px !important;
}

.interview-page .interview-question-sidebar > .interview-team-card-end .interview-team-body {
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

/* A second team panel follows the answer column after all loaded answers. */
.interview-page > .interview-team-card-end {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100%;
  max-width: 520px;
  margin: 32px auto 0 !important;
  padding: 20px 22px !important;
  cursor: default;
}

.interview-page > .interview-team-card-end .reviewer-heading {
  grid-column: 1 / -1 !important;
  display: flex !important;
  width: 100%;
  justify-content: center !important;
  padding-inline: 24px !important;
  font-size: 20px !important;
}

.interview-page > .interview-team-card-end .interview-team-body {
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

@media screen and (max-width: 719px) {
  .interview-page .interview-question-sidebar > .interview-team-card-end {
    margin-top: 18px !important;
    padding: 18px 16px !important;
  }

  .interview-page > .interview-team-card-end {
    margin-top: 24px !important;
    padding: 18px 16px !important;
  }
}

html.interview-team-card-dismissed body .interview-team-card,
.interview-team-card[hidden] {
  display: none !important;
}

.interview-team-dismiss {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #536077;
  appearance: none;
  background: #fff;
  border: 1px solid #d4deec;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.interview-team-dismiss:hover,
.interview-team-dismiss:focus-visible {
  color: #061a3f;
  background: #eef3f9;
  border-color: #aebed2;
  outline: none;
}

.interview-team-dismiss svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.interview-page .interview-sidebar-area > .interview-team-card .reviewer-heading {
  grid-column: 1 !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 20px !important;
  padding-inline: 24px !important;
}

.interview-team-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.interview-team-avatars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.interview-team-member {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  appearance: none;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e8eef7;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}

.interview-team-member + .interview-team-member {
  margin: 0;
}

.interview-team-member:hover,
.interview-team-member:focus-visible,
.interview-team-member.is-selected {
  border-color: #16a34a;
  outline: none;
  transform: translateY(-1px);
}

.interview-team-member img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interview-team-member picture {
  display: contents;
}

.interview-team-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
  color: #536077;
  font-size: 11.5px;
  line-height: 1.3;
}

.interview-team-copy strong {
  color: #061a3f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

@media screen and (max-width: 900px) {
  .interview-page .interview-sidebar-area {
    gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
  }

  .interview-page .interview-sidebar-area > .interview-sidebar-rail,
  .interview-page .interview-sidebar-area .interview-question-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
  }

  .interview-page .interview-sidebar-area > .interview-support-links ~ .interview-pdf-card {
    margin-top: 0 !important;
  }

  .interview-page .interview-sidebar-area > .interview-team-card {
    display: none !important;
  }

  .interview-page .interview-question-layout:not(.sidebar-mobile-expanded) > .interview-sidebar-handle {
    display: flex !important;
  }
}

/* Dark theme for generated interview guides; values come from mainindex.css. */
html.dark-theme body.theme-base {
  --gray-200:#e3e3e3;
  --gray-500:#9b9b9b;
  --gray-600:#676767;
  --gray-700:#424242;
  --gray-800:#212121;
  --gray-900:#171717;
  --body-background-color:#212121;
  --text-primary:#9b9b9b;
  --text-tertiary:#9b9b9b;
  --border-medium:hsla(0,0%,100%,.15);
  --border-heavy:hsla(0,0%,100%,.2);
  --main-surface-primary:#212121;
  --main-surface-secondary:#2f2f2f;
  --main-surface-tertiary:#2f2f2f;
  --sidebar-surface-primary:#171717;
  --occupation-control-hover:#424242;
  --occupation-accent-surface:#292929;
  --occupation-code-surface:#171717;
  --occupation-success-surface:#193727;
}
html.dark-theme body.theme-base.interview-page-body,
html.dark-theme body.theme-base .interview-page {
  background:var(--body-background-color)!important;
  color:var(--text-primary)!important;
}
html.dark-theme body.theme-base.interview-page-body .wrap,
html.dark-theme body.theme-base .text-card.interview-question {
  background:var(--main-surface-primary)!important;
  border-color:var(--border-medium)!important;
  color:var(--text-primary)!important;
}
html.dark-theme body.theme-base .hero h1 {
  color:var(--gray-200)!important;
}
html.dark-theme body.theme-base .hero p {
  color:var(--text-primary)!important;
}
html.dark-theme body.theme-base .interview-pills a:not(.active) {
  background:var(--main-surface-tertiary)!important;
  border-color:var(--border-medium)!important;
  color:var(--gray-200)!important;
}
html.dark-theme body.theme-base .interview-pills a:not(.active):is(:hover,:focus-visible) {
  background:var(--occupation-control-hover)!important;
  border-color:var(--border-heavy)!important;
}
html.dark-theme body.theme-base .interview-pills a.active,
html.dark-theme body.theme-base .interview-pills a.active:is(:hover,:focus-visible,:visited) {
  background:#000!important;
  border-color:var(--gray-600)!important;
  color:var(--gray-200)!important;
}
html.dark-theme body.theme-base .interview-pdf-pill *,
html.dark-theme body.theme-base .interview-pdf-pill:visited * {
  color:inherit!important;
  stroke:currentColor!important;
}
html.dark-theme body.theme-base .interview-page .interview-pdf-card .interview-pdf-pill .interview-download-icon,
html.dark-theme body.theme-base .interview-page .interview-pdf-card .interview-pdf-pill .interview-download-icon * {
  color:var(--text-primary)!important;
  stroke:var(--text-primary)!important;
}
html.dark-theme body.theme-base .interview-sidebar-question-number {
  color:var(--gray-500)!important;
}
html.dark-theme body.theme-base .interview-question-tags.compact,
html.dark-theme body.theme-base .interview-question-tool-tab:not(.is-active) {
  color:var(--text-primary)!important;
}
html.dark-theme body.theme-base .generated-diagram-image {
  filter:brightness(.7)!important;
}
html.dark-theme body.theme-base .diagram-lightbox-stage img {
  filter:brightness(.7)!important;
}
html.dark-theme body.theme-base .diagram-lightbox-stage {
  background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0) 0 0 / 26px 26px,
    rgba(0,0,0,.8)!important;
}
html.dark-theme body.theme-base .diagram-lightbox-toolbar {
  border:1px solid var(--border-medium)!important;
  background:var(--sidebar-surface-primary)!important;
}
html.dark-theme body.theme-base :is(.diagram-zoom-btn,.diagram-lightbox-close) {
  background:transparent!important;
  color:var(--text-primary)!important;
  -webkit-text-fill-color:var(--text-primary)!important;
}
html.dark-theme body.theme-base :is(.diagram-zoom-btn,.diagram-lightbox-close):is(:hover,:focus-visible) {
  background:var(--main-surface-secondary)!important;
  color:var(--text-primary)!important;
  outline:none!important;
}
html.dark-theme body.theme-base.interview-page-body .interview-page img:not(.country-flag):not(.flag-strip-icon):not(.level-svg-icon):not(.icon):not(.rim-page-context-nav__occupation-icon):not(.interview-detail-heading-icon):not(.careerhub-card-icon) {
  filter:brightness(.7)!important;
}
html.dark-theme body.theme-base :is(
  .interview-detail-heading,.interview-detail-heading-inner,.interview-question-content,
  .interview-question-sidebar,.interview-sidebar-rail,.interview-source-card,
  .interview-reviewer-card,.interview-team-card,.interview-pdf-card,
  .interview-info-modal-card,.interview-guide-disclaimer,.interview-question-details,
  .interviewer-next-card,.interview-explanation-reference,.interview-sidebar-head
){background:var(--main-surface-primary)!important;border-color:var(--border-medium)!important;color:var(--text-primary)!important}
html.dark-theme body.theme-base :is(
  .interview-topic-filter-wrap,.interview-question-tools,.interview-question-tool-tabs,
  .interview-question-tool-control,.interview-question-sidebar li,
  .interview-question-sidebar li a,.interview-team-dismiss,.interview-copy-code-button,
  .interview-question-collapse-toggle,.interview-back-to-top,.interview-sidebar-handle,
  .interview-sidebar-mini-toggle,.interview-sidebar-scroll-button
){background:var(--main-surface-secondary)!important;border-color:var(--border-medium)!important;color:var(--text-primary)!important}
html.dark-theme body.theme-base :is(
  .interview-question-tool-tab:hover,.interview-question-tool-tab.is-active,
  .interview-question-sidebar li a:hover,.interview-question-sidebar li a.active,
  .interview-team-dismiss:hover,.interview-team-dismiss:focus-visible,
  .interview-copy-code-button:hover,.interview-question-collapse-toggle:hover,
  .interview-back-to-top:hover,.interview-sidebar-handle:hover,
  .interview-sidebar-mini-toggle:hover,.interview-sidebar-scroll-button:hover
){background:var(--occupation-control-hover)!important;border-color:var(--border-heavy)!important;color:var(--gray-200)!important}
html.dark-theme body.theme-base :is(
  .interview-detail-heading-title,.interview-question-title,.interview-question-title-main,
  .detailed-answer-heading,.answer-section-heading,.reviewer-heading,
  .interview-source-card-row-primary,.interview-info-modal-card h3,
  .interview-info-modal-card h4,.interview-team-copy strong,
  .interview-question-sidebar strong,.interview-pdf-copy>strong
){color:var(--text-primary)!important}
html.dark-theme body.theme-base :is(
  .interview-detail-last-updated,.interview-answer-rich,.interview-answer-rich p,
  .interview-answer-rich li,.interview-team-copy,.interview-source-card-row,
  .interview-info-modal-card p,.interview-support-links,.interview-support-links button,
  .interview-question-details-label,.interviewer-next-item,
  .interview-question-sidebar .interview-sidebar-question-text
){color:var(--text-primary)!important}
html.dark-theme body.theme-base :is(
  .interview-topic-filter-select,.interview-question-search-input
){background:var(--main-surface-tertiary)!important;border-color:var(--border-medium)!important;color:var(--text-primary)!important;-webkit-text-fill-color:var(--text-primary)!important}
html.dark-theme body.theme-base .interview-topic-filter-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239b9b9b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 10px center!important;
  background-size:16px 16px!important;
}
html.dark-theme body.theme-base :is(.interview-question-search-input::placeholder){color:var(--text-tertiary)!important;-webkit-text-fill-color:var(--text-tertiary)!important}
html.dark-theme body.theme-base :is(.interview-question-tag,.interview-question-tag[style]){background:var(--main-surface-tertiary)!important;border-color:var(--border-heavy)!important;color:var(--text-primary)!important}
html.dark-theme body.theme-base :is(.star-method-tip,.interviewer-next-card,.interview-question-details,.interview-explanation-reference){background:var(--occupation-accent-surface)!important;border-color:var(--border-medium)!important;color:var(--text-primary)!important}
html.dark-theme body.theme-base .text-card.interview-question .star-method-tip{background:var(--occupation-accent-surface)!important;color:var(--text-primary)!important}
html.dark-theme body.theme-base .text-card.interview-question .star-method-tip strong{color:#4caf50!important;-webkit-text-fill-color:#4caf50!important}
html.dark-theme body.theme-base .text-card.interview-question .star-method-tip p{color:var(--text-primary)!important;-webkit-text-fill-color:var(--text-primary)!important}
html.dark-theme body.theme-base .text-card.interview-question .answer-section-heading.algorithm-heading{border-color:var(--border-medium)!important;background:var(--occupation-accent-surface)!important;color:var(--text-primary)!important;-webkit-text-fill-color:var(--text-primary)!important}
html.dark-theme body.theme-base .text-card.interview-question .answer-section-heading.complexity-heading{border-color:var(--border-medium)!important;background:var(--occupation-accent-surface)!important;color:var(--text-primary)!important;-webkit-text-fill-color:var(--text-primary)!important}
html.dark-theme body.theme-base .text-card.interview-question .answer-section-heading.considerations-heading{border-color:var(--border-medium)!important;background:var(--occupation-accent-surface)!important;color:var(--text-primary)!important;-webkit-text-fill-color:var(--text-primary)!important}
html.dark-theme body.theme-base .interview-explanation-reference{background:transparent!important;background-color:transparent!important;background-image:none!important}
html.dark-theme body.theme-base :is(.interview-code-shell,.interview-question pre.interview-code-block,.interview-code-block code){background:var(--occupation-code-surface)!important;border-color:var(--border-medium)!important;color:var(--gray-200)!important}
html.dark-theme body.theme-base :is(.interview-pdf-pill,.interview-pdf-pill:visited){background:var(--main-surface-secondary)!important;border-color:var(--border-medium)!important;color:var(--text-primary)!important}
html.dark-theme body.theme-base :is(.interview-pdf-pill:hover,.interview-pdf-pill:focus-visible){background:var(--occupation-control-hover)!important;border-color:var(--gray-500)!important;color:var(--gray-200)!important}
html.dark-theme body.theme-base .interview-team-member{border-color:var(--gray-700)!important;background:var(--main-surface-secondary)!important}
html.dark-theme body.theme-base .interview-team-member:is(:hover,:focus-visible,.is-selected){border-color:#16a34a!important}
html.dark-theme body.theme-base .reviewer-modal-backdrop{background:rgba(0,0,0,.85)!important}
html.dark-theme body.theme-base :is(.interview-resume-cta,.resume-banner){border-color:var(--border-medium)!important}
html.dark-theme body.theme-base :is(.interview-support-links button:hover,.interview-support-links button:focus-visible){color:var(--gray-200)!important}
html.dark-theme body.theme-base :is(
  .interview-pills,
  .interview-sidebar-scroll-controls,
  .generated-diagram-link
) {
  background: var(--main-surface-secondary) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}
html.dark-theme body.theme-base .short-answer-heading {
  background: #474747 !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}
html.dark-theme body.theme-base .interview-pills a.active,
html.dark-theme body.theme-base .interview-pills a.active:is(:hover,:focus-visible,:visited) {
  background: #6d6d6d !important;
}
html.dark-theme body.theme-base .interview-sidebar-area :is(
  .reviewer-heading,
  .reviewer-heading *,
  .interview-team-copy,
  .interview-team-copy strong,
  .interview-pdf-copy > strong
) {
  color: var(--text-primary) !important;
}

/* Final dark mobile-sidebar alignment with the shared header chrome. */
html.dark-theme body.theme-base .interview-page .interview-sidebar-area {
  background: var(--main-surface-primary) !important;
  border-right: 1px solid var(--border-medium) !important;
}
html.dark-theme body.theme-base .interview-page .interview-sidebar-scroll-controls {
  background: var(--main-surface-primary) !important;
  border-top: 1px solid var(--border-medium) !important;
  border-right: 1px solid var(--border-medium) !important;
}
html.dark-theme body.theme-base .interview-page :is(
  .interview-source-card-icon,
  .interview-detail-heading-icon-circle
) {
  background: transparent !important;
  border: 1px solid var(--border-medium) !important;
}
body.theme-base .interview-page .interview-detail-heading-icon-circle {
  border: 0 !important;
}
html.dark-theme body.theme-base .interview-page .interview-detail-heading-icon-circle {
  border: 0 !important;
}
body.theme-base .interview-page .interview-detail-heading-icon {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}
html.dark-theme body.theme-base .interview-page :is(
  .interview-sidebar-handle,
  .interview-sidebar-mini-toggle
) {
  background: var(--main-surface-primary) !important;
  border-color: var(--border-medium) !important;
  color: var(--gray-200) !important;
}
html.dark-theme body.theme-base .interview-page .interview-sidebar-area :is(
  .interview-reviewer-card,
  .interview-pdf-card,
  .interview-sidebar-rail,
  .interview-question-sidebar,
  .interview-topic-filter-wrap
) {
  border-color: var(--border-medium) !important;
}
html.dark-theme body.theme-base .interview-page .interview-sidebar-area :is(
  .interview-topic-filter-wrap,
  .interview-question-tools,
  .interview-question-tool-control
) {
  background: transparent !important;
}
html.dark-theme body.theme-base .interview-page .interview-question-tool-tab,
html.dark-theme body.theme-base .interview-page .interview-question-tool-tab:is(:hover,.is-active) {
  color: var(--text-primary) !important;
}
body.theme-base .interview-page h1,
html.dark-theme body.theme-base .interview-page h1 {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}
body.theme-base.interview-page-body .hero h1,
html.dark-theme body.theme-base.interview-page-body .hero h1 {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}
@media screen and (min-width: 901px) {
  html.dark-theme body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill,
  html.dark-theme body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill:visited,
  html.dark-theme body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill:hover,
  html.dark-theme body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill:focus-visible,
  html.dark-theme body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill > span,
  html.dark-theme body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill * {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
  }
  html.dark-theme body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill .interview-download-icon,
  html.dark-theme body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill .interview-download-icon * {
    color: var(--text-primary) !important;
    stroke: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
  }
}
html.dark-theme body.theme-base .interview-page .interview-question-sidebar li,
html.dark-theme body.theme-base .interview-page .interview-question-sidebar li a,
html.dark-theme body.theme-base .interview-page .interview-question-sidebar li a:is(:hover,.active) {
  background: transparent !important;
}
.interview-question-details-label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 1px solid #2458b4 !important;
  border-radius: 999px;
  background: transparent !important;
  color: #2458b4 !important;
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1;
  text-transform: none;
}
html.dark-theme body.theme-base .detailed-answer-heading {
  border-top: 1px solid var(--border-medium) !important;
}
html.dark-theme body.theme-base .interview-team-member img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.7) !important;
}
html.dark-theme body.theme-base .interviewer-next-card .interviewer-next-item::before,
html.dark-theme body.theme-base .interviewer-next-card .interviewer-next-item + .interviewer-next-item::before {
  width: 19px !important;
  height: 19px !important;
  border: 1px solid #2458b4 !important;
  background: transparent !important;
  color: #2458b4 !important;
  font-family: Georgia, serif !important;
  font-size: 13px !important;
  font-style: italic !important;
  line-height: 1 !important;
}
html.dark-theme body.theme-base .interview-code-block,
html.dark-theme body.theme-base .interview-code-block code,
html.dark-theme body.theme-base .interview-code-block .hljs {
  color: #d4d4d4 !important;
}
html.dark-theme body.theme-base .interview-code-block :is(
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-tag
) {
  color: #569cd6 !important;
}
html.dark-theme body.theme-base .interview-code-block :is(
  .hljs-title.function_,
  .hljs-function .hljs-title
) {
  color: #dcdcaa !important;
}
html.dark-theme body.theme-base .interview-code-block :is(
  .hljs-title.class_,
  .hljs-type,
  .hljs-built_in
) {
  color: #4ec9b0 !important;
}
html.dark-theme body.theme-base .interview-code-block :is(
  .hljs-string,
  .hljs-attr,
  .hljs-regexp
) {
  color: #ce9178 !important;
}
html.dark-theme body.theme-base .interview-code-block :is(
  .hljs-number,
  .hljs-literal
) {
  color: #b5cea8 !important;
}
html.dark-theme body.theme-base .interview-code-block :is(
  .hljs-comment,
  .hljs-quote
) {
  color: #6a9955 !important;
}
html.dark-theme body.theme-base .interview-code-block :is(
  .hljs-variable,
  .hljs-template-variable,
  .hljs-params,
  .hljs-property,
  .hljs-attribute
) {
  color: #9cdcfe !important;
}
html.dark-theme body.theme-base .interview-code-block .hljs-meta,
html.dark-theme body.theme-base .interview-code-block .hljs-meta .hljs-keyword {
  color: #c586c0 !important;
}
html.dark-theme body.theme-base .interview-code-block :is(
  .hljs-symbol,
  .hljs-bullet
) {
  color: #d7ba7d !important;
}
html.dark-theme body.theme-base .interview-page .interview-question-layout .interview-sidebar-scroll-controls .interview-sidebar-scroll-button,
html.dark-theme body.theme-base .interview-page .interview-question-layout .interview-sidebar-scroll-controls .interview-sidebar-scroll-button:is(:hover,:focus-visible) {
  background: transparent !important;
  border-color: transparent !important;
}
html.dark-theme body.theme-base .interview-page .interview-question-layout .interview-sidebar-scroll-controls .interview-sidebar-scroll-button:is(:hover,:focus-visible) {
  color: var(--gray-200) !important;
}

/* Sidebar labels use the shared theme text color at every breakpoint. */
html:is(.dark-theme, :not(.dark-theme)) body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill,
html:is(.dark-theme, :not(.dark-theme)) body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill:visited,
html:is(.dark-theme, :not(.dark-theme)) body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill:hover,
html:is(.dark-theme, :not(.dark-theme)) body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill:focus-visible,
html:is(.dark-theme, :not(.dark-theme)) body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill > span,
html:is(.dark-theme, :not(.dark-theme)) body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill * {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

html:is(.dark-theme, :not(.dark-theme)) body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill .interview-download-icon,
html:is(.dark-theme, :not(.dark-theme)) body.theme-base .interview-page .interview-sidebar-area .interview-pdf-pill .interview-download-icon * {
  color: var(--text-primary) !important;
  stroke: var(--text-primary, currentColor) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

.interview-page .interview-pdf-pill .interview-download-icon path {
  fill: none !important;
  stroke: currentColor !important;
}

html:is(.dark-theme, :not(.dark-theme)) body.theme-base .interview-page :is(
  .interview-sidebar-head,
  .interview-sidebar-head strong,
  .interview-sidebar-handle,
  .interview-sidebar-handle span,
  .interview-sidebar-handle-arrow
) {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* Keep follow-up cards and lazy-loading feedback on their native theme surfaces. */
html:not(.dark-theme) body.theme-base .interviewer-next-card {
  background: #f8fbff !important;
  border-color: #cfe0fb !important;
  color: #0f2748 !important;
}

html:not(.dark-theme) body.theme-base .interviewer-next-card .answer-section-heading,
html:not(.dark-theme) body.theme-base .interviewer-next-card .interviewer-next-item strong {
  color: #0f2748 !important;
}

html:not(.dark-theme) body.theme-base .interviewer-next-card .interviewer-next-item .interview-answer-rich,
html:not(.dark-theme) body.theme-base .interviewer-next-card .interviewer-next-item .interview-answer-rich p {
  color: #49566a !important;
}

html.dark-theme body.theme-base .interviewer-next-card {
  background: var(--occupation-accent-surface, #292929) !important;
  border-color: var(--border-medium, hsla(0, 0%, 100%, .15)) !important;
  color: var(--text-primary, #9b9b9b) !important;
}

html.dark-theme body.theme-base .interviewer-next-card .answer-section-heading,
html.dark-theme body.theme-base .interviewer-next-card .interviewer-next-item strong {
  color: #bbbbbb !important;
}

html.dark-theme body.theme-base .interviewer-next-card .interviewer-next-item .interview-answer-rich,
html.dark-theme body.theme-base .interviewer-next-card .interviewer-next-item .interview-answer-rich p {
  color: var(--text-primary, #9b9b9b) !important;
}

html:not(.dark-theme) body.theme-base .interview-lazy-status {
  background: #f8fafc !important;
  border-color: #dce5f1 !important;
  color: #49566a !important;
}

html.dark-theme body.theme-base .interview-lazy-status {
  background: var(--occupation-accent-surface, #292929) !important;
  border-color: var(--border-medium, hsla(0, 0%, 100%, .15)) !important;
  color: var(--text-primary, #9b9b9b) !important;
}

html.dark-theme body.theme-base .interview-lazy-status.is-loading span::before {
  border-color: var(--border-heavy, hsla(0, 0%, 100%, .2)) !important;
  border-top-color: var(--text-primary, #9b9b9b) !important;
}

html.dark-theme body.theme-base .interview-lazy-status.is-error {
  background: var(--occupation-accent-surface, #292929) !important;
  border-color: #7f4a45 !important;
  color: #d9a29b !important;
}

/* Keep every public interview pill/tag label at the shared regular weight. */
body.theme-base .interview-page :is(
  .page-nav a,
  .interview-pills a,
  .interview-pdf-pill,
  .interview-pdf-pill > span,
  .interview-quick-pill,
  .interview-question-tag,
  .interview-question-search-count,
  .interview-resume-cta a,
  .interview-back-to-top span
) {
  font-weight: 400 !important;
}

/* Align the sections following the interview workspace to the Q&A width. */
body.interview-page-body .section.resume-links,
body.interview-page-body .interview-guide-disclaimer {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1260px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Match the resume banner to the short-answer surface in dark theme. */
html.dark-theme body.theme-base .interview-resume-banner {
  background: var(--body-background-color) !important;
  border-color: var(--border-medium, hsla(0, 0%, 100%, .15)) !important;
  color: var(--text-primary, #9b9b9b) !important;
}

html.dark-theme body.theme-base .interview-resume-banner strong,
html.dark-theme body.theme-base .interview-resume-banner span:not(.resume-banner-kicker) {
  color: var(--text-primary, #9b9b9b) !important;
  -webkit-text-fill-color: var(--text-primary, #9b9b9b) !important;
}

html.dark-theme body.theme-base .interview-resume-banner a,
html.dark-theme body.theme-base .interview-resume-banner a:visited {
  background: var(--body-background-color) !important;
  border: 1px solid var(--border-heavy) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

html.dark-theme body.theme-base .interview-resume-banner a:is(:hover, :focus-visible) {
  background: var(--occupation-control-hover) !important;
}

html.dark-theme body.theme-base .interview-resume-banner .resume-banner-kicker {
  background: var(--body-background-color) !important;
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
}

/* Extend the interview dark theme to the full resume examples section. */
html.dark-theme body.theme-base.interview-page-body .section.resume-links {
  background: transparent !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

html.dark-theme body.theme-base.interview-page-body .resume-links h2,
html.dark-theme body.theme-base.interview-page-body .resume-card strong {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

html.dark-theme body.theme-base.interview-page-body .resume-links .section-copy {
  color: var(--text-tertiary) !important;
  -webkit-text-fill-color: var(--text-tertiary) !important;
}

html.dark-theme body.theme-base.interview-page-body .resume-card {
  background: var(--body-background-color) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

html.dark-theme body.theme-base.interview-page-body .resume-card-btn,
html.dark-theme body.theme-base.interview-page-body .resume-card-btn:visited {
  background: var(--main-surface-secondary) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

html.dark-theme body.theme-base.interview-page-body .resume-card-btn:is(:hover, :focus-visible) {
  background: var(--occupation-control-hover) !important;
  border-color: var(--border-heavy) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* Compact 2026 salary ranges used by the third interview banner. */
.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] {
  grid-template-columns: minmax(330px, 420px) minmax(0, 1fr) !important;
}

.interview-resume-banner .interview-salary-range-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px !important;
  width: 100%;
}

.interview-salary-range-item {
  --salary-range-color: var(--firstColor);
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] a.interview-salary-range-item {
  display: block !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--borderColor);
  border-radius: 14px !important;
  background: #fff;
  color: var(--h1Color) !important;
  text-decoration: none !important;
  white-space: normal;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] a.interview-salary-range-item:is(:hover, :focus-visible) {
  border-color: var(--salary-range-color) !important;
  background: var(--occupation-control-hover, #f4fbf2) !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .interview-salary-range-level {
  margin: 0 !important;
  color: var(--h1Color) !important;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1.2 !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .interview-salary-range-heading {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 !important;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .interview-salary-range-values {
  display: grid !important;
  grid-template-columns: max-content minmax(28px, 1fr) max-content;
  align-items: center;
  gap: 7px;
  margin-top: 8px !important;
  color: var(--h1Color) !important;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1 !important;
}

.interview-salary-range-values b {
  flex: 0 0 auto;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .interview-salary-range-unit {
  display: block;
  margin: 0;
  color: var(--mutedTextColor);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .interview-salary-range-track {
  position: relative;
  display: block;
  width: 100%;
  min-width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--salary-range-color);
}

.interview-salary-range-track::before,
.interview-salary-range-track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--salary-range-color);
  transform: translateY(-50%);
}

.interview-salary-range-track::before { left: 0; }
.interview-salary-range-track::after { right: 0; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .salary-range-color-2 { --salary-range-color: #27863a; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .salary-range-color-3 { --salary-range-color: #16a6a1; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .salary-range-color-4 { --salary-range-color: #168fd2; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .salary-range-color-5 { --salary-range-color: #3867df; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .salary-range-color-6 { --salary-range-color: #8a45dc; }
.interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] .salary-range-color-7 { --salary-range-color: #a934d5; }

html.dark-theme body.theme-base .interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] a.interview-salary-range-item {
  background: var(--body-background-color) !important;
  border-color: var(--border-heavy) !important;
}

html.dark-theme body.theme-base .interview-salary-range-level,
html.dark-theme body.theme-base .interview-salary-range-values {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

html.dark-theme body.theme-base .interview-salary-range-unit {
  color: var(--text-tertiary) !important;
  -webkit-text-fill-color: var(--text-tertiary) !important;
}

@media (max-width: 900px) {
  .interview-topic-filter-select,
  .interview-question-search-input {
    font-size: 16px !important;
  }

  .interview-resume-banner[data-interview-resume-banner-variant="salary-ranges"] {
    grid-template-columns: 1fr !important;
  }
}

/* Keep the sidebar collapse control out of Safari's native button rendering. */
.interview-page .interview-sidebar-mini-toggle.interview-sidebar-toggle {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 30px !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.interview-page .interview-sidebar-mini-toggle .interview-collapse-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.interview-page .interview-sidebar-mini-toggle .interview-collapse-icon path {
  fill: none !important;
  stroke: var(--text-primary, #061a3f) !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  visibility: visible !important;
  opacity: 1 !important;
}