.password-grid-app {
	--pg-border: #c8ccd0;
	--pg-muted: #646970;
	--pg-primary: #2271b1;
	--pg-primary-hover: #135e96;
	--pg-surface: #fff;
	--pg-text: #1d2327;
	--pg-control: #fff;
	--pg-control-border: #8c8f94;
	color: var(--pg-text) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.45;
}

.password-grid-app *,
.password-grid-app *::before,
.password-grid-app *::after {
	box-sizing: border-box;
}

.pg-notice {
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
}

.pg-layout {
	display: grid;
	grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.pg-controls {
	display: grid;
	gap: 1rem;
}

.pg-panel,
.pg-editor {
	padding: 1rem;
	border: 1px solid var(--pg-border);
	border-radius: 6px;
	background: var(--pg-surface) !important;
	color: var(--pg-text) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.password-grid-app .pg-panel h2 {
	margin: 0 0 0.8rem;
	color: var(--pg-text) !important;
	font-size: 1.1rem;
}

.password-grid-app .pg-panel legend,
.password-grid-app .pg-panel label,
.password-grid-app .pg-editor label {
	color: var(--pg-text) !important;
}

.pg-panel fieldset {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.8rem;
	margin: 0.9rem 0;
	padding: 0;
	border: 0;
}

.pg-panel legend {
	width: 100%;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.pg-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

.pg-field,
.pg-field-row label,
.pg-editor-toolbar label {
	display: grid;
	gap: 0.25rem;
	font-size: 0.88rem;
	font-weight: 600;
}

.password-grid-app input,
.password-grid-app textarea,
.password-grid-app select,
.password-grid-app button {
	font: inherit;
}

.password-grid-app input[type="number"],
.password-grid-app input[type="color"],
.password-grid-app textarea,
.password-grid-app select {
	width: 100%;
	padding: 0.45rem 0.55rem;
	border: 1px solid var(--pg-control-border) !important;
	border-radius: 4px;
	background: var(--pg-control) !important;
	color: var(--pg-text) !important;
}

.password-grid-app input[type="color"] {
	min-height: 2.35rem;
	padding: 0.2rem;
}

.password-grid-app textarea {
	resize: vertical;
}

.pg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.8rem;
}

.password-grid-app button {
	min-height: 2.25rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--pg-primary);
	border-radius: 4px;
	background: var(--pg-primary);
	color: #fff;
	cursor: pointer;
}

.password-grid-app button:hover,
.password-grid-app button:focus-visible {
	border-color: var(--pg-primary-hover);
	background: var(--pg-primary-hover);
}

.password-grid-app button.pg-secondary {
	background: #fff;
	color: var(--pg-primary);
}

.password-grid-app button.pg-secondary:hover,
.password-grid-app button.pg-secondary:focus-visible {
	background: #f0f6fc;
}

.pg-help,
.pg-status {
	margin: 0.65rem 0 0;
	color: var(--pg-muted);
	font-size: 0.85rem;
}

.pg-status {
	min-height: 1.3em;
}

.pg-status.is-error {
	color: #b32d2e;
	font-weight: 600;
}

.pg-ideas {
	margin: 0 0 0.75rem 1.1rem;
	padding: 0;
}

.pg-ideas-section {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--pg-border);
	color: var(--pg-text) !important;
}

.password-grid-app .pg-ideas-section h2 {
	margin: 0 0 0.75rem;
	color: var(--pg-text) !important;
	font-size: 1.1rem;
}

.pg-ideas li + li {
	margin-top: 0.35rem;
}

.pg-editor {
	position: sticky;
	top: 1rem;
	min-width: 0;
}

.pg-editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	align-items: end;
	margin-bottom: 0.75rem;
}

.pg-editor-toolbar label {
	min-width: 10rem;
}

.pg-grid-wrap {
	overflow: auto;
	max-width: 100%;
	padding-bottom: 0.25rem;
}

.pg-grid {
	--pg-columns: 12;
	display: grid;
	grid-template-columns: repeat(var(--pg-columns), minmax(2.5rem, 1fr));
	min-width: calc(var(--pg-columns) * 2.5rem);
	border-top: 1px solid #1d2327;
	border-left: 1px solid #1d2327;
	background: #fff !important;
	position: relative;
	isolation: isolate;
}

