:root,
:root.dark {
  color-scheme: light;
  --background: 100 12% 95% !important;
  --foreground: 150 4% 9% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 150 4% 9% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 150 4% 9% !important;
  --primary: 220 83% 46% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 120 7% 92% !important;
  --secondary-foreground: 150 4% 9% !important;
  --muted: 120 7% 92% !important;
  --muted-foreground: 135 4% 41% !important;
  --accent: 120 7% 92% !important;
  --accent-foreground: 150 4% 9% !important;
  --destructive: 10 60% 45% !important;
  --destructive-foreground: 0 0% 100% !important;
  --border: 132 6% 82% !important;
  --input: 132 6% 64% !important;
  --ring: 220 83% 46% !important;
  --radius: 6px !important;
}

html,
body,
button,
input,
select {
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  letter-spacing: 0 !important;
}

body { min-width: 300px; }
.max-w-7xl { max-width: 1120px !important; }

header {
  min-height: 58px;
  background: #ffffff !important;
  border-color: #cfd4d0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
header > .container {
  min-height: 58px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
header a > div:first-child { display: none !important; }
header h1 {
  color: #171918;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.15;
}
header h1::first-letter { color: #1457d9; }
header p { color: #656b67 !important; font-size: 11px !important; }
header nav a { color: #3f4441; font-size: 13px !important; font-weight: 650 !important; }
header nav a:hover { color: #1457d9 !important; background: #f2f4f1 !important; }

.dashboard-container { min-height: calc(100vh - 121px); background: #f2f4f1 !important; }
main > .dashboard-container > .container { padding-top: 36px !important; padding-bottom: 54px !important; }
main h1 { font-size: 30px !important; line-height: 1.2; }
main h1 + p { color: #656b67 !important; font-size: 13px; }
main button,
main input { border-radius: 4px !important; }
main .bg-card.rounded-lg.border {
  border-color: #cfd4d0 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.endpoint-group {
  border-color: #cfd4d0 !important;
  border-radius: 6px !important;
  background: #ffffff;
  box-shadow: none !important;
}
.endpoint-group-header {
  min-height: 54px;
  padding: 14px 16px !important;
  border-color: #cfd4d0 !important;
  background: #ffffff !important;
}
.endpoint-group-header:hover { background: #e9ece9 !important; }
.endpoint-group-header h2 { font-size: 17px !important; }
.suite { border-radius: 0 !important; box-shadow: none !important; }
.suite:hover { transform: none !important; }

#settings > div {
  border-color: #cfd4d0 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 12px rgba(23, 25, 24, .09) !important;
}
#settings button[aria-label*="light mode" i],
#settings button[aria-label*="dark mode" i],
#settings > div > div.h-5 { display: none !important; }

footer {
  min-height: 62px;
  margin-top: 0 !important;
  border-color: #cfd4d0 !important;
  background: #e7eae7;
}
footer > .container { padding-top: 18px !important; padding-bottom: 18px !important; }
footer .text-muted-foreground { color: #656b67 !important; font-size: 12px !important; }
footer a { color: #1457d9 !important; }
#social { display: none !important; }

@media (max-width: 639px) {
  header > .container,
  main > .dashboard-container > .container { padding-left: 18px !important; padding-right: 18px !important; }
  header p { display: none; }
  main > .dashboard-container > .container { padding-top: 28px !important; }
  main h1 { font-size: 26px !important; }
  .endpoint-group-header h2 { font-size: 15px !important; }
  #settings { bottom: 10px !important; left: 10px !important; }
}