/* nx-kit Tier B · status + help + other */
.nx-as { position: relative; width: min(20rem, 100%); height: 6.5rem; touch-action: pan-y; }
.nx-as-card { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: .7rem; padding: .75rem .85rem; border-radius: 16px; background: color-mix(in srgb, var(--text) 7%, var(--panel-strong)); box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); transform-origin: 50% 0; transition: transform .45s cubic-bezier(.3, 1.2, .5, 1), opacity .3s; user-select: none; }
.nx-as-card.is-front { cursor: grab; }
.nx-as-card > span { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: color-mix(in srgb, var(--text) 9%, transparent); font-size: 1.05rem; flex: 0 0 auto; }
.nx-as-card > div { min-width: 0; }
.nx-as-card strong { display: block; font-size: .86rem; }
.nx-as-card small { display: block; color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-as-card em { margin-left: auto; align-self: flex-start; color: var(--muted); font-size: .68rem; font-style: normal; font-weight: 700; }

.nx-faq { width: min(24rem, 100%); display: grid; gap: .35rem; }
.nx-faq details { border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent); transition: background-color .2s; }
.nx-faq details[open] { background: color-mix(in srgb, var(--text) 7%, transparent); }
.nx-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .9rem; font-weight: 700; font-size: .88rem; cursor: pointer; list-style: none; }
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq-plus { position: relative; width: .8rem; height: .8rem; flex: 0 0 auto; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.nx-faq-plus::before, .nx-faq-plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--muted); }
.nx-faq-plus::after { transform: rotate(90deg); }
.nx-faq details[open] .nx-faq-plus { transform: rotate(135deg); }
.nx-faq p { padding: 0 .9rem .85rem; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.nx-faq details[open] p span { display: inline-block; animation: nx-pf-in .4s calc(var(--i) * 18ms) both; }
.nx-faq details::details-content { block-size: 0; overflow: clip; transition: block-size .35s cubic-bezier(.2, .8, .2, 1), content-visibility .35s allow-discrete; }
.nx-faq details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { .nx-faq { interpolate-size: allow-keywords; } }

.nx-pacc { display: grid; gap: .4rem; width: min(18rem, 100%); }
.nx-pacc-item { border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; transition: border-radius .4s cubic-bezier(.3, 1.2, .5, 1), background-color .3s; }
.nx-pacc-item > button { width: 100%; display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; font-weight: 700; font-size: .86rem; color: var(--text); text-align: left; }
.nx-pacc-item > div { display: none; padding: 0 .95rem .9rem; color: var(--muted); font-size: .82rem; }
.nx-pacc-item.is-open { border-radius: 18px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.nx-pacc-item.is-open > div { display: block; animation: nx-pf-in .4s both; }

.nx-fb { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; padding: .5rem .55rem .5rem 1rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); font-weight: 700; font-size: .85rem; overflow: hidden; transition: border-radius .4s; max-width: 100%; }
.nx-fb > button { width: 2.2rem; height: 2.2rem; border-radius: 999px; font-size: 1rem; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .15s; }
.nx-fb > button:hover { background: color-mix(in srgb, var(--text) 10%, transparent); transform: scale(1.15) rotate(-8deg); }
.nx-fb.is-thanks { padding: .6rem 1rem; }
.nx-fb-thanks { display: inline-flex; align-items: center; gap: .4rem; color: #22c55e; animation: nx-pop-in .35s both; }
.nx-fb-thanks svg { width: 1rem; height: 1rem; }
.nx-fb.is-why { display: grid; justify-items: start; width: min(20rem, 100%); border-radius: 18px; padding: .9rem; }
.nx-fb-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.nx-fb-chips button { padding: .3rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); color: var(--muted); }
.nx-fb-chips button.is-on { background: var(--text); color: var(--bg); box-shadow: none; }
.nx-fb textarea { width: 100%; padding: .5rem .6rem; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); font: inherit; font-weight: 500; font-size: .82rem; resize: none; outline: none; }
.nx-fb-send { justify-self: end; padding: .4rem .9rem; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 800; font-size: .8rem; }

.nx-rate { position: relative; display: inline-block; padding-top: 2.2rem; }
.nx-rate-stars { display: flex; gap: .1rem; }
.nx-rate-stars button { font-size: 1.9rem; line-height: 1; color: color-mix(in srgb, var(--text) 18%, transparent); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), color .15s; }
.nx-rate-stars button.is-on { color: #fbbf24; }
.nx-rate-stars button.is-peek { transform: translateY(-4px); }
.nx-rate-stars button.is-here { transform: translateY(-6px) scale(1.3); }
.nx-rate-tip { position: absolute; left: 0; top: 0; padding: .25rem .55rem; border-radius: 8px; background: var(--text); color: var(--bg); font-size: .72rem; font-weight: 800; white-space: nowrap; opacity: 0; transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), opacity .2s; }
.nx-rate.has-tip .nx-rate-tip { opacity: 1; }

