/*
	planner.css — mobile-first stylesheet for the locking-plan planner,
	styled to match ideja.hr (black / white, teal accent, no custom font
	licensing dependency — system sans-serif stack).

	The grid (doors x keys) is a fluid CSS Grid/flex matrix: every column has
	a floor (minmax()/min-width) and a share of extra space (fr / flex-grow),
	so the whole table actually shrinks and grows with the viewport instead
	of staying a fixed pixel width. Horizontal scroll on .lp-planner__scroll
	is only a fallback for when a plan has enough doors/keys that even the
	column floors don't fit. Unprefixed rules below are the mobile baseline;
	min-width queries only add enhancements for wider viewports.
*/

:root {
	--lp-black: #000000;
	--lp-white: #ffffff;
	--lp-accent: #41b5d2;
	--lp-grey: #777777;
	--lp-border: #000000;
	--lp-muted-bg: #f2f2f2;

	/*
		The grid is a real matrix: every door is a row, every key is a column,
		and a checkbox marks where they intersect. For that to line up, the
		single-line column-label bar, the per-key header block (edit/number/
		name/qty), and every data row (door row, checkbox cell, door-edit
		button) must all be the same fixed height across the three parallel
		columns (doors / keys / key-controls) that make up the grid.
	*/
	--lp-top-h: 54px;
	--lp-key-header-h: 92px;
	--lp-row-h: 44px;

	/*
		How tall the doors/keys scroll area is allowed to get, in px — kept as
		a variable (JS measures the actual leftover viewport height and sets
		this) instead of a fixed value, so the grid fills the window vertically
		just as fluidly as it already does horizontally. This fallback only
		matters before JS runs.
	*/
	--lp-grid-body-h: 440px;

	/*
		Fluid column template for the doors table, shared by the header row
		and every door row so their cells always line up. Each column has a
		floor (never gets smaller/less usable than this) and a share of any
		extra space (the fr part) — the table actually shrinks and grows with
		the viewport instead of staying a fixed pixel width. Each is its own
		variable so dragging a column's resize handle can pin just that one
		column to a fixed px width while the rest keep sharing space fluidly.
	*/
	--lp-col-position: minmax(26px, 0.4fr);
	--lp-col-door: minmax(90px, 2fr);
	--lp-col-type: minmax(100px, 1.2fr);
	--lp-col-length: minmax(104px, 1.6fr);
	--lp-col-qty: minmax(66px, 0.8fr);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--lp-black);
	background: var(--lp-white);
}

button {
	font-family: inherit;
}


.lp-container {
	width: 100%;
	padding: 0 12px;
}
@media (min-width: 768px) {
	.lp-container { padding: 0 24px; }
}

/* ---------- brand bar ---------- */

.lp-brandbar {
	background: var(--lp-white);
	border-bottom: 3px solid var(--lp-accent);
	padding: 10px 0;
}
.lp-brandbar__logo {
	display: block;
	height: 34px;
	width: auto;
}
@media (min-width: 576px) {
	.lp-brandbar__logo { height: 46px; }
}

/* ---------- toolbar ---------- */

.lp-toolbar {
	background: var(--lp-black);
	padding: 10px 0;
}
.lp-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.lp-toolbar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex: 0 0 auto;
	background: var(--lp-white);
	color: var(--lp-black);
	border: 0;
	border-radius: 4px;
	padding: 9px 12px;
	cursor: pointer;
}
.lp-toolbar__btn:hover {
	background: var(--lp-accent);
	color: var(--lp-white);
}
.lp-toolbar__btn:disabled {
	opacity: 0.35;
	cursor: default;
	background: var(--lp-white);
	color: var(--lp-black);
}
.lp-toolbar__btn svg {
	width: 18px;
	height: 18px;
	display: block;
	flex: 0 0 auto;
}
.lp-toolbar__btn-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
@media (min-width: 768px) {
	.lp-toolbar__btn {
		padding: 10px 14px;
	}
	.lp-toolbar__btn svg {
		width: 20px;
		height: 20px;
	}
	.lp-toolbar__btn-label {
		font-size: 13px;
	}
}

/* ---------- planner ---------- */

.lp-planner {
	background: var(--lp-muted-bg);
	padding: 16px 0 36px;
}

.lp-planner__name-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--lp-white);
	border: 1px solid var(--lp-border);
	border-radius: 4px;
	padding: 8px 12px;
	margin-bottom: 14px;
	max-width: 420px;
}
.lp-planner__name-icon img {
	width: 16px;
	height: 16px;
	display: block;
}
.lp-planner__name-input {
	border: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	outline: none;
	background: transparent;
}

