/* ════════════════════════════════════════════════════════════
   CHASKI Design System · shared.css
   Single source of truth — extracted from 库.html (primary)
   + visitor-page classes from 他人库 / RYAN库 / CHASKI精选
   ════════════════════════════════════════════════════════════ */

/* 状态类约定：选中/激活统一用 .active，开启状态用 .on，禁用用 [disabled] */

/* ── 0. CSS Variables ─────────────────────────────────────── */
:root {
    --bg:         #F2F2F2;
    --bg-d:       #E8E8E8;
    --red:        #FF5A5F;
    --shadow-out: 6px 6px 14px #d5d5d5, -6px -6px 14px #ffffff;
    --shadow-in:  inset 3px 3px 7px #c8c8c8, inset -3px -3px 7px #ffffff;
    /* 硬质材质层（第 6 档）· 只给能点的控件，展示类保持软拟物 */
    --metal-face: linear-gradient(180deg, #fbfbfb 0%, #ededed 48%, #d9d9d9 100%);
    --metal-edge: linear-gradient(180deg, #ffffff 0%, #b4b4b4 100%);
    --metal-brush: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, rgba(0,0,0,.035) 1px 2px);
    --well-face:  linear-gradient(180deg, #6f6f6f 0%, #8d8d8d 100%);
    --well-depth: inset 0 4px 8px rgba(0,0,0,.45), inset 0 -2px 4px rgba(255,255,255,.22);
    --live:       var(--red);
    --t-live-on:  .01s;
    --t-live-off: 1s;
    /* Safe-area handling — 所有 sticky/fixed 顶栏统一用 */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --header-pad-top: max(20px, calc(env(safe-area-inset-top, 0px) + 12px));
    --nav-pad-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px));
}

/* 页面切换平滑过渡 — 减少底部 nav 闪屏感 */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }

/* ════════════════════════════════════════════════════════════
   MVP 通用组件（DRY 重构 · 全局唯一定义）
   注：以下选择器原本散落在 discover/me/publish/swap/auth 各 inline style
       现统一收口在此处，HTML 内不再重复定义
   ════════════════════════════════════════════════════════════ */

/* ── 重置 + 基础 ──────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
/* Alpine.js 加载前隐藏，避免页面闪烁出现 "0 件" 瞬间 */
[x-cloak] { display: none !important; }
/* 强制为滚动条留出固定空间，避免跨页面切换时 viewport 宽度跳变，
   导致 .bottom-nav 的 transform:translateX(-50%) 居中位置左右微移 */
html { scrollbar-gutter: stable; }
body {
    background: #F2F2F2;
    color: #3a3a3a;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh; margin: 0;
    overflow-x: hidden;
    overflow-y: scroll; /* fallback: 老浏览器没有 scrollbar-gutter 时强制纵向滚动条 */
    display: flex; justify-content: center;
}

/* ── 移动 app 容器 ───────────────────────────────── */
.app {
    width: 100%; max-width: 420px;
    padding: 0 0 120px;
}

/* ── 顶部 header（sticky+blur），三栏 flex 布局 ─── */
/* 注：discover.html 的 header 是垂直堆，自定义；这里只给 publish/me/swap 用 */
.auth-page-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(242,242,242,0.94);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.6);
    padding: var(--header-pad-top, 20px) 20px 14px;
    display: flex; align-items: center; justify-content: space-between;
}
.page-title { font-size: 16px; font-weight: 800; }

