/* ============================================================================
   HLL DRIVER LICENCE — its own design system.

   NOTHING HERE IS BORROWED. Not the store's tokens, not the portal's, not the
   CSS editor's. One prefix (hll-dl-), one token set, one file.

   SPECIFICITY, STATED ONCE.
   This site's stylesheet carries site-wide !important rules on bare elements —
   p, span, a, li, div — that set colour and a white text-shadow. A component
   dropped into the content area loses to those however well it is written. So
   every selector below is prefixed `html body .hll-dl`, and the properties those
   rules fight over are marked. It reaches nothing outside .hll-dl.
   ============================================================================ */

html body .hll-dl {
	/* the page this sits on */
	--dl-bg: #23282e;

	/* the card itself: a shade off the page, so a licence reads as an object
	   placed on the page rather than a region of it */
	--dl-card: #282e35;
	--dl-card-2: #21262c;

	--dl-line: rgba(255, 255, 255, .10);
	--dl-line-2: rgba(255, 255, 255, .06);

	--dl-fg: #eef2f7;
	--dl-fg-2: #c3cdd9;
	--dl-mut: #8b97a6;

	/* the credential accent */
	--dl-acc: #ff7d21;
	--dl-acc-2: #ffb02e;

	--dl-ok: #25e0b0;
	--dl-void: #ff5061;

	--dl-r: 14px;
	--dl-r-sm: 9px;
	--dl-gap: 16px;

	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--dl-fg) !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	text-shadow: none !important;
	-webkit-font-smoothing: antialiased;
}

html body .hll-dl *,
html body .hll-dl *::before,
html body .hll-dl *::after {
	box-sizing: border-box;
	text-shadow: none !important;
}

/* ---------------------------------------------------------------- search --- */

html body .hll-dl .hll-dl-search {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px !important;
	padding: 0 14px !important;
	height: 48px;
	border: 1px solid var(--dl-line) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, .04) !important;
}

html body .hll-dl .hll-dl-search-ic {
	display: inline-flex;
	flex: none;
	width: 17px;
	height: 17px;
	color: var(--dl-mut) !important;
}

html body .hll-dl .hll-dl-search-ic svg { width: 100%; height: 100%; }

html body .hll-dl .hll-dl-search-in {
	all: unset;
	flex: 1;
	min-width: 0;
	font-size: 14.5px;
	color: var(--dl-fg) !important;
}

html body .hll-dl .hll-dl-search-in::placeholder { color: var(--dl-mut) !important; }

html body .hll-dl .hll-dl-search:focus-within {
	border-color: var(--dl-acc) !important;
	box-shadow: 0 0 0 3px rgba(255, 125, 33, .16);
}

/* --------------------------------------------------------------- headings --- */

html body .hll-dl .hll-dl-sec { margin: 0 0 38px !important; scroll-margin-top: 90px; }

html body .hll-dl .hll-dl-head {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var(--dl-line-2) !important;
}

html body .hll-dl .hll-dl-h {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: -.01em;
	color: var(--dl-fg) !important;
	border: 0 !important;
	background: none !important;
}

/* The members heading is deliberately quieter than the licences heading. */
html body .hll-dl .hll-dl-h-quiet {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--dl-fg-2) !important;
}

html body .hll-dl .hll-dl-count {
	margin: 0 !important;
	font-size: 12px !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

html body .hll-dl .hll-dl-empty {
	margin: 0 !important;
	padding: 26px 16px !important;
	border: 1px dashed var(--dl-line) !important;
	border-radius: var(--dl-r) !important;
	text-align: center;
	color: var(--dl-mut) !important;
	font-size: 14px !important;
}

/* ================================================================ LICENCE === */

html body .hll-dl .hll-dl-lics {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: var(--dl-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

@media (min-width: 760px) {
	html body .hll-dl .hll-dl-lics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1240px) {
	html body .hll-dl .hll-dl-lics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

html body .hll-dl .hll-dl-lic {
	position: relative;
	display: flex !important;
	flex-direction: column;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--dl-line) !important;
	border-radius: var(--dl-r) !important;
	background: linear-gradient(180deg, var(--dl-card), var(--dl-card-2)) !important;
	box-shadow: 0 18px 38px -26px rgba(0, 0, 0, .9);
}

/* The band: the issuing authority, printed across the head of the card. */
html body .hll-dl .hll-dl-lic-band {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 14px !important;
	border-bottom: 1px solid var(--dl-line-2) !important;
	background: linear-gradient(90deg, rgba(255, 125, 33, .16), rgba(255, 176, 46, .05) 60%, transparent) !important;
}

html body .hll-dl .hll-dl-lic-issuer {
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dl-acc-2) !important;
}

html body .hll-dl .hll-dl-lic-kind {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

html body .hll-dl .hll-dl-lic-body {
	display: flex !important;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 14px 12px !important;
}

/* The photo sits in a frame, the way a licence photo does. */
html body .hll-dl .hll-dl-lic-photo {
	flex: none;
	width: 72px;
	height: 88px;
	overflow: hidden;
	border: 1px solid var(--dl-line) !important;
	border-radius: var(--dl-r-sm) !important;
	background: rgba(0, 0, 0, .25) !important;
}

html body .hll-dl .hll-dl-lic-photo img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
}

html body .hll-dl .hll-dl-lic-main { flex: 1; min-width: 0; }

html body .hll-dl .hll-dl-lic-name {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: var(--dl-fg) !important;
	overflow-wrap: anywhere;
}

/* The number is monospace because a licence number is a serial, and a serial in
   a proportional face reads as a word. */
html body .hll-dl .hll-dl-lic-no {
	margin: 3px 0 12px !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 12.5px !important;
	letter-spacing: .1em;
	color: var(--dl-acc) !important;
}

html body .hll-dl .hll-dl-lic-fields {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 12px;
	margin: 0 !important;
	padding: 0 !important;
}

html body .hll-dl .hll-dl-lic-field { min-width: 0; margin: 0 !important; }

html body .hll-dl .hll-dl-lic-field dt {
	margin: 0 0 2px !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

html body .hll-dl .hll-dl-lic-field dd {
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--dl-fg-2) !important;
	overflow-wrap: anywhere;
}

/* Distance is the headline figure on the card, so it is the one that is bigger. */
html body .hll-dl .hll-dl-lic-field:nth-child(2) dd {
	font-size: 15px !important;
	color: var(--dl-fg) !important;
}

/* ------------------------------------------------------------- rank chip --- */

/* The tier colour arrives as --rk from the portal's own rank map, so Elite is the
   same purple here as it is in the driver portal without a line of CSS crossing
   between the two. The chip is a dot plus a name rather than a filled pill: on a
   document, a filled colour block reads as a status stamp, and there is already
   one of those on this card. */
html body .hll-dl .hll-dl-rank {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	color: var(--rk, var(--dl-fg-2)) !important;
}

html body .hll-dl .hll-dl-rank-dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

html body .hll-dl .hll-dl-rank span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit !important;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	html body .hll-dl .hll-dl-rank-dot { box-shadow: none; }
}

/* ------------------------------------------------------- view driver link --- */

html body .hll-dl .hll-dl-lic-view {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	margin: 0 14px 2px !important;
	padding: 6px 0 !important;
	background: none !important;
	border: 0 !important;
	color: var(--dl-mut) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	text-decoration: none !important;
	transition: color .15s, gap .15s;
}

html body .hll-dl .hll-dl-lic-view svg { width: 13px; height: 13px; flex: none; }

html body .hll-dl a.hll-dl-lic-view:hover,
html body .hll-dl a.hll-dl-lic-view:focus-visible {
	color: var(--dl-acc) !important;
	gap: 7px;
}

html body .hll-dl a.hll-dl-lic-view:focus-visible {
	outline: 2px solid var(--dl-acc);
	outline-offset: 3px;
	border-radius: 4px;
}

/* The stamp. Angled and translucent, the way a stamp lands on a document. */
html body .hll-dl .hll-dl-lic-stamp {
	position: absolute;
	right: 10px;
	/* Above the strip AND above the view link, which shares that row. */
	bottom: 52px;
	padding: 4px 11px !important;
	border: 2px solid currentColor !important;
	border-radius: 5px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	transform: rotate(-8deg);
	opacity: .85;
	pointer-events: none;
}

html body .hll-dl .hll-dl-lic.is-valid .hll-dl-lic-stamp { color: var(--dl-ok) !important; }
html body .hll-dl .hll-dl-lic.is-void  .hll-dl-lic-stamp { color: var(--dl-void) !important; }

/* A void licence is visibly spent: the card desaturates and the accent cools. */
html body .hll-dl .hll-dl-lic.is-void { opacity: .72; }
html body .hll-dl .hll-dl-lic.is-void .hll-dl-lic-band { background: rgba(255, 255, 255, .03) !important; }
html body .hll-dl .hll-dl-lic.is-void .hll-dl-lic-issuer { color: var(--dl-mut) !important; }
html body .hll-dl .hll-dl-lic.is-void .hll-dl-lic-no { color: var(--dl-mut) !important; }
html body .hll-dl .hll-dl-lic.is-void .hll-dl-lic-photo img { filter: grayscale(1); }

/* The strip along the foot. */
html body .hll-dl .hll-dl-lic-strip {
	display: flex !important;
	align-items: flex-end;
	gap: 2px;
	height: 22px;
	margin: auto 0 0 !important;
	padding: 0 14px 8px !important;
	overflow: hidden;
}

html body .hll-dl .hll-dl-lic-strip i {
	display: block;
	height: 100%;
	background: var(--dl-line) !important;
	border-radius: 1px;
}

html body .hll-dl .hll-dl-lic.is-valid .hll-dl-lic-strip i:nth-child(3n) { background: rgba(255, 125, 33, .35) !important; }

/* ================================================================= MEMBER === */

html body .hll-dl .hll-dl-mems {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

@media (min-width: 620px) {
	html body .hll-dl .hll-dl-mems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	html body .hll-dl .hll-dl-mems { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Portrait, centred, round — structurally nothing like a licence, so the two are
   never confused at a glance. */
html body .hll-dl .hll-dl-mem {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0 !important;
	padding: 18px 12px 14px !important;
	border: 1px solid var(--dl-line-2) !important;
	border-radius: var(--dl-r) !important;
	background: rgba(255, 255, 255, .025) !important;
}

html body .hll-dl .hll-dl-mem-photo {
	width: 64px;
	height: 64px;
	overflow: hidden;
	margin: 0 0 10px !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, .25) !important;
}

html body .hll-dl .hll-dl-mem-photo img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 50% !important;
	object-fit: cover;
}

html body .hll-dl .hll-dl-mem-name {
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--dl-fg) !important;
	overflow-wrap: anywhere;
}

html body .hll-dl .hll-dl-mem-since {
	margin: 3px 0 10px !important;
	font-size: 11px !important;
	color: var(--dl-mut) !important;
}

html body .hll-dl .hll-dl-mem-tag {
	display: inline-flex !important;
	align-items: center;
	padding: 2px 9px !important;
	border: 1px solid var(--dl-line) !important;
	border-radius: 5px !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
	background: transparent !important;
}

/* 2.15.0 — the member card's way through to the person. Same quiet grammar as the
   licence's .hll-dl-lic-view: a text link, not a button, colour lifting to the
   accent and the gap opening a little on hover so the chevron leans forward.
   Centred here rather than left-aligned, because a member card is a portrait and
   everything else on it is centred. min-height keeps the grid rows even when a
   member has no profile address and therefore no link. */

html body .hll-dl .hll-dl-mem-view {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	margin: 10px 0 0 !important;
	padding: 4px 0 !important;
	background: none !important;
	border: 0 !important;
	color: var(--dl-mut) !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	text-decoration: none !important;
	transition: color .15s, gap .15s;
}

html body .hll-dl .hll-dl-mem-view svg { width: 12px; height: 12px; flex: none; }

html body .hll-dl a.hll-dl-mem-view:hover,
html body .hll-dl a.hll-dl-mem-view:focus-visible {
	color: var(--dl-acc) !important;
	gap: 7px;
}

html body .hll-dl a.hll-dl-mem-view:focus-visible {
	outline: 2px solid var(--dl-acc);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ============================================================== PAGINATION === */

html body .hll-dl .hll-dl-pager {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 22px 0 0 !important;
	padding: 0 !important;
}

html body .hll-dl .hll-dl-page {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0 12px !important;
	border: 1px solid var(--dl-line) !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: var(--dl-fg-2) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: border-color .15s, color .15s, background-color .15s;
}

html body .hll-dl a.hll-dl-page:hover {
	border-color: var(--dl-acc) !important;
	color: var(--dl-fg) !important;
	background: rgba(255, 125, 33, .08) !important;
}

html body .hll-dl .hll-dl-page.is-here {
	border-color: transparent !important;
	background: var(--dl-acc) !important;
	color: #1a1206 !important;
}

html body .hll-dl .hll-dl-page.is-off { opacity: .32; pointer-events: none; }

html body .hll-dl .hll-dl-page svg { width: 15px; height: 15px; flex: none; }
html body .hll-dl .hll-dl-page-prev svg { transform: rotate(180deg); }

html body .hll-dl .hll-dl-gap { padding: 0 2px !important; color: var(--dl-mut) !important; }

/* On a phone the word labels are dropped: the arrows carry the meaning and the
   numbers stay reachable. */
@media (max-width: 460px) {
	html body .hll-dl .hll-dl-page-prev span,
	html body .hll-dl .hll-dl-page-next span { display: none; }

	html body .hll-dl .hll-dl-page { min-width: 42px; padding: 0 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
	html body .hll-dl .hll-dl-page { transition: none; }
}

/* ---------------------------------------------------- moderation states --- */

/* Three ways a licence can be void, and they do not mean the same thing. Banned
   is the hardest state and reads hardest; suspended is amber because it lifts;
   revoked is the neutral void. The card body already desaturates for all three —
   this is only the stamp and the band. */

html body .hll-dl .hll-dl-lic.is-banned .hll-dl-lic-stamp { color: var(--dl-void) !important; }

html body .hll-dl .hll-dl-lic.is-suspended .hll-dl-lic-stamp { color: #ffb02e !important; }

html body .hll-dl .hll-dl-lic.is-revoked .hll-dl-lic-stamp { color: #ff8a6b !important; }

/* A ban is the only state that marks the whole card, with a hairline down the
   left edge. A visitor scanning a page of licences should be able to see one
   without reading any of them. */
html body .hll-dl .hll-dl-lic.is-banned {
	border-color: rgba(255, 80, 97, .35) !important;
}

html body .hll-dl .hll-dl-lic.is-banned::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--dl-void) !important;
	z-index: 1;
}

/* A suspended licence is coming back, so it is dimmed less than a revoked one. */
html body .hll-dl .hll-dl-lic.is-suspended { opacity: .82; }

/* ============================================================================
   THE COMMUNITY PROFILE

   Same rules as the board above: own prefix (hll-dlp-), own tokens, nothing
   borrowed, every selector `html body` so the site's generic !important rules
   cannot repaint it.

   It also has to sit ON TOP of Ultimate Member's own stylesheet, which is loaded
   for the tabs below — hence the small block at the end that quiets UM's header
   remnants and its emoji tab row. That block reaches only inside .um-profile,
   which is UM's own wrapper, and touches only what would otherwise collide.
   ============================================================================ */

html body .hll-dlp {
	--dl-bg: #23282e;
	--dl-card: #282e35;
	--dl-line: rgba(255, 255, 255, .10);
	--dl-fg: #eef2f7;
	--dl-fg-2: #c3cdd9;
	--dl-mut: #8b97a6;
	--dl-acc: #ff7d21;
	--dl-ok: #25e0b0;
	--dl-void: #ff5061;

	position: relative;
	display: block !important;
	overflow: hidden;
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: 1px solid var(--dl-line) !important;
	border-radius: 16px !important;
	background: var(--dl-card) !important;
	color: var(--dl-fg) !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	text-shadow: none !important;
}

html body .hll-dlp *,
html body .hll-dlp *::before,
html body .hll-dlp *::after { box-sizing: border-box; text-shadow: none !important; }

/* The cover. Held to a band and darkened at the foot so the name below it stays
   legible whatever photo the member uploaded — including a white one. */
html body .hll-dlp .hll-dlp-cover {
	position: relative;
	height: 132px;
	overflow: hidden;
	margin: 0 !important;
	background: linear-gradient(180deg, #2c333b, #262c33) !important;
}

html body .hll-dlp .hll-dlp-cover img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
}

html body .hll-dlp .hll-dlp-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(35, 40, 46, .15) 0%, rgba(40, 46, 53, .96) 100%);
}

/* A profile with no cover gets a quiet accent wash, not a stock photo. */
html body .hll-dlp .hll-dlp-cover-plain {
	height: 96px;
	background: radial-gradient(120% 160% at 0% 0%, rgba(255, 125, 33, .14), transparent 60%), #2a3037 !important;
}

html body .hll-dlp .hll-dlp-head {
	position: relative;
	display: flex !important;
	align-items: flex-end;
	gap: 14px;
	margin: -46px 0 0 !important;
	padding: 0 18px 14px !important;
}

html body .hll-dlp .hll-dlp-avatar {
	flex: none;
	width: 92px;
	height: 92px;
	overflow: hidden;
	border-radius: 18px !important;
	border: 3px solid var(--dl-card) !important;
	background: #1e2329 !important;
	box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9);
}

