.volunteer-table-page {
    min-height: 100vh;
    max-width: 10rem;
    margin: 0 auto;
    overflow-x: hidden;
    padding-bottom: calc(2.44rem + env(safe-area-inset-bottom));
    color: #2c2724;
    background: linear-gradient(180deg, #fff4f2 0, #f8f8f8 6.2rem, #f8f8f8 100%);
}

.volunteer-table-page,
.volunteer-table-page * {
    box-sizing: border-box;
}

.volunteer-table-page button {
    border: 0;
    margin: 0;
    padding: 0;
    appearance: none;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

.volunteer-table-page strong {
    font-weight: 600;
}

.volunteer-table-page .color-emphasis {
    color: #000;
}

.table-header {
    padding: 0.2667rem 0.4267rem 0.3067rem;
}

.top-line {
    position: relative;
    min-height: 1.48rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.back-btn {
    position: absolute;
    /* left: 0.1867rem;
    top: 0.24rem; */
    left: -0.3rem;
    top: 0.28rem;
    width: 0.7467rem;
    height: 0.7467rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d1422;
}

.back-btn .van-icon {
    font-size: 0.5333rem;
    font-weight: 600;
}

.mode-tabs {
    width: 5.3333rem;
    height: 1.2267rem;
    display: flex;
    align-items: center;
    padding: 0.1067rem;
    border-radius: 0.28rem;
    background: rgba(255, 255, 255, 0.74);
}

.mode-tab {
    flex: 1;
    height: 1.0133rem;
    border-radius: 0.2267rem;
    color: #756761;
    font-size: 0.36rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

.mode-tab.active {
    color: #fff;
    background: #ff7938;
}

.profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2667rem;
    margin-top: 0.24rem;
}

.profile-main {
    min-width: 0;
    flex: 1;
}

.profile-title {
    display: flex;
    align-items: center;
    gap: 0.2267rem;
    min-width: 0;
}

.profile-title > span {
    min-width: 0;
    color: #695b56;
    font-size: 0.3867rem;
    line-height: 0.5867rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-edit {
    width: 0.48rem;
    height: 0.48rem;
    flex: 0 0 0.48rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #958a86;
}

.profile-edit .van-icon {
    font-size: 0.4133rem;
}

.volunteer-table-page .diagnosis-btn {
    height: 0.6133rem;
    display: inline-flex;
    align-items: center;
    gap: 0.04rem;
    flex: 0 0 auto;
    padding: 0 0.12rem;
    border-radius: 0.1067rem;
    color: #ff6f34;
    background: #fff0ec;
    font-size: 0.32rem;
    line-height: 1;
    font-weight: 400;
}

.diagnosis-btn .van-icon {
    font-size: 0.2933rem;
    font-weight: 600;
}

.profile-main p {
    margin-top: 0.1067rem;
    color: #9b9491;
    font-size: 0.32rem;
    line-height: 0.4533rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.volunteer-table-page .export-btn {
    width: 2.2rem;
    height: 0.84rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1467rem;
    flex: 0 0 2.2rem;
    border: 1px solid #ffc7b3;
    border-radius: 0.56rem;
    color: #ff7135;
    background: rgba(255, 255, 255, 0.58);
    font-size: 0.3467rem;
    line-height: 1;
    font-weight: 600;
}

.export-btn .van-icon {
    font-size: 0.36rem;
}

.table-main {
    padding: 0 0.4267rem;
}

.summary-card {
    min-height: 2.2667rem;
    padding: 0.36rem 0.44rem 0.4267rem;
    border-radius: 0.4rem;
    background: #fff;
}

.summary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.summary-count {
    display: flex;
    align-items: baseline;
    color: #2c2724;
}

.summary-count strong {
    color: #ff7335;
    font-size: 0.72rem;
    line-height: 0.9067rem;
    font-weight: 600;
}

.summary-count span {
    margin-left: 0.08rem;
    color: #2c2724;
    font-size: 0.48rem;
    line-height: 0.6667rem;
}

.summary-card > p {
    color: #9b9491;
    font-size: 0.32rem;
    line-height: 0.4533rem;
}

.summary-risk {
    width: 4.04rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 0.0667rem;
}

.risk-line {
    width: 4.04rem;
    height: 0.1067rem;
    display: block;
    border-radius: 999px;
    background: #ff7938;
}

.risk-dot {
    width: 0.16rem;
    height: 0.16rem;
    display: block;
    margin: 0.3067rem 0.12rem 0 0;
    border-radius: 50%;
    background: #ff7938;
}

.summary-risk em {
    margin-top: 0.24rem;
    color: #9b9491;
    font-size: 0.2933rem;
    line-height: 0.4267rem;
}

.summary-tip {
    margin-top: 0.4267rem;
}

.summary-tip div {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    color: #ef6b5c;
    font-size: 0.32rem;
    line-height: 0.44rem;
}

.summary-tip div .van-icon {
    width: 0.2933rem;
    height: 0.2933rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: #f7aaa0;
    font-size: 0.1733rem;
}

.summary-tip p {
    margin-top: 0.1733rem;
    color: #a9a19d;
    font-size: 0.2933rem;
    line-height: 0.48rem;
}

.simple-list {
    margin-top: 0.2133rem;
}

.volunteer-table-page .empty-slot {
    width: 100%;
    height: 1.3333rem;
    display: grid;
    grid-template-columns: 2.2rem 1fr 2.2rem;
    align-items: center;
    margin-bottom: 0.2133rem;
    border-radius: 0.2667rem;
    background: #fff;
    box-shadow: 0 0.0533rem 0.24rem rgba(80, 60, 54, 0.02);
}

.empty-slot span {
    padding-left: 0.44rem;
    color: rgba(255, 121, 56, 0.1);
    font-size: 0.64rem;
    line-height: 1;
    font-weight: 600;
}

.empty-slot strong {
    grid-column: 2;
    color: #ff6a34;
    font-size: 0.36rem;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.volunteer-card {
    margin-bottom: 0.2267rem;
    padding: 0.3733rem 0.3333rem 0.2133rem;
    border-radius: 0.2667rem;
    background: #fff;
}

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.2rem;
}

.card-head h2 {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: baseline;
    margin: 0;
    color: #050505;
    font-size: 0.4rem;
    line-height: 0.6267rem;
    font-weight: 600;
    letter-spacing: 0;
    word-break: break-all;
}

.card-head h2 span {
    flex: 0 0 auto;
    margin-right: 0.12rem;
    color: #ff7938;
    font-size: 0.56rem;
    line-height: 0.64rem;
    font-weight: 600;
}

.risk-badge {
    width: 1.7867rem;
    height: 0.6533rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    flex: 0 0 1.7867rem;
    border-radius: 0.1333rem;
    color: #fff;
    background: #ff7938;
}

.risk-badge strong {
    font-size: 0.3333rem;
    line-height: 1;
    font-weight: 600;
}

.risk-badge span {
    font-size: 0.2933rem;
    line-height: 1;
    font-weight: 600;
}

.school-meta {
    display: flex;
    align-items: center;
    gap: 0.1467rem;
    margin-top: 0.0667rem;
    color: #9b9491;
    font-size: 0.2933rem;
    line-height: 0.4267rem;
}

.school-meta span {
    flex: 0 0 auto;
}

.school-meta em {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.school-meta button {
    flex: 0 0 auto;
    color: #9b9491;
    font-size: 0.2933rem;
}

.major-panel {
    margin-top: 0.2667rem;
    padding: 0.32rem 0.4rem 0.36rem;
    border-radius: 0.1067rem;
    background: #fffbfa;
}

.major-row {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.major-no {
    width: 0.52rem;
    height: 0.52rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 0.52rem;
    border: 1px solid #ff7938;
    border-radius: 50%;
    color: #ff7938;
    font-size: 0.3467rem;
    line-height: 1;
}

.major-row h3 {
    min-width: 0;
    flex: 1;
    margin: 0;
    color: #050505;
    font-size: 0.3867rem;
    line-height: 0.5733rem;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.major-row button {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    flex: 0 0 auto;
    color: #ff6f34;
    font-size: 0.2933rem;
    line-height: 1;
}

.major-row button .van-icon {
    font-size: 0.2933rem;
}

.major-category {
    display: inline-flex;
    margin: 0.1733rem 0 0 0.56rem;
    padding: 0.04rem 0.0933rem;
    color: #ff6f34;
    background: #fff0ec;
    font-size: 0.2933rem;
    line-height: 0.4rem;
}

.major-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.42fr 0.82fr;
    gap: 0.12rem;
    margin-top: 0.2267rem;
}

.major-grid div {
    min-width: 0;
}

.major-grid span {
    display: block;
    color: #756b66;
    font-size: 0.2933rem;
    line-height: 0.4267rem;
    white-space: nowrap;
}

.major-grid strong {
    display: block;
    margin-top: 0.12rem;
    color: #2c2724;
    font-size: 0.3067rem;
    line-height: 0.44rem;
    font-weight: 600;
    word-break: break-word;
}

.major-grid .text-right {
    text-align: right;
}

.major-remark {
    margin-top: 0.1733rem;
    color: #9b9491;
    font-size: 0.2933rem;
    line-height: 0.4533rem;
}

.card-tools {
    height: 0.8533rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    padding: 0 0.36rem;
}

.card-tools button {
    height: 0.64rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b4afac;
}

.card-tools .van-icon {
    font-size: 0.3867rem;
}

.bottom-action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.2rem;
    z-index: 20;
    width: 100vw;
    max-width: 10rem;
    margin: 0 auto;
    height: calc(1.8133rem + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-bottom) env(safe-area-inset-bottom) 0;
    border-top: 1px solid #efefef;
    background: #fff;
}

.edit-entry {
    position: absolute;
    left: 4.2667%;
    top: 0.32rem;
    width: 16.4%;
    height: 1.28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #aaa5a2;
}

.edit-entry .van-icon {
    font-size: 0.44rem;
}

.edit-entry span {
    margin-top: 0.0933rem;
    font-size: 0.32rem;
    line-height: 0.4rem;
    font-weight: 600;
}

.fill-btn,
.analysis-btn {
    position: absolute;
    top: 0.32rem;
    width: 34.4%;
    height: 1.28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.2267rem;
    font-size: 0.3867rem;
    line-height: 1;
    font-weight: 600;
}

.volunteer-table-page .fill-btn {
    left: 24.8%;
    color: #8a4f07;
    background: #ffe4aa;
}

.volunteer-table-page .analysis-btn {
    left: 61.3333%;
    color: #fff;
    background: #ff7938;
}

.major-history {
    margin-top: 0.2667rem;
    padding-top: 0.2667rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.history-header {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1.2fr 1.5fr 2.3fr;
    color: #9b9491;
    font-size: 0.2933rem;
    line-height: 0.4267rem;
    margin-bottom: 0.24rem;
}

.history-header span {
    display: flex;
    align-items: center;
}

.diff-header .van-icon {
    margin-left: 0.08rem;
    font-size: 0.32rem;
    color: #b4afac;
}

.history-row {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1.2fr 1.5fr 2.3fr;
    align-items: center;
    color: #2c2724;
    font-size: 0.3333rem;
    line-height: 0.5333rem;
    margin-bottom: 0.2667rem;
}

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

.diff-cell {
    display: flex;
    align-items: center;
}

.diff-cell strong {
    color: #ff6a34;
    margin-left: 0.08rem;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

.diff-cell strong.down {
    color: #20a162;
}

.up-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 0.08rem solid transparent;
    border-right: 0.08rem solid transparent;
    border-bottom: 0.12rem solid #ff6a34;
    margin-left: 0.06rem;
    margin-bottom: 0.04rem;
}

@media (max-width: 340px) {
    .mode-tab,
    .card-head h2,
    .fill-btn,
    .analysis-btn {
        font-size: 0.3467rem;
    }

    .major-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 0.24rem;
    }

    .history-row {
        font-size: 0.32rem;
    }
}