/* ========== 外層容器 ========== */
.form-wrapper {
    background: var(--brand-bg);
    min-height: 100vh;
    font-family: 'Noto Sans TC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px;
    color: var(--brand-text);
}

.form-wrapper:not(.login-page) {
    padding-top: 72px;
}

.app-form {
    display: flex;
    flex-wrap: wrap;
    background: transparent;
    min-height: 100vh;
    justify-content: center;
}

.app-form-content {
    width: 100%;
    max-width: 720px;
    background: var(--brand-white);
    display: flex;
    align-items: center;
    padding: 36px 12px;
}

.report-card {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* ========== Logo 與標題 ========== */
.brand-logo-area {
    text-align: center;
    margin-bottom: 19.2px;
}

.brand-logo-area img {
    height: 72px;
}

.brand-logo-area .subtitle {
    color: var(--brand-text-muted);
    font-size: 13.2px;
    margin-top: 7.2px;
    margin-bottom: 0;
}

.claim-header {
    text-align: center;
    margin-bottom: 21.6px;
}

.claim-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 4.8px;
    padding: 6px 13.2px;
    border-radius: 999px;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10.8px;
}

.claim-header h1 {
    color: var(--brand-text);
    font-size: 26.4px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 6px 0;
}

.claim-header p {
    color: var(--brand-text-muted);
    font-size: 13.8px;
    line-height: 1.75;
    margin: 0;
}

/* ========== 已測驗提示 ========== */
.inline-login-tip {
    text-align: center;
    color: var(--brand-text-secondary);
    font-size: 12px;
    margin-bottom: 14.4px;
}

.inline-tab-switch {
    border: 0;
    background: transparent;
    color: var(--brand-primary);
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    font-size: 12px;
}

.inline-tab-switch:hover {
    color: var(--brand-primary-dark);
    text-decoration: underline;
}

/* ========== Input 表單元件 ========== */
.form-group {
    margin-top: 13.2px;
}

.form-group .input-label {
    display: block;
    font-size: 11.4px;
    font-weight: 700;
    color: var(--brand-text-secondary);
    margin-bottom: 5.4px;
}

.required-mark {
    color: var(--brand-error);
    margin-left: 2px;
}

.form-control {
    border: 1.5px solid var(--brand-border) !important;
    border-radius: 10px !important;
    background-color: var(--brand-white) !important;
    color: var(--brand-text) !important;
    padding: 8.4px 12px !important;
    font-size: 12.6px !important;
    height: 52px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px var(--brand-primary-glow) !important;
    background-color: var(--brand-white) !important;
    color: var(--brand-text) !important;
}

.form-control::placeholder {
    color: var(--brand-text-muted) !important;
    font-size: 11.4px !important;
    font-weight: 400;
}

.field-hint {
    color: var(--brand-text-muted);
    font-size: 10.56px;
    line-height: 1.5;
    margin-top: 4.8px;
}

.form-control:autofill,
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--brand-text) !important;
    box-shadow: 0 0 0 1000px var(--brand-white) inset !important;
}

#email.format_error,
#phone.format_error,
#line_phone.format_error,
#line_email.format_error,
#referral_code.format_error {
    border-color: var(--brand-error) !important;
}
#referral_code.format_success {
    border-color: #218838 !important;
}
.referral-code-feedback {
    min-height: 1.4em;
    margin-top: 4.8px;
    font-size: 10.56px;
    line-height: 1.4;
}
.referral-code-feedback.is-success { color: #218838; }
.referral-code-feedback.is-error { color: var(--brand-error); }
.referral-code-feedback.is-checking { color: var(--brand-text-muted); }

/* ========== 圖形驗證碼（保留，未來如有用到） ========== */
.captcha-block {
    display: flex;
    align-items: center;
    gap: 7.2px;
}

.captcha-img {
    height: 52px;
    border-radius: 10px;
    border: 1.5px solid var(--brand-border);
    background: var(--brand-bg-soft);
}

.create-captcha {
    color: var(--brand-text-muted);
    font-size: 14.4px;
    cursor: pointer;
    text-decoration: none !important;
    transition: color 0.2s;
}

.create-captcha:hover {
    color: var(--brand-primary);
}

.forgot-password {
    font-size: 11.04px;
    color: var(--brand-primary) !important;
    text-decoration: none;
    font-weight: 500;
}

.forgot-password:hover {
    color: var(--brand-primary-dark) !important;
    text-decoration: underline;
}

/* ========== 按鈕：主要 ========== */
.main-btn {
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    height: 54px;
    padding: 0 24px;
    font-size: 13.8px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 14px rgba(71, 85, 99, 0.2);
    letter-spacing: 1px;
}

.main-btn:hover {
    background: var(--brand-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(25, 25, 25, 0.3);
}

.main-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(71, 85, 99, 0.2);
}

/* ========== 按鈕：次要 ========== */
.secondary-btn {
    background: var(--brand-white);
    color: var(--brand-primary);
    border: 1.5px solid var(--brand-primary);
    border-radius: 10px;
    height: 54px;
    padding: 0 24px;
    font-size: 13.2px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: all 0.25s;
}

.secondary-btn:hover {
    background: var(--brand-primary);
    color: #fff;
}

/* ========== 按鈕：LINE ========== */
.line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    background-color: transparent;
    color: var(--line-green) !important;
    border: 1px solid var(--line-green);
    border-radius: 10px;
    font-size: 13.2px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 1px;
}
.line-btn:hover {
    background-color: var(--line-green);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(6, 199, 85, 0.28);
}
.line-btn svg {
    width: 24px;
    height: 24px;
}

