:root {
	--er-primary:          #6366f1;
	--er-secondary:        #a855f7;
	--er-bg:               rgba(8, 17, 38, 0.95);
	--er-text:             #f5f7fa;
	--er-text-muted:       #7a8499;
	--er-border:           rgba(255, 255, 255, 0.08);
	--er-track-bg:         rgba(255, 255, 255, 0.06);
	--er-shadow:           0 4px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
	--er-radius:           18px;
	--er-ease:             cubic-bezier(0.4, 0, 0.2, 1);
	--er-duration:         0.3s;

	--er-gap-sm:           8px;
	--er-gap-md:           12px;
	--er-gap-lg:           16px;

	--er-icon-size:        32px;

	/* Wide enough for "100%" at all font sizes */
	--er-pct-width:        3.5ch;

	/* Safe-area base */
	--er-margin:           20px;
	--er-safe-top:         env(safe-area-inset-top, 0px);
	--er-safe-right:       env(safe-area-inset-right, 0px);
	--er-safe-bottom:      env(safe-area-inset-bottom, 0px);
	--er-safe-left:        env(safe-area-inset-left, 0px);

	/* Set inline by plugin settings */
	--er-pill-width:       340px;
	--er-pill-padding:     1;
	--er-circle-size:      1;
	--er-circle-padding:   1;
	--er-saas-width:       260px;
	--er-saas-padding:     1;
	--er-saas-radius:      var(--er-radius);
	--er-minimal-spacing:  1;
}

/* Light-mode overrides — applied via class when plugin theme is 'light' */
.er-widget--theme-light {
	--er-bg:         rgba(255, 255, 255, 0.96);
	--er-text:       #1a1a1a;
	--er-text-muted: #6b7280;
	--er-border:     rgba(0, 0, 0, 0.08);
	--er-track-bg:   rgba(0, 0, 0, 0.06);
	--er-shadow:     0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
	--er-primary:    #6366f1;
	--er-secondary:  #8b5cf6;
}

.er-widget {
	position:       fixed;
	z-index:        999999;
	font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	line-height:    1;
	pointer-events: auto;

	opacity:    0;
	transform:  translateY(16px);
	transition:
		opacity   var(--er-duration) var(--er-ease),
		transform var(--er-duration) var(--er-ease);
	will-change: opacity, transform;
}

.er-widget.is-visible {
	opacity:   1;
	transform: translateY(0);
}

.er-widget.is-hidden {
	opacity:        0;
	transform:      translateY(16px);
	pointer-events: none;
}

.er-widget--top-left {
	top:  calc(var(--er-margin) + var(--er-safe-top));
	left: calc(var(--er-margin) + var(--er-safe-left));
}

.er-widget--top-right {
	top:   calc(var(--er-margin) + var(--er-safe-top));
	right: calc(var(--er-margin) + var(--er-safe-right));
}

.er-widget--bottom-left {
	bottom: calc(var(--er-margin) + var(--er-safe-bottom));
	left:   calc(var(--er-margin) + var(--er-safe-left));
}

.er-widget--bottom-right {
	bottom: calc(var(--er-margin) + var(--er-safe-bottom));
	right:  calc(var(--er-margin) + var(--er-safe-right));
}

.er-widget--center-left {
	top:       50%;
	left:      calc(var(--er-margin) + var(--er-safe-left));
	transform: translateY(-50%);
}

.er-widget--center-left.is-visible {
	transform: translateY(-50%);
}

.er-widget--center-left.is-hidden {
	transform: translateY(calc(-50% + 16px));
}

.er-widget--center-right {
	top:       50%;
	right:     calc(var(--er-margin) + var(--er-safe-right));
	transform: translateY(-50%);
}

.er-widget--center-right.is-visible {
	transform: translateY(-50%);
}

.er-widget--center-right.is-hidden {
	transform: translateY(calc(-50% + 16px));
}

