/*
 * Tizpa — reusable components.
 */

/* Buttons */

.kplso-btn {
	--btn-bg: var(--kplso-surface);
	--btn-fg: var(--kplso-text);
	--btn-bd: var(--kplso-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 18px;
	border-radius: var(--kplso-radius-sm);
	border: 1px solid var(--btn-bd);
	background: var(--btn-bg);
	color: var(--btn-fg) !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .15s var(--kplso-ease), box-shadow .2s var(--kplso-ease), background .2s, border-color .2s, opacity .2s;
}

.kplso-btn:hover {
	border-color: var(--kplso-border-strong);
}

.kplso-btn:active {
	transform: translateY(1px);
}

.kplso-btn--primary {
	--btn-bg: var(--kplso-gradient);
	--btn-fg: #fff;
	--btn-bd: transparent;
	background: var(--kplso-gradient);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--kplso-accent) 28%, transparent);
}

.kplso-btn--primary:hover {
	box-shadow: 0 10px 26px color-mix(in srgb, var(--kplso-accent) 38%, transparent);
	border-color: transparent;
}

.kplso-btn--soft {
	--btn-bg: var(--kplso-accent-soft);
	--btn-fg: var(--kplso-accent-text);
	--btn-bd: transparent;
}

.kplso-btn--soft:hover {
	border-color: var(--kplso-accent-line);
}

.kplso-btn--ghost {
	--btn-bg: transparent;
}

.kplso-btn--sm {
	min-height: 34px;
	padding: 0 12px;
	font-size: 13px;
}

.kplso-btn--lg {
	min-height: 50px;
	padding: 0 26px;
	font-size: 15px;
	border-radius: var(--kplso-radius);
}

.kplso-btn[disabled],
.kplso-btn.is-busy {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
}

.kplso-btn.is-busy .kplso-icon {
	animation: kplso-spin 1s linear infinite;
}

.kplso-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--kplso-radius-sm);
	border: 1px solid var(--kplso-border);
	background: var(--kplso-surface);
	color: var(--kplso-text-2);
	cursor: pointer;
}

.kplso-icon-btn:hover {
	color: var(--kplso-text);
	border-color: var(--kplso-border-strong);
}

.kplso-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--kplso-accent-text);
	cursor: pointer;
}

.kplso-link:hover {
	text-decoration: underline;
}

.kplso-link.is-danger {
	color: var(--kplso-bad);
}

.kplso-link[disabled] {
	opacity: .45;
	pointer-events: none;
}

/* Cards */

.kplso-card {
	background: var(--kplso-surface);
	border: 1px solid var(--kplso-border);
	border-radius: var(--kplso-radius-lg);
	box-shadow: var(--kplso-shadow);
	padding: var(--kplso-pad);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.kplso-card__head h3 {
	font-size: 16px;
	font-weight: 800;
	display: flex;
	align-items: center;
	gap: 8px;
}

.kplso-card__head p {
	color: var(--kplso-text-2);
	margin-top: 4px;
	font-size: 13px;
}

.kplso-card__head--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.kplso-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding-top: 14px;
	border-top: 1px dashed var(--kplso-border);
	font-size: 13px;
}

