.ng-stage-page [hidden] { display: none !important; }
.stage-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 2px; }
.stage-intro h2 { margin:0; color:var(--ng-shell-text); font-size:24px; font-weight:700; }
.stage-intro p { margin:4px 0 0; color:var(--ng-shell-muted); font-size:13px; }
.stage-intro a { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; border-radius:11px; color:#fff; background:var(--ng-shell-primary); font-size:14px; text-decoration:none; }
.stage-safety { margin:14px 0; color:var(--ng-shell-muted); font-size:12px; }
.stage-feed { display:grid; gap:14px; border:0; border-radius:0; background:none; }
.stage-post { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:22px; border:0; border-radius:16px; background:var(--ng-shell-surface-strong); box-shadow:0 2px 10px rgba(0,0,0,.04); }
.stage-avatar { position:relative; width:44px; height:44px; overflow:hidden; border-radius:11px; background:var(--ng-shell-icon-bg); }
.stage-avatar-fallback { display:grid; place-items:center; width:100%; height:100%; padding:3px; }
.ng-stage-page .stage-avatar-photo { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; opacity:0; }
.stage-avatar.has-photo .stage-avatar-photo { opacity:1; }
.stage-avatar.has-photo .stage-avatar-fallback { visibility:hidden; }
html[data-theme="dark"] .ng-stage-page { --stage-link:color-mix(in srgb,var(--ng-shell-primary) 48%,#fff); }
.ng-stage-page :is(.stage-author,.stage-actions button,.stage-likes,.stage-comment strong,.stage-text-toggle,.stage-comments-more) { color:var(--stage-link,var(--ng-shell-primary)); }
.stage-post-main { min-width:0; }
.stage-author { margin:0 0 5px; color:var(--ng-shell-primary); font-size:16px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.stage-text { max-height:10.8em; overflow:hidden; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ng-shell-text); font-size:14px; line-height:1.8; }
.stage-text.is-expanded { max-height:none; }
.stage-photo { display:block; width:min(100%,176px); aspect-ratio:4/5; margin-top:10px; overflow:hidden; border-radius:8px; background:var(--ng-shell-surface); cursor:zoom-in; }
.stage-media { display:block; width:auto; height:auto; max-width:100%; max-height:460px; object-fit:contain; border-radius:10px; }
.stage-photo > .stage-media { width:100%; height:100%; object-fit:cover; }
.stage-media-item { min-width:0; }
.stage-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; width:min(100%,268px); margin-top:10px; }
.stage-gallery:is([data-count="2"],[data-count="4"]) { grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%,177px); }
.stage-gallery .stage-media-item { position:relative; aspect-ratio:1; border-radius:10px; background:var(--ng-shell-surface); }
.stage-gallery[data-count="1"] { grid-template-columns:minmax(0,1fr); width:min(100%,240px); }
.stage-gallery[data-count="1"] .stage-media-item { aspect-ratio:4/5; }
.stage-gallery .stage-photo { width:100%; height:100%; margin:0; }
.stage-gallery .stage-media-error { position:absolute; inset:0; justify-content:center; align-content:center; margin:0; padding:6px; text-align:center; overflow:auto; overflow-wrap:anywhere; }
.stage-gallery .stage-media-error button { min-width:0; max-width:100%; padding:4px; line-height:1.4; white-space:normal; }
video.stage-media { width:min(100%,240px); aspect-ratio:4/3; margin-top:10px; background:#12141b; }
.stage-media-item--video { position:relative; width:min(100%,240px); }
.stage-video-resume { position:absolute; top:0; left:0; display:grid; place-items:center; width:100%; aspect-ratio:4/3; padding:12px; border:0; border-radius:10px; color:#fff; background:transparent; cursor:pointer; }
.stage-video-status { position:absolute; top:0; left:0; width:100%; aspect-ratio:4/3; display:grid; place-items:center; pointer-events:none; }
.stage-video-status span { padding:6px 10px; border-radius:8px; font-size:12px; line-height:1.5; color:#fff; background:rgba(0,0,0,.72); }
.stage-photo:focus-visible { outline:2px solid var(--ng-shell-primary); outline-offset:3px; }
/* Native dialog is in the top layer: it cannot be covered by navigation/player z-index. */
.stage-lightbox { box-sizing:border-box; position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border:0; border-radius:0; background:rgba(10,12,18,.96); color:#fff; }
.stage-lightbox[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; }
.stage-lightbox::backdrop { background:rgba(0,0,0,.8); }
.stage-lightbox-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stage-lightbox button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:#fff; font:inherit; cursor:pointer; }
.stage-lightbox button:disabled { opacity:.35; cursor:default; }
.stage-lightbox button:focus-visible,.stage-lightbox a:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.stage-lightbox-image { display:grid; place-items:center; min-height:0; overflow:auto; touch-action:pan-y pinch-zoom; }
.stage-lightbox-image img { display:block; width:100%; height:100%; min-height:0; min-width:0; object-fit:contain; }
.stage-lightbox-image.is-zoomed { display:block; }
.stage-lightbox-image.is-zoomed img { width:auto; height:auto; max-width:none; max-height:none; margin:auto; }
.stage-lightbox-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.stage-lightbox a { color:#fff; padding:12px; }
.stage-lightbox-status { font-size:13px; color:#ced4df; overflow-wrap:anywhere; }
.stage-media-error,.stage-own-status,.stage-social-note { margin:8px 0; color:var(--ng-shell-muted); font-size:12px; }
.stage-media-error { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.stage-media-error button { min-height:36px; padding:0 10px; border:1px solid var(--ng-shell-card-border); border-radius:9px; color:var(--ng-shell-primary); background:var(--ng-shell-card-bg); font-size:12px; }
.stage-media-error button:disabled { opacity:.55; }
.stage-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; min-width:0; min-height:28px; margin:12px 0 8px; gap:8px; color:var(--ng-shell-muted); font-size:11px; }
.stage-meta time { flex-shrink:0; white-space:nowrap; }
.ng-stage-page .stage-post button { font-family:inherit; box-shadow:none; font-weight:500; }
.stage-text-toggle,.stage-comments-more { padding:4px 0; border:0; background:none; color:var(--ng-shell-primary); font-size:13px; min-height:36px; }
.stage-text-toggle { min-height:44px; }
.stage-actions { display:flex; flex-wrap:wrap; align-items:center; min-width:0; max-width:100%; flex-shrink:1; gap:6px; margin-left:auto; }
.stage-actions button { display:inline-flex; justify-content:center; align-items:center; min-width:0; max-width:100%; min-height:28px; padding:0 8px; color:var(--ng-shell-primary); background:color-mix(in srgb,var(--ng-shell-primary) 8%,transparent); border:0; border-radius:7px; font-size:12px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
/* Keep this compact pair above the public skin's generic mobile button size. */
.ng-stage-page .stage-meta .stage-actions button { min-height:28px; }
.stage-actions [aria-pressed="true"] { background:color-mix(in srgb,var(--ng-shell-primary) 16%,transparent); }
.stage-social { padding:10px 12px; border-radius:10px; background:color-mix(in srgb,var(--ng-shell-primary) 6%,transparent); }
.stage-likes { margin:0; padding:0 0 8px; color:var(--ng-shell-primary); font-size:12px; }
.stage-comment { padding:4px 0; }
.stage-comment p { min-width:0; margin:0; color:var(--ng-shell-text); font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.stage-comment strong { color:var(--ng-shell-primary); font-weight:600; }
.stage-social .stage-comment { background:none; padding:4px 0; }
.stage-social .stage-comment strong { color:var(--stage-link,var(--ng-shell-primary)); }
.stage-social .stage-own-status { margin:4px 0 0; padding:4px 0; color:var(--ng-shell-muted); font-size:12px; }
.stage-comment-form { margin-top:12px; }
.stage-comment-form label { display:block; color:var(--ng-shell-text); font-size:14px; }
.stage-comment-form label small { color:var(--ng-shell-muted); font-size:11px; }
.stage-comment-form textarea { display:block; resize:vertical; width:100%; min-height:100px; margin-top:7px; padding:10px; border:1px solid var(--ng-shell-card-border); border-radius:11px; color:var(--ng-shell-text); background:var(--ng-shell-card-bg); font:inherit; font-size:16px; }
.stage-form-actions { display:flex; align-items:center; gap:8px; margin-top:8px; }
.stage-form-actions small { margin-right:auto; color:var(--ng-shell-muted); font-size:11px; }
.stage-form-actions button,[data-more-posts],.stage-empty button { min-height:40px; padding:0 12px; border:1px solid var(--ng-shell-card-border); border-radius:10px; color:var(--ng-shell-text); background:var(--ng-shell-card-bg); font-size:13px; }
.stage-form-actions [type="submit"] { color:#fff; border:0; background:var(--ng-shell-primary); }
.stage-post-status { margin:8px 0 0; color:var(--ng-shell-muted); font-size:12px; overflow-wrap:anywhere; }
.stage-post-status:empty { display:none; }
.stage-post-status.is-success { color:#15803d; }
.stage-post-status.is-error { color:#b91c1c; }
.stage-comments { display:grid; gap:10px; margin-top:12px; }
.stage-comment { padding:10px 12px; border-radius:10px; background:var(--ng-shell-surface); }
.stage-comment p { min-width:0; margin:0; color:var(--ng-shell-text); font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.stage-comment time { display:block; margin-top:6px; color:var(--ng-shell-muted); font-size:11px; }
[data-more-posts] { display:block; margin:18px auto 0; }
.stage-empty { padding:36px 18px; color:var(--ng-shell-muted); text-align:center; font-size:14px; }
/* Loading follows the post grid; icon gradients are not content placeholders. */
.stage-loading-label { margin:0 0 14px; color:var(--ng-shell-muted); font-size:13px; line-height:1.5; }
.stage-skeleton-content { display:grid; align-content:start; gap:12px; min-width:0; }
.stage-skeleton-block { display:block; border-radius:6px; background:color-mix(in srgb,var(--ng-shell-text) 10%,transparent); }
.stage-skeleton-avatar { width:100%; aspect-ratio:1; border-radius:11px; }
.stage-skeleton-name { width:min(48%,180px); height:16px; }
.stage-skeleton-line { width:min(94%,720px); height:12px; }
.stage-skeleton-line-short { width:min(72%,540px); }
.stage-skeleton-meta { width:min(42%,200px); height:12px; margin-top:8px; }
.ng-stage-page :is(button,a,textarea):focus-visible { outline:2px solid var(--ng-shell-primary); outline-offset:2px; }
@media(max-width:600px){.stage-feed{gap:12px}.stage-post{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:18px 12px;border-radius:14px}.stage-avatar{width:40px;height:40px}.stage-actions button{padding:0 6px}}
@media(prefers-reduced-motion:no-preference){.stage-actions button,.stage-intro a{transition:opacity 160ms ease}.stage-actions button:active,.stage-intro a:active{opacity:.65}}

/* ===== 发布动态按钮（复用 .stage-intro 链接观感） ===== */
.stage-intro button.stage-compose-open {
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px;
  border:0; border-radius:11px; color:#fff; background:var(--ng-shell-primary); font-size:14px; cursor:pointer;
}
@media(prefers-reduced-motion:no-preference){.stage-intro button.stage-compose-open{transition:opacity 160ms ease}.stage-intro button.stage-compose-open:active{opacity:.65}}

/* ===== 发布动态弹窗 ===== */
.stage-compose-backdrop {
  position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(8,1,17,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.stage-compose-backdrop[hidden]{display:none;}
.stage-compose {
  width:min(560px,100%); max-height:90vh; overflow:auto; display:flex; flex-direction:column;
  background:var(--ng-panel,#2b1740); color:var(--ng-ink,#fff9ff);
  border:1px solid var(--ng-line,rgba(163,105,255,.32)); border-radius:var(--ng-radius,20px);
  box-shadow:var(--ng-shadow,0 18px 46px rgba(8,1,17,.32));
}
.stage-compose__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--ng-line,rgba(163,105,255,.32));
}
.stage-compose__head h2 { margin:0; font-size:18px; }
.stage-compose__close {
  width:34px; height:34px; border:0; border-radius:10px; background:transparent;
  color:var(--ng-muted,#d0b7d9); font-size:22px; line-height:1; cursor:pointer;
}
.stage-compose__close:hover { background:rgba(255,255,255,.08); }
.stage-compose__form { padding:16px 18px 18px; display:flex; flex-direction:column; gap:16px; }
.stage-field { display:flex; flex-direction:column; gap:8px; }
.stage-field__label { font-size:14px; font-weight:600; }
.stage-field__hint { font-size:12px; color:var(--ng-muted,#d0b7d9); }
.stage-field input[type=text] {
  height:42px; padding:0 12px; border-radius:11px; border:1px solid var(--ng-line,rgba(163,105,255,.32));
  background:rgba(255,255,255,.06); color:var(--ng-ink,#fff9ff); font-size:14px; outline:none;
}
.stage-field input[type=text]:focus { border-color:var(--ng-accent,#7448ee); }

.stage-avatar-upload { display:flex; align-items:center; gap:14px; }
.stage-avatar-preview {
  width:56px; height:56px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  border:1px solid var(--ng-line,rgba(163,105,255,.32)); background:rgba(255,255,255,.06);
  background-size:cover; background-position:center;
}
.stage-avatar-actions { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.stage-upload-btn {
  height:34px; padding:0 14px; border:0; border-radius:9px; font-size:13px; cursor:pointer; color:#fff;
  background:var(--ng-button,linear-gradient(125deg,#6743d9,#8957e7 62%,#d97b4a));
}
.stage-upload-btn--ghost {
  background:transparent; border:1px solid var(--ng-line,rgba(163,105,255,.32)); color:var(--ng-muted,#d0b7d9);
}

/* ===== 富文本编辑器 ===== */
.stage-editor {
  border:1px solid var(--ng-line,rgba(163,105,255,.32)); border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.04);
}
.stage-editor__toolbar {
  display:flex; flex-wrap:wrap; gap:6px; padding:8px;
  border-bottom:1px solid var(--ng-line,rgba(163,105,255,.32));
}
.stage-editor__toolbar button {
  min-width:34px; height:32px; padding:0 10px; border:0; border-radius:8px;
  background:rgba(255,255,255,.08); color:var(--ng-ink,#fff9ff); font-size:13px; cursor:pointer;
}
.stage-editor__toolbar button:hover { background:rgba(255,255,255,.16); }
.stage-editor__sep { width:1px; height:20px; align-self:center; background:var(--ng-line,rgba(163,105,255,.32)); }
.stage-editor__area {
  min-height:140px; max-height:320px; overflow:auto; padding:12px; outline:none;
  font-size:14px; line-height:1.6; color:var(--ng-ink,#fff9ff);
}
.stage-editor__area:empty:before { content:attr(data-placeholder); color:var(--ng-muted,#d0b7d9); }
.stage-editor__area img,
.stage-editor__area video { max-width:100%; border-radius:10px; display:block; margin:6px 0; }

.stage-compose__status { margin:0; font-size:13px; min-height:18px; }
.stage-compose__status.is-error { color:#ff8a8a; }
.stage-compose__status.is-success { color:#8affc1; }
.stage-compose__actions { display:flex; justify-content:flex-end; gap:10px; }
.stage-compose__cancel {
  height:42px; padding:0 18px; border:1px solid var(--ng-line,rgba(163,105,255,.32)); border-radius:11px;
  background:transparent; color:var(--ng-muted,#d0b7d9); font-size:14px; cursor:pointer;
}
.stage-compose__submit {
  height:42px; padding:0 20px; border:0; border-radius:11px; font-weight:600; font-size:14px; cursor:pointer; color:#fff;
  background:var(--ng-button,linear-gradient(125deg,#6743d9,#8957e7 62%,#d97b4a));
}
.stage-compose__submit:disabled { opacity:.6; cursor:default; }

/* 动态正文内的富媒体约束 */
.stage-text img,
.stage-text video { max-width:100%; border-radius:10px; display:block; margin:6px 0; }
.stage-text a { color:var(--ng-accent,#7448ee); }

/* 轻提示 toast */
.stage-toast {
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:1300;
  padding:12px 18px; border-radius:12px; font-size:14px; color:var(--ng-ink,#fff9ff);
  background:var(--ng-panel-solid,#2b1740); border:1px solid var(--ng-line,rgba(163,105,255,.32));
  box-shadow:var(--ng-shadow,0 18px 46px rgba(8,1,17,.32));
  opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.stage-toast.is-show { opacity:1; transform:translateX(-50%) translateY(-6px); }