.nx-share { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 11%, transparent); max-width: 100%; overflow: hidden; }
.nx-share-faces { display: flex; padding-left: .2rem; }
.nx-share-faces .nx-ava { width: 1.8rem; height: 1.8rem; font-size: .6rem; animation: nx-pop-in .3s both; }
.nx-share-faces .nx-ava + .nx-ava { margin-left: -.5rem; }
.nx-share-copy, .nx-share-inv { display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding: 0 .8rem; border-radius: 999px; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.nx-share-copy { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.nx-share-copy svg { width: .9rem; height: .9rem; }
.nx-share-copy.is-done { color: #22c55e; }
.nx-share-inv { background: var(--text); color: var(--bg); }
.nx-share-form { display: none; align-items: center; gap: .3rem; }
.nx-share.is-inviting .nx-share-copy, .nx-share.is-inviting .nx-share-inv { display: none; }
.nx-share.is-inviting .nx-share-form { display: flex; animation: nx-pop-in .3s both; }
.nx-share-form input { width: 10rem; background: none; border: 0; outline: none; color: var(--text); font-size: .82rem; padding: 0 .4rem; }
.nx-share-form button { height: 2.1rem; padding: 0 .8rem; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 800; font-size: .8rem; }

.nx-folder { position: relative; width: 11rem; height: 8.5rem; margin-top: 2.5rem; outline: none; perspective: 700px; }
.nx-folder-back { position: absolute; inset: 0; border-radius: 6px 14px 14px 14px; background: #4f46e5; }
.nx-folder-back::before { content: ""; position: absolute; left: 0; top: -.7rem; width: 4.2rem; height: 1rem; border-radius: 8px 8px 0 0; background: #4f46e5; }
.nx-folder-pic { position: absolute; left: 50%; bottom: 1rem; width: 6.5rem; height: 5rem; margin-left: -3.25rem; border-radius: 8px; background: center / cover; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transform: translateY(0) rotate(calc(var(--i) * 4deg)); transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.nx-folder-front { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; display: flex; flex-direction: column; justify-content: flex-end; padding: .7rem .8rem; border-radius: 14px; background: linear-gradient(180deg, #6366f1, #4f46e5); color: #fff; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.2, .5, 1); box-shadow: 0 -2px 10px rgba(0, 0, 0, .2); }
.nx-folder-front span { font-weight: 800; font-size: .9rem; }
.nx-folder-front small { opacity: .75; font-size: .72rem; font-weight: 700; }
.nx-folder:hover .nx-folder-pic, .nx-folder:focus-visible .nx-folder-pic { transform: translate(calc(var(--i) * 3.2rem), -3.4rem) rotate(calc(var(--i) * 12deg)); }
.nx-folder:hover .nx-folder-pic:hover { transform: translate(calc(var(--i) * 3.2rem), -4.4rem) rotate(calc(var(--i) * 6deg)) scale(1.1); z-index: 2; }
.nx-folder:hover .nx-folder-front, .nx-folder:focus-visible .nx-folder-front { transform: rotateX(-24deg); }

.nx-like { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem .5rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font-weight: 800; }
.nx-like-heart { position: relative; display: grid; width: 1.4rem; height: 1.4rem; }
.nx-like-heart svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; transition: fill .2s, stroke .2s, transform .45s cubic-bezier(.3, 1.8, .5, 1); }
.nx-like.is-on .nx-like-heart svg { fill: #f43f5e; stroke: #f43f5e; }
.nx-like.is-burst .nx-like-heart svg { animation: nx-like-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nx-like-pop { 0% { transform: scale(.4); } 50% { transform: scale(1.35); } }
.nx-like-heart i { position: absolute; inset: -.6rem; border-radius: 999px; pointer-events: none; background: radial-gradient(circle, #f43f5e 2px, transparent 2.5px) 50% 0 / 6px 6px no-repeat, radial-gradient(circle, #fbbf24 2px, transparent 2.5px) 100% 50% / 6px 6px no-repeat, radial-gradient(circle, #a78bfa 2px, transparent 2.5px) 50% 100% / 6px 6px no-repeat, radial-gradient(circle, #22d3ee 2px, transparent 2.5px) 0 50% / 6px 6px no-repeat, radial-gradient(circle, #f43f5e 2px, transparent 2.5px) 85% 15% / 6px 6px no-repeat, radial-gradient(circle, #fbbf24 2px, transparent 2.5px) 15% 85% / 6px 6px no-repeat; opacity: 0; transform: scale(.4); }
.nx-like.is-burst .nx-like-heart i { animation: nx-like-burst .55s ease-out; }
@keyframes nx-like-burst { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
.nx-like .nx-digits { font-size: .95rem; height: 1.1rem; padding: 0; }
.nx-like .nx-digit, .nx-like .nx-digit i { height: 1.1rem; line-height: 1.1rem; }
.nx-folder-pic.is-sheet { background: #fafaf9 repeating-linear-gradient(180deg, transparent 0 .55rem, #d6d3d1 .55rem .62rem) .7rem 1rem / calc(100% - 1.4rem) 70% no-repeat; }
.nx-like.is-nocount .nx-digits { display: none; }