/* 移动端前台样式，复刻支付宝小程序页面外观 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    background: #ffffff;
    color: #1f1f1f;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.phone {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: #ffffff;
}

/* 顶部导航栏 */
.appbar {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 14px;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}
.appbar .back {
    font-size: 24px;
    color: #333;
    text-decoration: none;
    width: 28px;
    line-height: 1;
}
.appbar .title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #1f1f1f;
    margin-left: 4px;
}
.appbar .actions {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #333;
}
.appbar .actions .ic {
    font-size: 18px;
    color: #333;
    line-height: 1;
}
.appbar .actions .ic.close {
    border: 1.5px solid #555;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

/* 列表页：险种类型 / 起始年月 */
.summary {
    padding: 6px 18px 0;
}
.summary .row {
    display: flex;
    align-items: baseline;
    margin: 16px 0;
    font-size: 16px;
}
.summary .row .label {
    color: #1f1f1f;
    font-weight: 500;
    margin-right: 14px;
    white-space: nowrap;
}
.summary .row .value {
    color: #3a76e0;
    font-weight: 600;
}
.summary .row .value .sep {
    color: #1f1f1f;
    font-weight: 400;
    margin: 0 6px;
}

.divider {
    height: 1px;
    background: #ececec;
    margin: 6px 18px 0;
}

/* 年份分组 */
.year-group { padding: 0 18px; }
.year-head {
    display: flex;
    align-items: center;
    margin: 22px 0 14px;
}
.year-head .bar {
    width: 4px;
    height: 18px;
    background: #3a76e0;
    border-radius: 2px;
    margin-right: 8px;
}
.year-head .y {
    font-size: 17px;
    font-weight: 700;
    color: #1f1f1f;
}

/* 每月卡片网格 */
.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.month-cell {
    border: 1px solid #e4e6ea;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #2b2b2b;
    text-decoration: none;
}
.month-cell:active { background: #f5f7ff; }

@media (max-width: 400px) {
    .month-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 门户页：模块入口列表 */
.portal { padding: 14px 16px; }
.portal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e4e6ea;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    color: inherit;
    text-decoration: none;
}
.portal-item:active { background: #f5f7ff; }
.portal-item.disabled { opacity: .6; }
.portal-item .pi-name { font-size: 17px; font-weight: 700; color: #1f1f1f; }
.portal-item .pi-desc { font-size: 13px; color: #8a909a; margin-top: 4px; }
.portal-item .pi-arrow { font-size: 22px; color: #c0c4cc; }
.portal-item .pi-tag { font-size: 12px; color: #8a909a; background: #f0f1f3; border-radius: 10px; padding: 3px 10px; }

/* 详情页 */
.detail-wrap { background: #eef0f2; min-height: calc(100vh - 50px); padding: 12px; }
.detail-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
}
.detail-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f1f1f;
    padding: 20px 18px 14px;
}
.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-top: 1px solid #f1f2f4;
}
.detail-row .k { color: #9aa0a6; font-size: 15px; }
.detail-row .v { color: #1f1f1f; font-size: 15px; font-weight: 700; text-align: right; }