/* ==========================================================
   牵线 · 用户端样式
   移动优先；≥760px 三列，≥1080px 四列，容器自适应加宽
   ========================================================== */

:root {
    --red: #F4403C;
    --red-deep: #DE2C28;
    --pink: #FFF1F0;
    --orange: #FF7A2F;
    --ink: #1A1D22;
    --sub: #8A8F99;
    --line: #EEEFF2;
    --bg: #F6F7F9;
    --white: #FFFFFF;
    --blue: #3B82F6;
    --rose: #F0538C;
    --radius: 12px;
    --shadow: 0 8px 24px rgba(26, 29, 34, .06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

.app {
    max-width: 640px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--white);
    position: relative;
}

.has-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* ---------- 通用 ---------- */
.muted { color: var(--sub); font-size: 13px; }
.pad { padding-left: 16px; padding-right: 16px; }
.btn {
    display: flex; align-items: center; justify-content: center;
    height: 50px; border-radius: 12px;
    background: var(--red); color: #fff;
    font-size: 16px; font-weight: 600;
    width: 100%;
    transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: translateY(1px); opacity: .92; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.sm { height: 36px; font-size: 13px; border-radius: 9px; padding: 0 14px; width: auto; }
.btn[disabled] { background: #C9CCD1; color: #fff; pointer-events: none; }

.toast {
    position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 10px);
    background: rgba(26, 29, 34, .92); color: #fff;
    padding: 10px 16px; border-radius: 10px; font-size: 14px;
    max-width: 78vw; text-align: center; z-index: 90;
    opacity: 0; pointer-events: none; transition: all .22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 登录 ---------- */
.login { min-height: 100vh; max-width: 640px; margin: 0 auto; background: #fff; position: relative; }
.login-hero {
    height: 300px;
    background: linear-gradient(155deg, #FF6259 0%, #F03B37 55%, #D7221F 100%);
    color: #fff; position: relative; overflow: hidden;
}
.login-hero .brand {
    position: absolute; left: 28px; bottom: 82px;
    font-size: 34px; font-weight: 700; letter-spacing: 4px;
}
.login-hero .slogan {
    position: absolute; left: 30px; bottom: 54px;
    font-size: 13px; opacity: .88; letter-spacing: 1px;
}
.login-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-card {
    background: #fff; border-radius: 20px;
    margin: -48px 16px 0; padding: 22px 18px 26px;
    box-shadow: 0 12px 32px rgba(26, 29, 34, .1);
    position: relative;
}
.auth-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.auth-tab {
    padding: 0 2px 12px; font-size: 16px; color: var(--sub);
    position: relative; font-weight: 500;
}
.auth-tab.active { color: var(--ink); font-weight: 700; }
.auth-tab.active::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: -1px; width: 26px; height: 3px; border-radius: 2px; background: var(--red);
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.input {
    width: 100%; height: 48px; padding: 0 14px;
    background: #F7F8FA; border: 1px solid transparent; border-radius: 12px;
    font-size: 16px; outline: none; transition: border-color .15s, background .15s;
}
.input:focus { border-color: #FFC9C6; background: #fff; }
.input-row { display: flex; gap: 10px; }
.input-row .input { flex: 1; }
.code-btn {
    flex: 0 0 108px; height: 48px; border-radius: 12px;
    border: 1px solid #FFD3D1; color: var(--red); background: #fff;
    font-size: 13px; font-weight: 600;
}
.code-btn[disabled] { color: var(--sub); border-color: var(--line); }
.login-btn { margin-top: 8px; }
.login-foot { text-align: center; font-size: 12px; color: var(--sub); padding: 18px 16px 32px; }
.login-foot a { color: var(--red); }
.debug-code {
    margin: 10px 0 0; padding: 10px 12px; background: #FFF8E8; border: 1px dashed #FFD98A;
    border-radius: 10px; font-size: 13px; color: #8A5A00;
}

/* ---------- 顶部 ---------- */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    height: 52px; padding: 0 16px;
    background: #fff; border-bottom: 1px solid var(--line);
}
.topbar .logo { font-size: 19px; font-weight: 700; letter-spacing: 2px; }
.topbar .logo small { font-size: 11px; font-weight: 400; color: var(--sub); letter-spacing: 0; margin-left: 6px; }
.topbar .link { font-size: 13px; color: var(--sub); }

/* ---------- 首页 tab ---------- */
.feed-tabs {
    display: flex; background: #fff; position: sticky; top: 52px; z-index: 19;
    border-bottom: 1px solid var(--line);
}
.feed-tab {
    flex: 1; text-align: center; padding: 14px 0 12px;
    font-size: 16px; color: var(--sub); position: relative;
}
.feed-tab.active { color: var(--red); font-weight: 700; }
.feed-tab.active::after {
    content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 34px; height: 3px; background: var(--red); border-radius: 2px;
}

/* ---------- 卡片流 ---------- */
.grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; padding: 12px;
}
.card {
    background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 2px 10px rgba(26, 29, 34, .05);
    display: block;
}
.card .pic {
    position: relative; width: 100%; aspect-ratio: 3 / 4;
    background: #EEF0F4; overflow: hidden;
}
.card .pic img { width: 100%; height: 100%; object-fit: contain; }
.card .pic .ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #CBD5E1, #94A3B8);
    color: rgba(255, 255, 255, .92);
    font-size: 52px; font-family: "Songti SC", serif;
}
.card .info { padding: 8px 10px 12px; }
.card .name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.card .meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sub); margin-top: 3px; }
.card .meta .g { font-weight: 700; font-size: 12px; }
.card .meta .g.m { color: var(--blue); }
.card .meta .g.f { color: var(--rose); }
.empty-state { padding: 64px 20px; text-align: center; color: var(--sub); font-size: 14px; }

/* 轻动效：卡片入场 */
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise .42s cubic-bezier(.22, .61, .36, 1) both; }

