.pp-dashboard,
.pp-dashboard * {
	box-sizing: border-box;
}

.pp-dashboard {
	max-width: 1200px;
}

.pp-dashboard .et_pb_row,
.pp-dashboard .et_pb_column,
.pp-dashboard .et_pb_module,
.pp-dashboard .et_pb_code,
.pp-dashboard .et_pb_code_inner {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.pp-dashboard__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 24px 0;
}

.pp-dashboard__title {
	margin: 0;
	font-size: 32px;
	line-height: 1.1;
	font-weight: 600;
}

.pp-dashboard__logout {
	font-size: 13px;
	color: #888;
	text-decoration: none;
}

.pp-dashboard__logout:hover {
	color: #333;
	text-decoration: underline;
}

.pp-dashboard-panel {
	margin: 0 0 24px 0;
	padding: 24px;
	background: #fff;
	border: 1px solid #e6e6e6;
}

.pp-dashboard-panel__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
}

.pp-dashboard-panel__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: end;
}

.pp-dashboard-panel__field {
	flex: 1 1 280px;
	min-width: 240px;
}

.pp-dashboard-panel__field--wide {
	flex: 1 1 320px;
}

.pp-dashboard-panel__field,
.pp-collections-create {
	height: 100%;
}

.pp-dashboard-panel__actions {
	flex: 0 0 auto;
}

.pp-dashboard__label {
	display: block;
	margin: 0 0 8px 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #444;
}

.pp-dashboard__control {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid #d8d8d8;
	border-radius: 0;
	background: #fff;
	font-size: 16px;
	line-height: 1.3;
	color: #111;
	box-shadow: none;
}

.pp-dashboard__button {
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border: 1px solid #454545;
	border-radius: 0;
	background: #454545;
	color: #fff;
	font-size: 15px;
	font-weight: normal;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}

.pp-dashboard__button:hover,
.pp-dashboard__button:focus-visible {
	background: #fff;
	color: #454545;
}

.pp-dashboard__button--ghost {
	background: #fff;
	color: #454545;
}

.pp-dashboard__button--ghost:hover,
.pp-dashboard__button--ghost:focus-visible {
	background: #454545;
	color: #fff;
}

.pp-dashboard__button:disabled,
.pp-dashboard__button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.pp-dialog__message {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #333;
}

.pp-dialog__message--danger {
	color: #8b1a1a;
}

.pp-dialog__input {
	display: none;
	margin-top: 12px;
}

.pp-dialog__input.is-visible {
	display: block;
}

.pp-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	align-items: start;
	width: 100%;
}

@media (max-width: 1200px) {
	.pp-photo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 800px) {
	.pp-photo-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.pp-photo-grid {
		grid-template-columns: 1fr;
	}
}

.pp-photo-card {
	min-width: 0;
	position: relative;
}

.pp-photo-card__button {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
	border-radius: 0 !important;
}

.pp-photo-card__image-wrap {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 0;
	background: #f3f3f3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pp-photo-card__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	border-radius: 0 !important;
}

.pp-photo-card__meta {
	margin-top: 0;
}

