.neu-bg-light {
  background: #e0e5ec;
}

.neumorphic-inset {
    background: #e0e5ec;
    /* border-radius: 12px; */
    box-shadow: inset 5px 5px 10px #babecc,
                inset -5px -5px 10px #ffffff;
    padding: 12px 20px;
    border: none;
    font-size: 16px;
    color: #2F3542;
  }

  .neumorphic-raised {
    background: #e0e5ec;
    /* border-radius: 12px; */
    box-shadow: 5px 5px 10px #babecc,
                -5px -5px 10px #ffffff;
  }

  .neumorphic-raised-section {
    background: #e0e5ec;
    border-radius: 25px;
    box-shadow: 2px 2px 4px #babecc,
                -2px -2px 4px #ffffff;
  }

  .neumorphic-raised-btn {
    background: #e0e5ec;
    border-radius: 9999px;
    box-shadow: 5px 5px 10px #babecc,
                -5px -5px 10px #ffffff;
    color: #2F3542;
    transition: all 0.5s ease-in-out;
  }

  .neumorphic-raised-btn:hover {
    background: #babecc;
    color: #e0e5ec;
  }

  .neumorphic-title-light {
    color: #babecc;
  }

  .neumorphic-title-dark {
    color: #2F3542;
  }

  .montserrat-100 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
  }

  .montserrat-200 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
  }

  .montserrat-300 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  } 

  .montserrat-400 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }         

  .montserrat-500 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }     

  .montserrat-500-italic {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: italic;
  }

  .montserrat-600 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }

  .montserrat-700 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
  }

  .montserrat-700-italic {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700; 
    font-style: italic;
  }

  .montserrat-800 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
  }

  .montserrat-900 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
  }

  .neumorphic-text {
    font-size: 10em; /* 或你想要的大小 */
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.05em;
    color: #e0e5ec; /* 與背景同色 */
    text-transform: uppercase;
    filter: blur(0.5px);
    text-shadow:
      4px 4px 12px #babecc,    /* 右下深色陰影 */
     -4px -4px 12px #ffffff;   /* 左上亮色高光 */
  }

  .neumorphic-h1 {
    font-size: 2.2em; /* 手機版預設 */
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.05em;
    color: #e0e5ec;
    /* color: oklch(77.7% 0.022 261.325); */
    text-transform: uppercase;
    filter: blur(0.5px);
    text-shadow:
      1px 1px 2.5px #babecc,    /* 右下深色陰影 */
     -1px -1px 2.5px #ffffff;   /* 左上亮色高光 */
  }

/* 桌機版（sm 以上） */
@media (min-width: 640px) {
  .neumorphic-h1 {
    font-size: 4em;
    text-shadow:
      2px 2px 4px #babecc,    /* 右下深色陰影 */
     -2px -2px 4px #ffffff;   /* 左上亮色高光 */
  }
}

.neumorphic-input-inset {
  background: #e0e5ec;
  border-radius: 9999px;
  box-shadow: inset 2px 2px 4px #babecc,
              inset -2px -2px 4px #ffffff;
  padding: 6px 8px;
  border: none;
}

.neumorphic-select-btn-raised {
  background: #e0e5ec;
  border-radius: 9999px;
  box-shadow: 2px 2px 4px #babecc,
              -2px -2px 4px #ffffff;
  color: #2F3542;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.neumorphic-select-btn-raised:hover {
  background: #cad1d9;
  color: #e0e5ec;
}

#date-menu {
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(-10px);
}

.neumorphic-card-inset {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow: inset 2px 2px 4px #babecc,
              inset -2px -2px 4px #ffffff;
  padding: 8px 8px;
  border: none;
}

.custom-th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
}