*,
::before,
::after {
  box-sizing: border-box
}

:root {
  --font-jhenghei: "Microsoft Jhenghei", sans-serif;
  --font-tahoma: "Tahoma", sans-serif;

  /* base 黑白 */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-dark: #282823;

  /* 警示 */
  --color-warning: #fcad00;

  /* 主視覺黃色系 (深 → 淺) */
  --color-dark-yellow: #ba830a;
  --color-yellow-1: #d5960c;
  --color-general-yellow: #e9be5f;
  --color-pale-yellow: #f1e4b4;
  --color-light-yellow: #fff6d3;
  --color-extra-light-yellow: #fdfaeb;

  /* 灰階 (深 → 淺) */
  --color-gray-dark: #595c56;
  --color-gray-mid: #707070;
  --color-gray-light: #d2d2d2;
  --color-light-gray: #eeeeee;

  /* misc */
  --ripple-gray: rgba(189, 189, 189, 0.6);
  --RADIUS: 8px
}

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

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=tel],
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  box-sizing: border-box
}

p {
  margin-top: 0;
  margin-bottom: 0
}

pre {
  overflow: auto;
  padding-block: .5rem
}

.font-jhenghei {
  font-family: var(--font-jhenghei)
}

.font-tahoma {
  font-family: var(--font-tahoma)
}

.ripple-button {
  display: inline-block;
  position: relative;
  padding: 12px 24px;
  font-size: 1rem;
  color: #161616;
  background-color: var(--color-white);
  border: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  user-select: none
}

.ripple-button .ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--ripple-button-background-color, rgba(255, 255, 255, 0.6));
  transform: scale(0);
  /*animation: ripple-animation 600ms linear;*/
  pointer-events: none
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0
  }
}

.app {
  display: block;
  position: relative;
  width: 100%;
  height: auto
}

.wrapper-main-container {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: auto
}

@media(min-width: 992px) {
  .wrapper-main-container {
    padding-left: .5rem
  }
}

.grid-container {
  display: grid;
  grid-template-columns: 100%;
  width: 100%;
  height: 100vh;
  transition: all 300ms ease-in-out
}

@media(min-width: 992px) {
  .grid-container {
    grid-template-columns: 260px 1fr;
    overflow: hidden
  }
}

@media(min-width: 1200px) {
  .grid-container {
    grid-template-columns: 360px 1fr
  }
}

.grid-container.hide-sidebar {
  grid-template-columns: 100%
}

@media(min-width: 992px) {
  .grid-container.hide-sidebar {
    grid-template-columns: 0px 1fr
  }
}

.grid-container.hide-sidebar .sidebar-container {
  left: 0
}

@media(min-width: 992px) {
  .grid-container.hide-sidebar .sidebar-container {
    left: 0
  }

  .grid-container.hide-sidebar .sidebar-container .sidebar-header .logo-block {
    opacity: 0;
    transition: all 300ms ease-in-out
  }

  .grid-container.hide-sidebar .sidebar-container .sidebar-menu-group {
    opacity: 0;
    transition: all 300ms ease-in-out
  }
}

.grid-container.hide-sidebar .wrapper-main-container {
  padding-left: 0
}

/* 2026-05-20: 老闆覺得桌面版 sidebar logo 太小, 改為長寬放大一倍 (SVG 原生
   198x61 → 顯示意圖 396x122)。HTML <img> 已加 width="396" height="122"
   作為 hint, CSS 補 max-width: 100% + height: auto, 讓 logo 在 sidebar
   寬度可用範圍內等比例放大 (sidebar 寬 360 - 左右 padding 40 = 可用 320,
   實際視覺約 320x99, 比原 198x61 明顯放大)。height: auto 維持長寬比避免
   變形, max-width 兼任中型螢幕 (992-1199px sidebar 260) 的 overflow 防線。*/
.sidebar-container .sidebar-header .logo-block .logo-image {
  max-width: 100%;
  height: auto
}

/* 2026-05-20: /nthu/ alias 桌面版 sidebar logo 老闆要求單獨放大 30%
   (114x34 → 148x44)。其他 alias 用全站共用的 inline width="114" height="34",
   /nthu/ 用 src 路徑特徵 (src*="logo_nthu") 鎖定後 CSS 覆蓋。CSS width
   會覆蓋 HTML width attribute (presentation hint), 不需 !important。*/
.sidebar-container .sidebar-header .logo-block img.logo-image[src*="logo_nthu"] {
  width: 148px;
  height: 44px
}

/* 2026-05-20: /nthu/ alias 行動版 navbar 老闆要求 logo 下方 padding 減半
   (原 utility .p-[0.1875rem_1rem_0.25rem_1rem] 下方 0.25rem → 0.125rem)。
   用 :has(img[src*="logo_nthu"]) 鎖定含 nthu logo 的 navbar, 包在
   max-width: 991.98px media 內只行動版生效, 桌機版 lg:p-[...] 不受影響。*/
@media (max-width: 991.98px) {
  nav.navbar:has(img.logo-image[src*="logo_nthu"]) {
    padding-bottom: 0.125rem
  }
}

/* 2026-05-20: article body 內 YouTube iframe 響應式縮放 — 老闆反映行動版
   超出 viewport (YouTube 預設 <iframe width="560" height="315">, 寫死 560
   寬, 行動 viewport 375 / 414 等都會 overflow)。修法: max-width: 100%
   限縮到父容器 (article body) 寬度, aspect-ratio: 16/9 維持 YouTube 比例
   避免 iframe 變形 (iframe 不像 img/svg 有內建 aspect ratio, 純設 height:
   auto 不會自動算高), height: auto 配合 aspect-ratio 算出正確高度。
   只鎖定 YouTube 來源 iframe (src 含 youtube / youtu.be), 不影響 Google
   Maps / Form 等其他 embed (它們各自 aspect ratio 不一定 16:9)。*/
.article-body iframe[src*="youtube"],
.article-body iframe[src*="youtu.be"] {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9
}

/* 2026-05-20: 行動版 navbar logo 同步放大一倍 (HTML <img width="396"
   height="122" max-w-400px>)。當行動版 viewport 寬度 < 400 時 (常見 375
   iPhone / 360 Pixel 等), max-width: 100% 自動把 logo 等比例縮到 navbar
   父容器可用寬度, height: auto 維持長寬比。selector 限定 .nav-logo 內,
   不影響 sidebar / footer 等其他 .logo-image。*/
.nav-logo .logo-image {
  max-width: 100%;
  height: auto
}

.home-layout {
  display: block;
  position: relative
}

.toast-modal {
  visibility: hidden;
  min-width: 200px;
  background-color: #333;
  color: var(--color-white);
  text-align: center;
  border-radius: 8px;
  padding: 12px;
  position: fixed;
  z-index: 1;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: sans-serif;
  transition: visibility 0s, opacity .5s linear;
  opacity: 0
}

.skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  width: var(--w, 100%);
  height: var(--h, 1em);
  background-color: var(--base, #ddd);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: attr(data-aspect-ratio)
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-highlight, var(--color-light-gray)), transparent);
  animation: skeleton_shimmer 1.5s infinite
}

@keyframes skeleton_shimmer {
  100% {
    transform: translateX(250%)
  }
}

/* Spinner used by loaderIcon (send button "sending" state, etc.).
   loaderIcon emits `<svg class="spinner" style="animation: rotate 1s linear infinite;">`
   — without this keyframes rule the SVG renders but doesn't rotate. */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Toastify 1.12.0 (vendor.js) ships only the JS; its stylesheet isn't
   bundled. Without these rules the toast element inherits browser
   defaults and floats in the top-left of the viewport. Mirrors the
   upstream toastify.css exactly (including the `border-radius: 12px`
   override and z-index=max) so toast() renders the way it did in the
   legacy `vendor.min.css` bundle. */
.toastify {
  padding: 12px 20px;
  color: var(--color-white);
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, .12), 0 10px 36px -4px rgba(77, 96, 232, .3);
  background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
  background: linear-gradient(135deg, #73a5ff, #5477f5);
  position: fixed;
  opacity: 0;
  transition: all .4s cubic-bezier(.215, .61, .355, 1);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  max-width: calc(50% - 20px);
  z-index: 2147483647;
  border-radius: 12px;
}
.toastify.on {
  opacity: 1;
}
.toast-close {
  background: 0 0;
  border: 0;
  color: currentColor;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  opacity: .4;
  padding: 0 5px;
}
.toastify-right { right: 15px; }
.toastify-left  { left: 15px; }
.toastify-top    { top: -150px; }
.toastify-bottom { bottom: -150px; }
.toastify-rounded { border-radius: 25px; }
.toastify-avatar {
  width: 1.5em;
  height: 1.5em;
  margin: -7px 5px;
  border-radius: 2px;
}
.toastify-center {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  max-width: fit-content;
  max-width: -moz-fit-content;
}
@media only screen and (max-width: 360px) {
  .toastify-left, .toastify-right {    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}

.skeleton .skeleton.circle {
  border-radius: 50%
}

.limit-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3
}

