.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}}