html body .hll-dlp .hll-dlp-avatar img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
}

html body .hll-dlp .hll-dlp-id { flex: 1; min-width: 0; padding-bottom: 4px; }

html body .hll-dlp .hll-dlp-name {
	margin: 0 0 7px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 21px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	letter-spacing: -.015em;
	color: var(--dl-fg) !important;
	overflow-wrap: anywhere;
}

html body .hll-dlp .hll-dlp-chips {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
}

/* A chip, not a banner. Outlined so the colour marks a state rather than
   filling a strip across the page. */
html body .hll-dlp .hll-dlp-chip {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	padding: 3px 9px !important;
	border: 1px solid currentColor !important;
	border-radius: 6px !important;
	background: transparent !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .03em;
	line-height: 1.6 !important;
	color: var(--dl-mut) !important;
}

html body .hll-dlp .hll-dlp-chip svg { width: 12px; height: 12px; flex: none; }
html body .hll-dlp .hll-dlp-chip.is-ok   { color: var(--dl-ok) !important; }
html body .hll-dlp .hll-dlp-chip.is-bad  { color: var(--dl-void) !important; }
html body .hll-dlp .hll-dlp-chip.is-wait { color: #ffb02e !important; }
html body .hll-dlp .hll-dlp-chip.is-rank { color: var(--rk, var(--dl-fg-2)) !important; }

html body .hll-dlp .hll-dlp-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor !important;
	flex: none;
}

html body .hll-dlp .hll-dlp-edit {
	align-self: flex-end;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 8px 13px !important;
	border: 1px solid var(--dl-line) !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: var(--dl-fg-2) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	white-space: nowrap;
}

html body .hll-dlp a.hll-dlp-edit:hover { border-color: var(--dl-acc) !important; color: var(--dl-fg) !important; }
html body .hll-dlp .hll-dlp-edit svg { width: 14px; height: 14px; }

/* The facts row. Labelled values, the way the licence card reads. */
html body .hll-dlp .hll-dlp-facts {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--dl-line) !important;
	background: var(--dl-line) !important;
}

