html {
    overflow-x: clip;
}
body {
    font-family: "Noto Sans TC", system-ui, sans-serif;
    overflow-x: clip;
}
.mobile-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease-out,
        visibility 0.25s;
}
.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ============================================================
       Captcha placeholder：真正驗證碼會由後端產生 base64 / image URL，
       此處只是視覺位置佔位，工程師接圖時把 .captcha-img 內容換成
       <img src="..." alt="驗證碼" class="h-full w-full object-cover" />
       ============================================================ */
.captcha-img {
    background-image:
        linear-gradient(
            135deg,
            rgba(0, 22, 162, 0.05) 0%,
            transparent 40%,
            rgba(212, 166, 74, 0.06) 100%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 6px,
            rgba(0, 22, 162, 0.04) 6px 7px
        );
}
.captcha-img .captcha-text {
    font-family: "Courier New", ui-monospace, monospace;
    letter-spacing: 0.35em;
    transform: skewX(-8deg);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    user-select: none;
}

/* Refresh icon rotation animation when triggered */
.captcha-refresh-icon {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.captcha-refresh-btn.is-spinning .captcha-refresh-icon {
    transform: rotate(360deg);
}

/* ============================================================
       Eye toggle 在 input 為空時自動隱藏：
       - 沒內容可以切換可見性，按鈕視覺雜訊
       - 用 visibility:hidden 保留空間，使用者開始打字時 layout 不會跳動
       - 仰賴 :placeholder-shown，所以每個 input 都要有 placeholder 屬性
       ============================================================ */
input:placeholder-shown + button[data-toggle-visibility] {
    visibility: hidden;
}

/* ============================================================
       移除瀏覽器 autofill 的填色（Chrome / Safari / Edge 預設的黃 / 藍底）：
       原理：autofill 是 user-agent style 用 background-color 設黃 / 藍底；
       無法直接覆寫 background，但可以用超大 inset box-shadow 蓋過去；
       同時鎖定 text-fill-color 確保文字色不被瀏覽器接管；
       transition 設極長秒數讓 autofill 動畫實際上看不到（hack but works）
       ============================================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827;
    transition:
        background-color 600000s ease-in-out 0s,
        color 600000s ease-in-out 0s;
}