.show-all-content {
  border: none;
  text-decoration: underline;
  background-color: rgba(0, 0, 0, 0)
}

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    width: 15px;
    height: 15px
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: rgba(241, 228, 180, .22)
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #fce8bb;
    border-radius: 100vh;
    border: 3px solid #f6f7ed
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c0a0b9
  }
}

.navbar-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  width: 100%;
  height: auto
}

@media(min-width: 992px) {
  .navbar-container {
    border-radius: var(--RADIUS)
  }
}

.navbar-container .nav-list {
  display: none;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0
}

@media(min-width: 992px) {
  .navbar-container .nav-list {
    display: flex
  }
}

.navbar-container .nav-list .nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  margin: 0;
  padding: 4px 6px;
  color: var(--color-dark);
  border: none;
  border-radius: 0;
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer
}

.navbar-container .nav-list .nav-link.active {
  border-bottom: 3px solid var(--color-warning)
}

.navbar-container .nav-right .user-btn {
  --ripple-button-background-color: var(--ripple-gray);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 6px;
  border: none;
  border-radius: .125rem;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer
}

.sidebar-container {
  display: block;
  position: fixed;
  top: 0;
  left: -80rem;
  height: 100vh;
  width: 100%;
  padding-block: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--color-white);
  transition: all 300ms ease-in-out;
  box-shadow: rgba(99, 99, 99, .2) 0px 2px 8px 0px;
  z-index: 200
}

@media(min-width: 992px) {
  .sidebar-container {
    position: relative;
    height: auto;
    left: 0
  }
}

.sidebar-container .sidebar-sub-banner {
  display: block;
  position: relative;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin-inline: auto
}

.sidebar-container .sidebar-header {
  display: block;
  position: relative;
  top: 0
}

@media(min-width: 992px) {
  .sidebar-container .sidebar-header {
    position: relative
  }
}

.sidebar-container .sidebar-header .sidebar-toggle-block {
  position: relative;
  flex-direction: row;
  /* 老闆規定: 行動版 .sidebar-toggle 關閉鈕從左上移到右上,
     flex-direction: row + justify-content: flex-end 把唯一 child 推到右側.
     .sidebar-toggle-block::before 的金色分隔線維持 left:15px width:92%,
     z-index:-1 在按鈕後方, 視覺上線從左邊延伸到右側按鈕底下. */
  justify-content: flex-end;
  width: 100%
}

.sidebar-container .sidebar-header .sidebar-toggle-block::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 15px;
  width: 92%;
  height: 1px;
  background-color: var(--color-general-yellow);
  transform: translateY(-50%);
  z-index: -1
}

.sidebar-container .sidebar-header .sidebar-toggle-block .sidebar-toggle {
  --ripple-button-background-color: var(--color-black);
  background-color: rgba(0, 0, 0, 0);
  padding: 6px
}

.sidebar-container .sidebar-header .sidebar-toggle-block .sidebar-toggle .icon {
  color: var(--color-yellow-1)
}

.sidebar-container .sidebar-menu-group {
  display: flex;
  position: relative;
  flex-direction: column;
  row-gap: .25rem;
  background-color: var(--color-white);
  overflow-y: auto
}

@media(min-width: 992px) {
  .sidebar-container .sidebar-menu-group {
    overflow-y: hidden
  }
}

.sidebar-container .sidebar-menu-group .menu-item {
  height: auto;
  overflow: hidden;
  transition: all .3s ease-in-out
}

.sidebar-container .sidebar-menu-group .menu-item-button {
  --ripple-button-background-color: rgba(189, 189, 189, 0.6);
  color: var(--color-black);
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  border-radius: .75rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-black)
}

.sidebar-container .sidebar-menu-group .menu-item-button.active {
  color: var(--color-dark-yellow)
}

.sidebar-container .sidebar-menu-group .menu-item-text {
  place-self: start
}

.sidebar-container .sidebar-menu-group .menu-nest-container {
  display: block;
  position: relative;
  height: 0;
  transition: all .3s ease-in-out
}

.sidebar-container .sidebar-menu-group .menu-nest-container .menu-nest-group {
  padding-top: .25rem
}

.sidebar-container .sidebar-menu-group .menu-nest-container .menu-nest-group .menu-nest-item .menu-nest-item-button {
  color: var(--color-black);
  background-color: rgba(0, 0, 0, 0);
  transition: all .3s ease-in-out
}

.sidebar-container .sidebar-menu-group .menu-nest-container .menu-nest-group .menu-nest-item .menu-nest-item-button:is(:hover, :focus, .active) {  color: var(--color-dark-yellow);
  background-color: var(--color-light-gray)
}

.second-sidebar {
  display: block;
  position: fixed;
  top: 0;
  left: -180vw;
  width: 90%;
  height: 100%;
  padding: 1rem;
  background-color: var(--color-pale-yellow);
  overflow-y: auto;
  z-index: 200;
  transition: all 300ms ease-in-out
}

.second-sidebar.open {
  left: 0
}

.second-sidebar .nav-close {
  display: flex;
  /* 2026-05-20: 老闆把行動版 portal menu (second-sidebar) 的 X 關閉鈕從
     右上移到左上, justify-content flex-end → flex-start。注意這跟 sidebar
     主選單 (.sidebar-toggle-block) 的 X 是不同元件: 主選單 X 仍在右上。*/
  justify-content: flex-start;
  align-items: center;
  position: relative;
  top: 1rem;
  font-size: 1.5rem;
  cursor: pointer
}

.second-sidebar .nav-close .close-icon {
  color: var(--color-black);
  background-color: rgba(0, 0, 0, 0)
}

.second-sidebar .second-sidebar-content {
  display: block;
  position: relative
}

.second-sidebar .second-sidebar-content .second-sidebar-group {
  display: block;
  position: relative
}

.second-sidebar .second-sidebar-content .second-sidebar-group .second-sidebar-item {
  display: block;
  position: relative
}

.second-sidebar .second-sidebar-content .second-sidebar-group .second-sidebar-item .second-sidebar-item-group {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 0;
  margin-left: 1.25rem;
  list-style: none;
  border-radius: 1rem;
  overflow: hidden
}

.second-sidebar .second-sidebar-content .second-sidebar-group .second-sidebar-item .second-sidebar-item-group .second-sidebar-item-list {
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--color-black);
  background-color: var(--color-white)
}

.second-sidebar .second-sidebar-content .second-sidebar-group .second-sidebar-item .second-sidebar-item-group .second-sidebar-item-list:last-child {
  border-bottom: none
}

.second-sidebar .second-sidebar-content .second-sidebar-group .second-sidebar-item .second-sidebar-item-group .second-sidebar-item-list .second-sidebar-item-link {
  display: block;
  position: relative;
  color: var(--color-black);
  font-weight: 700;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0)
}

.second-sidebar .second-sidebar-content .second-sidebar-group .second-sidebar-item .second-sidebar-item-group .second-sidebar-item-list:is(:hover, :focus) {  background-color: var(--color-light-yellow)
}

.select-container {
  --select-trigger-background-color: #f8eecf;
  --select-trigger-border-color: #896515;
  --select-border-color: #e5d284;
  position: relative;
  min-width: 200px;
  user-select: none
}

.select-container .select-trigger {
  display: flex;
  align-items: center;
  background: var(--select-trigger-background-color);
  border: 1px solid var(--select-trigger-border-color);
  border-radius: 4px;
  cursor: pointer
}

.select-container .select-trigger .selected-value {
  flex: 1;
  padding: 8px 12px;
  color: #333
}

.select-container .select-trigger .arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-left: 1px solid var(--select-border-color)
}

.select-container .select-trigger .arrow-container .arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(45deg);
  transition: transform .2s ease
}

.select-container.open .select-trigger .arrow {
  transform: rotate(-135deg)
}

.select-container.open .options {
  max-height: 400px;
  opacity: 1;
  visibility: visible
}

