:root {
	--crypt-bg: #f7f8fb;
	--crypt-ink: #20242d;
	--crypt-muted: #667085;
	--crypt-nav: #252b3a;
	--crypt-card: #ffffff;
	--crypt-border: #d9dee8;
	--crypt-accent: #2f6f73;
}

body {
	background: var(--crypt-bg);
	color: var(--crypt-ink);
}

.crypt-nav {
	background: var(--crypt-nav);
}

.crypt-nav-inner {
	align-items: center;
	display: flex;
	gap: 1rem;
	padding: 0.75rem 0;
}

.crypt-brand {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
}

.crypt-nav .nav-link {
	color: rgba(255, 255, 255, 0.82);
}

.crypt-nav .nav-link.active,
.crypt-nav .nav-link:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.crypt-page {
	padding-bottom: 3rem;
	padding-top: 2rem;
}

.crypt-header {
	margin-bottom: 1.5rem;
}

.crypt-header h1,
.auth-card h1 {
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
}

.crypt-header p {
	color: var(--crypt-muted);
	margin: 0;
}

.crypt-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.crypt-card {
	background: var(--crypt-card);
	border: 1px solid var(--crypt-border);
	border-radius: 8px;
	color: inherit;
	display: block;
	padding: 1rem;
	text-decoration: none;
}

.crypt-card:hover {
	border-color: var(--crypt-accent);
	box-shadow: 0 8px 20px rgba(32, 36, 45, 0.08);
}

.crypt-card h2 {
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
}

.crypt-card p {
	color: var(--crypt-muted);
	margin: 0;
}

.auth-page {
	max-width: 460px;
}

.auth-card {
	background: var(--crypt-card);
	border: 1px solid var(--crypt-border);
	border-radius: 8px;
	margin-top: 10vh;
	padding: 1.5rem;
}

.crypt-avatar {
	align-items: center;
	background: var(--crypt-accent);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 0.75rem;
	justify-content: center;
	margin-right: 0.35rem;
	vertical-align: middle;
}

.crypt-toast-region {
	position: fixed;
	right: 1rem;
	top: 1rem;
	z-index: 1080;
}

.crypt-toast {
	background: #fff;
	border: 1px solid var(--crypt-border);
	border-left: 4px solid var(--crypt-accent);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(32, 36, 45, 0.14);
	max-width: 360px;
	padding: 0.75rem 1rem;
}

.crypt-panel,
.crypt-empty {
	background: var(--crypt-card);
	border: 1px solid var(--crypt-border);
	border-radius: 8px;
	padding: 1rem;
}

.crypt-panel h2,
.crypt-section h2 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 1rem;
}

.crypt-section {
	margin-top: 1.5rem;
}

.crypt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: 1rem;
}

.crypt-icon-button {
	align-items: center;
	display: inline-flex;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

.crypt-add-word {
	max-width: 720px;
}

.crypt-dictionary {
	display: grid;
	gap: 1.25rem;
}

.crypt-dictionary-entry {
	border-bottom: 1px solid var(--crypt-border);
	padding: 0 0 1.25rem;
}

.crypt-dictionary-entry:last-child {
	border-bottom: 0;
}

.crypt-entry-heading {
	align-items: flex-start;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 0.35rem;
}

.crypt-entry-heading h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0;
}

.crypt-entry-heading p {
	color: var(--crypt-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.25rem 0 0;
}

.crypt-entry-tools {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.crypt-definition {
	font-size: 1.05rem;
	line-height: 1.5;
	max-width: 76ch;
}

.crypt-example {
	border-left: 3px solid var(--crypt-border);
	color: var(--crypt-muted);
	font-style: italic;
	margin: 0.75rem 0 0;
	max-width: 76ch;
	padding-left: 0.85rem;
}

.crypt-notes {
	background: #f1f4f8;
	border-radius: 6px;
	margin-top: 0.75rem;
	max-width: 76ch;
	padding: 0.75rem;
	white-space: pre-wrap;
}

.crypt-source {
	display: inline-block;
	font-size: 0.9rem;
	margin-top: 0.75rem;
}

.crypt-star-widget {
	display: inline-flex;
	gap: 0.15rem;
}

.crypt-star-widget [data-star-value] {
	display: none;
}

.crypt-star-button {
	background: transparent;
	border: 0;
	color: #c4c8d0;
	font-size: 1.45rem;
	line-height: 1;
	padding: 0 0.05rem;
}

.crypt-star-button.is-active {
	color: #a46f00;
}

.crypt-star-button:hover,
.crypt-star-button:focus {
	color: #8a5e00;
	outline: none;
}

.crypt-empty {
	color: var(--crypt-muted);
}

@media (max-width: 575.98px) {
	.crypt-entry-heading {
		display: block;
	}

	.crypt-entry-tools {
		align-items: flex-start;
		margin-top: 0.5rem;
	}
}