* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--primary: #5861e2;
	--primary-light: #818aff;
	--primary-dark: #3d44b3;
	--secondary: #ff4081;
	--text: #212121;
	--text-light: #757575;
	--background: #f8f9fd;
	--card-bg: #ffffff;
	--input-bg: #f0f2f8;
	--border-color: #e0e0e0;
	--border-radius: 12px;
	--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
	font-family:
		system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		"Noto Sans", "Liberation Sans", Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	background-color: var(--background);
	color: var(--text);
	line-height: 1.5;
	font-size: 16px;
	min-height: 100vh;
	padding: 32px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1 {
	margin: 0;
	margin-bottom: 32px;
	font-size: 32px;
	font-weight: bold;
	color: var(--primary-dark);
}

h2 {
	margin-bottom: 16px;
	font-size: 24px;
	font-weight: bold;
	color: var(--primary);
	text-align: left;
}

input {
	background: var(--input-bg);
	color: var(--text);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 10px 12px;
	font: inherit;
	font-weight: bold;
	font-size: 20px;
	transition: var(--transition);
	width: 100%;
}

input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(88, 97, 226, 0.15);
	outline: none;
}

#timestamp-convert-counter {
	color: var(--text-light);
	white-space: break-spaces;
	opacity: 0;
	transition: var(--transition);
}

#timestamp-convert-counter:not(:empty) {
	opacity: 1;
}

dt {
	font-weight: bold;
	margin-bottom: 8px;
	color: var(--primary);
	text-align: left;
}

dd,
.copy-with-text {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	text-align: left;
}

dl:last-child dd {
	margin-bottom: 0;
}

.counter-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	flex-wrap: wrap;
	gap: 8px;
}

.convert-arrows {
	margin: 2em 0;
	text-align: center;
	color: var(--text-light);
}

.btn-copy {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--input-bg);
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: var(--transition);
	cursor: pointer;
	padding: 8px 12px;
	line-height: 1;
	flex-shrink: 0;
}

.right-now .btn-copy {
	font-size: 20px;
	font-weight: bold;
}

.btn-copy svg {
	height: 1em;
	width: 1em;
	flex-shrink: 0;
}

.convert .btn-copy {
	opacity: 0;
}

.convert .btn-copy:has(span:not(:empty)) {
	opacity: 1;
}

.btn-copy:hover {
	background-color: var(--primary-light);
	color: #fff;
}

.btn-copied,
.btn-copied:hover {
	background: var(--secondary);
}

.btn-set-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

.btn-set {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--input-bg);
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: var(--transition);
	cursor: pointer;
	padding: 8px 12px;
	line-height: 1;
}

.btn-set:hover {
	background-color: var(--primary-light);
	color: #fff;
}

#clock-offset {
	font-size: 14px;
	color: var(--text-light);
	font-style: italic;
}

#clock-offset.inaccurate {
	color: var(--secondary);
	font-style: italic;
}

#dst-warning {
	color: #bfbf30;
	font-size: 14px;
	margin-top: 14px;
}

#dst-warning:empty {
	display: none;
}

.wrapper {
	display: flex;
	gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
	width: 100%;
}

.col {
	width: 50%;
}

.card {
	background: var(--card-bg);
	border-radius: var(--border-radius);
	padding: 32px;
}

.card + .card {
	margin-top: 32px;
}

.datetime-input {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

.footer {
	margin-top: 64px;
	color: var(--text-light);
	text-align: center;
}

.footer p {
	margin: 0 0 6px 0;
}

.footer p:last-child {
	margin-bottom: 0;
}

.footer a {
	color: var(--primary);
	text-decoration: none;
	transition: var(--transition);
	font-weight: bold;
	padding: 2px 4px;
	border-radius: var(--border-radius);
}

.footer a:hover {
	color: var(--primary-dark);
	text-decoration: none;
	background-color: var(--primary-light);
	color: #fff;
}

.rightnow-date {
	display: inline-flex;
	align-items: center;
}

@media (max-width: 900px) {
	.wrapper {
		flex-direction: column;
		gap: 16px;
	}

	.col {
		width: 100%;
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: 30px;
	}

	.card {
		padding: 16px;
	}

	.datetime-input,
	.counter-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.rightnow-date {
		font-size: 14px;
	}
}

@media (prefers-color-scheme: dark) {
	html {
		color-scheme: dark;
	}

	:root {
		--primary: #818aff;
		--primary-light: #a6aeff;
		--primary-dark: #5861e2;
		--text: #f0f0f0;
		--text-light: #b0b0b0;
		--background: #181825;
		--card-bg: #1e1e2e;
		--input-bg: #2d2d3d;
		--border-color: #3e3e4e;
	}
}