.pp-photo-card__caption {
	width: 100%;
	min-height: 42px;
	padding: 8px 10px !important;
	border: 1px solid #d8d8d8;
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	color: #111;
	box-shadow: none;
	outline: none;
	transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.pp-photo-card__caption:hover {
	background: #eeeeee;
}

.pp-photo-card__caption::placeholder {
	color: #8a8a8a;
}

.pp-photo-card__caption:focus {
	border-color: #8f8f8f;
	background: #eeeeee;
}

.pp-photo-card__caption.is-dirty {
	border-color: #9b9b9b;
}

.pp-photo-card__caption.is-saving {
	opacity: .7;
}

.pp-photo-card__caption.is-error {
	border-color: #b94a48;
}

/* No caption indicator — amber left border on the input */
.pp-photo-card.no-caption .pp-photo-card__caption {
	border-left: 3px solid #d4820a;
}
.pp-photo-card.no-caption .pp-photo-card__caption:focus {
	border-left-color: #d4820a;
}

.pp-photo-card__status {
	position: absolute;
	top: 33.333%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;

	padding: 10px 18px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;

	color: #111;

	background: rgba(255,255,255,.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	border: 1px solid rgba(255,255,255,.7);
	border-radius: 2px;

	box-shadow: 0 6px 18px rgba(0,0,0,.08);

	pointer-events: none;

	opacity: 0;
	transition: opacity .18s ease;

	white-space: nowrap;
}

.pp-photo-card__status.has-text {
	opacity: 1;
}

.pp-photo-card__title {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pp-photo-card__filename {
	font-size: 12px;
	opacity: .7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pp-photo-card__image {
	transition: opacity .15s ease;
}

.pp-photo-card:focus-within .pp-photo-card__image {
	opacity: .75;
	transition: opacity .2s ease;
}

@media (max-width: 767px) {
	.pp-dashboard-panel {
		padding: 18px;
	}

	.pp-dashboard__title {
		font-size: 28px;
	}

	.pp-dashboard-panel__title {
		font-size: 20px;
	}
}

.pp-dashboard__control--hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pp-collection-picker {
    position: relative;
    width: 100%;
}

.pp-collection-picker__toggle,
.pp-collection-picker__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 0;
    background: #fff;
    color: #111;
    text-align: left;
    box-shadow: none;
}

.pp-collection-picker__item[hidden] {
    display: none;
}

.pp-collection-picker__toggle {
    min-height: 56px;
    padding: 12px 12px;
    cursor: pointer;
}

.pp-collection-picker__toggle-thumb img,
.pp-collection-picker__item-thumb img {
    width: 52px;
    height: 52px;
    display: block;
    object-fit: cover;
    background: #f3f3f3;
}

.pp-collection-picker__toggle-text,
.pp-collection-picker__item-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pp-collection-picker__toggle-title,
.pp-collection-picker__item-title {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-collection-picker__toggle-count,
.pp-collection-picker__item-count {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.2;
    color: #666;
}

.pp-collection-picker__caret {
    margin-left: auto;
    color: #666;
	font-size: 28px;
}

.pp-collection-picker__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #d8d8d8;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.pp-collection-picker__list {
    max-height: 480px;
    overflow: auto;
}

.pp-collection-picker__item {
    border-width: 0 0 1px 0;
    cursor: pointer;
}

.pp-collection-picker__item:last-child {
    border-bottom: 0;
}

.pp-collection-picker__item:hover,
.pp-collection-picker__item:focus-visible,
.pp-collection-picker__item.is-current {
    background: #f7f7f7;
}

.pp-collection-picker__empty {
    min-height: 46px;
    padding: 12px;
    border: 1px solid #d8d8d8;
    background: #fafafa;
}

.pp-collection-picker__empty-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}

.pp-dashboard-panel__row--collections {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
	gap: 24px;
	align-items: stretch;
}

.pp-collections-create__title {
	margin: 0 0 10px 0;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 600;
	color: #222;
}

.pp-collections-create__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: stretch;
}

.pp-collections-create__row .pp-dashboard__control {
	min-width: 0;
}

.pp-collections-create__row .pp-dashboard__button {
	white-space: nowrap;
}

@media (max-width: 980px) {
	.pp-dashboard-panel__row--collections {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.pp-collections-create__row {
		grid-template-columns: 1fr;
	}
}

.pp-dashboard-subpanel {
	background: #f7f7f7;
	padding: 24px;
}


.pp-dashboard-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px 0;
}

.pp-dashboard-icon-button {
	display: inline-flex;
	align-items: center;
}

.pp-dashboard-icon-button:hover,
.pp-dashboard-icon-button:focus-visible {
	
}

.pp-collection-picker__item--addnew {
	font-weight: 500;
}

.pp-collection-picker__item--addnew .pp-collection-picker__item-title {
	font-size: 16px;
	font-weight: normal;
}

.pp-collection-picker__empty .pp-dashboard__button {
	margin-top: 12px;
}

.pp-dashboard-subpanel .pp-dashboard__log {
	margin-bottom: 0;
}

/* Upload progress modal */
.pp-modal__dialog--upload {
    width: min(600px, calc(100vw - 32px));
    max-height: calc(100vh - 140px - 40px);
    display: flex;
    flex-direction: column;
}

.pp-modal__dialog--upload .pp-modal__body {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pp-modal__dialog--upload .pp-upload-log {
    flex: 1 1 auto;
}

.pp-upload-log {
    margin: 0;
    min-height: 80px;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    background: #2e2e2e;
    color: #f0f0f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 14px 16px;
    border: none;
    font-family: ui-monospace, 'Cascadia Code', 'Menlo', monospace;
}

.pp-modal[hidden] {
	display: none !important;
}

.pp-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

/* Dialog modal must sit above the lightbox */
#pp-dialog-modal {
    z-index: 1000000;
}

.pp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
}

