/* 欢送总表（第 10 条）——卡片式布局，替换原横向大表 */
.sm { padding-bottom: 24px; }

/* 概览 */
.sm-hero { margin: 10px 12px 0; padding: 16px; border-radius: 14px; background: linear-gradient(150deg, #0bbf83 0%, #09a86e 62%, #068a5c 100%); color: #fff; box-shadow: 0 8px 20px rgba(9, 168, 110, .24); }
.sm-hero__top { display: flex; align-items: center; gap: 12px; }
.sm-hero__top > div:first-child { flex: 1; min-width: 0; }
.sm-hero__eye { margin: 0 0 2px; font-size: 11px; letter-spacing: .5px; opacity: .8; }
.sm-hero h2 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.sm-hero__sub { margin: 4px 0 0; font-size: 12px; opacity: .88; }
.sm-ring { position: relative; flex: none; width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .28) 0); display: grid; place-items: center; }
.sm-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0aa872; }
.sm-ring b, .sm-ring span { position: relative; }
.sm-ring b { font-size: 16px; font-weight: 600; line-height: 1; }
.sm-ring span { font-size: 9px; opacity: .85; }

.sm-bar { display: flex; gap: 2px; height: 8px; margin: 14px 0 10px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .22); }
.sm-bar__seg { display: block; height: 100%; }
.sm-bar__seg--air { background: #ffe08a; }
.sm-bar__seg--station { background: #a8e6ff; }
.sm-bar__seg--bus { background: #ffc4a8; }
.sm-bar__seg--self { background: #d6c9ff; }
.sm-bar__seg--join { background: #b7f0d8; }
.sm-bar__seg--none { background: rgba(255, 255, 255, .55); }

.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(255, 255, 255, .18); font-size: 11px; color: #fff; }
.sm-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.sm-chip b { font-weight: 600; }
.sm-chip--air i { background: #ffe08a; }
.sm-chip--station i { background: #a8e6ff; }
.sm-chip--bus i { background: #ffc4a8; }
.sm-chip--self i { background: #d6c9ff; }
.sm-chip--join i { background: #b7f0d8; }
.sm-chip--none i { background: rgba(255, 255, 255, .7); }

/* 分区标题 */
.sm-sec { padding: 18px 16px 8px; }
.sm-sec h3 { margin: 0; font-size: 15px; font-weight: 600; color: #2f3d30; }
.sm-sec p { margin: 3px 0 0; font-size: 12px; color: #8a908a; }

/* 基地卡片 */
.sm-bases { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.sm-base { display: block; width: 100%; padding: 12px 14px; border: 1px solid #e8ece9; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sm-base.is-on { border-color: #09c382; box-shadow: 0 4px 12px rgba(9, 195, 130, .16); background: #f7fffb; }
.sm-base__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sm-base__hd b { font-size: 15px; font-weight: 600; color: #2f3d30; }
.sm-base__hd em { font-style: normal; font-size: 13px; font-weight: 600; color: #09a86e; }
.sm-base__wk { margin: 3px 0 8px; font-size: 11px; color: #8a908a; }
.sm-base .sm-chip { background: #f2f5f3; color: #696c69; }

/* 搜索与筛选 */
.sm-search { display: flex; gap: 8px; padding: 0 12px; }
.sm-search input { flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 17px; background: #fff; padding: 0 14px; font-size: 13px; }
.sm-search button { flex: none; height: 34px; padding: 0 16px; border: 0; border-radius: 17px; background: #09c382; color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; }
.sm-filter { display: flex; gap: 8px; padding: 10px 12px 4px; overflow-x: auto; }
.sm-pill { flex: none; height: 28px; padding: 0 12px; border: 1px solid #e8ece9; border-radius: 14px; background: #fff; color: #696c69; font-size: 12px; cursor: pointer; }
.sm-pill.is-on { border-color: #09c382; background: #09c382; color: #fff; font-weight: 500; }

/* 学员卡片 */
.sm-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 0; }
.sm-card { position: relative; padding: 12px 14px 12px 16px; border-radius: 12px; background: #fff; overflow: hidden; }
.sm-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #d7dad7; }
.sm-card--air::before { background: #f5b301; }
.sm-card--station::before { background: #29a3d1; }
.sm-card--bus::before { background: #f0783c; }
.sm-card--self::before { background: #8b6ff0; }
.sm-card--join::before { background: #09c382; }
.sm-card__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sm-card__name { font-size: 16px; font-weight: 600; color: #2f3d30; }
.sm-card__st { flex: none; padding: 2px 8px; border-radius: 10px; background: #f2f5f3; color: #8a908a; font-size: 11px; }
.sm-card__st.is-done { background: #e8faf3; color: #09a86e; }
.sm-card__meta { margin: 4px 0 0; font-size: 12px; color: #8a908a; }
.sm-card__way { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sm-card__way .sm-chip { background: #f6f8f7; color: #444c45; }
.sm-card__place { font-style: normal; font-size: 12px; color: #696c69; }
.sm-card__time { margin: 8px 0 0; font-size: 11px; color: #b0b4ba; }

.sm-empty { margin: 24px 12px; padding: 36px 0; border-radius: 12px; background: #fff; text-align: center; color: #b0b4ba; font-size: 13px; }