/* .card {
	background: white;
	border-radius: 0.75rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	padding: 1.5rem;
	max-width: 600px;
	margin: 0 auto;
} */
:root {
	/* 主色調（primary） */
	--primary: hsl(212, 100%, 51%); /* #3b82f6 左右的藍色 */
	--primary-focus: hsl(212, 100%, 44%);
	--primary-content: hsl(0, 0%, 100%); /* 白色文字 */

	/* 其他常見主題色（secondary, accent, neutral 等） */
	--secondary: hsl(48, 89%, 60%);
	--accent: hsl(174, 60%, 51%);
	--neutral: hsl(0, 0%, 87%);
	--base-100: hsl(0, 0%, 100%); /* 背景主色 - 白色 */
	--base-200: hsl(0, 0%, 93%);
	--base-300: hsl(0, 0%, 86%);
	--base-content: hsl(146, 0%, 19%); /* 深灰文字 */

	/* 圓角、動畫等 */
	--rounded-box: 0.25rem; /* 卡片/盒子圓角 */
	--rounded-btn: 0.25rem; /* 按鈕圓角 */
	--rounded-badge: 1.9rem; /* badge 圓角 */
	--animation-btn: 0.25s; /* 按鈕點擊動畫持續時間 */
	--animation-input: 0.2s; /* input 動畫 */
	--btn-focus-scale: 0.95; /* 焦點時縮放比例 */
	--border-btn: 1px; /* 按鈕邊框粗細 */

	--button-hover: hsl(212, 100%, 44%);
	--text-color: hsl(96, 84%, 48%);
}
.sticky-header {
	/* 你可以改成你實際的 class 或 selector */
	position: sticky;
	top: 0;
	z-index: 3;

	background-color: hsl(258, 92%, 37%); /* var(--p) → primary 藍色 */
	color: hsl(0, 0%, 100%); /* var(--pc) → 白色文字 */

	/* Tailwind 常見的透明度變數（可忽略或保留） */
	--tw-bg-opacity: 1;
	--tw-text-opacity: 1;
}
.nav {
	position: relative;
	width: 100%;
	height: 10vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.disconnect-btn {
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 10px 20px;
	background-color: var(--button-bg);
	color: var(--danger-color);
	border: 1px solid var(--danger-color);
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.3s ease;
}

.disconnect-btn:hover {
	background-color: var(--danger-color);
	color: var(--text-color);
}

.connect-btn {
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 10px 20px;
	background-color: var(--button-bg);
	color: var(--accent-color);
	border: 1px solid var(--accent-color);
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.3s ease;
}

.connect-btn:hover {
	background-color: var(--accent-color);
	color: var(--text-color);
}
.nav-flex {
	display: flex;
	justify-content: flex-start;
}
.nav-flex button {
	background-color: var(--button-bg);
}
.nav-flex button:hover {
	background-color: var(--button-bg);
	color: var(--text-color);
}
.settings-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 10px;
	background-color: var(--button-bg);
	color: var(--text-color);
	border: 1px solid var(--accent-color);
	border-radius: 8px;
	cursor: pointer;
	font-size: 20px;
	transition: all 0.3s ease;
	z-index: 1000;
}

.settings-btn:hover {
	background-color: var(--button-hover);
}
/* From Uiverse.io by joe-watson-sbf */
.search {
	margin-top: 10vh;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	width: 80%;
}

.search__input {
	font-family: inherit;
	font-size: inherit;
	background-color: #f4f2f2;
	border: none;
	color: #646464;
	padding: 0.7rem 1rem;
	border-radius: 30px;
	width: 42rem;
	transition: all ease-in-out 0.5s;
	margin-right: -2rem;
}

.search__input:hover,
.search__input:focus {
	box-shadow: 0 0 1em #00000013;
}

.search__input:focus {
	outline: none;
	background-color: #f0eeee;
}

.search__input::-webkit-input-placeholder {
	font-weight: 100;
	color: #ccc;
}

.search__input:focus + .search__button {
	background-color: #f0eeee;
}

.search__button {
	border: none;
	background-color: #f4f2f2;
	margin-top: 0.1em;
}

.search__button:hover {
	cursor: pointer;
}

.search__icon {
	height: 1.3em;
	width: 1.3em;
	fill: #b4b4b4;
}