/* ----------------------------------------------------------------------
 * FB Account Skin — the member panel as a full-screen app.
 *
 * Scoped to body.fbas-full throughout, so every other page is untouched.
 * -------------------------------------------------------------------- */

body.fbas-full {
	--fbas-canvas: #0b0d14;
	--fbas-card: #12141d;
	--fbas-sunk: #0e1119;
	--fbas-line: #20242f;
	--fbas-soft: #191c26;
	--fbas-ink: #eef0f7;
	--fbas-ink2: #9ba1b5;
	--fbas-ink3: #646a7d;
	--fbas-violet: #6c5ce7;
	--fbas-ok: #28c08a;
	--fbas-grad: linear-gradient(90deg, #6c5ce7 0%, #a33bc9 52%, #d6004a 100%);
	--fbas-rail: 252px;

	overflow: hidden;
	background: var(--fbas-canvas);
}

/* The page chrome goes; the rail replaces it. */
body.fbas-full header.fbh,
body.fbas-full .elementor-location-footer,
body.fbas-full footer.elementor-location-footer { display: none !important; }

/* ----------------------------------------------------------------------
 * Out of flow entirely.
 *
 * The shortcode sits four levels deep inside Elementor containers, each with
 * its own width and padding. Fixed positioning ignores all of them, which is
 * far more robust than trying to unwind whatever the builder emitted.
 * -------------------------------------------------------------------- */
body.fbas-full .fbt-dash {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: grid;
	grid-template-columns: var(--fbas-rail) 1fr;
	grid-template-rows: auto auto 1fr;
	background: var(--fbas-canvas);
	overflow: hidden;
	margin: 0;
	padding: 0;
	color: var(--fbas-ink);
}

/* Sit under our own toolbar rather than beneath it. */
body.fbas-full.admin-bar .fbt-dash { top: 32px; }
@media screen and (max-width: 782px) {
	body.fbas-full.admin-bar .fbt-dash { top: 46px; }
}

/* Let the layout's children join the outer grid. */
body.fbas-full .fbt-dash-layout { display: contents; }

/* ---------- rail ---------- */

body.fbas-full .fbas-rail {
	grid-column: 1;
	grid-row: 1 / 4;
	background: #0d0f17;
	border-right: 1px solid var(--fbas-soft);
	padding: 20px 14px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow-y: auto;
}

body.fbas-full .fbas-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 0; }

body.fbas-full .fbas-mark {
	width: 34px; height: 34px; border-radius: 10px; flex: none;
	display: grid; place-items: center; overflow: hidden;
	font-size: 13px; font-weight: 800; color: #fff;
	background: var(--fbas-grad);
}

body.fbas-full .fbas-mark.has-icon { background: none; }
body.fbas-full .fbas-mark img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }

body.fbas-full .fbas-bt b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; color: var(--fbas-ink); }
body.fbas-full .fbas-bt em { font-style: normal; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fbas-ink3); }

/* fb-tutorials' own nav, restyled in place */
body.fbas-full .fbt-dash-nav {
	display: flex;
	flex-direction: column;
	gap: 1px;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	overflow: visible;
}

body.fbas-full .fbt-dash-nav button {
	display: flex; align-items: center; gap: 11px;
	width: 100%; text-align: left;
	font: inherit; font-size: 13.5px; font-weight: 600;
	color: var(--fbas-ink2); cursor: pointer;
	background: transparent; border: 0; border-radius: 9px;
	padding: 10px 12px; margin: 0;
	text-transform: none; letter-spacing: normal;
}