.select-container.open .options.model-query-options {
  max-height: 400px;
}

.select-container .options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 0;
  background: var(--color-white);
  border: 1px solid var(--select-border-color);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease;
  overflow: auto;
  z-index: 1
}

.select-container .options.model-query-options {
  position: fixed;
  top: auto;
  bottom: 0px;
  padding: 1.5rem 1rem 2rem 1rem;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  background-color: var(--color-pale-yellow);
  overflow: hidden;
  z-index: 100
}

.select-container .options.model-query-options .model-query-option-group {
  display: block;
  position: relative;
  width: 100%;
  max-height: 20rem;
  overflow: auto
}

.select-container .options .option {
  padding: 8px 12px;
  cursor: pointer
}

.select-container .options .option.active,
.select-container .options .option:hover {
  background: #f0e6b8
}

.select-container .options .model-query-option-group {
  padding-inline: 1rem
}

.select-container .options .model-query-option-group .option {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-black);
  text-align: center
}

.select-container .options .model-query-option-group .option:last-child {
  border-bottom: none
}

.select-container.open .options {
  max-height: 400px !important;
  opacity: 1;
  visibility: visible
}

.card-layout {
  display: grid;
  grid-template-columns: 100%;
  gap: 1rem
}

@media(min-width: 992px) {
  .card-layout {
    grid-template-columns: repeat(2, 1fr)
  }
}

.model-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: auto;
  padding: 1.5rem;
  border-radius: var(--RADIUS);
  background-color: var(--color-extra-light-yellow)
}

.model-container .model-header {
  display: block;
  position: relative
}

.model-container .model-header .model-selector {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  column-gap: .75rem
}

.model-container .model-header .model-selector .icon svg {
  width: 2.5rem;
  height: auto;
  color: var(--color-yellow-1)
}

.model-container .model-sm-header {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  margin-bottom: 1rem
}

@media(min-width: 992px) {
  .model-container .model-sm-header {
    display: none
  }
}

.model-container .model-sm-header .model-sm-header-title {
  display: inline-block;
  position: relative;
  top: -2px;
  font-weight: 700;
  color: var(--color-dark-yellow);
  padding-inline: 1rem
}

.model-container .model-sm-header .model-sm-header-title::before,
.model-container .model-sm-header .model-sm-header-title::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 1.25rem;
  background-color: var(--color-yellow-1)
}

.model-container .model-sm-header .model-sm-header-title::before {
  left: 0
}

.model-container .model-sm-header .model-sm-header-title::after {
  right: 0
}

.model-container .model-sm-header .icon svg {
  width: 1.75rem;
  height: auto;
  color: var(--color-yellow-1)
}

.model-container .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem
}

.model-container .cards .card-gallery {
  display: block;
  position: relative;
  width: 100%;
  height: auto
}

.model-container .cards .card-gallery img {
  border-radius: var(--RADIUS)
}

.model-container .cards .card-gallery .caption {
  font-weight: 700;
  color: var(--color-black)
}

.portal-container {
  display: none;
  margin-top: 3rem;
  margin-bottom: 4rem;
  padding-inline: 2rem
}

@media(min-width: 992px) {
  .portal-container {
    display: grid;
    padding-inline: 0
  }
}

.portal-container .portal-header {
  cursor: pointer
}

.portal-container .portal-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem
}

.portal-container .portal-body .portal-list-group {
  display: block;
  position: relative;
  height: auto
}

.portal-container .portal-body .portal-list-group .portal-list-group-title {
  display: block;
  position: relative
}

.portal-container .portal-body .portal-list-group .portal-list-group-title .portal-list-group-icon svg {
  display: block;
  position: relative;
  width: 2.5rem;
  height: auto;
  color: var(--color-black)
}

.portal-container .portal-body .portal-list-group .portal-nest-list-group {
  height: auto;
  max-height: 100%
}

@media(min-width: 992px) {
  .portal-container .portal-body .portal-list-group .portal-nest-list-group {
    max-height: none
  }
}

.portal-container .portal-body .portal-list-group .portal-nest-list-group .portal-list-item {
  display: block;
  position: relative;
  max-width: 100%;
  line-height: 1.5
}

.portal-container .portal-body .portal-list-group .portal-nest-list-group .portal-list-item .portal-list-item-link {
  word-break: break-word;
  transition: all .3s ease-in-out
}

.portal-container .portal-body .portal-list-group .portal-nest-list-group .portal-list-item .portal-list-item-link:is(:hover, :focus) {  color: var(--color-dark-yellow)
}

.tabs-container {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 60
}

@media(min-width: 992px) {
  .tabs-container {
    display: none
  }
}

.tabs-container .grid-container {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding-inline: 0
}

.tabs-container .grid-container .tabs .tabs-item .tabs-item-link {
  --ripple-button-background-color: rgba(206, 206, 206, 0.6)
}

.tabs-container .grid-container .tabs .tabs-item .tabs-item-link svg {
  width: 1.75rem;
  height: auto
}

.modal-main-component {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 60vh;
  z-index: 200
}

.modal-main-component .modal-overlay-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5)
}

.modal-main-component .modal-container-component {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-white);
  border-radius: 5px;
  max-width: 500px;
  width: 95%;
  max-height: 95%;
  opacity: 0;
  overflow: hidden
}

.modal-main-component .modal-container-component .modal-header-component,
.modal-main-component .modal-container-component .modal-footer-component {
  position: sticky;
  padding: 16px
}

.modal-main-component .modal-container-component .modal-header-component {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  top: 0;
  background: var(--color-white);
  z-index: 10
}

.modal-main-component .modal-container-component .modal-footer-component {
  background: var(--color-white);
  z-index: 10
}

.modal-main-component .modal-container-component .modal-title-component {
  margin: 0;
  font-size: 1.25em;
  display: inline-block
}

.modal-main-component .modal-container-component .modal-body-component {
  padding: 16px;
  overflow: auto
}

.modal-main-component .modal-container-component .modal-footer-component {
  border-top: 1px solid var(--color-light-gray);
  text-align: right
}

.modal-main-component .modal-container-component .modal-footer-component button {
  margin-left: 8px
}

.modal-main-component .modal-container-component .modal-close-btn-component {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  border: none;
  font-size: 1.25em;
  cursor: pointer
}

.pricing-tab-container {
  -webkit-overflow-scrolling: touch;
  border-radius: 1rem;
  border: 1px solid var(--color-gray-mid);
  padding: .125rem
}

.table {
  table-layout: auto;
  border-spacing: 0
}

.table .tr:nth-child(odd) {
  background-color: var(--color-white)
}

.table .tr:nth-child(even) {
  background-color: var(--color-extra-light-yellow)
}

.switch-component {
  font-size: 1rem;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em
}

.switch-component .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cacaca;
  border-radius: 50px;
  overflow: hidden;
  transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.switch-component .slider:after {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: .3em;
  bottom: .3em;
  background-color: #fcfcfc;
  border-radius: inherit;
  transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.switch-component input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-component input:checked+.slider {
  background-color: var(--color-general-yellow);
}

.switch-component.bg-light input:checked+.slider {
  /* background-color: #f8eecf; */
  background-color: var(--color-dark-yellow);
}

.switch-component input:checked+.slider::after {
  transform: translateX(100%)
}

.ai-content-box-container {
  display: block;
  position: relative;
  width: 100%;
  height: 100%
}

@media(min-width: 992px) {
  .ai-content-box-container {
    height: auto
  }
}

.ai-content-box-container .ai-content-box-wrapper {
  display: block;
  position: relative;
  height: 100%
}

@media(min-width: 992px) {
  .ai-content-box-container .ai-content-box-wrapper {
    height: 27rem
  }
}

.ai-content-box-container .ai-content-box-header .ai-content-box-pagination-number {
  letter-spacing: -1px;
  padding-inline: .25rem
}

.ai-content-box-container .ai-content-box-header .ai-content-box-pagination {
  --ripple-button-background-color: var(--ripple-gray);
  color: var(--color-yellow-1);
  margin: 0;
  padding: .25rem;
  background: rgba(0, 0, 0, 0);
  cursor: pointer
}

.ai-content-box-container .ai-content-box-header .ai-content-box-pagination svg {
  display: block;
  position: relative;
  margin: 0;
  padding: 0
}

.ai-content-box-container .flex-center-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%
}

.ai-content-box-container .chat-input-area {
  display: block;
  position: relative
}