/* ── 输入框 ──────────────────────────────────────── */
.input-field, .auth-input-field {
    width: 100%; padding: 13px 16px;
    font-size: 14px; color: #333;
    background: #EAEAEA; border-radius: 13px;
    box-shadow: inset 3px 3px 7px #c8c8c8, inset -3px -3px 7px #ffffff;
    border: none; outline: none;
    font-family: inherit; box-sizing: border-box;
}
.input-field::placeholder, .auth-input-field::placeholder { color: #bbb; }
.input-field:focus, .auth-input-field:focus {
    box-shadow: inset 3px 3px 7px #bebebe, inset -3px -3px 7px #ffffff,
                0 0 0 2px rgba(255,90,95,0.15);
}
textarea.input-field, textarea.auth-input-field { min-height: 64px; resize: none; line-height: 1.5; }

/* ── 全局 Toast ──────────────────────────────────── */
.toast {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
    background: rgba(50,50,50,0.92); color: white;
    padding: 12px 20px; border-radius: 14px;
    font-size: 13px; font-weight: 600;
    z-index: 100; backdrop-filter: blur(10px);
}


/* ── 底部固定导航（全局唯一定义，DRY） ─────────────── */
.bottom-nav {
    position: fixed; bottom: var(--nav-pad-bottom, 16px);
    left: 50%; transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 388px;
    display: flex; gap: 10px;
    z-index: 60;
}
.nav-pill {
    /* flex: 1 是场景假设（假设父是 flex 容器均分），移到 .bottom-nav 上下文声明 */
    height: 56px;
    background: #F2F2F2; border-radius: 18px;
    box-shadow: 6px 6px 14px #d1d1d1, -6px -6px 14px #ffffff;
    border: 1px solid rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #555;
    cursor: pointer; text-decoration: none;
    font-family: inherit; /* 给 button 元素继承 body font */
    transition: all .15s;
}
/* bottom-nav 场景下 nav-pill 均分父容器 */
.bottom-nav .nav-pill { flex: 1; }
.nav-pill.primary {
    background: #FF5A5F; color: white;
    box-shadow: 6px 6px 14px #e8c4c4, -4px -4px 10px #ffffff;
}
/* 当前项：红底（.primary）已经把"你在这"说清楚了，不再叠灰色内阴影——
   叠上去会盖掉 .primary 的红外阴影，把红色糊成脏红。
   全站 24 个 nav-pill 里 .active 从未脱离 .primary 单独出现过。 */
.nav-pill.active:not(.primary) {
    box-shadow: inset 3px 3px 7px #bebebe, inset -3px -3px 7px #ffffff;
}
.nav-pill:active {
    box-shadow: inset 3px 3px 7px #bebebe, inset -3px -3px 7px #ffffff;
    transform: scale(0.97);
}
.nav-pill.primary:active {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
}
.nav-pill:disabled,
.nav-pill.primary:disabled {
    background: #ccc; box-shadow: none; cursor: not-allowed; color: white;
}

/* ── 0.5 全局 disabled 按钮 ───────────────────────────────── */
button[disabled] {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    color: white;
    opacity: 0.7;
}

/* ── 20. 通用 modal（弹层） ───────────────────────── */
.modal-mask {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: flex-end; justify-content: center;
}
@media (min-height: 640px) {
    .modal-mask { align-items: center; }
}
.modal-sheet {
    width: 100%; max-width: 420px;
    background: #F2F2F2;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.18);
    padding: 22px 20px calc(20px + var(--safe-bottom, 0px));
    max-height: 86vh; overflow-y: auto;
}
@media (min-height: 640px) {
    .modal-sheet { border-radius: 22px; }
}
.modal-handle {
    width: 38px; height: 4px; border-radius: 4px;
    background: #ccc; margin: 0 auto 16px;
}
.modal-title {
    font-size: 15px; font-weight: 800; color: #333;
    margin-bottom: 4px;
}
.modal-sub {
    font-size: 11.5px; color: #999; margin-bottom: 18px; line-height: 1.6;
}
.modal-actions {
    display: flex; gap: 10px; margin-top: 6px;
}
.modal-btn {
    flex: 1; height: 46px;
    border: none; border-radius: 13px;
    font-size: 13px; font-weight: 800; font-family: inherit;
    cursor: pointer; transition: all .15s;
}
.modal-btn.primary {
    background: #FF5A5F; color: white;
    box-shadow: 4px 4px 10px #e8c4c4, -3px -3px 8px #ffffff;
}
.modal-btn.primary:active {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
    transform: scale(0.98);
}
.modal-btn.primary:disabled {
    background: #ccc; box-shadow: none; cursor: not-allowed;
}
.modal-btn.alt {
    background: #F2F2F2; color: #888;
    box-shadow: 3px 3px 8px #d5d5d5, -3px -3px 8px #ffffff;
    border: 1px solid rgba(255,255,255,0.7);
}
.modal-btn.alt:active {
    box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
}

/* ════════════════════════════════════════════════════════════
   V1.2 雪季预备役 · 共享组件（DRY 重构 · 单一定义源）
   ════════════════════════════════════════════════════════════ */

/* ── 22. 状态 pill（exchanges.status 通用）─── */
.exchange-status-pill {
    display: inline-block;
    font-size: 10px; font-weight: 800;
    padding: 4px 9px; border-radius: 7px;
    white-space: nowrap;
    letter-spacing: 0.04em;
}
.exchange-status-pill.lg {
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 9px;
    letter-spacing: 0.05em;
}
.exchange-status-pill.pending    { background: #EAEAEA; color: #888; }
.exchange-status-pill.unlocked   { background: rgba(255,90,95,0.12); color: #FF5A5F; }
.exchange-status-pill.rejected   { background: #F3F4F6; color: #6B7280; }

/* ── 22.5 加载中状态（通用 UI 零件，居中文字+宽松内边距）──── */
.loading-state {
    text-align: center; padding: 80px 20px; color: #aaa; font-size: 13px;
}

/* ── 23. 空状态卡片 ─────────────────────────────── */
.empty-state {
    margin: 24px 16px;
    padding: 50px 24px;
    background: #F2F2F2; border-radius: 16px;
    box-shadow: inset 3px 3px 7px #d5d5d5, inset -3px -3px 7px #ffffff;
    text-align: center;
}
.empty-state .text {
    font-size: 13px; color: #888; font-weight: 700;
}
.empty-state-sub {
    font-size: 11px; color: #bbb; margin-top: 6px; line-height: 1.6;
}
.empty-state-cta {
    display: inline-block; margin-top: 16px;
    padding: 10px 20px;
    background: #FF5A5F; color: white;
    border-radius: 10px;
    font-weight: 800; font-size: 12px;
    text-decoration: none;
}

/* ── 24. 选项格子（性别 / 风格 / MBTI / 星座 / 任务...）─── */
.opt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.opt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.opt-cell, .passioner-opt-cell, .space-opt-cell {
    padding: 10px 6px; text-align: center;
    background: #F2F2F2; border-radius: 10px;
    box-shadow: 2px 2px 6px #d5d5d5, -2px -2px 6px #ffffff;
    border: 1px solid rgba(255,255,255,0.7);
    font-size: 11px; font-weight: 700; color: #888;
    cursor: pointer; transition: all .12s; user-select: none;
}
.opt-cell.active, .passioner-opt-cell.active, .space-opt-cell.active {
    color: #FF5A5F;
    box-shadow: inset 2px 2px 5px #c2c2c2, inset -2px -2px 5px #ffffff;
}
.passioner-opt-cell.active.passioner-mbti   { color: #5B6CFF; }
.passioner-opt-cell.active.passioner-zodiac { color: #B45309; }
.opt-cell:active, .passioner-opt-cell:active, .space-opt-cell:active { transform: scale(0.96); }

/* ── 25. field-wrap（凹陷输入容器，shadow-in 风）── */
.field-wrap, .letter-field-wrap {
    background: #EAEAEA; border-radius: 12px;
    padding: 12px 14px;
    box-shadow: inset 3px 3px 7px #d0d0d0, inset -3px -3px 7px #ffffff;
    margin-bottom: 10px;
}
.field-label, .letter-field-label {
    font-size: 9px; font-weight: 700; color: #bbb;
    letter-spacing: .1em; display: block; margin-bottom: 5px;
}
.field-input, .letter-field-input {
    width: 100%; background: transparent; border: none; outline: none;
    font-size: 14px; font-weight: 600; color: #333; font-family: inherit; padding: 0;
}
.field-input::placeholder, .letter-field-input::placeholder { color: #c8c8c8; font-weight: 500; }
textarea.field-input, textarea.letter-field-input { resize: none; line-height: 1.6; min-height: 60px; }

/* 简版 inp（不带 label，纯输入框）*/
.inp {
    width: 100%; padding: 12px 14px;
    font-size: 13px; color: #333;
    background: #EAEAEA; border-radius: 11px;
    box-shadow: inset 2px 2px 5px #c8c8c8, inset -2px -2px 5px #ffffff;
    border: none; outline: none; font-family: inherit;
    box-sizing: border-box;
}
.inp::placeholder { color: #bbb; }
textarea.inp { min-height: 60px; resize: none; line-height: 1.5; }
select.inp {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'%3E%3Cpolyline points='3 6 7 10 11 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* modal 内的 section / label / row（modal 子组件）*/
.modal-sect {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.modal-sect:last-of-type { border-bottom: none; }
.modal-sect-label {
    font-size: 10px; font-weight: 800; color: #888;
    letter-spacing: 0.12em; margin-bottom: 10px;
    text-transform: uppercase;
}

/* ── 29. 顶部 sticky 视角切换器 ─────────────────── */
.view-bar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(242,242,242,0.94);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.6);
    padding: var(--header-pad-top, 20px) 16px 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.view-bar-left {
    display: flex; align-items: center; gap: 10px;
}
.view-bar-brand {
    font-size: 13px; font-weight: 800; color: #333;
    letter-spacing: 0.08em;
}
.view-bar-divider {
    width: 1px; height: 12px; background: #ccc;
}
.view-bar-current {
    font-size: 12px; font-weight: 700; color: #888;
}
.view-bar-current.have { color: #FF5A5F; }
.view-switch-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 10px;
    background: #FF5A5F; color: #fff;
    box-shadow: 3px 3px 7px rgba(255,90,95,0.35);
    border: 1px solid rgba(255,255,255,0.4);
    font-size: 11px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.view-switch-btn:active {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.18);
    transform: scale(0.97);
}


/* ═════════════════════════════════════════════════════════
 *  CHASKI 日历组件（fork v2.3）— 房东和雪友共用
 * ═════════════════════════════════════════════════════════ */
.cal-wrap { position: relative; overflow: hidden; }
.cal-header-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; }
.cal-day-name { text-align: center; font-size: 9px; font-weight: 700; color: #bbb; padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cal-cell {
    aspect-ratio: 1; border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 5px 3px 4px;
    cursor: pointer; transition: background .15s;
    position: relative;
}
.cal-cell:not(.cal-empty):not(.cal-blocked):hover { background: rgba(255,56,92,0.06); }
.cal-cell.cal-empty { cursor: default; }
.cal-cell.cal-blocked { cursor: not-allowed; pointer-events: none; }
.cal-cell.cal-selected { background: transparent; }
.cal-date { font-size: 10px; font-weight: 700; color: #888; line-height: 1; position: relative; z-index: 1; }
.cal-cell.cal-selected .cal-date { color: #FF5A5F; font-weight: 900; }
.cal-cell-stripe {
    position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent, transparent 3px,
        rgba(255,255,255,0.45) 3px, rgba(255,255,255,0.45) 4.5px
    );
}
/* .cal-cell-stripe.dark: 雪友视角不可选日期，加深斜纹（space-inspector 专用变体）*/
.cal-cell-stripe.dark {
    background: repeating-linear-gradient(
        -45deg,
        transparent, transparent 3px,
        rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4.5px
    );
}
.cal-slots {
    display: flex; gap: 1.5px; justify-content: center;
    position: relative; z-index: 1;
}
.cal-slot { width: 5px; height: 3px; border-radius: 1px; }
.cal-slot.empty { background: rgba(0,0,0,0.08); }
.cal-slot.M     { background: #60A5FA; }
.cal-slot.F     { background: #F9A8D4; }

/* 月份游标卡尺（调音台 fader 风格）*/
.month-dial-wrap { margin-top: 16px; position: relative; }
.month-ruler {
    position: relative; height: 48px; border-radius: 10px;
    background: #e2e2e2;
    /* 加深凹槽阴影：左上深、右下浅，让滑轨"陷"进去 */
    box-shadow: inset 4px 4px 9px #c3c3c3, inset -3px -3px 7px #ffffff;
    overflow: hidden; cursor: ew-resize; user-select: none;
}
/* 拨杆：竖向矩形，红色渐变（顶亮底深 = 上方光照），3 条 grip 横线 */
.month-cursor {
    position: absolute; top: 50%;
    width: 28px; height: 40px;
    margin-left: -14px; margin-top: -20px;
    background: linear-gradient(180deg, #FF858A 0%, #FF5A5F 55%, #D8474C 100%);
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.55);
    /* 多层阴影：外发光 + 投影 + 顶部高光 + 底部深色边缘 */
    box-shadow:
        0 7px 14px rgba(216,71,76,0.50),
        0 3px 5px rgba(0,0,0,0.22),
        inset 0 1.5px 0 rgba(255,255,255,0.5),
        inset 0 -2px 3px rgba(0,0,0,0.18);
    transition: left .22s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none; z-index: 3;
}
/* grip 横线（中间一条 + 两条 shadow 复制 = 总共 3 条平行线） */
.month-cursor::before {
    content: "";
    position: absolute;
    top: 50%; left: 5px; right: 5px;
    height: 1.5px;
    background: rgba(255,255,255,0.55);
    border-radius: 1px;
    transform: translateY(-50%);
    box-shadow:
        0 5px 0 rgba(255,255,255,0.4),
        0 -5px 0 rgba(255,255,255,0.4);
}
.month-cursor-glow {
    position: absolute; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(to right, transparent, rgba(255,90,95,0.10), transparent);
    transform: translateX(-50%);
    pointer-events: none; z-index: 1;
    transition: left .22s cubic-bezier(.34,1.56,.64,1);
}
.cal-slide-enter { animation: calSlideIn .28s cubic-bezier(.34,1.3,.64,1) both; }
.cal-slide-back  { animation: calSlideBack .28s cubic-bezier(.34,1.3,.64,1) both; }
@keyframes calSlideIn  { from { transform: translateX(40px); opacity:0; } to { transform: translateX(0); opacity:1; } }
@keyframes calSlideBack { from { transform: translateX(-40px); opacity:0; } to { transform: translateX(0); opacity:1; } }

/* ── 交换时长提示条（选完日期后，cal-wrap 下方立即可见）──
   通用零件：space-inspector 用"小时"，未来 tac/surf 可换任意单位
   本质行为：凹感提示条 + 关键数字红粗强调
   无 width / 无 margin 硬编码场景假设，调用方按需补外边距 */
.exchange-amount-hint {
    font-size: 11.5px; font-weight: 600; color: #666;
    text-align: center;
    padding: 8px 12px;
    margin-top: 10px;
    background: rgba(255,90,95,0.06);
    border-radius: 9px;
    border: 1px dashed rgba(255,90,95,0.25);
}
.exchange-amount-hint .amount-num {
    color: #FF5A5F;
    font-weight: 900;
    font-size: 13px;
}

/* 房东版日历：open_dates 已选中（珊瑚粉主 UI 色）*/
.cal-cell.cal-open {
    background: rgba(255,90,95,0.10);
    box-shadow: inset 0 0 0 1.5px rgba(255,90,95,0.5);
}
.cal-cell.cal-open .cal-date { color: #FF5A5F; font-weight: 900; }

/* 首图角标 */
.space-img-tile-badge {
    position: absolute; bottom: 3px; left: 3px;
    background: #FF5A5F; color: white;
    font-size: 9px; font-weight: 800; line-height: 1;
    padding: 3px 5px; border-radius: 4px;
    pointer-events: none;
    letter-spacing: 0.04em;
}

/* ── 26. 信件提交按钮（寄信 / 写申请信）──
   零件本身只定义【本质行为】：视觉、文字、可点击、有按下反馈
   不内置 width / 不假设布局上下文
   调用方按需加 modifier：
     .letter-submit-btn          → 自然宽（适合 flex 行内）
     .letter-submit-btn.full     → 占满父容器（适合独占一行的弹窗结尾）
*/
.letter-submit-btn {
    background: var(--bg);
    border-radius: 14px;
    padding: 14px 24px; text-align: center;
    box-shadow: var(--shadow-out);
    cursor: pointer; font-size: 14px; font-weight: 800; color: #E84E53;
    border: none; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.letter-submit-btn.full { width: 100%; padding: 14px; }
.letter-submit-btn:active {
    box-shadow: var(--shadow-in);
    transform: scale(0.98);
}
.letter-submit-btn:disabled {
    color: #999;                  /* 比全局 disabled 更深，跟自然背景对比可读 */
    background: var(--bg);        /* 保留 letter-submit-btn 原生背景，覆盖全局 #ccc */
    box-shadow: var(--shadow-out);
    opacity: 1;                   /* 覆盖全局 0.7 */
    cursor: not-allowed;
}

/* ── 26.5 信纸壳子（写信/回信弹窗复用）──
   雪友写申请信（space-inspector）和房东回信（space-have-exchanges）共用同一信纸样式 */
.letter-sheet {
    width: 100%; max-width: 420px;
    background: var(--bg); border-radius: 24px;
    padding: 28px 24px calc(28px + var(--safe-bottom, 0px));
    box-shadow: 0 -4px 40px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
    max-height: 86vh; overflow-y: auto;
    min-height: 0; /* flex item 内 overflow 生效的关键：否则超长内容（如邀请 modal 80 个日期）撑破 max-height 铺满屏 */
}
.letter-label {
    font-size: 9px; font-weight: 700; color: #bbb;
    letter-spacing: .12em; margin-bottom: 6px;
}
.letter-sheet-dates {
    font-size: 12px; color: #999; margin-bottom: 20px; line-height: 1.7;
}
.letter-sheet .letter-field-wrap { margin-bottom: 12px; }
.letter-hint {
    font-size: 11px; color: #999; line-height: 1.7;
    padding: 0 4px;
    margin: -4px 0 14px;
}
.letter-cancel {
    margin-top: 10px; text-align: center;
    font-size: 11px; color: #bbb; cursor: pointer;
}

/* ── 27. 空间标签胶囊（灰色凹陷，info / task tag）── */
/* merged from .info-pill (space-inspector) + .space-tag (space-want) */
.space-tag {
    font-size: 10.5px; font-weight: 700;
    padding: 5px 11px; border-radius: 8px;
    background: #EAEAEA; color: #666;
    box-shadow: inset 2px 2px 4px #c8c8c8, inset -2px -2px 4px #ffffff;
}

/* ── 27.1 技能标签小胶囊（比 .space-tag 更紧凑，wander 广场 / 申请卡片用）── */
/* merged from space-have-exchanges inline + wander inline style */
.space-tag-mini {
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 6px;
    background: #EAEAEA; color: #666;
    box-shadow: inset 1px 1px 3px #c8c8c8, inset -1px -1px 3px #ffffff;
}

/* ── 28. 对方联系方式（测试期开关打开时出现的一行）── */
.contact-line {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: 12px; font-weight: 800; color: #555;
    padding: 8px 14px; border-radius: 9px; background: white;
    box-shadow: inset 2px 2px 5px #d5d5d5, inset -2px -2px 5px #ffffff;
}

/* ── 31. 通用头像（三档尺寸）─────────────────── */
/* merged from .passioner-avatar (space-want/space-inspector) + .me-avatar (me.html) */
.passioner-avatar {
    border-radius: 50%; background: #ddd; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.85);
    object-fit: cover;
}
.passioner-avatar-sm {
    width: 32px; height: 32px;
    box-shadow: 2px 2px 5px #d5d5d5, -2px -2px 5px #ffffff;
    border: 1.5px solid rgba(255,255,255,0.8);
}
.passioner-avatar-md {
    width: 44px; height: 44px;
    box-shadow: 3px 3px 7px #d5d5d5, -3px -3px 7px #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff;
}
.passioner-avatar-lg {
    width: 60px; height: 60px;
    box-shadow: 4px 4px 9px #d5d5d5, -4px -4px 9px #ffffff;
    border: 2px solid rgba(255,255,255,0.8);
}

/* ── 31.5 通用拨杆零件（UI 零件类 · 物理开关风）──
   统一 toggle 拨杆，跨实体复用（spaces.is_active / parts[i].is_open / 未来任意 boolean 字段）
   两种尺寸：默认（80px 高，编辑表单用）/ .toggle-switch-sm（32px 高，列表卡片用）
*/
.toggle-switch {
    --t-h: 30px;
    --t-w: 130px;
    --t-pad: 2.5px;
    --t-radius: 10px;
    width: var(--t-w);
    height: var(--t-h);
    border-radius: var(--t-radius);
    /* 层1 外框金属 + 层2 内槽 */
    background-image: var(--well-face);
    box-shadow:
        var(--well-depth),
        0 1px 0 rgba(255,255,255,.9),
        0 2px 4px rgba(0,0,0,.18);
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: box-shadow .25s;
    border: 1px solid rgba(0,0,0,.28);
    padding: 0;
    font-family: inherit;
    flex-shrink: 0;
    isolation: isolate;
}
/* 层3 通电层：开态瞬亮、关态慢退（源件 0.01s / 1s 不对称时序）*/
.toggle-switch::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--live) 78%, #000) 0%, var(--live) 60%, color-mix(in srgb, var(--live) 82%, #fff) 100%);
    box-shadow: var(--well-depth);
    opacity: 0;
    transition: opacity var(--t-live-off) ease;
    pointer-events: none;
}
.toggle-switch.on::after {
    opacity: 1;
    transition: opacity var(--t-live-on) linear;
}

.toggle-switch-knob {
    position: absolute;
    top: var(--t-pad);
    bottom: var(--t-pad);
    left: var(--t-pad);
    width: calc(50% - var(--t-pad));
    border-radius: calc(var(--t-radius) - var(--t-pad));
    z-index: 2;
    /* 层4 旋钮金属：拉丝叠在正面渐变上（不用滚花，小尺寸下会退化成粗格）*/
    background-image: var(--metal-brush), var(--metal-face);
    background-blend-mode: overlay, normal;
    border: 1px solid rgba(255,255,255,.75);
    box-shadow:
        0 2px 5px rgba(0,0,0,.42),
        0 1px 1px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 2px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 6px;
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .03em;
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), color .15s;
    color: #FF5A5F;
    white-space: nowrap;
}
/* 方向约定：开 = 滑块在右（与手机系统开关一致），关 = 滑块在左。
   2026-10-12 纠正：此前是反的，开态滑块在左、看着像关，误触下架高发。 */
.toggle-switch.on .toggle-switch-knob {
    transform: translateX(100%);
}
.toggle-switch.off .toggle-switch-knob {
    transform: translateX(0);
    color: #888;
}

/* sm 变体（卡片列表用，更紧凑）*/
.toggle-switch-sm {
    --t-h: 26px;
    --t-w: 110px;
    --t-pad: 2px;
    --t-radius: 8px;
}
.toggle-switch-sm .toggle-switch-knob {
    font-size: 9.5px;
    gap: 3px;
    padding: 0 5px;
}

.toggle-switch:active .toggle-switch-knob {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.1);
    transform: translateX(0) scale(0.97);
}
.toggle-switch.on:active .toggle-switch-knob {
    transform: translateX(100%) scale(0.97);
}

/* ── 31.6 MBTI 极克制强调（passioner 副信息内联）──
   不变色不变大，只用字重 + 字间距让 4 字母在中性灰文中视觉跳出 */
.mbti-emphasis {
    font-weight: 800;
    letter-spacing: 0.15em;
}

/* ── 32. 内容卡片（主卡 + 紧凑卡）──────────────── */
/* .space-card: merged from .sec-card (space-inspector) + .space-card (space-want) */
.space-card {
    margin: 14px 16px;
    padding: 18px 18px;
    background: #F2F2F2; border-radius: 18px;
    box-shadow: var(--shadow-out);
    border: 1px solid rgba(255,255,255,0.6);
}
/* .space-card.clickable: 场景修饰符——仅在卡片可点击时加（overflow/cursor/transition 是场景假设，不内置进基础类）*/
.space-card.clickable {
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s;
}
.space-card.clickable:active { transform: scale(0.99); }

/* .space-card-compact: merged from .space-mini (space-have) + .req-card (space-have-exchanges) */
.space-card-compact {
    padding: 14px 16px;
    background: #F2F2F2; border-radius: 16px;
    box-shadow: var(--shadow-out);
    border: 1px solid rgba(255,255,255,0.6);
}

/* part tab（have 发布表单 + want 查看共用）*/
.part-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.part-tab {
    padding: 7px 14px; border-radius: 10px;
    background: #F2F2F2; color: #888;
    font-size: 12px; font-weight: 700;
    box-shadow: 3px 3px 7px #d5d5d5, -3px -3px 7px #ffffff;
    border: 1px solid rgba(255,255,255,0.7);
    cursor: pointer; user-select: none;
    transition: all 0.15s;
}
.part-tab.on {
    background: #FF5A5F; color: white;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.18);
}
.part-tab-add {
    color: #FF5A5F; font-weight: 800;
    border: 1.5px dashed rgba(255,90,95,0.4);
}
.part-tab-del {
    color: #999; font-weight: 700;
    border: 1.5px dashed rgba(0,0,0,0.15);
    background: #F2F2F2;
}
.part-tab-del:active {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);
}

/* ── part-current-title · 当前房间归属标识（part 详情段子标题，单/多 part 都显示）─── */
.part-current-title {
    font-size: 14px;
    font-weight: 800;
    color: #333;
    margin: 14px 0 8px;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

/* ── part-gallery · 2 列 grid 图组（part 层房间体验图，跨垂类通用）─── */
.part-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.part-gallery img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: inset 2px 2px 5px #d5d5d5, inset -2px -2px 5px #ffffff;
}

/* ── 32.5 onboarding 模式全局控制 ───────────────────
   body.onboarding-mode 时隐藏底部 nav 和 view-bar 切换按钮
   让新用户专注完成必填 3 项，不能跳出 */
body.onboarding-mode .bottom-nav { display: none !important; }
body.onboarding-mode .view-switch-btn { display: none !important; }

/* ── 32.6 profile 完善度进度条（me.html 专属）────────── */
.profile-progress {
    margin-top: 12px;
}
.profile-progress-bar {
    height: 4px;
    background: #E0E0E0;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #c8c8c8, inset -1px -1px 2px #ffffff;
    overflow: hidden;
}
.profile-progress-fill {
    height: 100%;
    background: #5B6CFF;
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-progress-fill.complete {
    background: #10B981;
}
.profile-progress-text {
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #999;
    letter-spacing: 0.02em;
}
.profile-progress-text.complete {
    color: #10B981;
}

/* ── 33.5 联系方式只读展示（profile card 内）─── */
.profile-contact-value {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.6;
    padding: 4px 0;
    word-break: break-all;
}

/* ── 33. 只读 profile 展平视图（me.html !viewingSelf）─── */
/* 区块容器，复用 passioner-sec 风格 */
.profile-readonly-sec {
    margin: 14px 16px;
    padding: 16px 18px;
    background: #F2F2F2; border-radius: 16px;
    box-shadow: var(--shadow-out);
    border: 1px solid rgba(255,255,255,0.6);
}
/* 区块标题（与 passioner-sec-head 一致）*/
.profile-readonly-head {
    font-size: 12px; font-weight: 800; color: #333;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.profile-readonly-head::before {
    content: ''; width: 4px; height: 14px;
    background: #FF5A5F; border-radius: 2px;
}
/* 单行字段（label + value）*/
.profile-field-row {
    display: flex; align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 13px;
}
.profile-field-row:last-child { border-bottom: none; }
.profile-field-label {
    font-size: 10px; font-weight: 700; color: #bbb;
    letter-spacing: .08em;
    flex-shrink: 0; min-width: 48px;
}
.profile-field-value {
    font-size: 13px; font-weight: 600; color: #333;
    line-height: 1.5;
}
/* 故事长文 */
.profile-story {
    font-size: 13px; font-weight: 500; color: #444;
    line-height: 1.75; padding: 2px 0;
    white-space: pre-wrap;
}
/* 技能 pill 行（只读版，不可点，灰底显示已选）*/
.profile-skill-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
}
.profile-skill-pill {
    padding: 5px 10px; border-radius: 8px;
    font-size: 11px; font-weight: 700;
    background: #5B6CFF; color: white;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.15);
}
/* 大图（ski photo / gear photo）*/
.profile-photo-lg {
    width: 100%; border-radius: 14px;
    object-fit: cover;
    max-height: 280px;
    box-shadow: var(--shadow-out);
    margin-top: 8px;
}
/* gear photo 方形小图（主力雪板）*/
.profile-photo-gear {
    width: 120px; height: 120px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: var(--shadow-out);
    margin-top: 8px;
}


/* ── 31.7 明信片（住期结束的一单）──────────────────────────
   <pax-exchange-card> 用。一张雪屋照片 + 地名天数，一个主按钮。
   展示类：保持软拟物；唯一能点的主按钮用品牌红。 */
pax-exchange-card{display:block}  /* 自定义元素默认是行内的，不写这句卡片会缩成内容宽 */
/* 明信片放在信卡里面：外层信卡已经凸起，这里不再叠一层阴影，免得卡中卡 */
.postcard{margin-top:12px;border-radius:14px;overflow:hidden}
.postcard-photo{position:relative;aspect-ratio:3/2;background:#d9d9d9 center/cover no-repeat}
.postcard-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
.postcard-photo.muted{filter:grayscale(1);opacity:.7}
.postcard-place{position:absolute;left:16px;bottom:30px;z-index:1;color:#fff;font-size:22px;font-weight:800;letter-spacing:.04em;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.postcard-range{position:absolute;left:16px;bottom:12px;z-index:1;color:rgba(255,255,255,.88);font-size:11px;letter-spacing:.04em}
.postcard-body{padding:12px 0 0;display:flex;flex-direction:column;gap:6px}
.postcard-cta{width:100%;min-height:46px;padding:13px 12px;border:none;border-radius:12px;background:var(--red);color:#fff;font:inherit;font-size:13px;font-weight:800;letter-spacing:.04em;cursor:pointer;box-shadow:3px 3px 8px rgba(255,90,95,.32)}
.postcard-cta:disabled{opacity:.6;cursor:default}
.postcard-ghost{flex:0 0 auto;min-height:46px;padding:13px 16px;border:none;border-radius:12px;background:var(--bg);color:#888;font:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-out)}
.postcard-row{display:flex;gap:8px}
.postcard-row .postcard-cta{flex:1}
.postcard-skip{align-self:center;background:none;border:none;color:#aaa;font:inherit;font-size:11px;cursor:pointer;min-height:36px;padding:8px 14px}  /* 字小、点击区不小 */
.postcard-ask{font-size:12px;color:#666;font-weight:700}
.postcard-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}  /* 三个原因永远一行，窄屏也不折成 2+1 */
.postcard-chip{min-width:0;min-height:42px;padding:10px 4px;white-space:nowrap;border:none;border-radius:10px;background:var(--bg);color:#555;font:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-out)}
.postcard-chip:active{box-shadow:var(--shadow-in)}
.postcard-done{text-align:center;font-size:12px;color:#999;padding:6px 0;letter-spacing:.04em}
.postcard-text{min-height:96px}


/* ── 32. 第一次来的人 · 一句话说清换宿 ──────────────────────
   乔布斯版（2026-10-19）：情报不开专栏，在用得到的地方出现。
   首页一句话 + 详情页「去之前要知道」，都链到同一篇讲解 guide.html。 */
.hero-lead{font-size:13px;font-weight:800;color:#2a2a2a;letter-spacing:.02em;line-height:1.6}
.hero-lead b{color:var(--red,#FF5A5F);font-weight:900}
.guide-link{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:12px;font-weight:700;color:var(--red,#FF5A5F);text-decoration:none;min-height:32px}
.know-list{display:flex;flex-direction:column;gap:12px}
.know-item{display:flex;gap:12px;align-items:flex-start}
.know-k{flex:0 0 36px;font-size:11px;font-weight:800;color:#999;letter-spacing:.06em;padding-top:2px}
.know-v{font-size:12.5px;color:#555;line-height:1.7}


/* ── 33. 电脑端（≥1024px）──────────────────────────────────
   手机是一条竖窗；电脑屏幕横着，房子照片应该铺开。
   只动外观：底部三按钮挪到顶部正中，列表页改网格，详情页加宽。数据和流程不动。 */
@media (min-width: 1024px) {
    /* 顶栏铺满屏宽，内容对齐到 1180 宽的中间区域 */
    .view-bar{
        width:100vw; margin-left:calc(50% - 50vw);
        padding:18px max(32px, calc(50vw - 590px)) 16px;
        min-height:72px;
    }
    /* 底部三按钮 → 顶部正中，像网站导航 */
    .bottom-nav{
        top:16px; bottom:auto; z-index:60;
        width:auto; max-width:none; gap:8px;
    }
    .bottom-nav .nav-pill{flex:0 0 auto; height:40px; padding:0 22px; border-radius:13px;
        box-shadow:4px 4px 10px #d6d6d6,-4px -4px 10px #ffffff}
    .bottom-nav .nav-pill.primary{box-shadow:4px 4px 10px #e8c4c4,-3px -3px 8px #ffffff}
    .app{padding-bottom:64px}

    /* 列表页：1180 宽，房子一排三张 */
    .app.app-wide{max-width:1228px; padding-left:24px; padding-right:24px}
    /* 详情页：760 宽，大图 */
    .app.app-mid{max-width:808px; padding-left:24px; padding-right:24px}
}


/* ── 34. 房东日历：状态看得见、点错能撤销 ───────────────────
   一行固定高度：平时是说明 +「全年开放」；点了第一天 → 那天红圈 + 「只要这一天」；
   连成一段 →「撤销」。高度不变，日历不会被挤得上下跳。 */
.cal-state-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;margin:10px 4px 8px;padding:7px 7px 7px 12px;border-radius:10px;background:rgba(0,0,0,0.035);font-size:11px;font-weight:600;color:#999;line-height:1.5;transition:background .15s,color .15s}
.cal-state-bar.waiting{background:rgba(255,90,95,0.08);color:#d9484d;font-weight:800}
.cal-state-bar.done{background:rgba(0,0,0,0.06);color:#444;font-weight:800}
.cal-state-bar button{flex:0 0 auto;min-height:32px;padding:0 12px;border:none;border-radius:8px;background:#fff;color:#FF5A5F;font:inherit;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.cal-cell.cal-anchor{box-shadow:inset 0 0 0 2px #FF5A5F;background:rgba(255,90,95,0.18)}


/* ── 35. 按钮：全站只有两种 ──────────────────────────────────
   .btn-primary 品牌红实心（一屏只该有一个主动作）· .btn-soft 浮起的白底次按钮
   修饰：.is-block 占满一行 · .is-center 居中 · .is-sm 小号 */
.btn-primary,.btn-soft{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 18px;border:none;border-radius:12px;font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-primary{background:var(--red,#FF5A5F);color:#fff;box-shadow:3px 3px 8px rgba(255,90,95,.3)}
.btn-soft{background:#F2F2F2;color:var(--red,#FF5A5F);box-shadow:3px 3px 7px #d5d5d5,-3px -3px 7px #ffffff}
.btn-primary:active,.btn-soft:active{transform:scale(.97);box-shadow:inset 2px 2px 5px rgba(0,0,0,.12)}
.btn-primary:disabled,.btn-soft:disabled{opacity:.6;cursor:default}
.is-block{display:flex;width:100%;min-height:44px;margin-top:14px}
.is-center{display:flex;margin:12px auto 0}
.is-sm{min-height:32px;padding:0 12px;font-size:11.5px}

/* ── 36. 管家查查（<pax-butler-letter>）──────────────────────── */
pax-butler-letter{display:block}
.manager-letter{margin-top:12px;padding:16px;border-radius:14px;background:#FBF8F3;text-align:left;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05)}
.manager-letter-head{display:flex;align-items:center;gap:10px}
.manager-letter-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.12)}
.manager-letter-avatar.sm{width:28px;height:28px;flex:0 0 auto}
.manager-letter-name{font-size:14px;font-weight:900;color:#2a2a2a}
.manager-letter-role{font-size:10.5px;color:#999;font-weight:700;letter-spacing:.04em;margin-top:1px}
.manager-letter-body{font-size:13px;color:#444;line-height:1.85;margin:12px 0 4px;text-align:left}
.manager-letter-qr{display:block;width:150px;height:150px;object-fit:contain;margin:12px auto 4px;border-radius:10px;background:#fff;padding:6px}
.manager-letter-id{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;font-size:12px;color:#888}
.manager-letter-id b{color:#FF5A5F}
.manager-letter-id button{min-height:32px;padding:0 12px;border:none;border-radius:8px;background:#fff;color:#FF5A5F;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.manager-letter.is-folded{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px}
.manager-letter-fold{flex:1;min-width:0;font-size:12px;color:#666;line-height:1.5}


/* ── 37. 提示卡：标题 + 一句话 + 一个按钮（可关）──────────────────
   房东招募、「下一站」追问、空状态共用一个结构。.is-tight 用在内容中间的小卡，.is-closable 右上角有 × */
.notice-card{margin:4px 16px 110px;padding:20px;border-radius:18px;background:#F2F2F2;text-align:center;
  box-shadow:inset 3px 3px 8px #d0d0d0,inset -3px -3px 8px #ffffff}
.notice-card.is-tight{position:relative;margin:0 16px 16px;padding:14px 40px 14px 16px;border-radius:14px;text-align:left}
.notice-card-title{font-size:15px;font-weight:900;color:#2a2a2a}
.notice-card-text{font-size:12.5px;color:#666;margin-top:6px;line-height:1.7}
.notice-card.is-tight .notice-card-text{margin-top:0;color:#555}
.notice-card-text b{color:#2a2a2a}
.notice-card .btn-soft{margin-top:12px}
.notice-card.is-tight .btn-soft{margin-top:8px}
.notice-card-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:none;background:none;color:#aaa;font-size:18px;cursor:pointer}
@media (min-width:1024px){ .notice-card{margin:8px 0 40px;padding:28px} .notice-card.is-tight{margin:0 0 18px;padding:14px 40px 14px 16px;max-width:520px} }

/* AI 代写的信：一行小字标注是哪个 AI 平台（透明，宪法 §10 公理 B） */
.letter-ai { margin-top: 6px; font-size: 10.5px; color: #999; letter-spacing: .02em; }

/* 毛玻璃解锁卡（镜面两边共用：雪友住完一次解锁其他雪屋 · 房东发布雪屋解锁全部雪友） */
.media-card { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; margin: 0 0 16px;
    background: #dfe6ee; box-shadow: var(--shadow-out, 6px 6px 14px #d1d1d1, -6px -6px 14px #ffffff); }
.media-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.media-card-glass { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 20px; text-align: center;
    background: rgba(255,255,255,0.26);
    -webkit-backdrop-filter: blur(9px) saturate(1.15); backdrop-filter: blur(9px) saturate(1.15); }
.media-card-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #fff; background: rgba(0,0,0,0.38);
    padding: 4px 10px; border-radius: 8px; }
.media-card-title { font-size: 22px; font-weight: 900; color: #1f2a36; letter-spacing: .04em; margin-top: 4px; }
.media-card-text { font-size: 13px; font-weight: 800; color: #2b3a48; line-height: 1.6; }
.media-card-hint { font-size: 11.5px; color: #3d4b58; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .media-card-bg { display: none; } .media-card { background: center/cover url('assets/unlock/hakuba-snow.jpg'); } }

/* 表单字段下的说明小字 */
.field-hint { font-size: 11px; color: #999; line-height: 1.6; margin-top: 6px; }
/* AI 代管的账号：名字旁一个小标（透明，宪法 §10 公理 B） */
.ai-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; color: #888; background: #EAEAEA;
  border-radius: 6px; padding: 1px 6px; vertical-align: middle; }