/* ---------------------------------------------------------------------------
   FB Tutorials — front-end styles

   Colours reference the Elementor design-system variables (--Surface, --Accent
   and so on) with hard-coded fallbacks, so the cards follow the site tokens
   here and still render correctly anywhere else.
   Namespace is .fbt- so it can never collide with the .fb- global classes.
   --------------------------------------------------------------------------- */

.fbt-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fbt-cols-1 { grid-template-columns: 1fr; }
.fbt-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fbt-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .fbt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .fbt-grid { grid-template-columns: 1fr; }
}

.fbt-card {
  display: flex;
  flex-direction: column;
  background: var(--Surface, #141824);
  border: 1px solid var(--Border, rgba(255, 255, 255, .085));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.fbt-card:hover,
.fbt-card:focus-within {
  border-color: var(--Border-Strong, rgba(255, 255, 255, .16));
  transform: translateY(-2px);
}

.fbt-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--Surface-Raised, #1B2030);
  border-block-end: 1px solid var(--Border, rgba(255, 255, 255, .085));
  overflow: hidden;
}
.fbt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fbt-thumb-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--Font-Mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--Text-Muted, #7B849B);
}

.fbt-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(11, 13, 20, .72);
  border: 1px solid rgba(255, 255, 255, .3);
}
.fbt-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-inline-start: 14px solid #fff;
  border-block-start: 9px solid transparent;
  border-block-end: 9px solid transparent;
  transform: translateX(3px);
}

