/* Interview Center (interview-center.html, interview-session.html, interview-result.html,
 * interview-progress.html, coding-interview.html) - to the owner's 2026-10-07 mockups.
 * Sizes are em off one clamped font-size on .ivc, so a 1280px laptop gets the mockup's layout a
 * little smaller instead of a stacked one; columns stack only below 992px. No bare <section>s:
 * the theme pads every section (use div). */

.ivc {
  --ink: #13153a;
  --sub: #676b8a;
  --line: #eceef6;
  --card: #fff;
  --soft: #f6f5ff;
  --violet: #5b35f0;
  --violet-2: #7b5cff;
  --ok: #22a04a;
  --bad: #e5484d;
  --warn: #f5a524;
  --muted: #9aa0b8;
  font-size: clamp(13px, .98vw, 15.5px);
  max-width: 82em;
  margin: -.6rem auto 0;
  padding: 0 1em 3em;
  color: var(--ink);
}
.ivc *, .ivc *::before, .ivc *::after { box-sizing: border-box; }
.ivc h1, .ivc h2, .ivc h3, .ivc h4 { color: var(--ink); }
.ivc a { text-decoration: none; }
.ivc code { font-size: .9em; padding: .08em .35em; border-radius: .35em; background: #f1effe; color: #4a2bd6; }

.ivc-card {
  background: var(--card);
  border: 1px solid #eceef7;
  border-radius: 1em;
  box-shadow: 0 .25em 1.1em rgba(40, 40, 110, .05);
  padding: 1.2em 1.3em;
  min-width: 0;
}
.ivc-h2 { display: flex; align-items: center; gap: .55em; margin: 0 0 .95em; font-size: 1.15em; font-weight: 800; }
.ivc-h2 > .fa-solid, .ivc-h2 > .fa-regular { color: var(--violet); font-size: .95em; }
.ivc-h2 .ivc-more { margin-left: auto; font-size: .78em; font-weight: 700; color: var(--violet); white-space: nowrap; }
.ivc-h2 .ivc-more .fa-solid { margin-left: .35em; transition: transform .15s ease; }
.ivc-h2 .ivc-more:hover .fa-solid { transform: translateX(.2em); }
.ivc-sh { display: flex; align-items: baseline; gap: 1em; margin: 1.7em 0 .8em; }
.ivc-sh h2 { margin: 0; font-size: 1.45em; font-weight: 800; }
.ivc-sh p { margin: .2em 0 0; color: var(--sub); font-size: .9em; }
.ivc-sh .ivc-more { margin-left: auto; font-weight: 700; color: var(--violet); white-space: nowrap; background: none; border: 0; padding: 0; }
.ivc-sh .ivc-more .fa-solid { margin-left: .35em; }

/* buttons */
.ivc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 2.75em; padding: .45em 1.25em; border-radius: .65em; border: 1px solid transparent;
  font-weight: 700; font-size: .95em; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease, color .15s ease;
}
.ivc-btn:active:not(:disabled) { transform: translateY(1px); }
.ivc-btn:disabled { opacity: .5; cursor: not-allowed; }
.ivc-btn-primary { background: linear-gradient(180deg, #6a45ff, #5530ee); color: #fff; box-shadow: 0 .35em 1em rgba(91, 53, 240, .28); }
.ivc-btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #5f3af8, #4824e0); color: #fff; }
.ivc-btn-outline { background: #fff; color: var(--violet); border-color: #c9bffb; }
.ivc-btn-outline:hover:not(:disabled) { background: #f5f2ff; color: #4524d8; }
.ivc-btn-soft { background: #efebff; color: #4a2bd6; border-color: #e1daff; }
.ivc-btn-soft:hover:not(:disabled) { background: #e5defe; }
.ivc-btn-ghost { background: #fff; color: var(--ink); border-color: #e3e5ef; }
.ivc-btn-ghost:hover:not(:disabled) { background: #f6f7fb; }
.ivc-btn-danger { background: #fdecec; color: #c62f35; border-color: #f7c9cb; }
.ivc-btn-danger:hover:not(:disabled) { background: #fbdcdd; }
.ivc-btn-sm { min-height: 2.25em; padding: .3em .9em; font-size: .85em; }

.ivc-pill { display: inline-flex; align-items: center; gap: .35em; padding: .2em .7em; border-radius: 999px; font-size: .78em; font-weight: 700; white-space: nowrap; }
.ivc-diff { color: var(--c); background: var(--bg); }
.ivc-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .35em; vertical-align: .05em; }
.ivc-muted { color: var(--sub); }
.ivc-empty { color: var(--sub); text-align: center; padding: 1.4em .5em; font-size: .92em; }
.ivc-empty .fa-solid, .ivc-empty .fa-regular { display: block; font-size: 1.8em; margin-bottom: .45em; color: #c7c9db; }

/* =================== HOME =================== */
.ivc-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
  border-radius: 1.3em; overflow: hidden; padding: 2.2em 0 2.2em 2.6em;
  background: radial-gradient(circle at 78% 30%, #e6e0ff 0, transparent 46%), linear-gradient(120deg, #faf9ff 0%, #f1efff 55%, #ebe8ff 100%);
  border: 1px solid #ebe8fb;
}
.ivc-hero-tag { display: inline-flex; align-items: center; gap: .5em; padding: .32em .8em; border-radius: 999px; background: #e9e4ff; color: #4b2ad8; font-size: .74em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ivc-hero h1 { margin: .55em 0 .35em; font-size: 2.9em; line-height: 1.08; font-weight: 900; letter-spacing: -.01em; }
.ivc-hero h1 em { font-style: normal; color: var(--violet); }
.ivc-hero p { margin: 0; max-width: 30em; color: var(--sub); font-size: 1.05em; line-height: 1.55; }
.ivc-hero-checks { display: flex; flex-wrap: wrap; gap: .5em 1.4em; list-style: none; padding: 0; margin: 1.2em 0 1.5em; font-size: .9em; font-weight: 600; }
.ivc-hero-checks li { display: inline-flex; align-items: center; gap: .45em; }
.ivc-hero-checks .fa-solid { color: #fff; background: var(--ok); border-radius: 50%; width: 1.35em; height: 1.35em; display: inline-grid; place-items: center; font-size: .78em; }
.ivc-hero-cta { display: flex; flex-wrap: wrap; gap: .8em; }
.ivc-hero-cta .ivc-btn { min-height: 3.1em; padding: .5em 1.6em; font-size: 1em; }
.ivc-hero-art { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; min-height: 17em; }
.ivc-hero-art img { width: 100%; max-width: 31em; height: auto; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 100%); }

.ivc-resume { display: flex; align-items: center; gap: 1em; margin-top: 1em; padding: .85em 1.2em; border-radius: .9em; background: #fff8e8; border: 1px solid #f6e2b0; }
.ivc-resume .fa-solid { color: #d48806; font-size: 1.2em; }
.ivc-resume b { display: block; }
.ivc-resume span.ivc-muted { font-size: .88em; }
.ivc-resume .ivc-btn { margin-left: auto; }

.ivc-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8em; margin-top: 1em; }
.ivc-qcard {
  display: flex; align-items: center; gap: .8em; padding: .95em 1em; border-radius: .95em; background: #fff; border: 1px solid #eceef7;
  box-shadow: 0 .2em .9em rgba(40, 40, 110, .04); color: var(--ink); cursor: pointer; text-align: left; width: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ivc-qcard:hover { transform: translateY(-2px); box-shadow: 0 .6em 1.4em rgba(60, 50, 160, .1); border-color: #dcd5ff; color: var(--ink); }
.ivc-tile { flex: 0 0 auto; width: 2.9em; height: 2.9em; border-radius: .75em; display: grid; place-items: center; background: var(--bg); color: var(--c); font-size: 1.15em; }
.ivc-qcard b { display: block; font-size: .95em; font-weight: 800; }
.ivc-qcard i { display: block; font-style: normal; font-size: .8em; color: var(--sub); margin-top: .1em; }

.ivc-mine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; margin-top: .8em; }
.ivc-mcard { display: flex; align-items: center; gap: 1em; padding: 1.05em 1.2em; border-radius: .95em; background: #fff; border: 1px solid #eceef7; color: var(--ink); transition: box-shadow .15s ease, border-color .15s ease; }
.ivc-mcard:hover { box-shadow: 0 .6em 1.4em rgba(60, 50, 160, .09); border-color: #d9d2fd; color: var(--ink); }
.ivc-mcard.is-hl { border-color: #cfc6fb; background: linear-gradient(180deg, #fbfaff, #f6f3ff); }
.ivc-mcard .ivc-tile { width: 3.3em; height: 3.3em; font-size: 1.3em; border-radius: .85em; }
.ivc-mcard-body { flex: 1; min-width: 0; }
.ivc-mcard b { display: block; font-weight: 800; }
.ivc-mcard i { display: block; font-style: normal; font-size: .82em; color: var(--sub); }
.ivc-mcard .fa-chevron-right { color: #1f2147; font-size: .9em; }
.ivc-bar { position: relative; height: .55em; border-radius: 999px; background: #ece9f8; overflow: hidden; }
.ivc-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--c, linear-gradient(90deg, #6a45ff, #5530ee)); width: 0; transition: width .6s ease; }
.ivc-mcard-meter { display: flex; align-items: center; gap: .7em; margin-top: .55em; font-weight: 800; font-size: .9em; }
.ivc-mcard-meter .ivc-bar { flex: 1; }
.ivc-chip { display: inline-block; margin-top: .45em; padding: .18em .7em; border-radius: .45em; font-size: .78em; font-weight: 700; background: var(--bg, #f1f2f7); color: var(--c, #4a4d6c); }

/* 4 columns: row 1 = the two double-width cards (Technical Round, Custom Mix), rows 2-3 = the 8 topics. */
.ivc-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; }
.ivc-topics .ivc-tcard { padding: 1em .95em; gap: .75em; }
.ivc-topics .ivc-tcard-ico { width: 1.75em; font-size: 1.7em; }
/* The combined round: first, two columns wide, tinted, with its topics listed. */
.ivc-tcard.ivc-tcard-combo { grid-column: span 2; background: linear-gradient(120deg, #f7f5ff, #efebff); border-color: #d9d1fd; }
.ivc-tcard-combo:hover { border-color: #b9aafb; }
.ivc-tcard.ivc-tcard-combo.is-mix { background: linear-gradient(120deg, #f1fbf9, #e3f6f2); border-color: #bfe8df; }
.ivc-tcard-combo.is-mix:hover { border-color: #7fd3c3; }
.is-mix .ivc-combo-ico { background: linear-gradient(140deg, #14b8a6, #0f766e); box-shadow: 0 .35em .9em rgba(13, 148, 136, .3); }
.is-mix .ivc-combo-tag { color: #0f766e; border-color: #bfe8df; }
.ivc-combo-desc { display: block; margin-top: .2em; font-size: .8em; color: var(--sub); line-height: 1.4; }
.ivc-mix-icons { display: flex; flex-wrap: wrap; gap: .3em; margin: .4em 0 .2em; }
.ivc-mix-icons > span { width: 1.8em; height: 1.8em; border-radius: .45em; display: inline-grid; place-items: center; font-size: .8em; color: var(--c); background: var(--bg); }
.ivc-combo-ico { flex: 0 0 auto; width: 2.6em; height: 2.6em; border-radius: .8em; display: grid; place-items: center; font-size: 1.35em; color: #fff;
  background: linear-gradient(140deg, #7b5cff, #5530ee); box-shadow: 0 .35em .9em rgba(91, 53, 240, .3); transition: transform .2s ease; }
.ivc-tcard-combo:hover .ivc-combo-ico { transform: scale(1.06) rotate(-4deg); }
.ivc-combo-tag { margin-left: .5em; padding: .1em .5em; border-radius: .4em; font-style: normal; font-size: .68em; font-weight: 800; color: #4a2bd6; background: #fff; border: 1px solid #d9d1fd; vertical-align: .15em; }
.ivc-combo-topics { display: flex; flex-wrap: wrap; gap: .25em .7em; margin: .3em 0 .15em; font-size: .76em; font-weight: 700; color: #3f4263; }
.ivc-combo-topics > span { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.ivc-combo-topics .fa-solid, .ivc-combo-topics .fa-brands { color: var(--c); }
.ivc-su-topic.is-fixed { cursor: default; }
.ivc-su-topic small { margin-left: .2em; padding: 0 .45em; border-radius: 999px; background: #fff; color: #5d6180; font-size: .8em; }
.ivc-tcard {
  display: flex; align-items: center; gap: .9em; padding: 1.05em 1.1em; border-radius: .95em; background: #fff; border: 1px solid #eceef7;
  color: var(--ink); cursor: pointer; text-align: left; width: 100%; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ivc-tcard:hover { transform: translateY(-2px); box-shadow: 0 .6em 1.4em rgba(60, 50, 160, .1); border-color: color-mix(in srgb, var(--c) 35%, #fff); }
.ivc-tcard-ico { flex: 0 0 auto; width: 2.1em; text-align: center; font-size: 1.85em; color: var(--c); transition: transform .2s ease; }
.ivc-tcard:hover .ivc-tcard-ico { transform: scale(1.1) rotate(-4deg); }
.ivc-tcard-body { flex: 1; min-width: 0; }
.ivc-tcard b { display: block; font-weight: 800; }
.ivc-tcard i { display: block; font-style: normal; font-size: .8em; color: var(--sub); }
.ivc-tcard .ivc-bar { margin-top: .5em; height: .35em; }
.ivc-tcard > .fa-chevron-right { color: #1f2147; font-size: .85em; transition: transform .15s ease; }
.ivc-tcard:hover > .fa-chevron-right { transform: translateX(.2em); }

/* 5 columns: the double-width Coding Q&A lead card, then Fresher / Intermediate / Advanced. */
.ivc-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8em; }
.ivc-lcard.ivc-lcard-lead { grid-column: span 2; background: linear-gradient(120deg, #f2f7ff, #e7f0ff); border-color: #cfe0fd; }
.ivc-lcard-lead .ivc-combo-ico { background: linear-gradient(140deg, #3b82f6, #1d4ed8); box-shadow: 0 .35em .9em rgba(37, 99, 235, .3); }
.ivc-lcard-lead .ivc-combo-tag { color: #1d4ed8; border-color: #cfe0fd; }
.ivc-lcard-lead .ivc-bar { --c: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.ivc-lead-go { color: #1d4ed8; font-weight: 800; white-space: nowrap; }
.ivc-lead-go .fa-solid { margin-left: .35em; transition: transform .15s ease; }
.ivc-lcard-lead:hover .ivc-lead-go .fa-solid { transform: translateX(.2em); }
.ivc-lcard { display: flex; gap: 1em; align-items: flex-start; padding: 1.15em 1.2em; border-radius: .95em; background: #fff; border: 1px solid #eceef7; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.ivc-lcard:hover { transform: translateY(-2px); box-shadow: 0 .6em 1.4em rgba(60, 50, 160, .1); color: var(--ink); }
.ivc-lcard b { display: block; font-weight: 800; font-size: 1.05em; }
.ivc-lcard i { display: block; font-style: normal; font-size: .84em; color: var(--sub); margin: .15em 0 .55em; }
.ivc-lcard .ivc-bar { height: .4em; }
.ivc-lcard small { display: block; margin-top: .4em; font-size: .8em; font-weight: 700; color: var(--sub); }
.ivc-lcard-body { flex: 1; min-width: 0; }

.ivc-recs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; }
.ivc-rcard { position: relative; display: flex; align-items: center; gap: .9em; padding: 1.15em 1.1em; border-radius: .95em; background: #fff; border: 1px solid #eceef7; cursor: pointer; text-align: left; width: 100%; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.ivc-rcard:hover { transform: translateY(-2px); box-shadow: 0 .6em 1.4em rgba(60, 50, 160, .1); }
.ivc-rcard .ivc-tcard-ico { font-size: 2em; }
.ivc-rcard b { display: block; font-weight: 800; font-size: .95em; line-height: 1.3; }
.ivc-rcard i { display: block; font-style: normal; font-size: .8em; color: var(--sub); margin-top: .2em; }
.ivc-badge { position: absolute; top: .7em; right: .7em; padding: .12em .55em; border-radius: .4em; font-size: .7em; font-weight: 800; color: var(--c); background: var(--bg); }

.ivc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8em; margin-top: 1.6em; }
.ivc-pro { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: .6em; padding: 1.4em 1.6em; border-radius: 1em; background: linear-gradient(110deg, #fff8e6, #fff3d6 60%, #ffeec5); border: 1px solid #f5e2b2; }
.ivc-pro h3 { margin: 0; font-size: 1.25em; font-weight: 900; }
.ivc-pro h3 .fa-crown { color: #f2a900; margin-right: .35em; }
.ivc-pro h3 em { font-style: normal; color: var(--violet); }
.ivc-pro p { margin: 0; color: #5c5a48; font-size: .9em; max-width: 28em; }
.ivc-pro .ivc-btn { align-self: flex-start; }
.ivc-pro-art { position: absolute; right: 1.2em; bottom: -.2em; font-size: 5.4em; color: #f5b400; opacity: .9; transform: rotate(-8deg); }
.ivc-streak { display: flex; flex-direction: column; justify-content: center; padding: 1.3em 1.5em; }
.ivc-streak-top { display: flex; align-items: center; gap: .8em; }
.ivc-streak-top .fa-fire { font-size: 1.8em; color: #f2552c; }
.ivc-streak-top b { font-size: 1.15em; font-weight: 900; display: block; }
.ivc-streak-top i { font-style: normal; color: var(--sub); font-size: .86em; }
.ivc-week { display: flex; gap: .55em; margin-top: 1em; flex-wrap: wrap; }
.ivc-day { display: flex; flex-direction: column; align-items: center; gap: .35em; font-size: .78em; font-weight: 700; color: var(--sub); }
.ivc-day > span:last-child { width: 2em; height: 2em; border-radius: 50%; border: 2px solid #d9dbe7; display: grid; place-items: center; color: #fff; font-size: .9em; }
.ivc-day.is-on > span:last-child { background: var(--ok); border-color: var(--ok); }
.ivc-day.is-today > span:first-child { color: var(--violet); }
.ivc-day.is-today:not(.is-on) > span:last-child { border-color: #b9aafb; border-style: dashed; }

/* =================== SETUP POPUP (redesigned to the owner's mockup, 2026-10-08) ===================
   Icon cards with a radio in the corner; lengths / levels / times each fill one row (--cols). */
@keyframes ivc-twinkle { 0%, 100% { transform: scale(.85) rotate(0deg); opacity: .75; } 50% { transform: scale(1.1) rotate(15deg); opacity: 1; } }
.ivc-setup .modal-dialog { max-width: min(72em, calc(100vw - 1.5rem)); font-size: clamp(13px, 1.04vw, 14.5px); }
.ivc-setup .modal-content { border: 0; border-radius: 1.2em; overflow: hidden; font-size: inherit; color: #13153a; box-shadow: 0 2em 4em rgba(30, 25, 80, .25); }
.ivc-setup-hd { position: relative; display: flex; align-items: center; gap: 1.1em; padding: 1.4em 1.6em 1.3em; overflow: hidden;
  background: radial-gradient(circle at 80% 30%, #ece7ff 0, transparent 40%), linear-gradient(120deg, #fbfaff 0%, #f4f1ff 60%, #efeaff 100%); border-bottom: 1px solid #ece9fb; }
.ivc-setup-ico { flex: 0 0 auto; width: 4em; height: 4em; border-radius: 1em; display: grid; place-items: center; font-size: 1.5em;
  background: var(--bg, #eeeafe); color: var(--c, #5b35f0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.ivc-setup-ico { font-size: 1.05em; }
.ivc-setup-ico > span { font-size: 1.9em; }
.ivc-setup-hd-txt { position: relative; z-index: 1; min-width: 0; }
.ivc-setup-hd h2 { margin: 0; font-size: 1.55em; font-weight: 900; color: #13153a; }
.ivc-setup-hd p { margin: .25em 0 0; color: #5c6080; font-size: .98em; }
.ivc-setup-x { position: relative; z-index: 2; margin-left: auto; align-self: flex-start; width: 2.3em; height: 2.3em; border-radius: 50%; border: 0; background: transparent;
  display: grid; place-items: center; color: #3a3d5c; font-size: 1.15em; cursor: pointer; transition: background-color .15s ease; }
.ivc-setup-x:hover { background: rgba(91, 53, 240, .08); }
/* header art: a tilted clipboard, the topic's tile and two sparkles */
.ivc-setup-art { position: absolute; right: 4.4em; top: 50%; width: 12em; height: 7em; transform: translateY(-50%); pointer-events: none; }
.ivc-sa-board { position: absolute; right: 2em; top: .1em; font-size: 5.6em; line-height: 1; color: #b9a9fb; opacity: .6; transform: rotate(12deg);
  filter: drop-shadow(0 .1em .15em rgba(91, 53, 240, .12)); }
.ivc-sa-tile { --c: #5b35f0; position: absolute; left: .4em; top: 1.5em; width: 2.6em; height: 2.6em; border-radius: .7em; display: grid; place-items: center;
  background: #fff; color: var(--c); font-size: 1em; box-shadow: 0 .4em 1em rgba(60, 50, 160, .15); transform: rotate(-8deg); animation: ivc-bob 4.5s ease-in-out infinite; }
.ivc-sa-tile > span { font-size: 1.25em; }
.ivc-sa-spark { position: absolute; right: 0; top: 2.4em; width: 1.3em; height: 1.3em; background: linear-gradient(140deg, #fcd34d, #f59e0b);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ivc-twinkle 2.6s ease-in-out infinite; }
.ivc-sa-spark.is-sm { right: 6.6em; top: .3em; width: .7em; height: .7em; opacity: .7; animation-delay: -1.2s; }

.ivc-setup-bd { padding: 1.2em 1.6em .3em; }
.ivc-su-block { margin-bottom: 1.25em; }
.ivc-su-h { display: flex; align-items: flex-start; gap: .75em; margin-bottom: .75em; }
.ivc-su-h h3 { margin: 0; font-size: 1.12em; font-weight: 900; color: #13153a; }
.ivc-su-h p { margin: .1em 0 0; font-size: .86em; color: #6b6f8e; }
.ivc-su-n { flex: 0 0 auto; width: 1.75em; height: 1.75em; margin-top: .05em; border-radius: 50%; display: inline-grid; place-items: center;
  background: linear-gradient(140deg, #6a45ff, #4c27e6); color: #fff; font-size: .9em; font-weight: 800; box-shadow: 0 .25em .6em rgba(91, 53, 240, .3); }
.ivc-su-topics { display: flex; flex-wrap: wrap; gap: .5em; }
.ivc-su-topic { display: inline-flex; align-items: center; gap: .5em; padding: .45em .85em; border-radius: .6em; border: 1.5px solid #e3e5ef; background: #fff; font-weight: 700; font-size: .88em; color: #13153a; cursor: pointer; }
.ivc-su-topic > .fa-solid:first-child, .ivc-su-topic > .fa-brands:first-child { color: var(--c); }
.ivc-su-topic.is-on { border-color: var(--c); background: var(--bg); }
.ivc-su-tick { color: var(--c); font-size: .8em; }
.ivc-su-all { color: #5b35f0; border-style: dashed; }

.ivc-su-opts { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: .65em; }
.ivc-su-len { --cols: 5; }
.ivc-su-time { --cols: 7; gap: .5em; }
.ivc-su-opt { position: relative; display: flex; align-items: center; gap: .7em; min-width: 0; padding: .85em 1.9em .85em .8em; border-radius: .85em; border: 1.5px solid #e6e8f1;
  background: #fff; text-align: left; cursor: pointer; color: #13153a; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ivc-su-opt:hover:not(:disabled) { border-color: #c4b8fb; transform: translateY(-1px); box-shadow: 0 .5em 1.1em rgba(60, 50, 160, .08); }
.ivc-su-opt.is-on { border-color: #6a45ff; background: #f6f3ff; box-shadow: 0 0 0 3px rgba(91, 53, 240, .12); }
.ivc-su-opt:disabled { opacity: .45; cursor: not-allowed; }
.ivc-su-oico { flex: 0 0 auto; width: 2.7em; height: 2.7em; border-radius: .7em; display: grid; place-items: center; background: var(--bg); color: var(--c); font-size: 1em; }
.ivc-su-oico > span { font-size: 1.2em; }
.ivc-su-otxt { min-width: 0; display: flex; flex-direction: column; gap: .1em; }
.ivc-su-otxt b { font-size: .95em; font-weight: 800; line-height: 1.25; }
.ivc-su-len .ivc-su-otxt b, .ivc-su-time .ivc-su-otxt b, .ivc-su-time .ivc-su-otxt i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivc-su-otxt i { font-style: normal; font-size: .8em; color: #6b6f8e; line-height: 1.3; }
.ivc-su-radio { position: absolute; top: .55em; right: .55em; width: 1.2em; height: 1.2em; border-radius: 50%; border: 1.5px solid #c9ccda; background: #fff;
  display: grid; place-items: center; color: #fff; font-size: .9em; transition: background-color .15s ease, border-color .15s ease; }
.ivc-su-opt.is-on .ivc-su-radio { border-color: #5b35f0; background: #5b35f0; }
.ivc-su-opt.is-on .ivc-su-radio > span { font-size: .62em; animation: ivc-pop .3s ease; }
/* levels: taller cards with two sub-lines */
.ivc-su-diff .ivc-su-opt { padding: 1em 2em 1em .9em; align-items: center; }
.ivc-su-diff .ivc-su-oico { width: 3.1em; height: 3.1em; border-radius: .8em; }
.ivc-su-diff .ivc-su-oico > span { font-size: 1.35em; }
/* times: compact so seven fit one row */
.ivc-su-time .ivc-su-opt { gap: .5em; padding: .75em .6em .75em .55em; }  /* short titles: the corner radio sits above the sub-line */
.ivc-su-time .ivc-su-oico { width: 2.25em; height: 2.25em; border-radius: .6em; }
.ivc-su-time .ivc-su-oico > span { font-size: 1.05em; }
.ivc-su-time .ivc-su-otxt b { font-size: .9em; }
.ivc-su-time .ivc-su-otxt i { font-size: .74em; }
.ivc-su-time .ivc-su-radio { top: .45em; right: .45em; width: 1.05em; height: 1.05em; }
.ivc-su-msg { min-height: 1.3em; margin: -.4em 0 .6em; color: #c62f35; font-size: .88em; font-weight: 600; }
.ivc-su-msg:empty { min-height: 0; margin: 0; }

.ivc-setup-ft { display: flex; align-items: center; gap: .8em; margin: 0 1.6em; padding: 1em 0 1.3em; border-top: 1px solid #eceef6; }
.ivc-su-summary { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75em; padding: .7em 1em; border-radius: .85em; background: #f4f2ff; border: 1px solid #ebe7fd; }
.ivc-su-sumico { flex: 0 0 auto; width: 2.3em; height: 2.3em; border-radius: .6em; display: grid; place-items: center; background: #fff; color: #5b35f0; box-shadow: 0 .2em .5em rgba(91, 53, 240, .12); }
.ivc-su-summary b { display: block; font-size: .95em; font-weight: 800; color: #3a2fa0; }
.ivc-su-summary small { display: block; font-size: .78em; color: #6b6f8e; }
.ivc-setup-ft .ivc-btn { min-height: 3em; padding: .5em 1.6em; font-size: 1em; }
.ivc-setup-ft .ivc-su-cancel { color: #13153a; border-color: #dcdfea; }
.ivc-setup-ft .ivc-su-cancel:hover:not(:disabled) { color: #13153a; background: #f6f7fb; }
.ivc-setup-ft .ivc-su-go { padding: .5em 1.9em; }

@media (max-width: 991.98px) {
  /* set columns directly: the script puts --cols inline on the length row */
  .ivc-su-len { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ivc-su-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivc-su-time { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ivc-setup-art { display: none; }
}
@media (max-width: 575.98px) {
  .ivc-setup-hd { padding: 1.1em 1em; }
  .ivc-setup-ico { width: 3.2em; height: 3.2em; }
  .ivc-setup-bd { padding: 1em 1em .2em; }
  .ivc-su-len, .ivc-su-diff, .ivc-su-time { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivc-su-opt, .ivc-su-diff .ivc-su-opt, .ivc-su-time .ivc-su-opt { gap: .5em; padding: .7em 1.6em .7em .55em; }
  .ivc-su-oico, .ivc-su-diff .ivc-su-oico, .ivc-su-time .ivc-su-oico { width: 2.2em; height: 2.2em; border-radius: .55em; }
  .ivc-su-oico > span, .ivc-su-diff .ivc-su-oico > span { font-size: 1em; }
  .ivc-su-len .ivc-su-otxt b, .ivc-su-time .ivc-su-otxt b, .ivc-su-time .ivc-su-otxt i { white-space: normal; }
  .ivc-su-otxt b { font-size: .9em; overflow-wrap: anywhere; }
  .ivc-setup-ft { flex-wrap: wrap; margin: 0 1em; }
  .ivc-su-summary { flex: 1 1 100%; }
  .ivc-setup-ft .ivc-btn { flex: 1; }
}
[data-bs-theme="dark"] .ivc-setup .modal-content { color: #eef0fb; background: #141827; }
[data-bs-theme="dark"] .ivc-setup-hd { background: linear-gradient(120deg, #191d33, #1d1a3a); border-color: rgba(165, 180, 252, .16); }
[data-bs-theme="dark"] .ivc-setup-hd h2, [data-bs-theme="dark"] .ivc-su-h h3, [data-bs-theme="dark"] .ivc-su-opt, [data-bs-theme="dark"] .ivc-setup-x { color: #eef0fb; }
[data-bs-theme="dark"] .ivc-su-opt, [data-bs-theme="dark"] .ivc-su-topic, [data-bs-theme="dark"] .ivc-sa-tile { background: #1a1f33; border-color: rgba(165, 180, 252, .16); }
[data-bs-theme="dark"] .ivc-su-opt.is-on { background: #1f1b3d; border-color: #7b5cff; }
[data-bs-theme="dark"] .ivc-su-summary { background: #1a1d36; border-color: #3e3680; }
[data-bs-theme="dark"] .ivc-su-summary b { color: #c4b5fd; }
[data-bs-theme="dark"] .ivc-su-sumico, [data-bs-theme="dark"] .ivc-su-radio { background: #141827; }
[data-bs-theme="dark"] .ivc-setup-ft { border-color: rgba(165, 180, 252, .12); }
[data-bs-theme="dark"] .ivc-setup-ft .ivc-su-cancel { color: #eef0fb; border-color: rgba(165, 180, 252, .25); background: transparent; }

/* =================== SESSION (question screen) =================== */
.ivc-top { display: flex; align-items: center; gap: .8em; padding: .7em 1em; margin-bottom: .9em; }
.ivc-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .45em; min-width: 0; font-size: .86em; color: var(--sub); }
.ivc-crumb a { color: var(--sub); }
.ivc-crumb a:hover { color: var(--violet); }
.ivc-crumb .fa-chevron-right { font-size: .62em; color: #b5b8cc; }
.ivc-crumb b { color: var(--ink); }
.ivc-top-actions { margin-left: auto; display: flex; align-items: center; gap: .55em; }
.ivc-icon-btn { width: 2.5em; height: 2.5em; border-radius: .6em; border: 1px solid #e3e5ef; background: #fff; display: inline-grid; place-items: center; color: var(--ink); cursor: pointer; }
.ivc-icon-btn:hover { background: #f6f7fb; }
.ivc-icon-btn.is-on { color: #f59e0b; border-color: #f8dca0; background: #fff9eb; }
.ivc-report { color: var(--bad); }
.ivc-report .fa-solid { color: var(--bad); }
.ivc-timer { display: inline-flex; align-items: center; gap: .55em; padding: .3em .45em .3em .7em; border-radius: .7em; border: 1.5px solid #f6b9bb; background: #fff3f3; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.ivc-timer > .fa-solid:first-child { color: #ef4444; }
.ivc-timer.is-calm { border-color: #d6d0fb; background: #f6f4ff; }
.ivc-timer.is-calm > .fa-solid:first-child { color: var(--violet); }
.ivc-timer button { width: 1.9em; height: 1.9em; border-radius: 50%; border: 1px solid #e7c9ca; background: #fff; display: inline-grid; place-items: center; font-size: .78em; color: var(--ink); cursor: pointer; }
.ivc-finish { background: #e5484d; color: #fff; }
.ivc-finish:hover:not(:disabled) { background: #d33a3f; color: #fff; }

.ivc-play { display: grid; grid-template-columns: minmax(0, 1fr) 21.5em; gap: .9em; align-items: start; }
.ivc-qpanel { padding: 1.4em 1.5em; position: relative; }
.ivc-qhead { display: flex; align-items: center; gap: 1.1em; flex-wrap: wrap; }
.ivc-lvl { display: inline-flex; align-items: center; gap: .55em; padding: .55em 1.1em; border-radius: .7em; font-weight: 800; color: var(--c); background: var(--bg); }
.ivc-qcount { flex: 1; min-width: 12em; }
.ivc-qcount b { font-weight: 800; }
.ivc-dots { display: inline-flex; gap: .3em; margin-left: .7em; vertical-align: middle; flex-wrap: wrap; }
.ivc-dots span { width: .62em; height: .62em; border-radius: 50%; background: #dfe1ec; }
.ivc-dots span.is-ok { background: #8ad1a0; }
.ivc-dots span.is-bad { background: #f2a4a7; }
.ivc-dots span.is-cur { background: var(--violet); box-shadow: 0 0 0 3px rgba(91, 53, 240, .18); }
.ivc-qcount .ivc-bar { margin-top: .55em; height: .4em; }
.ivc-qtopic { font-size: .82em; font-weight: 700; color: var(--sub); }
.ivc-qtopic .fa-solid, .ivc-qtopic .fa-brands { color: var(--c); margin-right: .3em; }
.ivc-qtext { margin: 1.1em 0 1em; font-size: 1.45em; font-weight: 800; line-height: 1.35; }
.ivc-code { margin: 0 0 1.1em; padding: .95em 1.1em; border-radius: .75em; background: #14162b; color: #e6e8ff; font: .86em/1.55 'JetBrains Mono', 'Fira Code', Consolas, monospace; white-space: pre; overflow-x: auto; }
.ivc-opts { display: flex; flex-direction: column; gap: .65em; list-style: none; margin: 0; padding: 0; }
.ivc-opt {
  display: flex; align-items: center; gap: 1em; width: 100%; padding: .7em 1em .7em .7em; border-radius: .8em; border: 1.5px solid #e6e8f1; background: #fff;
  text-align: left; color: var(--ink); cursor: pointer; transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.ivc-opt:hover:not(:disabled) { border-color: #bfb3fb; background: #fcfbff; }
.ivc-opt-key { flex: 0 0 auto; width: 2.4em; height: 2.4em; border-radius: .55em; display: grid; place-items: center; background: #f1f2f7; font-weight: 800; }
.ivc-opt-txt { flex: 1; font-size: .98em; line-height: 1.45; }
.ivc-opt-radio { flex: 0 0 auto; width: 1.4em; height: 1.4em; border-radius: 50%; border: 2px solid #c8cbd9; display: grid; place-items: center; font-size: .75em; color: #fff; }
.ivc-opt.is-pick { border-color: var(--violet); background: #f6f3ff; box-shadow: 0 0 0 3px rgba(91, 53, 240, .1); }
.ivc-opt.is-pick .ivc-opt-key { background: var(--violet); color: #fff; }
.ivc-opt.is-pick .ivc-opt-radio { border-color: var(--violet); background: radial-gradient(circle, var(--violet) 0 42%, #fff 46%); }
.ivc-opt.is-right { border-color: #64c47f; background: #effaf2; }
.ivc-opt.is-right .ivc-opt-key, .ivc-opt.is-right .ivc-opt-radio { background: var(--ok); border-color: var(--ok); color: #fff; }
.ivc-opt.is-wrong { border-color: #f09a9d; background: #fdf1f1; }
.ivc-opt.is-wrong .ivc-opt-key, .ivc-opt.is-wrong .ivc-opt-radio { background: var(--bad); border-color: var(--bad); color: #fff; }
.ivc-opt:disabled { cursor: default; }
.ivc-verdict { display: flex; align-items: center; gap: .6em; margin: 1em 0 0; font-weight: 800; }
.ivc-verdict.is-ok { color: #178a3c; }
.ivc-verdict.is-bad { color: #c62f35; }
.ivc-verdict.is-skip { color: #9a6700; }
.ivc-expl { margin-top: .9em; padding: 1em 1.15em; border-radius: .8em; background: #f7f6ff; border: 1px solid #e6e1fd; line-height: 1.6; font-size: .95em; }
.ivc-expl h4 { display: flex; align-items: center; gap: .5em; margin: 0 0 .4em; font-size: .95em; font-weight: 800; color: #4a2bd6; }
.ivc-expl p { margin: 0; }
.ivc-actions { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.3em; }
.ivc-actions .ivc-btn { flex: 1 1 auto; }
.ivc-actions .ivc-btn.is-on .fa-regular, .ivc-actions .ivc-btn.is-on .fa-solid { color: #f59e0b; }
.ivc-actions2 { display: flex; flex-wrap: wrap; gap: .6em; margin-top: .65em; }
.ivc-actions2 .ivc-spacer { flex: 1; }
.ivc-paused { position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .86); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em; z-index: 3; text-align: center; }
.ivc-paused .fa-circle-pause { font-size: 3em; color: var(--violet); }
.ivc-paused b { font-size: 1.2em; }

.ivc-side { display: flex; flex-direction: column; gap: .9em; }
.ivc-clock { display: flex; align-items: center; gap: 1em; }
.ivc-clock-ring { flex: 0 0 auto; width: 4.3em; height: 4.3em; }
.ivc-clock-ring circle { fill: none; stroke-width: 7; }
.ivc-clock small { display: block; font-size: .85em; font-weight: 700; color: var(--sub); }
.ivc-clock b { display: block; font-size: 1.9em; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ivc-clock.is-low b { color: var(--bad); }
.ivc-pal-hd { display: flex; align-items: center; gap: .6em; margin-bottom: .9em; }
.ivc-pal-hd h3 { margin: 0; font-size: 1.05em; font-weight: 800; }
.ivc-pal-hd select { margin-left: auto; width: auto; font-size: .85em; padding: .3em 2em .3em .7em; }
.ivc-pal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5em; }
.ivc-pal button { aspect-ratio: 1; border-radius: .55em; border: 1.5px solid transparent; background: #eef0f6; font-weight: 800; color: var(--ink); cursor: pointer; position: relative; }
.ivc-pal button:hover { border-color: #c1b5fb; }
.ivc-pal button.is-ans { background: #def3e5; color: #12702f; }
.ivc-pal button.is-wrong { background: #fde4e5; color: #b4262c; }
.ivc-pal button.is-skip { background: #fdf0d5; color: #8a5a00; }
.ivc-pal button.is-mark::after { content: ''; position: absolute; top: .25em; right: .25em; width: .45em; height: .45em; border-radius: 50%; background: var(--warn); }
.ivc-pal button.is-cur { border-color: var(--violet); background: #fff; color: var(--violet); box-shadow: 0 0 0 3px rgba(91, 53, 240, .12); }
.ivc-pal button.is-hidden { display: none; }
.ivc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .45em .8em; margin-top: 1em; font-size: .82em; color: var(--sub); }
.ivc-legend span::before { content: ''; display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .45em; background: var(--c); vertical-align: -.05em; }
.ivc-notes-hd { display: flex; align-items: center; margin-bottom: .7em; }
.ivc-notes-hd h3 { margin: 0; font-size: 1.05em; font-weight: 800; }
.ivc-notes-hd .ivc-btn { margin-left: auto; }
.ivc-note { width: 100%; min-height: 8em; resize: vertical; border-radius: .7em; border: 1px solid #f2dd9b; background: #fffbea; padding: .75em .9em; font-size: .92em; line-height: 1.5; color: var(--ink); }
.ivc-note:focus { outline: 2px solid #f5c84c; outline-offset: 1px; }
.ivc-note-st { display: block; min-height: 1.2em; margin-top: .35em; font-size: .78em; color: var(--sub); }

/* =================== RESULT =================== */
.ivc-res { max-width: 64em; margin-left: auto; margin-right: auto; }
.ivc-res-hero { display: flex; align-items: center; gap: 1.3em; padding: 1.4em 1.6em; border-radius: 1.1em; background: linear-gradient(110deg, #f4f3ff, #eef0fb 60%, #f2f0fe); border: 1px solid #e7e4fa; position: relative; }
.ivc-res-hero img { width: 8.1em; height: auto; flex: 0 0 auto; -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
.ivc-res-hero h1 { margin: 0; font-size: 2.1em; font-weight: 900; }
.ivc-res-hero p { margin: .3em 0 0; color: var(--sub); }
.ivc-res-hero-btns { margin-left: auto; display: flex; gap: .6em; align-self: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.ivc-res-grid { display: grid; gap: .9em; margin-top: .9em; }
.ivc-overall { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 1.5em; align-items: center; }
.ivc-ring { position: relative; width: 100%; max-width: 12em; aspect-ratio: 1; }
.ivc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ivc-ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.ivc-ring .ivc-ring-bg { stroke: #eceef4; }
.ivc-ring .ivc-ring-fg { transition: stroke-dashoffset .9s ease; }
.ivc-ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ivc-ring-txt b { font-size: 2.2em; font-weight: 900; line-height: 1; }
.ivc-ring-txt span { font-size: .86em; color: var(--sub); margin-top: .25em; }
.ivc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.ivc-stat { display: flex; align-items: center; gap: .8em; padding: .85em 1em; border-radius: .8em; background: #f7f8fc; border: 1px solid #eef0f6; }
.ivc-stat .ivc-tile { width: 2.4em; height: 2.4em; border-radius: 50%; font-size: 1em; }
.ivc-stat b { display: block; font-size: 1.3em; font-weight: 900; line-height: 1.1; }
.ivc-stat i { display: block; font-style: normal; font-size: .8em; color: var(--sub); }
.ivc-tbars { display: flex; flex-direction: column; gap: .95em; }
.ivc-tbar { display: grid; grid-template-columns: 1.6em 10em minmax(0, 1fr) 3.4em 3.2em; gap: .8em; align-items: center; }
.ivc-tbar > .fa-solid, .ivc-tbar > .fa-brands { color: var(--c); font-size: 1.15em; text-align: center; }
.ivc-tbar b { font-weight: 700; font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivc-tbar .ivc-bar { height: .75em; }
.ivc-tbar span { font-size: .86em; color: var(--sub); text-align: right; }
.ivc-tbar strong { text-align: right; font-weight: 800; color: var(--c); }
.ivc-tbar-combo { padding: .45em .6em; margin: -.2em -.6em 0; border-radius: .6em; background: #f5f2ff; }
.ivc-tbar-combo b small { font-weight: 700; font-size: .78em; color: var(--sub); }
[data-bs-theme="dark"] .ivc-tbar-combo { background: #1f1b3d; }
.ivc-filters { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 1em; }
.ivc-filter { padding: .45em 1em; border-radius: .55em; border: 1.5px solid #e3e5ef; background: #fff; font-weight: 700; font-size: .88em; color: var(--ink); cursor: pointer; }
.ivc-filter[data-f="correct"] { color: #178a3c; background: #f0faf3; border-color: #d4efdc; }
.ivc-filter[data-f="wrong"] { color: #c62f35; background: #fdf2f2; border-color: #f6d3d4; }
.ivc-filter[data-f="skipped"] { color: #5b5f78; background: #f4f5f9; border-color: #e3e5ef; }
.ivc-filter.is-on { background: var(--violet); border-color: var(--violet); color: #fff; }
.ivc-table { width: 100%; border-collapse: collapse; font-size: .9em; }
.ivc-table th { text-align: left; font-size: .82em; font-weight: 800; color: var(--ink); padding: .65em .6em; background: #f7f8fc; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ivc-table td { padding: .7em .6em; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ivc-table td.ivc-qcell { max-width: 22em; }
.ivc-table td.ivc-qcell > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivc-table tr.ivc-row { cursor: pointer; }
.ivc-table tr.ivc-row:hover td { background: #fbfaff; }
.ivc-table tr.ivc-row.is-open td { background: #f8f6ff; }
.ivc-table tr.ivc-detail td { background: #fbfaff; padding: .2em 1em 1.1em; }
.ivc-res-ico { width: 1.6em; height: 1.6em; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: .8em; }
.ivc-res-ico.is-correct { background: var(--ok); }
.ivc-res-ico.is-wrong { background: var(--bad); }
.ivc-res-ico.is-skipped { background: #a3a7bd; }
.ivc-detail-ans { display: grid; gap: .35em; margin: .6em 0; font-size: .92em; }
.ivc-detail-ans .is-right { color: #178a3c; font-weight: 700; }
.ivc-detail-ans .is-wrong { color: #c62f35; font-weight: 700; }
.ivc-table-more { display: flex; justify-content: center; margin-top: 1em; }
.ivc-res-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9em; }
.ivc-bars { display: flex; align-items: flex-end; gap: .55em; height: 6.5em; padding: 0 .2em; }
.ivc-bars span { flex: 1; border-radius: .3em .3em 0 0; background: linear-gradient(180deg, #8b6cff, #5b35f0); min-height: .25em; position: relative; opacity: .9; }
.ivc-bars span.is-zero { background: #e4e6f0; }
.ivc-bars-lbl { display: flex; gap: .55em; padding: .35em .2em 0; font-size: .7em; color: var(--sub); }
.ivc-bars-lbl span { flex: 1; text-align: center; }
.ivc-prog { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 1em; align-items: center; }
.ivc-prog-meter { display: flex; align-items: center; gap: .8em; margin-top: 1em; font-weight: 800; }
.ivc-prog-meter .ivc-bar { flex: 1; height: .7em; }
.ivc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ivc-steps button, .ivc-steps a { display: flex; align-items: center; gap: .8em; width: 100%; padding: .7em .2em; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--ink); font-weight: 600; font-size: .93em; cursor: pointer; }
.ivc-steps li:last-child button, .ivc-steps li:last-child a { border-bottom: 0; }
.ivc-steps button:hover, .ivc-steps a:hover { color: var(--violet); }
.ivc-steps .ivc-tile { width: 1.9em; height: 1.9em; border-radius: 50%; font-size: .8em; }
.ivc-steps .fa-chevron-right { margin-left: auto; color: var(--violet); font-size: .8em; }

/* =================== PROGRESS =================== */
.ivc-ph { display: flex; align-items: center; gap: 1em; padding: 1.3em 1.5em; }
.ivc-ph-ico { width: 3.3em; height: 3.3em; border-radius: .9em; display: grid; place-items: center; background: linear-gradient(140deg, #fff1e6, #ffe2cc); color: #e5531a; font-size: 1.5em; }
.ivc-ph h1 { margin: 0; font-size: 1.85em; font-weight: 900; }
.ivc-ph p { margin: .15em 0 0; color: var(--sub); }
.ivc-ph select { margin-left: auto; width: auto; font-weight: 700; }
.ivc-tabs { display: flex; gap: .4em; flex-wrap: wrap; margin: .9em 0; padding: .35em; border-radius: .9em; background: #fff; border: 1px solid #eceef7; }
.ivc-tab { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.05em; border-radius: .65em; border: 1.5px solid transparent; background: none; font-weight: 700; color: var(--sub); cursor: pointer; }
.ivc-tab:hover { color: var(--ink); background: #f6f7fb; }
.ivc-tab.is-on { color: var(--violet); border-color: #cbc1fb; background: #f5f2ff; }
.ivc-tab em { font-style: normal; font-size: .78em; padding: .05em .5em; border-radius: 999px; background: #eceef6; color: var(--sub); }
.ivc-pgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .9em; }
.ivc-span5 { grid-column: span 5; } .ivc-span4 { grid-column: span 4; } .ivc-span3 { grid-column: span 3; }
.ivc-span6 { grid-column: span 6; } .ivc-span7 { grid-column: span 7; } .ivc-span8 { grid-column: span 8; } .ivc-span12 { grid-column: span 12; }
.ivc-ov { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 1.3em; align-items: center; }
.ivc-ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; font-size: .9em; }
.ivc-ov-list li { display: flex; align-items: center; gap: .6em; }
.ivc-ov-list b { font-weight: 900; min-width: 2.6em; }
.ivc-ov-list .ivc-res-ico { font-size: .72em; }
.ivc-big { font-size: 2.2em; font-weight: 900; line-height: 1.1; display: flex; align-items: center; gap: .3em; }
.ivc-big small { font-size: .45em; font-weight: 700; color: var(--sub); }
.ivc-diffwrap { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 1.2em; align-items: center; }
.ivc-legend2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7em; font-size: .92em; }
.ivc-legend2 li { display: flex; align-items: center; gap: .55em; }
.ivc-legend2 b { margin-left: auto; font-weight: 800; }
.ivc-trend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1em; align-items: center; margin-top: 1.1em; padding: .9em 1em; border-radius: .8em; border: 1px solid var(--line); }
.ivc-trend svg { width: 100%; height: 3.6em; overflow: visible; }
.ivc-trend b { display: block; color: #178a3c; font-size: .95em; }
.ivc-trend.is-down b { color: #b45309; }
.ivc-trend i { display: block; font-style: normal; color: var(--sub); font-size: .82em; margin-top: .2em; }
.ivc-list { list-style: none; margin: 0; padding: 0; }
.ivc-list li { display: flex; align-items: center; gap: .8em; padding: .65em .1em; border-bottom: 1px solid var(--line); }
.ivc-list li:last-child { border-bottom: 0; }
.ivc-list .ivc-tile { width: 2.3em; height: 2.3em; border-radius: .6em; font-size: .95em; }
.ivc-list-main { flex: 1; min-width: 0; }
.ivc-list-main b { display: block; font-weight: 700; font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivc-list-main i { display: block; font-style: normal; font-size: .78em; color: var(--sub); }
.ivc-list-main p { margin: .3em 0 0; font-size: .88em; color: #3f4263; white-space: pre-wrap; }
.ivc-list .fa-chevron-right { color: var(--muted); font-size: .8em; }
.ivc-list .fa-star { color: #f5b400; }
.ivc-list .ivc-icon-btn { width: 2.1em; height: 2.1em; font-size: .85em; }
.ivc-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7em; }
.ivc-badges.is-all { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ivc-ach { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3em; padding: .9em .5em; border-radius: .85em; background: #fafafe; border: 1px solid #f0f0f7; }
.ivc-ach-ico { width: 3.3em; height: 3.3em; display: grid; place-items: center; font-size: 1.25em; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.ivc-ach b { font-size: .86em; font-weight: 800; }
.ivc-ach i { font-style: normal; font-size: .74em; color: var(--sub); }
.ivc-ach .ivc-bar { width: 80%; height: .3em; margin-top: .25em; }
.ivc-ach.is-locked .ivc-ach-ico { color: #a8abc0; background: #eef0f6; }
.ivc-ach.is-locked b { color: #7b7f99; }
.ivc-toolbar { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; margin-bottom: 1em; }
.ivc-toolbar .form-control, .ivc-toolbar .form-select { width: auto; min-width: 11em; font-size: .9em; }
.ivc-toolbar .ivc-grow { flex: 1; min-width: 14em; }
.ivc-pager { display: flex; justify-content: center; align-items: center; gap: .6em; margin-top: 1em; font-size: .9em; }
.ivc-codingstat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }

/* =================== CODING =================== */
.ivc-code-top { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; padding: 1.1em 1.4em; }
.ivc-code-top h1 { margin: 0; font-size: 1.6em; font-weight: 900; }
.ivc-code-top p { margin: .1em 0 0; color: var(--sub); font-size: .92em; }
.ivc-lvltabs { margin-left: auto; display: flex; gap: .45em; flex-wrap: wrap; }
.ivc-lvltab { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1em; border-radius: .7em; border: 1.5px solid #e3e5ef; background: #fff; font-weight: 800; color: var(--ink); cursor: pointer; }
.ivc-lvltab > .fa-solid { color: var(--c); }
.ivc-lvltab em { font-style: normal; font-size: .76em; font-weight: 700; color: var(--sub); }
.ivc-lvltab.is-on { border-color: var(--c); background: var(--bg); }
.ivc-cwrap { display: grid; grid-template-columns: 16.5em minmax(0, 1fr); gap: .9em; margin-top: .9em; align-items: start; }
.ivc-plist { padding: .7em; position: sticky; top: 1em; display: flex; flex-direction: column; max-height: calc(100vh - 2em); }
.ivc-plist ol { position: relative; overflow-y: auto; min-height: 0; flex: 1 1 auto; scrollbar-width: thin; }
.ivc-plist-tools { display: flex; gap: .35em; padding: 0 .3em .6em; }
.ivc-plist-tools .form-control { flex: 1; min-width: 0; font-size: .8em; }
.ivc-plist-tools .form-select { width: auto; font-size: .8em; padding-right: 1.8em; }
.ivc-plist-none { margin: .4em .5em; font-size: .85em; color: var(--sub); }
.ivc-plist > .ivc-btn { flex: 0 0 auto; }
.ivc-plist ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2em; }
.ivc-plist button { display: flex; align-items: center; gap: .65em; width: 100%; padding: .55em .65em; border-radius: .6em; border: 1px solid transparent; background: none; text-align: left; color: var(--ink); cursor: pointer; font-size: .9em; }
.ivc-plist button:hover { background: #f6f7fb; }
.ivc-plist button.is-on { background: #f3f0ff; border-color: #d9d1fd; color: #3d1fd0; font-weight: 700; }
.ivc-plist .ivc-pn { flex: 0 0 auto; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; font-size: .78em; font-weight: 800; background: #eef0f6; color: var(--sub); }
.ivc-plist .is-solved .ivc-pn { background: var(--ok); color: #fff; }
.ivc-plist .is-tried .ivc-pn { background: #fdf0d5; color: #8a5a00; }
.ivc-plist span.ivc-pt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivc-plist-hd { display: flex; align-items: center; justify-content: space-between; padding: .3em .5em .7em; font-weight: 800; font-size: .92em; }
.ivc-plist-hd span { font-size: .82em; color: var(--sub); font-weight: 700; }
.ivc-cmain { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: .9em; align-items: start; }
.ivc-prob h2 { margin: .4em 0 .2em; font-size: 1.35em; font-weight: 900; }
.ivc-prob-meta { display: flex; flex-wrap: wrap; gap: .45em; align-items: center; }
.ivc-prob-asked { font-size: .8em; color: var(--sub); margin: .2em 0 .9em; }
.ivc-prob-asked .fa-solid { color: #f59e0b; margin-right: .35em; }
.ivc-prob-txt p { margin: 0 0 .8em; line-height: 1.6; font-size: .95em; }
.ivc-ex { margin: .7em 0; padding: .75em .9em; border-radius: .7em; background: #f7f8fc; border: 1px solid #eef0f6; font: .84em/1.6 'JetBrains Mono', Consolas, monospace; }
.ivc-ex b { font-family: var(--bs-body-font-family, inherit); font-size: 1.05em; display: block; margin-bottom: .2em; }
.ivc-ex div { white-space: pre-wrap; word-break: break-word; }
.ivc-hints { margin-top: .8em; }
.ivc-hint { margin-top: .5em; padding: .65em .85em; border-radius: .65em; background: #fffbea; border: 1px solid #f4e2a3; font-size: .9em; }
.ivc-hint .fa-lightbulb { color: #e3a008; margin-right: .4em; }
.ivc-solution { margin-top: .9em; }
.ivc-solution h4 { font-size: .95em; font-weight: 800; margin: 0 0 .4em; }
.ivc-editor-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ivc-editor-hd { display: flex; align-items: center; gap: .6em; padding: .6em .8em; border-bottom: 1px solid var(--line); }
.ivc-editor-hd b { font-size: .9em; }
.ivc-editor-hd .ivc-muted { font-size: .8em; }
.ivc-editor-hd .ivc-btns { margin-left: auto; display: flex; gap: .4em; }
.ivc-editor { height: 26em; background: #1e1e1e; }
.ivc-editor textarea { width: 100%; height: 100%; border: 0; resize: none; padding: .8em 1em; background: #1e1e1e; color: #e6e6e6; font: .88em/1.55 Consolas, 'JetBrains Mono', monospace; tab-size: 4; }
.ivc-editor textarea:focus { outline: none; }
.ivc-run-bar { display: flex; align-items: center; gap: .6em; padding: .7em .8em; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ivc-run-bar .ivc-muted { font-size: .82em; }
.ivc-run-bar .ivc-spacer { flex: 1; }
.ivc-results { margin-top: .9em; }
.ivc-results-hd { display: flex; align-items: center; gap: .7em; margin-bottom: .7em; }
.ivc-results-hd h3 { margin: 0; font-size: 1.05em; font-weight: 800; }
.ivc-score { margin-left: auto; font-weight: 800; }
.ivc-score.is-ok { color: #178a3c; }
.ivc-score.is-bad { color: #c62f35; }
.ivc-tests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45em; }
.ivc-test { border: 1px solid var(--line); border-radius: .7em; padding: .55em .8em; font-size: .88em; }
.ivc-test-hd { display: flex; align-items: center; gap: .6em; }
.ivc-test-hd code { background: none; padding: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ivc-test-hd small { color: var(--sub); white-space: nowrap; }
.ivc-test.is-pass { border-color: #cdebd6; background: #f6fcf8; }
.ivc-test.is-fail { border-color: #f6cfd0; background: #fff7f7; }
.ivc-test-body { margin-top: .4em; display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: .2em .6em; font: .92em/1.5 Consolas, monospace; }
.ivc-test-body span:nth-child(odd) { color: var(--sub); font-family: inherit; }
.ivc-test-body span:nth-child(even) { white-space: pre-wrap; word-break: break-all; }
.ivc-console { margin-top: .8em; }
.ivc-console pre { margin: .3em 0 0; max-height: 14em; overflow: auto; padding: .7em .9em; border-radius: .6em; background: #14162b; color: #e6e8ff; font-size: .82em; white-space: pre-wrap; }
.ivc-console pre.is-err { color: #ffb4b4; }
.ivc-solved-banner { display: flex; align-items: center; gap: .7em; padding: .75em 1em; border-radius: .8em; background: #eafaf0; border: 1px solid #c6ebd3; color: #136c31; font-weight: 700; margin-bottom: .8em; }
.ivc-solved-banner .fa-solid { font-size: 1.2em; }

/* =================== responsive =================== */
@media (max-width: 1199.98px) {
  .ivc-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ivc-topics, .ivc-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivc-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ivc-lcard.ivc-lcard-lead { grid-column: 1 / -1; }
  .ivc-cmain { grid-template-columns: minmax(0, 1fr); }
  .ivc-span5, .ivc-span4, .ivc-span3, .ivc-span7, .ivc-span8 { grid-column: span 6; }
}
@media (max-width: 991.98px) {
  .ivc { font-size: 14px; }
  .ivc-hero { grid-template-columns: 1fr; padding: 1.6em 1.4em 0; }
  .ivc-hero-art { justify-content: center; min-height: 0; }
  .ivc-hero-art img { -webkit-mask-image: none; mask-image: none; }
  .ivc-mine, .ivc-levels, .ivc-bottom, .ivc-res-bottom { grid-template-columns: 1fr; }
  .ivc-play, .ivc-cwrap { grid-template-columns: 1fr; }
  .ivc-plist { position: static; max-height: none; }
  .ivc-plist ol { max-height: 22em; }
  .ivc-span5, .ivc-span4, .ivc-span3, .ivc-span6, .ivc-span7, .ivc-span8 { grid-column: span 12; }
  .ivc-badges.is-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ivc { padding: 0 12px 2.5em; }
  .ivc-hero h1 { font-size: 2.2em; }
  .ivc-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivc-topics, .ivc-recs { grid-template-columns: 1fr; }
  .ivc-tcard.ivc-tcard-combo { grid-column: span 1; }
  .ivc-lcard.ivc-lcard-lead { grid-column: span 1; }
  .ivc-overall, .ivc-ov, .ivc-diffwrap, .ivc-prog { grid-template-columns: 1fr; justify-items: center; }
  .ivc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivc-tbar { grid-template-columns: 1.4em minmax(0, 1fr) 3em; }
  .ivc-tbar .ivc-bar, .ivc-tbar span { display: none; }
  .ivc-res-hero { flex-wrap: wrap; }
  .ivc-res-hero-btns { margin-left: 0; }
  .ivc-badges, .ivc-badges.is-all, .ivc-codingstat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivc-top { flex-wrap: wrap; }
  .ivc-top-actions { margin-left: 0; flex-wrap: wrap; }
  .ivc-pal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ivc-table .ivc-hide-sm { display: none; }
  .ivc-qtext { font-size: 1.2em; }
}

/* =================== full width (owner, 2026-10-08) ===================
   Same content width as the site home page (theme .container): 1184px on a 1200-1539px laptop,
   up to 1678px from 1540px. The font cap rises a little on wide screens so the 82em layout
   keeps its proportions instead of only stretching. The result page drops its old 64em cap. */
@media (min-width: 1200px) { .ivc { max-width: max(82em, 1184px); } }
@media (min-width: 1540px) { .ivc { max-width: 1678px; font-size: clamp(15.5px, .92vw, 17px); } }
.ivc.ivc-res { max-width: none; }
@media (min-width: 1200px) { .ivc.ivc-res { max-width: max(82em, 1184px); } }
@media (min-width: 1540px) { .ivc.ivc-res { max-width: 1678px; } }
/* wide result: score and topic performance side by side */
@media (min-width: 1200px) {
  .ivc-res-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ivc-res-grid > #analysis, .ivc-res-grid > .ivc-res-bottom { grid-column: 1 / -1; }
}

/* =================== motion =================== */
/* Entrance: pages start with .is-entering (in the HTML, so nothing flashes before the script
   runs); ivc-core.js drops it after ~2s so later re-renders (sync, filters) don't replay it.
   --d = the block's delay, --k = position among its siblings. Every animation ends in the
   element's normal state, so a page whose script never runs still looks right. */
@keyframes ivc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ivc-slide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes ivc-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ivc-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ivc-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes ivc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ivc-bounce { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.08) rotate(4deg); } 100% { transform: none; } }
@keyframes ivc-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes ivc-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ivc-glow { 0% { box-shadow: 0 0 0 0 rgba(34, 160, 74, .45); } 100% { box-shadow: 0 0 0 .7em rgba(34, 160, 74, 0); } }
@keyframes ivc-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ivc-shine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }

.ivc.is-entering > *,
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-topics, .ivc-levels, .ivc-recs, .ivc-bottom, .ivc-tiles, .ivc-tbars,
  .ivc-res-grid, .ivc-res-bottom, .ivc-side, .ivc-pgrid, .ivc-badges, .ivc-codingstat, .ivc-steps, .ivc-ai-models) > * {
  animation: ivc-rise .55s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--d, 0ms) + var(--k, 0) * 45ms);
}
.ivc.is-entering > :nth-child(2) { --d: 70ms; }
.ivc.is-entering > :nth-child(3) { --d: 140ms; }
.ivc.is-entering > :nth-child(4) { --d: 210ms; }
.ivc.is-entering > :nth-child(n+5) { --d: 260ms; }
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-tiles, .ivc-tbars, .ivc-res-grid, .ivc-side, .ivc-steps) > * { --d: 120ms; }
.ivc.is-entering :is(.ivc-topics, .ivc-levels, .ivc-recs) > * { --d: 200ms; }
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-topics, .ivc-levels, .ivc-recs, .ivc-bottom, .ivc-tiles, .ivc-tbars,
  .ivc-res-grid, .ivc-res-bottom, .ivc-side, .ivc-pgrid, .ivc-badges, .ivc-codingstat, .ivc-steps, .ivc-ai-models) > :nth-child(2) { --k: 1; }
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-topics, .ivc-levels, .ivc-recs, .ivc-bottom, .ivc-tiles, .ivc-tbars,
  .ivc-res-grid, .ivc-res-bottom, .ivc-side, .ivc-pgrid, .ivc-badges, .ivc-codingstat, .ivc-steps, .ivc-ai-models) > :nth-child(3) { --k: 2; }
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-topics, .ivc-levels, .ivc-recs, .ivc-bottom, .ivc-tiles, .ivc-tbars,
  .ivc-res-grid, .ivc-res-bottom, .ivc-side, .ivc-pgrid, .ivc-badges, .ivc-codingstat, .ivc-steps, .ivc-ai-models) > :nth-child(4) { --k: 3; }
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-topics, .ivc-levels, .ivc-recs, .ivc-bottom, .ivc-tiles, .ivc-tbars,
  .ivc-res-grid, .ivc-res-bottom, .ivc-side, .ivc-pgrid, .ivc-badges, .ivc-codingstat, .ivc-steps, .ivc-ai-models) > :nth-child(5) { --k: 4; }
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-topics, .ivc-levels, .ivc-recs, .ivc-bottom, .ivc-tiles, .ivc-tbars,
  .ivc-res-grid, .ivc-res-bottom, .ivc-side, .ivc-pgrid, .ivc-badges, .ivc-codingstat, .ivc-steps, .ivc-ai-models) > :nth-child(6) { --k: 5; }
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-topics, .ivc-levels, .ivc-recs, .ivc-bottom, .ivc-tiles, .ivc-tbars,
  .ivc-res-grid, .ivc-res-bottom, .ivc-side, .ivc-pgrid, .ivc-badges, .ivc-codingstat, .ivc-steps, .ivc-ai-models) > :nth-child(7) { --k: 6; }
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-topics, .ivc-levels, .ivc-recs, .ivc-bottom, .ivc-tiles, .ivc-tbars,
  .ivc-res-grid, .ivc-res-bottom, .ivc-side, .ivc-pgrid, .ivc-badges, .ivc-codingstat, .ivc-steps, .ivc-ai-models) > :nth-child(8) { --k: 7; }
.ivc.is-entering :is(.ivc-quick, .ivc-mine, .ivc-topics, .ivc-levels, .ivc-recs, .ivc-bottom, .ivc-tiles, .ivc-tbars,
  .ivc-res-grid, .ivc-res-bottom, .ivc-side, .ivc-pgrid, .ivc-badges, .ivc-codingstat, .ivc-steps, .ivc-ai-models) > :nth-child(n+9) { --k: 8; }
/* bars fill from zero on arrival */
.ivc.is-entering .ivc-bar > span { transform-origin: left center; animation: ivc-grow-x .9s cubic-bezier(.2, .7, .2, 1) .25s both; }
.ivc.is-entering .ivc-bars span { transform-origin: bottom center; animation: ivc-grow-y .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.3s + var(--k, 0) * 60ms); }
.ivc.is-entering .ivc-bars span:nth-child(2) { --k: 1; } .ivc.is-entering .ivc-bars span:nth-child(3) { --k: 2; }
.ivc.is-entering .ivc-bars span:nth-child(4) { --k: 3; } .ivc.is-entering .ivc-bars span:nth-child(5) { --k: 4; }
.ivc.is-entering .ivc-bars span:nth-child(6) { --k: 5; } .ivc.is-entering .ivc-bars span:nth-child(7) { --k: 6; }

/* home: the hero artwork floats; the primary button gets a light sweep on hover */
.ivc-hero-art img { animation: ivc-float 6s ease-in-out infinite; }
.ivc.is-entering .ivc-hero h1 { animation: ivc-rise .6s cubic-bezier(.2, .7, .2, 1) .1s both; }
.ivc.is-entering .ivc-hero-checks li { animation: ivc-rise .5s ease both; }
.ivc.is-entering .ivc-hero-checks li:nth-child(1) { animation-delay: .25s; }
.ivc.is-entering .ivc-hero-checks li:nth-child(2) { animation-delay: .32s; }
.ivc.is-entering .ivc-hero-checks li:nth-child(3) { animation-delay: .39s; }
.ivc-btn-primary { position: relative; overflow: hidden; }
.ivc-btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-120%) skewX(-18deg); }
.ivc-btn-primary:hover:not(:disabled)::after { animation: ivc-shine .75s ease; }
.ivc-tcard-combo:hover .ivc-combo-ico, .ivc-lcard-lead:hover .ivc-combo-ico { animation: ivc-beat .9s ease-in-out infinite; }
.ivc-qcard:hover .ivc-tile, .ivc-mcard:hover .ivc-tile { animation: ivc-pop .45s ease; }

/* question screen: a new question slides in; a pick pops; a wrong answer shakes, a right one glows */
.ivc-qpanel.is-swap :is(.ivc-qtext, .ivc-code) { animation: ivc-slide .38s cubic-bezier(.2, .7, .2, 1) both; }
.ivc-qpanel.is-swap .ivc-opts > li { animation: ivc-slide .38s cubic-bezier(.2, .7, .2, 1) both; }
.ivc-qpanel.is-swap .ivc-opts > li:nth-child(1) { animation-delay: .05s; }
.ivc-qpanel.is-swap .ivc-opts > li:nth-child(2) { animation-delay: .1s; }
.ivc-qpanel.is-swap .ivc-opts > li:nth-child(3) { animation-delay: .15s; }
.ivc-qpanel.is-swap .ivc-opts > li:nth-child(4) { animation-delay: .2s; }
.ivc-opt.is-pop .ivc-opt-key, .ivc-opt.is-pop .ivc-opt-radio { animation: ivc-pop .32s ease; }
.ivc-qpanel.is-just .ivc-opt.is-wrong { animation: ivc-shake .45s ease; }
.ivc-qpanel.is-just .ivc-opt.is-right { animation: ivc-glow .9s ease-out; }
.ivc-qpanel.is-just .ivc-opt.is-right .ivc-opt-radio { animation: ivc-pop .4s ease .1s; }
.ivc-qpanel.is-just .ivc-verdict, .ivc-qpanel:is(.is-just, .is-expl) .ivc-expl { animation: ivc-rise .4s cubic-bezier(.2, .7, .2, 1) both; }
.ivc-qpanel.is-just .ivc-expl { animation-delay: .12s; }
.ivc-clock.is-low b { animation: ivc-beat 1s ease-in-out infinite; }
.ivc-pal button { transition: transform .12s ease, border-color .12s ease; }
.ivc-pal button:hover { transform: translateY(-1px); }
.ivc-paused:not([hidden]) { animation: ivc-zoom .25s ease both; }

/* result: the trophy bounces in (the hero is revealed once the record loads, inside the window) */
.ivc.is-entering .ivc-res-hero img { animation: ivc-bounce .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
.ivc.is-entering .ivc-ring { animation: ivc-zoom .6s cubic-bezier(.2, .7, .2, 1) .15s both; }
.ivc.is-entering .ivc-table tbody tr.ivc-row { animation: ivc-rise .45s ease both; }
.ivc.is-entering .ivc-table tbody tr.ivc-row:nth-child(2) { animation-delay: .05s; }
.ivc.is-entering .ivc-table tbody tr.ivc-row:nth-child(3) { animation-delay: .1s; }
.ivc.is-entering .ivc-table tbody tr.ivc-row:nth-child(4) { animation-delay: .15s; }
.ivc.is-entering .ivc-table tbody tr.ivc-row:nth-child(n+5) { animation-delay: .2s; }
.ivc-table tr.ivc-detail td > * { animation: ivc-rise .3s ease both; }

@media (prefers-reduced-motion: reduce) {
  .ivc *, .ivc *::before, .ivc *::after, .ivc.is-entering > * { animation: none !important; }
  .ivc .ivc-bar > span, .ivc .ivc-ring-fg { transition: none !important; }
}

/* =================== print (Download Report) =================== */
@media print {
  #jch-navbar, #jch-footer, .ivc-res-hero-btns, .ivc-filters, .ivc-table-more, .ivc-steps, .jch-chat-btn, #jch-chat-btn, .ivc-noprint { display: none !important; }
  .ivc, .ivc.ivc-res { max-width: none; padding: 0; font-size: 12px; }
  .ivc *, .ivc *::before, .ivc *::after { animation: none !important; }
  .ivc-card, .ivc-res-hero { box-shadow: none; break-inside: avoid; }
  .ivc-table td.ivc-qcell > span { white-space: normal; }
}

/* =================== dark theme =================== */
[data-bs-theme="dark"] .ivc { --ink: #eef0fb; --sub: #a3abc2; --line: rgba(165, 180, 252, .12); --card: #141827; --soft: #1b2034; }
[data-bs-theme="dark"] .ivc-card, [data-bs-theme="dark"] .ivc-qcard, [data-bs-theme="dark"] .ivc-mcard, [data-bs-theme="dark"] .ivc-tcard,
[data-bs-theme="dark"] .ivc-lcard, [data-bs-theme="dark"] .ivc-rcard, [data-bs-theme="dark"] .ivc-tabs, [data-bs-theme="dark"] .ivc-opt,
[data-bs-theme="dark"] .ivc-icon-btn, [data-bs-theme="dark"] .ivc-btn-ghost, [data-bs-theme="dark"] .ivc-filter, [data-bs-theme="dark"] .ivc-lvltab {
  background: #141827; border-color: rgba(165, 180, 252, .14); box-shadow: none; color: var(--ink);
}
[data-bs-theme="dark"] .ivc-hero, [data-bs-theme="dark"] .ivc-res-hero { background: linear-gradient(120deg, #191d33, #1d1a3a); border-color: rgba(165, 180, 252, .16); }
[data-bs-theme="dark"] .ivc-hero-tag { background: rgba(129, 140, 248, .2); color: #c4b5fd; }
[data-bs-theme="dark"] .ivc-mcard.is-hl, [data-bs-theme="dark"] .ivc-tcard.ivc-tcard-combo { background: #1a1d36; border-color: #3e3680; }
[data-bs-theme="dark"] .ivc-combo-tag { background: #141827; border-color: #3e3680; color: #c4b5fd; }
[data-bs-theme="dark"] .ivc-combo-topics { color: #c9cde0; }
[data-bs-theme="dark"] .ivc-tcard.ivc-tcard-combo.is-mix { background: #132623; border-color: #1f4a43; }
[data-bs-theme="dark"] .ivc-lcard.ivc-lcard-lead { background: #15203a; border-color: #263d6b; }
[data-bs-theme="dark"] .ivc-mix-icons > span { background: color-mix(in srgb, var(--c) 18%, #141827); }
[data-bs-theme="dark"] .ivc-tile { background: color-mix(in srgb, var(--c) 18%, #141827); }
[data-bs-theme="dark"] .ivc-bar { background: #262b42; }
[data-bs-theme="dark"] .ivc-btn-outline { background: transparent; color: #c4b5fd; border-color: #5b4bb0; }
[data-bs-theme="dark"] .ivc-btn-soft { background: rgba(129, 140, 248, .16); color: #c4b5fd; border-color: transparent; }
[data-bs-theme="dark"] .ivc-pro { background: linear-gradient(110deg, #2a2412, #2e2611); border-color: #4d3f17; }
[data-bs-theme="dark"] .ivc-pro p { color: #d9d3b5; }
[data-bs-theme="dark"] .ivc-opt-key, [data-bs-theme="dark"] .ivc-pal button { background: #232a40; color: var(--ink); }
[data-bs-theme="dark"] .ivc-opt.is-pick { background: #1f1b3d; }
[data-bs-theme="dark"] .ivc-opt.is-right { background: #12291b; }
[data-bs-theme="dark"] .ivc-opt.is-wrong { background: #2d1416; }
[data-bs-theme="dark"] .ivc-expl { background: #1b1a33; border-color: #2e2a55; }
[data-bs-theme="dark"] .ivc-expl h4 { color: #c4b5fd; }
[data-bs-theme="dark"] .ivc-note { background: #262213; border-color: #4d4220; color: var(--ink); }
[data-bs-theme="dark"] .ivc-stat, [data-bs-theme="dark"] .ivc-ach, [data-bs-theme="dark"] .ivc-ex, [data-bs-theme="dark"] .ivc-table th { background: #1a1f33; border-color: rgba(165, 180, 252, .12); }
[data-bs-theme="dark"] .ivc-table tr.ivc-row:hover td, [data-bs-theme="dark"] .ivc-table tr.ivc-detail td, [data-bs-theme="dark"] .ivc-table tr.ivc-row.is-open td { background: #181c30; }
[data-bs-theme="dark"] .ivc-pal button.is-cur { background: #141827; }
[data-bs-theme="dark"] .ivc-paused { background: rgba(20, 24, 39, .88); }
[data-bs-theme="dark"] .ivc-timer { background: #2d1416; border-color: #6b2a2d; }
[data-bs-theme="dark"] .ivc-timer.is-calm { background: #1d1a3a; border-color: #3e3680; }
[data-bs-theme="dark"] .ivc-timer button { background: #141827; color: var(--ink); }
[data-bs-theme="dark"] .ivc-resume { background: #2a2412; border-color: #4d3f17; }
[data-bs-theme="dark"] .ivc-hint { background: #262213; border-color: #4d4220; }
[data-bs-theme="dark"] .ivc-test.is-pass { background: #12291b; border-color: #1f4a2e; }
[data-bs-theme="dark"] .ivc-test.is-fail { background: #2d1416; border-color: #5a2326; }
[data-bs-theme="dark"] .ivc-plist button:hover, [data-bs-theme="dark"] .ivc-tab:hover { background: #1b2034; }
[data-bs-theme="dark"] .ivc-plist button.is-on, [data-bs-theme="dark"] .ivc-tab.is-on, [data-bs-theme="dark"] .ivc-lvltab.is-on { background: #1f1b3d; border-color: #4a3fa0; color: #c4b5fd; }
[data-bs-theme="dark"] .ivc-solved-banner { background: #12291b; border-color: #1f4a2e; color: #86efac; }
[data-bs-theme="dark"] .ivc code { background: rgba(129, 140, 248, .16); color: #c4b5fd; }
[data-bs-theme="dark"] .ivc-setup .modal-content { background: #141827; color: #eef0fb; }
[data-bs-theme="dark"] .ivc-setup-hd { background: linear-gradient(120deg, #191d33, #1d1a3a); border-color: rgba(165, 180, 252, .14); }
[data-bs-theme="dark"] .ivc-setup-hd h2, [data-bs-theme="dark"] .ivc-su-block h3, [data-bs-theme="dark"] .ivc-su-opt, [data-bs-theme="dark"] .ivc-su-topic { color: #eef0fb; }
[data-bs-theme="dark"] .ivc-su-opt, [data-bs-theme="dark"] .ivc-su-topic { background: #1a1f33; border-color: rgba(165, 180, 252, .16); }
[data-bs-theme="dark"] .ivc-su-opt.is-on { background: #1f1b3d; border-color: #7b5cff; }
[data-bs-theme="dark"] .ivc-setup-ft { border-color: rgba(165, 180, 252, .14); }

@media (prefers-reduced-motion: reduce) {
  .ivc *, .ivc *::before, .ivc *::after { transition: none !important; animation: none !important; }
}
/* The hero art is cut from a light mockup: on the dark theme fade all four edges, not just the left. */
[data-bs-theme="dark"] .ivc-hero-art img {
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 58% 52%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 58% 52%, #000 62%, transparent 100%);
}

/* =================== AI INTERVIEWER (interview-ai.html) =================== */
.ivc-ai-head { display: flex; align-items: center; gap: 1.2em; padding: 1.4em 1.6em; background: linear-gradient(120deg, #faf9ff, #f1eeff); border-color: #e7e3fb; }
.ivc-ai-head h1 { margin: .35em 0 .2em; font-size: 2em; font-weight: 900; }
.ivc-ai-head p { margin: 0; color: var(--sub); max-width: 46em; line-height: 1.55; }
.ivc-ai-head > .ivc-btn { margin-left: auto; align-self: flex-start; }
.ivc-ai-bot { flex: 0 0 auto; width: 4.2em; height: 4.2em; border-radius: 1.1em; display: grid; place-items: center; font-size: 1.6em; color: #fff;
  background: linear-gradient(140deg, #7b5cff, #5530ee); box-shadow: 0 .5em 1.2em rgba(91, 53, 240, .3); }
.ivc-ai-steps { margin-top: .9em; padding: 1.4em 1.5em; }
.ivc-ai-engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.ivc-ai-engine { position: relative; display: flex; gap: .9em; align-items: flex-start; padding: 1em 2.4em 1em 1.1em; border-radius: .9em; border: 2px solid #e3e5ef; background: #fff;
  text-align: left; color: var(--ink); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.ivc-ai-engine:hover:not(:disabled) { border-color: #b8aafb; }
.ivc-ai-engine.is-on { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(91, 53, 240, .1); background: #fbfaff; }
.ivc-ai-engine:disabled { opacity: .5; cursor: not-allowed; }
.ivc-ai-engine-body { flex: 1; min-width: 0; }
.ivc-ai-engine b { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; font-size: 1.05em; font-weight: 800; }
.ivc-ai-engine i { display: block; font-style: normal; font-size: .86em; color: var(--sub); margin: .25em 0 .4em; }
.ivc-ai-engine i strong { color: var(--ink); }
.ivc-ai-engine small { display: block; font-size: .78em; font-weight: 700; color: #4a4d6c; }
.ivc-ai-check { position: absolute; top: .8em; right: .8em; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; font-size: .75em;
  border: 2px solid #d4d6e2; color: transparent; }
.ivc-ai-engine.is-on .ivc-ai-check { background: var(--violet); border-color: var(--violet); color: #fff; }
.ivc-ai-logo { flex: 0 0 auto; width: 2.9em; height: 2.9em; border-radius: .8em; display: grid; place-items: center; font-size: 1.2em; color: #fff; }
.ivc-ai-logo.is-openai { background: linear-gradient(140deg, #10a37f, #0b7a5f); }
.ivc-ai-logo.is-claude { background: linear-gradient(140deg, #e07a4f, #c45a32); }
.ivc-ai-badge { display: inline-block; padding: .12em .55em; border-radius: .4em; font-style: normal; font-size: .66em; font-weight: 900; letter-spacing: .04em; vertical-align: .1em; }
.ivc-ai-badge.is-free { background: #dcf5e4; color: #0a7a31; }
.ivc-ai-badge.is-paid { background: #fff0e6; color: #b4470f; }
.ivc-ai-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65em; }
.ivc-ai-model { display: flex; flex-direction: column; gap: .25em; padding: .85em .9em; border-radius: .8em; border: 2px solid #e3e5ef; background: #fff; text-align: left; color: var(--ink); cursor: pointer; }
.ivc-ai-model:hover:not(:disabled) { border-color: #f0b89a; }
.ivc-ai-model.is-on { border-color: #d0683e; background: #fff8f4; box-shadow: 0 0 0 4px rgba(208, 104, 62, .12); }
.ivc-ai-model:disabled { opacity: .45; cursor: not-allowed; }
.ivc-ai-model b { font-weight: 800; }
.ivc-ai-model i { font-style: normal; font-size: .8em; color: var(--sub); line-height: 1.4; flex: 1; }
.ivc-ai-price { font-size: .84em; color: #4a4d6c; }
.ivc-ai-price strong { font-size: 1.25em; color: #b4470f; }
.ivc-ai-model small { font-size: .74em; font-weight: 700; color: var(--sub); }
.ivc-ai-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1em; }
.ivc-ai-cost { margin-top: .3em; }
.ivc-ai-costbox { display: flex; gap: .9em; align-items: flex-start; padding: .95em 1.1em; border-radius: .85em; border: 1px solid; }
.ivc-ai-costbox > .fa-solid { font-size: 1.3em; margin-top: .1em; }
.ivc-ai-costbox b { display: block; font-weight: 800; }
.ivc-ai-costbox p { margin: .2em 0 0; font-size: .9em; line-height: 1.55; }
.ivc-ai-costbox.is-free { background: #effaf2; border-color: #c9ead4; }
.ivc-ai-costbox.is-free > .fa-solid { color: #16a34a; }
.ivc-ai-costbox.is-paid { background: #fff8f2; border-color: #f6d6c1; }
.ivc-ai-costbox.is-paid > .fa-solid { color: #d0683e; }
.ivc-ai-cost-note { display: block; margin-top: .35em; font-size: .9em; color: var(--sub); }
.ivc-ai-cost-warn { display: block; margin-top: .45em; font-weight: 700; color: #c62f35; }
.ivc-ai-cost-warn .fa-solid { margin-right: .35em; }
.ivc-ai-go { display: flex; align-items: center; gap: 1em; margin-top: 1em; }
.ivc-ai-go .ivc-su-msg { flex: 1; }
.ivc-ai-go .ivc-btn { min-height: 3em; padding: .5em 1.6em; font-size: 1em; }
.ivc-ai-pill { display: inline-flex; align-items: center; gap: .45em; padding: .35em .8em; border-radius: 999px; background: #f3f0ff; color: #4a2bd6; font-size: .82em; font-weight: 800; white-space: nowrap; }
.ivc-ai-reason-l { display: block; margin: 1.2em 0 .4em; font-weight: 800; }
.ivc-ai-reason-l small { font-weight: 600; color: var(--sub); }
.ivc-ai-reason { border-radius: .8em; font-size: .95em; line-height: 1.55; }
.ivc-ai-graded { margin-top: 1em; }
.ivc-ai-graded-hd { display: flex; align-items: center; gap: 1em; padding: .65em .9em; border-radius: .7em; }
.ivc-ai-graded.is-ok .ivc-ai-graded-hd { background: #effaf2; color: #136c31; }
.ivc-ai-graded.is-bad .ivc-ai-graded-hd { background: #fdf2f2; color: #a8262b; }
.ivc-ai-graded.is-skip .ivc-ai-graded-hd { background: #fdf6e3; color: #8a5a00; }
.ivc-ai-score { margin-left: auto; font-size: 1.5em; font-weight: 900; }
.ivc-ai-score small { font-size: .55em; font-weight: 700; opacity: .7; }
.ivc-ai-thinking { display: flex; align-items: center; gap: .7em; margin-top: 1em; padding: .8em 1em; border-radius: .7em; background: #f6f4ff; color: #4a2bd6; font-weight: 700; }
.ivc-ai-dots { display: inline-flex; gap: .3em; }
.ivc-ai-dots i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; animation: ivcAiDot 1.1s infinite ease-in-out; }
.ivc-ai-dots i:nth-child(2) { animation-delay: .15s; }
.ivc-ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ivcAiDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-.25em); } }
.ivc-ai-who-top { display: flex; align-items: center; gap: .8em; }
.ivc-ai-who-top small { display: block; font-size: .78em; font-weight: 700; color: var(--sub); }
.ivc-ai-who-top b { display: block; font-size: 1.1em; font-weight: 900; }
.ivc-ai-who-cost { display: flex; align-items: center; gap: .5em; margin-top: .8em; padding: .5em .75em; border-radius: .6em; font-weight: 800; font-size: .88em; }
.ivc-ai-who-cost.is-free { background: #effaf2; color: #136c31; }
.ivc-ai-who-cost.is-paid { background: #fff4ec; color: #b4470f; }
.ivc-ai-scores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35em; }
.ivc-ai-scores li { display: flex; align-items: center; gap: .6em; padding: .4em .6em; border-radius: .55em; background: #f7f8fc; font-size: .9em; }
.ivc-ai-scores li > span:first-child { font-weight: 800; min-width: 2.2em; }
.ivc-ai-scores li b { margin-left: auto; font-weight: 900; }
.ivc-ai-scores li i { font-style: normal; color: var(--sub); font-size: .85em; }
.ivc-ai-scores li.is-open i { margin-left: auto; }
.ivc-ai-scores .ivc-res-ico { font-size: .72em; }
.ivc-ai-tip h3 { display: flex; align-items: center; gap: .5em; font-size: 1em; font-weight: 800; margin: 0 0 .6em; }
.ivc-ai-tip h3 .fa-solid { color: #e3a008; }
.ivc-ai-tip ul { margin: 0; padding-left: 1.1em; font-size: .88em; color: #3f4263; line-height: 1.6; }
.ivc-ai-verdict .ivc-pill .fa-solid { margin-right: .2em; }
.ivc-ai-sg { display: flex; align-items: center; gap: .5em; font-size: .95em; font-weight: 800; margin: 0 0 .5em; }
.ivc-ai-sg.is-ok { color: #178a3c; }
.ivc-ai-sg.is-bad { color: #c2410c; margin-top: 1em; }
.ivc-ai-list { margin: 0; padding-left: 1.2em; font-size: .92em; line-height: 1.6; }
@media (max-width: 1199.98px) { .ivc-ai-models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .ivc-ai-engines, .ivc-ai-row2 { grid-template-columns: 1fr; }
  .ivc-ai-head { flex-wrap: wrap; }
  .ivc-ai-head > .ivc-btn { margin-left: 0; }
  .ivc-ai-go { flex-wrap: wrap; }
}
@media (max-width: 480px) { .ivc-ai-models { grid-template-columns: 1fr; } }
[data-bs-theme="dark"] .ivc-ai-head { background: linear-gradient(120deg, #191d33, #1d1a3a); border-color: rgba(165, 180, 252, .16); }
[data-bs-theme="dark"] .ivc-ai-engine, [data-bs-theme="dark"] .ivc-ai-model { background: #1a1f33; border-color: rgba(165, 180, 252, .16); color: var(--ink); }
[data-bs-theme="dark"] .ivc-ai-engine.is-on { background: #1f1b3d; border-color: #7b5cff; }
[data-bs-theme="dark"] .ivc-ai-model.is-on { background: #2a1d17; border-color: #d0683e; }
[data-bs-theme="dark"] .ivc-ai-engine small, [data-bs-theme="dark"] .ivc-ai-price { color: #c9cde0; }
[data-bs-theme="dark"] .ivc-ai-costbox.is-free, [data-bs-theme="dark"] .ivc-ai-who-cost.is-free { background: #12291b; border-color: #1f4a2e; color: #86efac; }
[data-bs-theme="dark"] .ivc-ai-costbox.is-paid, [data-bs-theme="dark"] .ivc-ai-who-cost.is-paid { background: #2a1d17; border-color: #5a3420; color: #fdba74; }
[data-bs-theme="dark"] .ivc-ai-pill, [data-bs-theme="dark"] .ivc-ai-thinking { background: #1f1b3d; color: #c4b5fd; }
[data-bs-theme="dark"] .ivc-ai-scores li { background: #1a1f33; }
[data-bs-theme="dark"] .ivc-ai-tip ul { color: #c9cde0; }
[data-bs-theme="dark"] .ivc-ai-graded.is-ok .ivc-ai-graded-hd { background: #12291b; color: #86efac; }
[data-bs-theme="dark"] .ivc-ai-graded.is-bad .ivc-ai-graded-hd { background: #2d1416; color: #fca5a5; }
[data-bs-theme="dark"] .ivc-ai-graded.is-skip .ivc-ai-graded-hd { background: #262213; color: #fcd34d; }

/* =================== COPY BUTTONS (every code block in the interview pages) =================== */
.ivc-codebox { position: relative; }
.ivc-codebox:has(> pre[hidden]) { display: none; }
.ivc-codebox > pre.ivc-code { padding-top: 2.3em; }
.ivc-copy { position: absolute; top: .45em; right: .45em; z-index: 1; display: inline-flex; align-items: center; gap: .4em; padding: .28em .7em; border-radius: .45em;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #e6e8ff; font-size: .78em; font-weight: 700; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease; }
.ivc-copy:hover { background: rgba(255, 255, 255, .18); }
.ivc-copy.is-copied, .ivc-copy-ed.is-copied { background: #16a34a; border-color: #16a34a; color: #fff; }
.ivc-solution h4 { display: flex; align-items: center; gap: .45em; }
.ivc-solution h4 > .fa-solid { color: #16a34a; }
.ivc-solution h4 small { font-size: .78em; font-weight: 700; color: var(--sub); padding: .05em .5em; border-radius: .4em; background: #eef0f6; }
.ivc-solution .ivc-alt-h { margin-top: 1em; }
.ivc-solution .ivc-alt-h > .fa-solid { color: #2563eb; }
.ivc-alt-note { margin: 0 0 .5em; font-size: .88em; color: var(--sub); }
[data-bs-theme="dark"] .ivc-solution h4 small { background: #232a40; }
@media print { .ivc-copy { display: none; } .ivc-codebox > pre.ivc-code { padding-top: .95em; } }

/* =================== MY EXPERIENCE Q&A (interview-experience.html) =================== */
.ivc-x-home { margin-left: auto; }
.ivc-x-story { display: flex; align-items: flex-start; gap: .6em; margin: .8em 0 0; padding: .7em 1em; border-radius: .8em; background: #fff8e8; border: 1px solid #f6e2b0; color: #5c4a14; font-size: .88em; line-height: 1.5; }
.ivc-x-story .fa-solid { color: #d48806; margin-top: .15em; }
.ivc-xwrap { grid-template-columns: 19em minmax(0, 1fr); }
.ivc-xwrap .ivc-plist span.ivc-pt { white-space: normal; line-height: 1.35; }
.ivc-xwrap .ivc-plist-tools { flex-wrap: wrap; }
.ivc-xwrap .ivc-plist-tools .form-control, .ivc-xwrap .ivc-plist-tools .form-select { flex: 1 1 100%; width: 100%; }
.ivc-xwrap .ivc-plist button { align-items: flex-start; }
.ivc-xwrap .ivc-plist .ivc-pn { margin-top: .1em; }
.ivc-xwrap .ivc-plist .is-solved .ivc-pn { font-size: .7em; }
.ivc-xmain { padding: 1.4em 1.6em 1.5em; }
.ivc-xhead { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.ivc-xhead .ivc-muted { font-size: .86em; font-weight: 600; }
.ivc-xdone { margin-left: auto; }
.ivc-xdone.is-on .fa-solid { color: #16a34a; }
.ivc-xdone.is-pop .fa-solid { animation: ivc-pop .45s ease; }
.ivc-xq { margin: .55em 0 .8em; font-size: 1.55em; font-weight: 900; line-height: 1.3; outline: none; }
.ivc-xshort { display: flex; gap: .8em; padding: .9em 1.1em; border-radius: .9em; background: linear-gradient(110deg, #f4f2ff, #eef0fb); border: 1px solid #e3defd; }
.ivc-xshort > .fa-solid { color: var(--violet); font-size: 1.2em; margin-top: .15em; }
.ivc-xshort b { font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--violet); }
.ivc-xshort p { margin: .15em 0 0; font-weight: 600; line-height: 1.55; }
.ivc-xsec { margin-top: 1.4em; }
.ivc-xsec > h3 { display: flex; align-items: center; gap: .55em; margin: 0 0 .7em; font-size: 1.08em; font-weight: 800; }
.ivc-xsec > h3 > .fa-solid { color: var(--violet); font-size: .95em; }
.ivc-xans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.ivc-xans li { position: relative; padding-left: 1.4em; line-height: 1.6; }
.ivc-xans li::before { content: ''; position: absolute; left: .3em; top: .62em; width: .45em; height: .45em; border-radius: 50%; background: var(--violet); opacity: .55; }
.ivc-xans li b { color: var(--ink); }
.ivc-xans li.is-head { padding-left: 0; margin-top: .45em; font-size: .95em; }
.ivc-xans li.is-head::before { display: none; }
.ivc-xans li.is-head b { color: var(--violet); }
.ivc-xcode { margin-bottom: .9em; }
.ivc-xcode-hd { display: flex; align-items: center; gap: .6em; margin-bottom: .35em; font-size: .9em; }
.ivc-xcode-hd span { margin-left: auto; padding: .1em .55em; border-radius: .4em; background: #eef0f6; color: var(--sub); font-size: .78em; font-weight: 800; }
.ivc-xcode .ivc-code { margin: 0; max-height: 34em; }
.ivc-xchecks ul { margin: 0; padding: .9em 1.1em .9em 2.3em; border-radius: .9em; background: #f0faf3; border: 1px solid #d4efdc; line-height: 1.6; }
.ivc-xchecks li::marker { color: #16a34a; }
.ivc-xfu { border: 1px solid var(--line); border-radius: .8em; margin-bottom: .5em; background: #fff; }
.ivc-xfu summary { cursor: pointer; padding: .75em 1em; font-weight: 700; list-style: none; display: flex; gap: .6em; align-items: flex-start; }
.ivc-xfu summary::-webkit-details-marker { display: none; }
.ivc-xfu summary::before { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .7em; margin-top: .45em; color: var(--violet); transition: transform .15s ease; }
.ivc-xfu[open] summary::before { transform: rotate(90deg); }
.ivc-xfu p { margin: 0; padding: 0 1em .9em 2.1em; line-height: 1.6; color: #3f4263; }
.ivc-xfu[open] p { animation: ivc-rise .3s ease both; }
.ivc-xnav { display: flex; justify-content: space-between; gap: .6em; margin-top: 1.6em; padding-top: 1.1em; border-top: 1px solid var(--line); }
/* switching question: the new content slides in */
.ivc-xmain.is-swap > * { animation: ivc-slide .4s cubic-bezier(.2, .7, .2, 1) both; }
.ivc-xmain.is-swap > :nth-child(2) { animation-delay: .04s; }
.ivc-xmain.is-swap > :nth-child(3) { animation-delay: .08s; }
.ivc-xmain.is-swap > :nth-child(n+4) { animation-delay: .12s; }

/* flow diagram: rows of nodes joined by arrows whose dashes run toward the next step */
@keyframes ivc-flow-dash { to { background-position: 1.2em 0; } }
@keyframes ivc-flow-dash-y { to { background-position: 0 1.2em; } }
.ivc-flow { padding: 1em 1.1em 1.1em; border-radius: 1em; background: radial-gradient(circle at 1px 1px, #e4e1f5 1px, transparent 0) 0 0 / 1.1em 1.1em, #fbfaff; border: 1px solid #ebe8fb; }
.ivc-frow { display: flex; align-items: center; gap: .8em; padding: .45em 0; }
.ivc-frow + .ivc-frow { border-top: 1px dashed #e3dff7; }
.ivc-frow-lbl { flex: 0 0 6.2em; font-size: .72em; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--sub); }
.ivc-fsteps { display: flex; align-items: center; flex-wrap: wrap; gap: .45em 0; min-width: 0; flex: 1; }
.ivc-fgroup { display: flex; flex-direction: column; gap: .35em; padding: .35em; border-radius: .8em; border: 1.5px dashed #d9d3f7; }
.ivc-fnode { --kc: #5b35f0; --kb: #efebff; display: inline-flex; align-items: center; gap: .55em; padding: .45em .75em .45em .45em; border-radius: .7em; background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--kc) 30%, #fff); box-shadow: 0 .2em .6em rgba(40, 40, 110, .06); max-width: 15em;
  animation: ivc-zoom .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .15s ease, box-shadow .15s ease; }
.ivc-fnode:hover { transform: translateY(-2px); box-shadow: 0 .5em 1.1em rgba(60, 50, 160, .12); }
.ivc-fico { flex: 0 0 auto; width: 2em; height: 2em; border-radius: .55em; display: grid; place-items: center; background: var(--kb); color: var(--kc); font-size: .85em; }
.ivc-ftxt { min-width: 0; line-height: 1.25; }
.ivc-ftxt b { display: block; font-size: .84em; font-weight: 800; }
.ivc-ftxt small { display: block; font-size: .72em; color: var(--sub); margin-top: .1em; }
.ivc-fnode.k-client { --kc: #2563eb; --kb: #e7f0ff; }
.ivc-fnode.k-edge { --kc: #7c3aed; --kb: #f3edff; }
.ivc-fnode.k-svc { --kc: #5b35f0; --kb: #efebff; }
.ivc-fnode.k-db { --kc: #0f766e; --kb: #e3f6f2; }
.ivc-fnode.k-cache { --kc: #dc2626; --kb: #fdecec; }
.ivc-fnode.k-queue { --kc: #1f2147; --kb: #eceef6; }
.ivc-fnode.k-ext { --kc: #0369a1; --kb: #e0f2fe; }
.ivc-fnode.k-ok { --kc: #16a34a; --kb: #e7f7ec; }
.ivc-fnode.k-bad { --kc: #c2410c; --kb: #fff1e6; }
.ivc-fnode.k-step { --kc: #64748b; --kb: #f1f5f9; }
.ivc-fnode.k-check { --kc: #a16207; --kb: #fef7e0; }
.ivc-farrow { position: relative; flex: 0 0 1.9em; height: 2px; margin: 0 .35em;
  background: linear-gradient(90deg, #a99cf5 50%, transparent 0) 0 0 / .6em 2px repeat-x; animation: ivc-flow-dash 1s linear infinite; }
.ivc-farrow::after { content: ''; position: absolute; right: -2px; top: 50%; width: .5em; height: .5em; border-top: 2px solid #8b7bf0; border-right: 2px solid #8b7bf0; transform: translateY(-50%) rotate(45deg); }

/* home: the Experience Q&A node */
.ivc-xcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1em 1.3em; align-items: center; padding: 1.3em 1.5em; border-radius: 1em;
  background: linear-gradient(120deg, #fff8f1, #ffefdf); border: 1px solid #f7d9bd; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ivc-xcard:hover { transform: translateY(-2px); box-shadow: 0 .6em 1.4em rgba(194, 65, 12, .12); border-color: #f0b98c; color: var(--ink); }
.ivc-xcard .ivc-combo-ico { width: 3em; height: 3em; font-size: 1.5em; background: linear-gradient(140deg, #fb923c, #c2410c); box-shadow: 0 .35em .9em rgba(194, 65, 12, .3); }
.ivc-xcard:hover .ivc-combo-ico { animation: ivc-beat .9s ease-in-out infinite; }
.ivc-xcard b { font-size: 1.15em; font-weight: 900; }
.ivc-xcard .ivc-combo-tag { color: #c2410c; border-color: #f7d9bd; }
.ivc-xcard i { display: block; font-style: normal; color: var(--sub); font-size: .9em; margin: .2em 0 .55em; }
.ivc-xchips { display: flex; flex-wrap: wrap; gap: .4em; }
.ivc-xchips span { padding: .22em .65em; border-radius: 999px; background: #fff; border: 1px solid #f3dcc6; font-size: .76em; font-weight: 700; color: #6b4a2c; }
.ivc-xcard-go { display: flex; flex-direction: column; align-items: flex-end; gap: .45em; min-width: 11em; }
.ivc-xcard-go small { font-size: .8em; font-weight: 700; color: var(--sub); }
.ivc-xcard-go .ivc-bar { width: 100%; height: .4em; --c: linear-gradient(90deg, #fb923c, #c2410c); }
.ivc-xcard-go .ivc-lead-go { color: #c2410c; }
.ivc-xcard:hover .ivc-lead-go .fa-solid { transform: translateX(.2em); }

@media (max-width: 991.98px) {
  .ivc-xwrap { grid-template-columns: 1fr; }
  .ivc-xcard { grid-template-columns: auto minmax(0, 1fr); }
  .ivc-xcard-go { grid-column: 1 / -1; align-items: stretch; }
}
@media (max-width: 640px) {
  .ivc-xmain { padding: 1.1em 1em 1.2em; }
  .ivc-xq { font-size: 1.25em; }
  .ivc-frow { flex-direction: column; align-items: stretch; }
  .ivc-fsteps { flex-direction: column; align-items: stretch; }
  .ivc-fnode { max-width: none; }
  .ivc-farrow { flex: 0 0 1.3em; width: 2px; height: 1.3em; margin: .2em auto; background: linear-gradient(180deg, #a99cf5 50%, transparent 0) 0 0 / 2px .6em repeat-y; animation-name: ivc-flow-dash-y; }
  .ivc-farrow::after { right: auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%) rotate(135deg); }
  .ivc-x-home { margin-left: 0; }
}
@media print {
  .ivc-xnav, .ivc-xdone, .ivc-plist { display: none !important; }
  .ivc-xwrap { grid-template-columns: 1fr; }
}
[data-bs-theme="dark"] .ivc-xshort { background: #1a1d36; border-color: #3e3680; }
[data-bs-theme="dark"] .ivc-x-story { background: #2a2412; border-color: #4d3f17; color: #f5deb0; }
[data-bs-theme="dark"] .ivc-flow { background: radial-gradient(circle at 1px 1px, #262b42 1px, transparent 0) 0 0 / 1.1em 1.1em, #11152a; border-color: rgba(165, 180, 252, .14); }
[data-bs-theme="dark"] .ivc-fnode, [data-bs-theme="dark"] .ivc-xfu { background: #141827; }
[data-bs-theme="dark"] .ivc-fico { background: color-mix(in srgb, var(--kc) 22%, #141827); }
[data-bs-theme="dark"] .ivc-xchecks ul { background: #12291b; border-color: #1f4a2f; }
[data-bs-theme="dark"] .ivc-xfu p { color: #c9cde0; }
[data-bs-theme="dark"] .ivc-xcode-hd span { background: #232a40; }
[data-bs-theme="dark"] .ivc-xcard { background: linear-gradient(120deg, #2a1d17, #2e2013); border-color: #5a3420; }
[data-bs-theme="dark"] .ivc-xchips span { background: #141827; border-color: #5a3420; color: #fdba74; }
@media (prefers-reduced-motion: reduce) { .ivc-farrow { animation: none !important; } }
/* Real Interview Q&A: the question list is grouped by round */
.ivc-xgrp { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .3em; padding: .5em .55em .35em; background: var(--card); font-size: .7em; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--violet); }
.ivc-xgrp:first-child { margin-top: 0; }
.ivc-xgrp em { font-style: normal; padding: .05em .55em; border-radius: 999px; background: #efebff; letter-spacing: 0; }
[data-bs-theme="dark"] .ivc-xgrp em { background: #1f1b3d; }

/* =================== HOME HERO: live mock interview (owner, 2026-10-08) =================== */
@keyframes ivc-caret { 50% { opacity: 0; } }
@keyframes ivc-blink { 50% { opacity: .25; } }
@keyframes ivc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ivc .is-typing::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.18em; background: var(--violet); animation: ivc-caret 1s steps(1) infinite; }
.ivc-mock { position: relative; width: 100%; max-width: 31em; margin: 0 1.8em 0 auto; padding: 2.4em .4em 2.6em; }
.ivc-mock-win { position: relative; z-index: 1; border-radius: 1.05em; background: #fff; border: 1px solid #e4dffb; overflow: hidden;
  box-shadow: 0 1.4em 2.8em rgba(60, 50, 160, .16), 0 .2em .6em rgba(60, 50, 160, .06); animation: ivc-zoom .6s cubic-bezier(.2, .7, .2, 1) both; }
.ivc-mock-bar { display: flex; align-items: center; gap: .6em; padding: .55em .85em; background: linear-gradient(180deg, #f8f6ff, #f1eeff); border-bottom: 1px solid #ebe7fb; font-size: .8em; }
.ivc-mock-dots { display: inline-flex; gap: .3em; }
.ivc-mock-dots i { width: .62em; height: .62em; border-radius: 50%; background: #ff5f57; }
.ivc-mock-dots i:nth-child(2) { background: #febc2e; }
.ivc-mock-dots i:nth-child(3) { background: #28c840; }
.ivc-mock-bar b { font-weight: 800; color: var(--ink); }
.ivc-mock-live { display: inline-flex; align-items: center; gap: .35em; padding: .1em .5em; border-radius: 999px; background: #fdecec; color: #d9363e; font-size: .78em; font-weight: 900; letter-spacing: .06em; }
.ivc-mock-live i { width: .5em; height: .5em; border-radius: 50%; background: #e5484d; animation: ivc-blink 1.2s ease-in-out infinite; }
.ivc-mock-time { margin-left: auto; display: inline-flex; align-items: center; gap: .35em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sub); }
.ivc-mock-body { padding: .9em 1em 1em; min-height: 18.6em; transition: opacity .3s ease, transform .3s ease; }
.ivc-mock-body.is-out { opacity: 0; transform: translateY(-6px); }
.ivc-mock-meta { display: flex; align-items: center; justify-content: space-between; gap: .6em; font-size: .76em; font-weight: 700; color: var(--sub); }
.ivc-mock-topic { --c: #5b35f0; display: inline-flex; align-items: center; gap: .4em; padding: .2em .65em; border-radius: 999px; font-weight: 800;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.ivc-mock-progress { height: .32em; margin: .55em 0 .8em; border-radius: 999px; background: #ece9f8; overflow: hidden; }
.ivc-mock-progress span { display: block; height: 100%; width: 10%; border-radius: inherit; background: linear-gradient(90deg, #7b5cff, #5530ee); transition: width .6s ease; }
.ivc-mock-q { display: flex; gap: .65em; align-items: flex-start; }
.ivc-mock-avatar { flex: 0 0 auto; width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .85em;
  background: linear-gradient(140deg, #7b5cff, #5530ee); box-shadow: 0 .3em .7em rgba(91, 53, 240, .3); }
.ivc-mock-q p { margin: 0; min-height: 4.2em; font-size: .9em; font-weight: 800; line-height: 1.4; color: var(--ink); }
.ivc-mock-opts { list-style: none; margin: .7em 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .32em; min-height: 8.4em; }
.ivc-mock-opts li { display: flex; align-items: center; gap: .45em; padding: .4em .5em; border-radius: .55em; border: 1.5px solid #e8e9f2; background: #fff; font-size: .74em; font-weight: 600;
  color: var(--ink); line-height: 1.25; animation: ivc-rise .35s ease both; animation-delay: calc(var(--i, 0) * 90ms); transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.ivc-mock-opts li { min-height: 2.05em; }
.ivc-mock-opts li > span { flex: 0 0 auto; width: 1.55em; height: 1.55em; border-radius: .35em; display: grid; place-items: center; background: #f1f2f7; font-weight: 800; font-size: .92em; }
.ivc-mock-opts li.is-pick { border-color: var(--violet); background: #f5f2ff; transform: scale(1.02); }
.ivc-mock-opts li.is-pick > span { background: var(--violet); color: #fff; }
.ivc-mock-opts li.is-right { border-color: #4fbf74; background: #effaf2; animation: ivc-glow .9s ease-out; }
.ivc-mock-opts li.is-right > span { background: var(--ok); color: #fff; }
.ivc-mock-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .75em; min-height: 1.6em; font-size: .8em; }
.ivc-mock-verdict { display: inline-flex; align-items: center; gap: .4em; color: #178a3c; font-weight: 800; }
.ivc-mock-verdict:not(:empty) { animation: ivc-pop .45s ease; }
.ivc-mock-score { color: var(--sub); font-weight: 700; }
.ivc-mock-score b { color: var(--violet); font-size: 1.2em; font-variant-numeric: tabular-nums; }
.ivc-mock-chip { --c: #5b35f0; position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .4em; padding: .32em .7em; border-radius: 999px; background: #fff;
  border: 1.5px solid #ece9fb; box-shadow: 0 .4em 1em rgba(60, 50, 160, .12); font-size: .7em; font-weight: 800; color: var(--ink); white-space: nowrap;
  animation: ivc-bob 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.85s); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ivc-mock-chip > span { color: var(--c); }
.ivc-mock-chip.is-on { border-color: var(--c); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--c) 18%, transparent), 0 .5em 1.2em rgba(60, 50, 160, .16); }
/* chips float above and below the window, never over its content */
.ivc-mock-chip:nth-child(1) { top: .2em; left: 0; }
.ivc-mock-chip:nth-child(2) { top: .55em; left: 36%; }
.ivc-mock-chip:nth-child(3) { top: .1em; right: 0; }
.ivc-mock-chip:nth-child(4) { bottom: .2em; left: 40%; }
.ivc-mock-chip:nth-child(5) { bottom: .55em; right: 0; }
.ivc-mock-badge { position: absolute; z-index: 2; bottom: .3em; left: 0; display: inline-flex; align-items: center; gap: .45em; padding: .4em .8em; border-radius: .8em;
  background: #fff; border: 1px solid #fde2d6; box-shadow: 0 .5em 1.2em rgba(230, 90, 40, .15); font-size: .74em; font-weight: 700; color: var(--ink); }
.ivc-mock-badge .fa-fire { color: #f2552c; }
.ivc-mock-badge b { color: #e5531a; }
.ivc-mock-badge.is-pop { animation: ivc-pop .45s ease; }
@media (max-width: 991.98px) {
  .ivc-mock { margin: .4em auto 1.4em; }
}
@media (max-width: 480px) {
  .ivc-mock { padding: 2.3em 0 2.5em; }
  .ivc-mock-chip:nth-child(2), .ivc-mock-chip:nth-child(4) { display: none; }
}
[data-bs-theme="dark"] .ivc-mock-win, [data-bs-theme="dark"] .ivc-mock-chip, [data-bs-theme="dark"] .ivc-mock-badge, [data-bs-theme="dark"] .ivc-mock-opts li { background: #141827; border-color: rgba(165, 180, 252, .16); }
[data-bs-theme="dark"] .ivc-mock-bar { background: #1a1f33; border-color: rgba(165, 180, 252, .12); }
[data-bs-theme="dark"] .ivc-mock-opts li > span { background: #232a40; }
[data-bs-theme="dark"] .ivc-mock-opts li.is-pick { background: #1f1b3d; }
[data-bs-theme="dark"] .ivc-mock-opts li.is-right { background: #12291b; }
[data-bs-theme="dark"] .ivc-mock-progress { background: #262b42; }
[data-bs-theme="dark"] .ivc-mock-topic { background: color-mix(in srgb, var(--c) 18%, #141827); }

/* =================== REAL INTERVIEW Q&A: hero with a video-call interview =================== */
@keyframes ivc-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes ivc-ring { 0% { box-shadow: 0 0 0 0 rgba(91, 53, 240, .45); } 100% { box-shadow: 0 0 0 .9em rgba(91, 53, 240, 0); } }
.ivc-xhero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6em; align-items: center; padding: 1.9em 2.2em;
  border-radius: 1.3em; overflow: hidden; border: 1px solid #f3dcc6;
  background: radial-gradient(circle at 85% 20%, #ffe7d1 0, transparent 45%), linear-gradient(120deg, #fffaf5 0%, #fff3e8 55%, #ffeedd 100%); }
.ivc-xhero .ivc-hero-tag { background: #ffe4cc; color: #b4430b; }
.ivc-xhero h1 { margin: .5em 0 .35em; font-size: 2.6em; line-height: 1.08; font-weight: 900; letter-spacing: -.01em; }
.ivc-xhero h1 em { font-style: normal; color: #c2410c; }
.ivc-xhero p { margin: 0; max-width: 32em; color: var(--sub); line-height: 1.55; }
.ivc-xstats { display: flex; flex-wrap: wrap; gap: .6em; list-style: none; margin: 1.1em 0 1.2em; padding: 0; }
.ivc-xstats li { display: flex; flex-direction: column; min-width: 5.6em; padding: .5em .8em; border-radius: .8em; background: rgba(255, 255, 255, .75); border: 1px solid #f6dfc9; }
.ivc-xstats b { font-size: 1.35em; font-weight: 900; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ivc-xstats span { font-size: .74em; font-weight: 700; color: var(--sub); }
.ivc-xhero-cta { display: flex; flex-wrap: wrap; gap: .6em; }
.ivc-xhero-cta .ivc-btn-primary { background: linear-gradient(180deg, #f97316, #c2410c); box-shadow: 0 .35em 1em rgba(194, 65, 12, .28); }
.ivc-xhero-cta .ivc-btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #ea6a10, #a8380a); }
.ivc-xhero-cta .ivc-btn-outline { color: #c2410c; border-color: #f4c7a3; }
.ivc-xhero-cta .ivc-btn-outline:hover:not(:disabled) { background: #fff4ea; color: #a8380a; }

.ivc-call { position: relative; border-radius: 1.1em; padding: .8em; background: #161a2e; color: #e8eaf6; box-shadow: 0 1.4em 2.8em rgba(40, 30, 90, .28);
  animation: ivc-zoom .6s cubic-bezier(.2, .7, .2, 1) both; }
.ivc-call-top { display: flex; align-items: center; gap: .6em; padding: .1em .2em .65em; font-size: .76em; color: #aab0d0; }
.ivc-call-rec { display: inline-flex; align-items: center; gap: .35em; padding: .12em .5em; border-radius: .4em; background: rgba(229, 72, 77, .18); color: #ff7b80; font-weight: 900; letter-spacing: .06em; }
.ivc-call-rec i { width: .5em; height: .5em; border-radius: 50%; background: #ff4d55; animation: ivc-blink 1.2s ease-in-out infinite; }
.ivc-call-top [data-call-time] { font-variant-numeric: tabular-nums; font-weight: 800; }
.ivc-call-title { margin-left: auto; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivc-call-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.ivc-call-tile { position: relative; aspect-ratio: 16 / 10; border-radius: .8em; display: grid; place-items: center; overflow: hidden; border: 2px solid transparent;
  background: radial-gradient(circle at 50% 35%, #3a3f66 0, #22263f 70%); transition: border-color .25s ease; }
.ivc-call-tile.is-you { background: radial-gradient(circle at 50% 35%, #5a3b2a 0, #2a2030 70%); }
.ivc-call-tile.is-speaking { border-color: #8b7bf0; }
.ivc-call-tile.is-you.is-speaking { border-color: #fb923c; }
.ivc-call-av { width: 3.4em; height: 3.4em; border-radius: 50%; display: grid; place-items: center; font-size: 1.15em; color: #fff;
  background: linear-gradient(140deg, #7b5cff, #4824e0); }
.ivc-call-tile.is-you .ivc-call-av { background: linear-gradient(140deg, #fb923c, #c2410c); }
.ivc-call-tile.is-speaking .ivc-call-av { animation: ivc-ring 1.2s ease-out infinite; }
.ivc-call-name { position: absolute; left: .5em; bottom: .45em; display: inline-flex; align-items: center; gap: .35em; padding: .15em .5em; border-radius: .4em;
  background: rgba(10, 12, 25, .6); font-size: .7em; font-weight: 700; color: #fff; }
.ivc-call-name .fa-solid { font-size: .85em; color: #9ef0b4; }
.ivc-call-wave { position: absolute; right: .55em; bottom: .55em; display: inline-flex; align-items: flex-end; gap: 2px; height: .9em; }
.ivc-call-wave i { width: 3px; height: 100%; border-radius: 2px; background: #9ef0b4; transform: scaleY(.2); transform-origin: bottom; }
.ivc-call-tile.is-speaking .ivc-call-wave i { animation: ivc-wave .8s ease-in-out infinite; }
.ivc-call-tile.is-speaking .ivc-call-wave i:nth-child(2) { animation-delay: -.2s; }
.ivc-call-tile.is-speaking .ivc-call-wave i:nth-child(3) { animation-delay: -.45s; }
.ivc-call-tile.is-speaking .ivc-call-wave i:nth-child(4) { animation-delay: -.65s; }
.ivc-call-caption { margin-top: .65em; min-height: 5.6em; padding: .65em .8em; border-radius: .7em; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.ivc-call-who { display: inline-flex; align-items: center; gap: .35em; font-size: .68em; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #b8adff; }
.ivc-call-who.is-you { color: #fdba74; }
.ivc-call-caption p { margin: .25em 0 0; font-size: .86em; line-height: 1.5; color: #eef0fb; }
.ivc-call .is-typing::after { background: #fdba74; }
.ivc-call-ctrl { display: flex; justify-content: center; gap: .55em; margin-top: .7em; }
.ivc-call-ctrl > span { width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; background: #2a2f4a; color: #dfe3f7; font-size: .8em; }
.ivc-call-ctrl > span.is-end { background: #e5484d; color: #fff; width: 3.2em; border-radius: 999px; }
@media (max-width: 991.98px) {
  .ivc-xhero { grid-template-columns: 1fr; padding: 1.5em 1.3em; }
}
@media (max-width: 480px) {
  .ivc-xhero h1 { font-size: 2em; }
  .ivc-call-tile { aspect-ratio: 4 / 3; }
}
[data-bs-theme="dark"] .ivc-xhero { background: linear-gradient(120deg, #2a1d17, #241a14); border-color: #5a3420; }
[data-bs-theme="dark"] .ivc-xhero .ivc-hero-tag { background: #4a2a17; color: #fdba74; }
[data-bs-theme="dark"] .ivc-xstats li { background: rgba(20, 24, 39, .7); border-color: #5a3420; }

/* =================== CODE AS AN IDE WINDOW (Real Interview Q&A) ===================
   IntelliJ-style dark theme over Prism tokens; the gutter is sticky so line numbers stay
   while the code scrolls sideways. Copy lives in the title bar (same data-ivc-copy handler). */
.ivc-xcode-cap { margin: 0 0 .4em; font-size: .9em; font-weight: 800; color: var(--ink); }
.ivc-ide { position: relative; border-radius: .8em; overflow: hidden; background: #1e1f22; border: 1px solid #2f3136; box-shadow: 0 .6em 1.4em rgba(20, 20, 40, .14); }
.ivc-ide-bar { display: flex; align-items: center; gap: .6em; padding: .45em .6em .45em .8em; background: #2b2d30; border-bottom: 1px solid #393b40; font-size: .8em; }
.ivc-ide-dots { display: inline-flex; gap: .32em; }
.ivc-ide-dots i { width: .62em; height: .62em; border-radius: 50%; background: #ff5f57; }
.ivc-ide-dots i:nth-child(2) { background: #febc2e; }
.ivc-ide-dots i:nth-child(3) { background: #28c840; }
.ivc-ide-tab { display: inline-flex; align-items: center; gap: .45em; padding: .25em .75em; border-radius: .45em .45em 0 0; background: #1e1f22; color: #dfe1e5;
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: .95em; box-shadow: inset 0 -2px 0 #3574f0; }
.ivc-ide-tab .fa-java { color: #f0703a; }
.ivc-ide-tab .fa-database, .ivc-ide-tab .fa-terminal { color: #6aab73; }
.ivc-ide-tab .fa-docker { color: #3d8ff0; }
.ivc-ide-tab .fa-python { color: #f7c948; }
.ivc-ide-tab .fa-file-code, .ivc-ide-tab .fa-sliders { color: #c77dbb; }
.ivc-ide-lang { margin-left: auto; padding: .1em .5em; border-radius: .35em; background: #393b40; color: #9da0a8; font-size: .85em; font-weight: 800; }
.ivc-ide-bar .ivc-copy { position: static; border-color: #45484f; background: #393b40; color: #dfe1e5; }
.ivc-ide-bar .ivc-copy:hover { background: #4a4d55; }
.ivc-ide-body { display: grid; grid-template-columns: auto minmax(0, 1fr); max-height: 36em; overflow: auto; scrollbar-width: thin; scrollbar-color: #4a4d55 #1e1f22; }
.ivc-ide-gutter { position: sticky; left: 0; z-index: 1; margin: 0; padding: .9em .7em .9em .9em; background: #1e1f22; border-right: 1px solid #2f3136; color: #4b5059;
  text-align: right; user-select: none; white-space: pre; font: .84em/1.6 'JetBrains Mono', 'Fira Code', Consolas, monospace; }
.ivc .ivc-ide pre.ivc-code { margin: 0; padding: .9em 1.1em .9em .9em; border-radius: 0; background: transparent; overflow: visible; max-height: none;
  color: #bcbec4; font: .84em/1.6 'JetBrains Mono', 'Fira Code', Consolas, monospace; tab-size: 4; }
.ivc-ide pre.ivc-code code { font: inherit; color: inherit; background: none; padding: 0; white-space: pre; }
.ivc-ide .token.comment, .ivc-ide .token.prolog { color: #7a7e85; font-style: italic; }
.ivc-ide .token.keyword, .ivc-ide .token.boolean, .ivc-ide .token.important { color: #cf8e6d; }
.ivc-ide .token.string, .ivc-ide .token.char, .ivc-ide .token.attr-value { color: #6aab73; }
.ivc-ide .token.number { color: #2aacb8; }
.ivc-ide .token.annotation, .ivc-ide .token.decorator { color: #b3ae60; }
.ivc-ide .token.function { color: #56a8f5; }
.ivc-ide .token.class-name { color: #bcbec4; }
.ivc-ide .token.constant, .ivc-ide .token.variable { color: #c77dbb; }
.ivc-ide .token.operator, .ivc-ide .token.punctuation { color: #bcbec4; }
.ivc-ide .token.namespace { color: #8c8f96; }
.ivc-ide .token.key, .ivc-ide .token.atrule, .ivc-ide .token.attr-name, .ivc-ide .token.property { color: #cf8e6d; }
.ivc-ide .token.builtin { color: #56a8f5; }
@media print {
  .ivc-ide { box-shadow: none; }
  .ivc-ide-body { max-height: none; overflow: visible; }
}