/* ===== Discover (sbox.game/games replica) ===== */
	.disco { display: none; }
	/* Rows scroll horizontally; pull them toward the page edges so cards bleed like sbox.game */
	.disco-row { margin: 0 -36px 34px; }
	.disco-head { display: flex; align-items: center; gap: 9px; padding: 0 36px; margin-bottom: 14px; width: max-content; }
	.disco-head .em { font-size: 20px; line-height: 1; }
	.disco-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
	/* Clickable row title → opens a "See all" grid of that category. */
	.disco-head.rail-link { cursor: pointer; }
	.disco-head.rail-link:hover h2 { color: var(--accent); }
	.disco-head .rail-seeall { font-family: var(--game); font-size: 13px; font-weight: 800; color: var(--muted);
		opacity: 0; transform: translateX(-4px); transition: opacity .14s, transform .14s, color .14s; }
	.disco-head.rail-link:hover .rail-seeall { opacity: 1; transform: none; color: var(--accent); }
	@media (hover: none) { .disco-head .rail-seeall { opacity: 1; transform: none; } }   /* always visible on touch */
	/* "See all" results heading — spans the whole grid above the cards. */
	.seeall-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 2px 2px 8px; }
	.seeall-head .em { font-size: 22px; line-height: 1; }
	.seeall-head h2 { font-size: 24px; font-weight: 900; letter-spacing: -.4px; }
	.disco-wrap { position: relative; }
	.disco-scroller { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 0 6px;
		scrollbar-width: none; overflow-anchor: none; cursor: grab; user-select: none; }
	.disco-scroller.dragging { cursor: grabbing; scroll-behavior: auto; }
	/* Pseudo-element spacers create the left/right gutter without padding-left, which browsers
	   auto-scroll away. Pseudo-elements are ignored by scroll-anchoring so scrollLeft stays 0. */
	.disco-scroller::before, .disco-scroller::after { content: ''; flex: 0 0 28px; pointer-events: none; }
	.disco-scroller::-webkit-scrollbar { display: none; }
	.disco-arrow { position: absolute; top: 0; bottom: 14px; width: 56px; border: none; cursor: pointer; z-index: 4;
		display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; opacity: 0;
		transition: opacity .14s; }
	.disco-arrow.l { left: 0; background: linear-gradient(90deg, var(--bg) 30%, transparent); justify-content: flex-start; padding-left: 12px; }
	.disco-arrow.r { right: 0; background: linear-gradient(270deg, var(--bg) 30%, transparent); justify-content: flex-end; padding-right: 12px; }
	.disco-wrap:hover .disco-arrow { opacity: 1; }
	.disco-arrow:disabled { opacity: 0 !important; pointer-events: none; }
	.disco-arrow span { width: 38px; height: 38px; border-radius: 50%; background: rgba(20,24,34,.92);
		border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; line-height: 1; }

	/* Discover game card — three shapes share this base */
	.gcard { flex: 0 0 auto; cursor: pointer; scroll-snap-align: start; }
	.gcard .gthumb { position: relative; background: #0a0c12 center/cover no-repeat; border-radius: 12px;
		border: 1px solid var(--border); overflow: hidden; transition: transform .14s, border-color .14s, box-shadow .14s; }
	.gcard:hover .gthumb { transform: translateY(-3px); border-color: var(--accent);
		box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(50,115,235,.25); }
	.gcard.sq   { width: 156px; } .gcard.sq   .gthumb { aspect-ratio: 1/1; }
	.gcard.wide { width: 248px; } .gcard.wide .gthumb { aspect-ratio: 16/9; }
	.gcard.big  { width: 320px; } .gcard.big  .gthumb { aspect-ratio: 16/9; }
	.gcard.tall { width: 174px; } .gcard.tall .gthumb { aspect-ratio: 512/910; }
	.gc-new { background: var(--down); color: #fff; font-size: 11px; display: inline-flex; align-items: center;
		font-weight: 800; padding: 3px 9px; border-radius: 7px; letter-spacing: .3px; }
	/* Contextual card chips, shown UNDER the thumbnail (not over it) — styled like Steam's tag
	   pills: flat blue-grey, light text, comfortable padding, wrapping in a row. .gc-reason =
	   "why you're seeing this" (e.g. "Because you played X", "Trending now"); .gc-retention =
	   earned-over-days engagement ("Players keep coming back"), kept green so it reads separately. */
	.gc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 3px 0; }
	.gc-reason, .gc-retention { max-width: 100%; font-size: 11px; font-weight: 600; letter-spacing: .1px;
		padding: 4px 9px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		transition: background .12s; }
	.gc-reason { background: rgba(70,90,120,.55); color: #e3ebf7; border: 1px solid rgba(150,175,210,.28); }
	.gcard:hover .gc-reason { background: rgba(80,102,135,.7); }
	.gc-retention { background: rgba(28,120,82,.6); color: #d7ffec; border: 1px solid rgba(80,210,150,.32);
		display: inline-flex; align-items: center; gap: 5px; }
	.gcard:hover .gc-retention { background: rgba(32,135,92,.75); }
	.gc-retention::before { content: "↺"; font-weight: 900; }
	body.light .gc-reason { background: rgba(70,100,150,.9); color: #fff; border-color: rgba(255,255,255,.18); }
	body.light .gc-retention { background: rgba(13,140,90,.92); color: #fff; border-color: rgba(255,255,255,.2); }
	/* Detail-page "Player Activity" panel — scraped time-sliced metrics + returning-rate bar. */
	.gm-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 16px; }
	.gm-retwrap { display: flex; flex-direction: column; gap: 6px; }
	.gm-rethead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
	.gm-rethead b { font-size: 22px; color: var(--up); }
	.gm-retsub { color: var(--muted); font-size: 12px; opacity: .8; }
	.gm-retbar { height: 10px; border-radius: 6px; background: rgba(127,127,127,.22); overflow: hidden; }
	.gm-retfill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--up)); border-radius: 6px; }
	.gm-spark { display: flex; flex-direction: column; gap: 5px; }
	.gm-sparklabel { color: var(--muted); font-size: 12px; opacity: .8; }
	.gm-sparksvg { width: 100%; height: 44px; display: block; }
	.gm-ago { color: var(--muted); font-weight: 400; font-size: 11px; opacity: .7; }
	/* Package flair — s&box's icon badges overlaid top-left of a thumbnail. The API supplies
	   the Material Symbols icon name + inline Style (colour) + tooltip; we render them verbatim. */
	.material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
		line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
		direction: ltr; -webkit-font-smoothing: antialiased; }
	.flair-row { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px;
		max-width: calc(100% - 16px); }
	.flair { width: 25px; height: 25px; border-radius: 7px; display: inline-flex; align-items: center;
		justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
	.flair .material-symbols-rounded { font-size: 17px; font-variation-settings: "FILL" 1; }
	/* Title row: name on the left, live player count opposite it on the right. */
	.gc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 11px 3px 4px; }
	.gc-title { font-family: var(--game); font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
	.gc-players { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--game);
		font-weight: 900; font-size: 16px; color: #4ade80; font-variant-numeric: tabular-nums; }
	.gc-players .pc-icon { height: 24px; width: auto; flex: 0 0 auto; }
	.gc-rating { display: flex; align-items: center; gap: 6px; margin: 0 3px; color: var(--text);
		font-family: var(--game); font-size: 15px; font-weight: 800; }
	.gc-rating svg { width: 16px; height: 16px; fill: #fff; stroke: none; }
	.gc-vote-cta { color: var(--accent); font-weight: 800; }

	/* ---- "Browse by Category" genre cards (tinted game-art tiles with a centred label) ---- */
	.genre-card { flex: 0 0 auto; width: 232px; position: relative; border-radius: 14px; overflow: hidden;
		cursor: pointer; scroll-snap-align: start; border: 1px solid var(--border);
		transition: transform .14s, border-color .14s, box-shadow .14s; }
	.genre-card:hover { transform: translateY(-3px); border-color: var(--accent);
		box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(50,115,235,.25); }
	.genre-thumb { aspect-ratio: 16/10; background: #0a0c12 center/cover no-repeat; }
	.genre-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(155deg, rgba(var(--tint),.88) 0%, rgba(var(--tint),.34) 52%, rgba(8,10,16,.55) 100%); }
	.genre-label { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2;
		background: rgba(255,255,255,.94); color: #11151c; font-family: var(--game); font-weight: 800;
		font-size: 14px; letter-spacing: .8px; text-transform: uppercase; padding: 7px 16px; border-radius: 8px;
		white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
	.genre-card:hover .genre-label { background: #fff; }
	/* See-all categories: a responsive grid of the same cards. It must span the FULL width of the
	   parent .grid (grid-column: 1/-1) — otherwise it'd be squeezed into one 260px column and the
	   cards would stack vertically. Inside, cards tile in their own auto-fill tracks. */
	.genre-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
	.genre-grid .genre-card { width: auto; flex: initial; }

	/* ---- Game card hover preview popup — Steam capsule-hover look (matched to First.png) ---- */
	#gcHoverPopup {
		position: fixed; z-index: 10000; width: 320px;
		background: #171d25; border-radius: 3px;
		overflow: hidden; box-shadow: 0 0 10px 2px rgba(0,0,0,.85);
		pointer-events: none; opacity: 0;
		transform: scale(.97) translateX(-4px); transition: opacity .12s, transform .12s;
	}
	#gcHoverPopup.show { opacity: 1; transform: scale(1) translateX(0); }
	/* Header: blue-grey gradient block holding title + review summary + tags */
	.gch-head { padding: 10px 12px 11px; background: linear-gradient(to bottom, #2a3c4e 0%, #1f2d3a 100%); }
	.gch-title { font-family: Arial, "Motiva Sans", var(--game), sans-serif; font-size: 14px; font-weight: 700;
		color: #ffffff; letter-spacing: .1px; line-height: 1.2;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* Tag chips — bigger, subtle blue gradient */
	.gch-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
	.gch-tag { background: linear-gradient(to bottom, rgba(66,120,200,.35) 0%, rgba(30,70,140,.28) 100%);
		color: #c6d8f5; border: 1px solid rgba(80,140,230,.22);
		font-family: Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1;
		padding: 5px 10px; border-radius: 3px; white-space: nowrap; }
	/* Media: video first then 1 screenshot, stacked */
	.gch-media { background: #171d25; display: flex; flex-direction: column; gap: 1px; }
	.gch-tile { position: relative; width: 100%; aspect-ratio: 16/9;
		background: #0a0c12 center/cover no-repeat; overflow: hidden; }
	.gch-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.gch-tile .gch-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
		background: rgba(0,0,0,.28); }
	.gch-tile .gch-play::after { content: "▶"; font-size: 18px; color: rgba(255,255,255,.92);
		text-shadow: 0 2px 10px rgba(0,0,0,.95); }

	/* Hero bleeds past main's 36px padding so neighbours fill all the way to the screen edges.
	   Track padding = (50% - half-slide-width) so the first/last slide can still scroll to centre. */
	.disco-hero { position: relative; margin: 0 -36px 32px; }
	.dh-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
		scrollbar-width: none; padding: 4px calc(50% - min(490px, 40vw)); }
	.dh-track::-webkit-scrollbar { display: none; }
	/* Use vw (not % of track) so slide stays ~980px regardless of track width */
	.dh-slide { flex: 0 0 min(980px, 80vw); scroll-snap-align: center; display: flex; gap: 12px;
		filter: blur(5px); opacity: .5; transform: scale(.92); transition: filter .3s, opacity .3s, transform .3s; }
	.dh-slide.active { filter: none; opacity: 1; transform: none; }
	.dh-media { position: relative; flex: 1 1 auto; min-width: 0; aspect-ratio: 16/9; border-radius: 16px;
		background: #0a0c12 center/cover no-repeat; border: 1px solid var(--border); cursor: pointer; overflow: hidden; }
	.dh-side { flex: 0 0 280px; max-width: 38%; background: var(--bg2); border: 1px solid var(--border);
		border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
	.dh-side-head { display: flex; align-items: center; gap: 12px; }
	.dh-logo { width: 50px; height: 50px; border-radius: 12px; background: #0a0c12 center/cover no-repeat;
		border: 1px solid var(--border); flex: 0 0 auto; cursor: pointer; }
	.dh-name { font-family: var(--game); font-size: 22px; font-weight: 900; letter-spacing: -.4px; line-height: 1.1;
		cursor: pointer; display: inline; transition: color .12s; }
	.dh-name:hover { color: var(--accent); }
	.dh-org { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
	.dh-players { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
		font-family: var(--game); font-weight: 900; font-size: 17px; color: #4ade80;
		font-variant-numeric: tabular-nums; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3);
		padding: 7px 15px; border-radius: 999px; }
	.dh-players .pc-icon { height: 28px; width: auto; }
	.dh-shots { display: flex; flex-direction: column; gap: 10px; flex: 1; }
	.dh-shot { width: 100%; aspect-ratio: 16/9; border-radius: 10px; background: #0a0c12 center/cover no-repeat; border: 1px solid var(--border); }
	.dh-desc { font-size: 13px; color: var(--muted); line-height: 1.5;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.dh-tags { display: flex; flex-wrap: wrap; gap: 7px; }
	.dh-tag { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted);
		background: var(--card); border: 1px solid var(--border); padding: 4px 9px; border-radius: 7px; }
	.dh-play { margin-top: auto; text-align: center; text-decoration: none; background: var(--accent); color: var(--ink);
		font-weight: 800; font-size: 15px; padding: 11px; border-radius: 10px; transition: background .12s; }
	.dh-play:hover { background: var(--accent-hover); }
	.dh-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
		background: rgba(13,16,24,.85); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 22px;
		cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; transition: background .12s; }
	.dh-nav:hover { background: rgba(40,48,66,.95); }
	.dh-nav.l { left: max(8px, calc(50% - min(504px, 41vw))); } .dh-nav.r { right: max(8px, calc(50% - min(504px, 41vw))); }
	/* Hero position dots */
	.dh-dots { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 14px; }
	.dh-dot { width: 14px; height: 14px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
		background: rgba(255,255,255,.25); transition: background .25s, transform .25s; flex: 0 0 auto; }
	.dh-dot.active { background: #fff; transform: scale(1.35); }
	@media (max-width: 880px) { .dh-side { display: none; } }
	@media (max-width: 600px) { .disco-row { margin-left: -18px; margin-right: -18px; }
		.disco-head, .disco-scroller { padding-left: 18px; padding-right: 18px; } }

	/* Genre filter bar (Games view) */
	.genre-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 22px; }
	.genre-bar .gb-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
		color: var(--muted2); margin-right: 6px; }
	.genre-chip { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--card);
		border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; cursor: pointer;
		transition: color .1s, border-color .1s, background .1s; user-select: none; white-space: nowrap; }
	.genre-chip:hover { color: var(--text); border-color: var(--card-hover); }
	.genre-chip.active { background: var(--accent); border-color: var(--accent); color: var(--ink); }
	.genre-chip.all { font-weight: 700; }

	/* Detail page — Steam-flavoured typography (Steam falls back to Arial). */
	.detail { display: none; margin: 0 auto;
		font-family: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif; }
	.back { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); cursor: pointer;
		font-size: 14px; margin-bottom: 20px; background: none; border: none; }
	.back:hover { color: var(--text); }

	/* Unified back button — the hamburger-bars pill stretched as the BACKGROUND of the whole
	   button, with the ArrowBack icon + a "Back …" label on top. Used everywhere so every
	   "go back" control looks identical. */
	.back-nav { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
		color: #fff; font-weight: 800; font-size: 15px; font-family: inherit; white-space: nowrap;
		padding: 0px 18px 0px 0px; margin-bottom: 18px; min-width: max-content;
		background: url('/Icons/HamburgarMenuBars.png') center/100% 100% no-repeat;
		-webkit-mask-image: radial-gradient(ellipse 96% 90% at 50% 50%, #000 70%, transparent 100%);
		mask-image: radial-gradient(ellipse 96% 90% at 50% 50%, #000 70%, transparent 100%);
		transition: background-image .12s, transform .12s; }
	.back-nav:hover { background-image: url('/Icons/HamburgarMenuBarsHovered.png'); transform: translateX(-2px); }
	.back-nav .bn-ico { width: 72px; height: 72px; flex: 0 0 auto; position: relative; left: 6px;
		background: url('/Icons/ArrowBack.png') center/120% no-repeat; }
	.back-nav .bn-label { position: relative; top: -3px; }
	/* In the chat header (a flex row) the back button is more compact and has no bottom margin. */
	.chat-head .back-nav { margin: 0; padding: 0 12px 0 0; gap: 4px; font-size: 14px; flex: 0 0 auto; }
	.chat-head .back-nav .bn-ico { width: 46px; height: 46px; }
	.dhead { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 24px; }
	.dmedia { flex: 1 1 560px; min-width: 0; }
	.stage { position: relative; width: 100%; aspect-ratio: 16/9; background: #000 center/cover no-repeat;
		border-radius: 14px; border: 1px solid var(--border); cursor: zoom-in; overflow: hidden; }
	.stage.has-video { cursor: default; }
	.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
	.shots { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.shots::-webkit-scrollbar { display: none; }
	.shot { position: relative; height: 62px; aspect-ratio: 16/9; flex: 0 0 auto; padding: 0; cursor: pointer;
		background: #0a0c12 center/cover no-repeat; border: 2px solid transparent; border-radius: 8px;
		opacity: .55; transition: opacity .12s, border-color .12s; }
	.shot:hover { opacity: 1; }
	.shot.active { opacity: 1; border-color: var(--accent); }
	.shot .shot-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
		color: #fff; font-size: 15px; text-shadow: 0 2px 8px rgba(0,0,0,.95); }
	.dside { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; }
	.dtitle { font-size: 28px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
	.dorg { color: var(--muted); margin-top: 6px; font-size: 14px; }
	.dactions { display: flex; gap: 10px; }
	.dplay { flex: 1 1 auto; text-align: center; text-decoration: none; background: var(--accent); color: var(--ink); font-weight: 800;
		font-size: 16px; padding: 14px; border-radius: 10px; transition: background .12s; }
	.dplay:hover { background: var(--accent-hover); }
	.dfav { flex: 0 0 auto; cursor: pointer; background: var(--bg2); color: var(--text); font-weight: 800; font-size: 14px;
		padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; white-space: nowrap;
		transition: background .12s, border-color .12s, color .12s; }
	.dfav:hover { border-color: var(--accent); color: var(--accent); }
	.dfav.on { background: rgba(245,197,24,.14); border-color: #f5c518; color: #f5c518; }
	.dfav:disabled { opacity: .6; cursor: default; }
	.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
	.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
	.stat .v { font-size: 18px; font-weight: 750; }
	.stat .v.up { color: var(--up); } .stat .v.down { color: var(--down); }
	.stat .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
	.posbar { height: 7px; border-radius: 5px; background: var(--down); overflow: hidden; margin-top: 12px; }
	.posbar > div { height: 100%; background: var(--up); }
	.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
		margin: 30px 0 12px; font-weight: 700; font-family: var(--game); }
	.tags { display: flex; flex-wrap: wrap; gap: 8px; }
	.tag { background: var(--card); border: 1px solid var(--border); color: var(--muted); font-size: 12px;
		padding: 6px 12px; border-radius: 18px; cursor: pointer; transition: all .1s; }
	.tag:hover { color: var(--text); border-color: var(--accent); }
	.desc { color: #c5c9d2; line-height: 1.65; font-size: 14.5px; white-space: pre-wrap; word-break: break-word; }
	.desc a { color: var(--accent); }
	/* Rich Trix description from sbox.game — render images + formatting like the website. */
	.desc.rich { white-space: normal; color: #c7ccd6; font-size: 15px; line-height: 1.7; word-break: break-word; }
	.desc.rich > *:first-child { margin-top: 0; }
	.desc.rich p, .desc.rich div { margin: 0 0 12px; }
	.desc.rich img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 16px 0; }
	.desc.rich figure { margin: 16px 0; }
	.desc.rich a { color: var(--accent); text-decoration: none; }
	.desc.rich a:hover { text-decoration: underline; }
	.desc.rich strong, .desc.rich b { color: #fff; font-weight: 700; }
	.desc.rich ul, .desc.rich ol { margin: 10px 0 12px; padding-left: 22px; }
	.desc.rich li { margin: 5px 0; }
	.desc.rich blockquote { border-left: 3px solid var(--accent); margin: 14px 0; padding: 2px 0 2px 16px; color: var(--muted); }
	.desc.rich h1, .desc.rich h2, .desc.rich h3, .desc.rich h4 { color: #fff; font-weight: 800; margin: 20px 0 8px; line-height: 1.25; }
	.desc.rich hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
	.desc.rich pre, .desc.rich code { font-family: var(--mono); font-size: 13px; }
	.desc.rich pre { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }