:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --text-minor-color: #474747;
  --header-btn-active-color: #00000020;
  --primary-color: #1a73e8;
  --card-bg: #ffffff;
  --shadow-color: rgba(0,0,0,0.1);
}

body.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --text-minor-color: #b3b3b3;
  --header-btn-active-color: #ffffff30;
  --primary-color: #83b3f1;
  --card-bg: #ffffff;
  --shadow-color: rgba(255,255,255,0.3);
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-color);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* 輸入區樣式 */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input[type="text"] {
  padding: 12px;
  border: 2px solid #dadce0;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
}

input[type="text"]:focus { border-color: var(--primary-color); }

button {
  padding: 12px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
}

button:hover { background-color: #1557b0; }



/* Block Loading */
/* <div class="lds-dual-ring"></div> */
@keyframes lds-dual-ring {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
}
.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #fff;
	border-color: #fff transparent #fff transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}
#BlockUI-background {
	position: fixed;
	top: 0; left: 0;
	z-index: 2000;
	width: calc(100vw);
	height: calc(100vh);
	background: rgba(0, 0, 0, 0.5);
}
#BlockUI-loading-icon {
	position: fixed;
	top: calc(50vh); left: calc(50vw);
	z-index: 2001;
	margin-left: -40px;
}