/* ==============================================
   撑伞人 — 个人空间（profile.html）样式
   浅色系 · 封面渐变 + 毛玻璃卡片 · 6 Tab
   ============================================== */

.sp-page{padding-top:64px;max-width:820px;margin:0 auto;padding-bottom:60px}

/* 天空蓝背景图（透明化，露出背景） */
.page-profile{background:url('/assets/bg/bg-home.webp') center/cover no-repeat fixed}

/* 资料区 */
.sp-body{background:transparent;border-radius:16px;padding:20px 20px 18px}
.sp-head{display:flex;align-items:flex-end;gap:14px;position:relative}
.sp-avatar{width:96px;height:96px;border-radius:50%;border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,0.12);flex-shrink:0;background:linear-gradient(135deg,#3390EC,#5EB5F7);display:flex;align-items:center;justify-content:center}
.sp-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.sp-avatar .ph{color:#fff;font-size:30px;font-weight:700}
.sp-info{flex:1;min-width:0;padding-top:44px;padding-left:14px}
.sp-name{font-size:19px;font-weight:700;color:var(--charcoal);display:flex;align-items:center;gap:8px}
.sp-loc{font-size:12px;color:var(--gray);margin-top:4px}
.sp-sign{font-size:13px;color:var(--gray);margin-top:4px;font-style:italic}
.sp-stats{display:flex;gap:20px;margin-top:10px}
.sp-stat{text-align:center}
.sp-stat .num{font-size:17px;font-weight:700;color:var(--blue)}
.sp-stat .lbl{font-size:10px;color:var(--gray);margin-top:1px}
.sp-actions{display:flex;gap:8px;padding-top:44px;flex-shrink:0}
.sp-actions button{padding:7px 16px;border-radius:16px;border:1px solid rgba(51, 144, 236,0.16);font-size:12px;cursor:pointer;background:rgba(255,255,255,0.22);color:var(--blue);font-family:inherit;transition:all 160ms}
.sp-actions button:hover{background:rgba(51, 144, 236,0.06)}
.sp-settings{position:relative}
.sp-gear-btn{background:none;border:none;cursor:pointer;color:var(--charcoal);padding:6px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.sp-gear-btn:hover{background:rgba(0,0,0,.05)}
.sp-settings-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.12);padding:4px;z-index:100;min-width:120px;border:1px solid rgba(0,0,0,.06)}
.sp-settings-menu button{display:block;width:100%;text-align:left;padding:9px 12px;background:none;border:none;cursor:pointer;font-size:13px;color:var(--charcoal);border-radius:6px;font-family:inherit}
.sp-settings-menu button:hover{background:rgba(0,0,0,.04)}

/* Tab 栏 */
.sp-tabs{display:flex;border-bottom:1px solid rgba(51, 144, 236,0.08);margin-top:16px;overflow-x:auto;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{padding:12px 18px;font-size:13px;color:var(--gray);cursor:pointer;border-bottom:2px solid transparent;transition:all 180ms;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.sp-tab:hover{color:var(--blue)}
.sp-tab.active{color:var(--blue);font-weight:600;border-bottom-color:var(--blue)}

/* 面板 */
.sp-panel{display:none;padding-top:16px}
.sp-panel.active{display:block}

/* 发布框 v12（2026-08-11 再透明一档：用户要求"还能再透明一点吗"） */
.sp-pub{background:rgba(255,255,255,0.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(51, 144, 236,0.08);border-radius:16px;padding:16px;margin-bottom:16px;box-shadow:0 2px 12px rgba(51, 144, 236,0.05),0 1px 3px rgba(51, 144, 236,0.04);transition:box-shadow 180ms ease,transform 180ms ease}
.sp-pub:hover{box-shadow:0 4px 18px rgba(51, 144, 236,0.09)}
.sp-pub textarea{width:100%;min-height:72px;resize:vertical;border:1px solid transparent;outline:none;background:rgba(255,255,255,0.16);border-radius:12px;padding:11px 13px;font-size:14px;font-family:inherit;color:var(--charcoal);line-height:1.8;box-sizing:border-box;transition:border-color 160ms ease,box-shadow 160ms ease,background 160ms ease}
.sp-pub textarea::placeholder{color:var(--gray)}
.sp-pub textarea:focus{background:rgba(255,255,255,0.5);border-color:rgba(51, 144, 236,0.30);box-shadow:0 0 0 3px rgba(51, 144, 236,0.08)}
.sp-pub-bar{display:flex;align-items:center;gap:9px;margin-top:10px;flex-wrap:wrap}
.sp-pub-bar select{padding:7px 12px;border-radius:10px;border:1px solid rgba(51, 144, 236,0.16);font-size:13px;color:var(--gray);background:rgba(255,255,255,0.25);font-family:inherit;cursor:pointer;transition:border-color 160ms ease,box-shadow 160ms ease}
.sp-pub-bar select:hover{border-color:rgba(51, 144, 236,0.35)}
.sp-pub-sync{font-size:12px;color:var(--gray);display:flex;align-items:center;gap:5px;cursor:pointer;background:rgba(255,255,255,0.25);padding:6px 11px;border-radius:10px;user-select:none;transition:background 160ms ease}
.sp-pub-sync:hover{background:rgba(255,255,255,0.45)}
.sp-pub-bar .sp-pub-btn{padding:9px 26px;border-radius:11px;border:none;background:linear-gradient(135deg,#4A84BD,#3390EC);color:#fff;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;margin-left:auto;box-shadow:0 2px 6px rgba(51, 144, 236,0.28);transition:filter 160ms ease,transform 160ms ease,box-shadow 160ms ease}
.sp-pub-bar .sp-pub-btn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 4px 10px rgba(51, 144, 236,0.32)}
.sp-pub-bar .sp-pub-btn:active{transform:translateY(0)}
.sp-pub-bar .sp-pub-btn:disabled{opacity:0.45;cursor:not-allowed;filter:none;transform:none;box-shadow:none}
.sp-pub-pick{padding:7px 15px;border-radius:10px;border:1px solid rgba(51, 144, 236,0.16);background:rgba(255,255,255,0.25);color:var(--blue);font-size:13px;cursor:pointer;font-family:inherit;transition:background 160ms ease,border-color 160ms ease}
.sp-pub-pick:hover{background:rgba(255,255,255,0.45);border-color:rgba(51, 144, 236,0.35)}
.sp-pub-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sp-pub-thumb{width:64px;height:64px;border-radius:9px;overflow:hidden;position:relative;border:1px solid rgba(0,0,0,0.06)}
.sp-pub-thumb img{width:100%;height:100%;object-fit:cover}
.sp-pub-thumb .x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-pub-tip{font-size:11px;color:var(--gray);margin-top:8px}/* 动态卡片 */.sp-post{background:rgba(255,255,255,0.12);border:1px solid rgba(51, 144, 236,0.07);border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,0.03)}
.sp-post-other{background:rgba(255,255,255,0.12)}
.sp-post-src{font-size:11px;color:var(--blue);text-decoration:none;background:rgba(51, 144, 236,0.06);padding:2px 10px;border-radius:9px}
.sp-post-src:hover{background:rgba(51, 144, 236,0.12)}
.sp-post-title{font-size:calc(15px * var(--fs));font-weight:700;color:var(--charcoal);margin:6px 0 4px}
.sp-post .text{font-size:calc(14px * var(--fs));color:var(--charcoal);line-height:1.9;word-break:break-word;white-space:pre-wrap}
.sp-post .imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.sp-post .imgs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;background:rgba(51, 144, 236,0.04)}
.sp-post .meta{font-size:11px;color:var(--gray);margin-top:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp-post .status-tag{font-size:10px;padding:1px 8px;border-radius:8px;background:rgba(230,147,64,0.12);color:#c97a2e}
.sp-post .lock{font-size:10px;color:var(--gray)}
.sp-post .acts{display:flex;gap:8px;margin-top:8px}
.sp-post .act{font-size:12px;color:var(--gray);cursor:pointer;padding:5px 12px;border-radius:14px;border:1px solid transparent;transition:all 160ms;background:none;font-family:inherit}
.sp-post .act:hover{background:rgba(51, 144, 236,0.05);color:var(--blue)}
.sp-post .act.liked{color:var(--blue);font-weight:600}
.sp-post .cmt{display:none;margin-top:10px;border-top:1px dashed rgba(51, 144, 236,0.12);padding-top:10px}
.sp-post .cmt.open{display:block}
.sp-cmt-item{font-size:calc(12px * var(--fs));color:var(--charcoal);line-height:1.7;padding:5px 0;border-bottom:1px solid rgba(51, 144, 236,0.05)}
.sp-cmt-item .who{color:var(--blue);font-weight:600}
.sp-cmt-item .time{font-size:10px;color:var(--gray);margin-left:6px}
.sp-cmt-input{display:flex;gap:8px;margin-top:8px}
.sp-cmt-input input{flex:1;padding:8px 14px;border-radius:16px;border:1px solid rgba(51, 144, 236,0.14);font-size:12px;outline:none;font-family:inherit}
.sp-cmt-input button{padding:7px 16px;border-radius:16px;border:none;background:var(--blue);color:#fff;font-size:12px;cursor:pointer;font-family:inherit}
.sp-empty{text-align:center;padding:46px 20px;color:var(--gray);font-size:13px}
.sp-empty .icon{font-size:38px;margin-bottom:10px}
.sp-more{text-align:center;padding:12px}
.sp-more button{padding:8px 26px;border-radius:16px;border:1px solid rgba(51, 144, 236,0.16);background:rgba(255,255,255,0.22);color:var(--blue);font-size:13px;cursor:pointer;font-family:inherit}

/* 占位卡片（相册/留言/访客/装扮 建设中） */
.sp-build{background:rgba(255,255,255,0.12);border:1px solid rgba(51, 144, 236,0.07);border-radius:14px;padding:44px 20px;text-align:center;color:var(--gray)}
.sp-build .icon{font-size:40px;margin-bottom:12px}
.sp-build .t{font-size:14px;color:var(--charcoal);font-weight:600;margin-bottom:6px}
.sp-build .d{font-size:12px;line-height:1.8}

/* 主页预览 */
.sp-preview-title{font-size:12px;color:var(--gray);font-weight:600;margin:4px 0 10px;letter-spacing:1px}
.sp-home-albums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sp-home-album{background:rgba(255,255,255,0.12);border:1px solid rgba(51, 144, 236,0.07);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform 180ms,box-shadow 180ms}
.sp-home-album:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.08)}
.sp-home-album img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.sp-home-album .ph{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(135deg,rgba(51, 144, 236,0.08),rgba(94, 181, 247,0.14))}
.sp-home-album span{display:block;font-size:11px;color:var(--charcoal);padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:768px){.sp-home-albums{grid-template-columns:repeat(2,1fr)}}

/* ═══ 批次C：成长档案（原云相册） ═══ */
.sp-arch-desc{font-size:12px;color:var(--gray);margin-bottom:10px;background:rgba(230,147,64,0.06);border:1px solid rgba(230,147,64,0.12);border-radius:10px;padding:9px 14px}
.sp-quota{font-size:12px;color:var(--gray);margin-bottom:12px}
.sp-album-new{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sp-album-new input{flex:1;min-width:160px;padding:9px 14px;border-radius:10px;border:1px solid rgba(51, 144, 236,0.14);font-size:13px;outline:none;font-family:inherit}
.sp-album-descrow{position:relative;margin-bottom:14px}
.sp-album-descrow textarea{width:100%;min-height:72px;padding:10px 14px;border-radius:10px;border:1px solid rgba(51, 144, 236,0.14);font-size:13px;outline:none;font-family:inherit;resize:vertical;line-height:1.7}
.sp-album-descrow .count,.sp-album-descrow .count{position:absolute;right:10px;bottom:8px;font-size:10px;color:var(--gray)}
.sp-album-desc{font-size:11px;color:var(--gray);padding:0 12px 2px;line-height:1.6}
.sp-album-desc-full{background:rgba(51, 144, 236,0.04);border-left:2px solid rgba(51, 144, 236,0.14);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--charcoal);line-height:1.9;margin:0 0 12px;white-space:pre-wrap}
#spAlbumEditForm{margin-bottom:12px}
#spAlbumEditForm textarea{width:100%;min-height:90px;padding:10px 14px;border-radius:10px;border:1px solid rgba(51, 144, 236,0.14);font-size:13px;outline:none;font-family:inherit;resize:vertical;line-height:1.7}
#spAlbumEditForm .count{font-size:10px;color:var(--gray)}
.sp-album-new select{padding:9px 12px;border-radius:10px;border:1px solid rgba(51, 144, 236,0.14);font-size:12px;color:var(--gray);background:rgba(255,255,255,0.85);font-family:inherit}
.sp-album-new button{padding:9px 18px;border-radius:10px;border:none;background:var(--blue);color:#fff;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.sp-album-create-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;border:1px dashed var(--blue);background:rgba(51,144,236,0.05);color:var(--blue);font-size:13px;font-weight:600;cursor:pointer;margin-bottom:14px;font-family:inherit}
.sp-album-sync{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--charcoal);cursor:pointer;margin-top:8px}
.sp-album-sync input{accent-color:var(--blue)}
.sp-album-caption{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid rgba(51,144,236,0.14);border-radius:8px;font-size:12px;font-family:inherit;outline:none;margin-top:6px;color:var(--charcoal)}
.sp-album-modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center}
.sp-album-modal.open{display:flex}
.sp-album-modal-mask{position:absolute;inset:0;background:rgba(0,0,0,0.5)}
.sp-album-modal-box{position:relative;width:92%;max-width:480px;background:#fff;border-radius:14px;padding:20px;display:grid;gap:12px;max-height:85vh;overflow-y:auto}
.sp-album-modal-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;color:var(--charcoal)}
.sp-album-modal-head button{background:none;border:none;cursor:pointer;color:#999;padding:4px}
.sp-album-modal-box input,.sp-album-modal-box select,.sp-album-modal-box textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid rgba(51,144,236,0.14);border-radius:8px;font-size:13px;font-family:inherit;outline:none;color:var(--charcoal)}
.sp-album-modal-box textarea{min-height:100px;resize:vertical;line-height:1.7}
.sp-album-modal-box .count{font-size:10px;color:var(--gray);text-align:right;margin-top:-6px}
.sp-album-modal-create{padding:12px;border-radius:10px;border:none;background:var(--blue);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.sp-albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sp-album{background:rgba(255,255,255,0.12);border:1px solid rgba(51, 144, 236,0.07);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform 180ms,box-shadow 180ms}
.sp-album:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.08)}
.sp-album .cov{aspect-ratio:4/3;background:linear-gradient(135deg,rgba(51, 144, 236,0.10),rgba(94, 181, 247,0.18));display:flex;align-items:center;justify-content:center;overflow:hidden}
.sp-album .cov img{width:100%;height:100%;object-fit:cover}
.sp-album .cov .ph{font-size:34px}
.sp-album .cov-grid{aspect-ratio:4/3;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:1px;background:rgba(51, 144, 236,0.08)}
.sp-album .cov-grid .cg{overflow:hidden;background:rgba(51, 144, 236,0.06)}
.sp-album .cov-grid .cg img{width:100%;height:100%;object-fit:cover;display:block}
.sp-album .cov-grid .cg-more{display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(51, 144, 236,0.9);color:#fff;font-size:10px;line-height:1.6;text-align:center;padding:2px}
.sp-album .nm{font-size:13px;font-weight:600;color:var(--charcoal);padding:10px 12px 2px}
.sp-album .nm .pr{font-size:11px}
.sp-album .ct{font-size:11px;color:var(--gray);padding:0 12px 8px}
.sp-album-ops{display:flex;gap:6px;padding:0 12px 12px}
.sp-album-ops .op{flex:1;padding:7px 0;border-radius:8px;border:1px solid rgba(51, 144, 236,0.14);background:rgba(255,255,255,0.22);color:var(--blue);font-size:12px;cursor:pointer;font-family:inherit}
.sp-album-ops .op:hover{background:rgba(51, 144, 236,0.06)}
.sp-album-ops .op.del{color:#c44;border-color:rgba(229, 57, 53,0.2)}
.sp-album-time{font-size:11px;color:var(--gray);margin-bottom:12px}
.sp-album-upload-main{display:block;width:100%;margin-bottom:14px;padding:16px;border-radius:14px;border:2px dashed rgba(51, 144, 236,0.25);background:rgba(51, 144, 236,0.03);color:var(--blue);font-size:14px;font-weight:600;text-align:center;cursor:pointer;transition:all 180ms}
.sp-album-upload-main:hover{background:rgba(51, 144, 236,0.07);border-color:var(--blue)}
.sp-album-inline{padding:10px 12px}
.sp-album-inline .ie-name{width:100%;padding:9px 12px;border-radius:9px;border:1px solid rgba(51, 144, 236,0.2);font-size:13px;outline:none;font-family:inherit;margin-bottom:8px}
.sp-album-inline .ie-desc{width:100%;min-height:64px;padding:9px 12px;border-radius:9px;border:1px solid rgba(51, 144, 236,0.2);font-size:12px;outline:none;font-family:inherit;resize:vertical;line-height:1.7;margin-bottom:8px}
.sp-album-inline .ie-btns{display:flex;gap:6px}
.sp-album-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sp-album-head h3{font-size:16px;color:var(--charcoal);margin:0;flex:1}
.sp-album-back,.sp-album-del,.sp-album-rename,.sp-album-batch{padding:6px 14px;border-radius:9px;border:1px solid rgba(51, 144, 236,0.14);background:rgba(255,255,255,0.22);font-size:12px;cursor:pointer;font-family:inherit}
.sp-album-back{color:var(--blue)}
.sp-album-del{color:#c44}
.sp-album-rename{color:var(--blue)}
.sp-album-batch{color:var(--amber)}
.sp-photo.batch .sel{position:absolute;top:6px;left:6px;width:16px;height:16px;accent-color:var(--blue);z-index:2;cursor:pointer}
.sp-album-upload{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sp-album-up{padding:8px 18px;border-radius:9px;border:none;background:var(--blue);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.sp-album-hint{font-size:11px;color:var(--gray)}
.sp-photo-count{font-size:11px;color:var(--gray);margin-bottom:8px}
.sp-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.sp-photo{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;border:1px solid rgba(0,0,0,0.05)}
.sp-photo img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.sp-photo .vd{position:absolute;left:6px;top:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center}
.sp-photo .x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;border:none;font-size:9px;cursor:pointer;display:none;align-items:center;justify-content:center}
.sp-photo .dl{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;text-decoration:none;display:none;align-items:center;justify-content:center}
.sp-photo:hover .x,.sp-photo:hover .dl{display:flex}

/* ═══ 批次C：留言板 ═══ */
.sp-msg{background:rgba(255,255,255,0.12);border:1px solid rgba(51, 144, 236,0.07);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.sp-msg .who{font-size:12px;color:var(--blue);font-weight:600;margin-bottom:4px}
.sp-msg .txt{font-size:calc(13px * var(--fs));color:var(--charcoal);line-height:1.8;white-space:pre-wrap}
.sp-msg .meta{font-size:11px;color:var(--gray);margin-top:8px;display:flex;justify-content:space-between;align-items:center}
.sp-msg .meta .del{border:none;background:none;color:#c44;font-size:11px;cursor:pointer;font-family:inherit}
.sp-msg-v{padding:6px 16px;border-radius:15px;border:1px solid rgba(51, 144, 236,0.14);background:rgba(255,255,255,0.22);color:var(--gray);font-size:12px;cursor:pointer;font-family:inherit;margin-right:8px}
.sp-msg-v.active{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600}
.sp-msg-reply{margin-top:8px;padding:9px 12px;border-radius:10px;background:rgba(51, 144, 236,0.05);font-size:calc(12px * var(--fs));color:var(--charcoal);line-height:1.7}
.sp-msg-replybox{display:flex;gap:8px;margin-top:8px}
.sp-msg-replybox input{flex:1;padding:7px 12px;border-radius:14px;border:1px solid rgba(51, 144, 236,0.14);font-size:12px;outline:none;font-family:inherit}
.sp-msg-replybox button{padding:6px 14px;border-radius:14px;border:none;background:var(--blue);color:#fff;font-size:12px;cursor:pointer;font-family:inherit}

/* ═══ 批次C：访客 ═══ */
.sp-visitor{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,0.12);border:1px solid rgba(51, 144, 236,0.07);border-radius:12px;margin-bottom:8px}
.sp-visitor .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3390EC,#5EB5F7);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.sp-visitor .nm{font-size:13px;color:var(--charcoal)}
.sp-visitor .tm{font-size:11px;color:var(--gray);margin-left:auto}

/* ═══ 批次C：装扮 ═══ */
.sp-deco-group{margin-bottom:18px}
.sp-deco-group .t{font-size:calc(12px * var(--fs));color:#707579;font-weight:600;margin-bottom:8px;letter-spacing:1px}
.sp-deco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.sp-deco-grid.sm{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
.sp-deco-item{position:relative;border-radius:12px;border:2px solid transparent;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;height:64px;font-size:calc(12px * var(--fs));color:#0E1621;background:rgba(255,255,255,0.9);transition:border-color 180ms}
.sp-deco-grid:not(.sm) .sp-deco-item{height:72px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.35)}
.sp-deco-item:hover,.sp-deco-item.sel{border-color:var(--blue)}
.sp-deco-item.sel{box-shadow:0 0 0 3px rgba(51, 144, 236,0.12)}
.sp-deco-item .tg{position:absolute;top:4px;right:4px;font-size:9px;padding:1px 6px;border-radius:7px;background:rgba(0,0,0,0.55);color:#fff;font-style:normal;text-shadow:none}
.sp-deco-btns{display:flex;gap:10px;margin-top:6px}
.sp-deco-btns button{padding:10px 22px;border-radius:10px;border:none;font-size:calc(13px * var(--fs));font-weight:600;cursor:pointer;font-family:inherit}
#spDecoSave{background:var(--blue);color:#fff}
#spDecoReset{background:transparent;border:1px solid rgba(51, 144, 236,0.18);color:#707579}
/* 字体大小滑轨 */
.sp-deco-fs{padding:8px 4px}
.sp-deco-fs .fs-slider{width:100%;accent-color:var(--blue);cursor:pointer}
.sp-deco-fs .fs-scale{display:flex;justify-content:space-between;font-size:calc(10px * var(--fs));color:#707579;margin-top:4px}
.sp-deco-fs .fs-val{text-align:center;font-size:calc(12px * var(--fs));color:#0E1621;margin-top:8px;font-weight:600}

/* ═══ 批次E2：装扮应用 ═══ */
.sp-avatar.frame-classic{border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,0.12),0 0 0 3px #c9cdd4}
.sp-avatar.frame-candy{border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,0.12),0 0 0 3px #f5a8c8,0 0 0 6px #ffe0ef}
.sp-float{position:fixed;font-size:26px;pointer-events:none;opacity:0.45;animation:spFloat 7s ease-in-out infinite;z-index:5}
@keyframes spFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
#spPostList.skin-frost .sp-post{background:rgba(255,255,255,0.5);backdrop-filter:blur(6px)}
#spPostList.skin-gradient .sp-post{border:none;background:linear-gradient(135deg,rgba(51, 144, 236,0.06),rgba(230,147,64,0.07))}
#spPostList.skin-minimal .sp-post{border:none;box-shadow:none;background:transparent}

@media(max-width:768px){
  .sp-page{padding-top:56px;padding-bottom:40px}
  .sp-actions button{font-size:11px;padding:6px 12px}
  .sp-head{gap:10px;align-items:flex-start}
  .sp-avatar{width:80px;height:80px}
  .sp-info{padding-top:0;padding-left:12px}
  .sp-actions{padding-top:0}
  .sp-body{padding-top:0}
  .sp-imgs{grid-template-columns:repeat(2,1fr)}
  .sp-photos{grid-template-columns:repeat(3,1fr)}
}

/* 主页最近留言预览（#3A 2026-08-07） */
.sp-home-msg { padding:8px 12px; background:rgba(255,255,255,0.12); border-radius:10px; margin-bottom:6px; font-size:13px; color:var(--gray); }
.sp-home-msg .who { font-weight:600; color:var(--charcoal); margin-right:4px; }

/* ═══ 装扮 2.0（2026-08-08）：全页背景 / 头像框素材 / 昵称色 / 昵称字体 / 聊天模板 ═══ */

/* 头像框素材图叠加（frame-* class 由 space-ext.js 应用在 .sp-avatar；素材图为中空圆环 PNG） */
.sp-avatar{position:relative}

.sp-avatar.frame-cobalt::after,.sp-avatar.frame-pearl::after,
.sp-avatar.frame-mist::after,
.sp-avatar.frame-prism::after{
  content:'';position:absolute;inset:-30.6%;border-radius:50%;background-size:100% 100%;
  background-position:center;background-repeat:no-repeat;pointer-events:none}
.sp-avatar.frame-cobalt::after{background-image:url('/assets/decor/frames/cobalt.png?v=5')}
.sp-avatar.frame-pearl::after{background-image:url('/assets/decor/frames/pearl.png')}
.sp-avatar.frame-mist::after{background-image:url('/assets/decor/frames/mist.png')}
.sp-avatar.frame-prism::after{background-image:url('/assets/decor/frames/prism.png?v=5')}

/* 昵称颜色（全部默认发光，氛围灯光晕；rainbow 渐变文字。应用在 .sp-name 容器） */
.sp-name.nick-sky{color:#3a86d9;text-shadow:0 0 12px rgba(58,134,217,0.6)}
.sp-name.nick-rose{color:#e26b9d;text-shadow:0 0 12px rgba(226,107,157,0.6)}
.sp-name.nick-sunset{color:#e8823c;text-shadow:0 0 12px rgba(232,130,60,0.6)}
.sp-name.nick-green{color:#2ea875;text-shadow:0 0 12px rgba(46,168,117,0.6)}
.sp-name.nick-cyan{color:#17a2b8;text-shadow:0 0 12px rgba(23,162,184,0.6)}
.sp-name.nick-purple{color:#8b5cf6;text-shadow:0 0 12px rgba(139,92,246,0.6)}
.sp-name.nick-gold{color:#c9a227;text-shadow:0 0 12px rgba(212,175,55,0.6)}
.sp-name.nick-rainbow{background:linear-gradient(90deg,#f0546c,#f2a03d,#e0c341,#4fc08d,#4f9fd9,#9b6fd9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 16px rgba(150,110,255,0.4)}
/* 昵称字体（本地字体栈；6 款书法/手写字体 woff2，2026-09-01） */
@font-face{font-family:'LXGW WenKai';src:url('/assets/fonts/lxgw-wenkai.woff2?v=1') format('woff2');font-display:swap}
@font-face{font-family:'Zhi Mang Xing';src:url('/assets/fonts/zhimangxing.woff2?v=1') format('woff2');font-display:swap}
@font-face{font-family:'Long Cang';src:url('/assets/fonts/longcang.woff2?v=1') format('woff2');font-display:swap}
@font-face{font-family:'Ma Shan Zheng';src:url('/assets/fonts/mashanzheng.woff2?v=1') format('woff2');font-display:swap}
@font-face{font-family:'ZCOOL KuaiLe';src:url('/assets/fonts/zcool-kuaile.woff2?v=1') format('woff2');font-display:swap}

.sp-name.font-kai{font-family:'LXGW WenKai',"KaiTi","STKaiti","楷体",serif}
.sp-name.font-xing{font-family:'Zhi Mang Xing',"STXingkai","华文行楷",cursive}
.sp-name.font-longcang{font-family:'Long Cang',"STXingkai","华文行楷",cursive}
.sp-name.font-mashanzheng{font-family:'Ma Shan Zheng',"KaiTi","STKaiti","楷体",serif}
.sp-name.font-kuaile{font-family:'ZCOOL KuaiLe',"Comic Sans MS","YouYuan","幼圆",sans-serif}

/* 装扮面板：头像框缩略图 / 昵称色块 / 自定义背景上传区 */
.sp-deco-item.fr{background-size:contain;background-position:center;background-repeat:no-repeat;background-color:rgba(255,255,255,0.85);height:72px}
.sp-deco-item.fr span{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;padding:2px 0;background:rgba(0,0,0,0.45);color:#fff;border-radius:0 0 10px 10px;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-deco-item.sw{color:#fff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,0.35);font-size:16px;height:52px}
.sp-deco-item[data-k="nick_font"]{height:44px}
.sp-deco-bgupload{margin-top:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp-deco-bgprev{width:76px;height:48px;border-radius:8px;background-size:cover;background-position:center;border:1px solid rgba(51, 144, 236,0.14)}
.sp-deco-bgbtns{display:flex;gap:8px}
.sp-deco-bgbtns button{padding:7px 14px;border-radius:9px;border:none;background:var(--blue);color:#fff;font-size:12px;cursor:pointer;font-family:inherit}
.sp-deco-bgbtns button.alt{background:transparent;border:1px solid rgba(51, 144, 236,0.18);color:#707579}
.sp-deco-bgtip{font-size:11px;color:#707579;flex-basis:100%}
.sp-deco-bgtip.locked{color:#c44}

/* 聊天模板 · 气泡布局（#spMsgList.bubble，由 applyDecor 切换） */
#spMsgList.bubble{display:flex;flex-direction:column;gap:2px}
#spMsgList.bubble .sp-bubble{display:flex;flex-direction:column;margin-bottom:14px}
.bl{display:flex;flex-direction:column;max-width:82%}
.bl.in{align-self:flex-start}
.bl.out{align-self:flex-end}
.bl-head{font-size:10px;color:var(--gray);margin:0 6px 3px;align-self:flex-start}
.bl-bub{padding:9px 13px;border-radius:16px;font-size:calc(13px * var(--fs));line-height:1.7;white-space:pre-wrap;word-break:break-word;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.bl.in .bl-bub{background:rgba(255,255,255,0.12);border:1px solid rgba(51, 144, 236,0.08);color:var(--charcoal);border-bottom-left-radius:4px}
.bl.out .bl-bub{background:linear-gradient(135deg,#4a90d9,#3a7bd5);color:#fff;border-bottom-right-radius:4px}
.bl-meta{font-size:10px;color:var(--gray);margin:3px 6px 0;align-self:flex-start}
.bl.out .bl-meta{align-self:flex-end}
.bl-meta.delrow{width:100%;display:flex;justify-content:flex-end;margin-top:4px;align-self:auto}
.bl-meta .del{border:none;background:none;color:#c44;font-size:12px;cursor:pointer;font-family:inherit;padding:2px 4px}
#spMsgList.bubble .sp-msg-replybox{margin-top:6px}

/* 他人视角 · 写留言输入框（聊天模板/经典列表共用） */
.sp-msg-write{margin-top:16px;border-top:1px dashed rgba(51, 144, 236,0.15);padding-top:12px}
.sp-msg-write textarea{width:100%;min-height:72px;padding:10px 12px;border-radius:12px;border:1px solid rgba(51, 144, 236,0.14);font-size:13px;font-family:inherit;outline:none;resize:vertical;box-sizing:border-box}
.sp-msg-writebar{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--gray)}
.sp-msg-writebar label{display:flex;align-items:center;gap:5px;cursor:pointer}
.sp-msg-writebar .send{padding:8px 20px;border-radius:16px;border:none;background:var(--blue);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}

/* 极限透明下的文字可读性保护（2026-08-08）：深色背景图上正文加白色柔影勾边；昵称彩色/发光类排除 */
.sp-pub,.sp-pub textarea,.sp-post,.sp-cmt-item,.sp-cmt-input input,.sp-msg,.sp-msg-replybox input,
.sp-msg-write textarea,.sp-visitor,.sp-empty,.sp-build,.sp-album,.sp-home-album,.sp-home-msg,
.sp-sign,.sp-loc,.sp-stats,.sp-tab,.sp-deco-group .t,.bl-bub,.sp-msg-v,.sp-album-ops .op,
.sp-more button,.sp-actions button,.sp-arch-desc,.sp-album-desc-full{
  text-shadow:0 1px 3px rgba(255,255,255,0.65),0 0 2px rgba(255,255,255,0.45)}

/* 深色背景（data-bg=dark）：文字变浅后改加深色描边（黑影勾边），确保复杂/渐变/上传图可读 */
body[data-bg="dark"] .sp-pub,body[data-bg="dark"] .sp-pub textarea,body[data-bg="dark"] .sp-post,
body[data-bg="dark"] .sp-cmt-item,body[data-bg="dark"] .sp-cmt-input input,body[data-bg="dark"] .sp-msg,
body[data-bg="dark"] .sp-msg-replybox input,body[data-bg="dark"] .sp-msg-write textarea,
body[data-bg="dark"] .sp-visitor,body[data-bg="dark"] .sp-empty,body[data-bg="dark"] .sp-build,
body[data-bg="dark"] .sp-album,body[data-bg="dark"] .sp-home-album,body[data-bg="dark"] .sp-home-msg,
body[data-bg="dark"] .sp-sign,body[data-bg="dark"] .sp-loc,body[data-bg="dark"] .sp-stats,
body[data-bg="dark"] .sp-tab,body[data-bg="dark"] .sp-deco-group .t,body[data-bg="dark"] .bl-bub,
body[data-bg="dark"] .sp-msg-v,body[data-bg="dark"] .sp-album-ops .op,body[data-bg="dark"] .sp-more button,
body[data-bg="dark"] .sp-actions button,body[data-bg="dark"] .sp-arch-desc,body[data-bg="dark"] .sp-album-desc-full{
  text-shadow:0 1px 3px rgba(0,0,0,0.55),0 0 2px rgba(0,0,0,0.45)}

/* 会员徽章免昵称色污染（必须位于 nick-* 规则之后，同 specificity 后者胜） */
.sp-name .badge{font-size:10px;padding:0;border:none;background:none}

/* ── 发布框移动端触摸适配 v10（2026-08-11：全站 44px 触摸标准） ── */
@media (max-width: 768px) {
  .sp-pub-bar { gap: 8px; }
  .sp-pub-bar select, .sp-pub-sync, .sp-pub-pick { min-height: 44px; }
  .sp-pub-bar .sp-pub-btn { min-height: 44px; padding: 0 26px; }
}

/* 移动端 tab 紧凑：6 tab 一屏（2026-08-11） */
@media (max-width: 768px) {
  .sp-tab{padding:12px 8px;font-size:12px}
}

/* 发布弹窗 v13（2026-08-11：#spPubWrap 移入 bottom-sheet，主页留入口按钮；延续透明毛玻璃系） */
.sp-pub-open{display:block;width:100%;padding:13px 16px;border-radius:14px;border:1px dashed rgba(51, 144, 236,0.30);background:rgba(255,255,255,0.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--blue);font-size:14px;font-family:inherit;cursor:pointer;margin-bottom:16px;transition:background 160ms ease,border-color 160ms ease,transform 160ms ease}
.sp-pub-open:hover{background:rgba(255,255,255,0.45);border-color:rgba(51, 144, 236,0.50)}
.sp-pub-open:active{transform:scale(0.98)}
.sp-pub-modal{position:fixed;inset:0;z-index:9990;display:flex;align-items:flex-end;justify-content:center}
.sp-pub-mask{position:absolute;inset:0;background:rgba(23,32,45,0.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sp-pub-sheet{position:relative;width:100%;max-width:560px;background:rgba(255,255,255,0.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:20px 20px 0 0;padding:16px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -6px 30px rgba(14, 22, 33,0.14);transform:translateY(105%);transition:transform 240ms cubic-bezier(.32,.72,.28,1)}
.sp-pub-modal.open .sp-pub-sheet{transform:translateY(0)}
.sp-pub-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sp-pub-title{font-size:15px;font-weight:700;color:var(--charcoal)}
.sp-pub-close{width:44px;height:44px;border-radius:50%;border:none;background:rgba(51, 144, 236,0.08);color:var(--gray);font-size:16px;cursor:pointer;font-family:inherit;transition:background 160ms ease}
.sp-pub-close:hover{background:rgba(51, 144, 236,0.16)}
.sp-pub-sheet .sp-pub{margin-bottom:0;background:rgba(255,255,255,0.35)}
@media (min-width:768px){
  .sp-pub-modal{align-items:center}
  .sp-pub-sheet{border-radius:20px;padding:22px}
}
/* v14 修复:display:flex 显式声明会覆盖 [hidden] 的 UA 样式 → 模态永远可见、关闭无效;
   [hidden] 规则必须显式写(probe 曾只查 hidden 属性不查视觉,漏过此 bug) */
.sp-pub-modal[hidden]{display:none}