.pp-modal__dialog {
	position: relative;
	width: min(480px, calc(100vw - 32px));
	margin: 140px auto 0;
	padding: 24px;
	background: #fff;
	border: 1px solid #e6e6e6;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.pp-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #666;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.pp-modal .pp-modal__title {
	margin: 0 32px 16px 0;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
	color: #111;
}

.pp-modal__body {
	margin: 0 0 16px 0;
}

.pp-modal__error {
	margin: 10px 0 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #8b1a1a;
}

.pp-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

body.pp-modal-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.pp-dashboard-panel__header {
		margin-bottom: 16px;
	}

	.pp-modal__dialog {
		margin-top: 24px;
		padding: 20px;
	}
}
.pp-dashboard-notice {
	margin: 0 0 24px 0;
	padding: 14px 16px;
	border: 1px solid #d9e7d9;
	background: #454545;
	color: #ffffff;
	font-size: 18px;
	line-height: 1.4;
	text-align: center;
}

.pp-dashboard-notice--success {
	border-color: #d6e6d6;
	background: #454545;
}

.pp-dashboard-subpanel__title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 0;
}

.pp-dashboard-subpanel__title-row .pp-dashboard-panel__title {
	margin: 0;
	margin-bottom: 8px;
	flex: 0 0 auto;
}

.pp-dashboard-subpanel__title-row .pp-dashboard-icon-button {
	flex: 0 0 auto;
}

.pp-upload-row {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	gap: 12px;
	align-items: center;
}

