/* 朋友圈：奶雾玻璃与清晰动态排版，不借用外部图片或字体。 */
.moments-launch { width: 100%; display: flex; gap: 13px; align-items: center; padding: 14px; margin-bottom: 23px; text-align: left; background: linear-gradient(120deg,var(--glass-strong),var(--color-secondary-soft)); }
.moments-app-icon { display: grid; place-items: center; width: 45px; height: 45px; flex-shrink: 0; border: 1px solid var(--glass-edge); border-radius: 17px; font-size: 29px; color: var(--color-secondary-ink); background: var(--glass-panel); }
.moments-launch > span:nth-child(2) { flex: 1; min-width: 0; }
.moments-launch strong { display: block; font-size: 15px; font-weight: 600; }
.moments-launch small { display: block; font-size: 10px; margin-top: 6px; color: var(--color-text-caption); line-height: 1.8; }
.moments-view { background: linear-gradient(160deg,var(--color-bg),var(--color-primary-soft)); }
.moments-header { position: sticky; top: 0; z-index: 2; background: var(--glass-strong); }
.moments-header .home-button { margin-left: auto; font-size: 12px; }
.moments-cover { position: relative; min-height: 159px; padding: 24px 24px 31px; overflow: hidden; background: radial-gradient(ellipse at 90% 20%,var(--color-accent-soft),transparent 65%),linear-gradient(125deg,var(--color-primary-soft),var(--color-secondary-soft)); }
.moments-cover::before { content: ""; position: absolute; width: 140px; height: 140px; right: -37px; bottom: -70px; border: 1px solid var(--glass-edge); border-radius: 50%; box-shadow: 0 0 0 17px rgb(255 255 255 / 16%),0 0 0 35px rgb(255 255 255 / 12%); }
.moments-cover .tiny-label { font-size: 9px; letter-spacing: 1px; position: relative; }
.moments-cover p { font-size: 21px; line-height: 1.8; font-weight: 400; margin: 13px 0 0; position: relative; }
.moments-cover > span:last-child { position: absolute; right: 38px; top: 51px; font-size: 34px; color: var(--color-primary-ink); opacity: .5; }
.moments-identity { display: flex; align-items: center; justify-content: flex-end; gap: 13px; padding: 0 20px 15px; position: relative; margin-top: -22px; }
.moments-identity > div { text-align: right; padding-top: 27px; flex: 1; min-width: 0; }
.moments-identity strong { display: block; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.moments-identity > div > span { display: block; margin-top: 7px; font-size: 10px; line-height: 1.8; color: var(--color-text-caption); }
.moments-identity > .avatar { width: 63px; height: 63px; border: 3px solid var(--color-surface); border-radius: 21px; box-shadow: var(--shadow-card); }
.moments-body { padding: 0 15px 30px; }
.moments-disclosure { font-size: 10px; line-height: 1.9; color: var(--color-text-caption); margin: 0 1px 15px; }
.moments-controls { padding: 14px; margin-bottom: 12px; }
.moments-controls summary { cursor: pointer; font-size: 12px; line-height: 1.8; color: var(--color-primary-ink); }
.moments-controls label { display: block; margin: 15px 0 9px; font-size: 11px; line-height: 1.8; }
.moments-controls select { display: block; width: 100%; min-width: 0; border: 1px solid var(--color-border); padding: 10px; margin-top: 7px; border-radius: 12px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 11px; }
.moments-controls > button, .moments-controls form > button { width: 100%; margin: 10px 0; font-size: 11px; }
.moments-controls .moments-check { display: flex; align-items: center; gap: 9px; }
.moments-check input { width: 16px; height: 16px; accent-color: var(--color-primary-ink); }
.moments-controls .field-hint { margin-top: 8px; overflow-wrap: anywhere; }
.moments-usage { font-size: 9px; color: var(--color-text-caption); line-height: 1.8; margin: 10px 2px 15px; }
.moments-feed { display: flex; flex-direction: column; gap: 16px; }
.moment-card { border: 1px solid var(--glass-edge); background: var(--glass-panel); border-radius: 21px; padding: 15px; box-shadow: var(--shadow-card); animation: appear var(--duration-enter) var(--ease-soft); }
.moment-author { display: flex; gap: 9px; align-items: center; }
.moment-avatar { width: 35px; height: 35px; border-radius: 12px; font-size: 22px; }
.moment-author > strong { flex: 1; min-width: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.moment-source { max-width: 77px; font-size: 9px; line-height: 1.7; color: var(--color-text-caption); }
.moment-text { margin: 13px 0; font-size: 13px; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }
.moments-photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 12px 0; }
.moments-photo-grid.photos-2, .moments-photo-grid.photos-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.moments-photo-grid.photos-1 { grid-template-columns: minmax(0,1fr); max-width: 228px; }
.moment-photo { border: 0; background: var(--color-surface-soft); border-radius: 10px; padding: 0; aspect-ratio: 1; min-width: 0; overflow: hidden; font-size: 10px; color: var(--color-text-caption); }
.moment-photo img, .draft-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.moment-footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.moment-footer time { flex: 1; font-size: 9px; color: var(--color-text-caption); line-height: 1.8; }
.moment-footer button, .moment-invite button { border: 0; background: transparent; padding: 5px 0; color: var(--color-primary-ink); font-size: 10px; line-height: 1.8; }
.moment-invite { display: flex; gap: 13px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--color-border); }
.moment-social { background: var(--glass-strong); border-radius: 12px; padding: 10px; margin-top: 8px; }
.moment-social p { margin: 0; font-size: 11px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.moment-social p + p { margin-top: 7px; }
.moment-likes, .moment-comment strong { color: var(--color-primary-ink); font-weight: 500; }
.moment-comment-form { display: flex; gap: 7px; margin-top: 12px; }
.moment-comment-form input { min-width: 0; width: 100%; flex: 1; border: 1px solid var(--color-border); border-radius: 11px; padding: 9px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 11px; }
.moment-comment-form button { border: 0; background: var(--color-primary-soft); color: var(--color-primary-ink); border-radius: 11px; padding: 8px; font: inherit; font-size: 11px; }
.moments-more { width: 100%; margin-top: 20px; }
.moments-file-label input { display: block; width: 100%; max-width: 100%; margin-top: 12px; font-size: 11px; }
.draft-grid { margin: 0; }
.draft-photo { aspect-ratio: 1; min-width: 0; position: relative; border-radius: 12px; overflow: hidden; background: var(--color-surface); }
.draft-remove { position: absolute; top: 3px; right: 3px; border: 1px solid var(--glass-edge); width: 25px; height: 25px; border-radius: 50%; background: var(--color-surface); color: var(--color-text); font-size: 18px; line-height: 1; }
.moments-lightbox { width: min(360px,90vw); max-height: 90dvh; border: 1px solid var(--color-border); border-radius: 23px; padding: 14px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-shell); }
.moments-lightbox[open] { display: flex; flex-direction: column; gap: 12px; }
.moments-lightbox img { max-height: 70dvh; min-height: 0; width: 100%; object-fit: contain; border-radius: 12px; }
.moments-lightbox::backdrop { background: rgb(47 40 49 / 60%); }
@media (max-width:350px) { .moments-body { padding-inline: 11px; } .moment-card { padding: 12px; } .moments-cover { padding-inline: 19px; } .moment-author > strong { font-size: 13px; } }
.moments-filter-label { display:flex; align-items:center; gap:12px; margin:14px 0; font-size:12px; }
.moments-filter-label select,#moments-publisher { min-width:0; max-width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); color:var(--color-text); font:inherit; }
.moments-filter-label select { flex:1; }
.moments-controls label.moments-check { min-height:44px; font-size:12px; }
.moments-controls summary { min-height:44px; align-content:center; }
.moment-footer button,.moment-invite button,.moment-comment-form button { min-height:44px; min-width:44px; }
.moments-social-settings { background:var(--glass-panel); }
.moments-social-settings form { border-top:1px solid var(--color-border); margin-top:12px; }
.moments-lightbox[open] { transform:none; }
@media(prefers-reduced-motion:reduce){.moment-card{animation:none}}