@media (min-width: 620px) {
	html body .hll-dlp .hll-dlp-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

html body .hll-dlp .hll-dlp-fact {
	display: flex !important;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px !important;
	background: var(--dl-card) !important;
}

html body .hll-dlp .hll-dlp-fact-k {
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

html body .hll-dlp .hll-dlp-fact-v {
	font-size: 15px !important;
	font-weight: 800 !important;
	color: var(--dl-fg) !important;
	overflow-wrap: anywhere;
}

/* The links. Rows, monochrome, the person first and their handles second. */
html body .hll-dlp .hll-dlp-links {
	display: block !important;
	margin: 0 !important;
	padding: 6px 8px 10px !important;
	border-top: 1px solid var(--dl-line) !important;
}

html body .hll-dlp .hll-dlp-link {
	display: flex !important;
	align-items: center;
	gap: 11px;
	padding: 11px 10px !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: var(--dl-fg-2) !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: background-color .15s, color .15s;
}

html body .hll-dlp a.hll-dlp-link:hover { background: rgba(255, 255, 255, .05) !important; color: var(--dl-fg) !important; }

html body .hll-dlp .hll-dlp-link svg { width: 17px; height: 17px; flex: none; color: var(--dl-mut) !important; }
html body .hll-dlp .hll-dlp-link svg:last-child { width: 13px; height: 13px; margin-left: auto; }

html body .hll-dlp .hll-dlp-link-k {
	flex: none;
	min-width: 74px;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

html body .hll-dlp .hll-dlp-link-v {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600 !important;
	color: inherit !important;
}

/* ------------------------------------------------- quieting what UM leaves --- */

/* If the header removal ever fails — a UM rename, a plugin load-order change —
   this makes sure a profile shows ONE header rather than two. */
html body .um-profile .um-header { display: none !important; }

/* The tab row. UM's add-ons set emoji as tab icons, which Android draws in its
   own style at its own weight: the loudest row on the page is the one that
   should be quietest. The glyph is hidden and the label carries the tab. */
html body .um-profile .um-profile-nav-item i,
html body .um-profile .um-profile-nav-item .um-tab-emoji { display: none !important; }

html body .um-profile .um-profile-nav {
	border: 0 !important;
	background: transparent !important;
}

html body .um-profile .um-profile-nav-item a {
	border-radius: 9px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	text-shadow: none !important;
}

/* THE HEAD, ON A PHONE.

   1.3.0 stacked this — avatar on one line, name and chips beneath — because
   side by side the chips wrapped one word per line and pushed the name up over
   the cover.

   Stacking was the wrong fix. It left a large empty area to the right of the
   photo doing nothing while the card grew taller than it needed to be. The chips
   belong in that space.

   What actually makes them fit is three smaller things: a slightly smaller
   avatar, chips that never break mid-label, and moving the Edit button out of
   the row onto its own line — it was taking 120px of the width the chips needed.
*/
@media (max-width: 620px) {
	html body .hll-dlp .hll-dlp-cover { height: 104px; }
	html body .hll-dlp .hll-dlp-cover-plain { height: 78px; }

	html body .hll-dlp .hll-dlp-head {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 12px;
		margin-top: -34px !important;
		padding: 0 14px 13px !important;
	}

	html body .hll-dlp .hll-dlp-avatar {
		width: 76px;
		height: 76px;
		border-width: 3px !important;
	}

	html body .hll-dlp .hll-dlp-id {
		flex: 1 1 0;
		min-width: 0;
		padding-bottom: 1px;
	}

	html body .hll-dlp .hll-dlp-name {
		font-size: 19px !important;
		margin-bottom: 7px !important;
	}

	html body .hll-dlp .hll-dlp-chips { gap: 5px; }

	/* Never break a label across lines — that was the whole original failure. */
	html body .hll-dlp .hll-dlp-chip {
		white-space: nowrap;
		padding: 3px 8px !important;
		font-size: 10.5px !important;
		gap: 4px;
	}

	html body .hll-dlp .hll-dlp-chip svg { width: 11px; height: 11px; }

	/* Out of the row, onto its own line: it was eating the width the chips need,
	   and a full-width button is a better target anyway. */
	html body .hll-dlp .hll-dlp-edit {
		order: 3;
		width: 100%;
		justify-content: center;
		align-self: stretch;
	}
}

/* ------------------------------------------------- followers / following --- */

html body .hll-dlp .hll-dlp-social {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--dl-line) !important;
	background: var(--dl-line) !important;
}

html body .hll-dlp .hll-dlp-social-i {
	display: flex !important;
	align-items: baseline;
	gap: 8px;
	padding: 11px 18px !important;
	background: var(--dl-card) !important;
}

html body .hll-dlp .hll-dlp-social-n {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--dl-fg) !important;
}

html body .hll-dlp .hll-dlp-social-k {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

/* --------------------------------------- the legacy field cards, retired --- */

/* Discord, TikTok and YouTube already appear in the links row at the top of the
   card. UM prints them again below as bordered panels whose value repeats the
   label — "TikTok / TikTok". One copy, in the better place. */
html body .um-profile .um-field-discord,
html body .um-profile .um-field-tiktok,
html body .um-profile .um-field-youtube,
html body .um-profile .um-field[data-key="discord"],
html body .um-profile .um-field[data-key="tiktok"],
html body .um-profile .um-field[data-key="youtube"] { display: none !important; }

/* ------------------------------------------- the portal's quick access --- */

/* The driver portal attaches its own nav at um_profile_content_main, and it is
   worth keeping: it knows whether to offer "Join VTC" or the roster, which this
   plugin has no business re-deciding. So its MARKUP stays and only its surface
   changes — the tiles become part of this card's system rather than a separate
   blue-on-grey box from another product. */
html body .um-profile .hll-jt-portal {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
}

html body .um-profile .hll-um-nav {
	border: 1px solid var(--dl-line, rgba(255,255,255,.10)) !important;
	border-radius: 16px !important;
	background: #282e35 !important;
	padding: 0 !important;
	overflow: hidden;
	box-shadow: none !important;
}

html body .um-profile .hll-um-nav-head {
	display: flex !important;
	align-items: baseline;
	gap: 9px;
	padding: 13px 18px !important;
	margin: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
	background: transparent !important;
}

html body .um-profile .hll-um-nav-title {
	font-size: 14px !important;
	font-weight: 800 !important;
	color: #eef2f7 !important;
	text-shadow: none !important;
}

html body .um-profile .hll-um-nav-sub {
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #8b97a6 !important;
	text-shadow: none !important;
}

html body .um-profile .hll-um-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: rgba(255, 255, 255, .08) !important;
}

@media (min-width: 560px) {
	html body .um-profile .hll-um-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tiles become rows in a grid: no floating blue squares, no shadow, no lift. */
html body .um-profile .hll-um-link {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px !important;
	min-height: 82px;
	padding: 14px 8px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #282e35 !important;
	box-shadow: none !important;
	color: #c3cdd9 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: background-color .15s, color .15s;
}

html body .um-profile a.hll-um-link:hover {
	background: rgba(255, 255, 255, .05) !important;
	color: #fff !important;
}

html body .um-profile .hll-um-link .hll-um-ic {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #ff7d21 !important;
}

html body .um-profile .hll-um-link .hll-um-ic svg { width: 100% !important; height: 100% !important; }

html body .um-profile .hll-um-link .hll-um-lbl {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	color: inherit !important;
	text-shadow: none !important;
}

/* ------------------------------------------------------------- the tabs --- */

/* Kept working, restyled completely: a scrollable pill row instead of a grid of
   emoji squares. The glyphs were hidden in 1.3.0; this is the row itself. */
/* WRAPS, never scrolls.

   A horizontal scroller hides half the tabs behind a swipe nobody knows to make,
   while empty space sits directly underneath. Wrapping uses that space: every tab
   is visible at once, at any width, on a phone and on a desktop.

   The pills size to their content and the rows fill left to right, so eleven tabs
   settle into three tidy rows on a phone and one or two on a wide screen. */
html body .um-profile .um-profile-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch;
	gap: 6px;
	overflow: visible !important;
	margin: 0 0 14px !important;
	padding: 6px !important;
	border: 1px solid rgba(255, 255, 255, .10) !important;
	border-radius: 14px !important;
	background: #282e35 !important;
}

/* Each tab takes the width it needs and shares the leftover, so a row never ends
   with one pill stranded far from its neighbours. */
html body .um-profile .um-profile-nav-item {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: 100%;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* NOT display on every anchor.

   1.7.0 set display:inline-flex !important on `.um-profile-nav-item a`, which
   forced UM's mobile icon-only anchor visible alongside its desktop labelled one
   — the doubled icons. The JS now removes the spare anchor, so this styles
   whichever one survives without overriding anything UM hides. */
html body .um-profile .um-profile-nav-item > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: #8b97a6 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	white-space: nowrap;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-profile .um-profile-nav-item a:hover {
	background: rgba(255, 255, 255, .06) !important;
	color: #eef2f7 !important;
}

html body .um-profile .um-profile-nav-item.active a,
html body .um-profile .um-profile-nav-item a.active {
	background: #ff7d21 !important;
	color: #1a1206 !important;
}

/* The label sits in a <span>, and the site's halo rule targets spans — so the
   reset has to reach descendants, not just the anchor. */
html body .um-profile .um-profile-nav-item > a * {
	text-shadow: none !important;
	color: inherit !important;
	background: transparent !important;
}

/* UM's clearfix leaves an empty band under the row once the items are inline. */
html body .um-profile .um-profile-nav .um-clear { display: none !important; }

/* The little unread pip UM puts on a tab keeps working, in our colours. */
html body .um-profile .um-tab-notifier {
	background: #ff5061 !important;
	color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* The drawn tab marks that replaced the add-ons' PNGs. */
html body .um-profile .um-profile-nav-item a .hll-dl-tabic {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: none;
	color: inherit !important;
}

html body .um-profile .um-profile-nav-item a .hll-dl-tabic svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

/* Anything the add-ons print inside a tab that is not text or our mark. */
html body .um-profile .um-profile-nav-item a img { display: none !important; }

/* --------------------------------------------- inputs, against the site --- */

/* The search fields came out pink-grey. `all: unset` resets the property values
   but carries no importance of its own, so the site stylesheet's
   `html body input { background: ... !important }` wins straight back.
   Stated explicitly, marked, at a weight that holds. */
html body .hll-dl .hll-dl-search-in,
html body .hll-rad .hll-rad-search input,
html body .hll-rad input[type="search"],
html body .hll-rad input[type="range"] {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--dl-fg, #eef2f7) !important;
	text-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	min-height: 0 !important;
	line-height: normal !important;
}

html body .hll-rad .hll-rad-search input { color: var(--r-fg, #eef2f7) !important; }

/* The range tracks have to keep their own painting, which the reset above would
   otherwise strip on some browsers. */
html body .hll-rad input[type="range"]::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, .12) !important;
}

html body .hll-rad input[type="range"]::-moz-range-track {
	background: rgba(255, 255, 255, .12) !important;
}

/* ------------------------------------ followers, follow button, polish --- */

/* The row can hold two counts, or two counts and a Follow button. Both have to
   sit right, so the columns are declared by content rather than fixed at two. */
html body .hll-dlp .hll-dlp-social.has-follow {
	grid-template-columns: 1fr 1fr auto;
}

html body .hll-dlp a.hll-dlp-social-i {
	text-decoration: none !important;
	transition: background-color .15s;
}

html body .hll-dlp a.hll-dlp-social-i:hover { background: rgba(255, 255, 255, .045) !important; }

html body .hll-dlp .hll-dlp-follow {
	display: flex !important;
	align-items: center;
	padding: 8px 14px !important;
	background: var(--dl-card) !important;
}

/* UM's own button classes are replaced rather than fought with — it arrives
   carrying um-button um-alt, which the add-on's stylesheet paints blue. */
html body .hll-dlp .hll-dlp-follow-b,
html body .hll-dlp a.hll-dlp-follow-b {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 9px !important;
	background: var(--dl-acc) !important;
	color: #1a1206 !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	white-space: nowrap;
}

html body .hll-dlp a.hll-dlp-follow-b:hover { filter: brightness(1.08); }

/* The empty bar, once its contents have been moved out. */
html body .um-profile .um-profile-navbar.um-followers-bar:empty,
html body .um-profile .um-followers-links:empty { display: none !important; }

/* --------------------------------------- the portal grids, orphan cells --- */

/* Seven quick-access tiles in a two-column grid leaves the last one alone with a
   dead cell beside it. The orphan spans the row instead — an empty cell reads as
   a missing feature, which is worse than a wide tile. */
html body .um-profile .hll-um-grid > a:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@media (min-width: 560px) {
	html body .um-profile .hll-um-grid > a:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* The portal's second panel — HLL Live — gets the same surface as the first, so
   the two read as one system rather than two plugins stacked. */
html body .um-profile .hll-jt-portal + .hll-jt-portal,
html body .um-profile .hll-um-live {
	margin-top: 12px !important;
}

/* ============================================================================
   Restored in 2.1.0.

   A 2.0.0 edit replaced a block by slicing between two comment markers, and the
   sections that had been appended between them — the links rows, the live strip,
   the progress bar, the achievements and the rank ring — went with it. They are
   written out again here in full rather than patched back in pieces.
   ============================================================================ */

/* ------------------------------------------------------------- the links --- */

html body .hll-dlp .hll-dlp-links {
	display: block !important;
	margin: 0 !important;
	padding: 6px 8px 10px !important;
	border-top: 1px solid var(--dl-line) !important;
}

html body .hll-dlp .hll-dlp-link {
	display: flex !important;
	align-items: center;
	gap: 11px;
	padding: 11px 10px !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: var(--dl-fg-2) !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: background-color .15s, color .15s;
}

html body .hll-dlp a.hll-dlp-link:hover {
	background: rgba(255, 255, 255, .05) !important;
	color: var(--dl-fg) !important;
}

html body .hll-dlp .hll-dlp-link svg { width: 17px; height: 17px; flex: none; color: var(--dl-mut) !important; }
html body .hll-dlp .hll-dlp-link svg:last-child { width: 13px; height: 13px; margin-left: auto; }

html body .hll-dlp .hll-dlp-link-k {
	flex: none;
	min-width: 74px;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

html body .hll-dlp .hll-dlp-link-v {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600 !important;
	color: inherit !important;
}

/* ---------------------------------------------------------- the live strip --- */

html body .hll-dlp .hll-dlp-live {
	display: flex !important;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
	padding: 10px 18px !important;
	border-top: 1px solid var(--dl-line) !important;
	background: rgba(37, 224, 176, .06) !important;
	font-size: 13px !important;
}

html body .hll-dlp .hll-dlp-live-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dl-ok) !important;
	box-shadow: 0 0 0 3px rgba(37, 224, 176, .18);
	animation: hll-dlp-pulse 2s ease-in-out infinite;
}

@keyframes hll-dlp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
	html body .hll-dlp .hll-dlp-live-dot { animation: none; }
}

html body .hll-dlp .hll-dlp-live-k {
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dl-ok) !important;
}