.kplso-card--split {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.kplso-card--fields {
	padding: 0;
	gap: 0;
	overflow: hidden;
}

.kplso-card--fields .kplso-card__head {
	padding: 16px var(--kplso-pad);
	background: var(--kplso-surface-2);
	border-bottom: 1px solid var(--kplso-border);
}

/* Stats */

.kplso-stat {
	--tone: var(--kplso-accent);
	--tone-soft: var(--kplso-accent-soft);
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon label" "icon value" "icon note";
	column-gap: 14px;
	align-items: center;
	padding: 18px 20px;
	background: var(--kplso-surface);
	border: 1px solid var(--kplso-border);
	border-radius: var(--kplso-radius-lg);
	box-shadow: var(--kplso-shadow);
	min-width: 0;
}

.kplso-stat.is-good {
	--tone: var(--kplso-good);
	--tone-soft: var(--kplso-good-soft);
}

.kplso-stat.is-warn {
	--tone: var(--kplso-warn);
	--tone-soft: var(--kplso-warn-soft);
}

.kplso-stat.is-bad {
	--tone: var(--kplso-bad);
	--tone-soft: var(--kplso-bad-soft);
}

.kplso-stat.is-info {
	--tone: var(--kplso-info);
	--tone-soft: var(--kplso-info-soft);
}

.kplso-stat__icon {
	grid-area: icon;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	color: var(--tone);
	background: var(--tone-soft);
}

.kplso-stat__label {
	grid-area: label;
	font-size: 12px;
	color: var(--kplso-text-3);
	font-weight: 600;
}

.kplso-stat__value {
	grid-area: value;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kplso-stat__note {
	grid-area: note;
	font-size: 12px;
	color: var(--kplso-text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Alerts */

.kplso-alert {
	--tone: var(--kplso-info);
	--tone-soft: var(--kplso-info-soft);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--kplso-radius);
	background: var(--tone-soft);
	border: 1px solid color-mix(in srgb, var(--tone) 25%, transparent);
	color: var(--kplso-text);
}

.kplso-alert > .kplso-icon {
	color: var(--tone);
}

.kplso-alert p {
	flex: 1;
}

.kplso-alert.is-warn {
	--tone: var(--kplso-warn);
	--tone-soft: var(--kplso-warn-soft);
}

.kplso-alert.is-bad {
	--tone: var(--kplso-bad);
	--tone-soft: var(--kplso-bad-soft);
}

.kplso-alert.is-good {
	--tone: var(--kplso-good);
	--tone-soft: var(--kplso-good-soft);
}

/* Settings fields */

.kplso-fields {
	display: flex;
	flex-direction: column;
}

.kplso-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px 28px;
	align-items: center;
	padding: var(--kplso-field-pad) var(--kplso-pad);
	border-bottom: 1px solid var(--kplso-border);
	transition: background .2s;
}

.kplso-field:last-child {
	border-bottom: 0;
}

.kplso-field:hover {
	background: var(--kplso-surface-2);
}

.kplso-field.is-dirty {
	background: var(--kplso-accent-soft);
}

.kplso-field.is-disabled {
	display: none;
}

.kplso-field--wide {
	grid-template-columns: minmax(0, 1fr);
}

.kplso-field__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
}

.kplso-field__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--kplso-text);
	cursor: pointer;
}

.kplso-field__help {
	margin-top: 4px !important;
	color: var(--kplso-text-2);
	font-size: 13px;
	line-height: 1.85;
	max-width: 760px;
}

.kplso-field--number .kplso-field__control,
.kplso-field--text .kplso-field__control,
.kplso-field--password .kplso-field__control {
	min-width: 260px;
}

.kplso-impact {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--kplso-text-3);
}

.kplso-impact__bars {
	display: inline-flex;
	gap: 2px;
	align-items: flex-end;
	direction: ltr;
}

.kplso-impact__bars i {
	width: 4px;
	border-radius: 2px;
	background: var(--kplso-border-strong);
}

.kplso-impact__bars i:nth-child(1) { height: 5px; }
.kplso-impact__bars i:nth-child(2) { height: 7px; }
.kplso-impact__bars i:nth-child(3) { height: 9px; }
.kplso-impact__bars i:nth-child(4) { height: 11px; }
.kplso-impact__bars i:nth-child(5) { height: 13px; }

.kplso-impact__bars[data-level="1"] i:nth-child(-n+1),
.kplso-impact__bars[data-level="2"] i:nth-child(-n+2),
.kplso-impact__bars[data-level="3"] i:nth-child(-n+3),
.kplso-impact__bars[data-level="4"] i:nth-child(-n+4),
.kplso-impact__bars[data-level="5"] i:nth-child(-n+5) {
	background: var(--kplso-accent);
}

.kplso-risk {
	font-size: 11px;
	font-weight: 700;
	padding: 1px 9px;
	border-radius: 20px;
	background: var(--kplso-good-soft);
	color: var(--kplso-good);
}

.kplso-risk.is-medium {
	background: var(--kplso-info-soft);
	color: var(--kplso-info);
}

.kplso-risk.is-high {
	background: var(--kplso-warn-soft);
	color: var(--kplso-warn);
}

/* Switch */

