@charset "UTF-8";
/*BasinLens Auth Pages With Marketing Panel Styles */


.auth-main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.auth-wrapper {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    /* 移除wrapper的背景和阴影，让营销内容与背景融合 */
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    min-height: 600px;
    gap: 4rem; /* 增加面板间距 */
}

.auth-marketing-panel {
    flex: 1;
    padding: 3rem 2.5rem; /* 与表单卡片的内边距保持一致 */
    /* 移除背景，让内容与页面背景融合 */
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #1f2937; /* text-gray-800 */
}

.auth-marketing-title {
    font-size: 2.75rem; /* text-5xl */
    font-weight: 500; /* font-medium，借鉴portal页面 */
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #111827; /* text-gray-900，借鉴portal页面 */
}

.auth-marketing-title .highlight {
    background: linear-gradient(to right, #fb923c, #ea580c); /* from-orange-400 to-orange-600 */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.auth-marketing-subtitle {
    font-size: 1.25rem; /* text-xl */
    color: #1f2937; /* text-gray-800，借鉴portal页面 */
    line-height: 1.75; /* leading-loose */
    margin-bottom: 2.5rem;
    max-width: 32rem; /* 限制宽度提升可读性 */
}

.auth-feature-list {
    list-style: none;
    padding: 0;
}

.auth-feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.auth-feature-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    color: #f97316; /* text-orange-500 */
}

.auth-feature-text {
    font-size: 1rem;
    color: #374151; /* text-gray-700 */
}

.auth-form-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

/* Override .auth-container for the new layout - 恢复卡片样式 */
.auth-container {
    padding: 3rem 2.5rem; /* 减少左右内边距，避免内容溢出 */
    background-color: #ffffff; /* bg-white，白色卡片背景 */
    border-radius: 0.5rem; /* rounded-lg，圆角卡片 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg，卡片阴影 */
    width: 100%;
    max-width: none; /* 移除最大宽度限制，让容器自适应 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 轻微边框增强卡片效果 */
}

/* 重新定义表单宽度，使其自适应 */
.auth-form {
    width: 100% !important; /* 覆盖原有的24rem固定宽度 */
    max-width: none !important; /* 移除最大宽度限制 */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .auth-marketing-panel {
        display: none;
    }
    .auth-form-panel {
        flex: 1 1 100%;
        padding: 3rem 2rem;
    }
    .auth-wrapper {
        flex-direction: column;
        margin: 1rem;
        min-height: auto;
        gap: 0; /* 移动端无需间距 */
    }
    .auth-container {
        padding: 2rem; /* 移动端减少内边距 */
        margin: 1rem; /* 增加外边距避免贴边 */
    }
}

/* 平板和小桌面优化 */
@media (max-width: 1024px) and (min-width: 769px) {
    .auth-wrapper {
        gap: 2rem; /* 减少间距 */
    }
    .auth-marketing-panel {
        padding: 1.5rem; /* 减少内边距 */
    }
    .auth-marketing-title {
        font-size: 2.25rem; /* text-4xl */
    }
    .auth-marketing-subtitle {
        font-size: 1.125rem; /* text-lg */
    }
}

/* 超小屏幕优化 */
@media (max-width: 640px) {
    .auth-body {
        padding: 5rem 0.5rem 1rem;
    }
    .auth-container {
        padding: 1.5rem;
        margin: 0.5rem;
        max-width: 100%;
    }
    .auth-marketing-title {
        font-size: 2rem; /* text-3xl */
    }
    .auth-marketing-subtitle {
        font-size: 1.125rem; /* text-lg */
    }
}