.lp-planner__scroll {
	/* relative so PerfectScrollbar's rails anchor here — see .lp-doors */
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}

.lp-grid {
	/* Spans the full container width so the key-controls column (count stepper
	   + per-door buttons) sits flush against the right edge of the window. The
	   doors table is fixed-width and the controls column is its natural width,
	   so the keys panel is what absorbs the slack — on a wide screen it shows
	   empty space after the last key column, on a narrow one it fills up and
	   scrolls. No max-width cap: when doors' min-width plus the keys' minimum
	   genuinely don't fit, this must overflow so .lp-planner__scroll's
	   horizontal scroll can take over rather than clipping the content. */
	display: flex;
	width: 100%;
	/* min-content, not fit-content: fit-content would resolve to the keys'
	   full natural width (48px x every key in the plan), re-inflating the grid
	   past the viewport and pushing the controls column off-screen — the exact
	   thing the keys' internal scroll exists to prevent. min-content stops at
	   the children's own floors instead. */
	min-width: min-content;
	border: 1px solid var(--lp-border);
	background: var(--lp-white);
}

/* -- doors (left side) -- */

.lp-grid__doors {
	/* Fixed width, not fluid-grow: the doors table used to stretch to fill
	   whatever space was left on wide screens, spreading its columns out
	   with big gaps. flex-grow:0 keeps it a fixed, compact width instead.
	   flex-shrink:1 still lets it compress on narrow viewports, but only
	   down to min-width — the sum of the column floors above (26+70+40+
	   100+52=288px, rounded up for borders) — not to nothing: .lp-grid__keys
	   never shrinks (flex-shrink:0), so without this floor *all* the
	   squeeze on a narrow screen lands on doors alone, right down to
	   unusable. Below this floor, .lp-planner__scroll's horizontal scroll
	   is the fallback, same as when a plan has too many doors/keys to fit. */
	display: flex;
	flex-direction: column;
	flex: 0 1 520px;
	min-width: 390px;
}
.lp-grid__headers {
	display: grid;
	grid-template-columns: var(--lp-col-position) var(--lp-col-door) var(--lp-col-type) var(--lp-col-length) var(--lp-col-qty);
	min-height: var(--lp-top-h);
	background: var(--lp-accent);
	color: var(--lp-white);
}
.lp-grid__key-header-spacer {
	height: var(--lp-key-header-h);
	flex: 0 0 auto;
}

/* Collapsed doors: once a door is fully configured, the type/length/qty
   columns can be folded away, leaving just the drag handle + name so the
   grid can focus on wiring keys to doors. Toggled by
   .lp-toolbar__btn--collapse-doors; grid-template-columns has to be
   overridden on both rules that share it (header row and every door row)
   since hiding a cell alone wouldn't collapse its still-reserved track. */
.lp-grid__doors.is-collapsed {
	flex: 0 1 220px;
	min-width: 140px;
}
.lp-grid__doors.is-collapsed .lp-grid__headers,
.lp-grid__doors.is-collapsed .lp-door {
	grid-template-columns: var(--lp-col-position) 1fr;
}
.lp-grid__doors.is-collapsed .lp-grid__header--type,
.lp-grid__doors.is-collapsed .lp-grid__header--length,
.lp-grid__doors.is-collapsed .lp-grid__header--qty,
.lp-grid__doors.is-collapsed .lp-door__type-row,
.lp-grid__doors.is-collapsed .lp-door__lengths,
.lp-grid__doors.is-collapsed .lp-door__qty {
	display: none;
}
/* Sits in the otherwise-empty first header cell, directly left of the "Vrata"
   column it collapses. Inherits the header's white-on-accent colouring. */
.lp-grid__collapse-btn {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	color: currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.85;
}
.lp-grid__collapse-btn:hover {
	opacity: 1;
}
.lp-grid__collapse-btn svg {
	width: 16px;
	height: 16px;
	display: block;
	transition: transform 0.15s ease;
}
.lp-grid__collapse-btn.is-active svg {
	transform: rotate(180deg);
}
.lp-grid__header {
	padding: 8px 6px;
	border-right: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	text-align: center;
	position: relative;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}
.lp-grid__header--length { flex-direction: column; gap: 2px; }
.lp-grid__header--qty { border-right: 0; }

