/**
 * e-ai.tw 公開頁（首頁、登入、註冊、受測者登入）— 與登入後 eAi360 深色一致
 * body 需有 class：eai-public-dark-shell
 */
html:has(body.eai-public-dark-shell) {
  background: #1e1e2f;
}

body.eai-public-dark-shell {
  background: linear-gradient(#1e1e2f, #1e1e24) !important;
  color: rgba(255, 255, 255, 0.85);
  overflow-x: hidden;
  max-width: 100vw;
}

body.eai-public-dark-shell .u-header,
body.eai-public-dark-shell .u-header .u-sheet-1,
body.eai-public-dark-shell .u-header.u-border-2 {
  background-color: #1e1e2f !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  max-width: 100%;
  position: relative !important;
  top: auto !important;
  box-shadow: none !important;
}

body.eai-public-dark-shell .u-header.u-sticky,
body.eai-public-dark-shell .eai-public-header.u-sticky {
  position: relative !important;
}

body.eai-public-dark-shell .u-sticky:before {
  display: none !important;
  height: 0 !important;
  content: none !important;
}

body.eai-public-dark-shell .u-header.u-border-grey-10,
body.eai-public-dark-shell .u-border-grey-10 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.eai-public-dark-shell .u-header .u-nav-link,
body.eai-public-dark-shell .u-header .u-nav-link.u-text-grey-90 {
  color: rgba(255, 255, 255, 0.88) !important;
}

body.eai-public-dark-shell .u-header .u-nav-link:hover,
body.eai-public-dark-shell .u-header .u-nav-link.u-text-active-palette-2-base {
  color: #ffffff !important;
}

body.eai-public-dark-shell .u-header .u-logo img {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 6px;
  padding: 4px 8px;
  box-sizing: content-box;
}

/* 文字品牌（取代 Ez-Logo 白底圖） */
/* 登入／註冊等頁：與首頁相同 — 左標題、右導覽貼底線 */
body.eai-public-dark-shell .eai-public-header .eai-public-header-bar {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 1rem 1.5rem;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 4.5rem;
  padding: 0.5rem 1.25rem 0.65rem !important;
  box-sizing: border-box;
  float: none !important;
}

body.eai-public-dark-shell .eai-public-header a.eai-public-page-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
  align-self: center;
}

body.eai-public-dark-shell .eai-public-header .eai-public-nav {
  flex: 0 1 auto;
  margin-left: auto !important;
  margin-right: 0 !important;
  float: none !important;
  clear: none !important;
  position: relative !important;
  width: auto !important;
  max-width: min(100%, 22rem);
  z-index: 2;
}

body.eai-public-dark-shell .eai-public-header .eai-public-nav .u-nav-container,
body.eai-public-dark-shell .eai-public-header .eai-public-nav .u-custom-menu {
  position: static !important;
  float: none !important;
}

body.eai-public-dark-shell .eai-public-header .eai-public-nav-list {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  gap: 0.35rem 1rem;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap;
}

body.eai-public-dark-shell .eai-public-header .eai-public-nav-link {
  white-space: nowrap;
  font-size: 1rem !important;
}

/* 首頁：左品牌、右導覽（貼 header 底線） */
body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-sheet-1 {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 1rem 1.5rem;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 4.5rem;
  padding: 0.5rem 1.25rem 0.65rem !important;
  box-sizing: border-box;
  float: none !important;
}

body.eai-public-dark-shell.eai-public-home a.eai-public-home-brand {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
  align-self: center;
}

body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-menu-1 {
  flex: 0 1 auto;
  margin-left: auto !important;
  margin-right: 0 !important;
  float: none !important;
  clear: none !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: min(100%, 52rem);
  z-index: 2;
}

body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-nav-container,
body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-custom-menu {
  position: static !important;
  float: none !important;
}