.admin-bar .er-widget--top-left,
.admin-bar .er-widget--top-right {
	top: calc(var(--er-margin) + var(--er-safe-top) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .er-widget--top-left,
	.admin-bar .er-widget--top-right {
		top: calc(var(--er-margin) + var(--er-safe-top) + 46px);
	}
}

.er-widget__progress-row {
	width:     100%;
	flex:      none;
}

.er-widget__track {
	width:         100%;
	height:        3px;
	background:    var(--er-track-bg);
	border-radius: 999px;
	overflow:      hidden;
}

.er-widget__fill {
	height:     100%;
	width:      0%;
	background: linear-gradient(90deg, var(--er-primary), var(--er-secondary));
	transition: width 0.35s var(--er-ease);
}

.er-widget:focus-visible {
	outline:        2px solid var(--er-primary);
	outline-offset: 4px;
}

.er-widget--pill {
	display:        flex;
	flex-direction: column;
	gap:            var(--er-gap-sm);

	background:          var(--er-bg);
	backdrop-filter:     blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border:          1px solid var(--er-border);
	border-radius:   999px;
	overflow:        hidden;
	box-shadow:      var(--er-shadow);

	min-width:   220px;
	max-width:   min(var(--er-pill-width), calc(100vw - 2 * var(--er-margin) - var(--er-safe-left) - var(--er-safe-right)));
	padding:     calc(var(--er-pill-padding) * 12px) calc(var(--er-pill-padding) * 20px) calc(var(--er-pill-padding) * 14px);
	box-sizing:  border-box;
}

.er-widget--pill .er-widget__content-row {
	display:     flex;
	align-items: center;
	gap:         var(--er-gap-md);
	min-width:   0;
}

.er-widget--pill .er-widget__icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           var(--er-icon-size);
	height:          var(--er-icon-size);
	min-width:       var(--er-icon-size);
	border-radius:   50%;
	background:      linear-gradient(135deg, var(--er-primary), var(--er-secondary));
	color:           #fff;
	flex:            none;
}

.er-widget--pill .er-widget__time {
	flex:          1 1 0%;
	min-width:     0;
	font-size:     12px;
	font-weight:   500;
	color:         var(--er-text-muted);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.er-widget--pill .er-widget__percentage {
	flex:                  none;
	width:                 var(--er-pct-width);
	text-align:            right;
	font-size:             18px;
	font-weight:           700;
	color:                 var(--er-text);
	font-variant-numeric:  tabular-nums;
	white-space:           nowrap;
}

.er-widget--pill .er-widget__progress-row {
}

.er-widget--pill:hover {
	transform: translateY(-3px);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.50),
		0 2px 8px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition:
		transform  var(--er-duration) var(--er-ease),
		box-shadow var(--er-duration) var(--er-ease);
}

.er-widget--center-left.er-widget--pill:hover,
.er-widget--center-right.er-widget--pill:hover {
	transform: translateY(calc(-50% - 3px));
}

.er-widget--circle {
	display:         flex;
	align-items:     center;
	justify-content: center;

	width:           calc(var(--er-circle-size) * 104px);
	height:          calc(var(--er-circle-size) * 104px);

	background:          var(--er-bg);
	backdrop-filter:     blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border:          1px solid var(--er-border);
	border-radius:   50%;
	box-sizing:      border-box;

	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.40),
		0 2px 8px  rgba(0, 0, 0, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);

	transition:
		transform  0.2s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);

	will-change: transform;
}

/* Sized close to the badge edge */
.er-widget--circle .er-widget__ring {
	position: relative;
	width:    calc(var(--er-circle-size) * 90px);
	height:   calc(var(--er-circle-size) * 90px);
	flex:     none;
}