/* The length header stacks its icon+label above the hover hint, so those two
   need their own row box rather than being direct children of the column
   (which is flex-column for that one header). */
.lp-grid__header-main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 0;
}
.lp-grid__header-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lp-grid__header-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.lp-col-resize {
	position: absolute;
	top: 0;
	right: -4px;
	width: 8px;
	height: 100%;
	cursor: col-resize;
	touch-action: none;
	z-index: 6;
}
.lp-col-resize:hover,
.lp-col-resize.is-resizing {
	background: rgba(255, 255, 255, 0.35);
}
.lp-key__header .lp-col-resize:hover,
.lp-key__header .lp-col-resize.is-resizing {
	background: rgba(0, 0, 0, 0.15);
}

.lp-grid__length-hint {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--lp-white);
	color: var(--lp-black);
	border: 1px solid var(--lp-border);
	padding: 6px;
	font-size: 10px;
	font-weight: 400;
	text-transform: none;
	z-index: 5;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.lp-grid__header--length:hover .lp-grid__length-hint {
	display: flex;
}
.lp-grid__length-hint-img img {
	width: 56px;
	display: block;
}

.lp-doors {
	/* Doors scroll vertically once there are more than fit on screen, so the
	   "add door" controls below the grid stay reachable instead of getting
	   pushed further down the page by every extra row. Kept in lockstep
	   (via JS, on scroll) with .lp-key__cells and .lp-grid__door-edit-buttons
	   below, which are the same rows' checkboxes/edit-buttons.

	   position:relative is load-bearing: PerfectScrollbar positions its rails
	   absolutely, so without a positioned ancestor here they resolve against
	   the page instead. The rail is offset by the container's scrollTop, so in
	   a long plan it landed ~2000px down the document and stretched the page
	   to match — scrolling then went far past the content into blank space. */
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: var(--lp-grid-body-h);
	overflow-y: auto;
}
.lp-door {
	display: grid;
	grid-template-columns: var(--lp-col-position) var(--lp-col-door) var(--lp-col-type) var(--lp-col-length) var(--lp-col-qty);
	align-items: center;
	border-top: 1px solid var(--lp-border);
	min-height: var(--lp-row-h);
	background: var(--lp-white);
}
.lp-door.is-dragging {
	opacity: 0.5;
}
.lp-door__no {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	font-size: 13px;
	min-width: 0;
}
.lp-door__drag-handle {
	border: 0;
	background: transparent;
	cursor: grab;
	padding: 0;
	color: var(--lp-grey);
	touch-action: none;
}
.lp-door__drag-handle svg {
	width: 12px;
	height: 12px;
	display: block;
}
.lp-door__name {
	min-width: 0;
	padding: 4px;
}
.lp-door__name-input {
	width: 100%;
	border: 1px solid #ccc;
	padding: 6px;
	font-size: 13px;
}
.lp-door__type-row {
	position: relative;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px;
}
.lp-door__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
}
.lp-door__type-select {
	/* The icon already says which cylinder type is set, so the select's own
	   text label is dropped everywhere — it stays fully functional (tapping
	   the icon opens it), it's just invisible, overlaid on the icon. */
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
.lp-door__icon {
	cursor: pointer;
}
.lp-door__lengths {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px;
}
.lp-door__length {
	flex: 1 1 0;
	min-width: 38px;
	max-width: 44px;
	border: 1px solid #ccc;
	padding: 6px 2px;
	font-size: 13px;
	text-align: center;
}
.lp-door__length-sep {
	width: 1px;
	height: 20px;
	background: var(--lp-border);
	flex: 0 0 auto;
}
.lp-door__qty {
	min-width: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 2px;
	padding: 4px;
}
.lp-door__qty-arrows {
	display: flex;
	flex-direction: column;
}
.lp-door__qty-btn {
	cursor: pointer;
	border: 0;
	background: transparent;
	padding: 0;
	width: 14px;
	height: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lp-accent);
}
.lp-door__qty-btn svg {
	width: 12px;
	height: 12px;
	display: block;
}
.lp-door__qty-input {
	width: 32px;
	border: 1px solid #ccc;
	text-align: center;
	font-size: 13px;
}

/* -- keys (right side) -- */

/* Takes all the width left over by the fixed doors table, so the key-controls
   column it contains ends up flush right. min-width:0 lets it be the side that
   gives way on narrow screens, keeping the doors table at its usable floor. */