.kplso-switch {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.kplso-switch input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.kplso-switch__track {
	width: 46px;
	height: 26px;
	border-radius: 20px;
	background: var(--kplso-border-strong);
	position: relative;
	transition: background .2s var(--kplso-ease);
}

.kplso-switch__thumb {
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: inset-inline-start .2s var(--kplso-ease);
}

.kplso-switch input:checked + .kplso-switch__track {
	background: var(--kplso-gradient);
}

.kplso-switch input:checked + .kplso-switch__track .kplso-switch__thumb {
	inset-inline-start: 23px;
}

.kplso-switch input:focus-visible + .kplso-switch__track {
	outline: 2px solid var(--kplso-accent);
	outline-offset: 2px;
}

/* Inputs */

.kplso-app .kplso-input,
.kplso-app .kplso-select,
.kplso-app .kplso-textarea {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--kplso-border-strong);
	border-radius: var(--kplso-radius-sm);
	background: var(--kplso-surface);
	color: var(--kplso-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}

.kplso-app .kplso-textarea {
	font-family: var(--kplso-mono);
	font-size: 12.5px;
	resize: vertical;
}

.kplso-app .kplso-input:focus,
.kplso-app .kplso-select:focus,
.kplso-app .kplso-textarea:focus {
	border-color: var(--kplso-accent);
	box-shadow: 0 0 0 3px var(--kplso-accent-soft);
	outline: none;
}

.kplso-app .kplso-input::placeholder,
.kplso-app .kplso-textarea::placeholder {
	color: var(--kplso-text-3);
}

.kplso-app .kplso-select {
	max-width: none;
	background-position: left 10px top 55%;
}

.kplso-input-group {
	display: flex;
	align-items: stretch;
}

.kplso-input-group .kplso-input {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.kplso-input-group__unit {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	border: 1px solid var(--kplso-border-strong);
	border-inline-start: 0;
	border-start-end-radius: var(--kplso-radius-sm);
	border-end-end-radius: var(--kplso-radius-sm);
	background: var(--kplso-surface-3);
	color: var(--kplso-text-2);
	font-size: 13px;
	white-space: nowrap;
}

.kplso-inline-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.kplso-inline-form .kplso-input {
	flex: 1 1 320px;
	width: auto;
}

/* Choice cards (selects with few options) */

.kplso-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px;
}

.kplso-choice {
	position: relative;
	cursor: pointer;
}

.kplso-choice input {
	position: absolute;
	opacity: 0;
}

.kplso-choice__box {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--kplso-border);
	border-radius: var(--kplso-radius-sm);
	background: var(--kplso-surface);
	font-size: 13px;
	font-weight: 600;
	color: var(--kplso-text-2);
	transition: border-color .2s, background .2s, color .2s;
}

.kplso-choice__box::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--kplso-border-strong);
	background: var(--kplso-surface);
	transition: border .2s;
}

.kplso-choice input:checked + .kplso-choice__box {
	border-color: var(--kplso-accent);
	background: var(--kplso-accent-soft);
	color: var(--kplso-text);
}

.kplso-choice input:checked + .kplso-choice__box::before {
	border: 5px solid var(--kplso-accent);
}

.kplso-choice input:focus-visible + .kplso-choice__box {
	outline: 2px solid var(--kplso-accent);
	outline-offset: 2px;
}

/* Segmented control */

.kplso-segmented {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--kplso-radius-sm);
	background: var(--kplso-surface-3);
	gap: 2px;
}

.kplso-segmented label {
	position: relative;
	cursor: pointer;
}

.kplso-segmented input {
	position: absolute;
	opacity: 0;
}

.kplso-segmented span {
	display: block;
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--kplso-text-2);
	transition: background .2s, color .2s;
}

.kplso-segmented input:checked + span {
	background: var(--kplso-surface);
	color: var(--kplso-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* Save bar (sticks to the bottom of the screen while its form is visible) */

.kplso-settings {
	display: flex;
	flex-direction: column;
	gap: var(--kplso-gap);
}

.kplso-savebar {
	position: sticky;
	bottom: 16px;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 18px;
	border-radius: var(--kplso-radius);
	background: var(--kplso-side-bg);
	color: #fff;
	box-shadow: var(--kplso-shadow-lg);
	animation: kplso-rise .25s var(--kplso-ease);
}

.kplso-savebar__text {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.kplso-savebar__actions {
	display: flex;
	gap: 8px;
}

.kplso-savebar .kplso-btn--ghost {
	color: #fff !important;
	border-color: rgba(255, 255, 255, .2);
}

/* Toolbar */

.kplso-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.kplso-toolbar--end {
	justify-content: flex-end;
}

/* Progress */

.kplso-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kplso-progress__bar {
	height: 10px;
	border-radius: 10px;
	background: var(--kplso-surface-3);
	overflow: hidden;
}

.kplso-progress__bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--kplso-gradient);
	background-size: 200% 100%;
	animation: kplso-shimmer 1.6s linear infinite;
	transition: width .35s var(--kplso-ease);
}

.kplso-progress__meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	color: var(--kplso-text-2);
}