html body .hll-dlp .hll-dlp-live-v {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600 !important;
	color: var(--dl-fg-2) !important;
}

/* ------------------------------------------------------------- progress --- */

html body .hll-dlp .hll-dlp-prog {
	margin: 0 !important;
	padding: 14px 18px !important;
	border-top: 1px solid var(--dl-line) !important;
}

html body .hll-dlp .hll-dlp-prog-top {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 9px !important;
}

html body .hll-dlp .hll-dlp-prog-k {
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

html body .hll-dlp .hll-dlp-prog-v {
	font-size: 14px !important;
	font-weight: 800 !important;
	color: var(--rk, var(--dl-fg)) !important;
}

html body .hll-dlp .hll-dlp-bar {
	position: relative;
	height: 7px;
	overflow: hidden;
	margin: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .07) !important;
}

html body .hll-dlp .hll-dlp-bar i {
	display: block;
	height: 100%;
	border-radius: 999px !important;
	background: linear-gradient(90deg, color-mix(in srgb, var(--rk, #ff7d21) 55%, transparent), var(--rk, #ff7d21)) !important;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	html body .hll-dlp .hll-dlp-bar i { background: var(--rk, #ff7d21) !important; }
}

html body .hll-dlp .hll-dlp-prog-foot {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 7px 0 0 !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	color: var(--dl-mut) !important;
}

/* --------------------------------------------------------- achievements --- */

html body .hll-dlp .hll-dlp-awards {
	margin: 0 !important;
	padding: 14px 18px !important;
	border-top: 1px solid var(--dl-line) !important;
}

html body .hll-dlp .hll-dlp-awards-k {
	display: block !important;
	margin: 0 0 9px !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

html body .hll-dlp .hll-dlp-awards-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: 7px;
}

html body .hll-dlp .hll-dlp-award {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 6px 11px !important;
	border: 1px solid var(--dl-line) !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, .03) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--dl-fg-2) !important;
	cursor: default;
}

html body .hll-dlp .hll-dlp-award svg {
	width: 13px;
	height: 13px;
	flex: none;
	color: var(--dl-acc) !important;
}

/* ------------------------------------------------------- the rank ring --- */

html body .hll-dlp.has-rank .hll-dlp-avatar {
	border-color: var(--rk, var(--dl-card)) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--rk, #ff7d21) 20%, transparent),
	            0 12px 26px -14px rgba(0, 0, 0, .9);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	html body .hll-dlp.has-rank .hll-dlp-avatar {
		box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9);
	}
}

/* ============================================================================
   2.2.0 — hierarchy, brand marks, friends list, and the dead space.
   ============================================================================ */

/* ------------------------------------------------------- the brand marks --- */

/* Each carries its own brand colour. This is the one place on the profile where
   the colour is not ours to choose — a monochrome TikTok is just a note. */
/* FILLED with the brand colour, white glyph on top — which is how every one of
   these brands presents its own mark. A tinted tile with a coloured glyph reads
   as a muted version of the logo; filled, it reads as the logo.

   The centring needed stating rather than assuming: an inline SVG sits on the
   text baseline by default, so it rode high inside the tile. line-height 0 on the
   tile and display:block on the glyph take it off the baseline entirely, and the
   flex centring then does what it looks like it should. */
html body .hll-dlp .hll-dlp-brand {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	flex: none !important;
	padding: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--bc, #3a424c) !important;
	color: #ffffff !important;
	overflow: hidden;
}

/* `color` as well as `fill`: the links row sets colour on every descendant svg,
   and fill:currentColor then resolves to THAT — which is why the glyphs came out
   muted grey on their brand tiles instead of white. */
html body .hll-dlp .hll-dlp-link .hll-dlp-brand svg,
html body .hll-dlp .hll-dlp-brand svg {
	width: 17px !important;
	height: 17px !important;
	display: block !important;
	margin: 0 !important;
	flex: none !important;
	color: #ffffff !important;
	fill: #ffffff !important;
	stroke: none !important;
}

/* TikTok's tile is black, so it needs an edge to separate it from the card. */
html body .hll-dlp .hll-dlp-link .hll-dlp-brand[style*="#000000"] {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

/* ------------------------------------------- followers, made to be seen --- */

/* They were the quietest thing on the card — same weight as a date. Follower
   counts are one of the few numbers a visitor actually looks for, so the figure
   is bigger, the label sits under it, and the accent marks it as a live count
   rather than a static fact. */
html body .hll-dlp .hll-dlp-social {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--dl-line) !important;
}

html body .hll-dlp .hll-dlp-social-i {
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	padding: 13px 18px !important;
}

html body .hll-dlp .hll-dlp-social-n {
	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	color: var(--dl-acc) !important;
	font-variant-numeric: tabular-nums;
}

html body .hll-dlp .hll-dlp-social-k {
	font-size: 9.5px !important;
	letter-spacing: .14em;
}

html body .hll-dlp .hll-dlp-social.has-follow {
	grid-template-columns: 1fr 1fr auto;
}

/* ----------------------------------------------- the tabs, as small cards --- */

html body .um-profile .um-profile-nav {
	gap: 7px;
	padding: 7px !important;
}

html body .um-profile .um-profile-nav-item > a {
	flex-direction: row;
	min-height: 46px;
	padding: 0 13px !important;
	border: 1px solid rgba(255, 255, 255, .07) !important;
	background: rgba(255, 255, 255, .022) !important;
	border-radius: 11px !important;
}

html body .um-profile .um-profile-nav-item > a:hover {
	border-color: rgba(255, 125, 33, .4) !important;
	background: rgba(255, 125, 33, .07) !important;
}

html body .um-profile .um-profile-nav-item.active > a,
html body .um-profile .um-profile-nav-item > a.active {
	border-color: transparent !important;
	box-shadow: 0 6px 16px -8px rgba(255, 125, 33, .7);
}

/* The icon takes the accent on every tab, so the row reads as a set of actions
   rather than a wall of grey text. */