body.fbas-full .fbt-dash-nav button:hover { color: var(--fbas-ink); background: #14171f; }

body.fbas-full .fbt-dash-nav button svg {
	width: 16px; height: 16px; flex: none;
	stroke: currentColor; fill: none; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round; opacity: 0.85;
}

body.fbas-full .fbas-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.fbas-full .fbt-dash-nav button[aria-selected="true"] {
	color: #fff;
	background: #191d2a;
	box-shadow: inset 2px 0 0 var(--fbas-violet);
}

body.fbas-full .fbt-dash-nav button .n {
	margin-left: auto;
	font-size: 11px;
	color: var(--fbas-ink3);
	font-family: ui-monospace, Menlo, monospace;
	background: none;
	padding: 0;
}

body.fbas-full .fbas-railfoot { margin-top: auto; border-top: 1px solid var(--fbas-soft); padding-top: 14px; }

body.fbas-full .fbas-back {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	font-size: 12.5px; font-weight: 600; color: var(--fbas-ink2);
	background: #14171f; border: 1px solid var(--fbas-line);
	border-radius: 9px; padding: 11px 12px; margin-bottom: 8px; text-decoration: none;
}

body.fbas-full .fbas-back.fbas-go { color: #fff; background: var(--fbas-grad); border: 0; }
body.fbas-full .fbas-back.fbas-go:hover { filter: brightness(1.09); color: #fff; }

body.fbas-full .fbas-back:hover { color: #fff; border-color: #333a4d; }
body.fbas-full .fbas-back svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

body.fbas-full .fbas-links { display: flex; gap: 14px; margin: 10px 2px 0; }
body.fbas-full .fbas-links a { font-size: 11.5px; font-weight: 600; color: var(--fbas-ink3); text-decoration: none; }
body.fbas-full .fbas-links a:hover { color: var(--fbas-violet); }

/* ---------- topbar ---------- */

body.fbas-full .fbas-top {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 34px;
	border-bottom: 1px solid var(--fbas-soft);
	background: rgba(11, 13, 20, 0.88);
	backdrop-filter: blur(10px);
	z-index: 2;
}

body.fbas-full .fbas-top h1 { margin: 0; padding: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--fbas-ink); white-space: nowrap; }

body.fbas-full .fbas-divider { width: 1px; height: 20px; background: var(--fbas-line); flex: none; }

body.fbas-full .fbas-sitemenu { display: flex; gap: 2px; min-width: 0; overflow-x: auto; }
body.fbas-full .fbas-sitemenu a {
	font-size: 13px; font-weight: 600; color: var(--fbas-ink3);
	padding: 7px 11px; border-radius: 8px; white-space: nowrap; text-decoration: none;
}
body.fbas-full .fbas-sitemenu a:hover { color: var(--fbas-ink); background: #14171f; }

/* Below this the strip would squeeze; the rail is one glance away. */
@media (max-width: 1180px) {
	body.fbas-full .fbas-sitemenu,
	body.fbas-full .fbas-divider { display: none; }
}
body.fbas-full .fbas-sp { flex: 1; }
body.fbas-full .fbas-me { display: flex; align-items: center; gap: 9px; }
body.fbas-full .fbas-me > span:last-child { font-size: 12.5px; font-weight: 600; color: var(--fbas-ink2); }

body.fbas-full .fbas-av {
	width: 30px; height: 30px; border-radius: 9px;
	background: var(--fbas-grad);
	display: grid; place-items: center;
	font-weight: 800; font-size: 12px; color: #fff;
}

/* ---------- greeting ---------- */

body.fbas-full .fbt-dash-hello {
	grid-column: 2;
	grid-row: 2;
	margin: 28px 34px 0;
	padding: 22px 24px;
	background: var(--fbas-card);
	border: 1px solid var(--fbas-soft);
	border-radius: 16px;
	position: relative;
	overflow: hidden;
}

body.fbas-full .fbt-dash-hello::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--fbas-grad);
}

/* Orientation, not decoration — it belongs to the overview only. */
body.fbas-full .fbt-dash:not(.fbas-ov) .fbt-dash-hello { display: none; }

/* ---------- panels ---------- */

body.fbas-full .fbt-dash-panels {
	grid-column: 2;
	grid-row: 3;
	overflow-y: auto;
	padding: 26px 34px 80px;
	position: relative;
	isolation: isolate;
}

/* Brand glow behind the content, as in FB Panel. */
body.fbas-full .fbt-dash-panels::before,
body.fbas-full .fbt-dash-panels::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	z-index: -1;
}

body.fbas-full .fbt-dash-panels::before {
	width: 560px; height: 470px; top: -160px; left: 2%;
	background: radial-gradient(closest-side, rgba(108, 92, 231, 0.26), transparent 70%);
}

body.fbas-full .fbt-dash-panels::after {
	width: 470px; height: 420px; top: -100px; right: 4%;
	background: radial-gradient(closest-side, rgba(214, 0, 74, 0.16), transparent 70%);
}

/* Bilgilerim is six fields; full width would strand them in empty space. */
body.fbas-full .fbt-panel[data-panel="details"] { max-width: 620px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	body.fbas-full { overflow: auto; }

	body.fbas-full .fbt-dash {
		position: static;
		display: block;
		min-height: 100vh;
	}

	body.fbas-full .fbt-dash-layout { display: block; }

	body.fbas-full .fbas-rail {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--fbas-soft);
		padding: 12px 14px;
	}

	body.fbas-full .fbas-brand { padding: 0; }
	body.fbas-full .fbas-railfoot { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
	body.fbas-full .fbas-links { display: none; }

	body.fbas-full .fbt-dash-nav { flex-direction: row; gap: 6px; overflow-x: auto; }
	body.fbas-full .fbt-dash-nav button { white-space: nowrap; box-shadow: none; }
	body.fbas-full .fbt-dash-nav button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--fbas-violet); }

	body.fbas-full .fbas-top { padding: 14px 16px; }
	body.fbas-full .fbt-dash-hello { margin: 16px 16px 0; }
	body.fbas-full .fbt-dash-panels { padding: 16px 16px 60px; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
	body.fbas-full * { transition: none !important; }
}

/* ----------------------------------------------------------------------
 * Breathing room for fb-tutorials' own blocks.
 *
 * Its cards and rows were built for a narrower column; at full width the
 * content sat tight against its own edges. A consistent step up rather
 * than a patch on one block, so the rhythm holds across every section.
 * -------------------------------------------------------------------- */

body.fbas-full .fbt-card,
body.fbas-full .fbt-continue,
body.fbas-full .fbt-dash-course {
	padding: 22px 24px;
	border-radius: 16px;
	margin-bottom: 20px;
	background: var(--fbas-card);
	border: 1px solid var(--fbas-soft);
}

body.fbas-full .fbt-row {
	padding: 18px 24px;
	gap: 16px;
	border-radius: 0;
}

body.fbas-full .fbt-stats { gap: 16px; margin-bottom: 22px; }
body.fbas-full .fbt-stat { padding: 20px 24px 18px; border-radius: 16px; }

body.fbas-full .fbt-panel > *:last-child { margin-bottom: 0; }

/* The course block, exactly as it is built: heading, bar, next-up line.
 * The bar ran edge to edge and the three sat tight against each other. */
body.fbas-full .fbt-dash-course-h { margin-bottom: 14px; }
body.fbas-full .fbt-dash-course .fbt-bar { margin: 0 0 14px; }
body.fbas-full .fbt-dash-next { margin: 0; }