.pp-files-label {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.pp-files-count {
	font-size: 14px;
	color: #444;
	white-space: nowrap;
}

.pp-files-count[hidden] {
	display: none;
}
.pp-dashboard-subpanel--collections {
	position: relative;
}

.pp-dashboard-subpanel--collections .pp-dashboard-panel__title {
	margin: 0;
}

.pp-dashboard-icon-button--collections {
	position: absolute;
	top: 16px;
	right: 24px;
}

/* Collections/upload panel alignment */
.pp-dashboard-panel__row--collections > .pp-dashboard-subpanel {
	display: grid;
	grid-template-rows: auto 1fr auto;
	align-content: stretch;
}

.pp-dashboard-subpanel--collections .pp-collection-picker,
.pp-dashboard-panel__row--collections > .pp-dashboard-subpanel:not(.pp-dashboard-subpanel--collections) .pp-upload-row {
	align-self: center;
}
.pp-dashboard-notice {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.pp-dashboard-notice.is-visible {
	opacity: 1;
}
.pp-dashboard-notice--error {
    background:#7a1f1f;
}



/* --- photo card control row --- */

.pp-photo-card__controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 6px 8px;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #ececec;
	background: #f7f7f7;
}

.pp-photo-card__check {
	justify-self: start;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.pp-photo-card__checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pp-photo-card__check-ui {
	position: relative;
	width: 14px;
	height: 14px;
	border: 1px solid #bcbcbc;
	background: #fff;
	display: inline-block;
}

.pp-photo-card__checkbox:checked + .pp-photo-card__check-ui {
	background: #fff;
	border-color: #666;
}

.pp-photo-card__checkbox:checked + .pp-photo-card__check-ui::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 0px;
	width: 5px;
	height: 9px;
	border: solid #555;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.pp-photo-card__drag,
.pp-photo-card__delete {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	color: #666;
	cursor: pointer;
}

.pp-photo-card__drag {
	cursor: grab;
}

.pp-photo-card__drag:active {
	cursor: grabbing;
}

.pp-photo-card__delete {
	justify-self: end;
	width: 34px;
	height: 34px;
	padding: 0;
}

.pp-photo-card__delete svg {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 auto;
}

.pp-photo-card__delete:hover {
	color: #b00020;
}

.pp-photo-card__drag:hover,
.pp-photo-card__delete:hover {
	background: #ececec;
}
.pp-photo-card__drag svg {
	display: block;
	width: 22px;
	height: 22px;
	display: block;
}


/* selection toolbar */

/* ----------------------------------------------------------
   Selection toolbar – fixed-height single row, never causes layout shift
   Layout: [☐ Select all] [separator] [N selected] [dropdown]
---------------------------------------------------------- */

.pp-selection-toolbar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 18px;
	padding: 9px 16px;
	border: 1px solid #e2e2e2;
	background: #f7f7f7;
	min-height: 46px;
	box-sizing: border-box;
}

.pp-selection-toolbar[hidden] {
    display: none;
}

/* Select-all control – left anchor */
.pp-selection-toolbar__select-all {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.pp-selection-toolbar__select-all-label {
	font-size: 14px;
	color: #444;
	white-space: nowrap;
}

.pp-selection-toolbar__check-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.pp-selection-toolbar__checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Matches .pp-photo-card__check-ui exactly */
.pp-selection-toolbar__check-ui {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #bcbcbc;
	background: #fff;
	flex-shrink: 0;
}

.pp-selection-toolbar__checkbox:checked ~ .pp-selection-toolbar__check-ui {
	background: #fff;
	border-color: #666;
}

.pp-selection-toolbar__checkbox:checked ~ .pp-selection-toolbar__check-ui::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 0px;
	width: 5px;
	height: 9px;
	border: solid #555;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Count */
.pp-selection-toolbar__count {
	flex: 0 0 auto;
	font-size: 14px;
	color: #444;
	white-space: nowrap;
}

/* Action dropdown – sized to content, not stretching */
.pp-selection-toolbar__action-select {
	flex: 0 0 auto;
	width: auto;
	height: 30px;
	padding: 0 28px 0 10px;
	border: 1px solid #c0c0c0;
	border-radius: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E") no-repeat right 10px center;
	-webkit-appearance: none;
	appearance: none;
	font-size: 14px;
	color: #222;
	cursor: pointer;
}

.pp-selection-toolbar__action-select[hidden] {
	display: none !important;
}

.pp-selection-toolbar__action-select:focus {
	outline: none;
}


/* selected photo state */

.pp-photo-card.is-selected .pp-photo-card__image-wrap {
	background: #dddddd;
	box-shadow: inset 0 0 0 3px #a9a9a9;
}

.pp-photo-card.is-selected .pp-photo-card__image {
	opacity: 0.55 !important;
}

.pp-photo-card.is-selected .pp-photo-card__controls {
	background: #d9d9d9;
}

.pp-photo-card.is-selected .pp-photo-card__caption {
	background: transparent;
	border-color: #b8b8b8;
}

.pp-photo-card.is-selected .pp-photo-card__filename {
	opacity: 1;
}

.pp-photo-card.is-selected .pp-photo-card__check-ui {
	border-color: #666;
	background: #fff;
}
.pp-photo-card.is-selected .pp-photo-card__meta {
	background: #e6e6e6;
}
.pp-photo-card__controls,
.pp-photo-card__check,
.pp-photo-card__check-ui,
.pp-photo-card__drag,
.pp-photo-card__delete,
.pp-photo-card__filename {
	-webkit-user-select: none;
	user-select: none;
}

.pp-photo-card__controls * {
	-webkit-user-select: none;
	user-select: none;
}
.pp-photo-card__caption {
	-webkit-user-select: text;
	user-select: text;
}

/* ----------------------------------------------------------
   Collection target picker (Move / Duplicate modal)
---------------------------------------------------------- */

.pp-collection-target-list {
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid #d8d8d8;
}

.pp-collection-target-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #ececec;
    background: #fff;
    color: #111;
    text-align: left;
    cursor: pointer;
    transition: background .1s ease;
}

.pp-collection-target-list__item:last-child {
    border-bottom: 0;
}

.pp-collection-target-list__item:hover,
.pp-collection-target-list__item:focus-visible {
    background: #f3f3f3;
}

.pp-collection-target-list__thumb img {
    width: 52px;
    height: 52px;
    display: block;
    object-fit: cover;
    background: #f3f3f3;
    flex-shrink: 0;
}

.pp-collection-target-list__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pp-collection-target-list__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-collection-target-list__count {
    margin-top: 3px;
    font-size: 12px;
    color: #666;
    line-height: 1.2;
}

.pp-collection-target-list__empty {
    padding: 16px 12px;
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* ----------------------------------------------------------
   Success toast
---------------------------------------------------------- */
#pp-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 10000;

    padding: 13px 22px;
    background: #f0f0eb;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
    max-width: min(400px, calc(100vw - 48px));
    white-space: nowrap;
    pointer-events: none;

    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}

#pp-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
    #pp-toast {
        bottom: 16px;
        left: 16px;
        right: 16px;
        max-width: none;
        transform: translateY(16px);
        white-space: normal;
    }

    #pp-toast.is-visible {
        transform: translateY(0);
    }
}