/* flex-basis 0, not auto, on both this and the panel below: with `auto` the
   basis is the content width — every key column at 48px — so a 40-key plan
   would demand ~1900px, inflating the grid past the viewport and pushing the
   controls column off-screen instead of scrolling internally. Basing on 0
   makes these take exactly the space left by the fixed doors table. */
.lp-grid__keys {
	flex: 1 1 0;
	min-width: 0;
	border-left: 1px solid var(--lp-border);
}
.lp-grid__keys-inner {
	display: flex;
	min-width: 0;
	height: 100%;
}
.lp-grid__keys-panel {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
}
.lp-grid__keys-heading {
	min-height: var(--lp-top-h);
	background: var(--lp-accent);
	color: var(--lp-white);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}
.lp-grid__keys-heading-icon img {
	width: 15px;
	height: 15px;
	display: block;
}
.lp-grid__keys-scroll {
	/* Fills whatever width the keys panel has and scrolls horizontally within
	   it, so a plan with a lot of keys never pushes the doors table (or the
	   door-edit column) out of view — doors must always stay visible. The
	   min-width floor keeps a couple of key columns readable before the outer
	   .lp-planner__scroll takes over on very narrow screens. */
	position: relative;
	overflow: hidden;
	min-width: 120px;
	/* Decouple this box's own width from its contents. overflow:hidden clips
	   the key columns visually but still lets them drive intrinsic sizing, so
	   without containment a wide plan makes the whole grid (and .lp-grid's
	   min-content) as wide as every key column combined. */
	contain: inline-size;
}
.lp-keys {
	display: flex;
	min-width: 0;
}

.lp-key {
	/* Fixed width, not fluid-shrinking: with many key columns possible, letting
	   them shrink independently of their scroll container risked the last
	   columns overflowing past it (visually overlapping the controls next to
	   it) rather than being clipped/scrolled. Fixed width + the single outer
	   .lp-planner__scroll handling overflow is simpler and can't misbehave
	   that way. Column resize (drag handle) still overrides this per-column. */
	flex: 0 0 68px;
	border-left: 1px solid var(--lp-border);
	background: var(--lp-white);
}
.lp-key.is-first {
	border-left: 0;
}
.lp-key.is-last {
	border-right: 1px solid var(--lp-border);
}
.lp-key.is-dragging {
	opacity: 0.5;
}
.lp-key__header-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.lp-key__drag-handle {
	border: 0;
	background: transparent;
	cursor: grab;
	padding: 0;
	color: var(--lp-grey);
	touch-action: none;
}
.lp-key__drag-handle svg {
	width: 13px;
	height: 13px;
	display: block;
}
.lp-key__header {
	min-height: var(--lp-key-header-h);
	padding: 6px 4px;
	border-bottom: 1px solid var(--lp-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	position: relative;
}
.lp-key__select-all {
	width: 13px;
	height: 13px;
	cursor: pointer;
	background: url(../../img/check-square-empty.svg) center / contain no-repeat;
}
.lp-key__select-all.is-checked {
	background-image: url(../../img/check-square.svg);
}
.lp-key__delete-btn {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	color: var(--lp-grey);
}
.lp-key__delete-btn:hover {
	color: var(--lp-accent);
}
.lp-key__delete-btn svg {
	width: 13px;
	height: 13px;
	display: block;
}
.lp-key__no-value {
	font-size: 12px;
	font-weight: 700;
}
.lp-key__name-input {
	width: 100%;
	border: 1px solid #ccc;
	font-size: 10px;
	text-align: center;
	padding: 3px 2px;
}
.lp-key__qty {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 2px;
	margin-bottom: 3px;
}
.lp-key__qty-arrows {
	display: flex;
	flex-direction: column;
}
.lp-key__qty-btn {
	cursor: pointer;
	border: 0;
	background: transparent;
	padding: 0;
	width: 11px;
	height: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lp-accent);
}
.lp-key__qty-btn svg {
	width: 10px;
	height: 10px;
	display: block;
}
.lp-key__qty-input {
	width: 28px;
	border: 1px solid #ccc;
	text-align: center;
	font-size: 11px;
}

.lp-key__cells {
	/* Height/overflow mirror .lp-doors — see the comment there. This container
	   never scrolls on its own (overflow:hidden); its scrollTop is driven by
	   JS in lockstep with .lp-doors and .lp-grid__door-edit-buttons. */
	max-height: var(--lp-grid-body-h);
	overflow: hidden;
}
.lp-key__cell {
	height: var(--lp-row-h);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--lp-border);
}
.lp-key__checkbox {
	width: 22px;
	height: 22px;
	cursor: pointer;
	background: url(../../img/check-square-empty.svg) center / contain no-repeat;
}
.lp-key__checkbox.is-checked {
	background-image: url(../../img/check-square.svg);
}