body.fbas-full .fbt-prompt { padding: 20px 24px; }
body.fbas-full .fbt-prompt-h { margin-bottom: 12px; }

/* Details is six fields; full width would strand them. */
body.fbas-full .fbt-account-form { max-width: 620px; }
body.fbas-full .fbt-field { margin-bottom: 18px; }

/* ----------------------------------------------------------------------
 * Resizable rail.
 *
 * The handle sits on the grid, not inside the rail. Measured both ways:
 * inside, the rail's overflow clipped it to the wrong position, it was not
 * hittable on the edge, and it moved whenever the rail scrolled.
 * -------------------------------------------------------------------- */

body.fbas-full .fbas-grip {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--fbas-rail) - 5px);
	width: 11px;
	cursor: col-resize;
	z-index: 20;
	background: none;
	border: 0;
	padding: 0;
}

body.fbas-full .fbas-grip::before {
	content: "";
	position: absolute; top: 0; bottom: 0; left: 5px; width: 1px;
	background: var(--fbas-violet);
	opacity: 0;
	transition: opacity 0.18s;
}

body.fbas-full .fbas-grip:hover::before,
body.fbas-full .fbas-grip:focus-visible::before,
body.fbas-dragging .fbas-grip::before { opacity: 1; }

body.fbas-full .fbas-grip::after {
	content: "";
	position: absolute; top: 50%; left: 3px;
	width: 5px; height: 34px; margin-top: -17px;
	border-radius: 99px; background: #2a3044;
	opacity: 0; transition: opacity 0.18s;
}

body.fbas-full .fbas-grip:hover::after,
body.fbas-full .fbas-grip:focus-visible::after { opacity: 1; }
body.fbas-full .fbas-grip:focus-visible { outline: none; }

body.fbas-dragging { cursor: col-resize; user-select: none; }

/* ---------- icon-only rail ---------- */

body.fbas-narrow .fbas-rail { padding: 20px 10px; align-items: center; }
body.fbas-narrow .fbas-brand { padding: 2px 0; }
body.fbas-narrow .fbas-bt,
body.fbas-narrow .fbas-links { display: none; }
body.fbas-narrow .fbt-dash-nav { width: 100%; }

body.fbas-narrow .fbt-dash-nav button {
	justify-content: center;
	padding: 12px 0;
	gap: 0;
	position: relative;
}

body.fbas-narrow .fbas-t { display: none; }

body.fbas-narrow .fbt-dash-nav button .n {
	position: absolute;
	top: 5px;
	right: 9px;
	margin: 0;
	font-size: 9.5px;
	color: var(--fbas-violet);
}

body.fbas-narrow .fbt-dash-nav button svg { width: 18px; height: 18px; }
body.fbas-narrow .fbas-railfoot { width: 100%; }
body.fbas-narrow .fbas-back { padding: 12px 0; gap: 0; }
body.fbas-narrow .fbas-back span { display: none; }

/* Resizing is meaningless once the rail goes horizontal. */
@media (max-width: 900px) {
	body.fbas-full .fbas-grip { display: none; }
	body.fbas-narrow .fbas-rail { padding: 12px 14px; align-items: center; }
	body.fbas-narrow .fbas-bt,
	body.fbas-narrow .fbas-t { display: block; }
	body.fbas-narrow .fbt-dash-nav button { justify-content: flex-start; padding: 10px 12px; gap: 11px; }
	body.fbas-narrow .fbt-dash-nav button .n { position: static; margin-left: auto; }
	body.fbas-narrow .fbas-back span { display: inline; }
}

/* ----------------------------------------------------------------------
 * Drag performance.
 *
 * Resizing relays out the whole panel on every frame. These effects are
 * expensive to repaint and nobody studies a blurred glow mid-drag, so they
 * stand down until the pointer is released.
 * -------------------------------------------------------------------- */

body.fbas-dragging .fbt-dash-panels::before,
body.fbas-dragging .fbt-dash-panels::after { display: none; }

body.fbas-dragging .fbas-top { backdrop-filter: none; }

/* Hit-testing the panels during a drag is wasted work — the pointer is
   captured by the handle regardless. */
body.fbas-dragging .fbt-dash-panels,
body.fbas-dragging .fbt-dash-hello { pointer-events: none; }

/* Tell the compositor the column is about to change, but only while it is. */
body.fbas-dragging .fbt-dash { will-change: grid-template-columns; }

/* The rail's own contents cannot affect layout outside it, so let the
   browser skip re-laying-out the rest when only the rail changes. */
body.fbas-full .fbas-rail { contain: layout paint; }

/* ======================================================================
 * Lesson library, full screen.
 *
 * Same shell as the account panel: fixed grid, rail left, sticky topbar.
 * The library's own markup is .fbl-form > .fbl-side + .fbl-results, so
 * display:contents lets those join the outer grid and the injected pieces
 * place themselves around them.
 * ==================================================================== */

body.fbas-lib .fbl {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: grid;
	grid-template-columns: var(--fbas-rail) 1fr;
	grid-template-rows: auto 1fr auto;
	background: var(--fbas-canvas);
	overflow: hidden;
	margin: 0;
	padding: 0;
	color: var(--fbas-ink);
}

body.fbas-lib.admin-bar .fbl { top: 32px; }
@media screen and (max-width: 782px) {
	body.fbas-lib.admin-bar .fbl { top: 46px; }
}

body.fbas-lib .fbl-form { display: contents; }

