.dlhn-card{
	--dlhn-w:340px;
	--dlhn-gap:12px;
	--dlhn-pad:15px;
	--dlhn-pad-x:15px;

	--dlhn-bar:3px;
	--dlhn-edge:0.8px;
	--dlhn-edge-a:.45;

	--dlhn-tint:.16;
	--dlhn-tint-end:55%;

	--dlhn-bg:#1c222c;
	--dlhn-tx:#e8edf4;
	--dlhn-dim:#d8dbe8;
	--dlhn-chip:rgba(255,255,255,.08);
	--dlhn-min-c:#e0808a;
}

.dlh-light .dlhn-card{
	--dlhn-bg:#ffffff;
	--dlhn-tx:#101828;
	--dlhn-dim:#667085;
	--dlhn-chip:rgba(16,24,40,.06);
	--dlhn-min-c:#EA2027;
}

.dlhn-k-goal {  --dlhn-acc: 93 172 108; }
.dlhn-k-start{  --dlhn-acc: 91 157 224; }
.dlhn-k-h2   {  --dlhn-acc: 91 157 224; }
.dlhn-k-pen  {  --dlhn-acc:224 138  60; }
.dlhn-k-et   {  --dlhn-acc:224 138  60; }
.dlhn-k-end  {  --dlhn-acc:154 160 180; }

.dlh-light .dlhn-k-goal {  --dlhn-acc: 31 138  77; }
.dlh-light .dlhn-k-start{  --dlhn-acc: 42 111 176; }
.dlh-light .dlhn-k-h2   {  --dlhn-acc: 42 111 176; }
.dlh-light .dlhn-k-end  {  --dlhn-acc: 92  99 118; }

.dlhn-card, .dlhn-card *{ box-sizing:border-box; }

.dlhn-wrap{
	position:fixed;
	inset-block-start:0;
	inset-inline:0;
	z-index:2147483646;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	padding:10px 12px 0;
	pointer-events:none;
}

.dlhn-card{
	position:relative;
	width:min(var(--dlhn-w), 100vw - 24px);
	min-height:60px;
	padding:var(--dlhn-pad) var(--dlhn-pad-x);

	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:var(--dlhn-gap);

	border-style:solid;
	border-color:rgb(var(--dlhn-acc) / var(--dlhn-edge-a));
	border-inline-color:rgb(var(--dlhn-acc));
	border-block-width:var(--dlhn-edge);
	border-inline-width:var(--dlhn-bar);
	border-radius:13px;

	background:
		linear-gradient(to left,  rgb(var(--dlhn-acc) / var(--dlhn-tint)), transparent var(--dlhn-tint-end)),
		linear-gradient(to right, rgb(var(--dlhn-acc) / var(--dlhn-tint)), transparent var(--dlhn-tint-end)),
		var(--dlhn-bg);

	color:var(--dlhn-tx);
	pointer-events:auto;
	overflow:hidden;

	opacity:0;
	transform:translateY(-14px);
	transition:opacity .25s ease, transform .25s ease;
}

.dlhn-card.is-in{ opacity:1; transform:translateY(0); }
.dlhn-card.is-out{ opacity:0; transform:translateY(-10px); }

.dlhn-l1{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	max-width:100%;
	padding-inline:40px;
	font-size:13px;
	line-height:18px;
	color:var(--dlhn-dim);
}
.dlhn-l1 span{
	color:rgb(var(--dlhn-acc));
	font-weight:500;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.dlhn-l1 > span{ flex:0 0 auto; }
.dlhn-l1 .dlhn-gt{
	flex:0 1 auto;
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.dlhn-l1 .dlhn-gt span{ color:var(--dlhn-tx); }

.dlhn-l1 .dlhn-dot{ color:var(--dlhn-dim); font-weight:700; }

.dlhn-l1 .dlhn-min{
	flex:0 0 auto;
	color:var(--dlhn-min-c);
	font-weight:700;
	direction:ltr;
	unicode-bidi:isolate;
}

.dlhn-l2{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:8px;
	width:100%;
	font-size:14px;
	line-height:19px;
	font-weight:700;
}

.dlhn-l2:not(:has(.dlhn-sc)){ display:block; text-align:center; }

.dlhn-tm{
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.dlhn-l2 .dlhn-tm:first-child{ text-align:end; }
.dlhn-l2 .dlhn-tm:last-child{  text-align:start; }

.dlhn-sc{
	padding:2px 8px;
	border-radius:6px;
	background:var(--dlhn-chip);
	font-weight:800;

	unicode-bidi:isolate;
}

.dlhn-tools{
	position:absolute;
	inset-block-start:5px;
	inset-inline-end:7px;
	display:flex;
	gap:2px;
	z-index:3;
}

.dlhn-tools button{
	all:unset;
	box-sizing:border-box;
	width:22px;
	height:22px;
	line-height:22px;
	text-align:center;
	font-size:12px;
	color:var(--dlhn-dim);
	border-radius:5px;
	cursor:pointer;
}
.dlhn-tools button:hover{ background:rgba(255,255,255,.10); color:var(--dlhn-tx); }
.dlh-light .dlhn-tools button:hover{ background:rgba(16,24,40,.07); }
.dlhn-tools button:focus-visible{ outline:2px solid rgb(var(--dlhn-acc)); outline-offset:1px; }

.dlhn-go{
	position:absolute;
	inset:0;
	z-index:2;
	text-indent:-9999px;
	overflow:hidden;
}

@media (max-width:360px){
	.dlhn-card{ --dlhn-gap:10px; --dlhn-pad:13px; --dlhn-pad-x:12px; }
	.dlhn-l1{ font-size:12px; padding-inline:34px; }
	.dlhn-l2{ font-size:13px; gap:6px; }
	.dlhn-sc{ padding:2px 7px; }
}

@media (prefers-reduced-motion:reduce){
	.dlhn-card{ transition:none; transform:none; }
	.dlhn-card.is-in{ transform:none; }
	.dlhn-card.is-out{ transform:none; }
}