.kplso-log {
	max-height: 180px;
	overflow-y: auto;
	font-size: 12px;
	color: var(--kplso-text-2);
	background: var(--kplso-surface-2);
	border-radius: var(--kplso-radius-sm);
	padding: 8px 12px;
	display: grid;
	gap: 2px;
}

.kplso-log:empty {
	display: none;
}

.kplso-log li.is-error {
	color: var(--kplso-bad);
}

.kplso-log li.is-converted {
	color: var(--kplso-good);
}

/* Tables */

.kplso-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--kplso-border);
	border-radius: var(--kplso-radius);
}

.kplso-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.kplso-table th {
	text-align: start;
	font-weight: 700;
	color: var(--kplso-text-3);
	font-size: 12px;
	background: var(--kplso-surface-2);
	padding: 10px 14px;
	border-bottom: 1px solid var(--kplso-border);
	white-space: nowrap;
}

.kplso-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--kplso-border);
	vertical-align: middle;
}

.kplso-table tr:last-child td {
	border-bottom: 0;
}

.kplso-table__actions {
	text-align: end;
	white-space: nowrap;
}

/* Tags, chips, pills, dots */

.kplso-tag {
	display: inline-flex;
	align-items: center;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 8px;
	border-radius: 20px;
	background: var(--kplso-surface-3);
	color: var(--kplso-text-2);
	vertical-align: middle;
}

.kplso-tag.is-good {
	background: var(--kplso-good-soft);
	color: var(--kplso-good);
}

.kplso-tag.is-warn {
	background: var(--kplso-warn-soft);
	color: var(--kplso-warn);
}

.kplso-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kplso-chip {
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid var(--kplso-border);
	background: var(--kplso-surface);
	color: var(--kplso-text-2);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.kplso-chip.is-active {
	background: var(--kplso-text);
	border-color: var(--kplso-text);
	color: var(--kplso-surface);
}

.kplso-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 20px;
	font-weight: 700;
	font-size: 13px;
}

.kplso-status-pill::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.kplso-status-pill.is-good {
	background: var(--kplso-good-soft);
	color: var(--kplso-good);
}

.kplso-status-pill.is-warn {
	background: var(--kplso-warn-soft);
	color: var(--kplso-warn);
}

.kplso-dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--kplso-border-strong);
}

.kplso-dot.is-on {
	background: var(--kplso-good);
	box-shadow: 0 0 0 4px var(--kplso-good-soft);
}

.kplso-delta {
	font-weight: 800;
	direction: ltr;
	unicode-bidi: isolate;
}

.kplso-delta.is-good {
	color: var(--kplso-good);
}

.kplso-delta.is-bad {
	color: var(--kplso-bad);
}

/* Checkbox */

.kplso-check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.kplso-check input {
	position: absolute;
	opacity: 0;
	width: 20px;
	height: 20px;
	margin: 0;
}

.kplso-check__box {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	border-radius: 6px;
	border: 2px solid var(--kplso-border-strong);
	background: var(--kplso-surface);
	display: grid;
	place-items: center;
	transition: background .15s, border-color .15s;
}

.kplso-check input:checked + .kplso-check__box {
	background: var(--kplso-gradient);
	border-color: transparent;
}

.kplso-check input:checked + .kplso-check__box::after {
	content: "";
	width: 9px;
	height: 5px;
	border: 2px solid #fff;
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg) translate(1px, -1px);
}

.kplso-check input:focus-visible + .kplso-check__box {
	outline: 2px solid var(--kplso-accent);
	outline-offset: 2px;
}

.kplso-check input:disabled + .kplso-check__box {
	opacity: .5;
}

.kplso-check--solo {
	display: inline-flex;
}

.kplso-check--solo .kplso-check__box {
	margin-top: 0;
}

.kplso-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.kplso-checklist .kplso-check {
	padding: 14px;
	border: 1px solid var(--kplso-border);
	border-radius: var(--kplso-radius);
	background: var(--kplso-surface-2);
}