/* SVG occupies the full ring container, rotated so 0% starts at top */
.er-widget--circle .er-widget__ring-svg {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	transform:  rotate(-90deg);
	will-change: filter;
	transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.er-widget--circle .er-widget__ring-track {
	fill:            none;
	stroke:          var(--er-track-bg);
	stroke-width:    5;
	opacity:         0.6;
	filter:          drop-shadow(inset 0 0 1px rgba(128, 128, 128, 0.15));
}

/* Gradient stroke with spring easing */
.er-widget--circle .er-widget__ring-fill {
	fill:                 none;
	stroke-linecap:       round;
	stroke-width:         5;
	stroke-dashoffset:    0;
	stroke:               url(#er-circle-gradient);
	transition:
		stroke-dashoffset 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

	filter: drop-shadow(0 0 4px rgba(128, 90, 255, 0.15));
	will-change: stroke-dashoffset;
}

.er-widget--circle .er-widget__ring-center {
	position:        absolute;
	inset:           0;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             calc(var(--er-circle-padding) * 1px);
	padding:         calc(var(--er-circle-padding) * 6px);
}

.er-widget--circle .er-widget__percentage {
	font-size:            calc(var(--er-circle-size) * 21px);
	font-weight:          700;
	color:                var(--er-text);
	font-variant-numeric: tabular-nums;
	line-height:          1;
	letter-spacing:       -0.02em;
	margin-top:           calc(var(--er-circle-size) * 4px);
}

.er-widget--circle .er-widget__time {
	font-size:      calc(var(--er-circle-size) * 11px);
	font-weight:    500;
	letter-spacing: 0.03em;
	color:          var(--er-text-muted);
	line-height:    1.3;
	white-space:    nowrap;
	text-align:     center;
}

.er-widget--theme-light.er-widget--circle,
.er-widget--theme-light .er-widget--circle {
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.10),
		0 2px 8px  rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.er-widget--theme-light.er-widget--circle:hover,
.er-widget--theme-light .er-widget--circle:hover {
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.15),
		0 4px 12px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.er-widget--circle:hover {
	transform: scale(1.03);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.50),
		0 4px 12px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.er-widget--circle:hover .er-widget__ring-svg {
	filter: drop-shadow(0 0 8px rgba(128, 90, 255, 0.20));
}

.er-widget--circle:hover .er-widget__ring-fill {
	filter: drop-shadow(0 0 8px rgba(128, 90, 255, 0.25));
}

.er-widget--circle.is-complete {
	animation: er-circle-complete 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.er-widget--circle.is-complete .er-widget__ring-svg {
	filter: drop-shadow(0 0 12px rgba(128, 90, 255, 0.30));
	transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes er-circle-complete {
	0%   { transform: scale(1);   }
	40%  { transform: scale(1.04); }
	100% { transform: scale(1);   }
}

.er-widget--saas {
	display:        flex;
	flex-direction: column;
	gap:            var(--er-gap-lg);

	width:       var(--er-saas-width);
	max-width:   min(var(--er-saas-width), calc(100vw - 2 * var(--er-margin) - var(--er-safe-left) - var(--er-safe-right)));
	padding:     calc(var(--er-saas-padding) * 20px);
	box-sizing:  border-box;

	background:          var(--er-bg);
	backdrop-filter:     blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border:          1px solid var(--er-border);
	border-radius:   var(--er-saas-radius);
	box-shadow:      var(--er-shadow);

	transition:
		transform  var(--er-duration) var(--er-ease),
		box-shadow var(--er-duration) var(--er-ease);
}

.er-widget--saas .er-widget__content-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--er-gap-md);
	min-width:       0;
}

.er-widget--saas .er-widget__label {
	font-size:      12px;
	font-weight:    600;
	color:          var(--er-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space:    nowrap;
	flex:           1 1 0%;
	min-width:      0;
	overflow:       hidden;
	text-overflow:  ellipsis;
}

.er-widget--saas .er-widget__percentage {
	flex:                  none;
	font-size:             22px;
	font-weight:           700;
	font-variant-numeric:  tabular-nums;
	line-height:           1;
	background:            linear-gradient(135deg, var(--er-primary), var(--er-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip:       text;
}

.er-widget--saas .er-widget__progress-row {
	width: 100%;
}

.er-widget--saas .er-widget__track {
	height: 6px;
}

/* Shimmer on fill */
.er-widget--saas .er-widget__fill {
	position: relative;
	overflow: hidden;
}

.er-widget--saas .er-widget__fill::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	animation:  er-shimmer 2s linear infinite;
}

@keyframes er-shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

.er-widget--saas .er-widget__stats-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--er-gap-md);
}

.er-widget--saas .er-widget__stat {
	display:        flex;
	flex-direction: column;
	gap:            5px;
	padding:        10px;
	background:     rgba(255, 255, 255, 0.03);
	border:         1px solid rgba(255, 255, 255, 0.05);
	border-radius:  10px;
	min-width:      0;
	transition:
		background  0.2s var(--er-ease),
		border-color 0.2s var(--er-ease);
}

.er-widget--saas .er-widget__stat:hover {
	background:   rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.10);
}

.er-widget--saas .er-widget__stat-label {
	font-size:      10px;
	font-weight:    500;
	color:          var(--er-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space:    nowrap;
}

.er-widget--saas .er-widget__stat-value {
	font-size:            14px;
	font-weight:          600;
	color:                var(--er-text);
	font-variant-numeric: tabular-nums;
	white-space:          nowrap;
	overflow:             hidden;
	text-overflow:        ellipsis;
}

.er-widget--saas .er-widget__time {
	color: var(--er-primary);
}

.er-widget--saas .er-widget__words {
	color: var(--er-secondary);
}

.er-widget--saas:hover {
	transform: translateY(-4px);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.50),
		0 4px 12px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.er-widget--center-left.er-widget--saas:hover,
.er-widget--center-right.er-widget--saas:hover {
	transform: translateY(calc(-50% - 4px));
}

.er-widget--theme-light .er-widget--saas .er-widget__stat {
	background:   rgba(0, 0, 0, 0.02);
	border-color: rgba(0, 0, 0, 0.05);
}

.er-widget--theme-light .er-widget--saas .er-widget__stat:hover {
	background:   rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.10);
}

.er-widget--minimal {
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	gap:            calc(var(--er-minimal-spacing) * 4px);

	padding:     calc(var(--er-minimal-spacing) * 12px) calc(var(--er-minimal-spacing) * 16px);
	background:  transparent;
	border:      none;
	box-shadow:  none;

	transition: transform var(--er-duration) var(--er-ease);
}

.er-widget--minimal::before,
.er-widget--minimal::after {
	content:    '';
	display:    block;
	width:      48px;
	height:     1px;
	background: linear-gradient(90deg, transparent, var(--er-text-muted), transparent);
	opacity:    0.3;
}

.er-widget--minimal .er-widget__percentage {
	font-size:            30px;
	font-weight:          300;
	color:                var(--er-text);
	font-variant-numeric: tabular-nums;
	letter-spacing:       -0.02em;
	line-height:          1;
	opacity:              0.9;
	transition:           opacity var(--er-duration) var(--er-ease);
}

.er-widget--minimal .er-widget__time {
	font-size:   11px;
	font-weight: 400;
	color:       var(--er-text-muted);
	white-space: nowrap;
	opacity:     0.7;
	transition:  opacity var(--er-duration) var(--er-ease);
}

.er-widget--minimal:hover::before,
.er-widget--minimal:hover::after {
	opacity:   0.6;
	transition: opacity 0.2s var(--er-ease);
}

.er-widget--minimal:hover .er-widget__percentage,
.er-widget--minimal:hover .er-widget__time {
	opacity: 1;
}

.er-widget--minimal:hover {
	transform: translateY(-2px);
}

.er-widget--center-left.er-widget--minimal:hover,
.er-widget--center-right.er-widget--minimal:hover {
	transform: translateY(calc(-50% - 2px));
}

.er-widget.is-complete {
	animation: er-celebrate 0.6s var(--er-ease);
}

@keyframes er-celebrate {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.06); }
	55%  { transform: scale(0.97); }
	78%  { transform: scale(1.01); }
	100% { transform: scale(1); }
}

