/* ── 三要素名片墙 · 病毒传播工具层（Phase 1 · 2026-10-10）──────────────
   复用 index.html 既有 CSS 变量（--az-* / --navy 系），零新依赖。
   挂载点：<section id="wall-hero"> 插入于 #pin-slots 与 #app 之间。
   红线：免费 / 公开可选 / 随时可删 / 不承诺效果 / 不按排名奖励刺激分享。 */

/* ── 照片墙容器 ── */
#wall-hero{margin:0 0 6px}
.wall-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 16px}
.wall-head h2{font-size:22px;font-weight:800;color:var(--az-ink);letter-spacing:.2px}
.wall-head h2 .cnt{color:var(--az-orange);font-variant-numeric:tabular-nums}
.wall-head .sub{font-size:13px;color:var(--az-mut);margin-top:4px}
.wall-cta{display:inline-block;background:linear-gradient(to bottom,var(--az-cta),var(--az-cta-d));
  color:#0f1111;font-weight:600;font-size:14px;border:1px solid #fcd200;border-radius:8px;
  padding:9px 22px;text-decoration:none;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.wall-cta:hover{background:linear-gradient(to bottom,var(--az-cta-d),#f0b800);text-decoration:none;color:#0f1111}

/* ── 瀑布流 masonry（纯 CSS，无 JS 布局依赖） ── */
.wall-grid{column-count:4;column-gap:14px}
@media(max-width:900px){.wall-grid{column-count:3}}
@media(max-width:680px){.wall-grid{column-count:2}}
@media(max-width:460px){.wall-grid{column-count:1}}

/* ── 单张墙卡：照片优先，无图色块兜底 ── */
.wall-tile{break-inside:avoid;margin:0 0 14px;background:var(--az-card);border:1px solid var(--az-line);
  border-radius:6px;overflow:hidden;cursor:pointer;position:relative;display:block;
  text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(15,17,17,.08),0 2px 6px rgba(15,17,17,.06);
  transition:box-shadow .15s,transform .06s}
.wall-tile:hover{box-shadow:0 4px 10px rgba(15,17,17,.16),0 10px 24px rgba(15,17,17,.10);transform:translateY(-1px)}
.wall-tile .ph{width:100%;aspect-ratio:1/1;background:var(--az-nav);display:flex;align-items:center;justify-content:center;overflow:hidden}
.wall-tile .ph img{width:100%;height:100%;object-fit:cover;display:block}
.wall-tile .ph .init{color:#fff;font-size:40px;font-weight:800;letter-spacing:1px;user-select:none}
.wall-tile .meta{padding:10px 12px 12px}
.wall-tile .nm{font-size:15px;font-weight:700;color:var(--az-ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wall-tile .sub{font-size:12px;color:var(--az-mut);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wall-tile .tag{position:absolute;top:8px;left:8px;background:rgba(19,25,33,.86);color:#fff;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.4px;font-variant-numeric:tabular-nums}
.wall-tile .fnd{position:absolute;top:8px;right:8px;background:var(--founder);color:#fff;
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px}

/* ── 推荐人高亮：被 ?ref=NO.xxx 指到的那张卡 ── */
.wall-tile.is-ref{border:2px solid var(--az-orange);box-shadow:0 0 0 3px rgba(232,138,5,.18),0 4px 10px rgba(15,17,17,.16)}
.wall-tile.is-ref .ref-badge{position:absolute;bottom:8px;right:8px;background:var(--az-orange);
  color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;white-space:nowrap}
.wall-tile .ref-badge{display:none}

/* ── 推荐人横幅（页面顶部，所有视图都显示） ── */
#ref-banner{display:none;background:linear-gradient(135deg,var(--az-nav2),var(--az-nav));
  color:#fff;border-radius:8px;padding:14px 18px;margin:0 0 14px;align-items:center;gap:14px;flex-wrap:wrap}
#ref-banner.show{display:flex}
#ref-banner .rb-ico{font-size:22px;flex:none}
#ref-banner .rb-txt{flex:1;min-width:200px;font-size:14px;line-height:1.5}
#ref-banner .rb-txt b{color:var(--az-gold)}
#ref-banner .rb-cta{background:linear-gradient(to bottom,var(--az-cta),var(--az-cta-d));color:#0f1111;
  font-weight:600;font-size:13px;border:1px solid #fcd200;border-radius:8px;padding:8px 18px;text-decoration:none;white-space:nowrap;flex:none}
#ref-banner .rb-cta:hover{text-decoration:none;color:#0f1111}
#ref-banner .rb-close{background:none;border:0;color:#9fb0c5;font-size:18px;cursor:pointer;padding:0 4px;flex:none;line-height:1}
#ref-banner .rb-close:hover{color:#fff}

/* ── 底部 CTA 条 ── */
#wall-foot-cta{margin:24px 0 6px;text-align:center;padding:28px 20px;background:var(--az-card);
  border:1px solid var(--az-line);border-radius:8px;box-shadow:0 1px 2px rgba(15,17,17,.08)}
#wall-foot-cta h3{font-size:18px;font-weight:800;color:var(--az-ink);margin-bottom:8px}
#wall-foot-cta p{font-size:13px;color:var(--az-mut);margin-bottom:16px;max-width:520px;margin-left:auto;margin-right:auto}
#wall-foot-cta .wall-cta{font-size:15px;padding:12px 30px}
#wall-foot-cta .红线{font-size:12px;color:var(--az-mut);margin-top:14px}

/* ── 分享工具箱弹层 ── */
#share-modal[hidden]{display:none}
#share-overlay{position:fixed;inset:0;background:rgba(15,17,17,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
#share-box{background:#fff;border-radius:10px;max-width:460px;width:100%;max-height:90vh;overflow:auto;
  box-shadow:0 10px 40px rgba(0,0,0,.3);position:relative}
#share-box .sb-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--az-line);position:sticky;top:0;background:#fff;border-radius:10px 10px 0 0;z-index:2}
#share-box .sb-head .t{font-size:16px;font-weight:700;color:var(--az-ink)}
#share-box .sb-head .who{font-size:12px;color:var(--az-mut);margin-top:2px}
#share-box .sb-close{background:none;border:0;font-size:24px;color:var(--az-mut);cursor:pointer;line-height:1;padding:0 4px}
#share-box .sb-close:hover{color:var(--az-ink)}
#share-box .sb-body{padding:18px 20px 22px}

/* 分享 tab */
.sb-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--az-line);padding-bottom:0}
.sb-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--az-mut);
  font-size:13px;font-weight:600;padding:8px 12px;cursor:pointer;background:#f0f2f2;border-radius:6px 6px 0 0}
.sb-tab.active{color:var(--az-ink);border-bottom-color:var(--az-orange);background:#fff}
.sb-pane{display:none}
.sb-pane.active{display:block}

/* 链接复制 */
.sb-link-row{display:flex;gap:8px;align-items:center}
.sb-link-row input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--az-line);border-radius:6px;font-size:13px;color:var(--az-ink);background:#fafafa}
.sb-link-row input:focus{outline:0;box-shadow:0 0 0 3px rgba(228,148,32,.5)}
.sb-copy-btn{white-space:nowrap;background:var(--az-nav);color:#fff;border:0;border-radius:6px;font-size:13px;font-weight:600;padding:9px 16px;cursor:pointer}
.sb-copy-btn:hover{background:var(--az-nav2)}
.sb-copy-btn.done{background:var(--ok)}
.sb-copied{font-size:12px;color:var(--ok);margin-top:8px;display:none}
.sb-copied.show{display:block}

/* 二维码区 */
.sb-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 0}
.sb-qr-wrap canvas,.sb-qr-wrap img{border:1px solid var(--az-line);border-radius:6px;background:#fff;max-width:220px}
.sb-qr-hint{font-size:12px;color:var(--az-mut);text-align:center}

/* 文案模板区 */
.sb-text-box{background:#f7fafa;border:1px solid var(--az-line);border-radius:6px;padding:14px 16px;font-size:13px;line-height:1.7;color:var(--az-ink);white-space:pre-wrap;word-break:break-word}
.sb-roles{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sb-role{background:#f0f2f2;border:1px solid var(--az-line);color:var(--az-mut);font-size:12px;font-weight:600;padding:5px 11px;border-radius:14px;cursor:pointer}
.sb-role.active{background:var(--az-nav);color:#fff;border-color:var(--az-nav)}

/* 邮件签名 */
.sb-sig{border:1px solid var(--az-line);border-radius:6px;padding:14px 16px;background:#fafafa;font-size:13px;line-height:1.6}
.sb-sig .sig-nm{font-weight:700;color:var(--az-ink);font-size:15px}
.sb-sig .sig-no{color:var(--az-orange);font-weight:700;font-size:12px;margin-top:2px}
.sb-sig .sig-lnk{color:var(--az-teal);margin-top:6px;word-break:break-all}

.sb-note{font-size:12px;color:var(--az-mut);margin-top:14px;line-height:1.6;border-top:1px dashed var(--az-line);padding-top:10px}
.sb-note b{color:var(--az-ink)}

/* 2026-10-26 移动端横向溢出修复：wall-cta 宽 369px + padding 导致 right=410 */
@media(max-width:520px){
  .wall-cta{
    max-width:100% !important;
    white-space:normal !important;
    word-break:break-word;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}