.ai-content-box-container .chat-input-area .send-button {
  --ripple-button-background-color: var(--ripple-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  position: absolute;
  bottom: 20px;
  right: 15px;
  color: var(--color-dark-yellow);
  border: 1px solid var(--color-dark-yellow)
}

/* 行動版型: 把 chat-input-dock (chatOptionsBarComponent + chatInputAreaComponent
 * 的 wrapper) 釘在視窗底部, 桌面版維持原本 inline 排在 main content 末端 */
.chat-input-dock {
  display: block;
  width: 100%;
}

@media (max-width: 1023px) {
  .chat-input-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    padding: 8px 12px 10px;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .06);
    box-sizing: border-box;
  }
  /* 留空間給 fixed dock, 避免內容最後幾行被遮住 */
  .ai-content-box-container {
    padding-bottom: var(--mobile-dock-height, 260px);
  }
  /* 行動版 textarea 整體高度約 4 列文字 (含 padding):
   * 桌面版 pb-4rem (64px) 是給 absolute 定位的「語音/送出」按鈕區留位; 行動
   * 版 textarea 整體 4 列高 (約 96~110px), 按鈕仍維持桌面版的 absolute
   * 浮在右下角的設計, 為了不撐高 textarea, 縮小 padding-bottom 並接受
   * 按鈕略覆蓋輸入區右下 corner. */
  .chat-input-area .chatTextarea {
    padding-bottom: .5rem !important;
  }
  /* 行動版 send-button-wrapper 維持 absolute 浮在 textarea 內部右下角,
   * 跟桌面版同一個設計. 與 textarea 邊界保留 padding (bottom 14 / right 16),
   * 不要太貼邊看起來才有呼吸空間.
   * inline style 已是 absolute, 只需用 !important 強制覆寫 bottom/right. */
  .chat-input-area .send-button-wrapper {
    position: absolute !important;
    bottom: 14px !important;
    right: 16px !important;
    margin-top: 0;
    justify-content: flex-end;
  }
  /* 行動版按鈕「語音」「送出」高度比之前提高 30% (從 30px → 約 40px),
   * 透過增加垂直 padding (4 → 9) 達成, 水平 padding 維持 10px. */
  .chat-input-area .send-button-wrapper .send-button {
    padding: 9px 10px;
    font-size: 13px;
  }
  /* 行動版 chat-options-bar:
   * - online-search 占滿剩餘空間 (flex-grow), 緊貼 dock 左邊
   * - attach-file 用 button 自然寬度 (auto), 配合 flex justify-between
   *   緊貼 dock 右邊, 不再硬切 40% 留多餘空白
   * - search-url input 寬度縮成 online-search 內可用空間的 2/3,
   *   給整體 layout 多一些呼吸感
   */
  .chat-options-bar > .online-search {
    flex: 1 1 auto;
    width: auto !important;
    margin-left: 0 !important;
  }
  .chat-options-bar > .attach-file {
    flex: 0 0 auto;
    width: auto !important;
    /* 用 negative margin-right 抵銷 dock 12px 右 padding, 讓「📎 檔案」
     * 按鈕貼到視窗右邊; -12px 完全抵銷後留 0px 邊距, button 緊貼 viewport. */
    margin-right: -12px !important;
  }
  /* search-url 是 online-search-switcher 開啟後 append 進來的 div, 預設
   * w-full 占 online-search 全寬; 行動版定寬約原本的 2/3 (121px), 用
   * max-width 寫死避免被 online-search flex-grow 撐大. */
  .chat-options-bar .online-search .search-url {
    flex: 0 0 auto;
    width: 121px !important;
    max-width: 121px !important;
  }
}

.footer-container {
  position: relative;
  padding-bottom: var(--footer-padding-bottom)
}

@media(min-width: 992px) {
  .footer-container {
    padding-bottom: 0
  }
}

.footer-container .footer-wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  background: #ededeb
}

.footer-container .footer-wrapper .footer-info-container {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 4rem;
  padding-bottom: 2rem;
  padding-inline: 2rem
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 2rem;
  column-gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0
}

@media(min-width: 992px) {
  .footer-container .footer-wrapper .footer-info-container .footer-list-group {
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 3rem;
    column-gap: 8rem
  }
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group .footer-list-item {
  display: block;
  position: relative
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group .footer-list-item .footer-list-group-title {
  display: block;
  position: relative;
  color: var(--color-dark-yellow);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group .footer-list-item .footer-nest-list-group {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group .footer-list-item .footer-nest-list-group .footer-nest-list-item {
  display: block;
  position: relative
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group .footer-list-item .footer-nest-list-group .footer-nest-list-item .footer-nest-list-item-link {
  display: block;
  position: relative;
  color: var(--color-dark);
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0;
  text-decoration: none
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group .footer-list-item .footer-nest-list-group .footer-nest-list-item .footer-nest-list-item-link:is(:hover, :focus) {  color: var(--color-dark-yellow)
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group .footer-list-item .footer-nest-list-group.contact-us {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group .footer-list-item .footer-nest-list-group.contact-us .footer-nest-list-item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.footer-container .footer-wrapper .footer-info-container .footer-list-group .footer-list-item .footer-nest-list-group.contact-us .footer-nest-list-item-link svg {
  width: 3.75rem;
  height: auto;
  color: var(--color-dark);
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))
}

.footer-container .footer-wrapper .footer-copyright-container {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  color: var(--color-dark);
  background: var(--color-general-yellow);
  padding-block: 2.5rem
}

.footer-container .footer-wrapper .footer-copyright-container .footer-copyright {
  display: flex;
  align-items: center;
  justify-content: center
}

/* ==================== unocss.min.css (merged in) ==================== */
*, .rotate-90, ::after, ::before {  --un-rotate-x: 0;
  --un-rotate-y: 0;
  --un-rotate-z: 0
}
.before\:border-1::before, .border, .border-1, [b=""], [border ~ ="\31 "] {  border-width: 1px
}
.border-\#595c56, .border-\#707070, .border-\#777777, .border-\#d2d2d2, .border-\#d5960c, .border-\#e8e8e8, .border-\#e9be5f, .border-\#f1e4b4, .border-b-\#d2d2d2, .border-gray-200, .border-gray-300, .border-gray-500, .border-slate-300, .border-white, .hover\:border-dark:hover {  --un-border-opacity: 1
}
.color-\#575656, .color-\#d5960c, .color-white, .hover\:text-indigo-500:hover, .text-\#595c56, .text-\#842423, .text-\#d5960c, .text-black, .text-blue-600, .text-dark, .text-gray-400, .text-gray-500, .text-gray-700, .text-gray-800, .text-gray-900, .text-indigo-600, .text-red-600, .text-white {  --un-text-opacity: 1
}
.shadow-lg, .shadow-none {  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)
}
.ease, .transition-all, [ease=""] {  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
*, ::after, ::before {  --un-rotate: 0;
  --un-scale-x: 1;
  --un-scale-y: 1;
  --un-scale-z: 1;
  --un-skew-x: 0;
  --un-skew-y: 0;
  --un-translate-x: 0;
  --un-translate-y: 0;
  --un-translate-z: 0;
  --un-pan-x: ;
  --un-pan-y: ;
  --un-pinch-zoom: ;
  --un-scroll-snap-strictness: proximity;
  --un-ordinal: ;
  --un-slashed-zero: ;
  --un-numeric-figure: ;
  --un-numeric-spacing: ;
  --un-numeric-fraction: ;
  --un-border-spacing-x: 0;
  --un-border-spacing-y: 0;
  --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0);
  --un-ring-shadow: 0 0 rgb(0 0 0 / 0);
  --un-shadow-inset: ;
  --un-shadow: 0 0 rgb(0 0 0 / 0);
  --un-ring-inset: ;
  --un-ring-offset-width: 0px;
  --un-ring-offset-color: var(--color-white);
  --un-ring-width: 0px;
  --un-ring-color: rgb(147 197 253 / 0.5);
  --un-blur: ;
  --un-brightness: ;
  --un-contrast: ;
  --un-drop-shadow: ;
  --un-grayscale: ;
  --un-hue-rotate: ;
  --un-invert: ;
  --un-saturate: ;
  --un-sepia: ;
  --un-backdrop-blur: ;
  --un-backdrop-brightness: ;
  --un-backdrop-contrast: ;
  --un-backdrop-grayscale: ;
  --un-backdrop-hue-rotate: ;
  --un-backdrop-invert: ;
  --un-backdrop-opacity: ;
  --un-backdrop-saturate: ;
  --un-backdrop-sepia:
}
::backdrop {
  --un-rotate: 0;
  --un-rotate-x: 0;
  --un-rotate-y: 0;
  --un-rotate-z: 0;
  --un-scale-x: 1;
  --un-scale-y: 1;
  --un-scale-z: 1;
  --un-skew-x: 0;
  --un-skew-y: 0;
  --un-translate-x: 0;
  --un-translate-y: 0;
  --un-translate-z: 0;
  --un-pan-x: ;
  --un-pan-y: ;
  --un-pinch-zoom: ;
  --un-scroll-snap-strictness: proximity;
  --un-ordinal: ;
  --un-slashed-zero: ;
  --un-numeric-figure: ;
  --un-numeric-spacing: ;
  --un-numeric-fraction: ;
  --un-border-spacing-x: 0;
  --un-border-spacing-y: 0;
  --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0);
  --un-ring-shadow: 0 0 rgb(0 0 0 / 0);
  --un-shadow-inset: ;
  --un-shadow: 0 0 rgb(0 0 0 / 0);
  --un-ring-inset: ;
  --un-ring-offset-width: 0px;
  --un-ring-offset-color: var(--color-white);
  --un-ring-width: 0px;
  --un-ring-color: rgb(147 197 253 / 0.5);
  --un-blur: ;
  --un-brightness: ;
  --un-contrast: ;
  --un-drop-shadow: ;
  --un-grayscale: ;
  --un-hue-rotate: ;
  --un-invert: ;
  --un-saturate: ;
  --un-sepia: ;
  --un-backdrop-blur: ;
  --un-backdrop-brightness: ;
  --un-backdrop-contrast: ;
  --un-backdrop-grayscale: ;
  --un-backdrop-hue-rotate: ;
  --un-backdrop-invert: ;
  --un-backdrop-opacity: ;
  --un-backdrop-saturate: ;
  --un-backdrop-sepia:
}
.-translate-1\/2, .-translate-x-1\/2 {  --un-translate-x: -50%
}
.-translate-1\/2, .-translate-y-1\/2 {  --un-translate-y: -50%;
  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))
}
.container, .w-full, [w-full=""] {  width: 100%
}
@media (min-width:380px) {
  .container {
    max-width: 380px
  }
}
.\[counter-increment\:item\] {
  counter-increment: item
}
.\[counter-reset\:item\] {
  counter-reset: item
}
.pointer-events-none {
  pointer-events: none
}
.visible {
  visibility: visible
}
.absolute, .before\:absolute::before {  position: absolute
}
.fixed {
  position: fixed
}
.relative, [relative=""] {  position: relative
}
.sticky {
  position: sticky
}
.static {
  position: static
}
.inset-0 {
  inset: 0
}
.bottom-0 {
  bottom: 0
}
.bottom-5 {
  bottom: 1.25rem
}
.left-\[-2px\] {
  left: -2px
}
.before\:left-0::before, .left-0 {  left: 0
}
.left-1\/2 {
  left: 50%
}
.left-3 {
  left: .75rem
}
.right-1 {
  right: .25rem
}
.right-2 {
  right: .5rem
}
.right-3 {
  right: .75rem
}
.right-4 {
  right: 1rem
}
.top-\[-1px\] {
  top: -1px
}
.top-\[2px\] {
  top: 2px
}
.top-0 {
  top: 0
}
.top-1 {
  top: .25rem
}
.top-1\/2 {
  top: 50%
}
.top-1px {
  top: 1px
}
.top-3 {
  top: .75rem
}
.top-30 {
  top: 7.5rem
}
.top-4 {
  top: 1rem
}
.top-6 {
  top: 1.5rem
}
.top-7px {
  top: 7px
}
.before\:top-27px::before {
  top: 27px
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2
}
/* `\!z-60` 是 Tailwind important variant 產出的 class (`!z-60` literal),
   `\!` 是 CSS escape 表示 class name 內含 `!` 字面字符. 之前是 `.\ !z-60`
   中間多了一個 space, CSS parser 會把它當 `.\<space>` (descendant combinator)
   + `!z-60` 兩個 token, 但 `!` 不是合法 identifier 開頭, 整個 selector
   不 match 任何元素 → utility class 失效. JS 端 `CSS.escape('!z-60')`
   產出的 selector 也是 `\!z-60` (#6 修過), 兩端對齊. */