.pg-grid input {
	width: 100%;
	min-width: 0;
	aspect-ratio: 1.25;
	padding: 0.2rem;
	border: 0;
	border-right: 1px solid #1d2327;
	border-bottom: 1px solid #1d2327;
	border-radius: 0;
	background: transparent !important;
	color: #111 !important;
	font-size: clamp(0.8rem, 1.5vw, 1.15rem);
	font-weight: 600;
	text-align: center;
	position: relative;
	z-index: 1;
}

.pg-card-pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.pg-grid.is-pattern-refreshing {
	animation: pg-pattern-refresh 650ms ease-out;
}

@keyframes pg-pattern-refresh {
	0% {
		box-shadow: 0 0 0 4px rgba(34, 113, 177, 0.75);
	}
	100% {
		box-shadow: 0 0 0 12px rgba(34, 113, 177, 0);
	}
}

@media (prefers-color-scheme: dark) {
	.password-grid-app {
		--pg-border: #50575e;
		--pg-muted: #c3c4c7;
		--pg-primary: #72aee6;
		--pg-primary-hover: #9ec8ec;
		--pg-surface: #1d2327;
		--pg-text: #f0f0f1;
		--pg-control: #2c3338;
		--pg-control-border: #8c8f94;
	}

	.password-grid-app .pg-notice {
		background: #3b3520 !important;
		color: #f0f0f1 !important;
	}

	.password-grid-app button.pg-secondary {
		background: #2c3338 !important;
		color: #9ec8ec !important;
	}

	.password-grid-app button.pg-secondary:hover,
	.password-grid-app button.pg-secondary:focus-visible {
		background: #3c434a !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-grid.is-pattern-refreshing {
		animation: none;
		outline: 4px solid var(--pg-primary);
	}
}

.pg-grid input:focus {
	position: relative;
	z-index: 1;
	outline: 3px solid #72aee6;
	outline-offset: -3px;
}

.pg-print-area {
	display: none;
}

@media (max-width: 900px) {
	.pg-layout {
		grid-template-columns: 1fr;
	}

	.pg-editor {
		position: static;
	}
}

@media print {
	@page {
		size: A4 portrait;
		margin: 0;
	}

	html,
	body {
		width: 210mm !important;
		min-width: 210mm !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body * {
		visibility: hidden !important;
	}

	.password-grid-app,
	.password-grid-app .pg-print-area,
	.password-grid-app .pg-print-area * {
		visibility: visible !important;
	}

	.password-grid-app {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
	}

	.password-grid-app > :not(.pg-print-area) {
		display: none !important;
	}

	.pg-print-area {
		display: block;
		position: absolute;
		inset: 0;
	}

	.pg-print-sheet {
		display: grid;
		position: relative;
		width: 210mm;
		height: 297mm;
		padding: var(--pg-top-margin) 0 0 var(--pg-left-margin);
		grid-template-columns: repeat(var(--pg-sheet-columns), var(--pg-card-width));
		grid-template-rows: repeat(var(--pg-sheet-rows), var(--pg-card-height));
		gap: var(--pg-vertical-gap) var(--pg-horizontal-gap);
		align-content: start;
		justify-content: start;
		overflow: hidden;
		break-after: page;
		page-break-after: always;
	}

	.pg-print-sheet:last-child {
		break-after: auto;
		page-break-after: auto;
	}

	.pg-print-card {
		width: var(--pg-card-width);
		height: var(--pg-card-height);
		overflow: hidden;
		background: #fff;
	}

	.pg-print-card-grid {
		--pg-columns: 12;
		--pg-rows: 8;
		display: grid;
		width: 100%;
		height: 100%;
		grid-template-columns: repeat(var(--pg-columns), 1fr);
		grid-template-rows: repeat(var(--pg-rows), 1fr);
		border-top: 0.2mm solid #111;
		border-left: 0.2mm solid #111;
		position: relative;
		isolation: isolate;
	}

	.pg-print-card-grid span {
		display: flex;
		min-width: 0;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border-right: 0.2mm solid #111;
		border-bottom: 0.2mm solid #111;
		color: #111;
		font-family: Arial, sans-serif;
		font-size: var(--pg-cell-font-size);
		font-weight: 600;
		line-height: 1;
		position: relative;
		z-index: 1;
	}
}