/* ----------------------------------------------------------
   Delete choice modal extras
---------------------------------------------------------- */
.pp-dashboard__button--full {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.pp-dashboard__button--danger {
    background: #8b1a1a;
    border-color: #8b1a1a;
    color: #fff;
}

.pp-dashboard__button--danger:hover,
.pp-dashboard__button--danger:focus-visible {
    background: #fff;
    color: #8b1a1a;
}

.pp-modal__footer--column {
    flex-direction: column;
    gap: 8px;
}

/* ----------------------------------------------------------
   Collection badge on photo card
---------------------------------------------------------- */
.pp-photo-card__collections-badge {
    font-size: 11px;
    color: #888;
    line-height: 1.3;
    padding: 2px 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    user-select: none;
}

/* ----------------------------------------------------------
   Photo lightbox
---------------------------------------------------------- */
#pp-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

#pp-lightbox-modal[hidden] {
    display: none !important;
}

.pp-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.86);
    cursor: pointer;
}

/* Prev / Next nav arrows */
.pp-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.4);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
}

.pp-lightbox__nav:hover { background: rgba(0,0,0,.65); }

.pp-lightbox__prev { left: 16px; }
.pp-lightbox__next { right: 16px; }
.pp-lightbox__nav[hidden] { display: none !important; }

/* Main dialog — fills available space, image pane takes the remainder */
.pp-lightbox__dialog {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(1280px, calc(100vw - 120px));
    height: calc(100vh - 48px);
    background: #1a1a1a;
    overflow: hidden;
}

/* Close button — sits top-right inside the dark dialog */
.pp-lightbox__close {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.45);
    color: rgba(255,255,255,.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.pp-lightbox__close:hover {
    background: rgba(0,0,0,.75);
    color: #fff;
}

/* Body: image pane fills all height, sidebar is fixed-width strip */
.pp-lightbox__body {
    display: grid;
    grid-template-columns: 1fr 260px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Image pane — all remaining space, dark background */
.pp-lightbox__image-pane {
    position: relative;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
}

.pp-lightbox__image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pp-lightbox__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.pp-lightbox__img.is-loading {
    opacity: 0.5;
}

.pp-lightbox__img-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.3);
    font-size: 13px;
    background: #1a1a1a;
    letter-spacing: 0.03em;
}

.pp-lightbox__img-loading[hidden] { display: none !important; }

.pp-lightbox__position {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(255,255,255,.3);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.06em;
}

/* Sidebar — white strip, scrollable */
.pp-lightbox__sidebar {
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    border-left: 1px solid #2e2e2e;
    overflow-y: auto;
    background: #fff;
    gap: 20px;
}

