.kol-lgp-widget {
	--kol-lgp-surface: #ffffff;
	--kol-lgp-surface-2: #f8fafc;
	--kol-lgp-text: #1f2937;
	--kol-lgp-muted: #64748b;
	--kol-lgp-border: #d4d7dc;
	--kol-lgp-accent: #00a98f;
	--kol-lgp-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 22px rgba(15, 23, 42, 0.06);
	--kol-lgp-button-bg: linear-gradient(#e2e2e2, #d4d4d4);
	--kol-lgp-button-bg-hover: linear-gradient(#eeeeee, #dddddd);
	--kol-lgp-button-border: #f0f0f0 #b0b0b0 #b0b0b0 #f0f0f0;
	--kol-lgp-button-text: #2d2d2d;
	margin-top: 24px;
}

html.dark-mode .kol-lgp-widget,
body.dark-mode .kol-lgp-widget,
[data-theme="dark"] .kol-lgp-widget,
body[data-theme="dark"] .kol-lgp-widget {
	--kol-lgp-surface: #202020;
	--kol-lgp-surface-2: #2a2a2a;
	--kol-lgp-text: #e0e0e0;
	--kol-lgp-muted: #a3a3a3;
	--kol-lgp-border: #333333;
	--kol-lgp-accent: #14c8a8;
	--kol-lgp-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
	--kol-lgp-button-bg: linear-gradient(#383838, #343434);
	--kol-lgp-button-bg-hover: linear-gradient(#454545, #3b3b3b);
	--kol-lgp-button-border: #555555 #282828 #282828 #555555;
	--kol-lgp-button-text: #ffffff;
}

.kol-lgp-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 0 14px;
}

.kol-lgp-head h2 {
	color: var(--kol-lgp-text);
	font-size: 1.25rem;
	line-height: 1.2;
	margin: 0;
}

.kol-lgp-head label {
	color: var(--kol-lgp-accent);
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 850;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kol-lgp-list {
	display: grid;
	gap: 12px;
}

.kol-lgp-card {
	background: var(--kol-lgp-surface);
	border: 1px solid var(--kol-lgp-border);
	border-radius: 8px;
	box-shadow: var(--kol-lgp-shadow);
	display: grid;
	gap: 8px;
	min-width: 0;
	padding: 14px;
}

.kol-lgp-card span {
	color: var(--kol-lgp-accent);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

.kol-lgp-card h3 {
	color: var(--kol-lgp-text);
	font-size: 1rem;
	line-height: 1.25;
	margin: 0;
	overflow-wrap: anywhere;
}

.kol-lgp-card p {
	color: var(--kol-lgp-muted);
	font-size: 0.86rem;
	line-height: 1.45;
	margin: 0;
}

.kol-lgp-card a {
	align-items: center;
	background: var(--kol-lgp-button-bg);
	border: 1px solid;
	border-color: var(--kol-lgp-button-border);
	border-radius: 8px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.24);
	color: var(--kol-lgp-button-text);
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 850;
	justify-content: center;
	line-height: 1.2;
	min-height: 36px;
	padding: 9px 10px;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.kol-lgp-card a:hover,
.kol-lgp-card a:focus {
	background: var(--kol-lgp-button-bg-hover);
	color: var(--kol-lgp-button-text);
}

.kol-lgp-list.is-guest-preview .kol-lgp-card:nth-child(3) {
	max-height: 142px;
	overflow: hidden;
	position: relative;
}

.kol-lgp-list.is-guest-preview .kol-lgp-card:nth-child(3)::after {
	background: linear-gradient(rgba(255, 255, 255, 0), var(--kol-lgp-surface) 78%);
	bottom: 0;
	content: "";
	height: 74px;
	left: 0;
	position: absolute;
	right: 0;
}

.kol-lgp-lock {
	background: var(--kol-lgp-surface);
	border: 1px solid var(--kol-lgp-border);
	border-radius: 8px;
	box-shadow: var(--kol-lgp-shadow);
	color: var(--kol-lgp-text);
	display: grid;
	gap: 8px;
	margin-top: 12px;
	padding: 16px;
}

.kol-lgp-lock strong {
	color: var(--kol-lgp-accent);
	font-size: 1rem;
}

.kol-lgp-lock p {
	color: var(--kol-lgp-text);
	font-size: 0.88rem;
	line-height: 1.45;
	margin: 0;
}

.kol-lgp-lock a {
	background: var(--kol-lgp-button-bg);
	border: 1px solid;
	border-color: var(--kol-lgp-button-border);
	border-radius: 8px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.24);
	color: var(--kol-lgp-button-text);
	font-size: 0.82rem;
	font-weight: 900;
	padding: 10px 12px;
	text-align: center;
	text-decoration: none;
}

.kol-lgp-lock a:hover,
.kol-lgp-lock a:focus {
	background: var(--kol-lgp-button-bg-hover);
	color: var(--kol-lgp-button-text);
}

.kol-lgp-modal-toggle {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.kol-lgp-modal {
	display: none;
	inset: 0;
	position: fixed;
	z-index: 99999;
}

.kol-lgp-modal-toggle:checked + .kol-lgp-modal {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 20px;
}

.kol-lgp-modal-backdrop {
	background: rgba(18, 23, 34, 0.72);
	cursor: pointer;
	inset: 0;
	position: absolute;
}

.kol-lgp-modal-card {
	background: var(--kol-lgp-surface);
	border: 1px solid var(--kol-lgp-border);
	border-radius: 8px;
	box-shadow: 0 24px 80px rgba(18, 23, 34, 0.28);
	color: var(--kol-lgp-text);
	display: grid;
	gap: 12px;
	max-width: 520px;
	padding: 22px;
	position: relative;
	width: min(100%, 520px);
	z-index: 1;
}

.kol-lgp-modal-card h3 {
	color: var(--kol-lgp-text);
	font-size: 1.3rem;
	line-height: 1.2;
	margin: 0;
}

.kol-lgp-modal-card p {
	color: var(--kol-lgp-muted);
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
}

.kol-lgp-modal-close {
	background: var(--kol-lgp-button-bg);
	border: 1px solid;
	border-color: var(--kol-lgp-button-border);
	border-radius: 8px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.24);
	color: var(--kol-lgp-button-text);
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 900;
	margin-top: 4px;
	padding: 11px 14px;
	text-align: center;
}