.\!z-60 {
  z-index: 60 !important
}
.z-1 {
  z-index: 1
}
.z-10 {
  z-index: 10
}
.z-100 {
  z-index: 100
}
.z-1000 {
  z-index: 1000
}
.z-50 {
  z-index: 50
}
.order-1 {
  order: 1
}
.order-2 {
  order: 2
}
.grid {
  display: grid
}
.grid-cols-\[1\.5rem_1fr\] {
  grid-template-columns: 1.5rem 1fr
}
.grid-cols-\[1fr_5rem\] {
  grid-template-columns: 1fr 5rem
}
.grid-cols-\[1fr_auto_1fr\] {
  grid-template-columns: 1fr auto 1fr
}
.grid-cols-2, .grid-cols-\[repeat\(2\, minmax\(0\, 1fr\)\)\] {  grid-template-columns: repeat(2, minmax(0, 1fr))
}
.grid-cols-\[repeat\(auto-fill\, minmax\(200px\, 1fr\)\)\] {  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
}
.grid-cols-\[repeat\(auto-fill\, minmax\(280px\, 1fr\)\)\] {  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr))
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr))
}
[rows ~ ="\33 "] {
  grid-template-rows: repeat(3, minmax(0, 1fr))
}
[rows ~ ="\34 "] {
  grid-template-rows: repeat(4, minmax(0, 1fr))
}
[rows ~ ="\39 92"] {
  grid-template-rows: repeat(992, minmax(0, 1fr))
}
.m-0 {
  margin: 0
}
.m10\.79 {
  margin: 2.6975rem
}
.m102\.421 {
  margin: 25.60525rem
}
.m12\.593 {
  margin: 3.14825rem
}
.m18\.38 {
  margin: 4.595rem
}
.m184 {
  margin: 46rem
}
.m24\.44 {
  margin: 6.11rem
}
.m26\.3 {
  margin: 6.575rem
}
.m30\.5 {
  margin: 7.625rem
}
[ma=""] {
  margin: auto
}
.mx-2 {
  margin-left: .5rem;
  margin-right: .5rem
}
.mx-auto {
  margin-left: auto;
  margin-right: auto
}
.my, .my-4 {  margin-top: 1rem;
  margin-bottom: 1rem
}
.my-0 {
  margin-top: 0;
  margin-bottom: 0
}
.my-1 {
  margin-top: .25rem;
  margin-bottom: .25rem
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem
}
.\ !mb-0 {
  margin-bottom: 0 !important
}
.mb-0 {
  margin-bottom: 0
}
.mb-1 {
  margin-bottom: .25rem
}
.mb-10 {
  margin-bottom: 2.5rem
}
.mb-12 {
  margin-bottom: 3rem
}
.mb-2 {
  margin-bottom: .5rem
}
.mb-3 {
  margin-bottom: .75rem
}
.mb-4 {
  margin-bottom: 1rem
}
.mb-5 {
  margin-bottom: 1.25rem
}
.mb-6 {
  margin-bottom: 1.5rem
}
.mb-8 {
  margin-bottom: 2rem
}
.me, [me=""] {  margin-inline-end: 1rem
}
.me-auto {
  margin-inline-end: auto
}
.ml-2 {
  margin-left: .5rem
}
.ms, .ms-4, [ms=""] {  margin-inline-start: 1rem
}
.ms-2 {
  margin-inline-start: .5rem
}
.mt-0 {
  margin-top: 0
}
.mt-1 {
  margin-top: .25rem
}
.mt-10 {
  margin-top: 2.5rem
}
.mt-2 {
  margin-top: .5rem
}
.mt-3 {
  margin-top: .75rem
}
.mt-4, [mt=""] {  margin-top: 1rem
}
.mt-5 {
  margin-top: 1.25rem
}
[mr=""] {
  margin-right: 1rem
}
.box-border {
  box-sizing: border-box
}
.inline, [inline=""] {  display: inline
}
.block, [block=""] {  display: block
}
.inline-block {
  display: inline-block
}
.hidden {
  display: none
}
.h-\[1px\], .h-px {  height: 1px
}
.h-0 {
  height: 0
}
.before\:h-4::before, .h-4, .h4, [h4=""] {  height: 1rem
}
.h-98px {
  height: 98px
}
.h-auto, [h-auto=""], [ha=""] {  height: auto
}
.h-full {
  height: 100%
}
.h1 {
  height: .25rem
}
.h2, [h-2=""] {  height: .5rem
}
.h3 {
  height: .75rem
}
.h5 {
  height: 1.25rem
}
.h6 {
  height: 1.5rem
}
.max-h-lg {
  max-height: 32rem
}
.max-w-100px, .max-w-\[100px\] {  max-width: 100px
}
.max-w-\[200px\] {
  max-width: 200px
}
.max-w-200px {
  max-width: 200px
}
/* 2026-05-20: 行動版 navbar logo 老闆覺得太小, 長寬放大一倍 (SVG 198x61
   → 396x122), 新增 max-w-400px utility 容納放大後的寬度 (HTML inline
   width="396" 給 hint, max-width 上限 400 留 buffer). 行動版 viewport
   < 400 時靠 .nav-logo .logo-image 的 max-width: 100% safety net 等比縮. */