.er-widget--center-left.is-complete,
.er-widget--center-right.is-complete {
	animation-name: er-celebrate-center;
}

@keyframes er-celebrate-center {
	0%   { transform: translateY(-50%) scale(1); }
	30%  { transform: translateY(-50%) scale(1.06); }
	55%  { transform: translateY(-50%) scale(0.97); }
	78%  { transform: translateY(-50%) scale(1.01); }
	100% { transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.er-widget,
	.er-widget--center-left,
	.er-widget--center-right {
		animation:  none;
		transition: opacity 0.1s linear;
	}

	.er-widget__fill,
	.er-widget__ring-fill {
		transition: stroke-dashoffset 0.1s linear;
	}

	.er-widget--circle {
		animation: none;
	}

	.er-widget--circle.is-complete {
		animation: none;
	}

	.er-widget--saas .er-widget__fill::after {
		animation: none;
	}
}

@media (forced-colors: active) {
	.er-widget {
		border: 2px solid ButtonText;
	}

	.er-widget__fill,
	.er-widget__ring-fill {
		forced-color-adjust: none;
	}
}

@media screen and (max-width: 1024px) {
	.er-widget--pill {
		min-width: 200px;
		padding:   10px 14px 9px;
	}

	.er-widget--pill .er-widget__icon {
		--er-icon-size: 28px;
	}

	.er-widget--pill .er-widget__percentage {
		font-size: 16px;
	}

	.er-widget--pill .er-widget__time {
		font-size: 11px;
	}

	.er-widget--circle {
		width:  calc(var(--er-circle-size) * 92px);
		height: calc(var(--er-circle-size) * 92px);
	}

	.er-widget--circle .er-widget__ring {
		width:  calc(var(--er-circle-size) * 80px);
		height: calc(var(--er-circle-size) * 80px);
	}

	.er-widget--circle .er-widget__percentage {
		font-size: 19px;
	}

	.er-widget--circle .er-widget__time {
		font-size: 10px;
	}

	.er-widget--saas {
		padding: calc(var(--er-saas-padding) * 16px);
		gap:     var(--er-gap-md);
	}

	.er-widget--saas .er-widget__percentage {
		font-size: 18px;
	}

	.er-widget--minimal .er-widget__percentage {
		font-size: 24px;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--er-margin: 12px;
	}

	.er-widget--pill {
		min-width: 180px;
		padding:   9px 12px 8px;
		gap:       6px;
	}

	.er-widget--pill .er-widget__icon {
		--er-icon-size: 24px;
	}

	.er-widget--pill .er-widget__percentage {
		font-size: 14px;
	}

	.er-widget--pill .er-widget__time {
		font-size: 10px;
	}

	.er-widget--circle {
		width:  calc(var(--er-circle-size) * 82px);
		height: calc(var(--er-circle-size) * 82px);
	}

	.er-widget--circle .er-widget__ring {
		width:  calc(var(--er-circle-size) * 72px);
		height: calc(var(--er-circle-size) * 72px);
	}

	.er-widget--circle .er-widget__percentage {
		font-size: 17px;
	}

	.er-widget--circle .er-widget__time {
		font-size: 9px;
	}

	.er-widget--saas {
		padding: calc(var(--er-saas-padding) * 14px);
		gap:     12px;
	}

	.er-widget--saas .er-widget__percentage {
		font-size: 16px;
	}

	.er-widget--saas .er-widget__stat-value {
		font-size: 12px;
	}

	.er-widget--minimal .er-widget__percentage {
		font-size: 22px;
	}

	.er-widget--minimal .er-widget__time {
		font-size: 10px;
	}
}

@media screen and (max-width: 480px) {
	:root {
		--er-margin: 10px;
	}

	.er-widget--pill {
		min-width: 160px;
		padding:   8px 10px 7px;
		gap:       5px;
	}

	.er-widget--pill .er-widget__icon {
		--er-icon-size: 22px;
	}

	.er-widget--pill .er-widget__percentage {
		font-size: 13px;
	}

	.er-widget--pill .er-widget__time {
		font-size: 9px;
	}

	.er-widget--circle {
		width:  calc(var(--er-circle-size) * 72px);
		height: calc(var(--er-circle-size) * 72px);
	}

	.er-widget--circle .er-widget__ring {
		width:  calc(var(--er-circle-size) * 64px);
		height: calc(var(--er-circle-size) * 64px);
	}

	.er-widget--circle .er-widget__percentage {
		font-size: 15px;
	}

	.er-widget--circle .er-widget__time {
		font-size: 8px;
	}

	.er-widget--saas {
		padding: calc(var(--er-saas-padding) * 12px);
		gap:     10px;
	}

	.er-widget--saas .er-widget__percentage {
		font-size: 15px;
	}

	.er-widget--minimal .er-widget__percentage {
		font-size: 20px;
	}
}

[dir="rtl"] .er-widget--pill .er-widget__content-row {
	flex-direction: row-reverse;
}

[dir="rtl"] .er-widget--minimal {
	align-items: flex-start;
}

[dir="rtl"] .er-widget--saas .er-widget__content-row {
	flex-direction: row-reverse;
}

@media print {
	.er-widget {
		display: none !important;
	}
}