/* rail: brand, filters, buttons — three rows in column one */
body.fbas-lib .fbas-brand {
	grid-column: 1;
	grid-row: 1;
	background: #0d0f17;
	border-right: 1px solid var(--fbas-soft);
	padding: 20px 16px 14px;
	margin: 0;
}

body.fbas-lib .fbl-side {
	grid-column: 1;
	grid-row: 2;
	background: #0d0f17;
	border-right: 1px solid var(--fbas-soft);
	padding: 6px 16px 16px;
	overflow-y: auto;
	overflow-x: hidden;
	contain: layout paint;
	margin: 0;
	max-width: none;
	width: auto;
}

body.fbas-lib .fbls-foot {
	grid-column: 1;
	grid-row: 3;
	background: #0d0f17;
	border-right: 1px solid var(--fbas-soft);
	border-top: 1px solid var(--fbas-soft);
	padding: 14px 16px 18px;
}

/* topbar and results */
body.fbas-lib .fbls-top {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 30px;
	border-bottom: 1px solid var(--fbas-soft);
	background: rgba(11, 13, 20, 0.9);
	backdrop-filter: blur(10px);
}

body.fbas-lib .fbls-top h1 { margin: 0; padding: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; color: var(--fbas-ink); }

body.fbas-lib .fbl-results {
	grid-column: 2;
	grid-row: 2 / 4;
	overflow-y: auto;
	padding: 24px 30px 70px;
	position: relative;
	isolation: isolate;
	margin: 0;
	max-width: none;
	width: auto;
}

body.fbas-lib .fbl-results::before,
body.fbas-lib .fbl-results::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	z-index: -1;
}

body.fbas-lib .fbl-results::before {
	width: 540px; height: 450px; top: -150px; left: 3%;
	background: radial-gradient(closest-side, rgba(108, 92, 231, 0.24), transparent 70%);
}

body.fbas-lib .fbl-results::after {
	width: 450px; height: 400px; top: -100px; right: 5%;
	background: radial-gradient(closest-side, rgba(214, 0, 74, 0.15), transparent 70%);
}

/* Four across, reflowing rather than holding four at all costs — a card
   under about 260px stops being readable. */
body.fbas-lib .fbl-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

@media (max-width: 1500px) { body.fbas-lib .fbl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
	body.fbas-lib .fbl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.fbas-lib .fbas-sitemenu, body.fbas-lib .fbas-divider { display: none; }
}

body.fbas-lib .fbl-card { border-radius: 16px; overflow: hidden; }
body.fbas-lib .fbl-title { font-size: 14.5px; line-height: 1.35; }

/* Logout, marked and set apart from the other two. */
body.fbas-full .fbas-back.fbas-out {
	color: #e2536b;
	border-color: rgba(226, 83, 107, 0.3);
	background: rgba(226, 83, 107, 0.07);
	margin-bottom: 0;
}

body.fbas-full .fbas-back.fbas-out:hover {
	color: #fff;
	background: rgba(226, 83, 107, 0.18);
	border-color: rgba(226, 83, 107, 0.5);
}

body.fbas-lib .fbas-grip { left: calc(var(--fbas-rail) - 5px); }

@media (max-width: 820px) {
	body.fbas-lib { overflow: auto; }
	body.fbas-lib .fbl { position: static; display: block; }
	body.fbas-lib .fbl-form { display: block; }
	body.fbas-lib .fbas-brand,
	body.fbas-lib .fbl-side,
	body.fbas-lib .fbls-foot { border-right: 0; }
	body.fbas-lib .fbl-side { overflow: visible; }
	body.fbas-lib .fbl-results { overflow: visible; padding: 18px 16px 60px; }
	body.fbas-lib .fbl-grid { grid-template-columns: 1fr; }
	body.fbas-lib .fbls-top { padding: 14px 16px; }
}


/* ----------------------------------------------------------------------
 * Specificity note.
 *
 * fb-tutorials' own rules use `body.fb-player .fbp-layout` — identical
 * specificity to `body.fbas-player .fbp-layout`, and its stylesheet loads
 * after this one (position 29 against 6), so it was winning every tie.
 * The grid template stayed main | grip | side while the explicit column
 * placements below moved the panel into the 1fr track: a 950px sidebar and
 * a 380px video.
 *
 * Both classes are on the same element, so chaining them raises this to
 * (0,3,1) and removes the dependence on load order entirely.
 * -------------------------------------------------------------------- */
/* ======================================================================
 * Lesson player, full screen with the panel moved left.
 *
 * fb-tutorials already builds .fbp > .fbp-top + .fbp-layout, where the
 * layout is main | grip | side and carries its own working grip and hide
 * toggle. None of that is rebuilt — the columns are reordered and the
 * shell made full screen, so its JavaScript keeps working untouched.
 * ==================================================================== */

body.fbas-player.fb-player .fbp {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	flex-direction: column;
	background: var(--fbas-canvas);
	overflow: hidden;
	margin: 0;
	padding: 0;
}

body.fbas-player.admin-bar .fbp { top: 32px; }
@media screen and (max-width: 782px) {
	body.fbas-player.admin-bar .fbp { top: 46px; }
}

body.fbas-player.fb-player .fbp-top {
	flex: none;
	border-bottom: 1px solid var(--fbas-soft);
	background: rgba(11, 13, 20, 0.9);
	backdrop-filter: blur(10px);
	padding: 13px 28px;
	margin: 0;
}

/* Side first, then the grip, then the video. Explicit placement rather than
   `order`, so the grip stays between them and keeps dragging the right edge. */