body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-nav-1 {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  gap: 0.35rem 1.1rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-nav-1 .u-nav-item {
  display: block !important;
  float: none !important;
  margin: 0 !important;
}

body.eai-public-dark-shell.eai-public-home .u-header .u-nav-link.eai-public-nav-pill {
  background-color: #0a0a0f !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 4px !important;
  padding: 0.45rem 0.75rem !important;
  line-height: 1.25 !important;
}

body.eai-public-dark-shell.eai-public-home .u-header .u-nav-link.eai-public-nav-pill:hover {
  background-color: #12121a !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  color: #ffffff !important;
}

/* 首頁 eAi 登入／註冊：hover 同 pill，避免白底上看不到字 */
body.eai-public-dark-shell.eai-public-home .u-header .u-nav-1 .u-nav-link:not(.eai-public-nav-pill) {
  border-radius: 4px !important;
  padding: 0.45rem 0.75rem !important;
  background-color: transparent !important;
}

body.eai-public-dark-shell.eai-public-home .u-header .u-nav-1 .u-nav-link:not(.eai-public-nav-pill):hover,
body.eai-public-dark-shell.eai-public-home .u-header .u-nav-1 .u-nav-link:not(.eai-public-nav-pill):focus {
  background-color: #0a0a0f !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

body.eai-public-dark-shell.eai-public-home .u-header .u-nav-1 .u-button-style.u-nav-link.u-text-hover-grey-90:hover,
body.eai-public-dark-shell.eai-public-home .u-header .u-nav-1 .u-border-hover-palette-2-base:hover {
  background-color: #0a0a0f !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-header .u-nav-link {
  pointer-events: auto !important;
}

body.eai-public-dark-shell a.eai-public-brand,
body.eai-public-dark-shell .eai-public-header a.eai-public-brand {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 34px !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #fbbf24 !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0;
  margin: 0;
}

body.eai-public-dark-shell.eai-public-home a.eai-public-home-brand {
  font-size: 34px !important;
}

body.eai-public-dark-shell a.eai-public-brand:hover {
  color: #fde68a !important;
  opacity: 0.95;
}

body.eai-public-dark-shell .eai-public-nav {
  flex: 0 1 auto;
}

body.eai-public-dark-shell .eai-public-nav-link {
  padding: 10px 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border: none !important;
  border-top: none !important;
  font-size: 1rem !important;
}

body.eai-public-dark-shell .eai-public-nav-link:hover {
  color: #ffffff !important;
}

body.eai-public-dark-shell .eai-public-nav-link--active {
  color: #fbbf24 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: 2px solid #fbbf24 !important;
}

body.eai-public-dark-shell .u-header .u-nav-link.u-border-active-palette-2-base,
body.eai-public-dark-shell .u-header .u-button-style.u-border-active-palette-2-base,
body.eai-public-dark-shell .u-header .u-nav-link.u-border-hover-palette-2-base,
body.eai-public-dark-shell .u-header .u-nav-link.u-border-2 {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom-color: transparent !important;
}

/* 首頁：還原舊站六個分頁連結，active 用金色底線（不要紅/粉整條線） */
body.eai-public-dark-shell.eai-public-home .u-header .u-nav-1 .u-nav-link {
  border-bottom-width: 2px !important;
  border-bottom-style: solid !important;
  border-bottom-color: transparent !important;
}

body.eai-public-dark-shell.eai-public-home .u-header li.active > .u-nav-link,
body.eai-public-dark-shell.eai-public-home .u-header .u-nav-link.u-text-active-palette-2-base.active,
body.eai-public-dark-shell.eai-public-home .u-header .u-nav-link[href="/"].u-text-active-palette-2-base {
  color: #fbbf24 !important;
  border-bottom-color: #fbbf24 !important;
}

body.eai-public-dark-shell .eai-public-nav-list {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.25rem;
}

@media (max-width: 1199px) {
  body.eai-public-dark-shell a.eai-public-brand {
    font-size: clamp(1.35rem, 4vw, 34px);
  }
}

/* 窄螢幕／橫向：Nicepage 漢堡常無法展開 → 改用三顆直連按鈕（不需 JS） */
body.eai-public-dark-shell .eai-public-mobile-quicknav {
  display: none;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  body.eai-public-dark-shell .eai-public-header .eai-public-header-bar,
  body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-sheet-1 {
    flex-wrap: wrap !important;
    align-items: flex-end !important;
  }

  body.eai-public-dark-shell .eai-public-mobile-quicknav {
    display: flex;
    flex: 1 1 100%;
    order: 10;
    width: 100%;
    gap: 0.45rem;
    justify-content: stretch;
    align-items: stretch;
    margin: 0.4rem 0 0;
    padding: 0;
  }

  body.eai-public-dark-shell .eai-public-mobile-quicknav-link {
    flex: 1 1 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.5rem;
    border-radius: 6px;
    font-size: clamp(0.82rem, 2.8vw, 0.95rem);
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-tap-highlight-color: rgba(251, 191, 36, 0.35);
    touch-action: manipulation;
  }

  body.eai-public-dark-shell .eai-public-mobile-quicknav-link--primary {
    background: #0a0a0f;
    border-color: rgba(251, 191, 36, 0.55);
    color: #fbbf24 !important;
  }

  body.eai-public-dark-shell .eai-public-mobile-quicknav-link:active {
    background: rgba(251, 191, 36, 0.18);
  }

  body.eai-public-dark-shell .menu-collapse,
  body.eai-public-dark-shell .u-nav-container-collapse {
    display: none !important;
    pointer-events: none !important;
  }

  body.eai-public-dark-shell.eai-public-home .u-nav-container,
  body.eai-public-dark-shell .eai-public-header .u-nav-container,
  body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-menu-1,
  body.eai-public-dark-shell .eai-public-header .eai-public-nav {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.eai-public-dark-shell .eai-public-header .eai-public-header-bar,
  body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-sheet-1 {
    flex-wrap: wrap !important;
    align-items: flex-end !important;
  }
  body.eai-public-dark-shell .eai-public-header .eai-public-nav,
  body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-menu-1 {
    margin-left: auto !important;
  }
  body.eai-public-dark-shell a.eai-public-brand {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
    letter-spacing: 0.01em;
  }
  body.eai-public-dark-shell .eai-public-nav-list,
  body.eai-public-dark-shell.eai-public-home .eai-public-home-header .u-nav-1 {
    justify-content: flex-end !important;
  }
}

body.eai-public-dark-shell input.form-control:-webkit-autofill,
body.eai-public-dark-shell input.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px rgba(30, 30, 47, 0.95) inset;
  box-shadow: 0 0 0 1000px rgba(30, 30, 47, 0.95) inset;
  transition: background-color 9999s ease-out 0s;
}

body.eai-public-dark-shell section.u-section-1,
body.eai-public-dark-shell section.u-section-2,
body.eai-public-dark-shell .u-white,
body.eai-public-dark-shell .u-section-2.u-white {
  background-color: transparent !important;
  background-image: none !important;
}

body.eai-public-dark-shell .u-sheet-1,
body.eai-public-dark-shell .u-container-layout,
body.eai-public-dark-shell .u-container-layout-6 {
  background-color: transparent !important;
}

body.eai-public-dark-shell .u-list-item,
body.eai-public-dark-shell li.u-nav-item,
body.eai-public-dark-shell .u-text-default,
body.eai-public-dark-shell .u-text {
  color: rgba(255, 255, 255, 0.88) !important;
}

body.eai-public-dark-shell a:not(.u-nav-link):not(.nav-link):not(.btn) {
  color: #fbbf24;
}

body.eai-public-dark-shell a:not(.u-nav-link):not(.nav-link):not(.btn):hover {
  color: #fde68a;
}

body.eai-public-dark-shell .u-footer.u-grey-80,
body.eai-public-dark-shell .u-footer {
  background-color: #212529 !important;
}

body.eai-public-dark-shell .u-footer .u-text-1 {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Bootstrap 表單（登入／註冊） */
body.eai-public-dark-shell .col-form-label,
body.eai-public-dark-shell label {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.eai-public-dark-shell .form-control {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

body.eai-public-dark-shell .form-control:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: #e14eca !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(225, 78, 202, 0.25);
}

body.eai-public-dark-shell .nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

body.eai-public-dark-shell .nav-tabs .nav-link {
  color: rgba(255, 255, 255, 0.65);
  border-color: transparent;
}

body.eai-public-dark-shell .nav-tabs .nav-link:hover {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.15);
}

body.eai-public-dark-shell .nav-tabs .nav-link.active {
  color: #fbbf24 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2) transparent !important;
}

body.eai-public-dark-shell .btn-dark {
  background-color: #e14eca;
  border-color: #e14eca;
  color: #ffffff;
}

body.eai-public-dark-shell .btn-dark:hover {
  background-color: #d633c5;
  border-color: #d633c5;
}

body.eai-public-dark-shell .alert-danger {
  background-color: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.5);
  color: #f8d7da;
}

body.eai-public-dark-shell .alert-warning {
  background-color: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.4);
  color: #fff3cd;
}

body.eai-public-dark-shell .alert-info {
  background-color: rgba(23, 162, 184, 0.15);
  border-color: rgba(23, 162, 184, 0.45);
  color: rgba(255, 255, 255, 0.9);
}

body.eai-public-dark-shell code {
  color: #fde68a;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}