html body .um-profile .um-profile-nav-item > a .hll-dl-tabic { color: var(--dl-acc, #ff7d21) !important; }
html body .um-profile .um-profile-nav-item.active > a .hll-dl-tabic { color: inherit !important; }

/* --------------------------------------------------------- the dead space --- */

/* UM reserves the profile body even when the active tab prints nothing into it,
   leaving a tall empty band between the tabs and whatever follows. Collapsed
   when it is genuinely empty — never when it has content. */
html body .um-profile .um-profile-body {
	min-height: 0 !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

html body .um-profile .um-profile-body:empty { display: none !important; }

html body .um-profile .um-profile-body > .um-clear:only-child { display: none !important; }

html body .um-profile .um-profile-nav { margin-bottom: 10px !important; }

/* --------------------------------------------------- the friends / member list --- */

/* UM's friends, followers and member lists all share one template shape: a photo,
   a name, a button and a divider. Left alone it is a centred column of tiny
   photos with a teal button under each and a rule between — which is a list from
   2014. Turned into rows: photo, name, action, no dividers.

   All three class families are covered because the add-ons differ on which one
   they use, and a rule that matches nothing costs nothing. */
html body .um-profile .um-members,
html body .um-profile .um-friends-user,
html body .um-profile .um-followers-user {
	border: 0 !important;
	background: transparent !important;
}

html body .um-profile .um-member,
html body .um-profile .um-friends-user,
html body .um-profile .um-followers-user {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	margin: 0 0 8px !important;
	padding: 10px 12px !important;
	border: 1px solid var(--dl-line, rgba(255,255,255,.10)) !important;
	border-bottom: 1px solid var(--dl-line, rgba(255,255,255,.10)) !important;
	border-radius: 12px !important;
	background: #282e35 !important;
	text-align: left !important;
	float: none !important;
}

html body .um-profile .um-member-photo,
html body .um-profile .um-friends-user-photo,
html body .um-profile .um-followers-user-photo {
	flex: none !important;
	width: 46px !important;
	height: 46px !important;
	margin: 0 !important;
	float: none !important;
}

html body .um-profile .um-member-photo img,
html body .um-profile .um-friends-user-photo img,
html body .um-profile .um-followers-user-photo img {
	width: 46px !important;
	height: 46px !important;
	border-radius: 12px !important;
	object-fit: cover;
	display: block !important;
}

html body .um-profile .um-member-name,
html body .um-profile .um-friends-user-name,
html body .um-profile .um-followers-user-name {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .um-profile .um-member-name a,
html body .um-profile .um-friends-user-name a,
html body .um-profile .um-followers-user-name a {
	color: var(--dl-fg, #eef2f7) !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-profile .um-member-meta,
html body .um-profile .um-member-card-b,
html body .um-profile .um-friends-user-bio,
html body .um-profile .um-followers-user-bio { display: none !important; }

/* The action button: outlined, small, on the right where an action belongs. */
html body .um-profile .um-member-actions,
html body .um-profile .um-friends-user-btn,
html body .um-profile .um-followers-user-btn {
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
}

html body .um-profile .um-member-actions a,
html body .um-profile .um-friends-user-btn a,
html body .um-profile .um-followers-user-btn a,
html body .um-profile .um-friends-btn a,
html body .um-profile a.um-friends-unfriend,
html body .um-profile a.um-friends-add {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 34px !important;
	min-width: 0 !important;
	padding: 0 14px !important;
	border: 1px solid rgba(255, 125, 33, .45) !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: var(--dl-acc, #ff7d21) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	white-space: nowrap;
}

html body .um-profile .um-member-actions a:hover,
html body .um-profile .um-friends-user-btn a:hover,
html body .um-profile .um-followers-user-btn a:hover {
	background: rgba(255, 125, 33, .12) !important;
}

/* The sub-navigation above a list — My Friends / Requests / Sent. */
html body .um-profile .um-profile-subnav {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

html body .um-profile .um-profile-subnav a {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	padding: 8px 13px !important;
	border: 1px solid var(--dl-line, rgba(255,255,255,.10)) !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: var(--dl-fg-2, #c3cdd9) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-profile .um-profile-subnav a.active,
html body .um-profile .um-profile-subnav a.current {
	background: var(--dl-acc, #ff7d21) !important;
	border-color: transparent !important;
	color: #1a1206 !important;
}

/* The count bubble each sub-nav link carries. */
html body .um-profile .um-profile-subnav a span {
	padding: 1px 7px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .09) !important;
	font-size: 10.5px !important;
	color: inherit !important;
}

/* ------------------------------------------- UM's own buttons and forms --- */

/* Update Profile and Cancel arrive as .um-button and .um-button.um-alt, painted
   by UM's stylesheet in its own orange and teal. The teal Cancel in particular
   belongs to no palette on this site.

   Primary takes the accent; Cancel becomes what a cancel should be — outlined and
   quiet, so the destructive-looking colour stops competing with the action the
   visitor actually came to take. */
html body .um-profile .um-button,
html body .um-profile input[type="submit"].um-button,
html body .um-profile a.um-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 46px !important;
	min-width: 140px;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: var(--dl-acc, #ff7d21) !important;
	color: #1a1206 !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: .01em;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: 0 8px 20px -12px rgba(255, 125, 33, .9) !important;
	transition: filter .15s, background-color .15s;
}

html body .um-profile .um-button:hover { filter: brightness(1.07); }

html body .um-profile .um-button.um-alt,
html body .um-profile a.um-button.um-alt,
html body .um-profile input[type="submit"].um-button.um-alt {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .16) !important;
	color: var(--dl-fg-2, #c3cdd9) !important;
	box-shadow: none !important;
}

html body .um-profile .um-button.um-alt:hover {
	border-color: rgba(255, 255, 255, .3) !important;
	background: rgba(255, 255, 255, .05) !important;
	color: var(--dl-fg, #eef2f7) !important;
}

/* The row they sit in. */
html body .um-profile .um-col-alt,
html body .um-profile .um-col-alt-b,
html body .um-profile .um-button-group {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	text-align: left !important;
}

@media (max-width: 520px) {
	html body .um-profile .um-button,
	html body .um-profile a.um-button,
	html body .um-profile input[type="submit"].um-button { flex: 1 1 calc(50% - 5px); min-width: 0; }
}

/* The edit form's own fields, so the content matches the buttons. */
html body .um-profile .um-form input[type="text"],
html body .um-profile .um-form input[type="url"],
html body .um-profile .um-form input[type="email"],
html body .um-profile .um-form input[type="number"],
html body .um-profile .um-form textarea,
html body .um-profile .um-form select {
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .04) !important;
	color: var(--dl-fg, #eef2f7) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 11px 13px !important;
	min-height: 44px;
}

html body .um-profile .um-form input:focus,
html body .um-profile .um-form textarea:focus,
html body .um-profile .um-form select:focus {
	border-color: var(--dl-acc, #ff7d21) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(255, 125, 33, .14) !important;
}

html body .um-profile .um-form .um-field-label label,
html body .um-profile .um-form .um-field-label {
	color: var(--dl-mut, #8b97a6) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-shadow: none !important;
}

html body .um-profile .um-form .um-field {
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* ============================================================================
   2.5.0 — UM's live controls, living in our card.

   The photo, the cover and the pencil menu are UM's own nodes, moved here by the
   footer script. They are styled to fit, never rebuilt: every listener, modal and
   nonce UM attached to them still works because they are the same elements.
   ============================================================================ */

/* What is left of UM's header once its controls have been taken out. */
html body .um-profile .um-header.hll-dl-spent {
	display: none !important;
}

/* Dropdowns must be able to escape the card. */
html body .hll-dlp.allow-dropdown { overflow: visible !important; }
html body .hll-dlp.allow-dropdown .hll-dlp-cover { overflow: hidden; border-radius: 16px 16px 0 0 !important; }

/* ---------------------------------------------------------- the cover --- */

html body .hll-dlp .hll-dlp-cover.has-um-cover { position: relative; }

html body .hll-dlp .hll-dlp-cover .um-cover {
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

html body .hll-dlp .hll-dlp-cover .um-cover-e {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	background-size: cover !important;
	background-position: center !important;
}

html body .hll-dlp .hll-dlp-cover .um-cover-e img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0 !important;
	margin: 0 !important;
	display: block !important;
}

/* The cover's own uploader — kept reachable, moved to the corner. */
html body .hll-dlp .hll-dlp-cover .um-cover-add,
html body .hll-dlp .hll-dlp-cover .um-cover-overlay {
	position: absolute !important;
	inset: auto 10px 10px auto !important;
	width: auto !important;
	height: auto !important;
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	padding: 7px 12px !important;
	border: 0 !important;
	border-radius: 9px !important;
	background: rgba(0, 0, 0, .55) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	opacity: 1 !important;
	text-shadow: none !important;
	z-index: 3;
}

html body .hll-dlp .hll-dlp-cover .um-cover-add:hover { background: rgba(0, 0, 0, .72) !important; }
html body .hll-dlp .hll-dlp-cover .um-cover-add span { color: #fff !important; }

/* ---------------------------------------------------------- the photo --- */

/* The slot keeps its size and shape; UM's photo fills it, overlay and all. */
html body .hll-dlp .hll-dlp-avatar.has-um-photo { position: relative; overflow: visible !important; }

html body .hll-dlp .hll-dlp-avatar .um-profile-photo {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border: 0 !important;
	border-radius: inherit !important;
	background: transparent !important;
	overflow: visible !important;
}

html body .hll-dlp .hll-dlp-avatar .um-profile-photo-img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	overflow: hidden;
	position: relative;
}

html body .hll-dlp .hll-dlp-avatar .um-profile-photo img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: inherit !important;
	object-fit: cover;
	display: block !important;
}

/* The camera overlay: visible on hover on a pointer device, always on touch —
   a hover-only affordance is invisible on a phone, which is where most of your
   members are. */
html body .hll-dlp .hll-dlp-avatar .um-profile-photo-overlay {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: inherit !important;
	background: rgba(0, 0, 0, .5) !important;
	opacity: 0;
	transition: opacity .15s;
	z-index: 2;
}

html body .hll-dlp .hll-dlp-avatar:hover .um-profile-photo-overlay { opacity: 1; }

/* On touch the overlay is always visible, because a hover-only affordance does
   not exist on a phone. A full-width band across the bottom covered the face, so
   it is a corner badge: unmistakably a camera button, obscuring nothing. */
@media (hover: none) {
	html body .hll-dlp .hll-dlp-avatar .um-profile-photo-overlay {
		inset: auto -4px -4px auto !important;
		width: 26px !important;
		height: 26px !important;
		border-radius: 50% !important;
		border: 2px solid var(--dl-card, #282e35) !important;
		background: var(--dl-acc, #ff7d21) !important;
		opacity: 1;
	}

	/* The inner spans carry UM's own full-bleed sizing; without pinning them to
	   the badge they keep painting their dark wash across the whole photo. */
	html body .hll-dlp .hll-dlp-avatar .um-profile-photo-overlay ins,
	html body .hll-dlp .hll-dlp-avatar .um-profile-photo-overlay-s {
		position: static !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		height: 100% !important;
		inset: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 50% !important;
		color: #1a1206 !important;
		font-size: 12px !important;
		text-decoration: none !important;
	}
}

html body .hll-dlp .hll-dlp-avatar .um-profile-photo-overlay-s,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo-overlay ins {
	position: static !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	inset: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 15px !important;
}

/* --------------------------------------------------- the pencil menu --- */

html body .hll-dlp .um-profile-edit {
	position: static !important;
	order: 3;
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	top: auto !important;
	right: auto !important;
}

html body .hll-dlp .um-profile-edit-a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto !important;
	height: 42px !important;
	padding: 0 16px !important;
	border: 1px solid rgba(255, 255, 255, .16) !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: var(--dl-fg-2, #c3cdd9) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

html body .hll-dlp .um-profile-edit-a:hover {
	border-color: var(--dl-acc, #ff7d21) !important;
	color: var(--dl-fg, #eef2f7) !important;
}

html body .hll-dlp .um-profile-edit-a i { font-size: 15px !important; font-style: normal !important; }

/* UM's trigger is a bare pencil glyph with no words. On its own in a header that
   size it reads as an empty bar — so the button says what it opens. The label is
   CSS rather than markup because the anchor is UM's node and we do not modify
   what we move. */
html body .hll-dlp .um-profile-edit-a::after {
	content: "Manage profile";
	font-size: 13px;
	font-weight: 700;
	color: inherit;
	white-space: nowrap;
}

/* The cover slot has to be a positioning context before UM's absolutely
   positioned uploader button can sit inside it — without this the button escapes
   to the nearest positioned ancestor, which is the head, and lands beside the
   name. */
html body .hll-dlp .hll-dlp-cover,
html body .hll-dlp .hll-dlp-cover.has-um-cover {
	position: relative !important;
	overflow: hidden;
}

html body .hll-dlp .hll-dlp-cover.has-um-cover .um-cover-e,
html body .hll-dlp .hll-dlp-cover .um-cover-e {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	background-repeat: no-repeat !important;
}

/* The menu it opens. */
html body .hll-dlp .um-profile-edit .um-dropdown {
	border: 1px solid var(--dl-line, rgba(255,255,255,.10)) !important;
	border-radius: 12px !important;
	background: #2b323a !important;
	box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .95) !important;
	padding: 6px !important;
	z-index: 40;
}

html body .hll-dlp .um-profile-edit .um-dropdown a,
html body .hll-dlp .um-profile-edit .um-dropdown li a {
	display: block !important;
	padding: 10px 13px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--dl-fg-2, #c3cdd9) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .hll-dlp .um-profile-edit .um-dropdown a:hover {
	background: rgba(255, 125, 33, .12) !important;
	color: var(--dl-fg, #eef2f7) !important;
}

html body .hll-dlp .um-profile-edit .um-dropdown li { list-style: none !important; margin: 0 !important; }

/* On a phone the trigger takes its own row, like the fallback link did. */
@media (max-width: 620px) {
	html body .hll-dlp .um-profile-edit { width: 100%; }
	html body .hll-dlp .um-profile-edit-a { width: 100% !important; }
}

/* ============================================================================
   2.6.0
   ============================================================================ */

/* ------------------------------------------------ UM's dropdowns, anywhere --- */

/* The menu came out white-on-white and unreadable. UM appends its dropdowns to
   the END OF THE BODY, not inside the trigger's parent — so every rule scoped to
   .hll-dlp or .um-profile missed them completely, and UM's own light styling was
   left showing under a site rule that paints text dark.

   These are UM's component wherever it puts them, so they are styled at body
   level. Nothing else on the site uses .um-dropdown. */
html body .um-dropdown,
html body div.um-dropdown {
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 14px !important;
	background: #2b323a !important;
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .35) !important;
	padding: 6px !important;
	min-width: 200px;
	overflow: hidden;
}

html body .um-dropdown ul,
html body .um-dropdown ol {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .um-dropdown li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 0 !important;
	background: transparent !important;
}

html body .um-dropdown a,
html body .um-dropdown li a {
	display: block !important;
	padding: 11px 14px !important;
	border: 0 !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: #eef2f7 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: left !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-dropdown a:hover,
html body .um-dropdown li a:hover {
	background: rgba(255, 125, 33, .14) !important;
	color: #ffffff !important;
}

/* Cancel, and anything destructive, read differently from the rest. */
html body .um-dropdown a.um-dropdown-hide {
	margin-top: 4px !important;
	border-top: 1px solid rgba(255, 255, 255, .08) !important;
	border-radius: 0 0 9px 9px !important;
	color: #8b97a6 !important;
	font-weight: 700 !important;
}

html body .um-dropdown a[href*="delete"],
html body .um-dropdown a.um-trash-btn {
	color: #ff5061 !important;
}

html body .um-dropdown a[href*="delete"]:hover,
html body .um-dropdown a.um-trash-btn:hover {
	background: rgba(255, 80, 97, .14) !important;
}

/* The little arrow UM draws pointing at the trigger. */
html body .um-dropdown .um-dropdown-arr,
html body .um-dropdown-arr {
	color: #2b323a !important;
}

html body .um-dropdown-arr i { color: #2b323a !important; }

/* ------------------------------------------------- the avatar, pinned back --- */

/* UM's .um-profile-photo carries its own absolute positioning, fixed widths and
   negative margins from um-profile.css — written for ITS header, where the photo
   hangs off a cover. Dropped into our slot those values pull it up and out of
   place, which is what moved it.

   Every one of them is neutralised so the slot decides the geometry and the photo
   simply fills it. */
html body .hll-dlp .hll-dlp-avatar .um-profile-photo,
html body .hll-dlp .hll-dlp-avatar div.um-profile-photo {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	float: none !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
}

html body .hll-dlp .hll-dlp-avatar .um-profile-photo > a,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo-img {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	line-height: 0 !important;
}

html body .hll-dlp .hll-dlp-avatar .um-profile-photo img,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo-img img {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	object-fit: cover;
	display: block !important;
	float: none !important;
}

/* UM's reset-photo control would otherwise stack under the avatar.

   It has to out-specify the rule three lines up: .um-profile-photo > a is
   (0,4,3) and .um-reset-profile-photo alone is (0,4,2), so the generic rule was
   winning and forcing this link back to display:block. Naming the element and the
   class together settles it at (0,5,3).

   Losing to your own stylesheet is the same mistake as losing to someone else's —
   it just takes longer to notice. */
/* 2.9.8: the last two selectors here were DESCENDANT, not child, and they were
   hiding the photo menu's own items — "Upload photo" is a.um-manual-trigger and
   "Remove photo" is a.um-reset-profile-photo, and both live inside the menu,
   which lives inside .um-profile-photo. So opening the menu showed nothing but
   Cancel. Only a stray control sitting directly in the photo needs hiding, so
   only the child-combinator forms are kept. */
html body .hll-dlp .hll-dlp-avatar .um-profile-photo > a.um-reset-profile-photo,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo > a.um-manual-trigger {
	display: none !important;
	visibility: hidden !important;
}

/* ...and the menu's own items are stated visible, so no later rule can take them
   away again by accident. */
html body .hll-dlp .hll-dlp-avatar .um-dropdown a,
html body .hll-dlp .hll-dlp-avatar .um-dropdown li a,
html body .um-dropdown a.um-manual-trigger,
html body .um-dropdown a.um-reset-profile-photo {
	display: block !important;
	visibility: visible !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
}

/* UM hides "Remove photo" until there is a photo to remove, with an inline
   style="display:none" that it clears by adding .um-is-visible. That inline rule
   must keep working, so the one case above is given back. */
html body .hll-dlp .hll-dlp-avatar .um-dropdown a.um-reset-profile-photo:not(.um-is-visible)[style*="none"] {
	display: none !important;
}

/* The slot keeps its own shape whatever lands inside it. */
html body .hll-dlp .hll-dlp-avatar {
	overflow: visible !important;
	line-height: 0 !important;
}

html body .hll-dlp .hll-dlp-avatar > * { border-radius: inherit !important; }

/* --------------------------------------------- the two rank requirements --- */

html body .hll-dlp .hll-dlp-reqs {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 12px !important;
}

@media (min-width: 560px) {
	html body .hll-dlp .hll-dlp-reqs { grid-template-columns: 1fr 1fr; gap: 18px; }
}

html body .hll-dlp .hll-dlp-req-top {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 6px !important;
}

html body .hll-dlp .hll-dlp-req-k {
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dl-mut) !important;
}

html body .hll-dlp .hll-dlp-req-v {
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: var(--dl-fg-2) !important;
	font-variant-numeric: tabular-nums;
}

html body .hll-dlp .hll-dlp-req-bar {
	height: 5px;
	overflow: hidden;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .07) !important;
}

html body .hll-dlp .hll-dlp-req-bar i {
	display: block;
	height: 100%;
	border-radius: 999px !important;
	background: var(--rk, #ff7d21) !important;
}

html body .hll-dlp .hll-dlp-req-foot {
	margin: 5px 0 0 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--dl-mut) !important;
}

/* A requirement already satisfied says so plainly, rather than being left out —
   silence about the kilometres is what made the old line misleading. */
html body .hll-dlp .hll-dlp-req.is-met .hll-dlp-req-bar i { background: var(--dl-ok) !important; }
html body .hll-dlp .hll-dlp-req.is-met .hll-dlp-req-v { color: var(--dl-ok) !important; }

html body .hll-dlp .hll-dlp-req-ok {
	color: var(--dl-ok) !important;
	font-weight: 700 !important;
}

html body .hll-dlp .hll-dlp-req-ok::before { content: "✓ "; }

/* --------------------------------------------- the avatar, on a wide screen --- */

/* The relocated photo was sized only inside the phone media query, so on desktop
   it kept the slot's default 92px while UM's own width fought it — the ring and
   the picture disagreed. Both are stated at every width now. */
@media (min-width: 621px) {
	html body .hll-dlp .hll-dlp-head {
		align-items: flex-end;
		gap: 16px;
	}

	html body .hll-dlp .hll-dlp-avatar {
		width: 104px !important;
		height: 104px !important;
		flex: 0 0 104px !important;
		border-width: 3px !important;
	}

	html body .hll-dlp .hll-dlp-avatar .um-profile-photo,
	html body .hll-dlp .hll-dlp-avatar .um-profile-photo-img,
	html body .hll-dlp .hll-dlp-avatar .um-profile-photo img {
		width: 100% !important;
		height: 100% !important;
	}

	html body .hll-dlp .hll-dlp-head { margin-top: -52px !important; }
	html body .hll-dlp .hll-dlp-cover { height: 150px; }
	html body .hll-dlp .hll-dlp-cover-plain { height: 120px; }
}

/* ============================================================================
   2.9.0 — UM's dropdowns, the edit form, and the rank note.

   Everything below is ADDITIVE. No rule above this line was changed; where an
   earlier rule had to be beaten it is beaten on specificity, not by editing it.
   ============================================================================ */

/* ------------------------------------------- the white block in the menu --- */

/* 2.8.0 painted .um-dropdown dark and stopped there. UM's own stylesheet carries

       .um-dropdown ul { background: #fff; }                um-styles.css:810

   and the plugin's `html body .um-dropdown ul` rule set only margin, padding and
   list-style — so the UL stayed white and sat on top of the dark box, leaving a
   6px dark frame around a white panel. The near-white link colour this plugin
   sets was then white-on-white, which is the "washed out" reading.

   UM wraps the list in .um-dropdown-b as well (class-profile.php:513), so both
   layers are cleared. Only the outer .um-dropdown paints. */
html body .um-dropdown ul,
html body .um-dropdown ol,
html body .um-dropdown .um-dropdown-b,
html body div.um-dropdown div.um-dropdown-b {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* UM draws a top border on the last item for its light theme. On the dark box it
   reads as a seam across the menu. */
html body .um-dropdown li:last-child a {
	border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

/* ------------------------------------------------- the edit form, restored --- */

/* THE BUG: nobody could edit their profile.

   The 1.9.0 rule at line ~968 hides the three custom fields because UM prints
   them a second time below the card, where the value repeats its own label:

       html body .um-profile .um-field[data-key="discord"] { display: none }

   That is right in VIEW mode and wrong in EDIT mode, because UM renders the edit
   form from the same .um-field markup — and form 137's only three custom fields
   are discord, tiktok and youtube. So clicking Edit Profile hid every field on
   the form and left just Update Profile and Cancel.

   UM puts um-editing on the wrapper (templates/profile.php:20 via get_class),
   which is the same element as .um-profile. Naming both takes this to (0,3,2)
   against the hide rule's (0,2,2), so the fields come back in edit mode without
   that rule being touched. */
html body .um-profile.um-editing .um-field-discord,
html body .um-profile.um-editing .um-field-tiktok,
html body .um-profile.um-editing .um-field-youtube,
html body .um-profile.um-editing .um-field[data-key="discord"],
html body .um-profile.um-editing .um-field[data-key="tiktok"],
html body .um-profile.um-editing .um-field[data-key="youtube"] {
	display: block !important;
}

/* The form itself, against the site background rather than UM's white. */
html body .um-profile.um-editing .um-field-label,
html body .um-profile.um-editing .um-field-label label {
	color: var(--dl-fg, #eef2f7) !important;
	text-shadow: none !important;
	font-weight: 700 !important;
}

html body .um-profile.um-editing .um-field-area input[type="text"],
html body .um-profile.um-editing .um-field-area input[type="url"],
html body .um-profile.um-editing .um-field-area input[type="email"],
html body .um-profile.um-editing .um-field-area input[type="number"],
html body .um-profile.um-editing .um-field-area textarea,
html body .um-profile.um-editing .um-field-area select {
	background: #23282e !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, .14) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	color: var(--dl-fg, #eef2f7) !important;
	text-shadow: none !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
}

html body .um-profile.um-editing .um-field-area input:focus,
html body .um-profile.um-editing .um-field-area textarea:focus,
html body .um-profile.um-editing .um-field-area select:focus {
	border-color: rgba(255, 125, 33, .55) !important;
	outline: none !important;
}

html body .um-profile.um-editing .um-field-error,
html body .um-profile.um-editing .um-notice.err {
	background: rgba(255, 80, 97, .12) !important;
	border: 1px solid rgba(255, 80, 97, .35) !important;
	border-radius: 10px !important;
	color: #ffb3ba !important;
	text-shadow: none !important;
}

/* ------------------------------------------------------- the rank note --- */

/* 2.9.0 prints one line saying what the rank system counts, and one when an
   admin has pinned a rank. Quiet by design: it explains a number, it is not a
   number itself. */
html body .hll-dlp .hll-dlp-prog-note {
	margin: 8px 0 0 !important;
	padding: 9px 11px !important;
	border: 1px solid rgba(255, 255, 255, .07) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .025) !important;
	color: var(--dl-mut, #8b97a6) !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	text-shadow: none !important;
}

/* The footer is one sentence now, not a label and a figure at opposite ends. */
html body .hll-dlp .hll-dlp-prog-foot > span:only-child {
	flex: 1 1 auto !important;
}

/* --------------------------------------------- the avatar, square corners --- */

/* MEASURED, not assumed: rendered at 360/412/620/621/768/1100 with UM's CSS and
   the site's hostile rules loaded, the placeholder avatar came out with
   border-radius 0 inside an 18px rounded, rank-coloured ring.

   Two rules a long way apart combine to do it:

       line  674  .hll-dlp-avatar img   { border-radius: 0 !important }   (0,3,3)
       line 2402  .hll-dlp-avatar       { overflow: visible !important }

   The square corners were harmless while the slot clipped them. 2.5.0 had to
   stop clipping so UM's dropdown could escape, and the corners came out with it.
   UM's own photo is unaffected — it is nested deeper and inherits the radius —
   so the avatar visibly changes shape when the footer script swaps one for the
   other on every profile load.

   Same specificity as line 674, later in the file, so it wins on order without
   that rule being edited. */
html body .hll-dlp .hll-dlp-avatar img {
	border-radius: inherit !important;
}

/* The ring is drawn on the slot, so anything landing inside it takes the slot's
   shape whatever depth it sits at. */
html body .hll-dlp .hll-dlp-avatar .um-profile-photo,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo-img,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo > a {
	border-radius: inherit !important;
}

/* ============================================================================
   2.9.3 — the profile menu as a centred sheet, and an avatar that cannot spill.

   WHY THE 2.9.0 APPROACH WAS WRONG. It pinned the menu to the bottom of the
   screen only under @media (max-width: 782px). He browses hll-world.com on a
   phone with Chrome's "Desktop site" on, so the CSS viewport is ~980px and that
   query never matched — the menu kept taking UM's inline position, computed
   against a trigger this plugin had moved, and landed off the left edge with only
   "ancel" showing.

   A breakpoint was the wrong tool. Where a menu lands should not depend on the
   viewport being narrow, on zoom level, or on whether desktop mode is on. So the
   menu is now a CENTRED SHEET at every width, and UM's inline coordinates are
   overridden outright rather than adjusted.

   This also buys back the avatar fix below: 2.5.0 had to set overflow:visible on
   the avatar so this menu could escape the card. A fixed-position element is not
   clipped by an ancestor's overflow at all, so the slot can clip again.
   ============================================================================ */


/* The arrow pointed at a trigger the sheet is no longer beside. */
html body .um-dropdown .um-dropdown-arr,
html body .um-dropdown-arr {
	display: none !important;
}

html body .um-dropdown a,
html body .um-dropdown li a {
	display: block !important;
	position: relative !important;
	padding: 15px 16px !important;
	border: 0 !important;
	border-left: 3px solid transparent !important;
	border-radius: 12px !important;
	background: transparent !important;
	color: #f2f5f9 !important;
	font-size: 15px !important;
	font-weight: 650 !important;
	line-height: 1.25 !important;
	text-align: left !important;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: background-color .14s, border-color .14s, color .14s;
}

html body .um-dropdown a:hover,
html body .um-dropdown li a:hover,
html body .um-dropdown a:active,
html body .um-dropdown li a:active {
	border-left-color: #ff7d21 !important;
	background: rgba(255, 125, 33, .14) !important;
	color: #ffffff !important;
}

/* Cancel reads as the way out, not as another choice. */
html body .um-dropdown a.um-dropdown-hide {
	margin: 8px 0 2px !important;
	padding: 14px 16px !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, .03) !important;
	color: #9aa7b6 !important;
	font-weight: 700 !important;
	text-align: center !important;
}

html body .um-dropdown a.um-dropdown-hide:hover {
	border-color: rgba(255, 255, 255, .2) !important;
	background: rgba(255, 255, 255, .06) !important;
	color: #eef2f7 !important;
}

/* ------------------------------------------- the avatar, structurally sealed --- */

/* I could not reproduce the desktop spill in a harness, so this does not chase a
   rule — it removes the possibility. The slot clips, holds a square, and every
   node UM puts inside it is taken out of flow and pinned to the box. Nothing
   inside can change the slot's size or paint outside it, whatever UM's own
   script sets inline.

   Beats .hll-dlp-avatar.has-um-photo (0,4,2) by naming the same two classes. */
html body .hll-dlp .hll-dlp-avatar,
html body .hll-dlp .hll-dlp-avatar.has-um-photo {
	position: relative !important;
	/* 2.9.6: the slot no longer clips. It cannot — the photo menu is a descendant
	   and clipping the slot clips the menu with it. The clip moved down onto the
	   picture's own link instead, which is the only child that ever needed it;
	   see the stray-child rule in the 2.9.6 section. */
	overflow: visible !important;
	aspect-ratio: 1 / 1;
}

html body .hll-dlp .hll-dlp-avatar > *,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo > a,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo-img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border-radius: inherit !important;
}

html body .hll-dlp .hll-dlp-avatar img,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* The photo menu lives INSIDE .um-profile-photo and has to stay there — UM opens
   it with jQuery(trigger).find('.um-dropdown'), so a menu moved out of the
   trigger can never be opened again. It is taken out of flow so it plays no part
   in the slot's layout, and positioned by the 2.9.6 section below. */
html body .hll-dlp .hll-dlp-avatar .um-dropdown {
	position: absolute !important;
	inset: auto !important;
	/* 2.9.8: this said width:auto, and an absolutely positioned box with auto
	   width shrinks to its containing block — which here is the 104px avatar. That
	   is why "Cancel" came out one letter per line. An absolute box may be wider
	   than its container, and the slot no longer clips, so it takes the same width
	   as every other menu. */
	width: 300px !important;
	width: min(300px, calc(100vw - 28px)) !important;
	height: auto !important;
}

/* 2.9.6 forced the camera overlay full-bleed here to widen the tap target. That
   was unnecessary and it destroyed the touch corner badge set earlier in this
   file: UM puts um-trigger-menu-on-click on .um-profile-photo itself, so the
   whole picture already opens the menu. Rule removed; the badge is back. */

/* ============================================================================
   2.9.4 — the members-only rank panel, and orange quick-access icons.
   ============================================================================ */

/* ------------------------------------------------ rank progress, signed out --- */

/* Amber, not red. Nothing has gone wrong and nothing is forbidden — this is a
   door with a sign on it, so it reads as an invitation rather than a warning.
   #ffb02e is the amber already in this stylesheet's licence band gradient, so the
   panel belongs to the same palette as the card it sits in. */
html body .hll-dlp .hll-dlp-prog.hll-dlp-locked {
	display: flex !important;
	align-items: center;
	gap: 14px;
	margin: 0 !important;
	padding: 15px 16px !important;
	border: 1px solid rgba(255, 176, 46, .28) !important;
	border-radius: 14px !important;
	background: linear-gradient(90deg, rgba(255, 176, 46, .10), rgba(255, 176, 46, .03) 70%, transparent) !important;
}

html body .hll-dlp .hll-dlp-locked .hll-dlp-locked-ic {
	flex: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	border: 1px solid rgba(255, 176, 46, .3) !important;
	border-radius: 11px !important;
	background: rgba(255, 176, 46, .1) !important;
	color: #ffb02e !important;
}

html body .hll-dlp .hll-dlp-locked .hll-dlp-locked-ic svg {
	stroke: #ffb02e !important;
}

html body .hll-dlp .hll-dlp-locked .hll-dlp-locked-tx {
	display: flex !important;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

html body .hll-dlp .hll-dlp-locked .hll-dlp-locked-t {
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	color: #ffc766 !important;
	text-shadow: none !important;
}

html body .hll-dlp .hll-dlp-locked .hll-dlp-locked-s {
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	color: var(--dl-mut, #8b97a6) !important;
	text-shadow: none !important;
}

html body .hll-dlp a.hll-dlp-locked-b {
	flex: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 40px !important;
	padding: 0 17px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: #ffb02e !important;
	color: #23282e !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: nowrap;
	transition: background-color .15s;
}

html body .hll-dlp a.hll-dlp-locked-b:hover {
	background: #ffc257 !important;
	color: #23282e !important;
}

/* On a phone the three parts stack rather than squeezing the sentence into a
   column two words wide. */
@media (max-width: 520px) {
	html body .hll-dlp .hll-dlp-prog.hll-dlp-locked {
		flex-wrap: wrap;
		gap: 12px;
	}

	html body .hll-dlp .hll-dlp-locked .hll-dlp-locked-tx {
		flex: 1 1 calc(100% - 54px);
	}

	html body .hll-dlp a.hll-dlp-locked-b {
		flex: 1 1 100%;
		width: 100% !important;
	}
}

/* --------------------------------------------- quick access icons, orange --- */

/* The icon rule at line ~1063 already sets colour on the SPAN, and the portal's
   SVGs are drawn with stroke="currentColor", so in principle they inherit it.
   They were still rendering pale on his site, and the overriding rule is in a
   stylesheet this plugin does not read.

   So the colour is stated on the svg and on its shapes directly, not left to be
   inherited. stroke and fill are set as well as colour, because a rule that wins
   on `stroke` does not care what `color` resolves to. */
html body .um-profile .hll-um-link .hll-um-ic,
html body .um-profile .hll-um-link .hll-um-ic svg,
html body .um-profile .hll-um-nav .hll-um-ic,
html body .um-profile .hll-um-nav .hll-um-ic svg {
	color: #ff7d21 !important;
	stroke: #ff7d21 !important;
	fill: none !important;
}

html body .um-profile .hll-um-link .hll-um-ic svg *,
html body .um-profile .hll-um-nav .hll-um-ic svg * {
	stroke: #ff7d21 !important;
}

/* The labels stay readable rather than following the icon into orange — a grid
   of six orange words would read as six buttons all asking to be pressed. */
html body .um-profile .hll-um-link .hll-um-lbl {
	color: var(--dl-fg, #eef2f7) !important;
}

html body .um-profile a.hll-um-link:hover .hll-um-ic,
html body .um-profile a.hll-um-link:hover .hll-um-ic svg,
html body .um-profile a.hll-um-link:hover .hll-um-ic svg * {
	color: #ffa155 !important;
	stroke: #ffa155 !important;
}


/* ============================================================================
   2.9.6 — the menu is pinned to its trigger and does not move.

   WHY THE LAST TWO ATTEMPTS DRIFTED. Both made .um-dropdown position:fixed so it
   could escape the avatar slot's clipping. Fixed means "anchored to the viewport",
   so the menu had to be re-placed on every scroll frame to appear attached — which
   is the jitter, and the reason it looked like it vanished and came back.

   It cannot be moved to the body either. UM opens a menu with

       jQuery(trigger).find('.um-dropdown')                um-scripts.min.js

   so a menu that is not a DESCENDANT of its trigger can never be opened again.

   So it stays where UM put it and goes back to position:absolute, resolved
   against the trigger's own container. That is what makes it permanently glued:
   it scrolls with the page because it is part of the page, and there is no scroll
   handler left to lag behind. It is placed once, on open.
   ============================================================================ */

html body .um-dropdown,
html body div.um-dropdown {
	position: absolute !important;
	width: 300px !important;
	width: min(300px, calc(100vw - 28px)) !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 10px 8px 8px !important;
	z-index: 90000 !important;
	border: 1px solid rgba(255, 255, 255, .11) !important;
	border-radius: 18px !important;
	background: #2a3037 !important;
	/* Visible, so the pointer below can sit outside the box. The scrolling for a
	   long menu happens on the inner wrapper instead. */
	overflow: visible !important;
	box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .9) !important;
	text-align: left !important;
}

/* The brand mark used to be a bar across the top of the panel. With a pointer
   there it sat in the same place and the two collided, so the accent moved onto
   the pointer itself — it marks the panel AND says which button it came from. */

/* THE POINTER. A rotated square sharing the panel's own face and border, so the
   two read as one shape. Its horizontal position is written by the footer script
   as --hll-arrow, which is the trigger's centre measured from the panel's left
   edge — so it points at the button even when the panel has been nudged sideways
   to stay on screen. data-hll-side="up" means the panel opened above its trigger,
   and the pointer moves to the bottom edge. */
html body .um-dropdown::after {
	content: "";
	position: absolute;
	top: -7px;
	left: var(--hll-arrow, 50%);
	width: 13px;
	height: 13px;
	margin-left: -7px;
	background: #2a3037;
	border-top: 2px solid #ff7d21;
	border-left: 2px solid #ff7d21;
	border-radius: 3px 0 0 0;
	transform: rotate(45deg);
}

html body .um-dropdown[data-hll-side="up"]::after {
	top: auto;
	bottom: -7px;
	border-top: 0;
	border-left: 0;
	border-right: 2px solid #ff7d21;
	border-bottom: 2px solid #ff7d21;
	border-radius: 0 0 3px 0;
}

/* The list scrolls, not the panel, so the pointer and the brand mark stay put. */
html body .um-dropdown .um-dropdown-b {
	max-height: 60vh !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* --------------------------------------- the avatar, clipped one level down --- */

/* The slot stopped clipping so the photo menu can escape it. The picture's own
   link takes over that job — it is the only child that ever needed clipping —
   and anything else UM leaves inside the photo is taken out of the picture
   entirely, which is what the slot's overflow was really protecting against. */
html body .hll-dlp .hll-dlp-avatar .um-profile-photo > a,
html body .hll-dlp .hll-dlp-avatar .um-profile-photo-img {
	overflow: hidden !important;
	border-radius: inherit !important;
}

html body .hll-dlp .hll-dlp-avatar .um-profile-photo > *:not(a):not(.um-dropdown) {
	display: none !important;
}

/* ------------------------------------ the card stops clipping its own menus --- */

/* The card was set overflow:hidden to clip the cover photo to its rounded top,
   and made visible again only once the footer script had added .allow-dropdown.
   That left the photo menu clipped by the card on any load where the script had
   not run yet — and made a menu's visibility depend on a class arriving.

   The card is visible unconditionally now, and the cover clips itself, which is
   the element that actually needed it. .allow-dropdown still applies and is
   harmless; nothing depends on it any more. */
html body .hll-dlp {
	overflow: visible !important;
}

html body .hll-dlp .hll-dlp-cover {
	overflow: hidden;
	border-radius: 16px 16px 0 0 !important;
}

/* ============================================================================
   2.9.9 — the profile photo uploader.

   UM builds this with um_new_modal() and fills the body with the jQuery
   uploadFile plugin, which renders:

       <div class="ajax-upload-dragdrop">          the dashed drop area
         ...dragDropStr...
         <div class="ajax-file-upload">Upload      the visible button
           <form><input type="file"></form>        laid OVER it, opacity 0
         </div>
       </div>

   The button is not a button. The thing that opens the file picker is that
   transparent <input type="file"> stretched across it. Anything that changes the
   input's position or size — and a site stylesheet full of `html body input`
   rules is exactly that — leaves the label sitting there looking clickable with
   nothing behind it. Its geometry is restated here so nothing can move it.

   The rest is the modal wearing the site's own clothes instead of UM's blue and
   green defaults.
   ============================================================================ */

/* ------------------------------------------------ the input that does the work --- */

html body .um-modal .ajax-upload-dragdrop,
html body .um-modal .ajax-file-upload {
	position: relative !important;
	pointer-events: auto !important;
}

html body .um-modal .ajax-file-upload form {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

html body .um-modal input[type="file"],
html body .um-modal .ajax-file-upload input[type="file"] {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	opacity: 0 !important;
	display: block !important;
	visibility: visible !important;
	cursor: pointer !important;
	pointer-events: auto !important;
	z-index: 5 !important;
	font-size: 0 !important;
	-webkit-appearance: none;
	appearance: none;
}

/* ------------------------------------------------------------ the modal --- */

html body .um-modal-overlay {
	background: rgba(12, 14, 18, .72) !important;
}

html body .um-modal {
	background: #2a3037 !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-radius: 20px 20px 0 0 !important;
	box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .9) !important;
	overflow: hidden !important;
}

html body .um-modal .um-modal-header {
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
	color: var(--dl-fg, #eef2f7) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	padding: 17px 18px !important;
	text-shadow: none !important;
}

html body .um-modal .um-modal-body {
	background: transparent !important;
	color: var(--dl-fg, #eef2f7) !important;
	padding: 18px !important;
}

html body .um-modal .um-modal-body p,
html body .um-modal .um-modal-body span,
html body .um-modal .um-modal-body div {
	text-shadow: none !important;
}

/* The drop area: the site's surface, not a white box with a dashed outline. */
html body .um-modal .ajax-upload-dragdrop {
	width: auto !important;
	border: 2px dashed rgba(255, 255, 255, .2) !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, .03) !important;
	padding: 26px 16px !important;
	color: var(--dl-fg, #eef2f7) !important;
	transition: border-color .15s, background-color .15s;
}

html body .um-modal .ajax-upload-dragdrop.state_hover,
html body .um-modal .ajax-upload-dragdrop:hover {
	border-color: rgba(255, 125, 33, .55) !important;
	background: rgba(255, 125, 33, .06) !important;
}

html body .um-modal .ajax-upload-dragdrop .str {
	display: block !important;
	color: var(--dl-fg, #eef2f7) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-shadow: none !important;
}

html body .um-modal .ajax-upload-dragdrop .help {
	display: block !important;
	margin-top: 4px !important;
	color: var(--dl-mut, #8b97a6) !important;
	font-size: 12px !important;
	text-shadow: none !important;
}

html body .um-modal .ajax-upload-dragdrop .icon i {
	color: #ff7d21 !important;
}

/* The Upload label, in the site's orange. The transparent input above still does
   the opening — this only paints what the finger is aiming at. */
html body .um-modal .ajax-file-upload {
	display: inline-block !important;
	margin: 16px auto 0 !important;
	padding: 13px 30px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: #ff7d21 !important;
	color: #ffffff !important;
	font-size: 14.5px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

html body .um-modal .um-modal-footer {
	background: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, .08) !important;
	padding: 14px 18px !important;
}

html body .um-modal .um-modal-btn,
html body .um-modal a.um-modal-btn {
	border: 0 !important;
	border-radius: 11px !important;
	text-decoration: none !important;
	padding: 13px 22px !important;
	font-size: 14.5px !important;
	font-weight: 800 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* Apply is the action; it was UM's green. */
html body .um-modal .um-modal-btn.um-finish-upload {
	background: #ff7d21 !important;
	color: #ffffff !important;
}

html body .um-modal .um-modal-btn.um-finish-upload.disabled {
	background: rgba(255, 255, 255, .07) !important;
	color: var(--dl-mut, #8b97a6) !important;
	cursor: not-allowed !important;
}

html body .um-modal .um-modal-btn.alt,
html body .um-modal a[data-action="um_remove_modal"] {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	color: var(--dl-fg, #eef2f7) !important;
}

html body .um-modal .um-error-block {
	margin-top: 12px !important;
	border: 1px solid rgba(255, 80, 97, .35) !important;
	border-radius: 10px !important;
	background: rgba(255, 80, 97, .12) !important;
	color: #ffb3ba !important;
	padding: 10px 12px !important;
	text-shadow: none !important;
}

html body .um-modal .upload-statusbar {
	background: rgba(255, 255, 255, .05) !important;
	border-radius: 10px !important;
	color: var(--dl-fg, #eef2f7) !important;
}

html body .um-modal .progress {
	background: #ff7d21 !important;
}

/* ============================================================================
   2.10.0 — the uploader, finished properly.

   WHY THE UPLOAD BUTTON STAYED BLUE. 2.9.9 styled .ajax-file-upload, which is the
   jQuery uploadFile plugin's DEFAULT button class. UM does not use the default —
   its own call passes

       uploadButtonClass: "upload"                 um-functions.min.js

   so the button is .upload and every rule aimed at .ajax-file-upload missed it
   entirely. Both names are covered now, and so is the shape of the thing itself:
   :has() finds whichever div holds the file input, whatever it ends up being
   called in a future UM release. The drop area is excluded by name so it can
   never be mistaken for the button.

   The modal also had no layout of its own — it filled the screen with a dead gap
   between the drop zone and the footer, and the footer buttons sat their text low
   because they were block links with padding rather than centred boxes.
   ============================================================================ */

/* ------------------------------------------------------- the button itself --- */

html body .um-modal .ajax-file-upload,
html body .um-modal .um-modal-body .upload,
html body .um-modal .um-modal-body div:has(> form > input[type="file"]):not(.ajax-upload-dragdrop),
html body .um-modal .um-modal-body div:has(> input[type="file"]):not(.ajax-upload-dragdrop) {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-height: 50px !important;
	margin: 18px auto 0 !important;
	padding: 0 30px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: #ff7d21 !important;
	background-image: none !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	overflow: hidden !important;
}

/* The transparent input has to cover whichever of those it turns out to be. */
html body .um-modal .um-modal-body .upload form,
html body .um-modal .um-modal-body div:has(> form > input[type="file"]) form {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* -------------------------------------------------------- the sheet itself --- */

html body .um-modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 999998 !important;
}

html body .um-modal {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	/* The dead space was the modal having no height of its own. It hugs its
	   content now and scrolls only if the content is taller than the screen. */
	max-height: 88vh !important;
	display: flex !important;
	flex-direction: column !important;
	z-index: 999999 !important;
	border-radius: 22px 22px 0 0 !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-bottom: 0 !important;
	background: #2a3037 !important;
	box-shadow: 0 -24px 64px -20px rgba(0, 0, 0, .95) !important;
	overflow: hidden !important;
}

/* The grab handle: says "sheet", and says which edge it came from. */
html body .um-modal::before {
	content: "";
	flex: none;
	width: 40px;
	height: 4px;
	margin: 10px auto 0;
	border-radius: 4px;
	background: rgba(255, 255, 255, .18);
}

@media (min-width: 700px) {
	html body .um-modal {
		left: 50% !important;
		right: auto !important;
		top: 50% !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
		width: 460px !important;
		max-width: calc(100vw - 40px) !important;
		max-height: 86vh !important;
		border: 1px solid rgba(255, 255, 255, .1) !important;
		border-radius: 20px !important;
	}

	html body .um-modal::before { display: none; }
}

html body .um-modal .um-modal-header {
	flex: none !important;
	text-align: center !important;
}

html body .um-modal .um-modal-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}

/* ------------------------------------------------------ Apply and Cancel --- */

/* They were block links with padding, so their text sat wherever the line-height
   left it. Centred boxes of equal width, with the label centred in both axes. */
html body .um-modal .um-modal-footer {
	flex: none !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

html body .um-modal .um-modal-footer .um-modal-btn,
html body .um-modal .um-modal-footer a.um-modal-btn {
	flex: 1 1 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 50px !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 18px !important;
	line-height: 1 !important;
	text-align: center !important;
	box-sizing: border-box !important;
	float: none !important;
}

/* ============================================================================
   2.13.1 — THE SAVE BUTTON IN EDIT MODE.

   Pulled off the server rather than reasoned from the templates. In edit mode
   Ultimate Member prints, inside .um-header:

       <div class="um-profile-edit um-profile-headericon">
         <a class="um-profile-edit-a um-profile-save"><i class="um-faicon-check"></i></a>
       </div>

   The same .um-profile-edit container, and the same .um-profile-edit-a class,
   that holds the pencil menu when viewing. inc/profile.php moves that container
   into the card in both modes, so the button was always on screen — but this
   file labels every .um-profile-edit-a with

       ::after { content: "Manage profile" }

   so the SAVE control rendered as a quiet outline button reading "Manage
   profile". It looked like the button you had just pressed, which is why there
   appeared to be no way to commit a new photo.

   Two classes deep, so it out-ranks the generic rule above without touching it.
   UM prints no cancel in this header (um-profile-cancel is absent), so there is
   nothing else to place.
   ============================================================================ */

html body .hll-dlp .um-profile-edit-a.um-profile-save {
	border-color: transparent !important;
	background: var(--dl-acc, #ff7d21) !important;
	color: #23282e !important;
	font-weight: 800 !important;
	padding: 0 20px !important;
}

html body .hll-dlp .um-profile-edit-a.um-profile-save:hover {
	border-color: transparent !important;
	background: #ff9147 !important;
	color: #23282e !important;
}

html body .hll-dlp .um-profile-edit-a.um-profile-save::after {
	content: "Save changes";
	font-size: 13px;
	font-weight: 800;
	color: inherit;
	white-space: nowrap;
}

html body .hll-dlp .um-profile-edit-a.um-profile-save i {
	color: inherit !important;
}

/* While editing, the card says so — otherwise the only difference between the
   two states is one button's wording. */
html body .hll-dlp.is-um-editing .hll-dlp-head::before {
	content: "Editing profile";
	order: 0;
	flex: 1 1 100%;
	margin: 0 0 8px;
	color: var(--dl-acc, #ff7d21);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}