/* Filename */
.pp-lightbox__filename {
    margin: 0;
    font-size: 11px;
    color: #999;
    word-break: break-all;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* Caption row */
.pp-lightbox__caption-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-lightbox__caption-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #aaa;
    text-transform: uppercase;
}

.pp-lightbox__caption-wrap {
    position: relative;
}

.pp-lightbox__caption-input {
    width: 100%;
    font-size: 13px;
    padding-left: 6px;
    padding-right: 6px;
}

.pp-lightbox__caption-status {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #aaa;
    min-height: 15px;
    letter-spacing: 0.02em;
    transition: opacity .2s;
}

.pp-lightbox__caption-status.is-saved {
    color: #2a7a2a;
}

/* Collections section */
.pp-lightbox__collections-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}

.pp-lightbox__section-title {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #aaa;
    text-transform: uppercase;
}

.pp-lightbox__collections-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.pp-lightbox__collection-row {
    border-bottom: 1px solid #f0f0f0;
    opacity: 1;
    transition: opacity .15s;
}

.pp-lightbox__collection-row.is-saving {
    pointer-events: none;
}

.pp-lightbox__collection-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    cursor: pointer;
    user-select: none;
}

.pp-lightbox__collection-label:hover {
    color: #000;
}

.pp-lightbox__collection-cb {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #333;
}

.pp-lightbox__collection-name {
    font-size: 13px;
    color: #333;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-lightbox__collection-row.is-checked .pp-lightbox__collection-name {
    color: #111;
    font-weight: 500;
}

.pp-lightbox__collections-loading,
.pp-lightbox__collections-empty {
    font-size: 12px;
    color: #bbb;
    display: block;
    padding: 2px 0;
}