.kplso-check__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kplso-check__body strong {
	font-size: 13.5px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.kplso-check__body span {
	font-size: 12px;
	color: var(--kplso-text-2);
}

.kplso-check__count {
	font-weight: 800;
	font-size: 15px;
	color: var(--kplso-text);
}

@media (max-width: 782px) {
	.kplso-checklist {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Timeline */

.kplso-timeline {
	display: flex;
	flex-direction: column;
}

.kplso-timeline li {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 14px;
	padding-inline-start: 22px;
	font-size: 13px;
}

.kplso-timeline li::before {
	content: "";
	position: absolute;
	inset-inline-start: 3px;
	top: 8px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--kplso-info);
}

.kplso-timeline li::after {
	content: "";
	position: absolute;
	inset-inline-start: 7px;
	top: 20px;
	bottom: 2px;
	width: 1px;
	background: var(--kplso-border);
}

.kplso-timeline li:last-child::after {
	display: none;
}

.kplso-timeline li.is-success::before {
	background: var(--kplso-good);
}

.kplso-timeline li.is-warning::before {
	background: var(--kplso-warn);
}

.kplso-timeline li.is-error::before {
	background: var(--kplso-bad);
}

.kplso-timeline time {
	font-size: 11.5px;
	color: var(--kplso-text-3);
}

/* Status list */

.kplso-status-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.kplso-status-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--kplso-radius-sm);
	color: var(--kplso-text) !important;
	font-weight: 600;
	font-size: 13px;
	background: var(--kplso-surface-2);
}

.kplso-status-list a:hover {
	background: var(--kplso-surface-3);
}

.kplso-status-list em {
	margin-inline-start: auto;
	font-style: normal;
	font-size: 12px;
	color: var(--kplso-text-3);
}

/* Score ring */

.kplso-ring {
	--tone: var(--kplso-border-strong);
	position: relative;
	flex: none;
}

.kplso-ring.is-good {
	--tone: var(--kplso-good);
}

.kplso-ring.is-warn {
	--tone: var(--kplso-warn);
}

.kplso-ring.is-bad {
	--tone: var(--kplso-bad);
}

.kplso-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.kplso-ring circle {
	fill: none;
	stroke-width: 10;
}

.kplso-ring__track {
	stroke: var(--kplso-surface-3);
}

.kplso-ring__value {
	stroke: var(--tone);
	stroke-linecap: round;
	transition: stroke-dashoffset 1s var(--kplso-ease);
}

.kplso-ring__label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
}

.kplso-ring__label strong {
	font-size: 34px;
	font-weight: 900;
	color: var(--kplso-text);
}

.kplso-ring__label small {
	font-size: 11px;
	color: var(--kplso-text-3);
}

/* Empty state */

.kplso-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 34px 18px;
	color: var(--kplso-text-2);
}

.kplso-empty__icon {
	width: 62px;
	height: 62px;
	border-radius: 20px;
	display: grid;
	place-items: center;
	background: var(--kplso-accent-soft);
	color: var(--kplso-accent-text);
	margin-bottom: 4px;
}

.kplso-empty strong {
	color: var(--kplso-text);
	font-size: 15px;
}

.kplso-empty p {
	max-width: 420px;
	font-size: 13px;
}

/* Toasts */

.kplso-toasts {
	position: fixed;
	z-index: 100010;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
	width: min(92vw, 520px);
}

.kplso-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--kplso-radius);
	background: var(--kplso-side-bg);
	color: #fff;
	box-shadow: var(--kplso-shadow-lg);
	font-size: 13.5px;
	font-weight: 500;
	animation: kplso-rise .25s var(--kplso-ease);
}

.kplso-toast .kplso-icon {
	margin-top: 2px;
}

.kplso-toast.is-success .kplso-icon {
	color: #4ade80;
}

.kplso-toast.is-error .kplso-icon {
	color: #f87171;
}

.kplso-toast.is-leaving {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s, transform .25s;
}

/* Modal */

.kplso-modal {
	position: fixed;
	inset: 0;
	z-index: 100020;
	display: grid;
	place-items: center;
	padding: 16px;
}

.kplso-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 10, 24, .55);
	backdrop-filter: blur(3px);
	animation: kplso-fade-in .2s;
}

.kplso-modal__dialog {
	position: relative;
	width: min(100%, 440px);
	background: var(--kplso-surface);
	border-radius: var(--kplso-radius-lg);
	box-shadow: var(--kplso-shadow-lg);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	animation: kplso-pop .22s var(--kplso-ease);
}

.kplso-modal__icon {
	width: 48px;
	height: 48px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: var(--kplso-warn-soft);
	color: var(--kplso-warn);
}

.kplso-modal__title {
	font-size: 17px !important;
	font-weight: 800 !important;
}

.kplso-modal__text {
	color: var(--kplso-text-2);
}

.kplso-modal__actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

/* Animations */

@keyframes kplso-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes kplso-shimmer {
	from {
		background-position: 0 0;
	}

	to {
		background-position: -200% 0;
	}
}

@keyframes kplso-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes kplso-pop {
	from {
		opacity: 0;
		transform: scale(.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}