.max-w-400px {
  max-width: 400px
}
.max-w-150px {
  max-width: 150px
}
.max-w-full {
  max-width: 100%
}
.max-w-lg {
  max-width: 32rem
}
.max-w-xs {
  max-width: 20rem
}
.min-w-70 {
  min-width: 17.5rem
}
.min-w-full {
  min-width: 100%
}
.w-110px {
  width: 110px
}
.before\:w-4::before, .w-4 {  width: 1rem
}
.w-40 {
  width: 10rem
}
.w-auto {
  width: auto
}
.w\[e\] {
  width: e
}
.before\:flex::before, .flex {  display: flex
}
.\ !inline-flex {
  display: inline-flex !important
}
.inline-flex {
  display: inline-flex
}
.flex-1 {
  flex: 1 1 0%
}
.flex-shrink-0 {
  flex-shrink: 0
}
.grow {
  flex-grow: 1
}
.basis-full {
  flex-basis: 100%
}
.flex-row {
  flex-direction: row
}
.flex-col {
  flex-direction: column
}
.flex-wrap {
  flex-wrap: wrap
}
.table, [table=""] {  display: table
}
.border-collapse {
  border-collapse: collapse
}
.-translate-x-1\/2 {
  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))
}
.rotate-90 {
  --un-rotate: 90deg;
  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))
}
.transform, [transform=""] {  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))
}
.cursor-default {
  cursor: default
}
.cursor-pointer {
  cursor: pointer
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed
}
.resize, [resize=""] {  resize: both
}
.list-disc {
  list-style-type: disc
}
.list-inside {
  list-style-position: inside
}
.list-none {
  list-style-type: none
}
.content-start {
  align-content: flex-start
}
.items-start {
  align-items: flex-start
}
.items-end {
  align-items: flex-end
}
.before\:items-center::before, .items-center {  align-items: center
}
.items-baseline {
  align-items: baseline
}
.items-stretch {
  align-items: stretch
}
.self-stretch {
  align-self: stretch
}
.justify-start {
  justify-content: flex-start
}
.justify-end {
  justify-content: flex-end
}
.before\:justify-center::before, .justify-center {  justify-content: center
}
.justify-between {
  justify-content: space-between
}
.justify-evenly {
  justify-content: space-evenly
}
.justify-stretch {
  justify-content: stretch
}
.gap-1 {
  gap: .25rem
}
.gap-2 {
  gap: .5rem
}
.gap-3 {
  gap: .75rem
}
.gap-4 {
  gap: 1rem
}
.gap-5 {
  gap: 1.25rem
}
.gap-x-2 {
  column-gap: .5rem
}
.gap-y-1 {
  row-gap: .25rem
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --un-space-x-reverse: 0;
  margin-left: calc(.25rem * calc(1 - var(--un-space-x-reverse)));
  margin-right: calc(.25rem * var(--un-space-x-reverse))
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --un-space-x-reverse: 0;
  margin-left: calc(.5rem * calc(1 - var(--un-space-x-reverse)));
  margin-right: calc(.5rem * var(--un-space-x-reverse))
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --un-space-y-reverse: 0;
  margin-top: calc(.5rem * calc(1 - var(--un-space-y-reverse)));
  margin-bottom: calc(.5rem * var(--un-space-y-reverse))
}
.overflow-auto {
  overflow: auto
}
.overflow-hidden {
  overflow: hidden
}
.overflow-x-hidden {
  overflow-x: hidden
}
.overflow-y-auto {
  overflow-y: auto
}
.text-truncate, .truncate {  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.break-all {
  word-break: break-all
}
.border-0 {
  border-width: 0
}
[default\:b=""]:default {
  border-width: 1px
}
.border-b {
  border-bottom-width: 1px
}
.border-r-0 {
  border-right-width: 0
}
[border ~ ="r"] {
  border-right-width: 1px
}
.last\:border-b-0:last-child {
  border-bottom-width: 0
}
.border-\#595c56 {
  border-color: rgb(89 92 86 / var(--un-border-opacity))
}
.border-\#707070 {
  border-color: rgb(112 112 112 / var(--un-border-opacity))
}
.border-\#777777 {
  border-color: rgb(119 119 119 / var(--un-border-opacity))
}
.border-\#ba830a {
  border-color: rgb(186 131 10 / var(--un-border-opacity))
}
.border-\#d2d2d2 {
  border-color: rgb(210 210 210 / var(--un-border-opacity))
}
.border-\#d5960c {
  border-color: rgb(213 150 12 / var(--un-border-opacity))
}
.border-\#e8e8e8 {
  border-color: rgb(232 232 232 / var(--un-border-opacity))
}
.border-\#e9be5f {
  border-color: rgb(233 190 95 / var(--un-border-opacity))
}
.border-\#f1e4b4 {
  border-color: rgb(241 228 180 / var(--un-border-opacity))
}
.border-gray-200 {
  border-color: rgb(229 231 235 / var(--un-border-opacity))
}
.border-gray-300 {
  border-color: rgb(209 213 219 / var(--un-border-opacity))
}
.border-gray-500 {
  border-color: rgb(107 114 128 / var(--un-border-opacity))
}
.border-slate-300 {
  border-color: rgb(203 213 225 / var(--un-border-opacity))
}
.border-transparent {
  border-color: transparent
}
.border-white {
  border-color: rgb(255 255 255 / var(--un-border-opacity))
}
.hover\:border-dark:hover {
  border-color: rgb(34 34 34 / var(--un-border-opacity))
}
.before\:border-\#ba830a::before {
  --un-border-opacity: 1;
  border-color: rgb(186 131 10 / var(--un-border-opacity))
}
.border-b-\#d2d2d2 {
  --un-border-bottom-opacity: var(--un-border-opacity);
  border-bottom-color: rgb(210 210 210 / var(--un-border-bottom-opacity))
}
.rd, .rounded {  border-radius: .25rem
}
.rounded-3xl {
  border-radius: 1.5rem
}
.rounded-lg {
  border-radius: .5rem
}
.rounded-md {
  border-radius: .375rem
}
.rounded-none {
  border-radius: 0
}
.rounded-xl {
  border-radius: .75rem
}
.before\:rounded-full::before {
  border-radius: 9999px
}
.rounded-t {
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem
}
.border-none {
  border-style: none
}
.before\:border-solid::before, .border-solid {  border-style: solid
}
.border-b-solid {
  border-bottom-style: solid
}
.border-r-solid {
  border-right-style: solid
}
.bg-\#595c56 {
  --un-bg-opacity: 1;
  background-color: rgb(89 92 86 / var(--un-bg-opacity))
}
.bg-\#707070 {
  --un-bg-opacity: 1;
  background-color: rgb(112 112 112 / var(--un-bg-opacity))
}
.bg-\#ba830a {
  --un-bg-opacity: 1;
  background-color: rgb(186 131 10 / var(--un-bg-opacity))
}
.bg-\#e0a949 {
  --un-bg-opacity: 1;
  background-color: rgb(224 169 73 / var(--un-bg-opacity))
}
.bg-\#e9be5f {
  --un-bg-opacity: 1;
  background-color: rgb(233 190 95 / var(--un-bg-opacity))
}
.bg-\#ededeb {
  --un-bg-opacity: 1;
  background-color: rgb(237 237 235 / var(--un-bg-opacity))
}
.bg-\#f1e4b4, .hover\:bg-\#f1e4b4:hover {  --un-bg-opacity: 1;
  background-color: rgb(241 228 180 / var(--un-bg-opacity))
}
.bg-\#f4f4f4 {
  --un-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--un-bg-opacity))
}
.bg-\#f6f7f9 {
  --un-bg-opacity: 1;
  background-color: rgb(246 247 249 / var(--un-bg-opacity))
}
.bg-\#fdfaeb, .hover\:bg-\#fdfaeb:hover {  --un-bg-opacity: 1;
  background-color: rgb(253 250 235 / var(--un-bg-opacity))
}
.bg-\#fff6d3 {
  --un-bg-opacity: 1;
  background-color: rgb(255 246 211 / var(--un-bg-opacity))
}
.bg-gray-100 {
  --un-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--un-bg-opacity))
}
.bg-gray-200, .disabled\:bg-gray-200:disabled, .hover\:bg-gray-200:hover {  --un-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--un-bg-opacity))
}
.bg-gray-900 {
  --un-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--un-bg-opacity))
}
.bg-neutral-100 {
  --un-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--un-bg-opacity))
}
.bg-slate-100 {
  --un-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--un-bg-opacity))
}
.bg-transparent {
  background-color: transparent
}
.before\:bg-white::before, .bg-white {  --un-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--un-bg-opacity))
}
[stroke-width ~ ="\31 "] {
  stroke-width: 1px
}
[stroke-width ~ ="\31 \.5"] {
  stroke-width: 1.5px
}
[stroke-width ~ ="\32 "] {
  stroke-width: 2px
}
[stroke-width ~ ="\34 8"] {
  stroke-width: 48px
}
[stroke ~ ="\#06c755"] {
  --un-stroke-opacity: 1;
  stroke: rgb(6 199 85 / var(--un-stroke-opacity))
}
[stroke ~ ="\#3d5a96"] {
  --un-stroke-opacity: 1;
  stroke: rgb(61 90 150 / var(--un-stroke-opacity))
}
[stroke ~ =none] {
  stroke: none
}
.p-\[0\.125rem_0\.25rem\] {
  padding: .125rem .25rem
}
.p-\[1rem_1\.5rem\] {
  padding: 1rem 1.5rem
}
.p-\[3rem_1rem_1rem_1rem\] {
  padding: 3rem 1rem 1rem
}
/* 2026-05-20: 行動版 navbar logo 上下 padding 老闆覺得太多, 多次縮減:
   - 原始 3rem 1rem 1rem 1rem (上 48px / 下 16px)
   - 第 1 次縮上方一半 → 1.5rem 1rem 1rem 1rem (上 24px / 下 16px)
   - 第 2 次再縮上方一半 → 0.75rem 1rem 1rem 1rem (上 12px / 下 16px)
   - 第 3 次上下都再縮一半 → 0.375rem 1rem 0.5rem 1rem (上 6px / 下 8px)
   - 第 4 次上下都再縮一半 → 0.1875rem 1rem 0.25rem 1rem (上 3px / 下 4px)
   保留前幾代 utility 給未來其他元件可能用到。左右一律 1rem 不變。與
   navbar 桌面版 lg:p-[...] 規則互不影響 (桌機走各 navbar 自己的 lg:p-[...])。*/
