/* Tailwind CSS v3.4.1 | subset for component */
/* Scoped utilities for modal only (no global reset) */
#loginModal .fixed{position:fixed}
#loginModal .inset-0{inset:0px}
#loginModal .absolute{position:absolute}
#loginModal .relative{position:relative}
#loginModal .top-4{top:16px}
#loginModal .right-4{right:16px}
#loginModal .z-50{z-index:50}
#loginModal .mt-1{margin-top:4px}
#loginModal .max-w-md{max-width:512px}
#loginModal .flex-shrink-0{flex-shrink:0}
#loginModal .w-full{width:100%}
#loginModal .w-8{width:32px}
#loginModal .h-8{height:32px}
#loginModal .transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
#loginModal .items-center{align-items:center}
#loginModal .justify-center{justify-content:center}
#loginModal .gap-4{gap:16px}
#loginModal .space-y-4> :not([hidden])~ :not([hidden]){margin-top:16px}
#loginModal .overflow-hidden{overflow:hidden}
#loginModal .rounded-lg{border-radius:8px}
#loginModal .rounded-xl{border-radius:12px}
#loginModal .border{border-width:1px}
#loginModal .border-b{border-bottom-width:1px}
#loginModal .border-t{border-top-width:1px}
#loginModal .border-gray-200{border-color:rgb(229 231 235 / 1)}
#loginModal .border-gray-300{border-color:rgb(209 213 219 / 1)}
#loginModal .bg-blue-600{background-color:rgb(37 99 235 / 1)}
#loginModal .bg-gray-50{background-color:rgb(249 250 251 / 1)}
#loginModal .bg-gray-900\/60{background-color:rgb(17 24 39 / 0.6)}
#loginModal .bg-white{background-color:rgb(255 255 255 / 1)}
#loginModal .p-4{padding:16px}
#loginModal .p-5{padding:20px}
#loginModal .p-6{padding:24px}
#loginModal .p-8{padding:32px}
#loginModal .px-6{padding-left:24px;padding-right:24px}
#loginModal .py-3\.5{padding-top:14px;padding-bottom:14px}
#loginModal .text-center{text-align:center}
#loginModal .text-right{text-align:right}
#loginModal .text-2xl{font-size:24px;line-height:32px}
#loginModal .text-base{font-size:16px;line-height:24px}
#loginModal .text-sm{font-size:14px;line-height:20px}
#loginModal .font-bold{font-weight:700}
#loginModal .font-semibold{font-weight:600}
#loginModal .text-blue-600{color:rgb(37 99 235 / 1)}
#loginModal .text-gray-400{color:rgb(156 163 175 / 1)}
#loginModal .text-gray-500{color:rgb(107 114 128 / 1)}
#loginModal .text-gray-600{color:rgb(75 85 99 / 1)}
#loginModal .text-gray-700{color:rgb(55 65 81 / 1)}
#loginModal .text-gray-800{color:rgb(31 41 55 / 1)}
#loginModal .text-white{color:rgb(255 255 255 / 1)}
#loginModal .shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25)}
#loginModal .shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}
#loginModal .transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
#loginModal .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
#loginModal .duration-200{transition-duration:200ms}
#loginModal .duration-300{transition-duration:300ms}
#loginModal .flex{display:flex}
#loginModal .inline-flex{display:inline-flex}
#loginModal .hidden{display:none}
#loginModal .block{display:block}
#loginModal .hover\:-translate-y-0\.5:hover{transform:translateY(-2px)}
#loginModal .hover\:bg-blue-700:hover{background-color:rgb(29 78 216 / 1)}
#loginModal .hover\:bg-gray-50:hover{background-color:rgb(249 250 251 / 1)}
#loginModal .hover\:text-gray-600:hover{color:rgb(75 85 99 / 1)}
#loginModal .hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}

/* Modal transition */
#loginModal { transition: opacity 0.3s ease, transform 0.3s ease; }
#loginModal.hidden { opacity: 0; transform: scale(0.95); pointer-events: none; }

/* Root overlay & layout (scoped) */
#loginModal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px; /* p-4 */
  z-index: 50; /* z-50 */
  background-color: rgb(17 24 39 / 0.6); /* bg-gray-900/60 */
}
#loginModal.hidden { display: none; }

#openModalBtn { background-color: #fff; }
#openModalBtn:hover { background-color: #f3f4f6; } /* optional hover */

#loginModal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px; /* p-4 */
    z-index: 50;   /* z-50 */
    background-color: rgb(17 24 39 / 0.6); /* bg-gray-900/60 */
  }
  #loginModal.hidden { display: none; }