body.fbas-player.fb-player .fbp-layout {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: var(--fbp-panel, 380px) 6px minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	margin: 0;
}

body.fbas-player.fb-player .fbp-side { grid-column: 1; grid-row: 1; }
body.fbas-player.fb-player .fbp-grip { grid-column: 2; grid-row: 1; }
body.fbas-player.fb-player .fbp-main { grid-column: 3; grid-row: 1; }

body.fbas-player.fb-player .fbp-side {
	background: #0d0f17;
	border-right: 1px solid var(--fbas-soft);
	border-left: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	contain: layout paint;
}

body.fbas-player.fb-player .fbp-side > .fbn {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

body.fbas-player.fb-player .fbn-tabs { flex: none; }
body.fbas-player.fb-player .fbn-body { flex: 1; min-height: 0; overflow-y: auto; }

body.fbas-player.fb-player .fbp-main { min-width: 0; overflow-y: auto; }

/* The video takes the full column but never grows taller than the screen:
   width is the lesser of the column and what a 16:9 box can be at the
   height available, so the ratio holds and the title stays in view. */
body.fbas-player.fb-player .fbp-video {
	width: min(100%, calc((100vh - 230px) * 16 / 9));
	margin: 0 auto;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

body.fbas-player.fb-player .fbp-pad { padding: 22px 28px 60px; }

/* Footer buttons at the base of the side panel */
/* Printed before the panel's <aside>; `order` puts it last. Position in the
 * markup is chosen for a reliable insertion point, position on screen is a
 * layout decision — so it belongs here rather than in the injection. */
body.fbas-player.fb-player .fbp-side > .fbn { order: 1; }

body.fbas-player.fb-player .fbps-foot {
	order: 2;
	flex: none;
	margin-top: auto;
	border-top: 1px solid var(--fbas-soft);
	padding: 14px 16px 18px;
	background: #0d0f17;
}

body.fbas-player.fb-player .fbps-foot .fbas-back { margin-bottom: 8px; }
body.fbas-player.fb-player .fbps-foot .fbas-out { margin-bottom: 0; }

@media (max-width: 1100px) {
	body.fbas-player.fb-player { overflow: auto; }
	body.fbas-player.fb-player .fbp { position: static; display: block; }
	body.fbas-player.fb-player .fbp-layout { display: block; }
	body.fbas-player.fb-player .fbp-side { border-right: 0; border-bottom: 1px solid var(--fbas-soft); overflow: visible; }
	body.fbas-player.fb-player .fbn-body { max-height: 340px; }
	body.fbas-player.fb-player .fbp-main { overflow: visible; }
	body.fbas-player.fb-player .fbp-video { width: 100%; }
	body.fbas-player.fb-player .fbp-pad { padding: 18px 16px 50px; }
	body.fbas-player.fb-player .fbp-top { padding: 13px 16px; }
}

/* ======================================================================
 * Scrollbars.
 *
 * The browser's own light thumb was the last piece of foreign chrome
 * showing through. Scoped to the skinned screens so the rest of the site
 * keeps its normal scrollbars. Firefox uses scrollbar-color; WebKit uses
 * the pseudo-elements. The transparent border with background-clip gives
 * a padded pill rather than a bar welded to the edge.
 * ==================================================================== */

body.fbas-full,
body.fbas-full * { scrollbar-width: thin; scrollbar-color: #262c3d transparent; }

body.fbas-full ::-webkit-scrollbar { width: 11px; height: 11px; }
body.fbas-full ::-webkit-scrollbar-track { background: transparent; }

body.fbas-full ::-webkit-scrollbar-thumb {
	background: #262c3d;
	border-radius: 99px;
	border: 3px solid transparent;
	background-clip: padding-box;
	min-height: 44px;
}

body.fbas-full ::-webkit-scrollbar-thumb:hover { background: #343c55; background-clip: padding-box; }
body.fbas-full ::-webkit-scrollbar-thumb:active { background: var(--fbas-violet); background-clip: padding-box; }
body.fbas-full ::-webkit-scrollbar-corner { background: transparent; }

/* Narrower where the bar sits close to content. */
body.fbas-full .fbas-rail::-webkit-scrollbar,
body.fbas-full .fbt-dash-panels::-webkit-scrollbar,
body.fbas-full .fbl-side::-webkit-scrollbar,
body.fbas-full .fbl-results::-webkit-scrollbar,
body.fbas-full .fbn-body::-webkit-scrollbar,
body.fbas-full .fbp-main::-webkit-scrollbar { width: 9px; }

body.fbas-full pre::-webkit-scrollbar,
body.fbas-full textarea::-webkit-scrollbar { width: 9px; height: 9px; }

/* ----------------------------------------------------------------------
 * The two collapsed states.
 *
 * fb-tutorials drops the layout to a single column when the panel is
 * hidden (`fb-side-hidden`) and for lessons with no course panel
 * (`fbp--solo` / `fb-player-solo`). Its selectors for those tie with the
 * chained pair above and win on load order — and with the panel gone, a
 * `grid-column: 3` on the video points at a track that no longer exists,
 * which creates an implicit column and pushes the video off to the side.
 *
 * Each collapsed state therefore needs the template *and* the placement
 * restated, one class deeper.
 * -------------------------------------------------------------------- */

body.fbas-player.fb-player.fb-side-hidden .fbp-layout,
body.fbas-player.fb-player-solo .fbp-layout,
body.fbas-player.fb-player .fbp--solo .fbp-layout {
	grid-template-columns: minmax(0, 1fr);
}

body.fbas-player.fb-player.fb-side-hidden .fbp-main,
body.fbas-player.fb-player-solo .fbp-main,
body.fbas-player.fb-player .fbp--solo .fbp-main {
	grid-column: 1;
}

body.fbas-player.fb-player.fb-side-hidden .fbp-grip,
body.fbas-player.fb-player-solo .fbp-grip,
body.fbas-player.fb-player .fbp--solo .fbp-grip {
	display: none;
}

/* With no panel the video has the whole window, so let it use more height. */
body.fbas-player.fb-player.fb-side-hidden .fbp-video,
body.fbas-player.fb-player-solo .fbp-video,
body.fbas-player.fb-player .fbp--solo .fbp-video {
	width: min(100%, calc((100vh - 200px) * 16 / 9));
}

/* ----------------------------------------------------------------------
 * Members-only gate.
 *
 * The overlay ships with a transparent background, no blur and no text
 * shadow, so the copy sits directly on a bright video thumbnail and is
 * close to unreadable. A scrim plus a contained card fixes both the
 * contrast and the shapelessness.
 * -------------------------------------------------------------------- */

body.fbas-player.fb-player .fbp-video-locked .fbp-lock {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 24px;
	background: rgba(9, 11, 17, 0.82);
	backdrop-filter: blur(10px);
	text-align: center;
}

/* A lock, so the reason is legible before the sentence is read. */
body.fbas-player.fb-player .fbp-lock::before {
	content: "";
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 14px;
	flex: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
		var(--fbas-grad);
	box-shadow: 0 10px 30px rgba(163, 59, 201, 0.35);
}

body.fbas-player.fb-player .fbp-lock .fbt-gate-level {
	font-size: 10px;
	letter-spacing: 0.14em;
	margin-bottom: 12px;
	border: 1px solid rgba(139, 123, 255, 0.4);
}

body.fbas-player.fb-player .fbp-lock-note {
	max-width: 46ch;
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #d5daea;
}

body.fbas-player.fb-player .fbp-lock-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	font-size: inherit;
}

body.fbas-player.fb-player .fbp-lock-actions .fbt-btn {
	background: #171b27;
	border: 1px solid #2c3244;
	color: var(--fbas-ink);
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 13.5px;
	font-weight: 600;
}

body.fbas-player.fb-player .fbp-lock-actions .fbt-btn:hover { border-color: #3a4157; background: #1c2130; }

body.fbas-player.fb-player .fbp-lock-actions .fbt-btn-yt {
	background: var(--fbas-grad);
	border: 0;
	color: #fff;
}

body.fbas-player.fb-player .fbp-lock-actions .fbt-btn-yt:hover { filter: brightness(1.09); }

/* Dim the poster behind rather than leaving it competing for attention. */
body.fbas-player.fb-player .fbp-video-locked > *:not(.fbp-lock) { filter: brightness(0.55) saturate(0.85); }

/* ----------------------------------------------------------------------
 * Two faults that only appear inside the fixed shell.
 *
 * 1. `.fbp-top` is `position: sticky; top: 32px` — correct for the old
 *    scrolling page, wrong here. Sticky shifted it 32px down from its flow
 *    position while the layout below still started at the flow position,
 *    so the header painted over the first 32px of the tab strip and the
 *    tab labels vanished behind it.
 *
 * 2. The grid row was auto-sized, so it grew to fit the panel's content
 *    (849px) instead of being capped at the container (841px). The panel
 *    ran 8px past the bottom of the screen, clipping the buttons.
 *    `minmax(0, 1fr)` caps the row; `min-height: 0` then lets the content
 *    area shrink and scroll instead of pushing everything down.
 * -------------------------------------------------------------------- */

body.fbas-player.fb-player .fbp-top {
	position: static;
	top: auto;
}

body.fbas-player.fb-player .fbp-layout {
	min-block-size: 0;
	grid-template-rows: minmax(0, 1fr);
}

body.fbas-player.fb-player .fbp-side {
	min-height: 0;
	height: 100%;
}

body.fbas-player.fb-player .fbp-side > .fbn { min-height: 0; }

body.fbas-player.fb-player .fbn-body {
	min-height: 0;
	overflow-y: auto;
}

/* The tab strip must never scroll out of reach with the pane's content. */
body.fbas-player.fb-player .fbn-tabs {
	flex: none;
	position: sticky;
	top: 0;
	z-index: 2;
	background: #0d0f17;
}

/* A line under the guest buttons saying what an account gives. Placed in the
   rail rather than a popup: present, but not interrupting the lesson. */
body.fbas-player.fb-player .fbas-guestnote {
	margin: 12px 2px 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--fbas-ink3);
}

body.fbas-narrow .fbas-guestnote { display: none; }

/* Guest note in the library rail, same treatment as the player's. */
body.fbas-lib .fbas-guestnote {
	margin: 12px 2px 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--fbas-ink3);
}

/* ----------------------------------------------------------------------
 * Drag guide.
 *
 * While dragging, the violet line is the thing being moved — the panel
 * takes its new width once, on release. So the line has to be clearly
 * visible for the whole drag, and must not animate its own position or it
 * would trail the pointer it is supposed to track.
 * -------------------------------------------------------------------- */

body.fbas-dragging .fbas-grip::before,
body.fbas-dragging .fbp-grip::before {
	opacity: 1;
	transition: none;
}

body.fbas-dragging .fbas-grip,
body.fbas-dragging .fbp-grip {
	transition: none;
	will-change: transform;
	z-index: 30;
}

/* A wider, softer band behind the hairline so the guide reads at a glance. */
body.fbas-dragging .fbas-grip::after,
body.fbas-dragging .fbp-grip::after {
	opacity: 1;
	top: 0;
	bottom: 0;
	height: auto;
	margin-top: 0;
	width: 11px;
	left: 0;
	border-radius: 0;
	background: linear-gradient(90deg, transparent, rgba(108, 92, 231, 0.16), transparent);
}

/* Hint of the collapsed state while the guide is inside the narrow band. */
body.fbas-narrow-preview .fbas-grip::before { background: #ff5470; }

/* Auth buttons in the topbar for signed-out visitors. The panel hides the
   site header, so these have to live here or there is no way to sign in. */
body.fbas-full .fbas-authbtns { display: inline-flex; align-items: center; gap: 10px; }

body.fbas-full .fbas-ghost,
body.fbas-full .fbas-cta {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

body.fbas-full .fbas-ghost { color: var(--fbas-ink); background: #14171f; box-shadow: inset 0 0 0 1px var(--fbas-line); }
body.fbas-full .fbas-ghost:hover { background: #1b1f2c; color: #fff; }
body.fbas-full .fbas-cta { color: #fff; background: var(--fbas-grad); }
body.fbas-full .fbas-cta:hover { filter: brightness(1.08); }

@media (max-width: 700px) {
	body.fbas-full .fbas-ghost { display: none; }
}

/* ----------------------------------------------------------------------
 * Player rail: brand at the head, matching the library.
 *
 * Printed before the panel's <aside>; `order` puts the pieces in place —
 * brand, tabs and contents, then the buttons.
 * -------------------------------------------------------------------- */

body.fbas-player.fb-player .fbp-side > .fbas-brand {
	order: 0;
	flex: none;
	padding: 18px 16px 14px;
	margin: 0;
	box-shadow: inset 0 -1px 0 var(--fbas-soft);
}

body.fbas-player.fb-player .fbp-side > .fbn { order: 1; }
body.fbas-player.fb-player .fbps-foot { order: 2; }

/* The account block sits in fb-tutorials' own top strip, before the
   contents toggle. */
body.fbas-player.fb-player .fbp-top .fbas-authbtns,
body.fbas-player.fb-player .fbp-top .fbas-me { margin-left: auto; margin-right: 12px; }

body.fbas-narrow .fbas-brand .fbas-bt { display: none; }

/* ======================================================================
 * Dosyalar — explorer view.
 *
 * Built on fb-tutorials' own markup: a card per lesson, a row per file.
 * The cards become groups, the rows become tiles, and file type is read
 * from the download URL's extension. Your palette does the type work —
 * violet archives, red PDFs, outlined tiles for code — so four kinds are
 * readable at a glance without a third-party icon set.
 * ==================================================================== */

body.fbas-full .fbt-panel[data-panel="files"] { max-width: none; }

/* toolbar */
body.fbas-full .fbas-fbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

body.fbas-full .fbas-fsp { flex: 1; }

body.fbas-full .fbas-fsearch {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--fbas-sunk);
	border-radius: 9px;
	padding: 8px 12px;
	width: 260px;
	max-width: 55%;
	box-shadow: inset 0 0 0 1px var(--fbas-line);
}

body.fbas-full .fbas-fsearch svg { width: 14px; height: 14px; stroke: var(--fbas-ink3); fill: none; stroke-width: 1.9; flex: none; }
body.fbas-full .fbas-fsearch input { background: none; border: 0; outline: none; color: var(--fbas-ink); font: inherit; font-size: 12.5px; width: 100%; }
body.fbas-full .fbas-fsearch input::placeholder { color: var(--fbas-ink3); }

body.fbas-full .fbas-fseg {
	display: flex;
	gap: 2px;
	background: var(--fbas-sunk);
	border-radius: 9px;
	padding: 3px;
	box-shadow: inset 0 0 0 1px var(--fbas-line);
	flex: none;
}

body.fbas-full .fbas-fseg button {
	width: 30px; height: 26px;
	border: 0; border-radius: 6px;
	background: none; cursor: pointer;
	display: grid; place-items: center; padding: 0;
}

body.fbas-full .fbas-fseg svg { width: 14px; height: 14px; stroke: var(--fbas-ink3); fill: none; stroke-width: 1.9; }
body.fbas-full .fbas-fseg button[aria-pressed="true"] { background: #232838; }
body.fbas-full .fbas-fseg button[aria-pressed="true"] svg { stroke: #fff; }

/* groups: one per lesson */
body.fbas-full .fbas-fgroup {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0 0 22px;
	display: grid;
	/* Six across on a wide panel. auto-fill left big gaps because most
	   lessons have one or two files; a fixed count keeps the rows even. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 1500px) { body.fbas-full .fbas-fgroup { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1240px) { body.fbas-full .fbas-fgroup { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { body.fbas-full .fbas-fgroup { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { body.fbas-full .fbas-fgroup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

body.fbas-full .fbas-fgroup .fbt-label {
	grid-column: 1 / -1;
	margin: 0 2px 4px;
	font-size: 9.5px;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--fbas-ink3);
	font-weight: 600;
}

/* tiles */
body.fbas-full .fbas-file {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 10px 12px;
	border-radius: 12px;
	text-align: center;
	border: 0;
	background: var(--fbas-card);
	box-shadow: inset 0 0 0 1px var(--fbas-soft);
	position: relative;
	min-width: 0;
}

body.fbas-full .fbas-file:hover { background: #171b26; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13); }

/* The icon block is fb-tutorials' own ⇩ glyph, recoloured by type. */
body.fbas-full .fbas-file .fbt-row-ic {
	width: 42px;
	height: 42px;
	margin: 2px auto 10px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	font-size: 17px;
	color: #fff;
	background: linear-gradient(160deg, #1f2534, #141824);
	box-shadow: inset 0 0 0 1px var(--fbas-line);
}

body.fbas-full .fbas-file.is-zip .fbt-row-ic { background: linear-gradient(160deg, #a33bc9, #7a2a96); box-shadow: none; }
body.fbas-full .fbas-file.is-pdf .fbt-row-ic { background: linear-gradient(160deg, #d6004a, #9e0037); box-shadow: none; }
body.fbas-full .fbas-file.is-img .fbt-row-ic { background: linear-gradient(160deg, #6c5ce7, #4b3fc4); box-shadow: none; }

/* the file name, whatever element fb-tutorials used for it */
body.fbas-full .fbas-file > *:not(.fbt-row-ic):not(.fbt-btn) {
	display: block;
	width: 100%;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 0 9px;
	color: var(--fbas-ink);
}

body.fbas-full .fbas-file .fbt-btn {
	font-size: 10.5px;
	padding: 5px 12px;
	border-radius: 7px;
	display: inline-block;
	width: auto;
	margin-top: auto;
}

/* extension chip, from the URL */
body.fbas-full .fbas-file[data-ext]:not([data-ext=""])::after {
	content: attr(data-ext);
	position: absolute;
	top: 8px;
	right: 8px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 8.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fbas-ink3);
	background: var(--fbas-sunk);
	border-radius: 5px;
	padding: 2px 5px;
	box-shadow: inset 0 0 0 1px var(--fbas-line);
}

/* list view */
body.fbas-full .fbt-panel[data-panel="files"].fbas-flist .fbas-fgroup { grid-template-columns: 1fr; gap: 0; }

body.fbas-full .fbas-flist .fbas-file {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	padding: 10px 12px;
	border-radius: 9px;
	box-shadow: inset 0 -1px 0 var(--fbas-soft);
}

body.fbas-full .fbas-flist .fbas-file .fbt-row-ic { width: 30px; height: 30px; margin: 0; border-radius: 8px; font-size: 13px; flex: none; }
body.fbas-full .fbas-flist .fbas-file > *:not(.fbt-row-ic):not(.fbt-btn) { flex: 1; margin: 0; text-align: left; }
body.fbas-full .fbas-flist .fbas-file .fbt-btn { margin-left: auto; }
body.fbas-full .fbas-flist .fbas-file::after { position: static; margin-left: 8px; }

/* status bar */
body.fbas-full .fbas-fstatus {
	margin-top: 4px;
	padding-top: 12px;
	font-size: 11.5px;
	color: var(--fbas-ink3);
	font-family: ui-monospace, Menlo, monospace;
	box-shadow: inset 0 1px 0 var(--fbas-soft);
}

@media (max-width: 700px) {
	body.fbas-full .fbas-fgroup { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
	body.fbas-full .fbas-fsearch { max-width: none; }
}

/* ======================================================================
 * Player files pane — same language, narrower column.
 *
 * The rail is ~380px, so these stay rows rather than tiles. Only the type
 * colouring and the collapse carry over.
 * ==================================================================== */

body.fbas-player.fb-player .fbas-nfile .fbn-ic {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-size: 13px;
	color: #fff;
	background: linear-gradient(160deg, #1f2534, #141824);
	box-shadow: inset 0 0 0 1px var(--fbas-line);
	flex: none;
}

body.fbas-player.fb-player .fbas-nfile.is-zip .fbn-ic { background: linear-gradient(160deg, #a33bc9, #7a2a96); box-shadow: none; }
body.fbas-player.fb-player .fbas-nfile.is-pdf .fbn-ic { background: linear-gradient(160deg, #d6004a, #9e0037); box-shadow: none; }
body.fbas-player.fb-player .fbas-nfile.is-img .fbn-ic { background: linear-gradient(160deg, #6c5ce7, #4b3fc4); box-shadow: none; }

body.fbas-player.fb-player .fbas-nfile[data-ext]:not([data-ext=""]) .fbn-rb::after {
	content: attr(data-ext);
	display: inline-block;
	margin-left: 8px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 8.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fbas-ink3);
	background: var(--fbas-sunk);
	border-radius: 5px;
	padding: 1px 5px;
	box-shadow: inset 0 0 0 1px var(--fbas-line);
	vertical-align: middle;
}

/* Toggle for the rest of the course's files */
body.fbas-player.fb-player .fbas-more {
	display: flex;
	align-items: center;
	gap: 9px;
	width: calc(100% - 28px);
	margin: 6px 14px 4px;
	padding: 9px 11px;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	background: #14171f;
	color: var(--fbas-ink2);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--fbas-line);
}

body.fbas-player.fb-player .fbas-more:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
body.fbas-player.fb-player .fbas-more i { font-style: normal; font-size: 10px; font-family: ui-monospace, Menlo, monospace; color: var(--fbas-ink3); background: var(--fbas-sunk); border-radius: 99px; padding: 1px 6px; }
body.fbas-player.fb-player .fbas-more svg { width: 14px; height: 14px; margin-left: auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s; }
body.fbas-player.fb-player .fbas-more[aria-expanded="true"] svg { transform: rotate(180deg); }