.p-\[1\.5rem_1rem_1rem_1rem\] {
  padding: 1.5rem 1rem 1rem
}
.p-\[0\.75rem_1rem_1rem_1rem\] {
  padding: 0.75rem 1rem 1rem
}
.p-\[0\.375rem_1rem_0\.5rem_1rem\] {
  padding: 0.375rem 1rem 0.5rem
}
.p-\[0\.1875rem_1rem_0\.25rem_1rem\] {
  padding: 0.1875rem 1rem 0.25rem
}
.p-0 {
  padding: 0
}
.p-1 {
  padding: .25rem
}
.p-2 {
  padding: .5rem
}
.p-3 {
  padding: .75rem
}
.p-4, .p4 {  padding: 1rem
}
.p-6 {
  padding: 1.5rem
}
[pa=""] {
  padding: auto
}
.px, .px-4, [px=""] {  padding-left: 1rem;
  padding-right: 1rem
}
.px-0, [px-0=""] {  padding-left: 0;
  padding-right: 0
}
.px-1 {
  padding-left: .25rem;
  padding-right: .25rem
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem
}
.px-2 {
  padding-left: .5rem;
  padding-right: .5rem
}
.px-3 {
  padding-left: .75rem;
  padding-right: .75rem
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}
.py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem
}
.py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem
}
.py-3 {
  padding-top: .75rem;
  padding-bottom: .75rem
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}
[\ !px=""] {
  padding-left: 1rem !important;
  padding-right: 1rem !important
}
.pb-1 {
  padding-bottom: .25rem
}
.pb-2 {
  padding-bottom: .5rem
}
.pb-3 {
  padding-bottom: .75rem
}
.pb-4 {
  padding-bottom: 1rem
}
.pb-4rem {
  padding-bottom: 4rem
}
.pb-5 {
  padding-bottom: 1.25rem
}
.pb-6 {
  padding-bottom: 1.5rem
}
.pb-8 {
  padding-bottom: 2rem
}
.pe-3 {
  padding-inline-end: 0.75rem
}
.pl-0 {
  padding-left: 0
}
.ps-0 {
  padding-inline-start: 0
}
.ps-1 {
  padding-inline-start: 0.25rem
}
.ps-10 {
  padding-inline-start: 2.5rem
}
.ps-2 {
  padding-inline-start: 0.5rem
}
.ps-7 {
  padding-inline-start: 1.75rem
}
.pt, .pt-4, [pt=""] {  padding-top: 1rem
}
.pt-1 {
  padding-top: .25rem
}
.pt-10 {
  padding-top: 2.5rem
}
.pt-2 {
  padding-top: .5rem
}
.pt-8 {
  padding-top: 2rem
}
[\ !pt=""] {
  padding-top: 1rem !important
}
[pe=""] {
  padding-inline-end: 1rem
}
[pr=""] {
  padding-right: 1rem
}
.text-center {
  text-align: center
}
.text-left {
  text-align: left
}
.text-right {
  text-align: right
}
.text-start {
  text-align: start
}
.indent, [indent=""] {  text-indent: 1.5rem
}
.text-wrap {
  text-wrap: wrap
}
.text-nowrap {
  text-wrap: nowrap
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem
}
.text-sm {
  font-size: .875rem;
  line-height: 1.25rem
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem
}
.before\:text-xs::before {
  font-size: .75rem;
  line-height: 1rem
}
.text-\[var\(--color-dark-yellow\)\] {
  color: var(--color-dark-yellow)
}
.text-\#595c56 {
  color: rgb(89 92 86 / var(--un-text-opacity))
}
.text-\#842423 {
  color: rgb(132 36 35 / var(--un-text-opacity))
}
.before\:text-\#ba830a::before, .color-\#ba830a, .text-\#ba830a {  --un-text-opacity: 1;
  color: rgb(186 131 10 / var(--un-text-opacity))
}
.color-\#d5960c, .text-\#d5960c {  color: rgb(213 150 12 / var(--un-text-opacity))
}
.text-black {
  color: rgb(0 0 0 / var(--un-text-opacity))
}
.text-blue-600 {
  color: rgb(37 99 235 / var(--un-text-opacity))
}
.text-dark {
  color: rgb(34 34 34 / var(--un-text-opacity))
}
.text-gray-400 {
  color: rgb(156 163 175 / var(--un-text-opacity))
}
.text-gray-500 {
  color: rgb(107 114 128 / var(--un-text-opacity))
}
.text-gray-700 {
  color: rgb(55 65 81 / var(--un-text-opacity))
}
.text-gray-800 {
  color: rgb(31 41 55 / var(--un-text-opacity))
}
.text-gray-900 {
  color: rgb(17 24 39 / var(--un-text-opacity))
}
.text-indigo-600 {
  color: rgb(79 70 229 / var(--un-text-opacity))
}
.text-red-600 {
  color: rgb(220 38 38 / var(--un-text-opacity))
}
.color-white, .text-white {  color: rgb(255 255 255 / var(--un-text-opacity))
}
.hover\:text-indigo-500:hover {
  color: rgb(99 102 241 / var(--un-text-opacity))
}
.color-\#575656 {
  color: rgb(87 86 86 / var(--un-text-opacity))
}
.before\:font-bold::before, .font-bold {  font-weight: 700
}
.font-medium {
  font-weight: 500
}
.font-semibold {
  font-weight: 600
}
.leading-6 {
  line-height: 1.5rem
}
.leading-relaxed {
  line-height: 1.625
}
.tracking-normal {
  letter-spacing: 0
}
.tracking-wide {
  letter-spacing: .025em
}
.underline {
  text-decoration-line: underline
}
.decoration-none {
  text-decoration: none
}
.tab {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4
}
.opacity-0 {
  opacity: 0
}
.opacity-50 {
  opacity: .5
}
.shadow-lg {
  --un-shadow: var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)), var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1))
}
.shadow-none {
  --un-shadow: 0 0 var(--un-shadow-color, rgb(0 0 0 / 0))
}
.focus\:outline-none:focus, .outline-none {  outline: transparent solid 2px;
  outline-offset: 2px
}
.focus\:ring-indigo-500:focus {
  --un-ring-opacity: 1;
  --un-ring-color: rgb(99 102 241 / var(--un-ring-opacity))
}
.blur, [blur=""] {  --un-blur: blur(8px);
  filter: var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)
}
.transition-all {
  transition-property: all;
  transition-duration: 150ms
}
.before\:content-\[counter\(item\)\]::before {
  content: counter(item)
}
@media (min-width:576px) {
  .container {
    max-width: 576px
  }
  .sm\:mb-0 {
    margin-bottom: 0
  }
  .sm\:mb-3 {
    margin-bottom: .75rem
  }
  .sm\:max-w-full {
    max-width: 100%
  }
  .sm\:w-auto {
    width: auto
  }
  .sm\:flex {
    display: flex
  }
  .sm\:flex-row {
    flex-direction: row
  }
  .sm\:flex-wrap {
    flex-wrap: wrap
  }
  .sm\:justify-start {
    justify-content: flex-start
  }
  .sm\:justify-between {
    justify-content: space-between
  }
  .sm\:gap-10 {
    gap: 2.5rem
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }
  .sm\:pe-2 {
    padding-inline-end: 0.5rem
  }
  .sm\:pe-6 {
    padding-inline-end: 1.5rem
  }
  .sm\:ps-4 {
    padding-inline-start: 1rem
  }
  .sm\:ps-8 {
    padding-inline-start: 2rem
  }
}
@media (min-width:768px) {
  .container {
    max-width: 768px
  }
  .md\:grid-cols-\[7rem_auto_1fr\] {
    grid-template-columns: 7rem auto 1fr
  }
  .md\:mx-0 {
    margin-left: 0;
    margin-right: 0
  }
  .md\:mb-0 {
    margin-bottom: 0
  }
  .md\:flex-row {
    flex-direction: row
  }
  .md\:items-center {
    align-items: center
  }
  .md\:justify-start {
    justify-content: flex-start
  }
  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }
  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem
  }
}
@media (min-width:992px) {
  .container {
    max-width: 992px
  }
  .lg\:absolute {
    position: absolute
  }
  .lg\:relative {
    position: relative
  }
  .lg\:bottom-\[auto\] {
    bottom: auto
  }
  .lg\:bottom-2 {
    bottom: .5rem
  }
  .lg\:right-2 {
    right: .5rem
  }
  .lg\:top-0 {
    top: 0
  }
  .lg\:order-1 {
    order: 1
  }
  .lg\:order-2 {
    order: 2
  }
  .lg\:grid-cols-\[276px_auto\] {
    grid-template-columns: 276px auto
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto
  }
  .lg\:mb-0 {
    margin-bottom: 0
  }
  .lg\:mb-3 {
    margin-bottom: .75rem
  }
  .lg\:mb-4 {
    margin-bottom: 1rem
  }
  .lg\:me-auto {
    margin-inline-end: auto
  }
  .lg\:ms-4 {
    margin-inline-start: 1rem
  }
  .lg\:block {
    display: block
  }
  .lg\:inline-block {
    display: inline-block
  }
  .lg\:hidden {
    display: none
  }
  .lg\:h-auto {
    height: auto
  }
  .lg\:h-full, [lg\:h-full=""] {    height: 100%
  }
  .lg\:max-w-lg {
    max-width: 32rem
  }
  .lg\:flex {
    display: flex
  }
  .lg\:flex-row {
    flex-direction: row
  }
  .lg\:items-start {
    align-items: flex-start
  }
  .lg\:items-center {
    align-items: center
  }
  .lg\:justify-start {
    justify-content: flex-start
  }
  .lg\:justify-end {
    justify-content: flex-end
  }
  .lg\:gap-1 {
    gap: .25rem
  }
  .lg\:border, .lg\:border-1 {    border-width: 1px
  }
  .lg\:border-0 {
    border-width: 0
  }
  .lg\:border-r {
    border-right-width: 1px
  }
  .lg\:border-\#595c56 {
    --un-border-opacity: 1;
    border-color: rgb(89 92 86 / var(--un-border-opacity))
  }
  .lg\:border-\#d5960c {
    --un-border-opacity: 1;
    border-color: rgb(213 150 12 / var(--un-border-opacity))
  }
  .lg\:rounded-lg {
    border-radius: .5rem
  }
  .lg\:rounded-md {
    border-radius: .375rem
  }
  .lg\:rounded-none {
    border-radius: 0
  }
  .lg\:border-solid {
    border-style: solid
  }
  .lg\:bg-\#e9be5f {
    --un-bg-opacity: 1;
    background-color: rgb(233 190 95 / var(--un-bg-opacity))
  }
  .lg\:bg-\#fff6d3 {
    --un-bg-opacity: 1;
    background-color: rgb(255 246 211 / var(--un-bg-opacity))
  }
  .lg\:bg-transparent {
    background-color: transparent
  }
  .lg\:bg-white {
    --un-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--un-bg-opacity))
  }
  .lg\:p-\[0rem_0rem_\.25rem_0rem\] {
    padding: 0 0 .25rem
  }
  .lg\:p-\[1\.25rem_0rem_\.25rem_0rem\] {
    padding: 1.25rem 0 .25rem
  }
  .lg\:p-\[1\.25rem_1rem\] {
    padding: 1.25rem 1rem
  }
  .lg\:p-0 {
    padding: 0
  }
  .lg\:p-3 {
    padding: .75rem
  }
  .lg\:p-4 {
    padding: 1rem
  }
  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }
  .lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
  }
  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
  }
  .lg\:pe-4 {
    padding-inline-end: 1rem
  }
  .lg\:ps-10 {
    padding-inline-start: 2.5rem
  }
  .lg\:pt-2 {
    padding-top: .5rem
  }
  .lg\:text-left {
    text-align: left
  }
  .lg\:text-nowrap {
    text-wrap: nowrap
  }
  .lg\:text-\#ba830a {
    --un-text-opacity: 1;
    color: rgb(186 131 10 / var(--un-text-opacity))
  }
  .lg\:shadow-md {
    --un-shadow: var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)), var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)
  }
}
@media (min-width:1200px) {
  .container {
    max-width: 1200px
  }
  .xl\:grid-cols-\[18rem_1fr\] {
    grid-template-columns: 18rem 1fr
  }
  .xl\:grid-cols-\[280px_auto\] {
    grid-template-columns: 280px auto
  }
  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .xl\:mb-5 {
    margin-bottom: 1.25rem
  }
  .xl\:block {
    display: block
  }
  .xl\:hidden {
    display: none
  }
  .xl\:basis-auto {
    flex-basis: auto
  }
  .xl\:border-r {
    border-right-width: 1px
  }
  .xl\:rounded-none {
    border-radius: 0
  }
  .xl\:bg-transparent {
    background-color: transparent
  }
  .xl\:bg-white {
    --un-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--un-bg-opacity))
  }
  .xl\:p-0 {
    padding: 0
  }
  .xl\:p-4 {
    padding: 1rem
  }
  .xl\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem
  }
  .xl\:px-2 {
    padding-left: .5rem;
    padding-right: .5rem
  }
}
@media (min-width:1440px) {
  .container {
    max-width: 1440px
  }
  .xxl\:grid-cols-\[24rem_1fr\] {
    grid-template-columns: 24rem 1fr
  }
  .xxl\:grid-cols-\[376px_auto\] {
    grid-template-columns: 376px auto
  }
  .xxl\:grid-cols-\[45rem_1fr\] {
    grid-template-columns: 45rem 1fr
  }
  .xxl\:flex {
    display: flex
  }
  .xxl\:basis-auto {
    flex-basis: auto
  }
}