.fbt-duration {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-end: 10px;
  font-family: var(--Font-Mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(11, 13, 20, .86);
  padding: 3px 8px;
  border-radius: 5px;
}

.fbt-ph {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  font-family: var(--Font-Mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--Canvas, #0B0D14);
  background: var(--Status-Dev, #E3A73C);
  padding: 3px 8px;
  border-radius: 5px;
}

.fbt-card-placeholder { border-style: dashed; border-color: rgba(227, 167, 60, .42); }

.fbt-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }

.fbt-cat {
  margin: 0;
  font-family: var(--Font-Mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--Accent, #8B7BFF);
}

.fbt-title { margin: 0; font-size: 17px; line-height: 1.3; color: var(--Text-Heading, #F3F5FA); }
.fbt-title a { color: inherit; text-decoration: none; }
.fbt-title a:hover { text-decoration: underline; }

.fbt-meta {
  margin: 0;
  font-family: var(--Font-Mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--Text-Muted, #7B849B);
}

.fbt-btn {
  align-self: flex-start;
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--Border-Strong, rgba(255, 255, 255, .16));
  background: transparent;
  color: var(--Text-Heading, #F3F5FA);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.fbt-btn:hover { background: rgba(255, 255, 255, .05); color: var(--Text-Heading, #F3F5FA); }
.fbt-btn-ghost { border-color: var(--Border, rgba(255, 255, 255, .085)); }
.fbt-btn-disabled { opacity: .45; pointer-events: none; }

.fbt-more { display: flex; justify-content: center; margin-block-start: 28px; }
.fbt-empty { color: var(--Text-Muted, #7B849B); }

/* Gated downloads --------------------------------------------------------- */
.fbt-downloads {
  margin-block: 28px;
  padding: 20px 22px;
  background: var(--Surface, #141824);
  border: 1px solid var(--Border, rgba(255, 255, 255, .085));
  border-radius: 14px;
}
.fbt-downloads-title {
  margin: 0 0 12px;
  font-family: var(--Font-Mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--Text-Muted, #7B849B);
}
.fbt-download-list { margin: 0; padding-inline-start: 18px; }
.fbt-download-list li { margin-block-end: 6px; }
.fbt-download-list a { color: var(--Accent, #8B7BFF); }
.fbt-gate-note { margin: 0 0 14px; color: var(--Text-Body, #AEB6C9); font-size: 15px; }
.fbt-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.fbt-gate-actions .fbt-btn { margin-block-start: 0; }

@media (prefers-reduced-motion: reduce) {
  .fbt-card { transition: none; }
  .fbt-card:hover { transform: none; }
}

/* =========================================================================
   v0.2 — single tutorial, steps, membership gates
   ========================================================================= */

.fbt-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.16));background:var(--Surface-Raised,#1B2030);
  margin-block-end:18px}
.fbt-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.fbt-meta-strip{margin-block-end:26px}

.fbt-sec{margin-block:34px}
.fbt-h2{font-size:1.35rem;margin:0 0 16px;color:var(--Text-Heading,#F3F5FA);
  letter-spacing:-.02em;font-weight:800}

.fbt-setup{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:0;padding:0;list-style:none}
@media(max-width:640px){.fbt-setup{grid-template-columns:1fr}}
.fbt-setup li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;
  color:var(--Text-Body,#AEB6C9)}
.fbt-setup li::before{content:"✓";color:var(--Accent,#8B7BFF);font-weight:700;flex:none}

.fbt-step{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;
  border-block-start:1px solid var(--Border,rgba(255,255,255,.085))}
.fbt-step-n{width:30px;height:30px;border-radius:50%;background:var(--Accent-Soft,rgba(139,123,255,.13));
  color:var(--Accent,#8B7BFF);display:grid;place-items:center;flex:none;
  font:700 13px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace)}
.fbt-step-t{font-size:1.05rem;margin:0 0 6px;color:var(--Text-Heading,#F3F5FA);font-weight:700}
.fbt-step-d{margin:0;font-size:14.5px;color:var(--Text-Body,#AEB6C9)}
.fbt-ts{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font:600 11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Cyan,#46D8F5);border:1px solid rgba(70,216,245,.32);
  background:rgba(70,216,245,.08);padding:3px 9px;border-radius:999px;margin-block-end:8px}
.fbt-code{background:var(--Canvas-Alt,#0E111A);border:1px solid var(--Border,rgba(255,255,255,.085));
  border-radius:8px;padding:12px 14px;margin:10px 0 0;overflow:auto;
  font:12.5px/1.6 var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Body,#AEB6C9)}
.fbt-code code{font:inherit;color:inherit;background:none;padding:0}

/* membership gate */
.fbt-gate{text-align:center;padding:22px 20px;border-radius:12px;
  background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(139,123,255,.14),transparent 65%),
  var(--Surface-Raised,#1B2030);border:1px solid var(--Border-Strong,rgba(255,255,255,.16))}
.fbt-gate-level{display:inline-block;font:600 10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:.11em;text-transform:uppercase;color:var(--Accent,#8B7BFF);
  border:1px solid rgba(139,123,255,.34);background:rgba(139,123,255,.1);
  padding:4px 11px;border-radius:999px;margin-block-end:12px}
.fbt-gate-h{margin:0 0 8px;font-size:1.15rem;color:var(--Text-Heading,#F3F5FA);font-weight:800}
.fbt-gate-p{margin:0 auto 16px;max-width:46ch;font-size:14px;color:var(--Text-Body,#AEB6C9)}
.fbt-btn-join{background:linear-gradient(120deg,#6C5CE7,#A33BC9 55%,#D6004A);color:#fff;border-color:transparent}
.fbt-btn-join:hover{color:#fff;opacity:.93}
.fbt-level{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;
  font:600 10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.11em;
  text-transform:uppercase;color:var(--Accent,#8B7BFF);border:1px solid rgba(139,123,255,.4);
  background:rgba(11,13,20,.8);padding:4px 10px;border-radius:999px}

/* redemption */
.fbt-redeem{background:var(--Surface,#141824);border:1px solid var(--Border,rgba(255,255,255,.085));
  border-radius:14px;padding:22px 24px}
.fbt-current-level{font:700 18px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Heading,#F3F5FA);margin:0 0 16px}
.fbt-redeem-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.fbt-redeem-form label{display:block;width:100%;font-size:13px;font-weight:600;
  color:var(--Text-Heading,#F3F5FA);margin-block-end:6px}
.fbt-redeem-form input{flex:1 1 220px;padding:11px 13px;border-radius:9px;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.16));
  background:var(--Canvas,#0B0D14);color:var(--Text-Heading,#F3F5FA);
  font:15px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace)}
.fbt-msg{padding:10px 14px;border-radius:9px;font-size:14px;margin:0 0 16px}
.fbt-msg-good{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:var(--Status-Live,#4ADE80)}
.fbt-msg-bad{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:#F87171}
.fbt-help-note{font-size:13px;color:var(--Text-Muted,#7B849B);margin:14px 0 0}

/* =========================================================================
   v0.3 — courses, lessons, prompts
   ========================================================================= */

/* watch block: no embed, link out to YouTube */
.fbt-watch{background:var(--Surface,#141824);border:1px solid var(--Border,rgba(255,255,255,.085));
  border-radius:16px;overflow:hidden;margin-block-end:22px}
.fbt-watch-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.fbt-watch-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fbt-watch-bar{padding:18px 20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fbt-watch-note{margin:0;font-size:14.5px;color:var(--Text-Body,#AEB6C9);max-width:60ch}
.fbt-watch-actions{margin:0}
.fbt-free-chip{display:inline-flex;align-items:center;gap:8px;
  font:600 11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:1.1px;
  text-transform:uppercase;color:var(--Status-Live,#4ADE80);
  border:1px solid rgba(74,222,128,.30);background:rgba(74,222,128,.08);
  padding:5px 11px;border-radius:999px}

/* prompts */
.fbt-sec-note{font-size:14.5px;color:var(--Text-Body,#AEB6C9);margin:0 0 16px}
.fbt-prompt{background:var(--Canvas-Alt,#0E111A);border:1px solid var(--Border,rgba(255,255,255,.085));
  border-radius:12px;overflow:hidden;margin-block-end:14px}
.fbt-prompt-h{display:flex;align-items:center;gap:10px;padding:11px 15px;
  background:var(--Surface-Raised,#1B2030);border-block-end:1px solid var(--Border,rgba(255,255,255,.085))}
.fbt-prompt-label{font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:.9px;text-transform:uppercase;color:var(--Text-Muted,#7B849B)}
.fbt-prompt-h .fbt-copy{margin-left:auto;padding:6px 12px;font-size:12.5px;margin-block-start:0}
.fbt-copy.is-copied{color:var(--Status-Live,#4ADE80);border-color:rgba(74,222,128,.4)}
.fbt-prompt pre{margin:0;padding:15px;overflow:auto;
  font:12.5px/1.65 var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Body,#AEB6C9);white-space:pre-wrap}
.fbt-prompt code{font:inherit;color:inherit;background:none;padding:0}

/* author's own HTML — kept unopinionated on purpose */
.fbt-custom-html img,.fbt-custom-html iframe,.fbt-custom-html video{max-width:100%}
.fbt-custom-html table{width:100%;border-collapse:collapse}
.fbt-custom-html th,.fbt-custom-html td{padding:10px 12px;
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085));text-align:left}

/* curriculum */
.fbt-curriculum{background:var(--Surface,#141824);border:1px solid var(--Border,rgba(255,255,255,.085));
  border-radius:16px;overflow:hidden;margin-block:30px}
.fbt-curriculum-h{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085));
  font:600 11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:1.3px;text-transform:uppercase;color:var(--Text-Muted,#7B849B)}
.fbt-curriculum-n{margin-left:auto}
.fbt-part{display:flex;align-items:center;gap:12px;padding:13px 18px;
  background:var(--Surface-Raised,#1B2030);
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085))}
.fbt-part-t{color:var(--Text-Heading,#F3F5FA);font-weight:650;font-size:14.5px}
.fbt-part-s{margin-left:auto;font:10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:.8px;text-transform:uppercase;color:var(--Text-Muted,#7B849B)}
.fbt-lesson{display:flex;gap:13px;padding:14px 18px;text-decoration:none;
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085))}
.fbt-lesson:hover{background:rgba(255,255,255,.03)}
.fbt-lesson.is-current{background:rgba(139,123,255,.10);
  box-shadow:inset 3px 0 0 var(--Accent,#8B7BFF)}
.fbt-lesson-n{font:700 12px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Muted,#7B849B);flex:none;padding-block-start:2px}
.fbt-lesson.is-current .fbt-lesson-n{color:var(--Accent,#8B7BFF)}
.fbt-lesson-b{display:flex;flex-direction:column;gap:5px}
.fbt-lesson-t{font-size:14.5px;color:var(--Text-Body,#AEB6C9)}
.fbt-lesson.is-current .fbt-lesson-t{color:var(--Text-Heading,#F3F5FA);font-weight:600}
.fbt-lesson-s{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font:10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:.6px;text-transform:uppercase;color:var(--Text-Muted,#7B849B)}
.fbt-lesson-s i{font-style:normal}
.fbt-pill{padding:2px 7px;border-radius:4px;border:1px solid var(--Border,rgba(255,255,255,.085));
  color:var(--Text-Muted,#7B849B)}
.fbt-pill-acc{color:var(--Accent,#8B7BFF);border-color:rgba(139,123,255,.3)}
.fbt-pill-lock{color:var(--Status-Dev,#E3A73C);border-color:rgba(227,167,60,.34)}

.fbt-lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-block:30px}

/* account form */
.fbt-account{background:var(--Surface,#141824);border:1px solid var(--Border,rgba(255,255,255,.085));
  border-radius:14px;padding:26px 28px}
@media(max-width:600px){.fbt-account{padding:20px 18px}}
.fbt-account .fbt-downloads-title{margin-block-end:18px}

.fbt-account-form{display:flex;flex-direction:column}
.fbt-field{margin-block-end:16px}
.fbt-field label{display:block;font-size:13px;font-weight:600;letter-spacing:-.005em;
  color:var(--Text-Heading,#F3F5FA);margin-block-end:7px}
.fbt-field input{width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.16));
  background:var(--Canvas,#0B0D14);color:var(--Text-Heading,#F3F5FA);
  font:15px/1.4 inherit;transition:border-color .16s ease,box-shadow .16s ease}
.fbt-field input::placeholder{color:var(--Text-Muted,#7B849B)}
.fbt-field input:focus{outline:0;border-color:var(--Accent,#8B7BFF);
  box-shadow:0 0 0 3px rgba(139,123,255,.18)}
.fbt-field input:disabled{opacity:.55;cursor:not-allowed;
  background:var(--Canvas-Alt,#0E111A)}

.fbt-consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;
  color:var(--Text-Body,#AEB6C9);background:var(--Canvas-Alt,#0E111A);
  border:1px solid var(--Border,rgba(255,255,255,.085));border-radius:10px;
  padding:14px 16px;margin-block:4px 20px;cursor:pointer}
.fbt-consent:hover{border-color:var(--Border-Strong,rgba(255,255,255,.16))}
.fbt-consent input{inline-size:17px;block-size:17px;margin:1px 0 0;flex:none;
  accent-color:var(--Accent,#8B7BFF);cursor:pointer}

.fbt-account-form p{margin:0}
.fbt-account-form .fbt-btn{align-self:flex-start;margin-block-start:0}

.fbt-account .fbt-help-note{font-size:13px;line-height:1.6;margin-block-start:22px;
  padding-block-start:18px;border-block-start:1px solid var(--Border,rgba(255,255,255,.085));
  color:var(--Text-Muted,#7B849B);max-width:62ch}

/* login page */
.fbt-login .login-username,.fbt-login .login-password{margin-block-end:16px}
.fbt-login label{display:block;font-size:13px;font-weight:600;
  color:var(--Text-Heading,#F3F5FA);margin-block-end:7px}
.fbt-login input[type=text],.fbt-login input[type=password]{width:100%;padding:12px 14px;
  border-radius:10px;border:1px solid var(--Border-Strong,rgba(255,255,255,.16));
  background:var(--Canvas,#0B0D14);color:var(--Text-Heading,#F3F5FA);font:15px/1.4 inherit}
.fbt-login input:focus{outline:0;border-color:var(--Accent,#8B7BFF);
  box-shadow:0 0 0 3px rgba(139,123,255,.18)}
.fbt-login .login-remember{margin-block-end:18px}
.fbt-login .login-remember label{display:flex;gap:10px;align-items:center;
  font-weight:400;font-size:13.5px;color:var(--Text-Body,#AEB6C9)}
.fbt-login .login-remember input{inline-size:17px;block-size:17px;accent-color:var(--Accent,#8B7BFF)}
.fbt-login .login-submit input[type=submit]{
  background:linear-gradient(120deg,var(--Accent-Deep,#6C5CE7),var(--Gradient-Mid,#A33BC9) 55%,var(--Gradient-End,#D6004A));
  color:#fff;border:0;border-radius:9px;padding:12px 22px;font:650 14.5px inherit;cursor:pointer}
.fbt-login-alt{margin:18px 0 0;font-size:13.5px;color:var(--Text-Muted,#7B849B)}

/* dashboard */
.fbt-dash{display:flex;flex-direction:column;gap:18px}
.fbt-dash-hello{display:flex;align-items:center;gap:16px}
.fbt-avatar{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
  color:#fff;font:700 19px inherit;
  background:linear-gradient(120deg,var(--Accent-Deep,#6C5CE7),var(--Gradient-Mid,#A33BC9) 55%,var(--Gradient-End,#D6004A))}
.fbt-dash-course{background:var(--Surface,#141824);
  border:1px solid var(--Border,rgba(255,255,255,.085));border-radius:14px;padding:20px 22px}
.fbt-dash-course-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-block-end:12px}
.fbt-dash-course-h a{color:var(--Text-Heading,#F3F5FA);font-weight:700;font-size:16px;text-decoration:none}
.fbt-dash-course-h a:hover{text-decoration:underline}
.fbt-dash-count{margin-left:auto;font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:.8px;text-transform:uppercase;color:var(--Text-Muted,#7B849B)}
.fbt-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.fbt-bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(120deg,var(--Accent-Deep,#6C5CE7),var(--Gradient-End,#D6004A))}
.fbt-dash-next{margin:12px 0 0;font-size:14px;color:var(--Text-Body,#AEB6C9)}
.fbt-dash-complete{color:var(--Status-Live,#4ADE80)}
.fbt-dash-actions{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 0}
.fbt-dash-actions .fbt-btn{margin-block-start:0}

/* mark as done */
.fbt-done{margin-block:26px}
.fbt-done .fbt-btn{margin-block-start:0}
.fbt-done .fbt-btn.is-done{color:var(--Status-Live,#4ADE80);border-color:rgba(74,222,128,.4);
  background:rgba(74,222,128,.08)}
.fbt-done-note{margin-block:26px;font-size:14px;color:var(--Text-Muted,#7B849B)}
.fbt-lesson.is-done .fbt-lesson-n{color:var(--Status-Live,#4ADE80)}
.fbt-lesson.is-done .fbt-lesson-t{color:var(--Text-Muted,#7B849B)}

/* register form */
.fbt-register .fbt-free-chip{margin-block-end:20px}
.fbt-register-form{display:flex;flex-direction:column}
.fbt-register-form p{margin:0}
.fbt-login .fbt-btn,.fbt-register .fbt-btn{margin-block-start:0}

/* Buttons are anchors, and a theme's global link colour outranks a single
   class. Match the specificity so the button keeps its own colour. */
a.fbt-btn,
a.fbt-btn:visited{color:var(--Text-Heading,#F3F5FA)}
a.fbt-btn:hover,
a.fbt-btn:focus-visible{color:var(--Text-Heading,#F3F5FA);text-decoration:none}
a.fbt-btn-join,
a.fbt-btn-join:visited,
a.fbt-btn-join:hover,
a.fbt-btn-join:focus-visible{color:#fff}
.fbt-btn-join{background:linear-gradient(120deg,var(--Accent-Deep,#6C5CE7),
  var(--Gradient-Mid,#A33BC9) 55%,var(--Gradient-End,#D6004A));border-color:transparent;color:#fff}
.fbt-btn-join:hover{opacity:.93}
button.fbt-btn{font-family:inherit}

/* header auth links */
.fbt-auth{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
a.fbt-auth-link,a.fbt-auth-link:visited{display:inline-flex;align-items:center;
  padding:8px 12px;border-radius:8px;font:600 14px var(--Font-Sans,Inter),sans-serif;
  color:var(--Text-Body,#AEB6C9);text-decoration:none;
  transition:color .16s ease,background-color .16s ease}
a.fbt-auth-link:hover,a.fbt-auth-link:focus-visible{color:var(--Text-Heading,#F3F5FA);
  background:rgba(255,255,255,.045);text-decoration:none}
a.fbt-auth-name,a.fbt-auth-name:visited{color:var(--Text-Heading,#F3F5FA)}
a.fbt-auth-name::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;
  background:var(--Status-Live,#4ADE80);margin-inline-end:8px;flex:none}
a.fbt-auth-cta,a.fbt-auth-cta:visited{border:1px solid var(--Border-Strong,rgba(255,255,255,.16));
  color:var(--Text-Heading,#F3F5FA)}
a.fbt-auth-cta:hover{background:rgba(255,255,255,.06)}
/* in the mobile drawer the links stack and fill */
.fb-drawer-foot .fbt-auth{display:flex;flex-direction:column;gap:8px;width:100%}
.fb-drawer-foot a.fbt-auth-link{justify-content:center;padding:12px 16px;font-size:15px;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.16))}

/* dashboard layout */
.fbt-dash-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:32px;margin-block-start:22px}
@media(max-width:860px){.fbt-dash-layout{grid-template-columns:1fr;gap:20px}}
.fbt-dash-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:96px;align-self:start}
@media(max-width:860px){.fbt-dash-nav{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-block-end:6px}}
.fbt-dash-nav button{background:none;border:0;text-align:left;cursor:pointer;padding:11px 14px;
  border-radius:9px;font:600 14.5px var(--Font-Sans,Inter),sans-serif;color:var(--Text-Body,#AEB6C9);
  white-space:nowrap;display:flex;align-items:center;gap:10px}
.fbt-dash-nav button:hover{background:rgba(255,255,255,.04);color:var(--Text-Heading,#F3F5FA)}
.fbt-dash-nav button[aria-selected=true]{background:rgba(139,123,255,.12);
  color:var(--Text-Heading,#F3F5FA);box-shadow:inset 3px 0 0 var(--Accent,#8B7BFF)}
@media(max-width:860px){.fbt-dash-nav button[aria-selected=true]{box-shadow:inset 0 -3px 0 var(--Accent,#8B7BFF)}}
.fbt-dash-nav .n{margin-inline-start:auto;font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Muted,#7B849B)}
.fbt-panel{display:none}
.fbt-panel.is-open{display:block}

.fbt-card{background:var(--Surface,#141824);border:1px solid var(--Border,rgba(255,255,255,.085));
  border-radius:16px;padding:22px 24px;margin-block-end:16px}
.fbt-label{font:600 11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:1.3px;
  text-transform:uppercase;color:var(--Text-Muted,#7B849B);margin:0 0 14px}
.fbt-label-danger{color:#F87171}

.fbt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-block-end:18px}
@media(max-width:700px){.fbt-stats{grid-template-columns:repeat(2,1fr)}}
.fbt-stat{background:var(--Surface,#141824);border:1px solid var(--Border,rgba(255,255,255,.085));
  border-radius:13px;padding:16px 18px}
.fbt-stat b{display:block;font:700 24px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Heading,#F3F5FA);letter-spacing:-.02em}
.fbt-stat span{font-size:12.5px;color:var(--Text-Muted,#7B849B)}

.fbt-continue{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:center}
@media(max-width:640px){.fbt-continue{grid-template-columns:1fr}}
.fbt-continue-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  background:var(--Surface-Raised,#1B2030)}
.fbt-continue-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fbt-continue-part{font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.8px;
  text-transform:uppercase;color:var(--Text-Muted,#7B849B);margin:0 0 7px}
.fbt-continue-t{font-size:1.2rem;margin:0 0 8px;color:var(--Text-Heading,#F3F5FA);font-weight:800}
.fbt-continue-d{font-size:14.5px;margin:0}

.fbt-row{display:flex;align-items:center;gap:14px;padding:13px 0;
  border-block-start:1px solid var(--Border,rgba(255,255,255,.085));font-size:14.5px}
.fbt-row:first-of-type{border-block-start:0}
.fbt-row-ic{width:36px;height:36px;border-radius:10px;background:var(--Surface-Raised,#1B2030);
  display:grid;place-items:center;flex:none;color:var(--Accent,#8B7BFF)}
.fbt-row-sub{font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Muted,#7B849B);letter-spacing:.5px;text-transform:uppercase;margin-block-start:3px}
.fbt-row-go{margin-inline-start:auto;flex:none;margin-block-start:0}

.fbt-prompt-search{width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.16));background:var(--Canvas,#0B0D14);
  color:var(--Text-Heading,#F3F5FA);font:15px inherit;margin-block-end:16px}
.fbt-prompt-search:focus{outline:0;border-color:var(--Accent,#8B7BFF);box-shadow:0 0 0 3px rgba(139,123,255,.18)}
.fbt-prompt-from{font:10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.7px;
  text-transform:uppercase;color:var(--Text-Muted,#7B849B);opacity:.8}
.fbt-prompt-empty{color:var(--Text-Muted,#7B849B);font-size:14px}

.fbt-danger{border-color:rgba(248,113,113,.28)}
.fbt-btn-danger{border-color:rgba(248,113,113,.4);color:#F87171;background:transparent}
.fbt-btn-danger:hover{background:rgba(248,113,113,.08);color:#F87171}

/* library */
.fbl-form{display:grid;grid-template-columns:248px minmax(0,1fr);gap:36px;align-items:start}
@media(max-width:900px){.fbl-form{grid-template-columns:1fr;gap:20px}}
.fbl-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:96px;align-self:start}
@media(max-width:900px){.fbl-side{display:none;position:static}.fbl-side.is-open{display:flex}}
.fbl-group h4{font:600 11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:1.3px;
  text-transform:uppercase;color:var(--Text-Muted,#7B849B);margin:0 0 11px}
.fbl-opt{display:flex;align-items:flex-start;gap:11px;padding:8px 0;font-size:14.5px;
  line-height:1.45;cursor:pointer;color:var(--Text-Body,#AEB6C9)}
.fbl-opt:hover{color:var(--Text-Heading,#F3F5FA)}
.fbl-opt > span:first-of-type{flex:1;min-inline-size:0}
/* The theme reset paints an unchecked box white, and accent-color only affects
   the checked fill. Draw the control instead of fighting it. */
.fbl-opt input[type=checkbox],
.fbl-side input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  inline-size:17px;block-size:17px;flex:none;margin:1px 0 0;padding:0;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.28));border-radius:5px;
  background:var(--Canvas,#0B0D14);cursor:pointer;position:relative;
  transition:background-color .14s ease,border-color .14s ease}
.fbl-opt input[type=checkbox]:hover{border-color:var(--Accent,#8B7BFF)}
.fbl-opt input[type=checkbox]:checked{background:var(--Accent,#8B7BFF);border-color:var(--Accent,#8B7BFF)}
.fbl-opt input[type=checkbox]:checked::after{
  content:"";position:absolute;inset-block-start:2px;inset-inline-start:5px;
  inline-size:4px;block-size:8px;border:solid #0B0D14;border-width:0 2px 2px 0;
  transform:rotate(43deg)}
.fbl-opt input[type=checkbox]:focus-visible{outline:0;
  box-shadow:0 0 0 3px rgba(139,123,255,.22)}
.fbl-c{margin-inline-start:auto;font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Muted,#7B849B)}
.fbl-seg{display:flex;background:var(--Surface,#141824);
  border:1px solid var(--Border,rgba(255,255,255,.085));border-radius:9px;padding:3px;gap:2px}
.fbl-seg-opt{flex:1 1 0;text-align:center;padding:8px 4px;border-radius:7px;cursor:pointer;
  font:600 13px inherit;color:var(--Text-Body,#AEB6C9);white-space:nowrap;
  transition:background-color .14s ease,color .14s ease}
.fbl-seg-opt:hover{color:var(--Text-Heading,#F3F5FA)}
.fbl-seg-opt.is-on{background:rgba(139,123,255,.16);color:var(--Text-Heading,#F3F5FA)}
.fbl-seg-opt input{position:absolute;opacity:0;pointer-events:none}
.fbl-clear{background:none;border:0;color:var(--Text-Muted,#7B849B);font:600 13px inherit;
  cursor:pointer;padding:0;text-align:left;text-decoration:none}
.fbl-clear:hover{color:var(--Text-Heading,#F3F5FA)}

.fbl-bar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-block-end:18px}
@media(max-width:700px){.fbl-bar{flex-wrap:wrap}}
.fbl-bar .fbl-sort,.fbl-bar .fbt-btn{flex:0 0 auto;inline-size:auto}
.fbl-search{flex:1 1 auto;min-inline-size:0;padding:11px 14px;border-radius:10px;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.16));background:var(--Canvas,#0B0D14);
  color:var(--Text-Heading,#F3F5FA);font:15px inherit}
.fbl-search:focus{outline:0;border-color:var(--Accent,#8B7BFF);box-shadow:0 0 0 3px rgba(139,123,255,.18)}
.fbl-sort{padding:11px 12px;border-radius:10px;border:1px solid var(--Border-Strong,rgba(255,255,255,.16));
  background:var(--Canvas,#0B0D14);color:var(--Text-Heading,#F3F5FA);font:14px inherit}
.fbl-bar .fbt-btn{margin-block-start:0}
.fbl-toggle{display:none}
@media(max-width:900px){.fbl-toggle{display:inline-flex}}
.fbl-count{font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.9px;
  text-transform:uppercase;color:var(--Text-Muted,#7B849B);margin:0 0 16px}

.fbl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:1050px){.fbl-grid{grid-template-columns:1fr}}
.fbl-card{background:var(--Surface,#141824);border:1px solid var(--Border,rgba(255,255,255,.085));
  border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.fbl-card.is-course{border-color:rgba(139,123,255,.30)}
.fbl-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:var(--Surface-Raised,#1B2030)}
.fbl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fbl-badge{position:absolute;inset-block-start:11px;inset-inline-start:11px;
  font:600 10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:1.1px;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(11,13,20,.82)}
.fbl-badge.is-course{color:var(--Accent,#8B7BFF);border:1px solid rgba(139,123,255,.4)}
.fbl-badge.is-free{color:var(--Status-Live,#4ADE80);border:1px solid rgba(74,222,128,.34)}
.fbl-badge.is-lock{color:var(--Status-Dev,#E3A73C);border:1px solid rgba(227,167,60,.4)}
.fbl-body{padding:18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.fbl-cat{font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.9px;
  text-transform:uppercase;color:var(--Accent,#8B7BFF);margin:0}
.fbl-title{font-size:1.08rem;margin:0}
.fbl-title a{color:var(--Text-Heading,#F3F5FA);text-decoration:none}
.fbl-title a:hover{text-decoration:underline}
.fbl-tags{display:flex;gap:6px;flex-wrap:wrap}
.fbl-progress-label{font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:.7px;text-transform:uppercase;color:var(--Text-Muted,#7B849B);margin:2px 0 0}
.fbl-foot{margin-block-start:auto;padding-block-start:6px;margin-bottom:0}
.fbl-foot .fbt-btn{margin-block-start:0}


/* =========================================================================
   PLAYER — a full-bleed study screen, not a page inside the site container.
   The bar spans the viewport, the video fills the left column edge to edge,
   and the curriculum is a full-height panel that scrolls on its own.
   ========================================================================= */

/* Break out of the theme's boxed container on these two post types. */
.single-fb_tutorial .fb-section,
.single-fb_course .fb-section{padding-block:0}
.single-fb_tutorial .fb-wrap,
.single-fb_course .fb-wrap{max-width:none;padding-inline:0;width:100%}

.fbp{width:100%}
.fbp-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  min-block-size:62px;padding:10px 22px;background:var(--Canvas-Alt,#0E111A);
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085));margin:0}
.fbp-crumb-label{display:block;font:10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:1.4px;text-transform:uppercase;color:var(--Text-Muted,#7B849B);margin-block-end:3px}
.fbp-crumb a{color:var(--Text-Heading,#F3F5FA);font-weight:700;font-size:15px;text-decoration:none}
.fbp-crumb a:hover{text-decoration:underline}
.fbp-prog{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.fbp-prog-text{font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.9px;
  text-transform:uppercase;color:var(--Text-Muted,#7B849B)}
.fbp-ring{inline-size:38px;block-size:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--Accent,#8B7BFF) calc(var(--pct) * 1%), rgba(255,255,255,.10) 0)}
.fbp-ring i{inline-size:29px;block-size:29px;border-radius:50%;background:var(--Canvas-Alt,#0E111A);
  display:grid;place-items:center;font:600 10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Heading,#F3F5FA);font-style:normal}

.fbp-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:stretch;min-block-size:60vh}
@media(max-width:1080px){.fbp-layout{grid-template-columns:1fr}}
.fbp-main{min-inline-size:0}
/* the video sits flush against the top and edges, like a player should */
.fbp-main .fbt-watch{border:0;border-radius:0;margin:0;background:var(--Surface-Raised,#1B2030)}
.fbp-main .fbt-watch-thumb{aspect-ratio:16/9;border-radius:0}
.fbp-main .fbt-watch-bar{padding:14px 26px;flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px;
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085))}
.fbp-main .fbt-watch-bar .fbt-watch-actions{margin-inline-start:auto}
.fbp-main .fbt-watch-note{font-size:13.5px;max-width:56ch}
.fbp-pad{padding:24px 26px 60px}
@media(max-width:700px){.fbp-pad{padding:20px 18px 50px}}

.fbp .fbp-h1,.fbp h1.fbp-h1{font-size:clamp(1.4rem,2vw,1.85rem);line-height:1.22;
  margin:0 0 6px;letter-spacing:-.024em}
.fbp .fbt-h2{font-size:1.2rem}
.fbp .fbt-step-t{font-size:1rem}
.fbp .fbt-lede{font-size:1rem}

.fbp-hero{background:var(--Surface,#141824);
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085))}
.fbp-hero-img{aspect-ratio:16/9;overflow:hidden;max-block-size:52vh}
.fbp-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.fbp-hero-b{padding:24px 26px}
.fbp-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.fbp-actions .fbt-btn{margin-block-start:0}

.fbp-tabs{display:flex;gap:2px;overflow-x:auto;margin:22px 0 0;
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085))}
.fbp-tabs button{background:none;border:0;cursor:pointer;padding:12px 16px;position:relative;
  white-space:nowrap;font:600 14.5px inherit;color:var(--Text-Muted,#7B849B)}
.fbp-tabs button:hover{color:var(--Text-Body,#AEB6C9)}
.fbp-tabs button[aria-selected=true]{color:var(--Text-Heading,#F3F5FA)}
.fbp-tabs button[aria-selected=true]::after{content:"";position:absolute;inset-inline:12px;
  inset-block-end:-1px;block-size:2px;border-radius:2px;
  background:linear-gradient(120deg,var(--Accent-Deep,#6C5CE7),var(--Gradient-End,#D6004A))}
.fbp-tabs .n{display:inline-block;margin-inline-start:7px;
  font:600 10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);padding:2px 6px;
  border-radius:5px;background:rgba(255,255,255,.07);color:var(--Text-Muted,#7B849B)}
.fbp-tab{display:none}
.fbp-tab.is-open{display:block}

/* sidebar as a flush, independently scrolling panel */
.fbp-side{background:var(--Canvas-Alt,#0E111A);
  border-inline-start:1px solid var(--Border,rgba(255,255,255,.085));
  position:sticky;top:62px;max-block-size:calc(100vh - 62px);display:flex;flex-direction:column}
@media(max-width:1080px){.fbp-side{position:static;max-block-size:none;
  border-inline-start:0;border-block-start:1px solid var(--Border,rgba(255,255,255,.085))}}
.fbp-side .fbt-curriculum{margin:0;border:0;border-radius:0;background:transparent;
  display:flex;flex-direction:column;min-block-size:0;flex:1}
.fbt-curriculum-scroll{overflow-y:auto;flex:1;min-block-size:0}
.fbt-curriculum-h{position:sticky;top:0;background:var(--Canvas-Alt,#0E111A);z-index:2}

/* lesson rows with a real checkbox, as drawn */
.fbt-lesson{display:flex;gap:11px;padding:13px 18px;text-decoration:none;align-items:flex-start;
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085))}
.fbt-lesson:hover{background:rgba(255,255,255,.03)}
.fbt-lesson.is-current{background:rgba(139,123,255,.10);
  box-shadow:inset 3px 0 0 var(--Accent,#8B7BFF)}
.fbt-lesson-box{inline-size:17px;block-size:17px;border-radius:5px;flex:none;margin-block-start:2px;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.24));display:grid;place-items:center;
  font-size:11px;line-height:1;color:transparent}
.fbt-lesson.is-done .fbt-lesson-box{background:var(--Status-Live,#4ADE80);
  border-color:var(--Status-Live,#4ADE80);color:#0B0D14}
.fbt-lesson-b{display:flex;flex-direction:column;gap:5px;min-inline-size:0}
.fbt-lesson-t{font-size:14px;color:var(--Text-Body,#AEB6C9)}
.fbt-lesson.is-current .fbt-lesson-t{color:var(--Text-Heading,#F3F5FA);font-weight:600}
.fbt-lesson.is-done .fbt-lesson-t{color:var(--Text-Muted,#7B849B)}

.fbp-side .fbt-lesson-nav{display:flex;gap:10px;padding:16px 18px;margin:0;
  border-block-start:1px solid var(--Border,rgba(255,255,255,.085));
  background:var(--Canvas-Alt,#0E111A)}
.fbp-side .fbt-lesson-nav .fbt-btn{flex:1;margin-block-start:0}

/* ---- player, matched to the design ---- */
.fbp-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:14px;margin-block-end:26px;
  background:rgba(11,13,20,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-block-end:1px solid var(--Border,rgba(255,255,255,.085))}
body.admin-bar .fbp-top{top:32px}
.fbp-mark{display:flex;align-items:center;flex:none}
.fbp-mark img{inline-size:34px;block-size:34px;border-radius:50%;
  object-fit:cover;display:block}
.fbp-position{font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.9px;
  text-transform:uppercase;color:var(--Accent,#8B7BFF);margin:0 0 6px}

.fbt-curriculum-scroll{max-block-size:min(58vh,620px);overflow-y:auto}
@media(max-width:1000px){.fbt-curriculum-scroll{max-block-size:none}}
.fbt-curriculum-nav{display:flex;gap:10px;padding:14px 16px;
  border-block-start:1px solid var(--Border,rgba(255,255,255,.085))}
.fbt-curriculum-nav .fbt-btn{flex:1;margin-block-start:0;justify-content:center;padding:10px 12px;
  font-size:13.5px}

/* tick box replaces the lesson number */
.fbt-tick{inline-size:18px;block-size:18px;border-radius:5px;flex:none;margin-block-start:2px;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.24));background:var(--Canvas,#0B0D14);
  display:grid;place-items:center;font-size:11px;color:var(--Canvas,#0B0D14);line-height:1}
.fbt-lesson.is-done .fbt-tick{background:var(--Status-Live,#4ADE80);border-color:var(--Status-Live,#4ADE80)}
.fbt-lesson.is-current .fbt-tick{border-color:var(--Accent,#8B7BFF)}
.fbt-lesson.is-done .fbt-lesson-t{color:var(--Text-Muted,#7B849B)}
.fbt-part-s{text-transform:none;letter-spacing:.3px}

/* ===========================================================================
   Immersive player. A lesson is a room, not a page: the theme chrome steps
   aside and the player fills the window.
   =========================================================================== */
body.fb-player .elementor-location-header,
body.fb-player .elementor-location-footer{display:none}
body.fb-player .fb-section{padding-block:0}
body.fb-player .fb-wrap{max-inline-size:none;padding-inline:0}

.fbp{inline-size:100%}
body.fb-player .fbp{min-block-size:100vh;display:flex;flex-direction:column}
body.admin-bar.fb-player .fbp{min-block-size:calc(100vh - 32px)}

body.fb-player .fbp-top{margin-block-end:0;padding-inline:22px;
  background:var(--Canvas-Alt,#0E111A);backdrop-filter:none}
.fbp-back{display:inline-flex;align-items:center;gap:8px;flex:none;
  font:600 13.5px var(--Font-Sans,Inter),sans-serif;color:var(--Text-Body,#AEB6C9);
  text-decoration:none;padding:8px 12px;border-radius:8px}
.fbp-back:hover{background:rgba(255,255,255,.05);color:var(--Text-Heading,#F3F5FA)}

body.fb-player .fbp-layout{grid-template-columns:minmax(0,1fr) 6px var(--fbp-panel,380px);gap:0;flex:1;align-items:stretch}
@media(max-width:1100px){body.fb-player .fbp-layout{grid-template-columns:1fr}}
body.fb-player .fbp-main{padding:0 26px 60px;min-inline-size:0}
body.fb-player .fbp-side{align-self:stretch;
  border-inline-start:1px solid var(--Border,rgba(255,255,255,.10));
  background:var(--Canvas-Alt,#161A26);padding:0}
@media(max-width:1100px){body.fb-player .fbp-side{border-inline-start:0;
  border-block-start:1px solid var(--Border,rgba(255,255,255,.085))}}
body.fb-player .fbp-side .fbt-curriculum{border:0;border-radius:0;background:transparent;margin:0}

/* the video itself */
.fbp-video{position:relative;aspect-ratio:16/9;inline-size:100%;background:#000;
  overflow:hidden;border-radius:0}
body:not(.fb-player) .fbp-video{border-radius:14px}
.fbp-video iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}
/* The video fills the column edge to edge. Nothing caps its width, so on a
   short window the title sits just below the fold — that is the trade for a
   full-width picture, and it was chosen deliberately. */
body.fb-player .fbp-pad{max-inline-size:none;margin-inline:0;inline-size:100%;
  padding-block-start:0}
body.fb-player .fbp-main .fbp-video{inline-size:100%;aspect-ratio:16/9;
  block-size:auto;border-radius:0;margin-inline:0}
.fbp-video-cover{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;opacity:.28}
.fbp-lock{position:relative;z-index:2;block-size:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:26px;
  background:radial-gradient(ellipse 70% 90% at 50% 50%,rgba(11,13,20,.72),rgba(11,13,20,.94))}
.fbp-lock-note{max-inline-size:46ch;font-size:14.5px;color:var(--Text-Body,#AEB6C9);margin:0}
.fbp-lock-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:4px 0 0}
.fbp-lock-actions .fbt-btn{margin-block-start:0}

body.fb-player .fbt-curriculum-scroll{max-block-size:none}
/* The panel sticks below the bar and fills the rest of the window, so its
   background never stops short as the lesson scrolls past it. The height and
   the sticky offset have to agree, or it comes up short by exactly the
   difference. */
@media(min-width:1101px){
  body.fb-player{--fbp-bar:64px}
  body.admin-bar.fb-player{--fbp-bar:96px}
  body.fb-player .fbp-side{position:sticky;inset-block-start:var(--fbp-bar);
    block-size:calc(100vh - var(--fbp-bar));display:flex;flex-direction:column;overflow:hidden}
  body.fb-player .fbp-side .fbn{block-size:100%}
  body.fb-player .fbp-side .fbt-curriculum{display:flex;flex-direction:column;block-size:100%}
  body.fb-player .fbt-curriculum-scroll{flex:1;overflow-y:auto}
}

/* curriculum toggle */
.fbp-side-toggle{display:inline-flex;align-items:center;gap:9px;flex:none;cursor:pointer;
  background:none;border:1px solid var(--Border-Strong,rgba(255,255,255,.19));
  color:var(--Text-Body,#AEB6C9);border-radius:9px;padding:8px 13px;
  font:600 13.5px var(--Font-Sans,Inter),sans-serif;margin-inline-start:auto}
.fbp-side-toggle:hover{color:var(--Text-Heading,#F3F5FA);background:rgba(255,255,255,.05)}
.fbp-side-toggle-i{inline-size:15px;block-size:12px;flex:none;position:relative}
.fbp-side-toggle-i::before,.fbp-side-toggle-i::after{content:"";position:absolute;
  inset-block:0;border-radius:2px;background:currentColor}
.fbp-side-toggle-i::before{inset-inline-start:0;inline-size:8px;opacity:.5}
.fbp-side-toggle-i::after{inset-inline-end:0;inline-size:5px}
.fbp-side-toggle[aria-pressed=true] .fbp-side-toggle-i::after{opacity:.35}
.fbp-prog{margin-inline-start:14px}

body.fb-side-hidden .fbp-side{display:none}
@media(min-width:1101px){
  body.fb-player.fb-side-hidden .fbp-layout{grid-template-columns:minmax(0,1fr)}
  body.fb-player.fb-side-hidden .fbp-grip{display:none}
  body.fb-player.fb-side-hidden .fbp-main{max-inline-size:none;margin-inline:0}
}

/* the left column when the template owns the layout */
.fbp-col{display:flex;flex-direction:column;min-inline-size:0}
.fbp-col .fbp-video{margin-block-end:0}
.fbp-col .fbp-h1{margin-block-start:20px}


/* The video spans the column edge to edge; the text below keeps its padding. */
body.fb-player .fbp-main{padding:0}
body.fb-player .fbp-video{margin-block-end:0}
/* The video spans the column; everything under it keeps a gutter. */
body.fb-player .fbp-pad{padding:0 30px 70px}
@media(max-width:700px){body.fb-player .fbp-pad{padding:0 18px 50px}}

/* ---- study panel ---- */
.fbn{display:flex;flex-direction:column;block-size:100%;min-block-size:0}
.fbn-tabs{display:flex;padding-inline:6px;flex:none;
  border-block-end:1px solid var(--Border,rgba(255,255,255,.10))}
.fbn-tabs button{flex:1;background:none;border:0;cursor:pointer;padding:13px 4px;position:relative;
  font:600 12.5px var(--Font-Sans,Inter),sans-serif;color:var(--Text-Muted,#8A93A8)}
.fbn-tabs button:hover{color:var(--Text-Body,#B7BECF)}
.fbn-tabs button[aria-selected=true]{color:var(--Text-Heading,#F3F5FA)}
.fbn-tabs button[aria-selected=true]::after{content:"";position:absolute;inset-inline:10px;
  inset-block-end:-1px;block-size:2px;border-radius:2px;
  background:linear-gradient(120deg,var(--Accent-Deep,#6C5CE7),var(--Gradient-End,#D6004A))}
.fbn-tabs .n{display:block;font:9.5px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Muted,#8A93A8);margin-block-start:3px}
.fbn-body{flex:1;overflow-y:auto;min-block-size:0}
.fbn-pane{display:none}
.fbn-pane.is-open{display:block}
.fbn-pane .fbt-curriculum{border:0;border-radius:0;background:transparent;margin:0}

.fbn-group{margin:0;padding:12px 16px;background:var(--Surface,#1C2130);
  border-block-end:1px solid var(--Border,rgba(255,255,255,.10));
  font:9.5px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:1.3px;
  text-transform:uppercase;color:var(--Text-Muted,#8A93A8)}
.fbn-row{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-block-end:1px solid var(--Border,rgba(255,255,255,.10))}
.fbn-ic{inline-size:34px;block-size:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--Surface-Raised,#242A3B);color:var(--Accent,#8B7BFF)}
.fbn-rb{min-inline-size:0}
.fbn-t{display:block;font-size:13.5px;color:var(--Text-Heading,#F3F5FA);
  overflow-wrap:anywhere}
.fbn-s{display:block;font:9.5px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:.5px;text-transform:uppercase;color:var(--Text-Muted,#8A93A8);margin-block-start:3px}
.fbn-go{margin-inline-start:auto;flex:none;margin-block-start:0;padding:8px 13px;font-size:12.5px}
.fbn-empty{padding:18px 16px;font-size:14px;color:var(--Text-Muted,#8A93A8);margin:0}
.fbn-cta{padding:0 16px 18px;margin:0}
.fbn-prompt{border:0;border-radius:0;margin:0;
  border-block-end:1px solid var(--Border,rgba(255,255,255,.10))}
.fbn-prompt .fbt-prompt-h{background:transparent;padding:11px 16px}
.fbn-prompt pre{padding:0 16px 14px;font-size:11.5px}

.fbn-notes{padding:16px}
.fbn-notes textarea{inline-size:100%;min-block-size:190px;padding:12px 13px;border-radius:10px;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.19));background:var(--Canvas,#10131C);
  color:var(--Text-Heading,#F3F5FA);font:13.5px/1.6 inherit;resize:vertical}
.fbn-notes textarea:focus{outline:0;border-color:var(--Accent,#8B7BFF);
  box-shadow:0 0 0 3px rgba(139,123,255,.18)}
.fbn-notes-r{display:flex;align-items:center;gap:11px;margin-block-start:11px}
.fbn-notes-r .fbt-btn{margin-block-start:0}
.fbn-saved{font:9.5px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.6px;
  text-transform:uppercase;color:var(--Status-Live,#4ADE80)}
.fbn-priv{font-size:12.5px;color:var(--Text-Muted,#8A93A8);margin-block-start:12px}

/* ---- under the video ---- */
.fbp-head{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;
  padding:20px 0 18px;border-block-end:1px solid var(--Border,rgba(255,255,255,.10))}
.fbp-head-l{flex:1;min-inline-size:0}
.fbp-head-l .fbp-h1{margin:7px 0 6px}
.fbp-head-acts{display:flex;gap:9px;align-items:center;flex:none;flex-wrap:wrap}
.fbp-head-acts .fbt-btn{margin-block-start:0;white-space:nowrap}
.fbp-btn-icon{padding-inline:13px}
.fbp-btn-done{color:var(--Status-Live,#4ADE80);border-color:rgba(74,222,128,.42);
  background:rgba(74,222,128,.08)}
.fbp-done-form{margin:0}

.fbp-sec{padding-block:24px}
.fbp-sec-h{font:600 10px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:1.4px;
  text-transform:uppercase;color:var(--Text-Muted,#8A93A8);margin:0 0 16px}

.fbp-step{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-block:15px;
  border-block-start:1px solid var(--Border,rgba(255,255,255,.10))}
.fbp-step:first-of-type{border-block-start:0}
.fbp-ts{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;flex:none;
  font:600 11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);color:var(--Cyan,#46D8F5);
  border:1px solid rgba(70,216,245,.32);background:rgba(70,216,245,.08);
  padding:5px 10px;border-radius:999px;cursor:pointer}
.fbp-ts:hover{background:rgba(70,216,245,.18)}
.fbp-ts.is-static{cursor:default}
.fbp-ts.is-blank{border:0;background:none;inline-size:52px;padding:0}
.fbp-step-t{font-size:1rem;margin:0 0 5px;color:var(--Text-Heading,#F3F5FA);font-weight:700}
.fbp-step-d{font-size:14px;margin:0}

.fbp-about{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
@media(max-width:820px){.fbp-about{grid-template-columns:1fr}}
.fbp-about-l p{font-size:14.5px}
.fbp-setup-card{margin:0}
.fbp-setup-card .fbt-setup{grid-template-columns:1fr}

.fbp-empty{padding:26px 22px;border:1px dashed var(--Border-Strong,rgba(255,255,255,.19));
  border-radius:12px;text-align:center;color:var(--Text-Muted,#8A93A8);font-size:14px}
.fbp-empty p{margin:0 0 6px}
.fbp-empty p:last-child{margin:0}

.fbp-nav{display:flex;gap:12px;justify-content:space-between;padding-block-start:22px;
  border-block-start:1px solid var(--Border,rgba(255,255,255,.10))}
.fbp-nav-a{display:block;flex:1;max-inline-size:340px;padding:12px 15px;border-radius:10px;
  border:1px solid var(--Border-Strong,rgba(255,255,255,.19));color:var(--Text-Heading,#F3F5FA);
  text-decoration:none;font-weight:650;font-size:14px}
.fbp-nav-a:hover{background:rgba(255,255,255,.05);text-decoration:none}
.fbp-nav-a.is-next{background:linear-gradient(120deg,var(--Accent-Deep,#6C5CE7),
  var(--Gradient-Mid,#A33BC9) 55%,var(--Gradient-End,#D6004A));border-color:transparent;
  color:#fff;text-align:right;margin-inline-start:auto}
.fbp-nav-n{display:block;font:9.5px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  letter-spacing:.8px;text-transform:uppercase;color:var(--Text-Muted,#8A93A8);margin-block-end:3px}
.fbp-nav-a.is-next .fbp-nav-n{color:rgba(255,255,255,.72)}

/* Previous / next cards are anchors, so the theme's global link-hover colour
   outranks a single class. Match it, as with the buttons. */
a.fbp-nav-a,
a.fbp-nav-a:visited,
a.fbp-nav-a:hover,
a.fbp-nav-a:focus-visible{color:var(--Text-Heading,#F3F5FA);text-decoration:none}
a.fbp-nav-a.is-next,
a.fbp-nav-a.is-next:visited,
a.fbp-nav-a.is-next:hover,
a.fbp-nav-a.is-next:focus-visible{color:#fff}
a.fbp-nav-a.is-next:hover{opacity:.94}
a.fbp-nav-a:hover .fbp-nav-n{color:var(--Text-Muted,#8A93A8)}
a.fbp-nav-a.is-next:hover .fbp-nav-n{color:rgba(255,255,255,.72)}
/* the back link in the bar is an anchor too */
a.fbp-back,a.fbp-back:visited{color:var(--Text-Body,#B7BECF)}
a.fbp-back:hover,a.fbp-back:focus-visible{color:var(--Text-Heading,#F3F5FA);text-decoration:none}
a.fbp-crumb-link,.fbp-crumb a,.fbp-crumb a:visited{color:var(--Text-Heading,#F3F5FA)}

/* ---- what you need ---- */
.fbs-d{border:1px solid var(--Border,rgba(255,255,255,.10));border-radius:14px;
  background:var(--Surface,#1C2130);padding:18px 20px}
.fbs-sum{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none}
.fbs-sum::-webkit-details-marker{display:none}
.fbs-sum .fbp-sec-h{margin:0}
.fbs-sum::after{content:"";inline-size:8px;block-size:8px;margin-inline-start:auto;flex:none;
  border-inline-end:2px solid var(--Text-Muted,#8A93A8);
  border-block-end:2px solid var(--Text-Muted,#8A93A8);
  transform:rotate(45deg);transition:transform .18s ease}
.fbs-d[open] .fbs-sum::after{transform:rotate(-135deg)}
.fbs-count{font:9.5px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.8px;
  text-transform:uppercase;color:var(--Text-Muted,#8A93A8)}
.fbs-intro{margin:16px 0 0;font-size:14.5px;max-inline-size:70ch}
.fbs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;
  margin-block-start:18px}
.fbs-tool{background:var(--Canvas-Alt,#161A26);border:1px solid var(--Border,rgba(255,255,255,.10));
  border-radius:12px;padding:16px 17px;display:flex;flex-direction:column;gap:8px}
.fbs-tool-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.fbs-name{font-weight:700;font-size:15px;color:var(--Text-Heading,#F3F5FA)}
.fbs-ver{font:9.5px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.6px;
  text-transform:uppercase;color:var(--Accent,#8B7BFF);border:1px solid rgba(139,123,255,.32);
  background:rgba(139,123,255,.10);padding:2px 7px;border-radius:999px}
.fbs-purpose{font-size:14px;margin:0}
.fbs-notes{font-size:13px;margin:0;color:var(--Text-Muted,#8A93A8);
  padding-block-start:8px;border-block-start:1px solid var(--Border,rgba(255,255,255,.10))}
.fbs-go{margin:auto 0 0;padding-block-start:6px}
.fbs-go .fbt-btn{margin-block-start:0;padding:8px 14px;font-size:13px}


/* The player bar stays above the panel while both are stuck. */
body.fb-player .fbp-top{position:sticky;inset-block-start:0;z-index:60}
body.admin-bar.fb-player .fbp-top{inset-block-start:32px}
body.fb-player .fbp-side{z-index:50}

/* ---- code snippets in the panel ---- */
.fbn-code{border-block-end:1px solid var(--Border,rgba(255,255,255,.10))}
.fbn-code-h{display:flex;align-items:center;gap:9px;padding:11px 16px;flex-wrap:wrap}
.fbn-file{font:11px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Heading,#F3F5FA);overflow-wrap:anywhere}
.fbn-lang{font:9px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.9px;
  text-transform:uppercase;padding:2px 7px;border-radius:4px;color:var(--Cyan,#46D8F5);
  border:1px solid rgba(70,216,245,.3);background:rgba(70,216,245,.08)}
.fbn-code-acts{margin-inline-start:auto;display:flex;gap:6px}
.fbn-code-acts .fbt-btn{margin-block-start:0;padding:6px 11px;font-size:11.5px}
.fbn-dl{padding-inline:10px}
.fbn-code-note{margin:0;padding:0 16px 10px;font-size:12.5px;color:var(--Text-Body,#B7BECF)}
.fbn-code-from{margin:0;padding:0 16px 10px;
  font:9.5px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.6px;
  text-transform:uppercase;color:var(--Text-Muted,#8A93A8)}
.fbn-code pre{margin:0;padding:0 16px 14px;overflow-x:auto;max-block-size:320px;overflow-y:auto;
  font:11.5px/1.65 var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Body,#B7BECF);white-space:pre}
.fbn-code code{font:inherit;color:inherit;background:none;padding:0}
.fbc-tag{color:var(--Accent,#8B7BFF)}
.fbc-att{color:var(--Cyan,#46D8F5)}
.fbc-str{color:var(--Status-Live,#4ADE80)}
.fbc-com{color:var(--Text-Muted,#8A93A8);font-style:italic}

/* Drag the snippet taller in place. */
.fbn-code pre{resize:vertical;min-block-size:120px}

/* Full size view */
body.fb-code-open{overflow:hidden}
.fbz{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  padding:clamp(14px,4vh,46px) clamp(14px,5vw,70px);
  background:rgba(8,10,16,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fbz-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap;flex:none;
  background:var(--Surface,#1C2130);border:1px solid var(--Border,rgba(255,255,255,.10));
  border-block-end:0;border-start-start-radius:14px;border-start-end-radius:14px;padding:14px 18px}
.fbz-file{font:13px var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Heading,#F3F5FA);overflow-wrap:anywhere}
.fbz-acts{margin-inline-start:auto;display:flex;gap:8px}
.fbz-acts .fbt-btn{margin-block-start:0;padding:8px 14px;font-size:13px}
.fbz-x{padding-inline:12px}
.fbz-note{margin:0;flex:none;padding:0 18px 12px;font-size:13.5px;
  background:var(--Surface,#1C2130);border-inline:1px solid var(--Border,rgba(255,255,255,.10));
  color:var(--Text-Body,#B7BECF)}
.fbz-b{flex:1;min-block-size:0;overflow:auto;
  background:var(--Canvas-Alt,#161A26);border:1px solid var(--Border,rgba(255,255,255,.10));
  border-end-start-radius:14px;border-end-end-radius:14px}
.fbz-b pre{margin:0;padding:20px 22px;white-space:pre;resize:none;
  font:13px/1.75 var(--Font-Mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--Text-Body,#B7BECF)}
.fbz-b pre.is-wrapped{white-space:pre-wrap;overflow-wrap:anywhere}
.fbz-b code{font:inherit;color:inherit;background:none;padding:0}

/* ---- the divider ---- */
.fbp-grip{display:none}
@media(min-width:1101px){
  body.fb-player .fbp-grip{display:block;position:relative;cursor:col-resize;
    background:var(--Border,rgba(255,255,255,.10));touch-action:none;
    transition:background-color .14s ease}
  body.fb-player .fbp-grip:hover,
  body.fb-player .fbp-grip.is-dragging,
  body.fb-player .fbp-grip:focus-visible{background:var(--Accent,#8B7BFF);outline:0}
  body.fb-player .fbp-grip::after{content:"";position:absolute;inset-block-start:50%;
    inset-inline-start:50%;transform:translate(-50%,-50%);inline-size:2px;block-size:38px;
    border-radius:2px;background:rgba(255,255,255,.30)}
  body.fb-player .fbp-grip:hover::after,
  body.fb-player .fbp-grip.is-dragging::after,
  body.fb-player .fbp-grip:focus-visible::after{background:#fff}
  /* Widen the grab area without widening the line. */
  body.fb-player .fbp-grip::before{content:"";position:absolute;inset-block:0;
    inset-inline:-5px;cursor:col-resize}
}
/* Stop the page selecting text and the iframe swallowing the pointer mid-drag. */
body.fb-resizing{user-select:none;cursor:col-resize}
body.fb-resizing iframe{pointer-events:none}