/* 移动端适配 */
.training-container {
    max-width: 414px;
    margin: 0 auto;
    padding: 0 15px 120px;
    box-sizing: border-box;
    background: var(--color-bg-1, #F7F8FA);
}

/* Banner卡片样式 */
.banner-card {
    background: var(--color-bg-2, #FFF);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.08), 
                0 3px 6px 0 rgba(0, 0, 0, 0.06);
}

.banner-card a {
    display: block;
    width: 100%;
    line-height: 0;
}

.banner-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 搜索区域容器 */
.search-area {
    background: var(--color-bg-2, #FFF);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.08), 
                0 3px 6px 0 rgba(0, 0, 0, 0.06);
}

/* Logo和标题区域 */
.search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.search-header .logo {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.search-header .title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-1, #1D2129);
    text-decoration: none;
    transition: color 0.2s ease;
}

.search-header .title:hover {
    color: var(--color-primary-6, #165DFF);
}

.search-header .subtitle {
    font-size: 12px;
    color: var(--color-text-3, #86909C);
    margin-left: auto;
}

/* 搜索栏样式 */
.training-search {
    display: flex;
    margin-bottom: 12px;
    background: var(--color-fill-2, #F2F3F5);
    border-radius: 4px;
    overflow: hidden;
}

/* 提高选择器优先级 */
.training-container .training-search input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-1, #1D2129);
    font-size: 14px;
    outline: none;
    min-height: unset;
    line-height: normal;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.training-container .training-search input[type="text"]::placeholder {
    color: var(--color-text-3, #86909C);
}

.training-container .training-search select {
    width: 100px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-1, #1D2129);
    font-size: 14px;
    outline: none;
    border-right: 1px solid var(--color-border-2, #E5E6EB);
}

/* 筛选器样式 */
.training-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.filter-item {
    flex: 1;
}

.filter-item select {
    width: 100%;
    padding: 4px 28px 4px 12px;
    border: 1px solid var(--color-border-2, #E5E6EB);
    border-radius: 4px;
    background: var(--color-bg-2, #FFF);
    color: var(--color-text-2, #4E5969);
    font-size: 13px;
    outline: none;
    min-width: unset;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234E5969' d='M2.10899 4C1.89797 4 1.72943 4.22555 1.83435 4.41459L5.72535 10.9146C5.81872 11.0805 6.06231 11.0805 6.15567 10.9146L10.0467 4.41459C10.1516 4.22555 9.98305 4 9.77203 4H2.10899Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}

.filter-item select:hover {
    border-color: var(--color-border-3, #C9CDD4);
}

.filter-item select:focus {
    border-color: var(--color-primary-6, #165DFF);
    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
}

/* 空状态样式 */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--color-text-3, #86909C);
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2386909C' d='M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

/* 培训卡片 */
.training-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.08), 
                0 3px 6px 0 rgba(0, 0, 0, 0.06), 
                0 5px 12px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.training-card:hover {
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 
                0 8px 16px 0 rgba(0, 0, 0, 0.08), 
                0 12px 24px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.training-card .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.training-card .title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-1, #1D2129);
    margin: 0 0 16px;
    line-height: 1.5715;
}

.training-card .location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-3, #86909C);
    font-size: 13px;
    margin-bottom: 16px;
}

.training-card .icon-location {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.training-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.training-card .tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    background: var(--color-fill-2, #F2F3F5);
    color: var(--color-text-2, #4E5969);
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.1s ease;
}

.training-card .info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.training-card .info span {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-3, #86909C);
    font-size: 13px;
}

.training-card .icon-users {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zM16 11c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.training-card .deadline,
.training-card .address,
.training-card .training-time {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-3, #86909C);
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5715;
}

.training-card .address {
    justify-content: space-between;
}

.training-card .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary-6, #165DFF);
    font-size: 13px;
    transition: all 0.1s ease;
}

.training-card .nav-link:hover {
    color: var(--color-primary-5, #4080FF);
}

.training-card .icon-navigation {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.training-card .distance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-3, #86909C);
    font-size: 13px;
}

.training-card .icon-loading {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-fill-3, #E5E6EB);
    border-top: 2px solid var(--color-primary-6, #165DFF);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 底部导航公共样式 */
.bottom-nav,
.training-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    display: flex;
    border-top: 1px solid #E5E6EB;
    z-index: 100;
}

/* 首页底部导航链接样式 */
.training-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #86909C;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s;
}

.training-nav a:before {
    content: '';
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

/* 详情页和个人中心底部导航项样式 */
.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #86909C;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s;
}

.nav-item.active {
    color: #165DFF;
}

.nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

/* 图标样式 */
.nav-icon.home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2386909C' d='M12 3L4 9v12h16V9l-8-6zm6 16h-4v-5h-4v5H6v-9l6-4.5 6 4.5v9z'/%3E%3C/svg%3E");
}

.nav-item.active .nav-icon.home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 3L4 9v12h16V9l-8-6zm6 16h-4v-5h-4v5H6v-9l6-4.5 6 4.5v9z'/%3E%3C/svg%3E");
}

.nav-icon.profile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2386909C' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

.nav-item.active .nav-icon.profile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

/* 首页导航图标 */
.training-nav a:first-child:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2386909C' d='M12 3L4 9v12h16V9l-8-6zm6 16h-4v-5h-4v5H6v-9l6-4.5 6 4.5v9z'/%3E%3C/svg%3E");
}

.training-nav a.active:first-child:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 3L4 9v12h16V9l-8-6zm6 16h-4v-5h-4v5H6v-9l6-4.5 6 4.5v9z'/%3E%3C/svg%3E");
}

.training-nav a:last-child:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2386909C' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

.training-nav a.active:last-child:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

.training-nav a.active {
    color: #165DFF;
}

/* 培训详情页样式 */
.info-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.info-card .title {
    font-size: 20px;
    font-weight: 500;
    color: #1D2129;
    margin: 0 0 16px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    background: #F2F3F5;
    color: #4E5969;
    border-radius: 4px;
    font-size: 13px;
}

.tag.primary {
    background: #E8F3FF;
    color: #165DFF;
}

.info-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon.location {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.icon.time {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E");
}

.icon.people {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zM16 11c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

.text {
    font-size: 14px;
    color: #4E5969;
    flex: 1;
}

.enrollment {
    display: flex;
    gap: 24px;
}

.enrollment-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.enrollment-item .label {
    font-size: 12px;
    color: #86909C;
}

.enrollment-item .value {
    font-size: 16px;
    color: #1D2129;
}

.enrollment-item .value.highlight {
    color: #165DFF;
}

.content-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 500;
    color: #1D2129;
    margin: 0;
}

.content {
    font-size: 14px;
    color: #4E5969;
    line-height: 1.6;
}

.crowd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 底部按钮区 */
.training-actions {
    position: fixed;
    bottom: 56px; /* 放在导航栏上方 */
    left: 0;
    right: 0;
    display: flex;
    padding: 12px 16px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 99; /* 确保在导航栏下方 */
}

.btn-consult {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid #165DFF;
    color: #165DFF;
    border-radius: 4px;
    margin-right: 12px;
    text-decoration: none;
    font-size: 15px;
}

.btn-register {
    flex: 1;
    padding: 12px;
    background: #165DFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.btn-register:active {
    background: #0E42D2;
}

/* 报名弹窗样式 */
.registration-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(29, 33, 41, 0.6);
    display: none;
    z-index: 1000;
}

.registration-modal.active {
    display: block;
}

.modal-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 24px 16px;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}

.registration-modal.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 500;
    color: #1D2129;
    margin: 0;
}

.close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F2F3F5;
    color: #86909C;
    font-size: 18px;
    cursor: pointer;
}

.registration-form {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group.required label::after {
    content: '*';
    color: #F53F3F;
    margin-left: 4px;
}

.form-group label {
    display: block;
    font-size: 14px;
    color: #1D2129;
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="tel"] {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #E5E6EB;
    border-radius: 4px;
    font-size: 14px;
    color: #1D2129;
    transition: all 0.2s;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #165DFF;
    box-shadow: 0 0 0 2px rgba(22,93,255,0.1);
    outline: none;
}

.form-group input::placeholder {
    color: #C9CDD4;
}

.form-group-title {
    font-size: 14px;
    color: #1D2129;
    margin: 24px 0 16px;
}

.checkbox-group {
    margin-bottom: 20px;
    padding: 16px;
    background: #F7F8FA;
    border-radius: 8px;
}

.checkbox-group-title {
    font-size: 14px;
    color: #4E5969;
    margin-bottom: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox-label:last-child {
    margin-bottom: 0;
}

.checkbox-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: #165DFF;
}

.checkbox-label span {
    font-size: 14px;
    color: #4E5969;
}

.fee-info {
    margin: 24px 0;
    padding: 12px 16px;
    background: #F7F8FA;
    border-radius: 4px;
    font-size: 14px;
    color: #1D2129;
}

.btn-submit {
    width: 100%;
    height: 44px;
    background: #165DFF;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-submit:active {
    background: #0E42D2;
}

/* 报名记录项样式 */
.registration-item {
    background: #fff;
    border: 1px solid #E5E6EB;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.course-info {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E5E6EB;
}

.course-title {
    font-size: 16px;
    font-weight: 500;
    color: #1D2129;
    margin: 0 0 8px;
}

.registration-date {
    font-size: 13px;
    color: #86909C;
}

.registration-details {
    margin-bottom: 16px;
}

.detail-row {
    display: flex;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.detail-row:last-child {
    margin-bottom: 0;
}

.label {
    color: #86909C;
    width: 70px;
    flex-shrink: 0;
}

.value {
    color: #1D2129;
    flex: 1;
}

.registration-status {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E5E6EB;
}

.status {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: 4px;
}

.status-success {
    background: #E8FFEA;
    color: #00B42A;
}

.status-pending {
    background: #FFF3E8;
    color: #FF7D00;
}

.status-failed {
    background: #FFECE8;
    color: #F53F3F;
}

.contact-info {
    margin-top: 16px;
}

.btn-contact {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #165DFF;
    text-decoration: none;
}

.icon-phone {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 导航图标样式 */
.icon-navigation {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('../images/navigation-icon.png') no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

/* 如果没有图片，可以使用 Unicode 字符 */


.nav-link {
    display: inline-flex;
    align-items: center;
    color: #165DFF;
    text-decoration: none;
    margin-left: 8px;
    font-size: 14px;
}

.nav-link .icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.nav-link:hover {
    color: #1565c0;
}

.address {
    display: flex;
    align-items: center;
    margin: 8px 0;
}

/* 距离加载动画 */
.icon-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.distance {
    margin-left: 8px;
    color: #666;
    font-size: 12px;
}

/* 计算距离链接样式 */
.retry-location {
    color: #1976d2;
    text-decoration: none;
    cursor: pointer;
}

.retry-location:hover {
    text-decoration: underline;
    color: #1565c0;
}

/* 培训卡片链接样式 */
.training-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* 确保标题颜色正确 */
.training-card .title {
    color: #333;
}

/* 详情页样式 */
body {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
}

/* 报名表单样式 */
.form-group.required label:after {
    content: "*";
    color: #f44336;
    margin-left: 4px;
}

/* 个人中心页面样式 */
.profile-page {
    min-height: 100vh;
    background: #fff;
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-header {
    background: #fff;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
}

.header-content h1 {
    font-size: 24px;
    margin: 0;
    font-weight: 500;
}

.header-content .subtitle {
    font-size: 14px;
    margin: 8px 0 0;
    color: #86909C;
}

.query-card {
    width: 100%;
    max-width: 374px;
    background: #fff;
    padding: 20px 0;
}

.form-item {
    margin-bottom: 24px;
}

.form-label {
    font-size: 14px;
    color: #1D2129;
    margin-bottom: 8px;
}

.arco-input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #E5E6EB;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;
    box-sizing: border-box;
}

.arco-input:focus {
    border-color: #165DFF;
    box-shadow: 0 0 0 2px rgba(22,93,255,0.1);
    outline: none;
}

.arco-input::placeholder {
    color: #C9CDD4;
}

.submit-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    border-radius: 4px;
    background: #165DFF;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submit-btn:hover {
    background: #306FFF;
}

.submit-btn:active {
    background: #0E42D2;
}

.result-list {
    width: 100%;
    max-width: 374px;
    margin-top: 20px;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #86909C;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s;
}

.nav-item.active {
    color: #165DFF;
}

.nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

.nav-icon.home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2386909C' d='M12 3L4 9v12h16V9l-8-6zm6 16h-4v-5h-4v5H6v-9l6-4.5 6 4.5v9z'/%3E%3C/svg%3E");
}

.nav-item.active .nav-icon.home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 3L4 9v12h16V9l-8-6zm6 16h-4v-5h-4v5H6v-9l6-4.5 6 4.5v9z'/%3E%3C/svg%3E");
}

.nav-icon.profile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2386909C' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

.nav-item.active .nav-icon.profile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

/* 添加缺失的图标定义 */
.icon.book {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z'/%3E%3C/svg%3E");
}

.icon.target {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-9h10v2H7z'/%3E%3C/svg%3E");
}

.icon.phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.icon.navigation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23165DFF' d='M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z'/%3E%3C/svg%3E");
}

.training-list.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* 可选：添加加载动画 */
.training-list.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Arco Design 风格的搜索按钮 */
.training-container .training-search .search-btn {
    padding: 5px 16px;
    font-size: 14px;
    height: 32px;
    background-color: var(--color-primary-6, #165DFF);
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s cubic-bezier(0, 0, 1, 1);
    margin: 4px;
    line-height: 1.5715;
    position: relative;
}

.training-container .training-search .search-btn:hover {
    background-color: var(--color-primary-5, #4080FF);
}

.training-container .training-search .search-btn:active {
    background-color: var(--color-primary-7, #0E42D2);
}

.training-container .training-search .search-btn.loading {
    color: transparent;
    pointer-events: none;
}

.training-container .training-search .search-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: arco-loading 0.6s linear infinite;
}

/* Arco Design 加载动画 */
@keyframes arco-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 加载提示样式 */
.loading-more {
    text-align: center;
    padding: 20px;
    color: #666;
}

.no-more {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}