/* ========== 分隔線 ========== */
.divider {
    display: flex;
    align-items: center;
    margin: 16.8px 0;
    color: var(--brand-text-muted);
    font-size: 11.4px;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--brand-border-light);
}

.divider span {
    padding: 0 12px;
}

/* ========== 手機號碼 +886 ========== */
.phone-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.phone-prefix {
    flex: 0 0 auto;
    padding: 0 12px;
    height: 52px;
    line-height: 50px;
    border: 1.5px solid var(--brand-border);
    border-radius: 10px;
    color: var(--brand-text);
    background-color: var(--brand-bg-soft);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* ========== SMS 取得驗證碼 ========== */
.sms-row {
    display: flex;
    gap: 7.2px;
    align-items: center;
}

.sms-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    border: 1.5px solid var(--brand-primary-light);
    border-radius: 10px;
    padding: 0 13.2px;
    height: 52px;
    font-size: 11.4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sms-btn:hover {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.sms-btn:disabled,
.sms-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

#smstxt {
    font-size: 10.56px;
    color: var(--brand-text-muted);
    margin-top: 6px;
}

/* ========== 條款勾選 ========== */
.terms-box {
    display: flex;
    align-items: flex-start;
    gap: 7.2px;
    margin-top: 14.4px;
    padding: 11.4px 12px;
    background: var(--brand-bg-soft);
    border-radius: 10px;
    border: 1px solid var(--brand-border-light);
}

.terms-box input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--brand-primary);
    margin-top: 2px;
    flex: 0 0 auto;
    cursor: pointer;
}

.terms-box label {
    font-size: 11.4px;
    color: var(--brand-text-secondary);
    line-height: 1.55;
    cursor: pointer;
    margin-bottom: 0;
}

.terms-box label a {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
}

.terms-box label a:hover {
    text-decoration: underline;
}

/* 生理性別 */
.gender-options {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 10px;
}

.gender-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
}

.gender-options input[type="radio"] {
    margin: 0;
    accent-color: #465564;
}

/* 生日 */
.birthday-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.birthday-row .form-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* 收不到驗證碼提示 */
#loginModal_smsHint {
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}

#loginModal_smsHint.hint-success {
    color: #16A34A;
}

#loginModal_smsHint.hint-warning {
    color: #F59E0B;
}

/* ============================================================
 * RWD（手機版）
 * ============================================================ */
@media (max-width: 768px) {
    .app-form-content {
        padding: 19.2px 10.8px;
    }

    .brand-logo-area img {
        height: 56px;
    }

    .claim-header h1 {
        font-size: 19.2px;
    }

    .claim-header p {
        font-size: 12px;
    }

    .form-control {
        font-size: 16px !important;
    }

    .captcha-block {
        flex-wrap: wrap;
    }

    .phone-wrap {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }

    .phone-wrap .phone-prefix {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        background: var(--brand-bg-soft);
        border: 1.5px solid var(--brand-border);
        border-radius: 8px;
        font-size: 11.4px;
        color: var(--brand-text-secondary);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .phone-wrap .form-control {
        border-radius: 8px;
        flex: 1;
        min-width: 0;
    }

    .sms-row {
        flex-wrap: wrap;
    }

    .sms-row .form-control,
    .sms-row .sms-btn {
        width: 100%;
    }
}