.feed-note {
    padding: 10px 14px 2px; font-size: 12px; color: var(--sub); line-height: 1.6;
}

/* ---------- 线下活动 ---------- */
.acts {
    padding: 12px 12px 4px; display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 26px; align-items: stretch;
}
.act {
    background: #fff; border-radius: var(--radius); overflow: hidden;
    border: 1px solid #E6E9EE;
    box-shadow: 0 3px 16px rgba(26, 29, 34, .07);
    display: flex; flex-direction: column; min-width: 0;
}
.act-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #F3F4F6; overflow: hidden; flex: 0 0 auto; }
.act-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.act-cover .act-ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, #FFD7C9, #F7A88C);
    color: rgba(255, 255, 255, .95); font-size: 15px; letter-spacing: 2px;
}
.act-state {
    position: absolute; right: 10px; top: 10px;
    font-size: 11px; padding: 3px 9px; border-radius: 999px; color: #fff;
    background: rgba(0, 0, 0, .38); backdrop-filter: blur(4px);
}
.act-state.open { background: linear-gradient(135deg, #FF7A5C, #F4403C); }
.act-tag {
    position: absolute; left: 10px; bottom: 10px;
    font-size: 11px; font-weight: 500; color: #fff;
    padding: 3px 9px; border-radius: 4px; background: rgba(0, 0, 0, .34);
    backdrop-filter: blur(4px);
}
.act-body {
    padding: 12px 14px 14px; flex: 1 1 auto;
    display: flex; flex-direction: column; min-width: 0;
}
.act-body h3 {
    font-size: 16px; line-height: 1.45; font-weight: 700; margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: break-word;
}
.act-line {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 12.5px; color: #6B7280; margin: 0 0 5px; min-width: 0;
}
.act-line svg { flex: 0 0 auto; color: #9CA3AF; margin-top: 1px; }
.act-line span { min-width: 0; word-break: break-word; }

/* 地址一行：可点，点了弹地图 */
.act-place {
    width: 100%; padding: 4px 6px 4px 0; margin: 0 0 6px;
    border: 0; border-radius: 8px; background: none; cursor: pointer;
    font: inherit; font-size: 12.5px; color: #6B7280; text-align: left;
}
.act-place:hover { background: #F7F8FA; color: #1A1D22; }
.act-place:hover .map-go { color: #F4403C; }
.act-place .map-go {
    flex: 0 0 auto; margin-left: auto; font-style: normal;
    font-size: 11.5px; color: #9CA3AF; align-self: center;
}
.act-place:focus-visible { outline: 2px solid #F4403C; outline-offset: 1px; }
.act-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: auto; padding-top: 10px; border-top: 1px solid #F3F4F6;
}
.act { cursor: pointer; }
.act:focus-visible { outline: 2px solid #F4403C; outline-offset: 2px; }
/* 卡片底部：左边这场签到补多少红心，右边我的报名状态 + 查看详情 */
.act-hearts {
    font-size: 12.5px; font-weight: 600; color: #F4403C;
    background: #FFF1EE; border: 1px solid #FFD9D0;
    padding: 4px 10px; border-radius: 999px;
}
.act-more {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #9CA3AF;
}
.act-more em { font-style: normal; }
.act-more b { font-weight: 400; font-size: 14px; line-height: 1; margin-top: -1px; }
.act-my { font-style: normal; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; }
.act-my.approved { color: #18794E; background: #EEF7F1; border: 1px solid #CBE7D6; }
.act-my.pending { color: #8A5A00; background: #FFF8E8; border: 1px solid #F2DFB4; }
.act-my.rejected { color: #B42318; background: #FFF1EE; border: 1px solid #FFD9D0; }
@media (hover: hover) {
    .act { transition: transform .18s ease, box-shadow .18s ease; }
    .act:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26, 29, 34, .09); }
}


/* ---------- 底部导航 ---------- */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-around;
    max-width: 640px; margin: 0 auto;
    height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
}
.tabbar .item { flex: 1; text-align: center; font-size: 11px; color: var(--sub); }
.tabbar .item.active { color: var(--red); font-weight: 600; }
.tabbar .item .ico { display: block; margin: 0 auto 1px; width: 21px; height: 21px; }
.tabbar .plus { flex: 0 0 64px; display: flex; justify-content: center; }
.tabbar .plus span {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(150deg, #FF6A5E, #EF322E);
    color: #fff; font-size: 26px; line-height: 44px; font-weight: 300;
    box-shadow: 0 6px 16px rgba(244, 64, 60, .38);
    display: block; text-align: center;
}

/* ---------- 个人主页 ---------- */
.profile { background: #fff; }
.hero { position: relative; min-height: 260px; background: #E9EDF2; overflow: hidden; }
.hero img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; }
.hero .ph {
    width: 100%; height: 100%; min-height: 260px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #C6D0DC, #8C9BAA);
    color: rgba(255, 255, 255, .9); font-size: 96px; font-family: "Songti SC", serif;
}

/* 多图：左右翻动（横向滚动吸附，触摸和按钮都能翻） */
.hero .slides {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hero .slides::-webkit-scrollbar { display: none; }
.hero .slide {
    flex: 0 0 100%; width: 100%; scroll-snap-align: start;
    display: flex; align-items: center; justify-content: center;
    background: #E9EDF2;
}
.hero .slide img { max-height: 72vh; }
.hero .h-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .34); color: #fff; cursor: pointer;
    font-size: 18px; line-height: 1; backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.hero .h-nav.prev { left: 10px; }
.hero .h-nav.next { right: 10px; }
.hero .h-nav:disabled { opacity: .28; }
.hero .p-count {
    position: absolute; right: 12px; bottom: 12px;
    font-size: 11.5px; color: #fff; padding: 2px 9px; border-radius: 999px;
    background: rgba(0, 0, 0, .42); backdrop-filter: blur(4px);
}
.hero .back {
    position: absolute; left: 14px; top: 14px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0, 0, 0, .34); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; backdrop-filter: blur(4px);
}
.hero .idx { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 5px; }
.hero .idx i {
    width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .55); display: block;
}
.hero .idx i.on { background: #fff; width: 14px; border-radius: 3px; }
.hero.slider .idx { left: 50%; right: auto; transform: translateX(-50%); bottom: 14px; }
.hero .idx i { cursor: pointer; }

.p-head { padding: 14px 16px 0; }
.p-name-row { display: flex; align-items: center; gap: 8px; }
.p-name { font-size: 23px; font-weight: 700; letter-spacing: .5px; }
.p-gender {
    font-size: 11px; padding: 1px 7px; border-radius: 4px;
    background: #EEF4FF; color: var(--blue);
}
.p-gender.f { background: #FFF0F5; color: var(--rose); }
.p-sub { font-size: 13px; color: var(--sub); margin-top: 4px; }
.p-idrow {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
    font-size: 13px; color: var(--sub);
}
.p-idrow b { color: var(--ink); font-weight: 600; letter-spacing: .5px; }
.copy-btn {
    font-size: 11px; color: var(--red); border: 1px solid #FFD3D1;
    border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}

.popular {
    margin: 14px 16px 0; padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFF4F2 0%, #FFEBE8 60%, #FFE3DF 100%);
}
.popular .ttl { display: flex; align-items: center; justify-content: space-between; }
.popular .ttl b { font-size: 15px; }
.popular .ttl .hint { font-size: 11px; color: #B4726E; }
.popular .nums { display: flex; margin-top: 10px; }
.popular .num { flex: 1; }
.popular .num em { font-style: normal; font-size: 22px; font-weight: 700; color: var(--red); letter-spacing: .5px; }
.popular .num span { display: block; font-size: 11px; color: #8A6A66; margin-top: 1px; }
.popular .num + .num { border-left: 1px solid rgba(196, 110, 104, .18); padding-left: 14px; }

.gifts { margin: 16px 16px 0; }
.gifts .ttl { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.gifts .row { display: flex; gap: 10px; flex-wrap: wrap; }
.gift {
    width: 62px; text-align: center; font-size: 11px; color: var(--sub);
}
.gift .box {
    width: 52px; height: 52px; margin: 0 auto 4px; border-radius: 12px;
    background: #FFF1F0; display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #F07A75;
}

.about { padding: 18px 16px 0; }
.about .ttl {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 700; margin-bottom: 6px;
}
.about .ttl::before {
    content: ""; width: 3px; height: 14px; background: var(--red); border-radius: 2px; display: block;
}
.kv { display: flex; padding: 11px 0; border-bottom: 1px solid #F4F5F7; font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv .k { flex: 0 0 72px; color: var(--sub); }
.kv .v { flex: 1; min-width: 0; word-break: break-word; }
.kv.wide { display: block; }
.kv.wide .k { display: block; flex: none; margin-bottom: 4px; }

.essay { padding: 6px 16px 0; }
.essay .row { display: flex; padding: 12px 0; border-bottom: 1px solid #F4F5F7; }
.essay .row:last-child { border-bottom: 0; }
.essay .k { flex: 0 0 72px; color: var(--sub); font-size: 14px; }
.essay .v { flex: 1; font-size: 14px; line-height: 1.8; color: #40454D; white-space: pre-wrap; }
.profile .foot { padding: 24px 16px 30px; font-size: 12px; color: #B4B9C0; text-align: center; }

.actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    max-width: 640px; margin: 0 auto;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    display: flex; gap: 10px;
}
.actionbar .btn { flex: 1; }
.actionbar .btn.secondary { flex: 0 0 96px; }

/* ---------- 弹层 ---------- */
.modal-mask {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(20, 22, 26, .5);
    display: none; align-items: center; justify-content: center; padding: 24px;
}
.modal-mask.show { display: flex; }
.modal {
    width: 100%; max-width: 360px;
    background: #fff; border-radius: 18px; padding: 22px 20px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.modal h3 { margin: 0 0 6px; font-size: 18px; }
.modal p { margin: 0; font-size: 13px; color: var(--sub); line-height: 1.7; }
.mm-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding: 12px 14px;
    background: #F7F8FA; border-radius: 12px;
}
.mm-row .k { font-size: 11px; color: var(--sub); display: block; }
.mm-row .v { font-size: 16px; font-weight: 600; letter-spacing: .5px; }
.mm-row button {
    font-size: 12px; color: var(--red); border: 1px solid #FFD3D1;
    border-radius: 6px; padding: 3px 8px;
}
.mm-row .call {
    font-size: 12px; color: #fff; border-radius: 6px; padding: 4px 10px;
    background: linear-gradient(135deg, #FF8A4C, #F4403C);
}
.modal .actions { display: flex; gap: 10px; margin-top: 16px; }
.modal .actions .btn { height: 44px; font-size: 15px; }

/* ---------- 活动详情弹层（v5.9） ---------- */
.act-modal { max-width: 420px; max-height: 86vh; overflow: auto; padding-top: 18px; }
.act-m-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.act-m-head h3 { margin: 0; font-size: 18px; line-height: 1.45; }
.act-m-state {
    flex: 0 0 auto; font-size: 11px; padding: 3px 9px; border-radius: 999px;
    color: #fff; background: #9CA3AF; margin-top: 2px;
}
.act-m-state.open { background: linear-gradient(135deg, #FF7A5C, #F4403C); }
.act-m-state.closed { background: #C7CBD2; }
.act-m-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.act-m-tag {
    font-size: 11.5px; color: #8A5A00; background: #FFF8E8;
    border: 1px solid #F2DFB4; padding: 2px 8px; border-radius: 999px;
}
.act-m-rows .mm-row { margin-top: 8px; padding: 10px 12px; }
.act-m-rows .mm-row .v { font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.5; }
.act-m-rows .mm-row button { flex: 0 0 auto; white-space: nowrap; align-self: flex-start; margin-top: 4px; }
.act-m-sec { margin-top: 14px; }
.act-m-sec .k { display: block; font-size: 11px; color: var(--sub); }
.act-m-sec .k b { font-size: 15px; color: var(--ink); margin: 0 2px; }
.act-m-tip { font-style: normal; font-size: 11px; color: #9CA3AF; margin-left: 6px; }
.act-m-text {
    font-size: 13px; color: #374151; line-height: 1.75; margin: 6px 0 0;
    white-space: pre-line;
}
.act-m-people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.act-m-person {
    font-size: 13px; color: var(--ink); background: #F5F6F8;
    padding: 5px 12px; border-radius: 999px;
}
.act-m-empty { font-size: 12.5px; color: #9CA3AF; }
.act-m-contact { margin-top: 14px; font-size: 12px; color: var(--sub); }
.act-m-contact button {
    font-size: 11.5px; color: var(--red); border: 1px solid #FFD3D1;
    border-radius: 6px; padding: 2px 8px; margin-left: 4px;
}

/* ---------- 地图弹层 ---------- */
.map-modal { max-width: 400px; }
.map-addr { margin-top: 8px; font-size: 13px; line-height: 1.65; color: #40454d; }
.map-box { margin-top: 12px; border-radius: 12px; overflow: hidden; background: #F1F2F4; }
.map-canvas { position: relative; height: 220px; overflow: hidden; }
.map-canvas img { position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none; }
.map-canvas .pin {
    position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
    margin: -7px 0 0 -7px; border-radius: 50%;
    background: #F4403C; border: 3px solid #fff;
    box-shadow: 0 0 0 6px rgba(244, 64, 60, .18);
}
.map-canvas .pin-label {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -34px);
    background: rgba(255, 255, 255, .94); color: #1A1D22;
    font-size: 11.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12); max-width: 82%; overflow: hidden; text-overflow: ellipsis;
}
.map-hint { margin-top: 10px; }
.map-acts { display: flex; gap: 8px; margin-top: 14px; }
.map-acts .btn { flex: 1 1 0; min-width: 0; height: 42px; font-size: 13px; padding: 0 6px; white-space: nowrap; }

/* ---------- 发布 ---------- */
.publish { background: var(--bg); }
.section {
    background: #fff; margin: 10px 0; padding: 16px;
    border-radius: 0;
}
.section .h {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.section .h b { font-size: 15px; }
.section .h span { font-size: 12px; color: var(--sub); }
.form-row { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid #F4F5F7; gap: 10px; }
.form-row:last-child { border-bottom: 0; }
.form-row .lbl { flex: 0 0 76px; font-size: 14px; color: #5A6068; }
.form-row .lbl em { color: var(--red); font-style: normal; margin-left: 2px; }
.form-row .ctl { flex: 1; min-width: 0; }
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
    width: 100%; border: 0; outline: none; background: transparent;
    font-size: 15px; padding: 12px 0; color: var(--ink);
    appearance: none; -webkit-appearance: none;
}
.form-row textarea { resize: vertical; min-height: 92px; line-height: 1.7; }
.form-row select { color: var(--ink); }
.form-row .unit { flex: 0 0 auto; font-size: 13px; color: var(--sub); }
.hint { font-size: 12px; color: var(--sub); line-height: 1.6; padding: 6px 0 2px; }

.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.photo {
    position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #F1F2F4;
}
.photo img { width: 100%; height: 100%; object-fit: contain; }
.photo .del {
    position: absolute; right: 4px; top: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; line-height: 22px; text-align: center;
}
.upload-tile {
    aspect-ratio: 1 / 1; border-radius: 10px; border: 1px dashed #D6D9DE;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--sub); font-size: 12px; gap: 4px; background: #FAFBFC; cursor: pointer;
}
.upload-tile .plus { font-size: 24px; line-height: 1; color: #B9BEC6; }
.upload-tile[hidden] { display: none; }
.seg { display: flex; gap: 8px; padding: 6px 0; }
.seg-item { flex: 1; }
.seg-item input { display: none; }
.seg-item em {
    display: block; text-align: center; padding: 9px 0; border-radius: 10px;
    background: #F6F7F9; color: #5A6068; font-style: normal; font-size: 14px;
    border: 1px solid transparent;
}
.seg-item input:checked + em {
    background: #FFF1F0; color: var(--red); border-color: #FFD3D1; font-weight: 600;
}
.status-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6;
    margin: 10px 0 0;
}
.status-banner.pending { background: #FFF8E8; color: #8A5A00; }
.status-banner.rejected { background: #FFF1F0; color: #B02A23; }
.status-banner.approved { background: #EEF7F1; color: #18794E; }
.fixed-submit {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    max-width: 640px; margin: 0 auto;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line);
}

/* ---------- 我的 ---------- */
.me { background: var(--bg); }
.me-head {
    background: #fff; padding: 18px 16px;
    display: flex; align-items: center; gap: 14px;
}
.avatar {
    width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: linear-gradient(145deg, #CBD5E1, #94A3B8);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 24px; font-weight: 600;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.me-head .who { flex: 1; min-width: 0; }
.me-head .who b { font-size: 18px; }
.me-head .who .muted { display: block; margin-top: 2px; }
.pill {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: #F1F2F4; color: #5A6068;
    white-space: nowrap; flex: 0 0 auto; align-self: center;
}
.pill.approved { background: #EEF7F1; color: #18794E; }
.pill.pending { background: #FFF8E8; color: #8A5A00; }
.pill.rejected { background: #FFF1F0; color: #B02A23; }

/* 红心：只在「我的」页面出现 */
.hearts-card {
    background: #fff; margin-top: 10px; padding: 16px;
    display: flex; align-items: center; gap: 12px;
}
.hearts-card .ico { flex: 0 0 auto; }
.hearts-card .hc-main { min-width: 0; }
.hearts-card .hc-top { display: flex; align-items: baseline; gap: 6px; }
.hearts-card .hc-top b { font-size: 13px; color: var(--sub); font-weight: 500; }
.hearts-card .hc-num { font-size: 22px; font-weight: 700; color: #E4393C; line-height: 1.1; }
.hearts-card .hc-unit { font-size: 13px; color: #E4393C; }
.hearts-card .hc-sub { font-size: 12px; color: var(--sub); margin-top: 4px; line-height: 1.6; }

.rows { background: #fff; margin-top: 10px; }
.row-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #F4F5F7; font-size: 14px; gap: 12px;
}
.row-item:last-child { border-bottom: 0; }
.row-item .main { min-width: 0; }
.row-item .main b { font-size: 14px; display: block; }
.row-item .main .muted { margin-top: 2px; }
.chev { color: #C3C7CD; font-size: 16px; }

@media (min-width: 560px) {
    .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px 14px 6px; }
    .act-body { padding: 12px 14px 13px; }
    .act-body h3 { font-size: 15px; }
}

@media (min-width: 760px) {
    .app { max-width: 860px; }
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px; }
    .acts { gap: 16px; padding: 16px 16px 8px; }
    .actionbar, .fixed-submit { max-width: 860px; }
    .login { max-width: 560px; min-height: auto; margin: 0 auto; }
    .hero img { max-height: 560px; }
    .publish, .me { border-radius: 16px; overflow: hidden; }

    /* 个人主页：封面图与内容并排，图片按原比例完整显示 */
    .profile {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        column-gap: 30px;
        align-items: start;
        padding-bottom: 96px;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
    }
    .profile .hero { height: auto; max-height: 640px; align-self: start; }
    .profile .hero img { max-height: 640px; }
    .profile .p-main { min-width: 0; }
    .profile .about {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
    }
    .profile .about .ttl { grid-column: 1 / -1; }
    .profile .kv.wide { grid-column: 1 / -1; }
}

@media (min-width: 1080px) {
    .app { max-width: 1080px; }
    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 20px; }
    .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 20px 20px 10px; }
    .actionbar, .fixed-submit { max-width: 1080px; }
    .login-card { max-width: 440px; margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* 我的签到码：二维码本身是 SVG，按比例缩放不受屏幕密度影响 */
.qr-card {
    background: #fff; margin-top: 10px; padding: 14px 16px;
    display: flex; align-items: center; gap: 14px;
}
.qr-card .qr-box {
    flex: 0 0 auto; width: 132px; height: 132px; padding: 4px;
    border: 1px solid #EDEFF2; border-radius: 10px;
}
.qr-card .qr-box svg { display: block; width: 100%; height: 100%; }
.qr-card .qr-main { min-width: 0; }
.qr-card .qr-main b { font-size: 15px; display: block; }
.qr-card .qr-code {
    margin-top: 8px; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 15px; font-weight: 700; letter-spacing: .08em; color: #15181C;
}
@media (max-width: 359px) {
    .qr-card { align-items: flex-start; }
    .qr-card .qr-box { width: 112px; height: 112px; }
}