/* Responsive — collapse sidebar below image on small screens */
@media (max-width: 780px) {
    #pp-lightbox-modal { padding: 0; }

    .pp-lightbox__dialog {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
    }

    .pp-lightbox__body {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .pp-lightbox__sidebar {
        border-left: 0;
        border-top: 1px solid #e6e6e6;
        padding: 14px 10px;
        max-height: 36vh;
        gap: 14px;
    }

    .pp-lightbox__nav { display: none; }
}


/* ==========================================================
   Collection Status Control (Live / Draft)
   ========================================================== */

/* Layout: h3 title + status on the same line */
/* Collection title row — editable input */
.pp-collection-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pp-collection-title-row[hidden] {
    display: none;
}

.pp-collection-title-input {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 2px 0;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

.pp-collection-title-input:hover,
.pp-collection-title-input:focus {
    border-bottom-color: #ccc;
}

.pp-collection-title-input.is-dirty {
    border-bottom-color: #888;
}

.pp-collection-title-input.is-error {
    border-bottom-color: #c0392b;
}

.pp-collection-title-input.is-saving {
    opacity: 0.6;
}

.pp-collection-title-save {
    flex-shrink: 0;
    font-size: 13px;
}

/* Sits in the flex row where the Save button was — hidden by default, shown during save */
.pp-collection-title-status {
    flex-shrink: 0;
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    pointer-events: none;
}

/* Controls row — status radios + delete, sits under the title */
.pp-collection-controls-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.pp-collection-controls-row[hidden] {
    display: none;
}

.pp-collection-controls-row .pp-delete-collection-btn {
    margin-left: auto;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.pp-collection-controls-row .pp-delete-collection-btn:hover {
    opacity: 1;
}

/* Status widget — no left margin now it's in its own row */
.pp-collection-controls-row .pp-collection-status {
    margin-left: 0;
}

/* Container */
.pp-collection-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 14px;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
}

.pp-collection-status__label {
    font-weight: 600;
    color: #777;
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Radio option wrapper */
.pp-collection-status__option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    font-size: 13px;
}

.pp-collection-status__option:hover:not(.pp-collection-status__option--disabled) {
    background: #ebebeb;
    border-color: #bbb;
}

/* Selected: Live = green, Draft = amber */
.pp-collection-status__option:has(.pp-collection-status__radio[value="live"]:checked) {
    background: #e6f4ea;
    border-color: #4caf50;
    color: #2e7d32;
    font-weight: 600;
}

.pp-collection-status__option:has(.pp-collection-status__radio[value="draft"]:checked) {
    background: #fff8e1;
    border-color: #ffc107;
    color: #795548;
    font-weight: 600;
}

/* Disabled (not enough photos for live) */
.pp-collection-status__option--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hide the native radio visually but keep it accessible */
.pp-collection-status__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Hint text shown when photo count < minimum */
.pp-collection-status__hint {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
    white-space: nowrap;
}

/* Saving / Saved feedback */
.pp-collection-status__saving,
.pp-collection-status__saved {
    font-size: 12px;
    white-space: nowrap;
}

.pp-collection-status__saving { color: #999; }
.pp-collection-status__saved  { color: #4caf50; }

/* Stack on small screens */
@media (max-width: 600px) {
    .pp-collection-status {
        margin-left: 0;
        width: 100%;
        margin-top: 8px;
    }
    #pp-photos-title {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================
   Delete collection button
   ========================================================== */

/* ==========================================================
   Picker drag handle & footer
   ========================================================== */

.pp-collection-picker__item-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
    color: #bbb;
    cursor: grab;
    padding: 0 4px;
    transition: color 0.15s;
}

.pp-collection-picker__item:hover .pp-collection-picker__item-drag,
.pp-collection-picker__item-drag:hover {
    color: #666;
}

.pp-collection-picker__item-drag:active {
    cursor: grabbing;
}

/* Hide drag handles when a filter is active */
.pp-collection-picker__list--filtered .pp-collection-picker__item-drag {
    visibility: hidden;
    pointer-events: none;
}

/* ==========================================================
   Collection picker filter pills
   ========================================================== */

.pp-collection-picker__filters {
    display: flex;
    gap: 4px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid #eee;
}

.pp-collection-picker__filter {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: transparent;
    color: #888;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    line-height: 1.5;
}

.pp-collection-picker__filter:hover {
    border-color: #bbb;
    color: #444;
}

.pp-collection-picker__filter.is-active {
    background: #222;
    border-color: #222;
    color: #fff;
}

/* ==========================================================
   Draft collection items in picker
   ========================================================== */

/* Dim the thumb and text slightly for draft items */
.pp-collection-picker__item.is-draft .pp-collection-picker__item-thumb,
.pp-collection-picker__item.is-draft .pp-collection-picker__item-text {
    opacity: 0.45;
}

/* Draft badge — shown on the right of each draft item */
.pp-collection-picker__item-badge {
    display: none;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #999;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.5;
    white-space: nowrap;
}

.pp-collection-picker__item.is-draft .pp-collection-picker__item-badge {
    display: inline-block;
}

/* ==========================================================
   Status hint — make it clearly visible, not just grey italic
   ========================================================== */

.pp-collection-status__hint {
    font-size: 12px;
    color: #e65100;
    font-style: normal;
    white-space: nowrap;
    font-weight: 500;
}

/* ==========================================================
   Uncollected photos pseudo-item
   ========================================================== */

/* The pseudo-item sits last in the sortable list — no drag handle */
.pp-collection-picker__item--uncollected {
    border-top: 2px solid #c8c8c8;
    background: #f7f5f2;
}

.pp-collection-picker__item--uncollected .pp-collection-picker__item-drag {
    display: none;
}

.pp-collection-picker__item--uncollected .pp-collection-picker__item-title {
    color: #999;
    font-weight: 400;
}

/* Photo grid: hide drag handles when in uncollected (read-only) view */
.pp-photo-grid--no-sort .pp-photo-card__drag {
    visibility: hidden;
    pointer-events: none;
}

/* ==========================================================
   Picker list save overlay (appears after drag-to-reorder)
   ========================================================== */

.pp-list-save-overlay {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #444;
    pointer-events: none;
    z-index: 200;
    transition: opacity 0.4s ease;
    opacity: 1;
}

.pp-list-save-overlay.is-visible {
    display: flex;
}

.pp-list-save-overlay.is-fading {
    opacity: 0;
}

.pp-list-save-overlay[data-state="saved"] {
    color: #2e7d32;
}

.pp-list-save-overlay[data-state="error"] {
    color: #c62828;
}

/* ==========================================================
   All-photos picker item (pinned first, no drag handle)
   ========================================================== */

.pp-collection-picker__item--all-photos {
    border-bottom: 2px solid #c8c8c8;
    background: #f7f5f2;
}

.pp-collection-picker__item--all-photos .pp-collection-picker__item-drag {
    display: none;
}

.pp-collection-picker__item--all-photos .pp-collection-picker__item-title {
    color: #444;
    font-weight: 500;
}

/* Icon thumb for all-photos — SVG instead of a photo thumbnail */
.pp-collection-picker__item-thumb--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #e8e5e0;
    flex-shrink: 0;
    color: #777;
}

.pp-collection-picker__item-thumb--icon svg {
    width: 26px;
    height: 26px;
}

.pp-collection-picker__item--all-photos[hidden] {
    display: none;
}

/* ==========================================================
   Search bar (shown when All photos is selected)
   ========================================================== */

.pp-search-bar {
    margin-bottom: 16px;
}

.pp-search-bar[hidden] {
    display: none;
}

.pp-search-bar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d8d8d8;
    background: #fff;
    padding: 0 14px;
    height: 48px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pp-search-bar__inner:focus-within {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.pp-search-bar__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #aaa;
}

.pp-search-bar__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: #111;
    padding: 0;
}

.pp-search-bar__input::placeholder {
    color: #bbb;
}

/* Clear button rendered by browser for type=search */
.pp-search-bar__input::-webkit-search-cancel-button {
    cursor: pointer;
}

.pp-search-bar__status {
    margin-top: 6px;
    font-size: 13px;
    color: #888;
    min-height: 18px;
}

/* Empty state prompt shown before first search */
.pp-search-prompt {
    padding: 32px 0;
    text-align: center;
    color: #aaa;
    font-size: 15px;
}

/* ----------------------------------------------------------
   Login / Lost password — shared styles
---------------------------------------------------------- */
.pp-login-wrap {
    max-width: 400px;
    margin: 0 auto;
}

.pp-dashboard__forgot-link {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    white-space: nowrap;
}

.pp-dashboard__forgot-link:hover {
    color: #333;
    text-decoration: underline;
}

/* Field group: matches the margin-bottom used between fields in the login form */
.pp-lp__field-group {
    margin: 0 0 16px 0;
}

/* Actions row: button + secondary link, same layout as login form footer */
.pp-lp__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

/* Feedback messages: error and success */
.pp-lp__feedback {
    margin: 0 0 16px 0;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid;
}

.pp-lp__feedback--error {
    color: #8b1a1a;
    background: #fdf2f2;
    border-color: #e8c8c8;
}

.pp-lp__feedback--success {
    color: #1a5c1a;
    background: #f2fdf2;
    border-color: #c8e8c8;
}

/* Button used as a link (expired token state) */
a.pp-lp__btn {
    display: inline-block;
    text-decoration: none;
}

/* Inline mismatch error below confirm field */
.pp-lp__match-error {
    margin: 6px 0 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #8b1a1a;
}

/* ----------------------------------------------------------
   Password strength requirements checklist
---------------------------------------------------------- */
.pp-pwd-rules {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: none;
}

.pp-pwd-rules--active {
    display: block;
}

.pp-pwd-rule {
    position: relative;
    padding: 3px 0 3px 20px;
    font-size: 12px;
    color: #999;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.pp-pwd-rule::before {
    content: "–";
    position: absolute;
    left: 0;
    color: #ccc;
    transition: color 0.15s ease;
}

.pp-pwd-rule--met {
    color: #1a5c1a;
}

.pp-pwd-rule--met::before {
    content: "✓";
    color: #1a5c1a;
}

.pp-pwd-rule--unmet {
    color: #8b1a1a;
}

.pp-pwd-rule--unmet::before {
    content: "✗";
    color: #8b1a1a;
}