* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 讓寬高計算包含內邊距 */
}

:root {
    --input-height: 32px; /* 在這裡統一修改高度 */
}

input {
    height: var(--input-height);
}

    input[type="text"],
    input[type="password"],
    input[type="email"] {
        outline: none;
        border-radius: 8px;
        padding: 4px;
        font-size: 16px;
        box-sizing: border-box;
        font-family: 'Helvetica', 'Noto Sans TC', 'Microsoft JhengHei';
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        background-color: #FFFEFE;
        border: 1px solid #d1d1d1;
        margin: 8px 0px;
    }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"] :focus {
            /* 1. 邊框顏色稍微提亮，增加在深色底上的對比 */
            border-color: #d184d1 !important;
            /* 2. 在深色背景下，我們需要更高的不透明度與更廣的擴散 */
            /* 第一層：緊貼邊框的強光 (讓邊緣清晰)
       第二層：中等範圍的紫色暈光 (增加存在感)
       第三層：大範圍的深紫霧光 (營造氛圍) */
            box-shadow: 0 0 5px rgba(186, 99, 186, 0.8), 0 0 15px rgba(186, 99, 186, 0.4), 0 0 30px rgba(186, 99, 186, 0.2);
            /* 3. 背景色改為微深色，減少與外框的亮度反差，這會讓發光看起來更「顯眼」 */
            background-color: #2a2828;
            color: #ffffff; /* 確保在深色框內文字是白的 */
            /* 4. 動畫：讓光暈有「擴張再收縮」的感覺 */
            animation: neon-pulse 2s infinite ease-in-out;
        }

.btn {
    text-decoration: none; /* 移除底線 */
    color: inherit; /* 繼承父元素的文字顏色，使其不呈現預設藍色 */
    cursor: pointer; /* 確保滑鼠移上去時仍顯示手指符號 */
    width: 100%;
    /* 1. 強制同步高度 */
    height: var(--input-height);
    /* 2. 移除會撐開高度的上下 padding，只留左右 */
    padding: 0 24px;
    /* 3. 使用 Flex 確保文字在 32px 內完美垂直置中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 以下維持你的美化設定 */
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #ba63ba, #9a4e9a);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(186, 99, 186, 0.4);
    outline: none;
    box-sizing: border-box; /* 確保高度計算包含邊框 */
    margin: 8px 0px;
}

    .btn:hover {
        background: linear-gradient(135deg, #c576c5, #ba63ba);
        transform: translateY(-2px); /* 向上微浮 */
        box-shadow: 0 6px 20px rgba(186, 99, 186, 0.6);
    }

@keyframes neon-pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(186, 99, 186, 0.6), 0 0 10px rgba(186, 99, 186, 0.3), 0 0 20px rgba(186, 99, 186, 0.1);
    }

    50% {
        box-shadow: 0 0 8px rgba(186, 99, 186, 1), 0 0 25px rgba(186, 99, 186, 0.6), 0 0 50px rgba(186, 99, 186, 0.3);
    }
}