/* -- key/door count controls -- */

.lp-grid__key-controls {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	border-left: 1px solid var(--lp-border);
}
.lp-grid__key-controls-row {
	height: calc(var(--lp-top-h) + var(--lp-key-header-h));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px;
}
.lp-grid__key-count {
	border: 1px solid var(--lp-border);
	padding: 4px;
	font-size: 12px;
	width: 40px;
	text-align: center;
}
.lp-grid__door-edit-buttons {
	/* Plain block stacking, not flex: a flex column would flex-shrink these
	   fixed-height rows to fit max-height instead of correctly overflowing
	   it (min-height would stop that, but plain height doesn't). */
	max-height: var(--lp-grid-body-h);
	overflow: hidden;
}
.lp-door-edit {
	height: var(--lp-row-h);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-top: 1px solid var(--lp-border);
}
.lp-door-edit.is-first {
	border-top: 0;
}
.lp-door-edit__select-all {
	width: 15px;
	height: 15px;
	cursor: pointer;
	background: url(../../img/check-square-empty.svg) center / contain no-repeat;
}
.lp-door-edit__select-all.is-checked {
	background-image: url(../../img/check-square.svg);
}
.lp-door-edit__delete-btn {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	color: var(--lp-grey);
}
.lp-door-edit__delete-btn:hover {
	color: var(--lp-accent);
}
.lp-door-edit__delete-btn svg {
	width: 15px;
	height: 15px;
	display: block;
}

/* ---------- below-grid row ---------- */

.lp-planner__below {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
}
.lp-planner__door-controls {
	display: flex;
	align-items: center;
}
.lp-planner__door-count {
	border: 1px solid var(--lp-border);
	padding: 6px;
	font-size: 13px;
	width: 44px;
	text-align: center;
}

/*
	Shared stepper: a count input with stacked up/down chevrons to its
	right, replacing separate +/- buttons next to a dropdown — same
	stacked-arrow language as the per-row qty steppers (.lp-door__qty,
	.lp-key__qty), just for the door/key *counts* that reshape the grid
	instead of a per-row quantity value.
*/
.lp-count-stepper {
	display: flex;
	align-items: stretch;
	gap: 2px;
}
.lp-count-stepper__arrows {
	display: flex;
	flex-direction: column;
}
.lp-count-stepper__btn {
	cursor: pointer;
	border: 0;
	background: transparent;
	padding: 0;
	width: 16px;
	height: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lp-accent);
}
.lp-count-stepper__btn svg {
	width: 12px;
	height: 12px;
	display: block;
}

/* ---------- tooltips ---------- */

/*
	Positioned by JS in viewport coordinates, hence `fixed` — the anchors live
	inside several nested scroll containers, so an absolutely-positioned tooltip
	would be clipped by (and scroll away with) whichever one it sat in.
*/
.lp-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1080;
	max-width: 260px;
	padding: 6px 9px;
	border-radius: 4px;
	background: var(--lp-black);
	color: var(--lp-white);
	font-size: 12px;
	line-height: 1.35;
	font-family: inherit;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
}
.lp-tooltip.is-visible {
	opacity: 1;
	visibility: visible;
}

/* ---------- modals ---------- */

.lp-modal .modal-header {
	background: var(--lp-black);
	color: var(--lp-white);
}
.lp-modal .modal-title {
	color: var(--lp-white);
	font-weight: 700;
}
.lp-modal .btn-close {
	filter: invert(1);
}
.lp-modal .modal-body img {
	max-width: 100%;
	height: auto;
}

.lp-library__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}
.lp-library__item:hover {
	background: #f7f7f7;
}
.lp-library__label {
	flex: 1 1 auto;
	font-size: 13px;
}
.lp-library__delete {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--lp-accent);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}
.lp-library__delete:hover {
	opacity: 0.7;
}

/* ---------- perfect-scrollbar theme ---------- */

.ps__rail-x,
.ps__rail-y {
	opacity: 0.6;
}
.ps__thumb-x {
	background-color: var(--lp-accent);
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
	background-color: var(--lp-accent);
}

/* ---------- toastr accent ---------- */

#toast-container > .toast-success {
	background-color: var(--lp-accent) !important;
}